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

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

@@ -1,15 +1,138 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { Bold } from "lucide-react";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { PanelRight } from "lucide-react";
+import { Badge } from "./badge.js";
 import { Toggle } from "./toggle.js";
 const meta = {
-    title: "Component/Toggle"
+    title: "Component/Toggle",
+    component: Toggle,
+    parameters: {
+        controls: {
+            exclude: [
+                "size",
+                "asChild"
+            ]
+        }
+    },
+    argTypes: {
+        variant: {
+            control: "select",
+            options: [
+                "filled",
+                "outline"
+            ]
+        }
+    },
+    args: {
+        variant: "filled",
+        children: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(PanelRight, {}),
+                " Instance preview"
+            ]
+        }),
+        "aria-label": "Toggle panel"
+    }
 };
 export default meta;
+export const WithText = {
+    args: {
+        children: /*#__PURE__*/ _jsxs(_Fragment, {
+            children: [
+                /*#__PURE__*/ _jsx(PanelRight, {}),
+                " Instance preview"
+            ]
+        }),
+        "aria-label": "Toggle panel",
+        variant: "filled"
+    }
+};
+export const IconOnly = {
+    args: {
+        children: /*#__PURE__*/ _jsx(PanelRight, {}),
+        "aria-label": "Toggle panel"
+    }
+};
 export const Demo = {
-    render: ()=>/*#__PURE__*/ _jsx(Toggle, {
-            "aria-label": "Toggle italic",
-            children: /*#__PURE__*/ _jsx(Bold, {
-                className: "h-4 w-4"
+    render: ()=>/*#__PURE__*/ _jsx("div", {
+            className: "p-6 min-h-screen flex justify-center items-center",
+            children: /*#__PURE__*/ _jsxs("div", {
+                className: "rounded-lg p-6 shadow-sm w-200",
+                children: [
+                    /*#__PURE__*/ _jsxs("div", {
+                        className: "flex items-center mb-4 justify-between",
+                        children: [
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "w-30 text-center",
+                                children: "Variant"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "w-40 text-center text-sm text-text-secondary",
+                                children: "Default"
+                            }),
+                            /*#__PURE__*/ _jsx("div", {
+                                className: "w-40 text-center text-sm text-text-secondary",
+                                children: "Disabled"
+                            })
+                        ]
+                    }),
+                    [
+                        "filled",
+                        "outline"
+                    ].map((variant)=>/*#__PURE__*/ _jsx("div", {
+                            className: "border-t border-border-separator py-4",
+                            children: /*#__PURE__*/ _jsxs("div", {
+                                className: "flex gap-4 items-center py-2 justify-between",
+                                children: [
+                                    /*#__PURE__*/ _jsx("div", {
+                                        className: "w-30 text-sm text-text-secondary",
+                                        children: /*#__PURE__*/ _jsx(Badge, {
+                                            variant: "outline",
+                                            className: "text-xs",
+                                            children: variant
+                                        })
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "w-40 flex gap-3 justify-center items-center",
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(Toggle, {
+                                                variant: variant,
+                                                "aria-label": "Toggle with text",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(PanelRight, {}),
+                                                    " Instance preview"
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx(Toggle, {
+                                                variant: variant,
+                                                "aria-label": "Toggle icon only",
+                                                children: /*#__PURE__*/ _jsx(PanelRight, {})
+                                            })
+                                        ]
+                                    }),
+                                    /*#__PURE__*/ _jsxs("div", {
+                                        className: "w-40 flex gap-3 justify-center items-center",
+                                        children: [
+                                            /*#__PURE__*/ _jsxs(Toggle, {
+                                                variant: variant,
+                                                disabled: true,
+                                                "aria-label": "Toggle with text",
+                                                children: [
+                                                    /*#__PURE__*/ _jsx(PanelRight, {}),
+                                                    " Instance preview"
+                                                ]
+                                            }),
+                                            /*#__PURE__*/ _jsx(Toggle, {
+                                                variant: variant,
+                                                disabled: true,
+                                                "aria-label": "Toggle icon only",
+                                                children: /*#__PURE__*/ _jsx(PanelRight, {})
+                                            })
+                                        ]
+                                    })
+                                ]
+                            })
+                        }, variant))
+                ]
             })
         })
 };

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/toggle.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Bold } from \"lucide-react\";\nimport { Toggle } from \"#shadcn/components/ui/toggle\";\n\nconst meta = {\n\ttitle: \"Component/Toggle\",\n} satisfies Meta;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const Demo = {\n\trender: () => (\n\t\t<Toggle aria-label=\"Toggle italic\">\n\t\t\t<Bold className=\"h-4 w-4\" />\n\t\t</Toggle>\n\t),\n} satisfies Story;\n"],"names":["Bold","Toggle","meta","title","Demo","render","aria-label","className"],"mappings":";AACA,SAASA,IAAI,QAAQ,eAAe;AACpC,SAASC,MAAM,QAAQ,cAA+B;AAEtD,MAAMC,OAAO;IACZC,OAAO;AACR;AACA,eAAeD,KAAK;AAIpB,OAAO,MAAME,OAAO;IACnBC,QAAQ,kBACP,KAACJ;YAAOK,cAAW;sBAClB,cAAA,KAACN;gBAAKO,WAAU;;;AAGnB,EAAkB"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/toggle.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { PanelRight } from \"lucide-react\";\nimport { Badge } from \"#shadcn/components/ui/badge\";\nimport { Toggle } from \"#shadcn/components/ui/toggle\";\n\nconst meta = {\n\ttitle: \"Component/Toggle\",\n\tcomponent: Toggle,\n\tparameters: {\n\t\tcontrols: {\n\t\t\texclude: [\"size\", \"asChild\"],\n\t\t},\n\t},\n\targTypes: {\n\t\tvariant: {\n\t\t\tcontrol: \"select\",\n\t\t\toptions: [\"filled\", \"outline\"],\n\t\t},\n\t},\n\targs: {\n\t\tvariant: \"filled\",\n\t\tchildren: (\n\t\t\t<>\n\t\t\t\t<PanelRight /> Instance preview\n\t\t\t</>\n\t\t),\n\t\t\"aria-label\": \"Toggle panel\",\n\t},\n} satisfies Meta<typeof Toggle>;\nexport default meta;\n\ntype Story = StoryObj<typeof meta>;\n\nexport const WithText = {\n\targs: {\n\t\tchildren: (\n\t\t\t<>\n\t\t\t\t<PanelRight /> Instance preview\n\t\t\t</>\n\t\t),\n\t\t\"aria-label\": \"Toggle panel\",\n\t\tvariant: \"filled\",\n\t},\n} satisfies Story;\n\nexport const IconOnly = {\n\targs: {\n\t\tchildren: <PanelRight />,\n\t\t\"aria-label\": \"Toggle panel\",\n\t},\n} satisfies Story;\n\nexport const Demo = {\n\trender: () => (\n\t\t<div className=\"p-6 min-h-screen flex justify-center items-center\">\n\t\t\t<div className=\"rounded-lg p-6 shadow-sm w-200\">\n\t\t\t\t<div className=\"flex items-center mb-4 justify-between\">\n\t\t\t\t\t<div className=\"w-30 text-center\">Variant</div>\n\t\t\t\t\t<div className=\"w-40 text-center text-sm text-text-secondary\">\n\t\t\t\t\t\tDefault\n\t\t\t\t\t</div>\n\t\t\t\t\t<div className=\"w-40 text-center text-sm text-text-secondary\">\n\t\t\t\t\t\tDisabled\n\t\t\t\t\t</div>\n\t\t\t\t</div>\n\n\t\t\t\t{([\"filled\", \"outline\"] as const).map((variant) => (\n\t\t\t\t\t<div className=\"border-t border-border-separator py-4\" key={variant}>\n\t\t\t\t\t\t<div className=\"flex gap-4 items-center py-2 justify-between\">\n\t\t\t\t\t\t\t<div className=\"w-30 text-sm text-text-secondary\">\n\t\t\t\t\t\t\t\t<Badge variant=\"outline\" className=\"text-xs\">\n\t\t\t\t\t\t\t\t\t{variant}\n\t\t\t\t\t\t\t\t</Badge>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"w-40 flex gap-3 justify-center items-center\">\n\t\t\t\t\t\t\t\t<Toggle variant={variant} aria-label=\"Toggle with text\">\n\t\t\t\t\t\t\t\t\t<PanelRight /> Instance preview\n\t\t\t\t\t\t\t\t</Toggle>\n\t\t\t\t\t\t\t\t<Toggle variant={variant} aria-label=\"Toggle icon only\">\n\t\t\t\t\t\t\t\t\t<PanelRight />\n\t\t\t\t\t\t\t\t</Toggle>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t\t<div className=\"w-40 flex gap-3 justify-center items-center\">\n\t\t\t\t\t\t\t\t<Toggle\n\t\t\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t\t\taria-label=\"Toggle with text\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<PanelRight /> Instance preview\n\t\t\t\t\t\t\t\t</Toggle>\n\t\t\t\t\t\t\t\t<Toggle\n\t\t\t\t\t\t\t\t\tvariant={variant}\n\t\t\t\t\t\t\t\t\tdisabled\n\t\t\t\t\t\t\t\t\taria-label=\"Toggle icon only\"\n\t\t\t\t\t\t\t\t>\n\t\t\t\t\t\t\t\t\t<PanelRight />\n\t\t\t\t\t\t\t\t</Toggle>\n\t\t\t\t\t\t\t</div>\n\t\t\t\t\t\t</div>\n\t\t\t\t\t</div>\n\t\t\t\t))}\n\t\t\t</div>\n\t\t</div>\n\t),\n} satisfies Story;\n"],"names":["PanelRight","Badge","Toggle","meta","title","component","parameters","controls","exclude","argTypes","variant","control","options","args","children","WithText","IconOnly","Demo","render","div","className","map","aria-label","disabled"],"mappings":";AACA,SAASA,UAAU,QAAQ,eAAe;AAC1C,SAASC,KAAK,QAAQ,aAA8B;AACpD,SAASC,MAAM,QAAQ,cAA+B;AAEtD,MAAMC,OAAO;IACZC,OAAO;IACPC,WAAWH;IACXI,YAAY;QACXC,UAAU;YACTC,SAAS;gBAAC;gBAAQ;aAAU;QAC7B;IACD;IACAC,UAAU;QACTC,SAAS;YACRC,SAAS;YACTC,SAAS;gBAAC;gBAAU;aAAU;QAC/B;IACD;IACAC,MAAM;QACLH,SAAS;QACTI,wBACC;;8BACC,KAACd;gBAAa;;;QAGhB,cAAc;IACf;AACD;AACA,eAAeG,KAAK;AAIpB,OAAO,MAAMY,WAAW;IACvBF,MAAM;QACLC,wBACC;;8BACC,KAACd;gBAAa;;;QAGhB,cAAc;QACdU,SAAS;IACV;AACD,EAAkB;AAElB,OAAO,MAAMM,WAAW;IACvBH,MAAM;QACLC,wBAAU,KAACd;QACX,cAAc;IACf;AACD,EAAkB;AAElB,OAAO,MAAMiB,OAAO;IACnBC,QAAQ,kBACP,KAACC;YAAIC,WAAU;sBACd,cAAA,MAACD;gBAAIC,WAAU;;kCACd,MAACD;wBAAIC,WAAU;;0CACd,KAACD;gCAAIC,WAAU;0CAAmB;;0CAClC,KAACD;gCAAIC,WAAU;0CAA+C;;0CAG9D,KAACD;gCAAIC,WAAU;0CAA+C;;;;oBAK7D;wBAAC;wBAAU;qBAAU,CAAWC,GAAG,CAAC,CAACX,wBACtC,KAACS;4BAAIC,WAAU;sCACd,cAAA,MAACD;gCAAIC,WAAU;;kDACd,KAACD;wCAAIC,WAAU;kDACd,cAAA,KAACnB;4CAAMS,SAAQ;4CAAUU,WAAU;sDACjCV;;;kDAGH,MAACS;wCAAIC,WAAU;;0DACd,MAAClB;gDAAOQ,SAASA;gDAASY,cAAW;;kEACpC,KAACtB;oDAAa;;;0DAEf,KAACE;gDAAOQ,SAASA;gDAASY,cAAW;0DACpC,cAAA,KAACtB;;;;kDAGH,MAACmB;wCAAIC,WAAU;;0DACd,MAAClB;gDACAQ,SAASA;gDACTa,QAAQ;gDACRD,cAAW;;kEAEX,KAACtB;oDAAa;;;0DAEf,KAACE;gDACAQ,SAASA;gDACTa,QAAQ;gDACRD,cAAW;0DAEX,cAAA,KAACtB;;;;;;2BA5BuDU;;;;AAqCjE,EAAkB"}

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

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tooltip.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,iBAAS,eAAe,CAAC,EACxB,aAAiB,EACjB,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,2CAQxD;AAED,iBAAS,OAAO,CAAC,EAChB,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAMpD;AAED,iBAAS,cAAc,CAAC,EACvB,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAEvD;AAED,iBAAS,cAAc,CAAC,EACvB,SAAS,EACT,UAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAoBvD;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,gBAAgB,MAAM,yBAAyB,CAAC;AAC5D,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAoCpC,iBAAS,eAAe,CAAC,EACxB,aAAiB,EACjB,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,QAAQ,CAAC,2CAQxD;AAED,iBAAS,OAAO,CAAC,EAChB,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,IAAI,CAAC,2CAMpD;AAED,iBAAS,cAAc,CAAC,EACvB,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAEvD;AAED,iBAAS,cAAc,CAAC,EACvB,SAAS,EACT,UAAc,EACd,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,gBAAgB,CAAC,OAAO,CAAC,2CAavD;AAED,OAAO,EAAE,OAAO,EAAE,cAAc,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}

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

