@mdigital_ui/ui 0.1.0 → 0.1.2

package/README.md

@@ -21,12 +21,42 @@ npm install @mdigital/ui
 
 ### Peer Dependencies
 
-Make sure you have these installed:
+Required dependencies:
 
 ```bash
 npm install react react-dom tailwindcss
 ```
 
+Optional dependencies (install only what you need based on components you use):
+
+```bash
+# For advanced components (Modal, Tooltip, Dropdown, Popover)
+npm install @radix-ui/react-dialog @radix-ui/react-popover @radix-ui/react-tooltip
+
+# For icons
+npm install lucide-react
+
+# For DatePicker
+npm install react-datepicker dayjs
+
+# For Table
+npm install @tanstack/react-table @tanstack/react-virtual
+
+# For Carousel
+npm install swiper
+
+# For Command
+npm install cmdk
+
+# For Charts
+npm install recharts
+
+# For Drawer
+npm install vaul
+```
+
+See [TREE_SHAKING_GUIDE.md](./TREE_SHAKING_GUIDE.md) for detailed information on optimizing your bundle.
+
 ## Quick Start
 
 ### 1. Configure Tailwind
@@ -74,25 +104,39 @@ function App() {
 
 ## Import Patterns
 
-### Named Imports (Recommended)
+### Subpath Imports (Recommended for Tree-Shaking)
+
+For optimal bundle size and to avoid installing unnecessary dependencies:
 
 ```tsx
-import { Button, Input, Select } from '@mdigital/ui'
+import Button from '@mdigital/ui/button'
+import Input from '@mdigital/ui/input'
+import Select from '@mdigital/ui/select'
 ```
 
-### Direct Imports (Better Tree-Shaking)
+**Benefits:**
+- Only bundles the components you use
+- Avoids peer dependency warnings for unused components
+- Fastest build times
+
+### Named Imports (Requires All Peer Dependencies)
+
+If you've installed all optional peer dependencies, you can use named imports:
 
 ```tsx
-import Button from '@mdigital/ui/button'
-import Input from '@mdigital/ui/input'
+import { Button, Input, Select, Table, DatePicker } from '@mdigital/ui'
 ```
 
+**Note:** This requires installing all optional peer dependencies, even for components you don't use. Your bundler may fail if dependencies for unused components aren't installed.
+
 ### Type Imports
 
 ```tsx
 import type { ButtonProps, InputProps } from '@mdigital/ui'
 ```
 
+**See [TREE_SHAKING_GUIDE.md](./TREE_SHAKING_GUIDE.md) for detailed import strategies.**
+
 ## Theming
 
 ### CSS Variable Overrides

package/dist/breadcrumbs/index.js

@@ -0,0 +1,7 @@
+export { BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breadcrumbs_default as default } from '../chunk-HUVXKOJC.js';
+import '../chunk-KNQ7UQ2W.js';
+import '../chunk-3PFA3YG6.js';
+import '../chunk-5UEWVFF6.js';
+import '../chunk-YNNAOXU5.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/breadcrumbs/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/button-group/index.js

@@ -0,0 +1,4 @@
+export { button_group_default as default } from '../chunk-56IXGP5C.js';
+import '../chunk-YNNAOXU5.js';
+//# sourceMappingURL=index.js.map
+//# sourceMappingURL=index.js.map

package/dist/button-group/index.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":[],"names":[],"mappings":"","file":"index.js"}

package/dist/chunk-56IXGP5C.js

@@ -0,0 +1,56 @@
+import { cn } from './chunk-YNNAOXU5.js';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var buttonGroupVariants = cva("inline-flex", {
+  variants: {
+    vertical: {
+      true: "flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:border-b-0 [&>*:not(:last-child)]:rounded-b-none",
+      false: "flex-row [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:border-r-0 [&>*:not(:last-child)]:rounded-r-none"
+    },
+    spacing: {
+      true: "gap-2",
+      false: "gap-0"
+    },
+    fullWidth: {
+      true: "w-full [&>*]:flex-1",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    vertical: false,
+    fullWidth: false
+  }
+});
+var ButtonGroup = React.memo(
+  ({
+    vertical = false,
+    spacing = false,
+    fullWidth = false,
+    className,
+    children,
+    ref,
+    ...props
+  }) => {
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref,
+        role: "group",
+        className: cn(
+          buttonGroupVariants({ vertical, spacing, fullWidth }),
+          className
+        ),
+        ...props,
+        children
+      }
+    );
+  }
+);
+ButtonGroup.displayName = "ButtonGroup";
+var button_group_default = ButtonGroup;
+
+export { button_group_default };
+//# sourceMappingURL=chunk-56IXGP5C.js.map
+//# sourceMappingURL=chunk-56IXGP5C.js.map

