@exsto/ds 0.0.1-rc.13 → 0.0.1-rc.14

package/dist/ui/src/components/ui/select/select.js

@@ -0,0 +1,99 @@
+import { cn } from "../../../lib/utils.js";
+import { ScrollArea } from "../scroll-area/scroll-area.js";
+import { POPUP_ITEM_INDICATOR_CLASS, popupItemClass } from "../../../lib/popup-list.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconCheck, IconChevronDown } from "@tabler/icons-react";
+import { Select } from "@base-ui/react/select";
+//#region ../ui/src/components/ui/select/select.tsx
+var Select$1 = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Select.Root, {
+		"data-slot": "select",
+		...props
+	});
+};
+var SelectTrigger = ({ className, size = "default", children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Select.Trigger, {
+		"data-slot": "select-trigger",
+		className: cn("flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg border border-input bg-transparent text-sm text-foreground transition-colors outline-none", "focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50", "disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50", "aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20", "data-popup-open:border-ring data-popup-open:ring-3 data-popup-open:ring-ring/50", "dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", size === "sm" ? "h-7 px-2.5 text-[0.8rem]" : "h-8 px-2.5", className),
+		...props,
+		children: [children, /* @__PURE__ */ jsx(Select.Icon, {
+			"data-slot": "select-icon",
+			className: "shrink-0 text-muted-foreground",
+			children: /* @__PURE__ */ jsx(IconChevronDown, { className: "size-4" })
+		})]
+	});
+};
+var SelectValue = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.Value, {
+		"data-slot": "select-value",
+		className: cn("truncate data-placeholder:text-muted-foreground", className),
+		...props
+	});
+};
+var SelectContent = ({ className, children, portalContainer, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.Portal, {
+		container: portalContainer,
+		children: /* @__PURE__ */ jsx(Select.Positioner, {
+			"data-slot": "select-positioner",
+			sideOffset: 4,
+			align: "start",
+			alignItemWithTrigger: false,
+			children: /* @__PURE__ */ jsx(Select.Popup, {
+				"data-slot": "select-content",
+				className: cn("z-50 min-w-[var(--anchor-width)] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none", "origin-[var(--transform-origin)]", "transition-[transform,scale,opacity] motion-reduce:animate-none motion-reduce:transition-none data-open:scale-100 data-open:opacity-100 data-closed:scale-95 data-closed:opacity-0 data-open:animate-in data-closed:animate-out data-open:fade-in-0 data-closed:fade-out-0", className),
+				...props,
+				children: /* @__PURE__ */ jsx(ScrollArea, {
+					type: "always",
+					fade: true,
+					fadeFrom: "popover",
+					className: "max-h-(--available-height)",
+					children: /* @__PURE__ */ jsx(Select.List, {
+						"data-slot": "select-list",
+						children
+					})
+				})
+			})
+		})
+	});
+};
+var SelectGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.Group, {
+		"data-slot": "select-group",
+		className: cn("flex flex-col gap-0.5", className),
+		...props
+	});
+};
+var SelectLabel = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Select.GroupLabel, {
+		"data-slot": "select-label",
+		className: cn("px-2 py-1 text-xs font-semibold text-muted-foreground", className),
+		...props
+	});
+};
+var SelectItem = ({ className, children, ...props }) => {
+	return /* @__PURE__ */ jsxs(Select.Item, {
+		"data-slot": "select-item",
+		className: cn(popupItemClass("base-ui", true), className),
+		...props,
+		children: [/* @__PURE__ */ jsx(Select.ItemText, {
+			"data-slot": "select-item-text",
+			children
+		}), /* @__PURE__ */ jsx(Select.ItemIndicator, {
+			"data-slot": "select-item-indicator",
+			className: POPUP_ITEM_INDICATOR_CLASS,
+			children: /* @__PURE__ */ jsx(IconCheck, { className: "size-3.5" })
+		})]
+	});
+};
+var SelectSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "select-separator",
+		className: cn("-mx-1 my-1 h-px bg-border", className),
+		"aria-hidden": "true",
+		...props
+	});
+};
+//#endregion
+export { Select$1 as Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue };
+
+//# sourceMappingURL=select.js.map

