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

package/dist/src/components/tile.stories.js

@@ -0,0 +1,167 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Activity, BarChart3, Settings, Users } from "lucide-react";
+import { Tile } from "./tile.js";
+const meta = {
+    title: "Component/Tile",
+    component: Tile,
+    parameters: {
+        layout: "centered"
+    },
+    tags: [
+        "autodocs"
+    ],
+    argTypes: {
+        size: {
+            control: {
+                type: "select"
+            },
+            options: [
+                "auto",
+                "free"
+            ]
+        },
+        showIcon: {
+            control: {
+                type: "boolean"
+            }
+        },
+        icon: {
+            control: {
+                type: "select"
+            },
+            options: [
+                "Activity",
+                "Users",
+                "Settings",
+                "BarChart"
+            ],
+            mapping: {
+                Activity: /*#__PURE__*/ _jsx(Activity, {}),
+                Users: /*#__PURE__*/ _jsx(Users, {}),
+                Settings: /*#__PURE__*/ _jsx(Settings, {}),
+                BarChart: /*#__PURE__*/ _jsx(BarChart3, {})
+            }
+        },
+        width: {
+            control: {
+                type: "text"
+            }
+        }
+    }
+};
+export default meta;
+const ActivityIcon = ()=>/*#__PURE__*/ _jsx(Activity, {});
+const UsersIcon = ()=>/*#__PURE__*/ _jsx(Users, {});
+const SettingsIcon = ()=>/*#__PURE__*/ _jsx(Settings, {});
+const BarChartIcon = ()=>/*#__PURE__*/ _jsx(BarChart3, {});
+export const Default = {
+    args: {
+        label: "Active Apps",
+        value: "0",
+        icon: /*#__PURE__*/ _jsx(ActivityIcon, {}),
+        showIcon: true
+    }
+};
+export const WithIcon = {
+    args: {
+        label: "Active Apps",
+        value: "0",
+        icon: /*#__PURE__*/ _jsx(ActivityIcon, {}),
+        showIcon: true
+    }
+};
+export const AutoSize = {
+    args: {
+        label: "Users",
+        value: "1,234",
+        icon: /*#__PURE__*/ _jsx(UsersIcon, {}),
+        showIcon: true,
+        size: "auto"
+    }
+};
+export const FreeSize = {
+    args: {
+        label: "Total Revenue",
+        value: "$12,345",
+        icon: /*#__PURE__*/ _jsx(BarChartIcon, {}),
+        showIcon: true,
+        size: "free"
+    }
+};
+export const CustomWidth = {
+    args: {
+        label: "Settings",
+        value: "Configured",
+        icon: /*#__PURE__*/ _jsx(SettingsIcon, {}),
+        showIcon: true,
+        width: "200px"
+    }
+};
+export const WithoutIcon = {
+    args: {
+        label: "Simple Tile",
+        value: "No Icon",
+        showIcon: false
+    }
+};
+export const OnlyLabel = {
+    args: {
+        label: "Status",
+        showIcon: false
+    }
+};
+export const OnlyValue = {
+    args: {
+        value: "42",
+        showIcon: false
+    }
+};
+export const Grid = {
+    render: ()=>/*#__PURE__*/ _jsxs("div", {
+            className: "grid grid-cols-3 gap-4 w-full max-w-4xl",
+            children: [
+                /*#__PURE__*/ _jsx(Tile, {
+                    label: "Active Apps",
+                    value: "0",
+                    icon: /*#__PURE__*/ _jsx(ActivityIcon, {}),
+                    showIcon: true,
+                    size: "free"
+                }),
+                /*#__PURE__*/ _jsx(Tile, {
+                    label: "Users",
+                    value: "1,234",
+                    icon: /*#__PURE__*/ _jsx(UsersIcon, {}),
+                    showIcon: true,
+                    size: "free"
+                }),
+                /*#__PURE__*/ _jsx(Tile, {
+                    label: "Revenue",
+                    value: "$12,345",
+                    icon: /*#__PURE__*/ _jsx(BarChartIcon, {}),
+                    showIcon: true,
+                    size: "free"
+                }),
+                /*#__PURE__*/ _jsx(Tile, {
+                    label: "Settings",
+                    value: "Configured",
+                    icon: /*#__PURE__*/ _jsx(SettingsIcon, {}),
+                    showIcon: true,
+                    size: "free"
+                }),
+                /*#__PURE__*/ _jsx(Tile, {
+                    label: "Simple",
+                    value: "No Icon",
+                    showIcon: false,
+                    size: "free"
+                }),
+                /*#__PURE__*/ _jsx(Tile, {
+                    label: "Status",
+                    value: "Online",
+                    showIcon: false,
+                    size: "free"
+                })
+            ]
+        })
+};
+
+//# sourceMappingURL=tile.stories.js.map

