@health-samurai/react-components 0.0.0-alpha.2 → 0.0.0-alpha.21

package/dist/src/shadcn/components/ui/breadcrumb.js

@@ -1,37 +1,122 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
-import { MoreHorizontal } from "lucide-react";
+import { ChevronDownIcon, MoreHorizontal } from "lucide-react";
+import { createContext, useContext } from "react";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuTrigger } from "./dropdown-menu.js";
 import { cn } from "../../lib/utils.js";
-function Breadcrumb({ ...props }) {
-    return /*#__PURE__*/ _jsx("nav", {
-        "aria-label": "breadcrumb",
-        "data-slot": "breadcrumb",
-        ...props
+import { IconButton } from "../../../components/icon-button.js";
+// Styles
+const breadcrumbListStyles = cn(// Typography
+"typo-body", "text-text-tertiary", // Layout
+"flex", "flex-wrap", "items-center", "break-words", // Spacing
+"gap-2");
+const breadcrumbItemStyles = cn(// Layout
+"inline-flex", "items-center");
+const breadcrumbLinkBaseStyles = cn(// Typography
+"typo-body", // Layout
+"px-2", "py-1", // Colors
+"bg-bg-tertiary", "text-text-tertiary", "hover:text-text-secondary", // Shape
+"rounded-md", // Interaction
+"transition-colors", "focus-visible:outline-none", "focus-visible:ring-2", "focus-visible:ring-utility-blue/70");
+const breadcrumbLinkWithDropdownStyles = cn(// Shape
+"rounded-l-md", "rounded-r-none");
+const breadcrumbSeparatorStyles = cn(// Size
+"h-4", "w-px", "shrink-0", // Colors
+"bg-border-separator");
+const breadcrumbTriggerContainerStyles = cn(// Layout
+"flex", "items-center", "gap-2", "h-7", "pl-0", "pr-2", "py-1", // Colors
+"bg-bg-tertiary", // Shape
+"rounded-r-md", "rounded-l-none");
+const breadcrumbIconButtonStyles = cn(// Size
+"size-auto", "p-0", // Colors
+"bg-transparent", "hover:bg-transparent", "text-text-tertiary", "hover:text-text-secondary");
+const breadcrumbPageBaseStyles = cn(// Typography
+"typo-page-header", // Layout
+"px-0", "py-0.5", // Colors
+"text-text-primary");
+const breadcrumbPageWhiteStyles = cn(// Colors
+"text-white");
+const breadcrumbSeparatorBaseStyles = cn(// Typography
+"text-xs", "text-text-tertiary", // SVG
+"[&>svg]:size-3.5");
+const breadcrumbEllipsisStyles = cn(// Layout
+"flex", "size-9", "items-center", "justify-center");
+const BreadcrumbContext = /*#__PURE__*/ createContext({});
+function Breadcrumb({ isWhite, ...props }) {
+    return /*#__PURE__*/ _jsx(BreadcrumbContext.Provider, {
+        value: isWhite !== undefined ? {
+            isWhite
+        } : {},
+        children: /*#__PURE__*/ _jsx("nav", {
+            "aria-label": "breadcrumb",
+            "data-slot": "breadcrumb",
+            ...props
+        })
     });
 }
 function BreadcrumbList({ className, ...props }) {
     return /*#__PURE__*/ _jsx("ol", {
         "data-slot": "breadcrumb-list",
-        className: cn("text-text-tertiary typo-body flex flex-wrap items-center break-words gap-2", className),
+        className: cn(breadcrumbListStyles, className),
         ...props
     });
 }
 function BreadcrumbItem({ className, ...props }) {
     return /*#__PURE__*/ _jsx("li", {
         "data-slot": "breadcrumb-item",
-        className: cn("inline-flex items-center", className),
+        className: cn(breadcrumbItemStyles, className),
         ...props
     });
 }
-function BreadcrumbLink({ asChild, className, ...props }) {
+function BreadcrumbLink({ asChild, className, dropdownContent, ...props }) {
     const Comp = asChild ? Slot : "a";
+    const linkStyles = cn(breadcrumbLinkBaseStyles, dropdownContent && breadcrumbLinkWithDropdownStyles, className);
+    if (dropdownContent) {
+        return /*#__PURE__*/ _jsxs("div", {
+            className: "inline-flex items-center",
+            children: [
+                /*#__PURE__*/ _jsx(Comp, {
+                    "data-slot": "breadcrumb-link",
+                    className: linkStyles,
+                    ...props
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: breadcrumbTriggerContainerStyles,
+                    children: [
+                        /*#__PURE__*/ _jsx("div", {
+                            className: breadcrumbSeparatorStyles
+                        }),
+                        /*#__PURE__*/ _jsxs(DropdownMenu, {
+                            children: [
+                                /*#__PURE__*/ _jsx(DropdownMenuTrigger, {
+                                    asChild: true,
+                                    children: /*#__PURE__*/ _jsx(IconButton, {
+                                        icon: /*#__PURE__*/ _jsx(ChevronDownIcon, {
+                                            className: "size-4"
+                                        }),
+                                        "aria-label": "Toggle menu",
+                                        className: breadcrumbIconButtonStyles
+                                    })
+                                }),
+                                /*#__PURE__*/ _jsx(DropdownMenuContent, {
+                                    align: "start",
+                                    children: dropdownContent
+                                })
+                            ]
+                        })
+                    ]
+                })
+            ]
+        });
+    }
     return /*#__PURE__*/ _jsx(Comp, {
         "data-slot": "breadcrumb-link",
-        className: cn("typo-body bg-bg-tertiary text-text-tertiary rounded-md px-2 py-1 transition-colors", "hover:text-text-secondary", "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring", className),
+        className: linkStyles,
         ...props
     });
 }
 function BreadcrumbPage({ className, ...props }) {
+    const { isWhite } = useContext(BreadcrumbContext);
     return(// biome-ignore lint/a11y/useFocusableInteractive: FIXME: unchanged shadcn
     // biome-ignore lint/a11y/useSemanticElements: FIXME: unchanged shadcn
     /*#__PURE__*/ _jsx("span", {
@@ -39,7 +124,7 @@ function BreadcrumbPage({ className, ...props }) {
         role: "link",
         "aria-disabled": "true",
         "aria-current": "page",
-        className: cn("typo-page-header text-text-primary px-0 py-0.5", className),
+        className: cn(breadcrumbPageBaseStyles, isWhite && breadcrumbPageWhiteStyles, className),
         ...props
     }));
 }
@@ -48,7 +133,7 @@ function BreadcrumbSeparator({ children, className, ...props }) {
         "data-slot": "breadcrumb-separator",
         role: "presentation",
         "aria-hidden": "true",
-        className: cn("[&>svg]:size-3.5 text-text-quternary text-xs", className),
+        className: cn(breadcrumbSeparatorBaseStyles, className),
         ...props,
         children: children ?? "/"
     });
@@ -58,7 +143,7 @@ function BreadcrumbEllipsis({ className, ...props }) {
         "data-slot": "breadcrumb-ellipsis",
         role: "presentation",
         "aria-hidden": "true",
-        className: cn("flex size-9 items-center justify-center", className),
+        className: cn(breadcrumbEllipsisStyles, className),
         ...props,
         children: [
             /*#__PURE__*/ _jsx(MoreHorizontal, {

package/dist/src/shadcn/components/ui/breadcrumb.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/breadcrumb.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { MoreHorizontal } from \"lucide-react\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\nfunction Breadcrumb({ ...props }: React.ComponentProps<\"nav\">) {\n\treturn <nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />;\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n\treturn (\n\t\t<ol\n\t\t\tdata-slot=\"breadcrumb-list\"\n\t\t\tclassName={cn(\n\t\t\t\t\"text-text-tertiary typo-body flex flex-wrap items-center break-words gap-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n\treturn (\n\t\t<li\n\t\t\tdata-slot=\"breadcrumb-item\"\n\t\t\tclassName={cn(\"inline-flex items-center\", className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbLink({\n\tasChild,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"a\"> & {\n\tasChild?: boolean;\n}) {\n\tconst Comp = asChild ? Slot : \"a\";\n\n\treturn (\n\t\t<Comp\n\t\t\tdata-slot=\"breadcrumb-link\"\n\t\t\tclassName={cn(\n\t\t\t\t\"typo-body bg-bg-tertiary text-text-tertiary rounded-md px-2 py-1 transition-colors\",\n\t\t\t\t\"hover:text-text-secondary\",\n\t\t\t\t\"focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t// biome-ignore lint/a11y/useFocusableInteractive: FIXME: unchanged shadcn\n\t\t// biome-ignore lint/a11y/useSemanticElements: FIXME: unchanged shadcn\n\t\t<span\n\t\t\tdata-slot=\"breadcrumb-page\"\n\t\t\trole=\"link\"\n\t\t\taria-disabled=\"true\"\n\t\t\taria-current=\"page\"\n\t\t\tclassName={cn(\n\t\t\t\t\"typo-page-header text-text-primary px-0 py-0.5\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbSeparator({\n\tchildren,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"li\">) {\n\treturn (\n\t\t<li\n\t\t\tdata-slot=\"breadcrumb-separator\"\n\t\t\trole=\"presentation\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(\"[&>svg]:size-3.5 text-text-quternary text-xs\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children ?? \"/\"}\n\t\t</li>\n\t);\n}\n\nfunction BreadcrumbEllipsis({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"breadcrumb-ellipsis\"\n\t\t\trole=\"presentation\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(\"flex size-9 items-center justify-center\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<MoreHorizontal className=\"size-4\" />\n\t\t\t<span className=\"sr-only\">More</span>\n\t\t</span>\n\t);\n}\n\nexport {\n\tBreadcrumb,\n\tBreadcrumbList,\n\tBreadcrumbItem,\n\tBreadcrumbLink,\n\tBreadcrumbPage,\n\tBreadcrumbSeparator,\n\tBreadcrumbEllipsis,\n};\n"],"names":["Slot","MoreHorizontal","cn","Breadcrumb","props","nav","aria-label","data-slot","BreadcrumbList","className","ol","BreadcrumbItem","li","BreadcrumbLink","asChild","Comp","BreadcrumbPage","span","role","aria-disabled","aria-current","BreadcrumbSeparator","children","aria-hidden","BreadcrumbEllipsis"],"mappings":";AAAA,SAASA,IAAI,QAAQ,uBAAuB;AAC5C,SAASC,cAAc,QAAQ,eAAe;AAG9C,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,SAASC,WAAW,EAAE,GAAGC,OAAoC;IAC5D,qBAAO,KAACC;QAAIC,cAAW;QAAaC,aAAU;QAAc,GAAGH,KAAK;;AACrE;AAEA,SAASI,eAAe,EAAEC,SAAS,EAAE,GAAGL,OAAmC;IAC1E,qBACC,KAACM;QACAH,aAAU;QACVE,WAAWP,GACV,8EACAO;QAEA,GAAGL,KAAK;;AAGZ;AAEA,SAASO,eAAe,EAAEF,SAAS,EAAE,GAAGL,OAAmC;IAC1E,qBACC,KAACQ;QACAL,aAAU;QACVE,WAAWP,GAAG,4BAA4BO;QACzC,GAAGL,KAAK;;AAGZ;AAEA,SAASS,eAAe,EACvBC,OAAO,EACPL,SAAS,EACT,GAAGL,OAGH;IACA,MAAMW,OAAOD,UAAUd,OAAO;IAE9B,qBACC,KAACe;QACAR,aAAU;QACVE,WAAWP,GACV,sFACA,6BACA,2EACAO;QAEA,GAAGL,KAAK;;AAGZ;AAEA,SAASY,eAAe,EAAEP,SAAS,EAAE,GAAGL,OAAqC;IAC5E,OACC,0EAA0E;IAC1E,sEAAsE;kBACtE,KAACa;QACAV,aAAU;QACVW,MAAK;QACLC,iBAAc;QACdC,gBAAa;QACbX,WAAWP,GACV,kDACAO;QAEA,GAAGL,KAAK;;AAGZ;AAEA,SAASiB,oBAAoB,EAC5BC,QAAQ,EACRb,SAAS,EACT,GAAGL,OACyB;IAC5B,qBACC,KAACQ;QACAL,aAAU;QACVW,MAAK;QACLK,eAAY;QACZd,WAAWP,GAAG,gDAAgDO;QAC7D,GAAGL,KAAK;kBAERkB,YAAY;;AAGhB;AAEA,SAASE,mBAAmB,EAC3Bf,SAAS,EACT,GAAGL,OAC2B;IAC9B,qBACC,MAACa;QACAV,aAAU;QACVW,MAAK;QACLK,eAAY;QACZd,WAAWP,GAAG,2CAA2CO;QACxD,GAAGL,KAAK;;0BAET,KAACH;gBAAeQ,WAAU;;0BAC1B,KAACQ;gBAAKR,WAAU;0BAAU;;;;AAG7B;AAEA,SACCN,UAAU,EACVK,cAAc,EACdG,cAAc,EACdE,cAAc,EACdG,cAAc,EACdK,mBAAmB,EACnBG,kBAAkB,GACjB"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/breadcrumb.tsx"],"sourcesContent":["import { Slot } from \"@radix-ui/react-slot\";\nimport { ChevronDownIcon, MoreHorizontal } from \"lucide-react\";\nimport type * as React from \"react\";\nimport { createContext, useContext } from \"react\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuTrigger,\n} from \"#shadcn/components/ui/dropdown-menu\";\nimport { cn } from \"#shadcn/lib/utils\";\nimport { IconButton } from \"../../../components/icon-button\";\n\n// Styles\nconst breadcrumbListStyles = cn(\n\t// Typography\n\t\"typo-body\",\n\t\"text-text-tertiary\",\n\t// Layout\n\t\"flex\",\n\t\"flex-wrap\",\n\t\"items-center\",\n\t\"break-words\",\n\t// Spacing\n\t\"gap-2\",\n);\n\nconst breadcrumbItemStyles = cn(\n\t// Layout\n\t\"inline-flex\",\n\t\"items-center\",\n);\n\nconst breadcrumbLinkBaseStyles = cn(\n\t// Typography\n\t\"typo-body\",\n\t// Layout\n\t\"px-2\",\n\t\"py-1\",\n\t// Colors\n\t\"bg-bg-tertiary\",\n\t\"text-text-tertiary\",\n\t\"hover:text-text-secondary\",\n\t// Shape\n\t\"rounded-md\",\n\t// Interaction\n\t\"transition-colors\",\n\t\"focus-visible:outline-none\",\n\t\"focus-visible:ring-2\",\n\t\"focus-visible:ring-utility-blue/70\",\n);\n\nconst breadcrumbLinkWithDropdownStyles = cn(\n\t// Shape\n\t\"rounded-l-md\",\n\t\"rounded-r-none\",\n);\n\nconst breadcrumbSeparatorStyles = cn(\n\t// Size\n\t\"h-4\",\n\t\"w-px\",\n\t\"shrink-0\",\n\t// Colors\n\t\"bg-border-separator\",\n);\n\nconst breadcrumbTriggerContainerStyles = cn(\n\t// Layout\n\t\"flex\",\n\t\"items-center\",\n\t\"gap-2\",\n\t\"h-7\",\n\t\"pl-0\",\n\t\"pr-2\",\n\t\"py-1\",\n\t// Colors\n\t\"bg-bg-tertiary\",\n\t// Shape\n\t\"rounded-r-md\",\n\t\"rounded-l-none\",\n);\n\nconst breadcrumbIconButtonStyles = cn(\n\t// Size\n\t\"size-auto\",\n\t\"p-0\",\n\t// Colors\n\t\"bg-transparent\",\n\t\"hover:bg-transparent\",\n\t\"text-text-tertiary\",\n\t\"hover:text-text-secondary\",\n);\n\nconst breadcrumbPageBaseStyles = cn(\n\t// Typography\n\t\"typo-page-header\",\n\t// Layout\n\t\"px-0\",\n\t\"py-0.5\",\n\t// Colors\n\t\"text-text-primary\",\n);\n\nconst breadcrumbPageWhiteStyles = cn(\n\t// Colors\n\t\"text-white\",\n);\n\nconst breadcrumbSeparatorBaseStyles = cn(\n\t// Typography\n\t\"text-xs\",\n\t\"text-text-tertiary\",\n\t// SVG\n\t\"[&>svg]:size-3.5\",\n);\n\nconst breadcrumbEllipsisStyles = cn(\n\t// Layout\n\t\"flex\",\n\t\"size-9\",\n\t\"items-center\",\n\t\"justify-center\",\n);\n\nconst BreadcrumbContext = createContext<{ isWhite?: boolean }>({});\n\nfunction Breadcrumb({\n\tisWhite,\n\t...props\n}: React.ComponentProps<\"nav\"> & { isWhite?: boolean }) {\n\treturn (\n\t\t<BreadcrumbContext.Provider\n\t\t\tvalue={isWhite !== undefined ? { isWhite } : {}}\n\t\t>\n\t\t\t<nav aria-label=\"breadcrumb\" data-slot=\"breadcrumb\" {...props} />\n\t\t</BreadcrumbContext.Provider>\n\t);\n}\n\nfunction BreadcrumbList({ className, ...props }: React.ComponentProps<\"ol\">) {\n\treturn (\n\t\t<ol\n\t\t\tdata-slot=\"breadcrumb-list\"\n\t\t\tclassName={cn(breadcrumbListStyles, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbItem({ className, ...props }: React.ComponentProps<\"li\">) {\n\treturn (\n\t\t<li\n\t\t\tdata-slot=\"breadcrumb-item\"\n\t\t\tclassName={cn(breadcrumbItemStyles, className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbLink({\n\tasChild,\n\tclassName,\n\tdropdownContent,\n\t...props\n}: React.ComponentProps<\"a\"> & {\n\tasChild?: boolean;\n\tdropdownContent?: React.ReactNode;\n}) {\n\tconst Comp = asChild ? Slot : \"a\";\n\n\tconst linkStyles = cn(\n\t\tbreadcrumbLinkBaseStyles,\n\t\tdropdownContent && breadcrumbLinkWithDropdownStyles,\n\t\tclassName,\n\t);\n\n\tif (dropdownContent) {\n\t\treturn (\n\t\t\t<div className=\"inline-flex items-center\">\n\t\t\t\t<Comp data-slot=\"breadcrumb-link\" className={linkStyles} {...props} />\n\t\t\t\t<div className={breadcrumbTriggerContainerStyles}>\n\t\t\t\t\t<div className={breadcrumbSeparatorStyles} />\n\t\t\t\t\t<DropdownMenu>\n\t\t\t\t\t\t<DropdownMenuTrigger asChild>\n\t\t\t\t\t\t\t<IconButton\n\t\t\t\t\t\t\t\ticon={<ChevronDownIcon className=\"size-4\" />}\n\t\t\t\t\t\t\t\taria-label=\"Toggle menu\"\n\t\t\t\t\t\t\t\tclassName={breadcrumbIconButtonStyles}\n\t\t\t\t\t\t\t/>\n\t\t\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t\t\t<DropdownMenuContent align=\"start\">\n\t\t\t\t\t\t\t{dropdownContent}\n\t\t\t\t\t\t</DropdownMenuContent>\n\t\t\t\t\t</DropdownMenu>\n\t\t\t\t</div>\n\t\t\t</div>\n\t\t);\n\t}\n\n\treturn <Comp data-slot=\"breadcrumb-link\" className={linkStyles} {...props} />;\n}\n\nfunction BreadcrumbPage({ className, ...props }: React.ComponentProps<\"span\">) {\n\tconst { isWhite } = useContext(BreadcrumbContext);\n\n\treturn (\n\t\t// biome-ignore lint/a11y/useFocusableInteractive: FIXME: unchanged shadcn\n\t\t// biome-ignore lint/a11y/useSemanticElements: FIXME: unchanged shadcn\n\t\t<span\n\t\t\tdata-slot=\"breadcrumb-page\"\n\t\t\trole=\"link\"\n\t\t\taria-disabled=\"true\"\n\t\t\taria-current=\"page\"\n\t\t\tclassName={cn(\n\t\t\t\tbreadcrumbPageBaseStyles,\n\t\t\t\tisWhite && breadcrumbPageWhiteStyles,\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction BreadcrumbSeparator({\n\tchildren,\n\tclassName,\n\t...props\n}: React.ComponentProps<\"li\">) {\n\treturn (\n\t\t<li\n\t\t\tdata-slot=\"breadcrumb-separator\"\n\t\t\trole=\"presentation\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(breadcrumbSeparatorBaseStyles, className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{children ?? \"/\"}\n\t\t</li>\n\t);\n}\n\nfunction BreadcrumbEllipsis({\n\tclassName,\n\t...props\n}: React.ComponentProps<\"span\">) {\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"breadcrumb-ellipsis\"\n\t\t\trole=\"presentation\"\n\t\t\taria-hidden=\"true\"\n\t\t\tclassName={cn(breadcrumbEllipsisStyles, className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<MoreHorizontal className=\"size-4\" />\n\t\t\t<span className=\"sr-only\">More</span>\n\t\t</span>\n\t);\n}\n\nexport {\n\tBreadcrumb,\n\tBreadcrumbList,\n\tBreadcrumbItem,\n\tBreadcrumbLink,\n\tBreadcrumbPage,\n\tBreadcrumbSeparator,\n\tBreadcrumbEllipsis,\n};\n"],"names":["Slot","ChevronDownIcon","MoreHorizontal","createContext","useContext","DropdownMenu","DropdownMenuContent","DropdownMenuTrigger","cn","IconButton","breadcrumbListStyles","breadcrumbItemStyles","breadcrumbLinkBaseStyles","breadcrumbLinkWithDropdownStyles","breadcrumbSeparatorStyles","breadcrumbTriggerContainerStyles","breadcrumbIconButtonStyles","breadcrumbPageBaseStyles","breadcrumbPageWhiteStyles","breadcrumbSeparatorBaseStyles","breadcrumbEllipsisStyles","BreadcrumbContext","Breadcrumb","isWhite","props","Provider","value","undefined","nav","aria-label","data-slot","BreadcrumbList","className","ol","BreadcrumbItem","li","BreadcrumbLink","asChild","dropdownContent","Comp","linkStyles","div","icon","align","BreadcrumbPage","span","role","aria-disabled","aria-current","BreadcrumbSeparator","children","aria-hidden","BreadcrumbEllipsis"],"mappings":"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"}

package/dist/src/shadcn/components/ui/breadcrumb.stories.js

@@ -1,13 +1,13 @@
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
 // biome-ignore-all lint/a11y/useValidAnchor: Useless in stories
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-import { Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./breadcrumb.js";
-import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./dropdown-menu.js";
-const meta = {
-    title: "Component/Breadcrumb"
-};
-export default meta;
-export const Demo = {
-    render: ()=>/*#__PURE__*/ _jsx(Breadcrumb, {
+import { Controls, Primary, Title } from "@storybook/addon-docs/blocks";
+import { Breadcrumb, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator } from "./breadcrumb.js";
+import { DropdownMenuItem } from "./dropdown-menu.js";
+function BreadcrumbWrapper({ isWhite = false, hasDropdown = false }) {
+    return /*#__PURE__*/ _jsx("div", {
+        className: isWhite ? "bg-black p-8 rounded-lg" : "",
+        children: /*#__PURE__*/ _jsx(Breadcrumb, {
+            isWhite: isWhite,
             children: /*#__PURE__*/ _jsxs(BreadcrumbList, {
                 children: [
                     /*#__PURE__*/ _jsx(BreadcrumbItem, {
@@ -20,57 +20,217 @@ export const Demo = {
                         })
                     }),
                     /*#__PURE__*/ _jsx(BreadcrumbSeparator, {}),
-                    /*#__PURE__*/ _jsx(BreadcrumbItem, {
-                        children: /*#__PURE__*/ _jsxs(DropdownMenu, {
-                            children: [
-                                /*#__PURE__*/ _jsxs(DropdownMenuTrigger, {
-                                    className: "flex items-center gap-1",
-                                    children: [
-                                        /*#__PURE__*/ _jsx(BreadcrumbEllipsis, {
-                                            className: "size-4"
-                                        }),
-                                        /*#__PURE__*/ _jsx("span", {
-                                            className: "sr-only",
-                                            children: "Toggle menu"
-                                        })
-                                    ]
-                                }),
-                                /*#__PURE__*/ _jsxs(DropdownMenuContent, {
-                                    align: "start",
-                                    children: [
-                                        /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                            children: "Documentation"
-                                        }),
-                                        /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                            children: "Themes"
-                                        }),
-                                        /*#__PURE__*/ _jsx(DropdownMenuItem, {
-                                            children: "GitHub"
-                                        })
-                                    ]
-                                })
-                            ]
-                        })
-                    }),
-                    /*#__PURE__*/ _jsx(BreadcrumbSeparator, {}),
                     /*#__PURE__*/ _jsx(BreadcrumbItem, {
                         children: /*#__PURE__*/ _jsx(BreadcrumbLink, {
                             asChild: true,
+                            dropdownContent: hasDropdown ? /*#__PURE__*/ _jsxs(_Fragment, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                        children: "Level 1"
+                                    }),
+                                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                        children: "Level 2"
+                                    }),
+                                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                        children: "Level 3"
+                                    })
+                                ]
+                            }) : undefined,
                             children: /*#__PURE__*/ _jsx("a", {
-                                href: "/docs/components",
-                                children: "Components"
+                                href: "/docs",
+                                children: "Documentation"
                             })
                         })
                     }),
                     /*#__PURE__*/ _jsx(BreadcrumbSeparator, {}),
                     /*#__PURE__*/ _jsx(BreadcrumbItem, {
                         children: /*#__PURE__*/ _jsx(BreadcrumbPage, {
-                            children: "Breadcrumb"
+                            children: "Components"
                         })
                     })
                 ]
             })
         })