package/dist/ui/src/components/ui/select/select.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"select.js","names":[],"sources":["../../../../../../../ui/src/components/ui/select/select.tsx"],"sourcesContent":["import { Select as SelectPrimitive } from '@base-ui/react/select';\nimport { POPUP_ITEM_INDICATOR_CLASS, popupItemClass } from '@edyn/ui/lib/popup-list';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconCheck, IconChevronDown } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { ScrollArea } from '../scroll-area';\n\nexport const Select = <TValue,>({ ...props }: SelectPrimitive.Root.Props<TValue>) => {\n  return <SelectPrimitive.Root data-slot=\"select\" {...props} />;\n};\n\nexport type TSelectTriggerSize = 'sm' | 'default';\n\nexport interface ISelectTriggerProps extends SelectPrimitive.Trigger.Props {\n  size?: TSelectTriggerSize;\n}\n\nexport const SelectTrigger = ({ className, size = 'default', children, ...props }: ISelectTriggerProps) => {\n  return (\n    <SelectPrimitive.Trigger\n      data-slot=\"select-trigger\"\n      className={cn(\n        'flex w-full cursor-pointer items-center justify-between gap-2 rounded-lg border border-input bg-transparent text-sm text-foreground transition-colors outline-none',\n        'focus-visible:border-ring focus-visible:ring-3 focus-visible:ring-ring/50',\n        'disabled:pointer-events-none disabled:cursor-not-allowed disabled:opacity-50',\n        'aria-invalid:border-destructive aria-invalid:ring-3 aria-invalid:ring-destructive/20',\n        'data-popup-open:border-ring data-popup-open:ring-3 data-popup-open:ring-ring/50',\n        'dark:bg-input/30 dark:disabled:bg-input/80 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40',\n        size === 'sm' ? 'h-7 px-2.5 text-[0.8rem]' : 'h-8 px-2.5',\n        className,\n      )}\n      {...props}\n    >\n      {children}\n      <SelectPrimitive.Icon data-slot=\"select-icon\" className=\"shrink-0 text-muted-foreground\">\n        <IconChevronDown className=\"size-4\" />\n      </SelectPrimitive.Icon>\n    </SelectPrimitive.Trigger>\n  );\n};\n\nexport const SelectValue = ({ className, ...props }: SelectPrimitive.Value.Props) => {\n  return <SelectPrimitive.Value data-slot=\"select-value\" className={cn('truncate data-placeholder:text-muted-foreground', className)} {...props} />;\n};\n\nexport interface ISelectContentProps extends SelectPrimitive.Popup.Props {\n  portalContainer?: SelectPrimitive.Portal.Props['container'];\n}\n\nexport const SelectContent = ({ className, children, portalContainer, ...props }: ISelectContentProps) => {\n  return (\n    <SelectPrimitive.Portal container={portalContainer}>\n      {/* alignItemWithTrigger=false: drop below the trigger (shadcn style), not Base UI's macOS-style overlay */}\n      <SelectPrimitive.Positioner data-slot=\"select-positioner\" sideOffset={4} align=\"start\" alignItemWithTrigger={false}>\n        <SelectPrimitive.Popup\n          data-slot=\"select-content\"\n          className={cn(\n            'z-50 min-w-[var(--anchor-width)] overflow-hidden rounded-xl border border-border bg-popover p-1 text-popover-foreground shadow-md outline-none',\n            'origin-[var(--transform-origin)]',\n            'transition-[transform,scale,opacity] motion-reduce:animate-none motion-reduce:transition-none data-open:scale-100 data-open:opacity-100 data-closed:scale-95 data-closed:opacity-0 data-open:animate-in data-closed:animate-out data-open:fade-in-0 data-closed:fade-out-0',\n            className,\n          )}\n          {...props}\n        >\n          {/* A long option list has to scroll inside the popup: the popup clips\n              (overflow-hidden) and carries no height of its own, so the options\n              past the fold were simply unreachable. --available-height is the\n              room the positioner measured for it. */}\n          {/* Select.List is what makes the wrappers legal: with a list present Base\n              UI moves `role=\"listbox\"` off the popup and onto it, so the options\n              stay direct children of the role and the ScrollArea sits outside it. */}\n          <ScrollArea type=\"always\" fade fadeFrom=\"popover\" className=\"max-h-(--available-height)\">\n            <SelectPrimitive.List data-slot=\"select-list\">{children}</SelectPrimitive.List>\n          </ScrollArea>\n        </SelectPrimitive.Popup>\n      </SelectPrimitive.Positioner>\n    </SelectPrimitive.Portal>\n  );\n};\n\nexport const SelectGroup = ({ className, ...props }: SelectPrimitive.Group.Props) => {\n  return <SelectPrimitive.Group data-slot=\"select-group\" className={cn('flex flex-col gap-0.5', className)} {...props} />;\n};\n\nexport const SelectLabel = ({ className, ...props }: SelectPrimitive.GroupLabel.Props) => {\n  return (\n    <SelectPrimitive.GroupLabel\n      data-slot=\"select-label\"\n      className={cn('px-2 py-1 text-xs font-semibold text-muted-foreground', className)}\n      {...props}\n    />\n  );\n};\n\nexport const SelectItem = ({ className, children, ...props }: SelectPrimitive.Item.Props) => {\n  return (\n    <SelectPrimitive.Item data-slot=\"select-item\" className={cn(popupItemClass('base-ui', true), className)} {...props}>\n      <SelectPrimitive.ItemText data-slot=\"select-item-text\">{children}</SelectPrimitive.ItemText>\n      {/* After the text, not before it: the check marks the end of the item in\n          every list in the system, so the labels all start on one line. */}\n      <SelectPrimitive.ItemIndicator data-slot=\"select-item-indicator\" className={POPUP_ITEM_INDICATOR_CLASS}>\n        <IconCheck className=\"size-3.5\" />\n      </SelectPrimitive.ItemIndicator>\n    </SelectPrimitive.Item>\n  );\n};\n\nexport const SelectSeparator = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"select-separator\" className={cn('-mx-1 my-1 h-px bg-border', className)} aria-hidden=\"true\" {...props} />;\n};\n"],"mappings":";;;;;;;AAOA,IAAa,YAAmB,EAAE,GAAG,YAAgD;CACnF,OAAO,oBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAS,GAAI;CAAQ,CAAA;AAC9D;AAQA,IAAa,iBAAiB,EAAE,WAAW,OAAO,WAAW,UAAU,GAAG,YAAiC;CACzG,OACE,qBAAC,OAAgB,SAAjB;EACE,aAAU;EACV,WAAW,GACT,sKACA,6EACA,gFACA,wFACA,mFACA,4HACA,SAAS,OAAO,6BAA6B,cAC7C,SACF;EACA,GAAI;EAZN,UAAA,CAcG,UACD,oBAAC,OAAgB,MAAjB;GAAsB,aAAU;GAAc,WAAU;GACtD,UAAA,oBAAC,iBAAD,EAAiB,WAAU,SAAU,CAAA;EACjB,CAAA,CACC;;AAE7B;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,mDAAmD,SAAS;EAAG,GAAI;CAAQ,CAAA;AAClJ;AAMA,IAAa,iBAAiB,EAAE,WAAW,UAAU,iBAAiB,GAAG,YAAiC;CACxG,OACE,oBAAC,OAAgB,QAAjB;EAAwB,WAAW;EAEjC,UAAA,oBAAC,OAAgB,YAAjB;GAA4B,aAAU;GAAoB,YAAY;GAAG,OAAM;GAAQ,sBAAsB;GAC3G,UAAA,oBAAC,OAAgB,OAAjB;IACE,aAAU;IACV,WAAW,GACT,kJACA,oCACA,8QACA,SACF;IACA,GAAI;IASJ,UAAA,oBAAC,YAAD;KAAY,MAAK;KAAS,MAAA;KAAK,UAAS;KAAU,WAAU;KAC1D,UAAA,oBAAC,OAAgB,MAAjB;MAAsB,aAAU;MAAe;KAA+B,CAAA;IACpE,CAAA;GACS,CAAA;EACG,CAAA;CACN,CAAA;AAE5B;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAgB,OAAjB;EAAuB,aAAU;EAAe,WAAW,GAAG,yBAAyB,SAAS;EAAG,GAAI;CAAQ,CAAA;AACxH;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAA8C;CACxF,OACE,oBAAC,OAAgB,YAAjB;EACE,aAAU;EACV,WAAW,GAAG,yDAAyD,SAAS;EAChF,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,cAAc,EAAE,WAAW,UAAU,GAAG,YAAwC;CAC3F,OACE,qBAAC,OAAgB,MAAjB;EAAsB,aAAU;EAAc,WAAW,GAAG,eAAe,WAAW,IAAI,GAAG,SAAS;EAAG,GAAI;EAA7G,UAAA,CACE,oBAAC,OAAgB,UAAjB;GAA0B,aAAU;GAAoB;EAAmC,CAAA,GAG3F,oBAAC,OAAgB,eAAjB;GAA+B,aAAU;GAAwB,WAAW;GAC1E,UAAA,oBAAC,WAAD,EAAW,WAAU,WAAY,CAAA;EACJ,CAAA,CACX;;AAE1B;AAEA,IAAa,mBAAmB,EAAE,WAAW,GAAG,YAAyC;CACvF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAmB,WAAW,GAAG,6BAA6B,SAAS;EAAG,eAAY;EAAO,GAAI;CAAQ,CAAA;AACjI"}