package/dist/src/components/tile.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tile.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { Activity, BarChart3, Settings, Users } from \"lucide-react\";\nimport { Tile } from \"./tile\";\n\nconst meta: Meta<typeof Tile> = {\n\ttitle: \"Component/Tile\",\n\tcomponent: Tile,\n\tparameters: {\n\t\tlayout: \"centered\",\n\t},\n\ttags: [\"autodocs\"],\n\targTypes: {\n\t\tsize: {\n\t\t\tcontrol: { type: \"select\" },\n\t\t\toptions: [\"auto\", \"free\"],\n\t\t},\n\t\tshowIcon: {\n\t\t\tcontrol: { type: \"boolean\" },\n\t\t},\n\t\ticon: {\n\t\t\tcontrol: { type: \"select\" },\n\t\t\toptions: [\"Activity\", \"Users\", \"Settings\", \"BarChart\"],\n\t\t\tmapping: {\n\t\t\t\tActivity: <Activity />,\n\t\t\t\tUsers: <Users />,\n\t\t\t\tSettings: <Settings />,\n\t\t\t\tBarChart: <BarChart3 />,\n\t\t\t},\n\t\t},\n\t\twidth: {\n\t\t\tcontrol: { type: \"text\" },\n\t\t},\n\t},\n};\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nconst ActivityIcon = () => <Activity />;\nconst UsersIcon = () => <Users />;\nconst SettingsIcon = () => <Settings />;\nconst BarChartIcon = () => <BarChart3 />;\n\nexport const Default: Story = {\n\targs: {\n\t\tlabel: \"Active Apps\",\n\t\tvalue: \"0\",\n\t\ticon: <ActivityIcon />,\n\t\tshowIcon: true,\n\t},\n};\n\nexport const WithIcon: Story = {\n\targs: {\n\t\tlabel: \"Active Apps\",\n\t\tvalue: \"0\",\n\t\ticon: <ActivityIcon />,\n\t\tshowIcon: true,\n\t},\n};\n\nexport const AutoSize: Story = {\n\targs: {\n\t\tlabel: \"Users\",\n\t\tvalue: \"1,234\",\n\t\ticon: <UsersIcon />,\n\t\tshowIcon: true,\n\t\tsize: \"auto\",\n\t},\n};\n\nexport const FreeSize: Story = {\n\targs: {\n\t\tlabel: \"Total Revenue\",\n\t\tvalue: \"$12,345\",\n\t\ticon: <BarChartIcon />,\n\t\tshowIcon: true,\n\t\tsize: \"free\",\n\t},\n};\n\nexport const CustomWidth: Story = {\n\targs: {\n\t\tlabel: \"Settings\",\n\t\tvalue: \"Configured\",\n\t\ticon: <SettingsIcon />,\n\t\tshowIcon: true,\n\t\twidth: \"200px\",\n\t},\n};\n\nexport const WithoutIcon: Story = {\n\targs: {\n\t\tlabel: \"Simple Tile\",\n\t\tvalue: \"No Icon\",\n\t\tshowIcon: false,\n\t},\n};\n\nexport const OnlyLabel: Story = {\n\targs: {\n\t\tlabel: \"Status\",\n\t\tshowIcon: false,\n\t},\n};\n\nexport const OnlyValue: Story = {\n\targs: {\n\t\tvalue: \"42\",\n\t\tshowIcon: false,\n\t},\n};\n\nexport const Grid: Story = {\n\trender: () => (\n\t\t<div className=\"grid grid-cols-3 gap-4 w-full max-w-4xl\">\n\t\t\t<Tile\n\t\t\t\tlabel=\"Active Apps\"\n\t\t\t\tvalue=\"0\"\n\t\t\t\ticon={<ActivityIcon />}\n\t\t\t\tshowIcon={true}\n\t\t\t\tsize=\"free\"\n\t\t\t/>\n\t\t\t<Tile\n\t\t\t\tlabel=\"Users\"\n\t\t\t\tvalue=\"1,234\"\n\t\t\t\ticon={<UsersIcon />}\n\t\t\t\tshowIcon={true}\n\t\t\t\tsize=\"free\"\n\t\t\t/>\n\t\t\t<Tile\n\t\t\t\tlabel=\"Revenue\"\n\t\t\t\tvalue=\"$12,345\"\n\t\t\t\ticon={<BarChartIcon />}\n\t\t\t\tshowIcon={true}\n\t\t\t\tsize=\"free\"\n\t\t\t/>\n\t\t\t<Tile\n\t\t\t\tlabel=\"Settings\"\n\t\t\t\tvalue=\"Configured\"\n\t\t\t\ticon={<SettingsIcon />}\n\t\t\t\tshowIcon={true}\n\t\t\t\tsize=\"free\"\n\t\t\t/>\n\t\t\t<Tile label=\"Simple\" value=\"No Icon\" showIcon={false} size=\"free\" />\n\t\t\t<Tile label=\"Status\" value=\"Online\" showIcon={false} size=\"free\" />\n\t\t</div>\n\t),\n};\n"],"names":["Activity","BarChart3","Settings","Users","Tile","meta","title","component","parameters","layout","tags","argTypes","size","control","type","options","showIcon","icon","mapping","BarChart","width","ActivityIcon","UsersIcon","SettingsIcon","BarChartIcon","Default","args","label","value","WithIcon","AutoSize","FreeSize","CustomWidth","WithoutIcon","OnlyLabel","OnlyValue","Grid","render","div","className"],"mappings":";AACA,SAASA,QAAQ,EAAEC,SAAS,EAAEC,QAAQ,EAAEC,KAAK,QAAQ,eAAe;AACpE,SAASC,IAAI,QAAQ,YAAS;AAE9B,MAAMC,OAA0B;IAC/BC,OAAO;IACPC,WAAWH;IACXI,YAAY;QACXC,QAAQ;IACT;IACAC,MAAM;QAAC;KAAW;IAClBC,UAAU;QACTC,MAAM;YACLC,SAAS;gBAAEC,MAAM;YAAS;YAC1BC,SAAS;gBAAC;gBAAQ;aAAO;QAC1B;QACAC,UAAU;YACTH,SAAS;gBAAEC,MAAM;YAAU;QAC5B;QACAG,MAAM;YACLJ,SAAS;gBAAEC,MAAM;YAAS;YAC1BC,SAAS;gBAAC;gBAAY;gBAAS;gBAAY;aAAW;YACtDG,SAAS;gBACRlB,wBAAU,KAACA;gBACXG,qBAAO,KAACA;gBACRD,wBAAU,KAACA;gBACXiB,wBAAU,KAAClB;YACZ;QACD;QACAmB,OAAO;YACNP,SAAS;gBAAEC,MAAM;YAAO;QACzB;IACD;AACD;AAEA,eAAeT,KAAK;AAGpB,MAAMgB,eAAe,kBAAM,KAACrB;AAC5B,MAAMsB,YAAY,kBAAM,KAACnB;AACzB,MAAMoB,eAAe,kBAAM,KAACrB;AAC5B,MAAMsB,eAAe,kBAAM,KAACvB;AAE5B,OAAO,MAAMwB,UAAiB;IAC7BC,MAAM;QACLC,OAAO;QACPC,OAAO;QACPX,oBAAM,KAACI;QACPL,UAAU;IACX;AACD,EAAE;AAEF,OAAO,MAAMa,WAAkB;IAC9BH,MAAM;QACLC,OAAO;QACPC,OAAO;QACPX,oBAAM,KAACI;QACPL,UAAU;IACX;AACD,EAAE;AAEF,OAAO,MAAMc,WAAkB;IAC9BJ,MAAM;QACLC,OAAO;QACPC,OAAO;QACPX,oBAAM,KAACK;QACPN,UAAU;QACVJ,MAAM;IACP;AACD,EAAE;AAEF,OAAO,MAAMmB,WAAkB;IAC9BL,MAAM;QACLC,OAAO;QACPC,OAAO;QACPX,oBAAM,KAACO;QACPR,UAAU;QACVJ,MAAM;IACP;AACD,EAAE;AAEF,OAAO,MAAMoB,cAAqB;IACjCN,MAAM;QACLC,OAAO;QACPC,OAAO;QACPX,oBAAM,KAACM;QACPP,UAAU;QACVI,OAAO;IACR;AACD,EAAE;AAEF,OAAO,MAAMa,cAAqB;IACjCP,MAAM;QACLC,OAAO;QACPC,OAAO;QACPZ,UAAU;IACX;AACD,EAAE;AAEF,OAAO,MAAMkB,YAAmB;IAC/BR,MAAM;QACLC,OAAO;QACPX,UAAU;IACX;AACD,EAAE;AAEF,OAAO,MAAMmB,YAAmB;IAC/BT,MAAM;QACLE,OAAO;QACPZ,UAAU;IACX;AACD,EAAE;AAEF,OAAO,MAAMoB,OAAc;IAC1BC,QAAQ,kBACP,MAACC;YAAIC,WAAU;;8BACd,KAACnC;oBACAuB,OAAM;oBACNC,OAAM;oBACNX,oBAAM,KAACI;oBACPL,UAAU;oBACVJ,MAAK;;8BAEN,KAACR;oBACAuB,OAAM;oBACNC,OAAM;oBACNX,oBAAM,KAACK;oBACPN,UAAU;oBACVJ,MAAK;;8BAEN,KAACR;oBACAuB,OAAM;oBACNC,OAAM;oBACNX,oBAAM,KAACO;oBACPR,UAAU;oBACVJ,MAAK;;8BAEN,KAACR;oBACAuB,OAAM;oBACNC,OAAM;oBACNX,oBAAM,KAACM;oBACPP,UAAU;oBACVJ,MAAK;;8BAEN,KAACR;oBAAKuB,OAAM;oBAASC,OAAM;oBAAUZ,UAAU;oBAAOJ,MAAK;;8BAC3D,KAACR;oBAAKuB,OAAM;oBAASC,OAAM;oBAASZ,UAAU;oBAAOJ,MAAK;;;;AAG7D,EAAE"}

