Adding some stories in 'core' section and adding some minor adjusment

packages/breadcrumb/src/lib/breadcrumb.tsx

@@ -12,9 +12,9 @@ export const Breadcrumbs: React.FC<BreadcrumbsProps> = ({ children, items, class
   return (
     <nav className={cn("flex", className)} aria-label="Breadcrumb">
       <ol role="list" className="flex items-center space-x-2">
-        {items?.map((item,index) => (
+        {items?.map((item, index) => (
           <li key={index}>
-            <div className="flex items-center">
+            <div className="inline-flex items-center">
               {index > 0 && (
                 <GoChevronRight
                   className="mr-2 h-3 w-3 flex-shrink-0 text-gray-500"
@@ -60,30 +60,27 @@ export const BreadcrumbItem: React.FC<BreadcrumbItemProps> = ({
 }) => {
   const content = href ? (
     <a
-      className={`text-sm font-medium ${
-        isActive ? 'text-indigo-600' : 'text-gray-500 hover:text-gray-700'
-      }`}
+      className={`text-sm font-medium ${isActive ? 'text-indigo-600' : 'text-gray-500 hover:text-gray-700'
+        }`}
       href={href}
     >
       {children}
     </a>
   ) : (
     <span
-      className={`text-sm font-medium ${
-        isActive ? 'text-indigo-600' : 'text-gray-500'
-      }`}
+      className={`text-sm font-medium ${isActive ? 'text-indigo-600' : 'text-gray-500'
+        }`}
     >
       {children}
     </span>
   );
 
   return (
-    <div className={cn("breadcrumb", className)}>
+    <div className={cn("breadcrumb inline-flex", className)}>
       {icon &&
         React.cloneElement(icon as React.ReactElement, {
-          className: `${isActive ? 'text-indigo-600' : 'text-gray-500'} ${
-            children ? 'mr-2' : ''
-          }`,
+          className: `${isActive ? 'text-indigo-600' : 'text-gray-500'} ${children ? 'mr-2' : ''
+            }`,
         })}
       {content}
     </div>

packages/core/src/stories/BackdropBlur.stories.tsx

@@ -0,0 +1,70 @@
+import { Meta } from '@storybook/react';
+
+export default {
+    title: 'Components/Core/Backdrop Blur',
+} as Meta;
+
+export const AllBackdropBlur = () => {
+
+    return (
+        <div style={{
+            backgroundImage: "url(" + 'https://w0.peakpx.com/wallpaper/390/257/HD-wallpaper-macos-ventura-ios-16-dark-wwdc-2022-apple.jpg' + ")", backgroundPosition: 'center',
+            backgroundSize: 'cover',
+            backgroundRepeat: 'no-repeat'
+        }} className='p-4'>
+            <p className='px-5 mb-8 text-white'>All the backrop blur used by default tailwind classes https://tailwindcss.com/docs/backdrop-blur</p>
+            <div className="flex gap-5 mb-5 px-5">
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-none" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur-none</span>
+                    </p>
+                </div>
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-sm" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur-sm</span>
+                    </p>
+                </div>
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur</span>
+                    </p>
+                </div>
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-md" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur-md</span>
+                    </p>
+                </div>
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-lg" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur-lg</span>
+                    </p>
+                </div>
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-xl" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur-xl</span>
+                    </p>
+                </div>
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-2xl" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur-2xl</span>
+                    </p>
+                </div>
+            </div>
+            <div className="flex gap-5 mb-5 px-5">
+                <div>
+                    <div className="w-48 h-48 bg-white/30 rounded-lg backdrop-blur-3xl" />
+                    <p className='text-white flex justify-between mt-5'>
+                        <span>blur-3xl</span>
+                    </p>
+                </div>
+            </div>
+        </div>
+    )
+}

packages/core/src/stories/Blur.stories.tsx

@@ -0,0 +1,66 @@
+import { Meta } from '@storybook/react';
+
+export default {
+  title: 'Components/Core/Blur',
+} as Meta;
+
+export const AllBlur = () => {
+
+  return (
+    <div className='bg-gradient-to-b from-blue-400 to-blue-600 p-4'>
+      <p className='px-5 mb-8 text-white'>All the blur used by default tailwind classes https://tailwindcss.com/docs/blur</p>
+      <div className="flex gap-5 mb-5 px-5">
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur-[0px]" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur-none</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur-sm" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur-sm</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur-md" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur-md</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur-lg" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur-lg</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur-xl" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur-xl</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur-2xl" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur-2xl</span>
+          </p>
+        </div>
+      </div>
+      <div className="flex gap-5 mb-5 px-5">
+        <div>
+          <div className="w-48 h-48 bg-white rounded-lg blur-3xl" />
+          <p className='text-white flex justify-between mt-5'>
+            <span>blur-3xl</span>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/core/src/stories/Colors.stories.tsx

@@ -1,17 +1,7 @@
 import { Meta } from '@storybook/react';
 
-import Title from '@bootwind/title';
-
 export default {
   title: 'Components/Core/Colors',
-  argTypes: {
-    variant: {
-      control: { type: 'radio', options: ['primary', 'secondary', 'ghost'] },
-    },
-    size: {
-      control: { type: 'radio', options: ['sm', 'md', 'lg', 'xl'] },
-    },
-  },
 } as Meta;
 
 export const AllColors = () => {
@@ -42,8 +32,16 @@ export const AllColors = () => {
   const levels = [50, 100, 200, 300, 400, 500, 600, 700, 800, 900, 950]
 
   return (
-    <div>
-
+    <div className='bg-[#F4F5F7] p-4'>
+      <div className="flex gap-5 mb-5 px-5">
+        <div>
+          <div className={`color-swatch bg-primary w-48 h-16 rounded-md`} >
+          </div>
+          <p className='flex justify-between'>
+            <span>primary</span>
+          </p>
+        </div>
+      </div>
       {colors.map(color => {
         return (
           <div className="flex gap-5 mb-5 px-5">

packages/core/src/stories/Container.stories.tsx

@@ -0,0 +1,32 @@
+import { Meta } from '@storybook/react';
+
+export default {
+  title: 'Components/Core/Container',
+} as Meta;
+
+export const AllContainer = () => {
+
+  return (
+    <div className='bg-[#F4F5F7] p-4'>
+      <p className='px-5 mb-5'>All the container used by default tailwind classes https://tailwindcss.com/docs/container</p>
+
+      <div className="w-[1536px] h-[440px] flex-col justify-start items-center gap-[30px] inline-flex">
+        <div className="w-[640px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
+          <div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">sm (640px)</div>
+        </div>
+        <div className="w-[768px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
+          <div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">md (768px)</div>
+        </div>
+        <div className="w-[1024px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
+          <div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">lg (1024px)</div>
+        </div>
+        <div className="w-[1280px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
+          <div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">xl (1280px)</div>
+        </div>
+        <div className="w-[1536px] py-5 bg-violet-200 justify-center items-start gap-8 inline-flex">
+          <div className="text-center text-black text-base font-bold font-['Inter'] leading-normal tracking-tight">2xl (1536px)</div>
+        </div>
+      </div>
+    </div>
+  )
+}

packages/core/src/stories/Gradients.stories.tsx

@@ -0,0 +1,91 @@
+import { Meta } from '@storybook/react';
+
+export default {
+  title: 'Components/Core/Gradients',
+} as Meta;
+
+export const AllGradients = () => {
+
+  return (
+    <div className='bg-[#F4F5F7] p-4'>
+      <p className='px-5 mb-5'>All the gradients use bg-gradient-to-b tailwind classes and the color from - to is below the gradients box.</p>
+      <div className="flex gap-5 mb-5 px-5">
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-fuchsia-500 to-indigo-600 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>fuchsia-500 → indigo-600</span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-indigo-500 to-indigo-800 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>indigo-500 → indigo-800 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-pink-500 to-indigo-600 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>pink-500 → indigo-600 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-sky-400 to-purple-500 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>sky-400 → purple-500 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-violet-400 to-purple-700 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>violet-400 → purple-700 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-blue-400 to-blue-600 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>blue-400 → blue-600 </span>
+          </p>
+        </div>
+      </div>
+
+      <div className="flex gap-5 mb-5 px-5">
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-emerald-400 to-lime-700 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>emerald-400 → lime-700 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-yellow-200 to-lime-700 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>yellow-200 → lime-700 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-green-400 to-blue-500 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>green-400 → blue-500 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-blue-500 to-pink-500 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>blue-500 → pink-500 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-orange-500 to-pink-600 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>orange-500 → pink-600 </span>
+          </p>
+        </div>
+        <div>
+          <div className="w-48 h-20 bg-gradient-to-b from-fuchsia-700 to-red-500 rounded-lg" />
+          <p className='flex justify-between'>
+            <span>fuchsia-700 → red-500 </span>
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}