package/dist/chunk-56IXGP5C.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/button-group/index.tsx"],"names":[],"mappings":";;;;;AAMA,IAAM,mBAAA,GAAsB,IAAI,aAAA,EAAe;AAAA,EAC7C,QAAA,EAAU;AAAA,IACR,QAAA,EAAU;AAAA,MACR,IAAA,EAAM,yHAAA;AAAA,MACN,KAAA,EACE;AAAA,KACJ;AAAA,IACA,OAAA,EAAS;AAAA,MACP,IAAA,EAAM,OAAA;AAAA,MACN,KAAA,EAAO;AAAA,KACT;AAAA,IACA,SAAA,EAAW;AAAA,MACT,IAAA,EAAM,qBAAA;AAAA,MACN,KAAA,EAAO;AAAA;AACT,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,QAAA,EAAU,KAAA;AAAA,IACV,SAAA,EAAW;AAAA;AAEf,CAAC,CAAA;AAED,IAAM,cAAc,KAAA,CAAM,IAAA;AAAA,EACxB,CAAC;AAAA,IACC,QAAA,GAAW,KAAA;AAAA,IACX,OAAA,GAAU,KAAA;AAAA,IACV,SAAA,GAAY,KAAA;AAAA,IACZ,SAAA;AAAA,IACA,QAAA;AAAA,IACA,GAAA;AAAA,IACA,GAAG;AAAA,GACL,KAAM;AACJ,IAAA,uBACE,GAAA;AAAA,MAAC,KAAA;AAAA,MAAA;AAAA,QACC,GAAA;AAAA,QACA,IAAA,EAAK,OAAA;AAAA,QACL,SAAA,EAAW,EAAA;AAAA,UACT,mBAAA,CAAoB,EAAE,QAAA,EAAU,OAAA,EAAS,WAAW,CAAA;AAAA,UACpD;AAAA,SACF;AAAA,QACC,GAAG,KAAA;AAAA,QAEH;AAAA;AAAA,KACH;AAAA,EAEJ;AACF,CAAA;AAEA,WAAA,CAAY,WAAA,GAAc,aAAA;AAG1B,IAAO,oBAAA,GAAQ","file":"chunk-56IXGP5C.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport type { ButtonGroupProps } from './types'\n\nconst buttonGroupVariants = cva('inline-flex', {\n  variants: {\n    vertical: {\n      true: 'flex-col [&>*:not(:first-child)]:rounded-t-none [&>*:not(:last-child)]:border-b-0 [&>*:not(:last-child)]:rounded-b-none',\n      false:\n        'flex-row [&>*:not(:first-child)]:rounded-l-none [&>*:not(:last-child)]:border-r-0 [&>*:not(:last-child)]:rounded-r-none',\n    },\n    spacing: {\n      true: 'gap-2',\n      false: 'gap-0',\n    },\n    fullWidth: {\n      true: 'w-full [&>*]:flex-1',\n      false: '',\n    },\n  },\n  defaultVariants: {\n    vertical: false,\n    fullWidth: false,\n  },\n})\n\nconst ButtonGroup = React.memo<ButtonGroupProps>(\n  ({\n    vertical = false,\n    spacing = false,\n    fullWidth = false,\n    className,\n    children,\n    ref,\n    ...props\n  }) => {\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        className={cn(\n          buttonGroupVariants({ vertical, spacing, fullWidth }),\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    )\n  },\n)\n\nButtonGroup.displayName = 'ButtonGroup'\n\nexport type * from './types'\nexport default ButtonGroup\n"]}

package/dist/chunk-7PKVBUGL.js

@@ -0,0 +1,38 @@
+import { cn } from './chunk-YNNAOXU5.js';
+import { cva } from 'class-variance-authority';
+import React from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var gridVariants = cva("w-full grid", {
+  variants: {
+    gap: {
+      xs: "gap-2",
+      sm: "gap-4",
+      md: "gap-6",
+      lg: "gap-8"
+    },
+    columns: {
+      1: "grid-cols-1",
+      2: "grid-cols-1 md:grid-cols-2",
+      3: "grid-cols-1 md:grid-cols-2 lg:grid-cols-3",
+      4: "grid-cols-1 md:grid-cols-2 lg:grid-cols-4",
+      5: "grid-cols-1 md:grid-cols-3 lg:grid-cols-5",
+      6: "grid-cols-1 md:grid-cols-3 lg:grid-cols-6"
+    }
+  },
+  defaultVariants: {
+    gap: "md",
+    columns: 3
+  }
+});
+var Grid = React.memo(
+  ({ children, columns = 3, gap = "md", className }) => {
+    return /* @__PURE__ */ jsx("div", { className: cn(gridVariants({ gap, columns }), className), children });
+  }
+);
+Grid.displayName = "Grid";
+var grid_default = Grid;
+
+export { grid_default };
+//# sourceMappingURL=chunk-7PKVBUGL.js.map
+//# sourceMappingURL=chunk-7PKVBUGL.js.map

package/dist/chunk-7PKVBUGL.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/grid/index.tsx"],"names":[],"mappings":";;;;;AAMA,IAAM,YAAA,GAAe,IAAI,aAAA,EAAe;AAAA,EACtC,QAAA,EAAU;AAAA,IACR,GAAA,EAAK;AAAA,MACH,EAAA,EAAI,OAAA;AAAA,MACJ,EAAA,EAAI,OAAA;AAAA,MACJ,EAAA,EAAI,OAAA;AAAA,MACJ,EAAA,EAAI;AAAA,KACN;AAAA,IACA,OAAA,EAAS;AAAA,MACP,CAAA,EAAG,aAAA;AAAA,MACH,CAAA,EAAG,4BAAA;AAAA,MACH,CAAA,EAAG,2CAAA;AAAA,MACH,CAAA,EAAG,2CAAA;AAAA,MACH,CAAA,EAAG,2CAAA;AAAA,MACH,CAAA,EAAG;AAAA;AACL,GACF;AAAA,EACA,eAAA,EAAiB;AAAA,IACf,GAAA,EAAK,IAAA;AAAA,IACL,OAAA,EAAS;AAAA;AAEb,CAAC,CAAA;AAED,IAAM,OAAO,KAAA,CAAM,IAAA;AAAA,EACjB,CAAC,EAAE,QAAA,EAAU,OAAA,GAAU,GAAG,GAAA,GAAM,IAAA,EAAM,WAAU,KAAM;AACpD,IAAA,uBACE,GAAA,CAAC,KAAA,EAAA,EAAI,SAAA,EAAW,EAAA,CAAG,YAAA,CAAa,EAAE,GAAA,EAAK,OAAA,EAAS,CAAA,EAAG,SAAS,CAAA,EACzD,QAAA,EACH,CAAA;AAAA,EAEJ;AACF,CAAA;AAEA,IAAA,CAAK,WAAA,GAAc,MAAA;AAGnB,IAAO,YAAA,GAAQ","file":"chunk-7PKVBUGL.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport React from 'react'\n\nimport { cn } from '../utils'\nimport type { GridProps } from './types'\n\nconst gridVariants = cva('w-full grid', {\n  variants: {\n    gap: {\n      xs: 'gap-2',\n      sm: 'gap-4',\n      md: 'gap-6',\n      lg: 'gap-8',\n    },\n    columns: {\n      1: 'grid-cols-1',\n      2: 'grid-cols-1 md:grid-cols-2',\n      3: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-3',\n      4: 'grid-cols-1 md:grid-cols-2 lg:grid-cols-4',\n      5: 'grid-cols-1 md:grid-cols-3 lg:grid-cols-5',\n      6: 'grid-cols-1 md:grid-cols-3 lg:grid-cols-6',\n    },\n  },\n  defaultVariants: {\n    gap: 'md',\n    columns: 3,\n  },\n})\n\nconst Grid = React.memo<GridProps>(\n  ({ children, columns = 3, gap = 'md', className }) => {\n    return (\n      <div className={cn(gridVariants({ gap, columns }), className)}>\n        {children}\n      </div>\n    )\n  },\n)\n\nGrid.displayName = 'Grid'\n\nexport type * from './types'\nexport default Grid\n"]}

package/dist/chunk-HUVXKOJC.js

@@ -0,0 +1,198 @@
+import { dropdown_default } from './chunk-KNQ7UQ2W.js';
+import { textColorVariants } from './chunk-5UEWVFF6.js';
+import { cn, iconSizes } from './chunk-YNNAOXU5.js';
+import { cva } from 'class-variance-authority';
+import { ChevronRight, MoreHorizontal, MoreVertical } from 'lucide-react';
+import React from 'react';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+
+var BreadcrumbContext = React.createContext({});
+var breadcrumbVariants = cva("", {
+  variants: {
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      md: "text-base",
+      lg: "text-lg"
+    }
+  },
+  defaultVariants: {
+    size: "md"
+  }
+});
+var Breadcrumb = React.memo(
+  ({
+    children,
+    items,
+    color = "default",
+    size = "md",
+    separator,
+    className
+  }) => {
+    const content = items?.length ? /* @__PURE__ */ jsx(BreadcrumbList, { children: items.map((item, index) => {
+      const isLast = index === items.length - 1;
+      return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+        /* @__PURE__ */ jsx(BreadcrumbItem, { children: item.ellipsis ? /* @__PURE__ */ jsx(
+          BreadcrumbEllipsis,
+          {
+            orientation: item.ellipsisOrientation || "horizontal",
+            items: item.ellipsisItems || [],
+            size
+          }
+        ) : isLast ? /* @__PURE__ */ jsx(
+          BreadcrumbPage,
+          {
+            leftIcon: item.leftIcon,
+            rightIcon: item.rightIcon,
+            children: item.label
+          }
+        ) : /* @__PURE__ */ jsx(
+          BreadcrumbLink,
+          {
+            href: item.href || "",
+            onClick: item.onClick,
+            leftIcon: item.leftIcon,
+            rightIcon: item.rightIcon,
+            children: item.label
+          }
+        ) }),
+        !isLast && /* @__PURE__ */ jsx(BreadcrumbSeparator, { size, children: separator })
+      ] }, index);
+    }) }) : children;
+    return /* @__PURE__ */ jsx(BreadcrumbContext.Provider, { value: { color, size }, children: /* @__PURE__ */ jsx(
+      "nav",
+      {
+        "aria-label": "breadcrumb",
+        className: cn(
+          breadcrumbVariants({ size }),
+          textColorVariants({ color }),
+          className
+        ),
+        children: content
+      }
+    ) });
+  }
+);
+Breadcrumb.displayName = "Breadcrumb";
+var BreadcrumbList = React.memo(
+  ({ children, className }) => {
+    return /* @__PURE__ */ jsx("ol", { className: cn("flex items-center gap-1.5", className), children });
+  }
+);
+BreadcrumbList.displayName = "BreadcrumbList";
+var BreadcrumbItem = React.memo(
+  ({ children, className }) => {
+    return /* @__PURE__ */ jsx("li", { className: cn("inline-flex items-center gap-1.5", className), children });
+  }
+);
+BreadcrumbItem.displayName = "BreadcrumbItem";
+var BreadcrumbLink = React.memo(
+  ({ children, href, onClick, leftIcon, rightIcon, className }) => {
+    const handleClick = (e) => {
+      if (onClick) {
+        e.preventDefault();
+        onClick();
+      }
+    };
+    const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+      leftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: leftIcon }),
+      children,
+      rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: rightIcon })
+    ] });
+    if (href) {
+      return /* @__PURE__ */ jsx(
+        "a",
+        {
+          href,
+          onClick: handleClick,
+          className: cn(
+            "inline-flex items-center gap-1.5 transition-colors hover:underline cursor-pointer",
+            className
+          ),
+          children: content
+        }
+      );
+    }
+    if (onClick) {
+      return /* @__PURE__ */ jsx(
+        "button",
+        {
+          onClick: handleClick,
+          className: cn(
+            "inline-flex items-center gap-1.5 transition-colors hover:underline cursor-pointer",
+            className
+          ),
+          children: content
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx("span", { className: cn("inline-flex items-center gap-1.5", className), children: content });
+  }
+);
+BreadcrumbLink.displayName = "BreadcrumbLink";
+var BreadcrumbPage = React.memo(
+  ({ children, leftIcon, rightIcon, className }) => {
+    return /* @__PURE__ */ jsxs(
+      "span",
+      {
+        "aria-current": "page",
+        className: cn(
+          "inline-flex items-center gap-1.5 font-medium",
+          className
+        ),
+        children: [
+          leftIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: leftIcon }),
+          children,
+          rightIcon && /* @__PURE__ */ jsx("span", { className: "inline-flex items-center", children: rightIcon })
+        ]
+      }
+    );
+  }
+);
+BreadcrumbPage.displayName = "BreadcrumbPage";
+var BreadcrumbSeparator = React.memo(
+  ({ children, className, size = "md" }) => {
+    return /* @__PURE__ */ jsx("span", { className: cn("text-text-muted", className), children: children ?? /* @__PURE__ */ jsx(ChevronRight, { className: iconSizes[size] }) });
+  }
+);
+BreadcrumbSeparator.displayName = "BreadcrumbSeparator";
+var BreadcrumbEllipsis = React.memo(
+  ({ orientation = "horizontal", items, children, className, size = "md" }) => {
+    const Icon = orientation === "horizontal" ? MoreHorizontal : MoreVertical;
+    const ellipsisButton = /* @__PURE__ */ jsxs(
+      "span",
+      {
+        role: "presentation",
+        "aria-hidden": "true",
+        className: cn(
+          "flex items-center justify-center",
+          items || children ? "cursor-pointer" : "",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ jsx(Icon, { className: iconSizes[size] }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: "More" })
+        ]
+      }
+    );
+    if (items || children) {
+      const dropdownItems = (items || []).map((item) => ({
+        label: item.label || "",
+        value: item.label || "",
+        onClick: item.onClick || (() => {
+          if (item.href) {
+            window.location.href = item.href;
+          }
+        })
+      }));
+      return /* @__PURE__ */ jsx(dropdown_default, { items: dropdownItems, children: ellipsisButton });
+    }
+    return ellipsisButton;
+  }
+);
+BreadcrumbEllipsis.displayName = "BreadcrumbEllipsis";
+var breadcrumbs_default = Breadcrumb;
+
+export { BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, breadcrumbs_default };
+//# sourceMappingURL=chunk-HUVXKOJC.js.map
+//# sourceMappingURL=chunk-HUVXKOJC.js.map