package/dist/src/components/toolbar.d.ts

@@ -0,0 +1,18 @@
+import type React from "react";
+export interface ToolbarProps extends Omit<React.ComponentProps<"div">, "children"> {
+    segmentControlValue?: string;
+    onSegmentControlChange?: (value: string) => void;
+    segmentControlItems?: {
+        value: string;
+        label: React.ReactNode;
+    }[];
+    onCopyClick?: () => void;
+    onAlignLeftClick?: () => void;
+    onDownloadClick?: () => void;
+    showCopy?: boolean;
+    showAlignLeft?: boolean;
+    showDownload?: boolean;
+}
+declare function Toolbar({ segmentControlValue, onSegmentControlChange, segmentControlItems, onCopyClick, onAlignLeftClick, onDownloadClick, showCopy, showAlignLeft, showDownload, className, ...props }: ToolbarProps): import("react/jsx-runtime").JSX.Element;
+export { Toolbar };
+//# sourceMappingURL=toolbar.d.ts.map

package/dist/src/components/toolbar.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/toolbar.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,KAAK,MAAM,OAAO,CAAC;AAiC/B,MAAM,WAAW,YAChB,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,EAAE,UAAU,CAAC;IACrD,mBAAmB,CAAC,EAAE,MAAM,CAAC;IAC7B,sBAAsB,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACjD,mBAAmB,CAAC,EAAE;QAAE,KAAK,EAAE,MAAM,CAAC;QAAC,KAAK,EAAE,KAAK,CAAC,SAAS,CAAA;KAAE,EAAE,CAAC;IAClE,WAAW,CAAC,EAAE,MAAM,IAAI,CAAC;IACzB,gBAAgB,CAAC,EAAE,MAAM,IAAI,CAAC;IAC9B,eAAe,CAAC,EAAE,MAAM,IAAI,CAAC;IAC7B,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,aAAa,CAAC,EAAE,OAAO,CAAC;IACxB,YAAY,CAAC,EAAE,OAAO,CAAC;CACvB;AAED,iBAAS,OAAO,CAAC,EAChB,mBAA4B,EAC5B,sBAAsB,EACtB,mBAGC,EACD,WAAW,EACX,gBAAgB,EAChB,eAAe,EACf,QAAe,EACf,aAAoB,EACpB,YAAmB,EACnB,SAAS,EACT,GAAG,KAAK,EACR,EAAE,YAAY,2CAiCd;AAED,OAAO,EAAE,OAAO,EAAE,CAAC"}

package/dist/src/components/toolbar.js

@@ -0,0 +1,61 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { AlignLeft, Copy, Download } from "lucide-react";
+import { cn } from "../shadcn/lib/utils.js";
+import { IconButton } from "./icon-button.js";
+import { SegmentControl } from "./segment-control.js";
+// Styles
+const toolbarContainerStyles = cn(// Layout
+"inline-flex", "items-center", "gap-2", // Spacing
+"pl-[9px]", "pr-2", "py-2", // Background
+"bg-bg-primary", // Border
+"border", "border-border-secondary", // Shape
+"rounded-full", // Shadow
+"toolbar-shadow");
+const iconsContainerStyles = cn(// Layout
+"flex", "items-center", "gap-0");
+function Toolbar({ segmentControlValue = "json", onSegmentControlChange, segmentControlItems = [
+    {
+        value: "json",
+        label: "JSON"
+    },
+    {
+        value: "yaml",
+        label: "YAML"
+    }
+], onCopyClick, onAlignLeftClick, onDownloadClick, showCopy = true, showAlignLeft = true, showDownload = true, className, ...props }) {
+    return /*#__PURE__*/ _jsxs("div", {
+        "data-slot": "toolbar",
+        className: cn(toolbarContainerStyles, className),
+        ...props,
+        children: [
+            /*#__PURE__*/ _jsx(SegmentControl, {
+                value: segmentControlValue,
+                onValueChange: onSegmentControlChange || (()=>{}),
+                items: segmentControlItems
+            }),
+            /*#__PURE__*/ _jsxs("div", {
+                className: iconsContainerStyles,
+                children: [
+                    showCopy && /*#__PURE__*/ _jsx(IconButton, {
+                        icon: /*#__PURE__*/ _jsx(Copy, {}),
+                        "aria-label": "Copy",
+                        onClick: onCopyClick
+                    }),
+                    showAlignLeft && /*#__PURE__*/ _jsx(IconButton, {
+                        icon: /*#__PURE__*/ _jsx(AlignLeft, {}),
+                        "aria-label": "Align left",
+                        onClick: onAlignLeftClick
+                    }),
+                    showDownload && /*#__PURE__*/ _jsx(IconButton, {
+                        icon: /*#__PURE__*/ _jsx(Download, {}),
+                        "aria-label": "Download",
+                        onClick: onDownloadClick
+                    })
+                ]
+            })
+        ]
+    });
+}
+export { Toolbar };
+
+//# sourceMappingURL=toolbar.js.map

