@ceed/ads 1.35.1 → 1.37.0

package/dist/components/navigation/Breadcrumbs.md

@@ -93,10 +93,10 @@ Breadcrumbs are available in three sizes -- `sm`, `md`, and `lg` -- allowing you
 
 ```tsx
 <div>
-  <Breadcrumbs {...args} size="sm" />
-  <Breadcrumbs {...args} size="md" />
-  <Breadcrumbs {...args} size="lg" />
-</div>
+    <Breadcrumbs {...args} size="sm" />
+    <Breadcrumbs {...args} size="md" />
+    <Breadcrumbs {...args} size="lg" />
+  </div>
 ```
 
 ## Breadcrumbs Custom Separator
@@ -104,48 +104,74 @@ Breadcrumbs are available in three sizes -- `sm`, `md`, and `lg` -- allowing you
 The separator character between items can be customized via the `separator` prop. Common choices include `/`, `>`, and `-`.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 16
-}}>
-<Breadcrumbs separator="/" crumbs={[{
-  label: 'Home',
-  type: 'link',
-  linkHref: '/'
-}, {
-  label: 'Category',
-  type: 'link',
-  linkHref: '/category'
-}, {
-  label: 'Item',
-  type: 'text'
-}]} collapsed={false} />
-<Breadcrumbs separator=">" crumbs={[{
-  label: 'Home',
-  type: 'link',
-  linkHref: '/'
-}, {
-  label: 'Category',
-  type: 'link',
-  linkHref: '/category'
-}, {
-  label: 'Item',
-  type: 'text'
-}]} collapsed={false} />
-<Breadcrumbs separator="-" crumbs={[{
-  label: 'Home',
-  type: 'link',
-  linkHref: '/'
-}, {
-  label: 'Category',
-  type: 'link',
-  linkHref: '/category'
-}, {
-  label: 'Item',
-  type: 'text'
-}]} collapsed={false} />
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: 16
+    }}
+  >
+    <Breadcrumbs
+      separator="/"
+      crumbs={[
+        {
+          label: "Home",
+          type: "link",
+          linkHref: "/"
+        },
+        {
+          label: "Category",
+          type: "link",
+          linkHref: "/category"
+        },
+        {
+          label: "Item",
+          type: "text"
+        }
+      ]}
+      collapsed={false}
+    />
+    <Breadcrumbs
+      separator=">"
+      crumbs={[
+        {
+          label: "Home",
+          type: "link",
+          linkHref: "/"
+        },
+        {
+          label: "Category",
+          type: "link",
+          linkHref: "/category"
+        },
+        {
+          label: "Item",
+          type: "text"
+        }
+      ]}
+      collapsed={false}
+    />
+    <Breadcrumbs
+      separator="-"
+      crumbs={[
+        {
+          label: "Home",
+          type: "link",
+          linkHref: "/"
+        },
+        {
+          label: "Category",
+          type: "link",
+          linkHref: "/category"
+        },
+        {
+          label: "Item",
+          type: "text"
+        }
+      ]}
+      collapsed={false}
+    />
+  </div>
 ```
 
 ## Collapsed Breadcrumbs
@@ -153,64 +179,96 @@ The separator character between items can be customized via the `separator` prop
 When paths are deep, the component automatically collapses middle items behind an ellipsis. You can control how many items appear at the start and end using `startCrumbCount` and `endCrumbCount`.
 
 ```tsx