package/dist/chunk-HUVXKOJC.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../src/breadcrumbs/index.tsx"],"names":[],"mappings":"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","file":"chunk-HUVXKOJC.js","sourcesContent":["import { cva } from 'class-variance-authority'\nimport { ChevronRight, MoreHorizontal, MoreVertical } from 'lucide-react'\nimport React from 'react'\n\nimport Dropdown from '../dropdown'\nimport { cn, iconSizes } from '../utils'\nimport { textColorVariants } from '../variants'\nimport type {\n  BreadcrumbEllipsisProps,\n  BreadcrumbItemProps,\n  BreadcrumbLinkProps,\n  BreadcrumbListProps,\n  BreadcrumbPageProps,\n  BreadcrumbProps,\n  BreadcrumbsColor,\n  BreadcrumbSeparatorProps,\n  BreadcrumbsSize,\n} from './types'\n\nexport type { BreadcrumbItemData } from './types'\n\ninterface BreadcrumbContextValue {\n  color?: BreadcrumbsColor\n  size?: BreadcrumbsSize\n}\n\nconst BreadcrumbContext = React.createContext<BreadcrumbContextValue>({})\n\nconst breadcrumbVariants = cva('', {\n  variants: {\n    size: {\n      xs: 'text-xs',\n      sm: 'text-sm',\n      md: 'text-base',\n      lg: 'text-lg',\n    },\n  },\n  defaultVariants: {\n    size: 'md',\n  },\n})\n\nconst Breadcrumb = React.memo<BreadcrumbProps>(\n  ({\n    children,\n    items,\n    color = 'default',\n    size = 'md',\n    separator,\n    className,\n  }) => {\n    const content = items?.length ? (\n      <BreadcrumbList>\n        {items.map((item, index) => {\n          const isLast = index === items.length - 1\n          return (\n            <React.Fragment key={index}>\n              <BreadcrumbItem>\n                {item.ellipsis ? (\n                  <BreadcrumbEllipsis\n                    orientation={item.ellipsisOrientation || 'horizontal'}\n                    items={item.ellipsisItems || []}\n                    size={size}\n                  />\n                ) : isLast ? (\n                  <BreadcrumbPage\n                    leftIcon={item.leftIcon}\n                    rightIcon={item.rightIcon}\n                  >\n                    {item.label}\n                  </BreadcrumbPage>\n                ) : (\n                  <BreadcrumbLink\n                    href={item.href || ''}\n                    onClick={item.onClick}\n                    leftIcon={item.leftIcon}\n                    rightIcon={item.rightIcon}\n                  >\n                    {item.label}\n                  </BreadcrumbLink>\n                )}\n              </BreadcrumbItem>\n              {!isLast && (\n                <BreadcrumbSeparator size={size}>\n                  {separator}\n                </BreadcrumbSeparator>\n              )}\n            </React.Fragment>\n          )\n        })}\n      </BreadcrumbList>\n    ) : (\n      children\n    )\n\n    return (\n      <BreadcrumbContext.Provider value={{ color, size }}>\n        <nav\n          aria-label=\"breadcrumb\"\n          className={cn(\n            breadcrumbVariants({ size }),\n            textColorVariants({ color }),\n            className,\n          )}\n        >\n          {content}\n        </nav>\n      </BreadcrumbContext.Provider>\n    )\n  },\n)\n\nBreadcrumb.displayName = 'Breadcrumb'\n\nexport const BreadcrumbList = React.memo<BreadcrumbListProps>(\n  ({ children, className }) => {\n    return (\n      <ol className={cn('flex items-center gap-1.5', className)}>{children}</ol>\n    )\n  },\n)\n\nBreadcrumbList.displayName = 'BreadcrumbList'\n\nexport const BreadcrumbItem = React.memo<BreadcrumbItemProps>(\n  ({ children, className }) => {\n    return (\n      <li className={cn('inline-flex items-center gap-1.5', className)}>\n        {children}\n      </li>\n    )\n  },\n)\n\nBreadcrumbItem.displayName = 'BreadcrumbItem'\n\nexport const BreadcrumbLink = React.memo<BreadcrumbLinkProps>(\n  ({ children, href, onClick, leftIcon, rightIcon, className }) => {\n    const handleClick = (e: React.MouseEvent) => {\n      if (onClick) {\n        e.preventDefault()\n        onClick()\n      }\n    }\n\n    const content = (\n      <>\n        {leftIcon && (\n          <span className=\"inline-flex items-center\">{leftIcon}</span>\n        )}\n        {children}\n        {rightIcon && (\n          <span className=\"inline-flex items-center\">{rightIcon}</span>\n        )}\n      </>\n    )\n\n    if (href) {\n      return (\n        <a\n          href={href}\n          onClick={handleClick}\n          className={cn(\n            'inline-flex items-center gap-1.5 transition-colors hover:underline cursor-pointer',\n            className,\n          )}\n        >\n          {content}\n        </a>\n      )\n    }\n\n    if (onClick) {\n      return (\n        <button\n          onClick={handleClick}\n          className={cn(\n            'inline-flex items-center gap-1.5 transition-colors hover:underline cursor-pointer',\n            className,\n          )}\n        >\n          {content}\n        </button>\n      )\n    }\n\n    return (\n      <span className={cn('inline-flex items-center gap-1.5', className)}>\n        {content}\n      </span>\n    )\n  },\n)\n\nBreadcrumbLink.displayName = 'BreadcrumbLink'\n\nexport const BreadcrumbPage = React.memo<BreadcrumbPageProps>(\n  ({ children, leftIcon, rightIcon, className }) => {\n    return (\n      <span\n        aria-current=\"page\"\n        className={cn(\n          'inline-flex items-center gap-1.5 font-medium',\n          className,\n        )}\n      >\n        {leftIcon && (\n          <span className=\"inline-flex items-center\">{leftIcon}</span>\n        )}\n        {children}\n        {rightIcon && (\n          <span className=\"inline-flex items-center\">{rightIcon}</span>\n        )}\n      </span>\n    )\n  },\n)\n\nBreadcrumbPage.displayName = 'BreadcrumbPage'\n\nexport const BreadcrumbSeparator = React.memo<BreadcrumbSeparatorProps>(\n  ({ children, className, size = 'md' }) => {\n    return (\n      <span className={cn('text-text-muted', className)}>\n        {children ?? <ChevronRight className={iconSizes[size]} />}\n      </span>\n    )\n  },\n)\n\nBreadcrumbSeparator.displayName = 'BreadcrumbSeparator'\n\nexport const BreadcrumbEllipsis = React.memo<BreadcrumbEllipsisProps>(\n  ({ orientation = 'horizontal', items, children, className, size = 'md' }) => {\n    const Icon = orientation === 'horizontal' ? MoreHorizontal : MoreVertical\n\n    const ellipsisButton = (\n      <span\n        role=\"presentation\"\n        aria-hidden=\"true\"\n        className={cn(\n          'flex items-center justify-center',\n          items || children ? 'cursor-pointer' : '',\n          className,\n        )}\n      >\n        <Icon className={iconSizes[size]} />\n        <span className=\"sr-only\">More</span>\n      </span>\n    )\n\n    // If items or children are provided, wrap in Dropdown\n    if (items || children) {\n      const dropdownItems = (items || []).map((item) => ({\n        label: item.label || '',\n        value: item.label || '',\n        onClick:\n          item.onClick ||\n          (() => {\n            if (item.href) {\n              window.location.href = item.href\n            }\n          }),\n      }))\n\n      return <Dropdown items={dropdownItems}>{ellipsisButton}</Dropdown>\n    }\n\n    return ellipsisButton\n  },\n)\n\nBreadcrumbEllipsis.displayName = 'BreadcrumbEllipsis'\n\nexport type * from './types'\nexport default Breadcrumb\n"]}