package/dist/src/components/toolbar.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/toolbar.tsx"],"sourcesContent":["import { AlignLeft, Copy, Download } from \"lucide-react\";\nimport type React from \"react\";\nimport { cn } from \"#shadcn/lib/utils\";\nimport { IconButton } from \"./icon-button\";\nimport { SegmentControl } from \"./segment-control\";\n\n// Styles\nconst toolbarContainerStyles = cn(\n\t// Layout\n\t\"inline-flex\",\n\t\"items-center\",\n\t\"gap-2\",\n\t// Spacing\n\t\"pl-[9px]\",\n\t\"pr-2\",\n\t\"py-2\",\n\t// Background\n\t\"bg-bg-primary\",\n\t// Border\n\t\"border\",\n\t\"border-border-secondary\",\n\t// Shape\n\t\"rounded-full\",\n\t// Shadow\n\t\"toolbar-shadow\",\n);\n\nconst iconsContainerStyles = cn(\n\t// Layout\n\t\"flex\",\n\t\"items-center\",\n\t\"gap-0\",\n);\n\nexport interface ToolbarProps\n\textends Omit<React.ComponentProps<\"div\">, \"children\"> {\n\tsegmentControlValue?: string;\n\tonSegmentControlChange?: (value: string) => void;\n\tsegmentControlItems?: { value: string; label: React.ReactNode }[];\n\tonCopyClick?: () => void;\n\tonAlignLeftClick?: () => void;\n\tonDownloadClick?: () => void;\n\tshowCopy?: boolean;\n\tshowAlignLeft?: boolean;\n\tshowDownload?: boolean;\n}\n\nfunction Toolbar({\n\tsegmentControlValue = \"json\",\n\tonSegmentControlChange,\n\tsegmentControlItems = [\n\t\t{ value: \"json\", label: \"JSON\" },\n\t\t{ value: \"yaml\", label: \"YAML\" },\n\t],\n\tonCopyClick,\n\tonAlignLeftClick,\n\tonDownloadClick,\n\tshowCopy = true,\n\tshowAlignLeft = true,\n\tshowDownload = true,\n\tclassName,\n\t...props\n}: ToolbarProps) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"toolbar\"\n\t\t\tclassName={cn(toolbarContainerStyles, className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<SegmentControl\n\t\t\t\tvalue={segmentControlValue}\n\t\t\t\tonValueChange={onSegmentControlChange || (() => {})}\n\t\t\t\titems={segmentControlItems}\n\t\t\t/>\n\t\t\t<div className={iconsContainerStyles}>\n\t\t\t\t{showCopy && (\n\t\t\t\t\t<IconButton icon={<Copy />} aria-label=\"Copy\" onClick={onCopyClick} />\n\t\t\t\t)}\n\t\t\t\t{showAlignLeft && (\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\ticon={<AlignLeft />}\n\t\t\t\t\t\taria-label=\"Align left\"\n\t\t\t\t\t\tonClick={onAlignLeftClick}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t\t{showDownload && (\n\t\t\t\t\t<IconButton\n\t\t\t\t\t\ticon={<Download />}\n\t\t\t\t\t\taria-label=\"Download\"\n\t\t\t\t\t\tonClick={onDownloadClick}\n\t\t\t\t\t/>\n\t\t\t\t)}\n\t\t\t</div>\n\t\t</div>\n\t);\n}\n\nexport { Toolbar };\n"],"names":["AlignLeft","Copy","Download","cn","IconButton","SegmentControl","toolbarContainerStyles","iconsContainerStyles","Toolbar","segmentControlValue","onSegmentControlChange","segmentControlItems","value","label","onCopyClick","onAlignLeftClick","onDownloadClick","showCopy","showAlignLeft","showDownload","className","props","div","data-slot","onValueChange","items","icon","aria-label","onClick"],"mappings":";AAAA,SAASA,SAAS,EAAEC,IAAI,EAAEC,QAAQ,QAAQ,eAAe;AAEzD,SAASC,EAAE,QAAQ,yBAAoB;AACvC,SAASC,UAAU,QAAQ,mBAAgB;AAC3C,SAASC,cAAc,QAAQ,uBAAoB;AAEnD,SAAS;AACT,MAAMC,yBAAyBH,GAC9B,SAAS;AACT,eACA,gBACA,SACA,UAAU;AACV,YACA,QACA,QACA,aAAa;AACb,iBACA,SAAS;AACT,UACA,2BACA,QAAQ;AACR,gBACA,SAAS;AACT;AAGD,MAAMI,uBAAuBJ,GAC5B,SAAS;AACT,QACA,gBACA;AAgBD,SAASK,QAAQ,EAChBC,sBAAsB,MAAM,EAC5BC,sBAAsB,EACtBC,sBAAsB;IACrB;QAAEC,OAAO;QAAQC,OAAO;IAAO;IAC/B;QAAED,OAAO;QAAQC,OAAO;IAAO;CAC/B,EACDC,WAAW,EACXC,gBAAgB,EAChBC,eAAe,EACfC,WAAW,IAAI,EACfC,gBAAgB,IAAI,EACpBC,eAAe,IAAI,EACnBC,SAAS,EACT,GAAGC,OACW;IACd,qBACC,MAACC;QACAC,aAAU;QACVH,WAAWjB,GAAGG,wBAAwBc;QACrC,GAAGC,KAAK;;0BAET,KAAChB;gBACAO,OAAOH;gBACPe,eAAed,0BAA2B,CAAA,KAAO,CAAA;gBACjDe,OAAOd;;0BAER,MAACW;gBAAIF,WAAWb;;oBACdU,0BACA,KAACb;wBAAWsB,oBAAM,KAACzB;wBAAS0B,cAAW;wBAAOC,SAASd;;oBAEvDI,+BACA,KAACd;wBACAsB,oBAAM,KAAC1B;wBACP2B,cAAW;wBACXC,SAASb;;oBAGVI,8BACA,KAACf;wBACAsB,oBAAM,KAACxB;wBACPyB,cAAW;wBACXC,SAASZ;;;;;;AAMf;AAEA,SAASR,OAAO,GAAG"}