@@ -1,6 +1,17 @@
+"use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { cn } from "../../lib/utils.js";
+// Tooltip content styles
+const tooltipContentStyles = cn(// Layout
+"z-50", "w-fit", "origin-(--radix-tooltip-content-transform-origin)", // Shape
+"rounded-md", // Background & Colors
+"bg-bg-overlay", "text-text-primary_on-brand", // Spacing
+"px-3", "py-1.5", // Typography
+"text-xs", "text-balance", // Animations - open
+"animate-in", "fade-in-0", "zoom-in-95", // Animations - closed
+"data-[state=closed]:animate-out", "data-[state=closed]:fade-out-0", "data-[state=closed]:zoom-out-95", // Slide animations
+"data-[side=bottom]:slide-in-from-top-2", "data-[side=left]:slide-in-from-right-2", "data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2");
 function TooltipProvider({ delayDuration = 0, ...props }) {
     return /*#__PURE__*/ _jsx(TooltipPrimitive.Provider, {
         "data-slot": "tooltip-provider",
@@ -27,7 +38,7 @@ function TooltipContent({ className, sideOffset = 0, children, ...props }) {
         children: /*#__PURE__*/ _jsx(TooltipPrimitive.Content, {
             "data-slot": "tooltip-content",
             sideOffset: sideOffset,
-            className: cn("bg-(--color-elements-assistive) text-(--color-elements-readable-inv) animate-in fade-in-0 zoom-in-95", "data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95", "data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2", "data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md", "px-3 py-1.5 text-xs text-balance", className),
+            className: cn(tooltipContentStyles, className),
             ...props,
             children: children
         })

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

@@ -1 +1 @@
-{"version":3,"sources":["../../../../../src/shadcn/components/ui/tooltip.tsx"],"sourcesContent":["import * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\nfunction TooltipProvider({\n\tdelayDuration = 0,\n\t...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n\treturn (\n\t\t<TooltipPrimitive.Provider\n\t\t\tdata-slot=\"tooltip-provider\"\n\t\t\tdelayDuration={delayDuration}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction Tooltip({\n\t...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n\treturn (\n\t\t<TooltipProvider>\n\t\t\t<TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n\t\t</TooltipProvider>\n\t);\n}\n\nfunction TooltipTrigger({\n\t...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n\treturn <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n\tclassName,\n\tsideOffset = 0,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n\treturn (\n\t\t<TooltipPrimitive.Portal>\n\t\t\t<TooltipPrimitive.Content\n\t\t\t\tdata-slot=\"tooltip-content\"\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"bg-(--color-elements-assistive) text-(--color-elements-readable-inv) animate-in fade-in-0 zoom-in-95\",\n\t\t\t\t\t\"data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95\",\n\t\t\t\t\t\"data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2\",\n\t\t\t\t\t\"data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md\",\n\t\t\t\t\t\"px-3 py-1.5 text-xs text-balance\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</TooltipPrimitive.Content>\n\t\t</TooltipPrimitive.Portal>\n\t);\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"names":["TooltipPrimitive","cn","TooltipProvider","delayDuration","props","Provider","data-slot","Tooltip","Root","TooltipTrigger","Trigger","TooltipContent","className","sideOffset","children","Portal","Content"],"mappings":";AAAA,YAAYA,sBAAsB,0BAA0B;AAG5D,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,SAASC,gBAAgB,EACxBC,gBAAgB,CAAC,EACjB,GAAGC,OACqD;IACxD,qBACC,KAACJ,iBAAiBK,QAAQ;QACzBC,aAAU;QACVH,eAAeA;QACd,GAAGC,KAAK;;AAGZ;AAEA,SAASG,QAAQ,EAChB,GAAGH,OACiD;IACpD,qBACC,KAACF;kBACA,cAAA,KAACF,iBAAiBQ,IAAI;YAACF,aAAU;YAAW,GAAGF,KAAK;;;AAGvD;AAEA,SAASK,eAAe,EACvB,GAAGL,OACoD;IACvD,qBAAO,KAACJ,iBAAiBU,OAAO;QAACJ,aAAU;QAAmB,GAAGF,KAAK;;AACvE;AAEA,SAASO,eAAe,EACvBC,SAAS,EACTC,aAAa,CAAC,EACdC,QAAQ,EACR,GAAGV,OACoD;IACvD,qBACC,KAACJ,iBAAiBe,MAAM;kBACvB,cAAA,KAACf,iBAAiBgB,OAAO;YACxBV,aAAU;YACVO,YAAYA;YACZD,WAAWX,GACV,wGACA,kGACA,wHACA,kHACA,oCACAW;YAEA,GAAGR,KAAK;sBAERU;;;AAIL;AAEA,SAASP,OAAO,EAAEE,cAAc,EAAEE,cAAc,EAAET,eAAe,GAAG"}
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/tooltip.tsx"],"sourcesContent":["\"use client\";\nimport * as TooltipPrimitive from \"@radix-ui/react-tooltip\";\nimport type * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\n// Tooltip content styles\nconst tooltipContentStyles = cn(\n\t// Layout\n\t\"z-50\",\n\t\"w-fit\",\n\t\"origin-(--radix-tooltip-content-transform-origin)\",\n\t// Shape\n\t\"rounded-md\",\n\t// Background & Colors\n\t\"bg-bg-overlay\",\n\t\"text-text-primary_on-brand\",\n\t// Spacing\n\t\"px-3\",\n\t\"py-1.5\",\n\t// Typography\n\t\"text-xs\",\n\t\"text-balance\",\n\t// Animations - open\n\t\"animate-in\",\n\t\"fade-in-0\",\n\t\"zoom-in-95\",\n\t// Animations - closed\n\t\"data-[state=closed]:animate-out\",\n\t\"data-[state=closed]:fade-out-0\",\n\t\"data-[state=closed]:zoom-out-95\",\n\t// Slide animations\n\t\"data-[side=bottom]:slide-in-from-top-2\",\n\t\"data-[side=left]:slide-in-from-right-2\",\n\t\"data-[side=right]:slide-in-from-left-2\",\n\t\"data-[side=top]:slide-in-from-bottom-2\",\n);\n\nfunction TooltipProvider({\n\tdelayDuration = 0,\n\t...props\n}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {\n\treturn (\n\t\t<TooltipPrimitive.Provider\n\t\t\tdata-slot=\"tooltip-provider\"\n\t\t\tdelayDuration={delayDuration}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction Tooltip({\n\t...props\n}: React.ComponentProps<typeof TooltipPrimitive.Root>) {\n\treturn (\n\t\t<TooltipProvider>\n\t\t\t<TooltipPrimitive.Root data-slot=\"tooltip\" {...props} />\n\t\t</TooltipProvider>\n\t);\n}\n\nfunction TooltipTrigger({\n\t...props\n}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {\n\treturn <TooltipPrimitive.Trigger data-slot=\"tooltip-trigger\" {...props} />;\n}\n\nfunction TooltipContent({\n\tclassName,\n\tsideOffset = 0,\n\tchildren,\n\t...props\n}: React.ComponentProps<typeof TooltipPrimitive.Content>) {\n\treturn (\n\t\t<TooltipPrimitive.Portal>\n\t\t\t<TooltipPrimitive.Content\n\t\t\t\tdata-slot=\"tooltip-content\"\n\t\t\t\tsideOffset={sideOffset}\n\t\t\t\tclassName={cn(tooltipContentStyles, className)}\n\t\t\t\t{...props}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</TooltipPrimitive.Content>\n\t\t</TooltipPrimitive.Portal>\n\t);\n}\n\nexport { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };\n"],"names":["TooltipPrimitive","cn","tooltipContentStyles","TooltipProvider","delayDuration","props","Provider","data-slot","Tooltip","Root","TooltipTrigger","Trigger","TooltipContent","className","sideOffset","children","Portal","Content"],"mappings":"AAAA;;AACA,YAAYA,sBAAsB,0BAA0B;AAG5D,SAASC,EAAE,QAAQ,qBAAoB;AAEvC,yBAAyB;AACzB,MAAMC,uBAAuBD,GAC5B,SAAS;AACT,QACA,SACA,qDACA,QAAQ;AACR,cACA,sBAAsB;AACtB,iBACA,8BACA,UAAU;AACV,QACA,UACA,aAAa;AACb,WACA,gBACA,oBAAoB;AACpB,cACA,aACA,cACA,sBAAsB;AACtB,mCACA,kCACA,mCACA,mBAAmB;AACnB,0CACA,0CACA,0CACA;AAGD,SAASE,gBAAgB,EACxBC,gBAAgB,CAAC,EACjB,GAAGC,OACqD;IACxD,qBACC,KAACL,iBAAiBM,QAAQ;QACzBC,aAAU;QACVH,eAAeA;QACd,GAAGC,KAAK;;AAGZ;AAEA,SAASG,QAAQ,EAChB,GAAGH,OACiD;IACpD,qBACC,KAACF;kBACA,cAAA,KAACH,iBAAiBS,IAAI;YAACF,aAAU;YAAW,GAAGF,KAAK;;;AAGvD;AAEA,SAASK,eAAe,EACvB,GAAGL,OACoD;IACvD,qBAAO,KAACL,iBAAiBW,OAAO;QAACJ,aAAU;QAAmB,GAAGF,KAAK;;AACvE;AAEA,SAASO,eAAe,EACvBC,SAAS,EACTC,aAAa,CAAC,EACdC,QAAQ,EACR,GAAGV,OACoD;IACvD,qBACC,KAACL,iBAAiBgB,MAAM;kBACvB,cAAA,KAAChB,iBAAiBiB,OAAO;YACxBV,aAAU;YACVO,YAAYA;YACZD,WAAWZ,GAAGC,sBAAsBW;YACnC,GAAGR,KAAK;sBAERU;;;AAIL;AAEA,SAASP,OAAO,EAAEE,cAAc,EAAEE,cAAc,EAAET,eAAe,GAAG"}

package/dist/src/shadcn/components/ui/tree.d.ts

@@ -0,0 +1,29 @@
+import type { ItemInstance } from "@headless-tree/core";
+import * as React from "react";
+type WithMeta = {
+    meta?: {
+        lastNode?: boolean;
+    };
+};
+interface TreeProps extends React.HTMLAttributes<HTMLDivElement> {
+    indent?: number;
+    tree?: any;
+}
+declare function Tree({ indent, tree, className, ...props }: TreeProps): import("react/jsx-runtime").JSX.Element;
+interface TreeItemProps<T = any> extends React.HTMLAttributes<HTMLButtonElement> {
+    item: ItemInstance<T>;
+    indent?: number;
+    asChild?: boolean;
+}
+declare function TreeItem<T = any>({ item, className, asChild, children, ...props }: Omit<TreeItemProps<T>, "indent">): import("react/jsx-runtime").JSX.Element;
+interface TreeItemLabelProps<T = any> extends React.HTMLAttributes<HTMLSpanElement> {
+    hideChevron?: boolean;
+    disableHover?: boolean;
+    item?: ItemInstance<T>;
+    horizontalLines?: boolean;
+    chevronClassName?: string;
+}
+declare function TreeItemLabel<T>({ item: propItem, children, className, disableHover, horizontalLines, hideChevron, chevronClassName, ...props }: TreeItemLabelProps<T & WithMeta>): import("react/jsx-runtime").JSX.Element | null;
+declare function TreeDragLine({ className, ...props }: React.HTMLAttributes<HTMLDivElement>): import("react/jsx-runtime").JSX.Element | null;
+export { Tree, TreeItem, TreeItemLabel, TreeDragLine, type ItemInstance };
+//# sourceMappingURL=tree.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"tree.d.ts","sourceRoot":"","sources":["../../../../../src/shadcn/components/ui/tree.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,qBAAqB,CAAC;AAGxD,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAI/B,KAAK,QAAQ,GAAG;IACf,IAAI,CAAC,EAAE;QACN,QAAQ,CAAC,EAAE,OAAO,CAAC;KACnB,CAAC;CACF,CAAC;AAmBF,UAAU,SAAU,SAAQ,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC;IAC/D,MAAM,CAAC,EAAE,MAAM,CAAC;IAEhB,IAAI,CAAC,EAAE,GAAG,CAAC;CACX;AAED,iBAAS,IAAI,CAAC,EAAE,MAAW,EAAE,IAAI,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,SAAS,2CA2BlE;AAGD,UAAU,aAAa,CAAC,CAAC,GAAG,GAAG,CAC9B,SAAQ,KAAK,CAAC,cAAc,CAAC,iBAAiB,CAAC;IAC/C,IAAI,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACtB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;CAClB;AAGD,iBAAS,QAAQ,CAAC,CAAC,GAAG,GAAG,EAAE,EAC1B,IAAI,EACJ,SAAS,EACT,OAAO,EACP,QAAQ,EACR,GAAG,KAAK,EACR,EAAE,IAAI,CAAC,aAAa,CAAC,CAAC,CAAC,EAAE,QAAQ,CAAC,2CAiElC;AAGD,UAAU,kBAAkB,CAAC,CAAC,GAAG,GAAG,CACnC,SAAQ,KAAK,CAAC,cAAc,CAAC,eAAe,CAAC;IAC7C,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,IAAI,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,CAAC;IACvB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,gBAAgB,CAAC,EAAE,MAAM,CAAC;CAC1B;AAED,iBAAS,aAAa,CAAC,CAAC,EAAE,EACzB,IAAI,EAAE,QAAQ,EACd,QAAQ,EACR,SAAS,EACT,YAAY,EACZ,eAAe,EACf,WAAW,EACX,gBAAqD,EACrD,GAAG,KAAK,EACR,EAAE,kBAAkB,CAAC,CAAC,GAAG,QAAQ,CAAC,kDA8DlC;AAED,iBAAS,YAAY,CAAC,EACrB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,kDAqBtC;AAED,OAAO,EAAE,IAAI,EAAE,QAAQ,EAAE,aAAa,EAAE,YAAY,EAAE,KAAK,YAAY,EAAE,CAAC"}

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

@@ -0,0 +1,135 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ChevronDownIcon } from "lucide-react";
+import { Slot } from "radix-ui";
+import * as React from "react";
+import { cn } from "../../lib/utils.js";
+const TreeContext = /*#__PURE__*/ React.createContext({
+    indent: 20
+});
+// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is
+function useTreeContext() {
+    return React.useContext(TreeContext);
+}
+function Tree({ indent = 20, tree, className, ...props }) {
+    const containerProps = tree && typeof tree.getContainerProps === "function" ? tree.getContainerProps() : {};
+    const mergedProps = {
+        ...props,
+        ...containerProps
+    };
+    // Extract style from mergedProps to merge with our custom styles
+    const { style: propStyle, ...otherProps } = mergedProps;
+    // Merge styles
+    const mergedStyle = {
+        ...propStyle,
+        "--tree-indent": `${indent}px`,
+        "--border": `var(--color-border-separator)`
+    };
+    return /*#__PURE__*/ _jsx(TreeContext.Provider, {
+        value: {
+            indent,
+            tree
+        },
+        children: /*#__PURE__*/ _jsx("div", {
+            "data-slot": "tree",
+            style: mergedStyle,
+            className: cn("flex flex-col", className),
+            ...otherProps
+        })
+    });
+}
+// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is
+function TreeItem({ item, className, asChild, children, ...props }) {
+    const { indent } = useTreeContext();
+    const itemProps = typeof item.getProps === "function" ? item.getProps() : {};
+    const mergedProps = {
+        ...props,
+        ...itemProps
+    };
+    // Extract style from mergedProps to merge with our custom styles
+    const { style: propStyle, ...otherProps } = mergedProps;
+    // Merge styles
+    const mergedStyle = {
+        ...propStyle,
+        "--tree-padding": `${item.getItemMeta().level * indent}px`
+    };
+    const Comp = asChild ? Slot.Root : "span";
+    return /*#__PURE__*/ _jsx(TreeContext.Provider, {
+        value: {
+            indent,
+            currentItem: item
+        },
+        children: /*#__PURE__*/ _jsx(Comp, {
+            "data-slot": "tree-item",
+            style: mergedStyle,
+            className: cn("z-10 ps-(--tree-padding) outline-hidden select-none focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50", className),
+            "data-focus": typeof item.isFocused === "function" ? item.isFocused() || false : undefined,
+            "data-folder": typeof item.isFolder === "function" ? item.isFolder() || false : undefined,
+            "data-selected": typeof item.isSelected === "function" ? item.isSelected() || false : undefined,
+            "data-drag-target": typeof item.isDragTarget === "function" ? item.isDragTarget() || false : undefined,
+            "data-search-match": typeof item.isMatchingSearch === "function" ? item.isMatchingSearch() || false : undefined,
+            "aria-expanded": item.isExpanded(),
+            ...Object.fromEntries(Object.entries(otherProps).filter(([key])=>key !== "onDragStart")),
+            onDragStart: (e)=>{
+                if (e.target.dataset.slot === "drag-handle") {
+                    item.getProps().onDragStart?.(e);
+                }
+            },
+            children: children
+        })
+    });
+}
+function TreeItemLabel({ item: propItem, children, className, disableHover, horizontalLines, hideChevron, chevronClassName = "self-start mt-0.5 cursor-pointer", ...props }) {
+    const { currentItem } = useTreeContext();
+    const item = propItem || currentItem;
+    if (!item) {
+        console.warn("TreeItemLabel: No item provided via props or context");
+        return null;
+    }
+    const data = item.getItemData?.();
+    const isLastNode = data?.meta?.lastNode;
+    const itemMeta = item.getItemMeta();
+    return /*#__PURE__*/ _jsxs("span", {
+        "data-slot": "tree-item-label",
+        className: cn("group/tree-item-label relative select-text in-focus-visible:ring-ring/50 bg-background text-text-primary in-data-[drag-target=true]:bg-accent flex items-center gap-2 pr-2 pl-2.5 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-2.5 in-focus-visible:ring-[3px] in-data-[search-match=true]:bg-blue-400/20! [&_svg]:pointer-events-none [&_svg]:shrink-0", !disableHover && "in-data-[focus=true]:bg-bg-secondary in-data-[focus=true]:text-text-primary", !disableHover && item.isFolder() && "hover:bg-bg-secondary hover:text-text-primary cursor-pointer", !disableHover && !item.isFolder() && "hover:bg-bg-secondary hover:text-text-primary cursor-pointer", disableHover && "text-text-primary", className),
+        ...props,
+        children: [
+            item.isFolder() && !hideChevron && /*#__PURE__*/ _jsx("button", {
+                type: "button",
+                className: chevronClassName,
+                onClick: (e)=>{
+                    e.stopPropagation();
+                    item.isExpanded() ? item.collapse() : item.expand();
+                },
+                children: /*#__PURE__*/ _jsx(ChevronDownIcon, {
+                    className: "text-muted-foreground size-4 in-aria-[expanded=false]:-rotate-90"
+                })
+            }),
+            !item.isFolder() && horizontalLines && /*#__PURE__*/ _jsx("div", {
+                className: `w-5 min-w-5 h-px border-t mt-2 -ml-1 self-start`
+            }),
+            item.isFolder() && item.isExpanded() && horizontalLines && /*#__PURE__*/ _jsx("div", {
+                className: `absolute left-4.25 top-8 w-px min-h-full h-full border-l mt-2.25  self-start `
+            }),
+            horizontalLines && /*#__PURE__*/ _jsx("div", {
+                className: `absolute left-0 top-4.75 -m-[5px] border-t w-4 ${isLastNode ? "h-full bg-inherit " : ""} ${itemMeta.level === 0 ? "hidden" : ""}`
+            }),
+            children || (typeof item.getItemName === "function" ? item.getItemName() : null)
+        ]
+    });
+}
+function TreeDragLine({ className, ...props }) {
+    const { tree } = useTreeContext();
+    if (!tree || typeof tree.getDragLineStyle !== "function") {
+        console.warn("TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method");
+        return null;
+    }
+    const dragLine = tree.getDragLineStyle();
+    return /*#__PURE__*/ _jsx("div", {
+        style: dragLine,
+        className: cn("bg-primary before:bg-background before:border-primary absolute z-30 -mt-px h-0.5 w-[unset] before:absolute before:-top-[3px] before:left-0 before:size-2 before:rounded-full before:border-2", className),
+        ...props
+    });
+}
+export { Tree, TreeItem, TreeItemLabel, TreeDragLine };
+
+//# sourceMappingURL=tree.js.map

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

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../../../src/shadcn/components/ui/tree.tsx"],"sourcesContent":["import type { ItemInstance } from \"@headless-tree/core\";\nimport { ChevronDownIcon } from \"lucide-react\";\nimport { Slot } from \"radix-ui\";\nimport * as React from \"react\";\n\nimport { cn } from \"#shadcn/lib/utils\";\n\ntype WithMeta = {\n\tmeta?: {\n\t\tlastNode?: boolean;\n\t};\n};\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeContextValue<T = any> {\n\tindent: number;\n\tcurrentItem?: ItemInstance<T>;\n\t// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\n\ttree?: any;\n}\n\nconst TreeContext = React.createContext<TreeContextValue>({\n\tindent: 20,\n});\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\nfunction useTreeContext<T = any>() {\n\treturn React.useContext(TreeContext) as TreeContextValue<T>;\n}\n\ninterface TreeProps extends React.HTMLAttributes<HTMLDivElement> {\n\tindent?: number;\n\t// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\n\ttree?: any;\n}\n\nfunction Tree({ indent = 20, tree, className, ...props }: TreeProps) {\n\tconst containerProps =\n\t\ttree && typeof tree.getContainerProps === \"function\"\n\t\t\t? tree.getContainerProps()\n\t\t\t: {};\n\tconst mergedProps = { ...props, ...containerProps };\n\n\t// Extract style from mergedProps to merge with our custom styles\n\tconst { style: propStyle, ...otherProps } = mergedProps;\n\n\t// Merge styles\n\tconst mergedStyle = {\n\t\t...propStyle,\n\t\t\"--tree-indent\": `${indent}px`,\n\t\t\"--border\": `var(--color-border-separator)`,\n\t} as React.CSSProperties;\n\n\treturn (\n\t\t<TreeContext.Provider value={{ indent, tree }}>\n\t\t\t<div\n\t\t\t\tdata-slot=\"tree\"\n\t\t\t\tstyle={mergedStyle}\n\t\t\t\tclassName={cn(\"flex flex-col\", className)}\n\t\t\t\t{...otherProps}\n\t\t\t/>\n\t\t</TreeContext.Provider>\n\t);\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeItemProps<T = any>\n\textends React.HTMLAttributes<HTMLButtonElement> {\n\titem: ItemInstance<T>;\n\tindent?: number;\n\tasChild?: boolean;\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\nfunction TreeItem<T = any>({\n\titem,\n\tclassName,\n\tasChild,\n\tchildren,\n\t...props\n}: Omit<TreeItemProps<T>, \"indent\">) {\n\tconst { indent } = useTreeContext<T>();\n\n\tconst itemProps = typeof item.getProps === \"function\" ? item.getProps() : {};\n\tconst mergedProps = { ...props, ...itemProps };\n\n\t// Extract style from mergedProps to merge with our custom styles\n\tconst { style: propStyle, ...otherProps } = mergedProps;\n\n\t// Merge styles\n\tconst mergedStyle = {\n\t\t...propStyle,\n\t\t\"--tree-padding\": `${item.getItemMeta().level * indent}px`,\n\t} as React.CSSProperties;\n\n\tconst Comp = asChild ? Slot.Root : \"span\";\n\n\treturn (\n\t\t<TreeContext.Provider value={{ indent, currentItem: item }}>\n\t\t\t<Comp\n\t\t\t\tdata-slot=\"tree-item\"\n\t\t\t\tstyle={mergedStyle}\n\t\t\t\tclassName={cn(\n\t\t\t\t\t\"z-10 ps-(--tree-padding) outline-hidden select-none focus:z-20 data-[disabled]:pointer-events-none data-[disabled]:opacity-50\",\n\t\t\t\t\tclassName,\n\t\t\t\t)}\n\t\t\t\tdata-focus={\n\t\t\t\t\ttypeof item.isFocused === \"function\"\n\t\t\t\t\t\t? item.isFocused() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-folder={\n\t\t\t\t\ttypeof item.isFolder === \"function\"\n\t\t\t\t\t\t? item.isFolder() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-selected={\n\t\t\t\t\ttypeof item.isSelected === \"function\"\n\t\t\t\t\t\t? item.isSelected() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-drag-target={\n\t\t\t\t\ttypeof item.isDragTarget === \"function\"\n\t\t\t\t\t\t? item.isDragTarget() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\tdata-search-match={\n\t\t\t\t\ttypeof item.isMatchingSearch === \"function\"\n\t\t\t\t\t\t? item.isMatchingSearch() || false\n\t\t\t\t\t\t: undefined\n\t\t\t\t}\n\t\t\t\taria-expanded={item.isExpanded()}\n\t\t\t\t{...Object.fromEntries(\n\t\t\t\t\tObject.entries(otherProps).filter(([key]) => key !== \"onDragStart\"),\n\t\t\t\t)}\n\t\t\t\tonDragStart={(e) => {\n\t\t\t\t\tif ((e.target as HTMLElement).dataset.slot === \"drag-handle\") {\n\t\t\t\t\t\titem.getProps().onDragStart?.(e);\n\t\t\t\t\t}\n\t\t\t\t}}\n\t\t\t>\n\t\t\t\t{children}\n\t\t\t</Comp>\n\t\t</TreeContext.Provider>\n\t);\n}\n\n// biome-ignore lint/suspicious/noExplicitAny: FIXME Origin UI as-is\ninterface TreeItemLabelProps<T = any>\n\textends React.HTMLAttributes<HTMLSpanElement> {\n\thideChevron?: boolean;\n\tdisableHover?: boolean;\n\titem?: ItemInstance<T>;\n\thorizontalLines?: boolean;\n\tchevronClassName?: string;\n}\n\nfunction TreeItemLabel<T>({\n\titem: propItem,\n\tchildren,\n\tclassName,\n\tdisableHover,\n\thorizontalLines,\n\thideChevron,\n\tchevronClassName = \"self-start mt-0.5 cursor-pointer\",\n\t...props\n}: TreeItemLabelProps<T & WithMeta>) {\n\tconst { currentItem } = useTreeContext<T & WithMeta>();\n\tconst item = propItem || currentItem;\n\n\tif (!item) {\n\t\tconsole.warn(\"TreeItemLabel: No item provided via props or context\");\n\t\treturn null;\n\t}\n\n\tconst data = item.getItemData?.();\n\tconst isLastNode = data?.meta?.lastNode;\n\tconst itemMeta = item.getItemMeta();\n\n\treturn (\n\t\t<span\n\t\t\tdata-slot=\"tree-item-label\"\n\t\t\tclassName={cn(\n\t\t\t\t\"group/tree-item-label relative select-text in-focus-visible:ring-ring/50 bg-background text-text-primary in-data-[drag-target=true]:bg-accent flex items-center gap-2 pr-2 pl-2.5 py-1.5 text-sm transition-colors not-in-data-[folder=true]:ps-2.5 in-focus-visible:ring-[3px] in-data-[search-match=true]:bg-blue-400/20! [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n\t\t\t\t!disableHover &&\n\t\t\t\t\t\"in-data-[focus=true]:bg-bg-secondary in-data-[focus=true]:text-text-primary\",\n\t\t\t\t!disableHover &&\n\t\t\t\t\titem.isFolder() &&\n\t\t\t\t\t\"hover:bg-bg-secondary hover:text-text-primary cursor-pointer\",\n\t\t\t\t!disableHover &&\n\t\t\t\t\t!item.isFolder() &&\n\t\t\t\t\t\"hover:bg-bg-secondary hover:text-text-primary cursor-pointer\",\n\t\t\t\tdisableHover && \"text-text-primary\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{item.isFolder() && !hideChevron && (\n\t\t\t\t<button\n\t\t\t\t\ttype=\"button\"\n\t\t\t\t\tclassName={chevronClassName}\n\t\t\t\t\tonClick={(e) => {\n\t\t\t\t\t\te.stopPropagation();\n\t\t\t\t\t\titem.isExpanded() ? item.collapse() : item.expand();\n\t\t\t\t\t}}\n\t\t\t\t>\n\t\t\t\t\t<ChevronDownIcon className=\"text-muted-foreground size-4 in-aria-[expanded=false]:-rotate-90\" />\n\t\t\t\t</button>\n\t\t\t)}\n\t\t\t{!item.isFolder() && horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`w-5 min-w-5 h-px border-t mt-2 -ml-1 self-start`}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{item.isFolder() && item.isExpanded() && horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`absolute left-4.25 top-8 w-px min-h-full h-full border-l mt-2.25  self-start `}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{horizontalLines && (\n\t\t\t\t<div\n\t\t\t\t\tclassName={`absolute left-0 top-4.75 -m-[5px] border-t w-4 ${isLastNode ? \"h-full bg-inherit \" : \"\"} ${itemMeta.level === 0 ? \"hidden\" : \"\"}`}\n\t\t\t\t></div>\n\t\t\t)}\n\t\t\t{children ||\n\t\t\t\t(typeof item.getItemName === \"function\" ? item.getItemName() : null)}\n\t\t</span>\n\t);\n}\n\nfunction TreeDragLine({\n\tclassName,\n\t...props\n}: React.HTMLAttributes<HTMLDivElement>) {\n\tconst { tree } = useTreeContext();\n\n\tif (!tree || typeof tree.getDragLineStyle !== \"function\") {\n\t\tconsole.warn(\n\t\t\t\"TreeDragLine: No tree provided via context or tree does not have getDragLineStyle method\",\n\t\t);\n\t\treturn null;\n\t}\n\n\tconst dragLine = tree.getDragLineStyle();\n\treturn (\n\t\t<div\n\t\t\tstyle={dragLine}\n\t\t\tclassName={cn(\n\t\t\t\t\"bg-primary before:bg-background before:border-primary absolute z-30 -mt-px h-0.5 w-[unset] before:absolute before:-top-[3px] before:left-0 before:size-2 before:rounded-full before:border-2\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nexport { Tree, TreeItem, TreeItemLabel, TreeDragLine, type ItemInstance };\n"],"names":["ChevronDownIcon","Slot","React","cn","TreeContext","createContext","indent","useTreeContext","useContext","Tree","tree","className","props","containerProps","getContainerProps","mergedProps","style","propStyle","otherProps","mergedStyle","Provider","value","div","data-slot","TreeItem","item","asChild","children","itemProps","getProps","getItemMeta","level","Comp","Root","currentItem","data-focus","isFocused","undefined","data-folder","isFolder","data-selected","isSelected","data-drag-target","isDragTarget","data-search-match","isMatchingSearch","aria-expanded","isExpanded","Object","fromEntries","entries","filter","key","onDragStart","e","target","dataset","slot","TreeItemLabel","propItem","disableHover","horizontalLines","hideChevron","chevronClassName","console","warn","data","getItemData","isLastNode","meta","lastNode","itemMeta","span","button","type","onClick","stopPropagation","collapse","expand","getItemName","TreeDragLine","getDragLineStyle","dragLine"],"mappings":"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"}

package/dist/src/shadcn/shadcn.css

@@ -78,7 +78,7 @@
 }
 
 .dark {
-	--background: oklch(0.145 0 0);
+	--background: var(--color-bg-primary);
 	--foreground: oklch(0.985 0 0);
 	--card: oklch(0.205 0 0);
 	--card-foreground: oklch(0.985 0 0);
@@ -101,11 +101,11 @@
 	--chart-3: oklch(0.769 0.188 70.08);
 	--chart-4: oklch(0.627 0.265 303.9);
 	--chart-5: oklch(0.645 0.246 16.439);
-	--sidebar: oklch(0.205 0 0);
+	--sidebar: var(--color-bg-primary);
 	--sidebar-foreground: oklch(0.985 0 0);
 	--sidebar-primary: oklch(0.488 0.243 264.376);
 	--sidebar-primary-foreground: oklch(0.985 0 0);
-	--sidebar-accent: oklch(0.269 0 0);
+	--sidebar-accent: oklch(0.205 0 0);
 	--sidebar-accent-foreground: oklch(0.985 0 0);
 	--sidebar-border: oklch(1 0 0 / 10%);
 	--sidebar-ring: oklch(0.556 0 0);
@@ -116,7 +116,7 @@
 		@apply border-border outline-ring/50;
 	}
 	body {
-		@apply bg-background text-foreground;
+		@apply bg-background text-foreground caret-foreground;
 		font-family: "Inter", system-ui, sans-serif;
 	}
 }