package/dist/ui/src/components/ui/separator/separator.js

@@ -0,0 +1,30 @@
+import { cn } from "../../../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+import { Separator } from "@base-ui/react/separator";
+//#region ../ui/src/components/ui/separator/separator.tsx
+/**
+* Hairline rule between content, announced as `role="separator"`.
+*
+* The orientation styles are branched in TS rather than written as
+* `data-[orientation=*]:` variants on purpose. A variant carries two
+* selectors' worth of specificity, so it would outrank a plain class passed in
+* by the caller: the sidebar's own `w-auto` lost to `w-full` that way. Branching
+* emits one plain class per axis, which `cn` can dedupe and a caller can
+* override.
+*
+* Vertical uses `self-stretch` instead of `h-full`: a percentage height needs a
+* definite parent, and the usual host is an `items-center` row whose height
+* comes from its content.
+*/
+var Separator$1 = ({ className, orientation = "horizontal", ...props }) => {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "separator",
+		orientation,
+		className: cn("shrink-0 bg-border", orientation === "horizontal" ? "h-px w-full" : "w-px self-stretch", className),
+		...props
+	});
+};
+//#endregion
+export { Separator$1 as Separator };
+
+//# sourceMappingURL=separator.js.map

package/dist/ui/src/components/ui/separator/separator.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"separator.js","names":[],"sources":["../../../../../../../ui/src/components/ui/separator/separator.tsx"],"sourcesContent":["import { Separator as SeparatorPrimitive } from '@base-ui/react/separator';\n\nimport { cn } from '@edyn/ui/lib/utils';\n\n/**\n * Hairline rule between content, announced as `role=\"separator\"`.\n *\n * The orientation styles are branched in TS rather than written as\n * `data-[orientation=*]:` variants on purpose. A variant carries two\n * selectors' worth of specificity, so it would outrank a plain class passed in\n * by the caller: the sidebar's own `w-auto` lost to `w-full` that way. Branching\n * emits one plain class per axis, which `cn` can dedupe and a caller can\n * override.\n *\n * Vertical uses `self-stretch` instead of `h-full`: a percentage height needs a\n * definite parent, and the usual host is an `items-center` row whose height\n * comes from its content.\n */\nexport const Separator = ({ className, orientation = 'horizontal', ...props }: SeparatorPrimitive.Props) => {\n  return (\n    <SeparatorPrimitive\n      data-slot=\"separator\"\n      orientation={orientation}\n      className={cn('shrink-0 bg-border', orientation === 'horizontal' ? 'h-px w-full' : 'w-px self-stretch', className)}\n      {...props}\n    />\n  );\n};\n"],"mappings":";;;;;;;;;;;;;;;;;;AAkBA,IAAa,eAAa,EAAE,WAAW,cAAc,cAAc,GAAG,YAAsC;CAC1G,OACE,oBAAC,WAAD;EACE,aAAU;EACG;EACb,WAAW,GAAG,sBAAsB,gBAAgB,eAAe,gBAAgB,qBAAqB,SAAS;EACjH,GAAI;CACL,CAAA;AAEL"}