package/dist/src/components/toolbar.stories.js

@@ -0,0 +1,69 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import { Toolbar } from "./toolbar.js";
+const meta = {
+    title: "Component/Toolbar",
+    component: Toolbar,
+    parameters: {
+        layout: "centered"
+    },
+    tags: [
+        "autodocs"
+    ]
+};
+export default meta;
+export const Default = {
+    args: {
+        segmentControlValue: "json",
+        onSegmentControlChange: ()=>{},
+        segmentControlItems: [
+            {
+                value: "json",
+                label: "JSON"
+            },
+            {
+                value: "yaml",
+                label: "YAML"
+            }
+        ],
+        showCopy: true,
+        showAlignLeft: true,
+        showDownload: true
+    },
+    render: (args)=>{
+        const [value, setValue] = useState(args.segmentControlValue || "json");
+        return /*#__PURE__*/ _jsx(Toolbar, {
+            ...args,
+            segmentControlValue: value,
+            onSegmentControlChange: setValue
+        });
+    }
+};
+export const WithCustomActions = {
+    args: {
+        segmentControlValue: "json",
+        segmentControlItems: [
+            {
+                value: "json",
+                label: "JSON"
+            },
+            {
+                value: "yaml",
+                label: "YAML"
+            }
+        ],
+        showCopy: true,
+        showAlignLeft: false,
+        showDownload: true
+    },
+    render: (args)=>{
+        const [value, setValue] = useState(args.segmentControlValue || "json");
+        return /*#__PURE__*/ _jsx(Toolbar, {
+            ...args,
+            segmentControlValue: value,
+            onSegmentControlChange: setValue
+        });
+    }
+};
+
+//# sourceMappingURL=toolbar.stories.js.map

package/dist/src/components/toolbar.stories.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/toolbar.stories.tsx"],"sourcesContent":["import type { Meta, StoryObj } from \"@storybook/react-vite\";\nimport { useState } from \"react\";\nimport { Toolbar } from \"./toolbar\";\n\nconst meta = {\n\ttitle: \"Component/Toolbar\",\n\tcomponent: Toolbar,\n\tparameters: {\n\t\tlayout: \"centered\",\n\t},\n\ttags: [\"autodocs\"],\n} satisfies Meta<typeof Toolbar>;\n\nexport default meta;\ntype Story = StoryObj<typeof meta>;\n\nexport const Default: Story = {\n\targs: {\n\t\tsegmentControlValue: \"json\",\n\t\tonSegmentControlChange: () => {},\n\t\tsegmentControlItems: [\n\t\t\t{ value: \"json\", label: \"JSON\" },\n\t\t\t{ value: \"yaml\", label: \"YAML\" },\n\t\t],\n\t\tshowCopy: true,\n\t\tshowAlignLeft: true,\n\t\tshowDownload: true,\n\t},\n\trender: (args) => {\n\t\tconst [value, setValue] = useState(args.segmentControlValue || \"json\");\n\n\t\treturn (\n\t\t\t<Toolbar\n\t\t\t\t{...args}\n\t\t\t\tsegmentControlValue={value}\n\t\t\t\tonSegmentControlChange={setValue}\n\t\t\t/>\n\t\t);\n\t},\n};\n\nexport const WithCustomActions: Story = {\n\targs: {\n\t\tsegmentControlValue: \"json\",\n\t\tsegmentControlItems: [\n\t\t\t{ value: \"json\", label: \"JSON\" },\n\t\t\t{ value: \"yaml\", label: \"YAML\" },\n\t\t],\n\t\tshowCopy: true,\n\t\tshowAlignLeft: false,\n\t\tshowDownload: true,\n\t},\n\trender: (args) => {\n\t\tconst [value, setValue] = useState(args.segmentControlValue || \"json\");\n\n\t\treturn (\n\t\t\t<Toolbar\n\t\t\t\t{...args}\n\t\t\t\tsegmentControlValue={value}\n\t\t\t\tonSegmentControlChange={setValue}\n\t\t\t/>\n\t\t);\n\t},\n};\n"],"names":["useState","Toolbar","meta","title","component","parameters","layout","tags","Default","args","segmentControlValue","onSegmentControlChange","segmentControlItems","value","label","showCopy","showAlignLeft","showDownload","render","setValue","WithCustomActions"],"mappings":";AACA,SAASA,QAAQ,QAAQ,QAAQ;AACjC,SAASC,OAAO,QAAQ,eAAY;AAEpC,MAAMC,OAAO;IACZC,OAAO;IACPC,WAAWH;IACXI,YAAY;QACXC,QAAQ;IACT;IACAC,MAAM;QAAC;KAAW;AACnB;AAEA,eAAeL,KAAK;AAGpB,OAAO,MAAMM,UAAiB;IAC7BC,MAAM;QACLC,qBAAqB;QACrBC,wBAAwB,KAAO;QAC/BC,qBAAqB;YACpB;gBAAEC,OAAO;gBAAQC,OAAO;YAAO;YAC/B;gBAAED,OAAO;gBAAQC,OAAO;YAAO;SAC/B;QACDC,UAAU;QACVC,eAAe;QACfC,cAAc;IACf;IACAC,QAAQ,CAACT;QACR,MAAM,CAACI,OAAOM,SAAS,GAAGnB,SAASS,KAAKC,mBAAmB,IAAI;QAE/D,qBACC,KAACT;YACC,GAAGQ,IAAI;YACRC,qBAAqBG;YACrBF,wBAAwBQ;;IAG3B;AACD,EAAE;AAEF,OAAO,MAAMC,oBAA2B;IACvCX,MAAM;QACLC,qBAAqB;QACrBE,qBAAqB;YACpB;gBAAEC,OAAO;gBAAQC,OAAO;YAAO;YAC/B;gBAAED,OAAO;gBAAQC,OAAO;YAAO;SAC/B;QACDC,UAAU;QACVC,eAAe;QACfC,cAAc;IACf;IACAC,QAAQ,CAACT;QACR,MAAM,CAACI,OAAOM,SAAS,GAAGnB,SAASS,KAAKC,mBAAmB,IAAI;QAE/D,qBACC,KAACT;YACC,GAAGQ,IAAI;YACRC,qBAAqBG;YACrBF,wBAAwBQ;;IAG3B;AACD,EAAE"}

package/dist/src/components/tree-view.d.ts