package/dist/src/tokens.css

@@ -40,8 +40,8 @@
 	--color-red-50: #fef9f9;
 	--color-red-100: #fff6f5;
 	--color-red-200: #fdedea;
-	--color-red-300: #f4a499;
-	--color-red-400: #ea4a35;
+	--color-red-300: #f18b7e;
+	--color-red-400: #db2e17;
 	--color-red-500: #d7270f;
 	--color-red-600: #d7270f;
 	--color-red-700: #c31b03;
@@ -54,7 +54,7 @@
 	--color-blue-200: #e9f2fc;
 	--color-blue-300: #d0e2f8;
 	--color-blue-400: #a7c9f3;
-	--color-blue-500: #2378e1;
+	--color-blue-500: #1e71d9;
 	--color-blue-600: #045ac3;
 	--color-blue-700: #014391;
 	--color-blue-800: #053775;
@@ -66,25 +66,39 @@
 	--color-green-200: #f1f8e6;
 	--color-green-300: #e3efcb;
 	--color-green-400: #c9e19b;
-	--color-green-500: #78b506;
+	--color-green-500: #547f04;
 	--color-green-600: #558300;
 	--color-green-700: #334e02;
 	--color-green-800: #1d2b03;
 	--color-green-900: #090d04;
 	--color-green-950: #090d04;