+    });
+}
+const meta = {
+    title: "Component/Breadcrumb",
+    component: BreadcrumbWrapper,
+    parameters: {
+        docs: {
+            page: ()=>/*#__PURE__*/ _jsxs(_Fragment, {
+                    children: [
+                        /*#__PURE__*/ _jsx(Title, {}),
+                        /*#__PURE__*/ _jsx(Primary, {}),
+                        /*#__PURE__*/ _jsx(Controls, {})
+                    ]
+                })
+        }
+    },
+    argTypes: {
+        isWhite: {
+            control: "boolean"
+        },
+        hasDropdown: {
+            control: "boolean"
+        }
+    },
+    args: {
+        isWhite: false,
+        hasDropdown: false
+    }
+};
+export default meta;
+export const Default = {
+    tags: [
+        "!dev"
+    ],
+    render: ({ isWhite = false, hasDropdown = false })=>/*#__PURE__*/ _jsx(BreadcrumbWrapper, {
+            isWhite: isWhite,
+            hasDropdown: hasDropdown
+        })
+};
+export const Demo = {
+    tags: [
+        "!autodocs"
+    ],
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "space-y-8",
+            children: [
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "text-sm text-text-secondary mb-2",
+                            children: "Default"
+                        }),
+                        /*#__PURE__*/ _jsx(Breadcrumb, {
+                            children: /*#__PURE__*/ _jsxs(BreadcrumbList, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(BreadcrumbItem, {
+                                        children: /*#__PURE__*/ _jsx(BreadcrumbLink, {
+                                            asChild: true,
+                                            children: /*#__PURE__*/ _jsx("a", {
+                                                href: "/",
+                                                children: "Home"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(BreadcrumbSeparator, {}),
+                                    /*#__PURE__*/ _jsx(BreadcrumbItem, {
+                                        children: /*#__PURE__*/ _jsx(BreadcrumbLink, {
+                                            asChild: true,
+                                            children: /*#__PURE__*/ _jsx("a", {
+                                                href: "/docs",
+                                                children: "Documentation"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(BreadcrumbSeparator, {}),
+                                    /*#__PURE__*/ _jsx(BreadcrumbItem, {
+                                        children: /*#__PURE__*/ _jsx(BreadcrumbPage, {
+                                            children: "Components"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "text-sm text-text-secondary mb-2",
+                            children: "With Dropdown"
+                        }),
+                        /*#__PURE__*/ _jsx(Breadcrumb, {
+                            children: /*#__PURE__*/ _jsxs(BreadcrumbList, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(BreadcrumbItem, {
+                                        children: /*#__PURE__*/ _jsx(BreadcrumbLink, {
+                                            asChild: true,
+                                            children: /*#__PURE__*/ _jsx("a", {
+                                                href: "/",
+                                                children: "Home"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(BreadcrumbSeparator, {}),
+                                    /*#__PURE__*/ _jsx(BreadcrumbItem, {
+                                        children: /*#__PURE__*/ _jsx(BreadcrumbLink, {
+                                            asChild: true,
+                                            dropdownContent: /*#__PURE__*/ _jsxs(_Fragment, {
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                                        children: "Level 1"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                                        children: "Level 2"
+                                                    }),
+                                                    /*#__PURE__*/ _jsx(DropdownMenuItem, {
+                                                        children: "Level 3"
+                                                    })
+                                                ]
+                                            }),
+                                            children: /*#__PURE__*/ _jsx("a", {
+                                                href: "/docs",
+                                                children: "Documentation"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(BreadcrumbSeparator, {}),
+                                    /*#__PURE__*/ _jsx(BreadcrumbItem, {
+                                        children: /*#__PURE__*/ _jsx(BreadcrumbPage, {
+                                            children: "Components"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                }),
+                /*#__PURE__*/ _jsxs("div", {
+                    className: "bg-black p-8 rounded-lg",
+                    children: [
+                        /*#__PURE__*/ _jsx("p", {
+                            className: "text-sm text-white/70 mb-2",
+                            children: "White (for dark backgrounds)"
+                        }),
+                        /*#__PURE__*/ _jsx(Breadcrumb, {
+                            isWhite: true,
+                            children: /*#__PURE__*/ _jsxs(BreadcrumbList, {
+                                children: [
+                                    /*#__PURE__*/ _jsx(BreadcrumbItem, {
+                                        children: /*#__PURE__*/ _jsx(BreadcrumbLink, {
+                                            asChild: true,
+                                            children: /*#__PURE__*/ _jsx("a", {
+                                                href: "/",
+                                                children: "Home"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(BreadcrumbSeparator, {}),
+                                    /*#__PURE__*/ _jsx(BreadcrumbItem, {
+                                        children: /*#__PURE__*/ _jsx(BreadcrumbLink, {
+                                            asChild: true,
+                                            children: /*#__PURE__*/ _jsx("a", {
+                                                href: "/docs",
+                                                children: "Documentation"
+                                            })
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsx(BreadcrumbSeparator, {}),
+                                    /*#__PURE__*/ _jsx(BreadcrumbItem, {
+                                        children: /*#__PURE__*/ _jsx(BreadcrumbPage, {
+                                            children: "Components"
+                                        })
+                                    })
+                                ]
+                            })
+                        })
+                    ]
+                })
+            ]
+        })
 };
 
 //# sourceMappingURL=breadcrumb.stories.js.map

package/dist/src/shadcn/components/ui/breadcrumb.stories.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/breadcrumb.stories.tsx"],"sourcesContent":["// biome-ignore-all lint/a11y/useValidAnchor: Useless in stories\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport {\n\tBreadcrumb,\n\tBreadcrumbEllipsis,\n\tBreadcrumbItem,\n\tBreadcrumbLink,\n\tBreadcrumbList,\n\tBreadcrumbPage,\n\tBreadcrumbSeparator,\n} from \"#shadcn/components/ui/breadcrumb\";\nimport {\n\tDropdownMenu,\n\tDropdownMenuContent,\n\tDropdownMenuItem,\n\tDropdownMenuTrigger,\n} from \"#shadcn/components/ui/dropdown-menu\";\n\nconst meta = {\n\ttitle: \"Component/Breadcrumb\",\n} satisfies Meta;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Demo = {\n\trender: () => (\n\t\t<Breadcrumb>\n\t\t\t<BreadcrumbList>\n\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t<BreadcrumbLink asChild>\n\t\t\t\t\t\t<a href=\"/\">Home</a>\n\t\t\t\t\t</BreadcrumbLink>\n\t\t\t\t</BreadcrumbItem>\n\t\t\t\t<BreadcrumbSeparator />\n\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t<DropdownMenu>\n\t\t\t\t\t\t<DropdownMenuTrigger className=\"flex items-center gap-1\">\n\t\t\t\t\t\t\t<BreadcrumbEllipsis className=\"size-4\" />\n\t\t\t\t\t\t\t<span className=\"sr-only\">Toggle menu</span>\n\t\t\t\t\t\t</DropdownMenuTrigger>\n\t\t\t\t\t\t<DropdownMenuContent align=\"start\">\n\t\t\t\t\t\t\t<DropdownMenuItem>Documentation</DropdownMenuItem>\n\t\t\t\t\t\t\t<DropdownMenuItem>Themes</DropdownMenuItem>\n\t\t\t\t\t\t\t<DropdownMenuItem>GitHub</DropdownMenuItem>\n\t\t\t\t\t\t</DropdownMenuContent>\n\t\t\t\t\t</DropdownMenu>\n\t\t\t\t</BreadcrumbItem>\n\t\t\t\t<BreadcrumbSeparator />\n\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t<BreadcrumbLink asChild>\n\t\t\t\t\t\t<a href=\"/docs/components\">Components</a>\n\t\t\t\t\t</BreadcrumbLink>\n\t\t\t\t</BreadcrumbItem>\n\t\t\t\t<BreadcrumbSeparator />\n\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t<BreadcrumbPage>Breadcrumb</BreadcrumbPage>\n\t\t\t\t</BreadcrumbItem>\n\t\t\t</BreadcrumbList>\n\t\t</Breadcrumb>\n\t),\n} satisfies Story;\n"],"names":["Breadcrumb","BreadcrumbEllipsis","BreadcrumbItem","BreadcrumbLink","BreadcrumbList","BreadcrumbPage","BreadcrumbSeparator","DropdownMenu","DropdownMenuContent","DropdownMenuItem","DropdownMenuTrigger","meta","title","Demo","render","asChild","a","href","className","span","align"],"mappings":"AAAA,gEAAgE;;AAEhE,SACCA,UAAU,EACVC,kBAAkB,EAClBC,cAAc,EACdC,cAAc,EACdC,cAAc,EACdC,cAAc,EACdC,mBAAmB,QACb,kBAAmC;AAC1C,SACCC,YAAY,EACZC,mBAAmB,EACnBC,gBAAgB,EAChBC,mBAAmB,QACb,qBAAsC;AAE7C,MAAMC,OAAO;IACZC,OAAO;AACR;AACA,eAAeD,KAAK;AAIpB,OAAO,MAAME,OAAO;IACnBC,QAAQ,kBACP,KAACd;sBACA,cAAA,MAACI;;kCACA,KAACF;kCACA,cAAA,KAACC;4BAAeY,OAAO;sCACtB,cAAA,KAACC;gCAAEC,MAAK;0CAAI;;;;kCAGd,KAACX;kCACD,KAACJ;kCACA,cAAA,MAACK;;8CACA,MAACG;oCAAoBQ,WAAU;;sDAC9B,KAACjB;4CAAmBiB,WAAU;;sDAC9B,KAACC;4CAAKD,WAAU;sDAAU;;;;8CAE3B,MAACV;oCAAoBY,OAAM;;sDAC1B,KAACX;sDAAiB;;sDAClB,KAACA;sDAAiB;;sDAClB,KAACA;sDAAiB;;;;;;;kCAIrB,KAACH;kCACD,KAACJ;kCACA,cAAA,KAACC;4BAAeY,OAAO;sCACtB,cAAA,KAACC;gCAAEC,MAAK;0CAAmB;;;;kCAG7B,KAACX;kCACD,KAACJ;kCACA,cAAA,KAACG;sCAAe;;;;;;AAKrB,EAAkB"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/breadcrumb.stories.tsx"],"sourcesContent":["// biome-ignore-all lint/a11y/useValidAnchor: Useless in stories\nimport { Controls, Primary, Title } from \"@storybook/addon-docs/blocks\";\nimport type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport {\n\tBreadcrumb,\n\tBreadcrumbItem,\n\tBreadcrumbLink,\n\tBreadcrumbList,\n\tBreadcrumbPage,\n\tBreadcrumbSeparator,\n} from \"#shadcn/components/ui/breadcrumb\";\nimport { DropdownMenuItem } from \"#shadcn/components/ui/dropdown-menu\";\n\ninterface BreadcrumbWrapperProps {\n\tisWhite?: boolean;\n\thasDropdown?: boolean;\n}\n\nfunction BreadcrumbWrapper({\n\tisWhite = false,\n\thasDropdown = false,\n}: BreadcrumbWrapperProps) {\n\treturn (\n\t\t<div className={isWhite ? \"bg-black p-8 rounded-lg\" : \"\"}>\n\t\t\t<Breadcrumb isWhite={isWhite}>\n\t\t\t\t<BreadcrumbList>\n\t\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t\t<BreadcrumbLink asChild>\n\t\t\t\t\t\t\t<a href=\"/\">Home</a>\n\t\t\t\t\t\t</BreadcrumbLink>\n\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t\t<BreadcrumbSeparator />\n\t\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t\t<BreadcrumbLink\n\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\tdropdownContent={\n\t\t\t\t\t\t\t\thasDropdown ? (\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItem>Level 1</DropdownMenuItem>\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItem>Level 2</DropdownMenuItem>\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItem>Level 3</DropdownMenuItem>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t) : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t<a href=\"/docs\">Documentation</a>\n\t\t\t\t\t\t</BreadcrumbLink>\n\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t\t<BreadcrumbSeparator />\n\t\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t\t<BreadcrumbPage>Components</BreadcrumbPage>\n\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t</BreadcrumbList>\n\t\t\t</Breadcrumb>\n\t\t</div>\n\t);\n}\n\nconst meta = {\n\ttitle: \"Component/Breadcrumb\",\n\tcomponent: BreadcrumbWrapper,\n\tparameters: {\n\t\tdocs: {\n\t\t\tpage: () => (\n\t\t\t\t<>\n\t\t\t\t\t<Title />\n\t\t\t\t\t<Primary />\n\t\t\t\t\t<Controls />\n\t\t\t\t</>\n\t\t\t),\n\t\t},\n\t},\n\targTypes: {\n\t\tisWhite: {\n\t\t\tcontrol: \"boolean\",\n\t\t},\n\t\thasDropdown: {\n\t\t\tcontrol: \"boolean\",\n\t\t},\n\t},\n\targs: {\n\t\tisWhite: false,\n\t\thasDropdown: false,\n\t},\n} satisfies Meta<typeof BreadcrumbWrapper>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Default = {\n\ttags: [\"!dev\"],\n\trender: ({ isWhite = false, hasDropdown = false }) => (\n\t\t<BreadcrumbWrapper isWhite={isWhite} hasDropdown={hasDropdown} />\n\t),\n} satisfies Story;\n\nexport const Demo = {\n\ttags: [\"!autodocs\"],\n\trender: () => (\n\t\t<div className=\"space-y-8\">\n\t\t\t<div>\n\t\t\t\t<p className=\"text-sm text-text-secondary mb-2\">Default</p>\n\t\t\t\t<Breadcrumb>\n\t\t\t\t\t<BreadcrumbList>\n\t\t\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t\t\t<BreadcrumbLink asChild>\n\t\t\t\t\t\t\t\t<a href=\"/\">Home</a>\n\t\t\t\t\t\t\t</BreadcrumbLink>\n\t\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t\t\t<BreadcrumbSeparator />\n\t\t\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t\t\t<BreadcrumbLink asChild>\n\t\t\t\t\t\t\t\t<a href=\"/docs\">Documentation</a>\n\t\t\t\t\t\t\t</BreadcrumbLink>\n\t\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t\t\t<BreadcrumbSeparator />\n\t\t\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t\t\t<BreadcrumbPage>Components</BreadcrumbPage>\n\t\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t\t</BreadcrumbList>\n\t\t\t\t</Breadcrumb>\n\t\t\t</div>\n\n\t\t\t<div>\n\t\t\t\t<p className=\"text-sm text-text-secondary mb-2\">With Dropdown</p>\n\t\t\t\t<Breadcrumb>\n\t\t\t\t\t<BreadcrumbList>\n\t\t\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t\t\t<BreadcrumbLink asChild>\n\t\t\t\t\t\t\t\t<a href=\"/\">Home</a>\n\t\t\t\t\t\t\t</BreadcrumbLink>\n\t\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t\t\t<BreadcrumbSeparator />\n\t\t\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t\t\t<BreadcrumbLink\n\t\t\t\t\t\t\t\tasChild\n\t\t\t\t\t\t\t\tdropdownContent={\n\t\t\t\t\t\t\t\t\t<>\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItem>Level 1</DropdownMenuItem>\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItem>Level 2</DropdownMenuItem>\n\t\t\t\t\t\t\t\t\t\t<DropdownMenuItem>Level 3</DropdownMenuItem>\n\t\t\t\t\t\t\t\t\t</>\n\t\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t<a href=\"/docs\">Documentation</a>\n\t\t\t\t\t\t\t</BreadcrumbLink>\n\t\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t\t\t<BreadcrumbSeparator />\n\t\t\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t\t\t<BreadcrumbPage>Components</BreadcrumbPage>\n\t\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t\t</BreadcrumbList>\n\t\t\t\t</Breadcrumb>\n\t\t\t</div>\n\n\t\t\t<div className=\"bg-black p-8 rounded-lg\">\n\t\t\t\t<p className=\"text-sm text-white/70 mb-2\">\n\t\t\t\t\tWhite (for dark backgrounds)\n\t\t\t\t</p>\n\t\t\t\t<Breadcrumb isWhite>\n\t\t\t\t\t<BreadcrumbList>\n\t\t\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t\t\t<BreadcrumbLink asChild>\n\t\t\t\t\t\t\t\t<a href=\"/\">Home</a>\n\t\t\t\t\t\t\t</BreadcrumbLink>\n\t\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t\t\t<BreadcrumbSeparator />\n\t\t\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t\t\t<BreadcrumbLink asChild>\n\t\t\t\t\t\t\t\t<a href=\"/docs\">Documentation</a>\n\t\t\t\t\t\t\t</BreadcrumbLink>\n\t\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t\t\t<BreadcrumbSeparator />\n\t\t\t\t\t\t<BreadcrumbItem>\n\t\t\t\t\t\t\t<BreadcrumbPage>Components</BreadcrumbPage>\n\t\t\t\t\t\t</BreadcrumbItem>\n\t\t\t\t\t</BreadcrumbList>\n\t\t\t\t</Breadcrumb>\n\t\t\t</div>\n\t\t</div>\n\t),\n} satisfies Story;\n"],"names":["Controls","Primary","Title","Breadcrumb","BreadcrumbItem","BreadcrumbLink","BreadcrumbList","BreadcrumbPage","BreadcrumbSeparator","DropdownMenuItem","BreadcrumbWrapper","isWhite","hasDropdown","div","className","asChild","a","href","dropdownContent","undefined","meta","title","component","parameters","docs","page","argTypes","control","args","Default","tags","render","Demo","p"],"mappings":"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"}

package/dist/src/shadcn/components/ui/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,QAAA,MAAM,cAAc;;;;8EA4DnB,CAAC;AAEF,iBAAS,MAAM,CAAC,EACf,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAc,EACd,OAAe,EACf,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAChC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,2CAUD;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/button.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAClE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AA8BpC,QAAA,MAAM,cAAc;;;;8EAkIlB,CAAC;AAEH,iBAAS,MAAM,CAAC,EACf,SAAS,EACT,OAAO,EACP,IAAI,EACJ,MAAc,EACd,OAAe,EACf,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,QAAQ,CAAC,GAChC,YAAY,CAAC,OAAO,cAAc,CAAC,GAAG;IACrC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,MAAM,CAAC,EAAE,OAAO,CAAC;CACjB,2CAUD;AAED,OAAO,EAAE,MAAM,EAAE,cAAc,EAAE,CAAC"}

package/dist/src/shadcn/components/ui/button.js

@@ -2,17 +2,25 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 import { cn } from "../../lib/utils.js";
-const buttonVariants = cva(cn("inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-lg transition-all ", "outline-none cursor-pointer", "disabled:cursor-not-allowed", "[&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0", "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]", "aria-invalid:ring-destructive/20"), {
+const baseButtonStyles = cn(// Layout
+"inline-flex", "items-center", "justify-center", "gap-2", "whitespace-nowrap", "shrink-0", // Shape
+"rounded-lg", // Interaction
+"transition-all", "outline-none", "cursor-pointer", // Disabled states
+"disabled:cursor-not-allowed", // Icon styles
+"[&_svg]:pointer-events-none", "[&_svg:not([class*='size-'])]:size-4", "[&_svg]:shrink-0", // Focus states
+// Invalid states
+"aria-invalid:ring-2", "aria-invalid:ring-utility-red/70");
+const buttonVariants = cva(baseButtonStyles, {
     variants: {
         variant: {
-            primary: "bg-bg-link text-text-primary_on-brand shadow-xs hover:bg-bg-link_hover active:bg-bg-link disabled:bg-bg-disabled",
-            secondary: "border border-border-primary bg-bg-primary text-text-tertiary shadow-xs hover:text-fg-primary disabled:text-fg-disabled disabled:border-border-disabled hover:bg-bg-secondary active:bg-bg-primary active:text-text-tertiary disabled:hover:bg-bg-primary",
-            link: "text-text-secondary hover:text-text-primary disabled:text-text-disabled rounded-none",
-            ghost: "text-text-secondary hover:text-text-primary disabled:text-text-disabled hover:bg-bg-secondary active:bg-bg-tertiary disabled:hover:bg-bg-primary"
+            primary: cn("bg-bg-link", "text-text-primary_on-brand", "hover:bg-bg-link_hover", "active:bg-bg-link"),
+            secondary: cn("border", "border-border-primary", "bg-bg-primary", "text-text-secondary", "hover:text-text-primary", "hover:bg-bg-secondary", "active:bg-bg-primary", "active:text-text-tertiary"),
+            link: cn("text-text-secondary", "hover:text-text-primary", "rounded"),
+            ghost: cn("text-text-secondary", "hover:text-text-primary", "hover:bg-bg-secondary", "active:bg-bg-tertiary")
         },
         size: {
-            regular: "h-9 px-4 typo-label",
-            small: "h-6 px-2 typo-button-label-xs gap-1 rounded-md"
+            regular: cn("h-9", "px-4", "typo-body"),
+            small: cn("h-6", "px-2", "gap-1", "typo-button-label-xs")
         },
         danger: {
             true: "",
@@ -20,25 +28,71 @@ const buttonVariants = cva(cn("inline-flex items-center justify-center gap-2 whi
         }
     },
     compoundVariants: [
+        // Primary disabled
+        {
+            variant: "primary",
+            class: cn("disabled:bg-bg-disabled", "disabled:text-white")
+        },
+        // Secondary disabled
+        {
+            variant: "secondary",
+            class: cn("disabled:bg-bg-primary", "disabled:text-text-disabled", "disabled:border-border-disabled")
+        },
+        // Link disabled
+        {
+            variant: "link",
+            class: cn("disabled:text-text-disabled")
+        },
+        // Ghost disabled
+        {
+            variant: "ghost",
+            class: cn("disabled:text-text-disabled")
+        },
+        // Primary danger
         {
             variant: "primary",
             danger: true,
-            class: "bg-bg-error-primary_inverse text-text-primary_on-brand hover:bg-bg-error-primary_inverse_hover active:bg-bg-error-primary_inverse disabled:bg-bg-disabled"
+            class: cn("bg-bg-error-primary_inverse", "text-text-primary_on-brand", "hover:bg-bg-error-primary_inverse_hover", "active:bg-bg-error-primary_inverse")
         },
+        // Secondary danger
         {
             variant: "secondary",
             danger: true,
-            class: "border-border-error text-text-error-primary hover:text-text-error-primary_hover hover:bg-bg-error-secondary active:bg-bg-primary active:text-text-error-primary_on-brand"
+            class: cn("border-border-error", "text-text-error-primary", "hover:text-text-error-primary", "hover:bg-bg-error-secondary", "active:bg-bg-primary", "active:text-text-error-primary")
         },
+        // Link danger
         {
             variant: "link",
             danger: true,
-            class: "text-text-error-secondary hover:text-text-error-primary"
+            class: cn("text-text-error-secondary", "hover:text-text-error-primary")
         },
+        // Ghost danger
         {
             variant: "ghost",
             danger: true,
-            class: "text-text-error-secondary hover:text-text-error-primary hover:bg-bg-error-secondary active:bg-bg-error-tertiary"
+            class: cn("text-text-error-secondary", "hover:text-text-error-primary", "hover:bg-bg-error-secondary", "active:bg-bg-error-tertiary")
+        },
+        // Focus ring for regular size
+        {
+            size: "regular",
+            danger: false,
+            class: cn("focus-visible:ring-4", "focus-visible:ring-ring-blue")
+        },
+        {
+            size: "regular",
+            danger: true,
+            class: cn("focus-visible:ring-4", "focus-visible:ring-ring-red")
+        },
+        // Focus ring for small size
+        {
+            size: "small",
+            danger: false,
+            class: cn("focus-visible:ring-3", "focus-visible:ring-ring-blue")
+        },
+        {
+            size: "small",
+            danger: true,
+            class: cn("focus-visible:ring-3", "focus-visible:ring-ring-red")
         }
     ],
     defaultVariants: {