@@ -0,0 +1,47 @@
+import type { ItemInstance, TreeInstance } from "@headless-tree/core";
+import React from "react";
+interface TreeViewItem<T> {
+    name: string;
+    children?: string[];
+    meta?: T;
+}
+type ExpansionPropsUncontrolled = {
+    defaultExpandedItems?: string[];
+    expandedItems?: never;
+    onExpandedItemsChange?: never;
+};
+type ExpansionPropsControlled = {
+    defaultExpandedItems?: never;
+    expandedItems: string[];
+    onExpandedItemsChange: (items: string[]) => void;
+};
+type ExpansionProps = ExpansionPropsUncontrolled | ExpansionPropsControlled;
+type FocusPropsUncontrolled = {
+    defaultFocusedItem?: string;
+    focusedItem?: never;
+    onFocusedItemChange?: never;
+};
+type FocusPropsControlled = {
+    defaultFocusedItem?: never;
+    focusedItem: string | null;
+    onFocusedItemChange: (item: string | null) => void;
+};
+type FocusProps = FocusPropsUncontrolled | FocusPropsControlled;
+type TreeViewProps<T> = {
+    rootItemId: string;
+    items: Record<string, TreeViewItem<T>>;
+    customItemView?: (item: ItemInstance<TreeViewItem<T>>, tree: TreeInstance<TreeViewItem<T>>) => React.ReactNode;
+    onRename?: ((item: ItemInstance<TreeViewItem<T>>, value: string) => void) | undefined;
+    disableHover?: boolean;
+    zebra?: boolean;
+    horizontalLines?: boolean;
+    hideChevron?: boolean;
+    itemLabelClassFn?: (item: ItemInstance<TreeViewItem<T>>) => string;
+    onItemLabelClick?: (item: ItemInstance<TreeViewItem<T>>) => void;
+    chevronClassName?: string;
+    canReorder?: boolean;
+    onDropFn?: (tree: TreeInstance<TreeViewItem<T>>, item: ItemInstance<TreeViewItem<T>>, newChildren: string[]) => void;
+} & ExpansionProps & FocusProps;
+declare function TreeView<T>({ rootItemId, items, defaultFocusedItem, focusedItem, onFocusedItemChange, defaultExpandedItems, expandedItems, onExpandedItemsChange, customItemView, onRename, disableHover, zebra, horizontalLines, hideChevron, itemLabelClassFn, onItemLabelClick, chevronClassName, canReorder, onDropFn, }: TreeViewProps<T>): import("react/jsx-runtime").JSX.Element;
+export { TreeView, type TreeViewItem, type TreeInstance };
+//# sourceMappingURL=tree-view.d.ts.map

package/dist/src/components/tree-view.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"tree-view.d.ts","sourceRoot":"","sources":["../../../src/components/tree-view.tsx"],"names":[],"mappings":"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"}

package/dist/src/components/tree-view.js

@@ -0,0 +1,122 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { createOnDropHandler, dragAndDropFeature, hotkeysCoreFeature, renamingFeature, selectionFeature, syncDataLoaderFeature } from "@headless-tree/core";
+import { useTree } from "@headless-tree/react";
+import React from "react";
+import { Tree, TreeItem, TreeItemLabel } from "../shadcn/components/ui/tree.js";
+import { cn } from "../shadcn/lib/utils.js";
+// Styles
+const treeItemStyle = cn("relative", "before:absolute", "before:inset-0", "before:-ms-1", "before:-z-20", "before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]");
+const treeItemLabelStyle = cn("before:bg-background", "relative", "before:absolute", "before:inset-x-0", "before:-inset-y-0", "before:-z-10");
+const customClickBehavior = {
+    itemInstance: {
+        getProps: ({ item, prev })=>{
+            return {
+                ...prev?.(),
+                onClick: ()=>{
+                    item.setFocused();
+                    item.primaryAction();
+                }
+            };
+        }
+    }
+};
+const indent = 22;
+function TreeView({ rootItemId, items, defaultFocusedItem, focusedItem, onFocusedItemChange, defaultExpandedItems, expandedItems, onExpandedItemsChange, customItemView, onRename, disableHover, zebra, horizontalLines, hideChevron, itemLabelClassFn, onItemLabelClick, chevronClassName, canReorder, onDropFn }) {
+    "use no memo";
+    const initialExpandedItems = defaultExpandedItems ?? expandedItems;
+    const initialFocusedItem = defaultFocusedItem ?? focusedItem;
+    const setExpandedItems = expandedItems !== undefined && onExpandedItemsChange !== undefined ? (updater)=>{
+        const newVal = updater instanceof Function ? updater(expandedItems) : updater;
+        onExpandedItemsChange(newVal);
+    } : undefined;
+    const setFocusedItem = focusedItem !== undefined && onFocusedItemChange !== undefined ? (updater)=>{
+        const newVal = updater instanceof Function ? updater(focusedItem) : updater;
+        onFocusedItemChange(newVal);
+    } : undefined;
+    const treeConfig = {
+        initialState: {
+            ...initialExpandedItems !== undefined ? {
+                expandedItems: initialExpandedItems
+            } : {},
+            ...initialFocusedItem !== undefined ? {
+                focusedItem: initialFocusedItem
+            } : {}
+        },
+        state: {
+            ...expandedItems !== undefined ? {
+                expandedItems
+            } : {},
+            ...focusedItem !== undefined ? {
+                focusedItem
+            } : {}
+        },
+        ...setExpandedItems !== undefined ? {
+            setExpandedItems
+        } : {},
+        ...setFocusedItem !== undefined ? {
+            setFocusedItem
+        } : {},
+        indent,
+        rootItemId: rootItemId,
+        isItemFolder: (item)=>item.getItemData()?.children !== undefined,
+        getItemName: (item)=>item.getItemData()?.name,
+        dataLoader: {
+            getItem: (itemId)=>items[itemId] ?? {
+                    name: "",
+                    children: []
+                },
+            getChildren: (itemId)=>items[itemId]?.children ?? []
+        },
+        ...onRename ? {
+            onRename: onRename
+        } : {},
+        features: [
+            syncDataLoaderFeature,
+            hotkeysCoreFeature,
+            selectionFeature,
+            renamingFeature,
+            dragAndDropFeature,
+            customClickBehavior
+        ],
+        canReorder: canReorder ?? false,
+        onDrop: createOnDropHandler((item, newChildren)=>{
+            onDropFn?.(tree, item, newChildren);
+        })
+    };
+    const tree = useTree(treeConfig);
+    const [prevItems, setPrevItems] = React.useState(null);
+    if (prevItems !== items) {
+        tree.rebuildTree();
+        setPrevItems(items);
+    }
+    return /*#__PURE__*/ _jsxs(Tree, {
+        tree: tree,
+        indent: indent,
+        children: [
+            tree.getItems().map((item)=>{
+                return /*#__PURE__*/ _jsx(TreeItem, {
+                    item: item,
+                    className: cn(treeItemStyle, zebra ? "even:bg-bg-secondary even:[&_[data-slot=tree-item-label]]:bg-bg-secondary" : ""),
+                    children: /*#__PURE__*/ _jsx(TreeItemLabel, {
+                        hideChevron: hideChevron ?? false,
+                        disableHover: disableHover ?? false,
+                        className: cn(treeItemLabelStyle, itemLabelClassFn?.(item)),
+                        onClick: onItemLabelClick ? ()=>onItemLabelClick(item) : undefined,
+                        horizontalLines: horizontalLines ?? false,
+                        ...chevronClassName !== undefined ? {
+                            chevronClassName
+                        } : {},
+                        children: customItemView ? customItemView(item, tree) : item.getItemData()?.name
+                    })
+                }, item.getId());
+            }),
+            /*#__PURE__*/ _jsx("div", {
+                style: tree.getDragLineStyle(),
+                className: "h-px bg-bg-link z-100 mx-4"
+            })
+        ]
+    });
+}
+export { TreeView };
+
+//# sourceMappingURL=tree-view.js.map