+	--color-green-550: #6aa300;
 
 	--color-yellow-50: #fffdf2;
 	--color-yellow-100: #fffbe5;
 	--color-yellow-200: #fff9d9;
 	--color-yellow-300: #fff4bf;
 	--color-yellow-400: #ffea80;
-	--color-yellow-500: #ffd400;
-	--color-yellow-600: #dfa400;
+	--color-yellow-500: #f4cb00;
+	--color-yellow-600: #946c01;
 	--color-yellow-700: #855600;
 	--color-yellow-800: #562a00;
 	--color-yellow-900: #341900;
 	--color-yellow-950: #200900;
 
+	--color-violet-50: #fdf9fd;
+	--color-violet-100: #fcf2fb;
+	--color-violet-200: #faeaf8;
+	--color-violet-300: #f5d4f0;
+	--color-violet-400: #eba9e2;
+	--color-violet-500: #cc29b6;
+	--color-violet-600: #931e83;
+	--color-violet-700: #58124e;
+	--color-violet-800: #310a2c;
+	--color-violet-900: #10030f;
+	--color-violet-950: #080207;
+
+	--font-size-xxs: 10px;
 	--font-size-xs: 12px;
 	--font-size-sm: 14px;
 	--font-size-base: 16px;
@@ -115,12 +129,12 @@
 	--font-weight-extrabold: 800;
 	--font-weight-black: 900;
 