package/dist/ui/src/components/ui/sheet/sheet.js

@@ -0,0 +1,89 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { IconX } from "@tabler/icons-react";
+import { Dialog } from "@base-ui/react/dialog";
+//#region ../ui/src/components/ui/sheet/sheet.tsx
+var Sheet = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Root, {
+		"data-slot": "sheet",
+		...props
+	});
+};
+var SheetTrigger = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Trigger, {
+		"data-slot": "sheet-trigger",
+		...props
+	});
+};
+var SheetClose = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Close, {
+		"data-slot": "sheet-close",
+		...props
+	});
+};
+var SheetPortal = ({ ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Portal, {
+		"data-slot": "sheet-portal",
+		...props
+	});
+};
+var SheetOverlay = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Backdrop, {
+		"data-slot": "sheet-overlay",
+		className: cn("fixed inset-0 z-50 bg-overlay transition-opacity duration-150 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs", className),
+		...props
+	});
+};
+var SheetContent = ({ className, children, side = "right", showCloseButton = true, ...props }) => {
+	return /* @__PURE__ */ jsxs(SheetPortal, { children: [/* @__PURE__ */ jsx(SheetOverlay, {}), /* @__PURE__ */ jsxs(Dialog.Popup, {
+		"data-slot": "sheet-content",
+		"data-side": side,
+		className: cn("fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 motion-reduce:transition-none ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className),
+		...props,
+		children: [children, showCloseButton && /* @__PURE__ */ jsxs(Dialog.Close, {
+			"data-slot": "sheet-close",
+			render: /* @__PURE__ */ jsx(Button, {
+				variant: "ghost",
+				className: "absolute top-3 right-3",
+				size: "icon-sm"
+			}),
+			children: [/* @__PURE__ */ jsx(IconX, {}), /* @__PURE__ */ jsx("span", {
+				className: "sr-only",
+				children: "Close"
+			})]
+		})]
+	})] });
+};
+var SheetHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-header",
+		className: cn("flex flex-col gap-0.5 p-4", className),
+		...props
+	});
+};
+var SheetFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sheet-footer",
+		className: cn("mt-auto flex flex-col gap-2 p-4", className),
+		...props
+	});
+};
+var SheetTitle = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Title, {
+		"data-slot": "sheet-title",
+		className: cn("font-heading text-base font-medium text-foreground", className),
+		...props
+	});
+};
+var SheetDescription = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Dialog.Description, {
+		"data-slot": "sheet-description",
+		className: cn("text-sm text-muted-foreground", className),
+		...props
+	});
+};
+//#endregion
+export { Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle, SheetTrigger };
+
+//# sourceMappingURL=sheet.js.map