package/dist/src/components/tree-view.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../../src/components/tree-view.tsx"],"sourcesContent":["import type {\n\tFeatureImplementation,\n\tItemInstance,\n\tTreeConfig,\n\tTreeInstance,\n\tUpdater,\n} from \"@headless-tree/core\";\nimport {\n\tcreateOnDropHandler,\n\tdragAndDropFeature,\n\thotkeysCoreFeature,\n\trenamingFeature,\n\tselectionFeature,\n\tsyncDataLoaderFeature,\n} from \"@headless-tree/core\";\nimport { useTree } from \"@headless-tree/react\";\nimport React from \"react\";\nimport { Tree, TreeItem, TreeItemLabel } from \"#shadcn/components/ui/tree\";\nimport { cn } from \"#shadcn/lib/utils.js\";\n\n// Styles\nconst treeItemStyle = cn(\n\t\"relative\",\n\t\"before:absolute\",\n\t\"before:inset-0\",\n\t\"before:-ms-1\",\n\t\"before:-z-20\",\n\t\"before:bg-[repeating-linear-gradient(to_right,transparent_0,transparent_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)-1px),var(--border)_calc(var(--tree-indent)))]\",\n);\n\nconst treeItemLabelStyle = cn(\n\t\"before:bg-background\",\n\t\"relative\",\n\t\"before:absolute\",\n\t\"before:inset-x-0\",\n\t\"before:-inset-y-0\",\n\t\"before:-z-10\",\n);\n\ninterface TreeViewItem<T> {\n\tname: string;\n\tchildren?: string[];\n\tmeta?: T;\n}\n\nconst customClickBehavior: FeatureImplementation = {\n\titemInstance: {\n\t\tgetProps: ({ item, prev }) => {\n\t\t\treturn {\n\t\t\t\t...prev?.(),\n\t\t\t\tonClick: () => {\n\t\t\t\t\titem.setFocused();\n\t\t\t\t\titem.primaryAction();\n\t\t\t\t},\n\t\t\t};\n\t\t},\n\t},\n};\n\nconst indent = 22;\n\ntype ExpansionPropsUncontrolled = {\n\tdefaultExpandedItems?: string[];\n\texpandedItems?: never;\n\tonExpandedItemsChange?: never;\n};\ntype ExpansionPropsControlled = {\n\tdefaultExpandedItems?: never;\n\texpandedItems: string[];\n\tonExpandedItemsChange: (items: string[]) => void;\n};\ntype ExpansionProps = ExpansionPropsUncontrolled | ExpansionPropsControlled;\n\ntype FocusPropsUncontrolled = {\n\tdefaultFocusedItem?: string;\n\tfocusedItem?: never;\n\tonFocusedItemChange?: never;\n};\ntype FocusPropsControlled = {\n\tdefaultFocusedItem?: never;\n\tfocusedItem: string | null;\n\tonFocusedItemChange: (item: string | null) => void;\n};\ntype FocusProps = FocusPropsUncontrolled | FocusPropsControlled;\n\ntype TreeViewProps<T> = {\n\trootItemId: string;\n\titems: Record<string, TreeViewItem<T>>;\n\tcustomItemView?: (\n\t\titem: ItemInstance<TreeViewItem<T>>,\n\t\ttree: TreeInstance<TreeViewItem<T>>,\n\t) => React.ReactNode;\n\tonRename?:\n\t\t| ((item: ItemInstance<TreeViewItem<T>>, value: string) => void)\n\t\t| undefined;\n\tdisableHover?: boolean;\n\tzebra?: boolean;\n\thorizontalLines?: boolean;\n\thideChevron?: boolean;\n\titemLabelClassFn?: (item: ItemInstance<TreeViewItem<T>>) => string;\n\tonItemLabelClick?: (item: ItemInstance<TreeViewItem<T>>) => void;\n\tchevronClassName?: string;\n\tcanReorder?: boolean;\n\tonDropFn?: (\n\t\ttree: TreeInstance<TreeViewItem<T>>,\n\t\titem: ItemInstance<TreeViewItem<T>>,\n\t\tnewChildren: string[],\n\t) => void;\n} & ExpansionProps &\n\tFocusProps;\n\nfunction TreeView<T>({\n\trootItemId,\n\titems,\n\tdefaultFocusedItem,\n\tfocusedItem,\n\tonFocusedItemChange,\n\tdefaultExpandedItems,\n\texpandedItems,\n\tonExpandedItemsChange,\n\tcustomItemView,\n\tonRename,\n\tdisableHover,\n\tzebra,\n\thorizontalLines,\n\thideChevron,\n\titemLabelClassFn,\n\tonItemLabelClick,\n\tchevronClassName,\n\tcanReorder,\n\tonDropFn,\n}: TreeViewProps<T>) {\n\t\"use no memo\";\n\n\tconst initialExpandedItems = defaultExpandedItems ?? expandedItems;\n\tconst initialFocusedItem = defaultFocusedItem ?? focusedItem;\n\n\tconst setExpandedItems =\n\t\texpandedItems !== undefined && onExpandedItemsChange !== undefined\n\t\t\t? (updater: Updater<string[]>) => {\n\t\t\t\t\tconst newVal =\n\t\t\t\t\t\tupdater instanceof Function ? updater(expandedItems) : updater;\n\n\t\t\t\t\tonExpandedItemsChange(newVal);\n\t\t\t\t}\n\t\t\t: undefined;\n\n\tconst setFocusedItem =\n\t\tfocusedItem !== undefined && onFocusedItemChange !== undefined\n\t\t\t? (updater: Updater<string | null>) => {\n\t\t\t\t\tconst newVal =\n\t\t\t\t\t\tupdater instanceof Function ? updater(focusedItem) : updater;\n\n\t\t\t\t\tonFocusedItemChange(newVal);\n\t\t\t\t}\n\t\t\t: undefined;\n\n\tconst treeConfig: TreeConfig<TreeViewItem<T>> = {\n\t\tinitialState: {\n\t\t\t...(initialExpandedItems !== undefined\n\t\t\t\t? { expandedItems: initialExpandedItems }\n\t\t\t\t: {}),\n\t\t\t...(initialFocusedItem !== undefined\n\t\t\t\t? { focusedItem: initialFocusedItem }\n\t\t\t\t: {}),\n\t\t},\n\t\tstate: {\n\t\t\t...(expandedItems !== undefined ? { expandedItems } : {}),\n\t\t\t...(focusedItem !== undefined ? { focusedItem } : {}),\n\t\t},\n\t\t...(setExpandedItems !== undefined ? { setExpandedItems } : {}),\n\t\t...(setFocusedItem !== undefined ? { setFocusedItem } : {}),\n\t\tindent,\n\t\trootItemId: rootItemId,\n\t\tisItemFolder: (item: ItemInstance<TreeViewItem<T>>) =>\n\t\t\titem.getItemData()?.children !== undefined,\n\t\tgetItemName: (item: ItemInstance<TreeViewItem<T>>) =>\n\t\t\titem.getItemData()?.name,\n\t\tdataLoader: {\n\t\t\tgetItem: (itemId) =>\n\t\t\t\titems[itemId] ?? ({ name: \"\", children: [] } as TreeViewItem<T>),\n\t\t\tgetChildren: (itemId) => items[itemId]?.children ?? [],\n\t\t},\n\t\t...(onRename ? { onRename: onRename } : {}),\n\t\tfeatures: [\n\t\t\tsyncDataLoaderFeature,\n\t\t\thotkeysCoreFeature,\n\t\t\tselectionFeature,\n\t\t\trenamingFeature,\n\t\t\tdragAndDropFeature,\n\t\t\tcustomClickBehavior,\n\t\t],\n\t\tcanReorder: canReorder ?? false,\n\t\tonDrop: createOnDropHandler((item, newChildren) => {\n\t\t\tonDropFn?.(tree, item, newChildren);\n\t\t}),\n\t};\n\n\tconst tree = useTree<TreeViewItem<T>>(treeConfig);\n\n\tconst [prevItems, setPrevItems] = React.useState<null | typeof items>(null);\n\tif (prevItems !== items) {\n\t\ttree.rebuildTree();\n\t\tsetPrevItems(items);\n\t}\n\n\treturn (\n\t\t<Tree tree={tree} indent={indent}>\n\t\t\t{tree.getItems().map((item) => {\n\t\t\t\treturn (\n\t\t\t\t\t<TreeItem\n\t\t\t\t\t\tkey={item.getId()}\n\t\t\t\t\t\titem={item}\n\t\t\t\t\t\tclassName={cn(\n\t\t\t\t\t\t\ttreeItemStyle,\n\t\t\t\t\t\t\tzebra\n\t\t\t\t\t\t\t\t? \"even:bg-bg-secondary even:[&_[data-slot=tree-item-label]]:bg-bg-secondary\"\n\t\t\t\t\t\t\t\t: \"\",\n\t\t\t\t\t\t)}\n\t\t\t\t\t>\n\t\t\t\t\t\t<TreeItemLabel\n\t\t\t\t\t\t\thideChevron={hideChevron ?? false}\n\t\t\t\t\t\t\tdisableHover={disableHover ?? false}\n\t\t\t\t\t\t\tclassName={cn(treeItemLabelStyle, itemLabelClassFn?.(item))}\n\t\t\t\t\t\t\tonClick={\n\t\t\t\t\t\t\t\tonItemLabelClick ? () => onItemLabelClick(item) : undefined\n\t\t\t\t\t\t\t}\n\t\t\t\t\t\t\thorizontalLines={horizontalLines ?? false}\n\t\t\t\t\t\t\t{...(chevronClassName !== undefined ? { chevronClassName } : {})}\n\t\t\t\t\t\t>\n\t\t\t\t\t\t\t{customItemView\n\t\t\t\t\t\t\t\t? customItemView(item, tree)\n\t\t\t\t\t\t\t\t: item.getItemData()?.name}\n\t\t\t\t\t\t</TreeItemLabel>\n\t\t\t\t\t</TreeItem>\n\t\t\t\t);\n\t\t\t})}\n\t\t\t<div\n\t\t\t\tstyle={tree.getDragLineStyle()}\n\t\t\t\tclassName=\"h-px bg-bg-link z-100 mx-4\"\n\t\t\t/>\n\t\t</Tree>\n\t);\n}\n\nexport { TreeView, type TreeViewItem, type TreeInstance };\n"],"names":["createOnDropHandler","dragAndDropFeature","hotkeysCoreFeature","renamingFeature","selectionFeature","syncDataLoaderFeature","useTree","React","Tree","TreeItem","TreeItemLabel","cn","treeItemStyle","treeItemLabelStyle","customClickBehavior","itemInstance","getProps","item","prev","onClick","setFocused","primaryAction","indent","TreeView","rootItemId","items","defaultFocusedItem","focusedItem","onFocusedItemChange","defaultExpandedItems","expandedItems","onExpandedItemsChange","customItemView","onRename","disableHover","zebra","horizontalLines","hideChevron","itemLabelClassFn","onItemLabelClick","chevronClassName","canReorder","onDropFn","initialExpandedItems","initialFocusedItem","setExpandedItems","undefined","updater","newVal","Function","setFocusedItem","treeConfig","initialState","state","isItemFolder","getItemData","children","getItemName","name","dataLoader","getItem","itemId","getChildren","features","onDrop","newChildren","tree","prevItems","setPrevItems","useState","rebuildTree","getItems","map","className","getId","div","style","getDragLineStyle"],"mappings":"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"}