-	--font-tracking-tighter: -0.8;
-	--font-tracking-tight: -0.4;
+	--font-tracking-tighter: -0.8px;
+	--font-tracking-tight: -0.4px;
 	--font-tracking-normal: 0px;
-	--font-tracking-wide: 0.4;
-	--font-tracking-wider: 0.8;
-	--font-tracking-widest: 1.6;
+	--font-tracking-wide: 0.4px;
+	--font-tracking-wider: 0.8px;
+	--font-tracking-widest: 1.6px;
 
 	--font-leading-3: 12px;
 	--font-leading-4: 16px;
@@ -146,34 +160,50 @@
 	--corner-corner-m: 6px;
 	--corner-corner-l: 8px;
 	--corner-corner-xs: 2px;
-	--color-elements-readable: var(--color-neutral-900);
 	--color-cta: var(--color-brand-600);
 	--color-critical-default: var(--color-red-600);
-	--color-elements-disabled: var(--color-neutral-300);
-	--color-elements-assistive: var(--color-neutral-500);
-	--color-surface-0: var(--color-neutral-50);
-	--color-border-default: var(--color-neutral-200);
-	--color-surface-selected: var(--color-neutral-200);
 	--color-cta-hover: var(--color-brand-700);
 	--color-critical-hover: var(--color-red-700);