package/dist/ui/src/components/ui/sheet/sheet.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"sheet.js","names":[],"sources":["../../../../../../../ui/src/components/ui/sheet/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog';\nimport { cn } from '@edyn/ui/lib/utils';\nimport { IconX } from '@tabler/icons-react';\nimport type * as React from 'react';\nimport { Button } from '../button';\n\nexport const Sheet = ({ ...props }: SheetPrimitive.Root.Props) => {\n  return <SheetPrimitive.Root data-slot=\"sheet\" {...props} />;\n};\n\nexport const SheetTrigger = ({ ...props }: SheetPrimitive.Trigger.Props) => {\n  return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />;\n};\n\nexport const SheetClose = ({ ...props }: SheetPrimitive.Close.Props) => {\n  return <SheetPrimitive.Close data-slot=\"sheet-close\" {...props} />;\n};\n\nconst SheetPortal = ({ ...props }: SheetPrimitive.Portal.Props) => {\n  return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />;\n};\n\nconst SheetOverlay = ({ className, ...props }: SheetPrimitive.Backdrop.Props) => {\n  return (\n    <SheetPrimitive.Backdrop\n      data-slot=\"sheet-overlay\"\n      className={cn(\n        'fixed inset-0 z-50 bg-overlay transition-opacity duration-150 motion-reduce:transition-none data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs',\n        className,\n      )}\n      {...props}\n    />\n  );\n};\n\nexport const SheetContent = ({\n  className,\n  children,\n  side = 'right',\n  showCloseButton = true,\n  ...props\n}: SheetPrimitive.Popup.Props & {\n  side?: 'top' | 'right' | 'bottom' | 'left';\n  showCloseButton?: boolean;\n}) => {\n  return (\n    <SheetPortal>\n      <SheetOverlay />\n      <SheetPrimitive.Popup\n        data-slot=\"sheet-content\"\n        data-side={side}\n        className={cn(\n          'fixed z-50 flex flex-col gap-4 bg-popover bg-clip-padding text-sm text-popover-foreground shadow-lg transition duration-200 motion-reduce:transition-none ease-in-out data-ending-style:opacity-0 data-starting-style:opacity-0 data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-0 data-[side=bottom]:h-auto data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-[2.5rem] data-[side=bottom]:data-starting-style:translate-y-[2.5rem] data-[side=left]:inset-y-0 data-[side=left]:left-0 data-[side=left]:h-full data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:translate-x-[-2.5rem] data-[side=left]:data-starting-style:translate-x-[-2.5rem] data-[side=right]:inset-y-0 data-[side=right]:right-0 data-[side=right]:h-full data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-[2.5rem] data-[side=right]:data-starting-style:translate-x-[2.5rem] data-[side=top]:inset-x-0 data-[side=top]:top-0 data-[side=top]:h-auto data-[side=top]:border-b data-[side=top]:data-ending-style:translate-y-[-2.5rem] data-[side=top]:data-starting-style:translate-y-[-2.5rem] data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm',\n          className,\n        )}\n        {...props}\n      >\n        {children}\n        {showCloseButton && (\n          <SheetPrimitive.Close data-slot=\"sheet-close\" render={<Button variant=\"ghost\" className=\"absolute top-3 right-3\" size=\"icon-sm\" />}>\n            <IconX />\n            <span className=\"sr-only\">Close</span>\n          </SheetPrimitive.Close>\n        )}\n      </SheetPrimitive.Popup>\n    </SheetPortal>\n  );\n};\n\nexport const SheetHeader = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"sheet-header\" className={cn('flex flex-col gap-0.5 p-4', className)} {...props} />;\n};\n\nexport const SheetFooter = ({ className, ...props }: React.ComponentProps<'div'>) => {\n  return <div data-slot=\"sheet-footer\" className={cn('mt-auto flex flex-col gap-2 p-4', className)} {...props} />;\n};\n\nexport const SheetTitle = ({ className, ...props }: SheetPrimitive.Title.Props) => {\n  return <SheetPrimitive.Title data-slot=\"sheet-title\" className={cn('font-heading text-base font-medium text-foreground', className)} {...props} />;\n};\n\nexport const SheetDescription = ({ className, ...props }: SheetPrimitive.Description.Props) => {\n  return <SheetPrimitive.Description data-slot=\"sheet-description\" className={cn('text-sm text-muted-foreground', className)} {...props} />;\n};\n"],"mappings":";;;;;;AAMA,IAAa,SAAS,EAAE,GAAG,YAAuC;CAChE,OAAO,oBAAC,OAAe,MAAhB;EAAqB,aAAU;EAAQ,GAAI;CAAQ,CAAA;AAC5D;AAEA,IAAa,gBAAgB,EAAE,GAAG,YAA0C;CAC1E,OAAO,oBAAC,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAEA,IAAa,cAAc,EAAE,GAAG,YAAwC;CACtE,OAAO,oBAAC,OAAe,OAAhB;EAAsB,aAAU;EAAc,GAAI;CAAQ,CAAA;AACnE;AAEA,IAAM,eAAe,EAAE,GAAG,YAAyC;CACjE,OAAO,oBAAC,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,IAAM,gBAAgB,EAAE,WAAW,GAAG,YAA2C;CAC/E,OACE,oBAAC,OAAe,UAAhB;EACE,aAAU;EACV,WAAW,GACT,mMACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,IAAa,gBAAgB,EAC3B,WACA,UACA,OAAO,SACP,kBAAkB,MAClB,GAAG,YAIC;CACJ,OACE,qBAAC,aAAD,EAAA,UAAA,CACE,oBAAC,cAAD,CAAe,CAAA,GACf,qBAAC,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,WAAW,GACT,2rCACA,SACF;EACA,GAAI;EAPN,UAAA,CASG,UACA,mBACC,qBAAC,OAAe,OAAhB;GAAsB,aAAU;GAAc,QAAQ,oBAAC,QAAD;IAAQ,SAAQ;IAAQ,WAAU;IAAyB,MAAK;GAAW,CAAA;GAAjI,UAAA,CACE,oBAAC,OAAD,CAAQ,CAAA,GACR,oBAAC,QAAD;IAAM,WAAU;IAAU,UAAA;GAAW,CAAA,CACjB;EAEJ,CAAA,CAAA;CACX,CAAA,CAAA,EAAA,CAAA;AAEjB;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,6BAA6B,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1G;AAEA,IAAa,eAAe,EAAE,WAAW,GAAG,YAAyC;CACnF,OAAO,oBAAC,OAAD;EAAK,aAAU;EAAe,WAAW,GAAG,mCAAmC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAChH;AAEA,IAAa,cAAc,EAAE,WAAW,GAAG,YAAwC;CACjF,OAAO,oBAAC,OAAe,OAAhB;EAAsB,aAAU;EAAc,WAAW,GAAG,sDAAsD,SAAS;EAAG,GAAI;CAAQ,CAAA;AACnJ;AAEA,IAAa,oBAAoB,EAAE,WAAW,GAAG,YAA8C;CAC7F,OAAO,oBAAC,OAAe,aAAhB;EAA4B,aAAU;EAAoB,WAAW,GAAG,iCAAiC,SAAS;EAAG,GAAI;CAAQ,CAAA;AAC1I"}