-<div style={{
-  display: 'flex',
-  flexDirection: 'column',
-  gap: 16
-}}>
-<div>
-  <span style={{
-    fontSize: 12,
-    color: '#666'
-  }}>startCrumbCount: 1, endCrumbCount: 2</span>
-  <Breadcrumbs crumbs={[{
-    label: 'Home',
-    type: 'link',
-    linkHref: '/'
-  }, {
-    label: 'Products',
-    type: 'link',
-    linkHref: '/products'
-  }, {
-    label: 'Electronics',
-    type: 'link',
-    linkHref: '/electronics'
-  }, {
-    label: 'Computers',
-    type: 'link',
-    linkHref: '/computers'
-  }, {
-    label: 'Laptops',
-    type: 'text'
-  }]} collapsed={true} startCrumbCount={1} endCrumbCount={2} />
-</div>
-<div>
-  <span style={{
-    fontSize: 12,
-    color: '#666'
-  }}>startCrumbCount: 2, endCrumbCount: 1</span>
-  <Breadcrumbs crumbs={[{
-    label: 'Home',
-    type: 'link',
-    linkHref: '/'
-  }, {
-    label: 'Products',
-    type: 'link',
-    linkHref: '/products'
-  }, {
-    label: 'Electronics',
-    type: 'link',
-    linkHref: '/electronics'
-  }, {
-    label: 'Computers',
-    type: 'link',
-    linkHref: '/computers'
-  }, {
-    label: 'Laptops',
-    type: 'text'
-  }]} collapsed={true} startCrumbCount={2} endCrumbCount={1} />
-</div>
-</div>
+<div
+    style={{
+      display: "flex",
+      flexDirection: "column",
+      gap: 16
+    }}
+  >
+    <div>
+      <span
+        style={{
+          fontSize: 12,
+          color: "#666"
+        }}
+      >
+        startCrumbCount: 1, endCrumbCount: 2
+      </span>
+      <Breadcrumbs
+        crumbs={[
+          {
+            label: "Home",
+            type: "link",
+            linkHref: "/"
+          },
+          {
+            label: "Products",
+            type: "link",
+            linkHref: "/products"
+          },
+          {
+            label: "Electronics",
+            type: "link",
+            linkHref: "/electronics"
+          },
+          {
+            label: "Computers",
+            type: "link",
+            linkHref: "/computers"
+          },
+          {
+            label: "Laptops",
+            type: "text"
+          }
+        ]}
+        collapsed={true}
+        startCrumbCount={1}
+        endCrumbCount={2}
+      />
+    </div>
+    <div>
+      <span
+        style={{
+          fontSize: 12,
+          color: "#666"
+        }}
+      >
+        startCrumbCount: 2, endCrumbCount: 1
+      </span>
+      <Breadcrumbs
+        crumbs={[
+          {
+            label: "Home",
+            type: "link",
+            linkHref: "/"
+          },
+          {
+            label: "Products",
+            type: "link",
+            linkHref: "/products"
+          },
+          {
+            label: "Electronics",
+            type: "link",
+            linkHref: "/electronics"
+          },
+          {
+            label: "Computers",
+            type: "link",
+            linkHref: "/computers"
+          },
+          {
+            label: "Laptops",
+            type: "text"
+          }
+        ]}
+        collapsed={true}
+        startCrumbCount={2}
+        endCrumbCount={1}
+      />
+    </div>
+  </div>
 ```
 
 ## Expanded Breadcrumbs
@@ -270,18 +328,26 @@ The component handles the edge case of a single breadcrumb item gracefully.
 Breadcrumb items can include icons alongside their labels.
 
 ```tsx
-<Breadcrumbs {...args} crumbs={[{
-  label: 'Home',
-  type: 'link',
-  linkHref: '/'
-}, {
-  label: 'Settings',
-  type: 'link',
-  linkHref: '/settings'
-}, {
-  label: 'Profile',
-  type: 'text'
-}]} collapsed={false} />
+<Breadcrumbs
+    {...args}
+    crumbs={[
+      {
+        label: "Home",
+        type: "link",
+        linkHref: "/"
+      },
+      {
+        label: "Settings",
+        type: "link",
+        linkHref: "/settings"
+      },
+      {
+        label: "Profile",
+        type: "text"
+      }
+    ]}
+    collapsed={false}
+  />
 ```
 
 ## Breadcrumbs in Admin Dashboard