-	--color-surface-1: var(--color-neutral-100);
 	--color-border-XS-critical: var(--color-red-50);
 	--color-border-XS-critical-hover: var(--color-red-100);
 	--color-elements-green: var(--color-green-600);
 	--color-elements-yellow: var(--color-yellow-500);
 	--color-border-XS-regular: var(--color-blue-300);
 	--color-border-XS-regular-hover: var(--color-blue-400);
-	--color-separator: var(--color-neutral-200);
 	--color-surface-info: var(--color-blue-50);
 	--color-surface-warning: var(--color-yellow-50);
 	--color-surface-alert: var(--color-red-50);
 	--color-elements-warning: var(--color-yellow-700);
 	--color-code-red: var(--color-red-600);
 	--color-code-blue: var(--color-blue-500);
-	--color-elements-readable-inv: var(--color-neutral-50);
 	--color-logo-readable: var(--color-neutral-800);
 	--color-elements-links: var(--color-brand-600);
 	--color-elements-info: var(--color-brand-600);
 	--color-elements-alert: var(--color-red-600);
 	--color-illustrations-solid: var(--color-brand-600);
 }
+
+/* Semantic tokens that need dark mode overrides — use @theme inline + :root so .dark can override */
+@theme inline {
+	--color-elements-readable: var(--hs-elements-readable);
+	--color-elements-readable-inv: var(--hs-elements-readable-inv);
+	--color-elements-assistive: var(--hs-elements-assistive);
+	--color-elements-disabled: var(--hs-elements-disabled);
+	--color-surface-0: var(--hs-surface-0);
+	--color-surface-1: var(--hs-surface-1);
+	--color-surface-selected: var(--hs-surface-selected);
+	--color-border-default: var(--hs-border-default);
+	--color-separator: var(--hs-separator);
+}
+
+:root {
+	--hs-elements-readable: var(--color-neutral-900);
+	--hs-elements-readable-inv: var(--color-neutral-50);
+	--hs-elements-assistive: var(--color-neutral-500);
+	--hs-elements-disabled: var(--color-neutral-300);
+	--hs-surface-0: var(--color-neutral-50);
+	--hs-surface-1: var(--color-neutral-100);
+	--hs-surface-selected: var(--color-neutral-200);
+	--hs-border-default: var(--color-neutral-200);
+	--hs-separator: var(--color-neutral-200);
+}