package/dist/ui/src/components/ui/sidebar/sidebar.js

@@ -0,0 +1,383 @@
+import { cn } from "../../../lib/utils.js";
+import { Button } from "../button/button.js";
+import { useIsMobile } from "../../../hooks/use-mobile.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../tooltip/tooltip.js";
+import { Input } from "../input/input.js";
+import { Separator } from "../separator/separator.js";
+import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle } from "../sheet/sheet.js";
+import { Skeleton } from "../skeleton/skeleton.js";
+import * as React from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { cva } from "class-variance-authority";
+import { IconLayoutSidebar } from "@tabler/icons-react";
+import { mergeProps } from "@base-ui/react/merge-props";
+import { useRender } from "@base-ui/react/use-render";
+//#region ../ui/src/components/ui/sidebar/sidebar.tsx
+var SIDEBAR_COOKIE_NAME = "sidebar_state";
+var SIDEBAR_COOKIE_MAX_AGE = 604800;
+var SIDEBAR_WIDTH = "16rem";
+var SIDEBAR_WIDTH_MOBILE = "18rem";
+var SIDEBAR_WIDTH_ICON = "3rem";
+var SIDEBAR_KEYBOARD_SHORTCUT = "b";
+var SidebarContext = React.createContext(null);
+var useSidebar = () => {
+	const context = React.useContext(SidebarContext);
+	if (!context) throw new Error("useSidebar must be used within a SidebarProvider.");
+	return context;
+};
+var SidebarProvider = ({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) => {
+	const isMobile = useIsMobile();
+	const [openMobile, setOpenMobile] = React.useState(false);
+	const [_open, _setOpen] = React.useState(defaultOpen);
+	const open = openProp ?? _open;
+	const setOpen = React.useCallback((value) => {
+		const openState = typeof value === "function" ? value(open) : value;
+		if (setOpenProp) setOpenProp(openState);
+		else _setOpen(openState);
+		document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
+	}, [setOpenProp, open]);
+	const toggleSidebar = React.useCallback(() => {
+		return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
+	}, [isMobile, setOpen]);
+	React.useEffect(() => {
+		const handleKeyDown = (event) => {
+			if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
+				event.preventDefault();
+				toggleSidebar();
+			}
+		};
+		window.addEventListener("keydown", handleKeyDown);
+		return () => window.removeEventListener("keydown", handleKeyDown);
+	}, [toggleSidebar]);
+	const state = open ? "expanded" : "collapsed";
+	const contextValue = React.useMemo(() => ({
+		state,
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		setOpenMobile,
+		toggleSidebar
+	}), [
+		state,
+		open,
+		setOpen,
+		isMobile,
+		openMobile,
+		toggleSidebar
+	]);
+	return /* @__PURE__ */ jsx(SidebarContext.Provider, {
+		value: contextValue,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar-wrapper",
+			style: {
+				"--sidebar-width": SIDEBAR_WIDTH,
+				"--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
+				...style
+			},
+			className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className),
+			...props,
+			children
+		})
+	});
+};
+var Sidebar = ({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, dir, ...props }) => {
+	const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
+	if (collapsible === "none") return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar",
+		className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className),
+		...props,
+		children
+	});
+	if (isMobile) return /* @__PURE__ */ jsx(Sheet, {
+		open: openMobile,
+		onOpenChange: setOpenMobile,
+		...props,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			dir,
+			"data-sidebar": "sidebar",
+			"data-slot": "sidebar",
+			"data-mobile": "true",
+			className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden",
+			style: { "--sidebar-width": SIDEBAR_WIDTH_MOBILE },
+			side,
+			children: [/* @__PURE__ */ jsxs(SheetHeader, {
+				className: "sr-only",
+				children: [/* @__PURE__ */ jsx(SheetTitle, { children: "Sidebar" }), /* @__PURE__ */ jsx(SheetDescription, { children: "Displays the mobile sidebar." })]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex h-full w-full flex-col",
+				children
+			})]
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		className: "group peer hidden text-sidebar-foreground md:block",
+		"data-state": state,
+		"data-collapsible": state === "collapsed" ? collapsible : "",
+		"data-variant": variant,
+		"data-side": side,
+		"data-slot": "sidebar",
+		children: [/* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar-gap",
+			className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 motion-reduce:transition-none ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset" ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)")
+		}), /* @__PURE__ */ jsx("div", {
+			"data-slot": "sidebar-container",
+			"data-side": side,
+			className: cn("fixed inset-y-0 top-(--sidebar-top) z-10 hidden h-[calc(100svh-var(--sidebar-top))] w-(--sidebar-width) transition-[left,right,width] duration-200 motion-reduce:transition-none ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex", variant === "floating" || variant === "inset" ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]" : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className),
+			...props,
+			children: /* @__PURE__ */ jsx("div", {
+				"data-sidebar": "sidebar",
+				"data-slot": "sidebar-inner",
+				className: "flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border",
+				children
+			})
+		})]
+	});
+};
+var SidebarTrigger = ({ className, onClick, ...props }) => {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsxs(Button, {
+		"data-sidebar": "trigger",
+		"data-slot": "sidebar-trigger",
+		variant: "ghost",
+		size: "icon-sm",
+		className: cn(className),
+		onClick: (event) => {
+			onClick?.(event);
+			toggleSidebar();
+		},
+		...props,
+		children: [/* @__PURE__ */ jsx(IconLayoutSidebar, {}), /* @__PURE__ */ jsx("span", {
+			className: "sr-only",
+			children: "Toggle Sidebar"
+		})]
+	});
+};
+var SidebarRail = ({ className, ...props }) => {
+	const { toggleSidebar } = useSidebar();
+	return /* @__PURE__ */ jsx("button", {
+		"data-sidebar": "rail",
+		"data-slot": "sidebar-rail",
+		"aria-label": "Toggle Sidebar",
+		tabIndex: -1,
+		onClick: toggleSidebar,
+		title: "Toggle Sidebar",
+		className: cn("absolute inset-y-0 z-20 hidden w-4 transition-all motion-reduce:transition-none ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2", "in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize", "[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize", "group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar", "[[data-side=left][data-collapsible=offcanvas]_&]:-right-2", "[[data-side=right][data-collapsible=offcanvas]_&]:-left-2", className),
+		...props
+	});
+};
+var SidebarInset = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("main", {
+		"data-slot": "sidebar-inset",
+		className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:m-2 md:peer-data-[variant=inset]:ml-0 md:peer-data-[variant=inset]:rounded-xl md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2", className),
+		...props
+	});
+};
+var SidebarInput = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Input, {
+		"data-slot": "sidebar-input",
+		"data-sidebar": "input",
+		className: cn("h-8 w-full bg-background shadow-none", className),
+		...props
+	});
+};
+var SidebarHeader = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-header",
+		"data-sidebar": "header",
+		className: cn("flex flex-col gap-2 p-2", className),
+		...props
+	});
+};
+var SidebarFooter = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-footer",
+		"data-sidebar": "footer",
+		className: cn("flex flex-col gap-2 p-2", className),
+		...props
+	});
+};
+var SidebarSeparator = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx(Separator, {
+		"data-slot": "sidebar-separator",
+		"data-sidebar": "separator",
+		className: cn("mx-2 w-auto bg-sidebar-border", className),
+		...props
+	});
+};
+var SidebarContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-content",
+		"data-sidebar": "content",
+		"data-focus": "inset",
+		className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className),
+		...props
+	});
+};
+var SidebarGroup = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group",
+		"data-sidebar": "group",
+		className: cn("relative flex w-full min-w-0 flex-col p-2", className),
+		...props
+	});
+};
+var SidebarGroupLabel = ({ className, render, ...props }) => {
+	return useRender({
+		defaultTagName: "div",
+		props: mergeProps({ className: cn("flex h-8 shrink-0 items-center rounded-md px-2 text-xs font-medium text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 motion-reduce:transition-none ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
+		render,
+		state: {
+			slot: "sidebar-group-label",
+			sidebar: "group-label"
+		}
+	});
+};
+var SidebarGroupAction = ({ className, render, ...props }) => {
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({ className: cn("absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform motion-reduce:transition-none group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className) }, props),
+		render,
+		state: {
+			slot: "sidebar-group-action",
+			sidebar: "group-action"
+		}
+	});
+};
+var SidebarGroupContent = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-group-content",
+		"data-sidebar": "group-content",
+		className: cn("w-full text-sm", className),
+		...props
+	});
+};
+var SidebarMenu = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "sidebar-menu",
+		"data-sidebar": "menu",
+		className: cn("flex w-full min-w-0 flex-col gap-0", className),
+		...props
+	});
+};
+var SidebarMenuItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "sidebar-menu-item",
+		"data-sidebar": "menu-item",
+		className: cn("group/menu-item relative", className),
+		...props
+	});
+};
+var sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-md p-2 text-left text-sm ring-sidebar-ring outline-hidden transition-[width,height,padding] motion-reduce:transition-none group-has-data-[sidebar=menu-action]/menu-item:pr-8 group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate", {
+	variants: {
+		variant: {
+			default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
+			outline: "bg-background shadow-[0_0_0_1px_var(--sidebar-border)] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_var(--sidebar-accent)]"
+		},
+		size: {
+			default: "h-8 text-sm",
+			sm: "h-7 text-xs",
+			lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!"
+		}
+	},
+	defaultVariants: {
+		variant: "default",
+		size: "default"
+	}
+});
+var SidebarMenuButton = ({ render, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) => {
+	const { isMobile, state } = useSidebar();
+	const comp = useRender({
+		defaultTagName: "button",
+		props: mergeProps({ className: cn(sidebarMenuButtonVariants({
+			variant,
+			size
+		}), className) }, props),
+		render: !tooltip ? render : /* @__PURE__ */ jsx(TooltipTrigger, { render }),
+		state: {
+			slot: "sidebar-menu-button",
+			sidebar: "menu-button",
+			size,
+			active: isActive
+		}
+	});
+	if (!tooltip) return comp;
+	if (typeof tooltip === "string") tooltip = { children: tooltip };
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [comp, /* @__PURE__ */ jsx(TooltipContent, {
+		side: "right",
+		align: "center",
+		hidden: state !== "collapsed" || isMobile,
+		...tooltip
+	})] });
+};
+var SidebarMenuAction = ({ className, render, showOnHover = false, ...props }) => {
+	return useRender({
+		defaultTagName: "button",
+		props: mergeProps({ className: cn("absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform motion-reduce:transition-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover && "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0", className) }, props),
+		render,
+		state: {
+			slot: "sidebar-menu-action",
+			sidebar: "menu-action"
+		}
+	});
+};
+var SidebarMenuBadge = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "sidebar-menu-badge",
+		"data-sidebar": "menu-badge",
+		className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-md px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground", className),
+		...props
+	});
+};
+var SidebarMenuSkeleton = ({ className, showIcon = false, ...props }) => {
+	const [width] = React.useState(() => {
+		return `${Math.floor(Math.random() * 40) + 50}%`;
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "sidebar-menu-skeleton",
+		"data-sidebar": "menu-skeleton",
+		className: cn("flex h-8 items-center gap-2 rounded-md px-2", className),
+		...props,
+		children: [showIcon && /* @__PURE__ */ jsx(Skeleton, {
+			className: "size-4 rounded-md",
+			"data-sidebar": "menu-skeleton-icon"
+		}), /* @__PURE__ */ jsx(Skeleton, {
+			className: "h-4 max-w-(--skeleton-width) flex-1",
+			"data-sidebar": "menu-skeleton-text",
+			style: { "--skeleton-width": width }
+		})]
+	});
+};
+var SidebarMenuSub = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("ul", {
+		"data-slot": "sidebar-menu-sub",
+		"data-sidebar": "menu-sub",
+		className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-l border-sidebar-border px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className),
+		...props
+	});
+};
+var SidebarMenuSubItem = ({ className, ...props }) => {
+	return /* @__PURE__ */ jsx("li", {
+		"data-slot": "sidebar-menu-sub-item",
+		"data-sidebar": "menu-sub-item",
+		className: cn("group/menu-sub-item relative", className),
+		...props
+	});
+};
+var SidebarMenuSubButton = ({ render, size = "md", isActive = false, className, ...props }) => {
+	return useRender({
+		defaultTagName: "a",
+		props: mergeProps({ className: cn("flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-sm data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className) }, props),
+		render,
+		state: {
+			slot: "sidebar-menu-sub-button",
+			sidebar: "menu-sub-button",
+			size,
+			active: isActive
+		}
+	});
+};
+//#endregion
+export { Sidebar, SidebarContent, SidebarFooter, SidebarGroup, SidebarGroupAction, SidebarGroupContent, SidebarGroupLabel, SidebarHeader, SidebarInput, SidebarInset, SidebarMenu, SidebarMenuAction, SidebarMenuBadge, SidebarMenuButton, SidebarMenuItem, SidebarMenuSkeleton, SidebarMenuSub, SidebarMenuSubButton, SidebarMenuSubItem, SidebarProvider, SidebarRail, SidebarSeparator, SidebarTrigger, useSidebar };
+
+//# sourceMappingURL=sidebar.js.map