@kayleai/ui 0.0.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (169) hide show
  1. package/LICENSE +21 -0
  2. package/README.md +15 -0
  3. package/dist/accordion.d.ts +7 -0
  4. package/dist/accordion.d.ts.map +1 -0
  5. package/dist/accordion.js +17 -0
  6. package/dist/alert-dialog.d.ts +19 -0
  7. package/dist/alert-dialog.d.ts.map +1 -0
  8. package/dist/alert-dialog.js +41 -0
  9. package/dist/alert.d.ts +11 -0
  10. package/dist/alert.d.ts.map +1 -0
  11. package/dist/alert.js +27 -0
  12. package/dist/aspect-ratio.d.ts +5 -0
  13. package/dist/aspect-ratio.d.ts.map +1 -0
  14. package/dist/aspect-ratio.js +8 -0
  15. package/dist/avatar.d.ts +12 -0
  16. package/dist/avatar.d.ts.map +1 -0
  17. package/dist/avatar.js +23 -0
  18. package/dist/badge.d.ts +8 -0
  19. package/dist/badge.d.ts.map +1 -0
  20. package/dist/badge.js +33 -0
  21. package/dist/breadcrumb.d.ts +11 -0
  22. package/dist/breadcrumb.d.ts.map +1 -0
  23. package/dist/breadcrumb.js +38 -0
  24. package/dist/button-group.d.ts +11 -0
  25. package/dist/button-group.d.ts.map +1 -0
  26. package/dist/button-group.js +38 -0
  27. package/dist/button.d.ts +9 -0
  28. package/dist/button.d.ts.map +1 -0
  29. package/dist/button.js +34 -0
  30. package/dist/calendar.d.ts +8 -0
  31. package/dist/calendar.d.ts.map +1 -0
  32. package/dist/calendar.js +81 -0
  33. package/dist/card.d.ts +12 -0
  34. package/dist/card.d.ts.map +1 -0
  35. package/dist/card.js +24 -0
  36. package/dist/carousel.d.ts +28 -0
  37. package/dist/carousel.d.ts.map +1 -0
  38. package/dist/carousel.js +95 -0
  39. package/dist/chart.d.ts +41 -0
  40. package/dist/chart.d.ts.map +1 -0
  41. package/dist/chart.js +135 -0
  42. package/dist/checkbox.d.ts +4 -0
  43. package/dist/checkbox.d.ts.map +1 -0
  44. package/dist/checkbox.js +8 -0
  45. package/dist/collapsible.d.ts +6 -0
  46. package/dist/collapsible.d.ts.map +1 -0
  47. package/dist/collapsible.js +13 -0
  48. package/dist/combobox.d.ts +24 -0
  49. package/dist/combobox.d.ts.map +1 -0
  50. package/dist/combobox.js +58 -0
  51. package/dist/command.d.ts +20 -0
  52. package/dist/command.d.ts.map +1 -0
  53. package/dist/command.js +35 -0
  54. package/dist/context-menu.d.ts +26 -0
  55. package/dist/context-menu.d.ts.map +1 -0
  56. package/dist/context-menu.js +50 -0
  57. package/dist/css/index.css +129 -0
  58. package/dist/dialog.d.ts +18 -0
  59. package/dist/dialog.d.ts.map +1 -0
  60. package/dist/dialog.js +37 -0
  61. package/dist/drawer.d.ts +14 -0
  62. package/dist/drawer.d.ts.map +1 -0
  63. package/dist/drawer.js +35 -0
  64. package/dist/dropdown-menu.d.ts +26 -0
  65. package/dist/dropdown-menu.d.ts.map +1 -0
  66. package/dist/dropdown-menu.js +50 -0
  67. package/dist/empty.d.ts +12 -0
  68. package/dist/empty.d.ts.map +1 -0
  69. package/dist/empty.js +33 -0
  70. package/dist/field.d.ts +25 -0
  71. package/dist/field.d.ts.map +1 -0
  72. package/dist/field.js +72 -0
  73. package/dist/hover-card.d.ts +6 -0
  74. package/dist/hover-card.d.ts.map +1 -0
  75. package/dist/hover-card.js +14 -0
  76. package/dist/input-group.d.ts +19 -0
  77. package/dist/input-group.d.ts.map +1 -0
  78. package/dist/input-group.js +60 -0
  79. package/dist/input-otp.d.ts +11 -0
  80. package/dist/input-otp.d.ts.map +1 -0
  81. package/dist/input-otp.js +24 -0
  82. package/dist/input.d.ts +4 -0
  83. package/dist/input.d.ts.map +1 -0
  84. package/dist/input.js +7 -0
  85. package/dist/item.d.ts +23 -0
  86. package/dist/item.d.ts.map +1 -0
  87. package/dist/item.js +80 -0
  88. package/dist/kbd.d.ts +4 -0
  89. package/dist/kbd.d.ts.map +1 -0
  90. package/dist/kbd.js +9 -0
  91. package/dist/label.d.ts +4 -0
  92. package/dist/label.d.ts.map +1 -0
  93. package/dist/label.js +9 -0
  94. package/dist/menubar.d.ts +24 -0
  95. package/dist/menubar.d.ts.map +1 -0
  96. package/dist/menubar.js +55 -0
  97. package/dist/navigation-menu.d.ts +12 -0
  98. package/dist/navigation-menu.d.ts.map +1 -0
  99. package/dist/navigation-menu.js +31 -0
  100. package/dist/pagination.d.ts +14 -0
  101. package/dist/pagination.d.ts.map +1 -0
  102. package/dist/pagination.js +26 -0
  103. package/dist/popover.d.ts +10 -0
  104. package/dist/popover.d.ts.map +1 -0
  105. package/dist/popover.js +22 -0
  106. package/dist/progress.d.ts +8 -0
  107. package/dist/progress.d.ts.map +1 -0
  108. package/dist/progress.js +20 -0
  109. package/dist/radio-group.d.ts +6 -0
  110. package/dist/radio-group.d.ts.map +1 -0
  111. package/dist/radio-group.js +12 -0
  112. package/dist/resizable.d.ts +9 -0
  113. package/dist/resizable.d.ts.map +1 -0
  114. package/dist/resizable.js +14 -0
  115. package/dist/scroll-area.d.ts +5 -0
  116. package/dist/scroll-area.d.ts.map +1 -0
  117. package/dist/scroll-area.js +10 -0
  118. package/dist/select.d.ts +16 -0
  119. package/dist/select.d.ts.map +1 -0
  120. package/dist/select.js +34 -0
  121. package/dist/separator.d.ts +4 -0
  122. package/dist/separator.d.ts.map +1 -0
  123. package/dist/separator.js +7 -0
  124. package/dist/sheet.d.ts +15 -0
  125. package/dist/sheet.d.ts.map +1 -0
  126. package/dist/sheet.js +36 -0
  127. package/dist/sidebar.d.ts +63 -0
  128. package/dist/sidebar.d.ts.map +1 -0
  129. package/dist/sidebar.js +256 -0
  130. package/dist/skeleton.d.ts +3 -0
  131. package/dist/skeleton.d.ts.map +1 -0
  132. package/dist/skeleton.js +6 -0
  133. package/dist/slider.d.ts +4 -0
  134. package/dist/slider.d.ts.map +1 -0
  135. package/dist/slider.js +15 -0
  136. package/dist/sonner.d.ts +4 -0
  137. package/dist/sonner.d.ts.map +1 -0
  138. package/dist/sonner.js +20 -0
  139. package/dist/spinner.d.ts +3 -0
  140. package/dist/spinner.d.ts.map +1 -0
  141. package/dist/spinner.js +7 -0
  142. package/dist/switch.d.ts +6 -0
  143. package/dist/switch.d.ts.map +1 -0
  144. package/dist/switch.js +8 -0
  145. package/dist/table.d.ts +11 -0
  146. package/dist/table.d.ts.map +1 -0
  147. package/dist/table.js +27 -0
  148. package/dist/tabs.d.ts +11 -0
  149. package/dist/tabs.d.ts.map +1 -0
  150. package/dist/tabs.js +29 -0
  151. package/dist/textarea.d.ts +4 -0
  152. package/dist/textarea.d.ts.map +1 -0
  153. package/dist/textarea.js +6 -0
  154. package/dist/toggle-group.d.ts +11 -0
  155. package/dist/toggle-group.d.ts.map +1 -0
  156. package/dist/toggle-group.js +24 -0
  157. package/dist/toggle.d.ts +9 -0
  158. package/dist/toggle.d.ts.map +1 -0
  159. package/dist/toggle.js +25 -0
  160. package/dist/tooltip.d.ts +7 -0
  161. package/dist/tooltip.d.ts.map +1 -0
  162. package/dist/tooltip.js +17 -0
  163. package/dist/utils/cn.d.ts +3 -0
  164. package/dist/utils/cn.d.ts.map +1 -0
  165. package/dist/utils/cn.js +5 -0
  166. package/dist/utils/is-mobile.d.ts +2 -0
  167. package/dist/utils/is-mobile.d.ts.map +1 -0
  168. package/dist/utils/is-mobile.js +4 -0
  169. package/package.json +77 -0
@@ -0,0 +1,12 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Radio as RadioPrimitive } from "@base-ui/react/radio";
3
+ import { RadioGroup as RadioGroupPrimitive } from "@base-ui/react/radio-group";
4
+ import { CircleIcon } from "lucide-react";
5
+ import { cn } from "./utils/cn";
6
+ function RadioGroup({ className, ...props }) {
7
+ return (_jsx(RadioGroupPrimitive, { className: cn("grid w-full gap-3", className), "data-slot": "radio-group", ...props }));
8
+ }
9
+ function RadioGroupItem({ className, ...props }) {
10
+ return (_jsx(RadioPrimitive.Root, { className: cn("group/radio-group-item peer after:-inset-x-3 after:-inset-y-2 relative flex aspect-square size-4 shrink-0 rounded-full border border-input text-primary outline-none transition-none after:absolute focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-checked:border-primary data-checked:bg-primary dark:bg-input/30 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40", className), "data-slot": "radio-group-item", ...props, children: _jsx(RadioPrimitive.Indicator, { className: "flex size-4 items-center justify-center text-white group-aria-invalid/radio-group-item:text-destructive", "data-slot": "radio-group-indicator", children: _jsx(CircleIcon, { className: "-translate-x-1/2 -translate-y-1/2 absolute top-1/2 left-1/2 size-2 fill-current" }) }) }));
11
+ }
12
+ export { RadioGroup, RadioGroupItem };
@@ -0,0 +1,9 @@
1
+ import type * as React from "react";
2
+ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
3
+ declare function ResizablePanelGroup({ className, ...props }: React.ComponentProps<typeof PanelGroup>): import("react/jsx-runtime").JSX.Element;
4
+ declare function ResizablePanel({ ...props }: React.ComponentProps<typeof Panel>): import("react/jsx-runtime").JSX.Element;
5
+ declare function ResizableHandle({ withHandle, className, ...props }: React.ComponentProps<typeof PanelResizeHandle> & {
6
+ withHandle?: boolean;
7
+ }): import("react/jsx-runtime").JSX.Element;
8
+ export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
9
+ //# sourceMappingURL=resizable.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"resizable.d.ts","sourceRoot":"","sources":["../src/resizable.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AACpC,OAAO,EAAE,KAAK,EAAE,UAAU,EAAE,iBAAiB,EAAE,MAAM,wBAAwB,CAAC;AAI9E,iBAAS,mBAAmB,CAAC,EAC3B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,UAAU,CAAC,2CAWzC;AAED,iBAAS,cAAc,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,KAAK,CAAC,2CAEvE;AAED,iBAAS,eAAe,CAAC,EACvB,UAAU,EACV,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,iBAAiB,CAAC,GAAG;IAClD,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB,2CAeA;AAED,OAAO,EAAE,mBAAmB,EAAE,cAAc,EAAE,eAAe,EAAE,CAAC"}
@@ -0,0 +1,14 @@
1
+ "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { Panel, PanelGroup, PanelResizeHandle } from "react-resizable-panels";
4
+ import { cn } from "./utils/cn";
5
+ function ResizablePanelGroup({ className, ...props }) {
6
+ return (_jsx(PanelGroup, { className: cn("flex h-full w-full data-[panel-group-direction=vertical]:flex-col", className), "data-slot": "resizable-panel-group", ...props }));
7
+ }
8
+ function ResizablePanel({ ...props }) {
9
+ return _jsx(Panel, { "data-slot": "resizable-panel", ...props });
10
+ }
11
+ function ResizableHandle({ withHandle, className, ...props }) {
12
+ return (_jsx(PanelResizeHandle, { className: cn("after:-translate-x-1/2 data-[panel-group-direction=vertical]:after:-translate-y-1/2 relative flex w-px items-center justify-center bg-border after:absolute after:inset-y-0 after:left-1/2 after:w-1 focus-visible:outline-hidden focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1 data-[panel-group-direction=vertical]:h-px data-[panel-group-direction=vertical]:w-full data-[panel-group-direction=vertical]:after:left-0 data-[panel-group-direction=vertical]:after:h-1 data-[panel-group-direction=vertical]:after:w-full data-[panel-group-direction=vertical]:after:translate-x-0 [&[data-panel-group-direction=vertical]>div]:rotate-90", className), "data-slot": "resizable-handle", ...props, children: withHandle ? (_jsx("div", { className: "z-10 flex h-6 w-1 shrink-0 rounded-lg bg-border" })) : null }));
13
+ }
14
+ export { ResizablePanelGroup, ResizablePanel, ResizableHandle };
@@ -0,0 +1,5 @@
1
+ import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
2
+ declare function ScrollArea({ className, children, ...props }: ScrollAreaPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
3
+ declare function ScrollBar({ className, orientation, ...props }: ScrollAreaPrimitive.Scrollbar.Props): import("react/jsx-runtime").JSX.Element;
4
+ export { ScrollArea, ScrollBar };
5
+ //# sourceMappingURL=scroll-area.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"scroll-area.d.ts","sourceRoot":"","sources":["../src/scroll-area.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,IAAI,mBAAmB,EAAE,MAAM,4BAA4B,CAAC;AAI/E,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,mBAAmB,CAAC,IAAI,CAAC,KAAK,2CAiBhC;AAED,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAAwB,EACxB,GAAG,KAAK,EACT,EAAE,mBAAmB,CAAC,SAAS,CAAC,KAAK,2CAkBrC;AAED,OAAO,EAAE,UAAU,EAAE,SAAS,EAAE,CAAC"}
@@ -0,0 +1,10 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { ScrollArea as ScrollAreaPrimitive } from "@base-ui/react/scroll-area";
3
+ import { cn } from "./utils/cn";
4
+ function ScrollArea({ className, children, ...props }) {
5
+ return (_jsxs(ScrollAreaPrimitive.Root, { className: cn("relative", className), "data-slot": "scroll-area", ...props, children: [_jsx(ScrollAreaPrimitive.Viewport, { className: "size-full rounded-[inherit] outline-none transition-[color,box-shadow] focus-visible:outline-1 focus-visible:ring-[3px] focus-visible:ring-ring/50", "data-slot": "scroll-area-viewport", children: children }), _jsx(ScrollBar, {}), _jsx(ScrollAreaPrimitive.Corner, {})] }));
6
+ }
7
+ function ScrollBar({ className, orientation = "vertical", ...props }) {
8
+ return (_jsx(ScrollAreaPrimitive.Scrollbar, { className: cn("flex touch-none select-none p-px transition-colors data-horizontal:h-2.5 data-vertical:h-full data-vertical:w-2.5 data-horizontal:flex-col data-horizontal:border-t data-horizontal:border-t-transparent data-vertical:border-l data-vertical:border-l-transparent", className), "data-orientation": orientation, "data-slot": "scroll-area-scrollbar", orientation: orientation, ...props, children: _jsx(ScrollAreaPrimitive.Thumb, { className: "relative flex-1 rounded-full bg-border", "data-slot": "scroll-area-thumb" }) }));
9
+ }
10
+ export { ScrollArea, ScrollBar };
@@ -0,0 +1,16 @@
1
+ import { Select as SelectPrimitive } from "@base-ui/react/select";
2
+ import type * as React from "react";
3
+ declare const Select: typeof SelectPrimitive.Root;
4
+ declare function SelectGroup({ className, ...props }: SelectPrimitive.Group.Props): import("react/jsx-runtime").JSX.Element;
5
+ declare function SelectValue({ className, ...props }: SelectPrimitive.Value.Props): import("react/jsx-runtime").JSX.Element;
6
+ declare function SelectTrigger({ className, size, children, ...props }: SelectPrimitive.Trigger.Props & {
7
+ size?: "sm" | "default";
8
+ }): import("react/jsx-runtime").JSX.Element;
9
+ declare function SelectContent({ className, children, side, sideOffset, align, alignOffset, alignItemWithTrigger, ...props }: SelectPrimitive.Popup.Props & Pick<SelectPrimitive.Positioner.Props, "align" | "alignOffset" | "side" | "sideOffset" | "alignItemWithTrigger">): import("react/jsx-runtime").JSX.Element;
10
+ declare function SelectLabel({ className, ...props }: SelectPrimitive.GroupLabel.Props): import("react/jsx-runtime").JSX.Element;
11
+ declare function SelectItem({ className, children, ...props }: SelectPrimitive.Item.Props): import("react/jsx-runtime").JSX.Element;
12
+ declare function SelectSeparator({ className, ...props }: SelectPrimitive.Separator.Props): import("react/jsx-runtime").JSX.Element;
13
+ declare function SelectScrollUpButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollUpArrow>): import("react/jsx-runtime").JSX.Element;
14
+ declare function SelectScrollDownButton({ className, ...props }: React.ComponentProps<typeof SelectPrimitive.ScrollDownArrow>): import("react/jsx-runtime").JSX.Element;
15
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
16
+ //# sourceMappingURL=select.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"select.d.ts","sourceRoot":"","sources":["../src/select.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAElE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAGpC,QAAA,MAAM,MAAM,6BAAuB,CAAC;AAEpC,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,2CAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,2CAQxE;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,IAAgB,EAChB,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,OAAO,CAAC,KAAK,GAAG;IACjC,IAAI,CAAC,EAAE,IAAI,GAAG,SAAS,CAAC;CACzB,2CAmBA;AAED,iBAAS,aAAa,CAAC,EACrB,SAAS,EACT,QAAQ,EACR,IAAe,EACf,UAAc,EACd,KAAgB,EAChB,WAAe,EACf,oBAA2B,EAC3B,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,KAAK,CAAC,KAAK,GAC5B,IAAI,CACF,eAAe,CAAC,UAAU,CAAC,KAAK,EAChC,OAAO,GAAG,aAAa,GAAG,MAAM,GAAG,YAAY,GAAG,sBAAsB,CACzE,2CA0BF;AAED,iBAAS,WAAW,CAAC,EACnB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,UAAU,CAAC,KAAK,2CAQlC;AAED,iBAAS,UAAU,CAAC,EAClB,SAAS,EACT,QAAQ,EACR,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,2CAsB5B;AAED,iBAAS,eAAe,CAAC,EACvB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,SAAS,CAAC,KAAK,2CAWjC;AAED,iBAAS,oBAAoB,CAAC,EAC5B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,aAAa,CAAC,2CAa5D;AAED,iBAAS,sBAAsB,CAAC,EAC9B,SAAS,EACT,GAAG,KAAK,EACT,EAAE,KAAK,CAAC,cAAc,CAAC,OAAO,eAAe,CAAC,eAAe,CAAC,2CAa9D;AAED,OAAO,EACL,MAAM,EACN,aAAa,EACb,WAAW,EACX,UAAU,EACV,WAAW,EACX,sBAAsB,EACtB,oBAAoB,EACpB,eAAe,EACf,aAAa,EACb,WAAW,GACZ,CAAC"}
package/dist/select.js ADDED
@@ -0,0 +1,34 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { Select as SelectPrimitive } from "@base-ui/react/select";
4
+ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
5
+ import { cn } from "./utils/cn";
6
+ const Select = SelectPrimitive.Root;
7
+ function SelectGroup({ className, ...props }) {
8
+ return (_jsx(SelectPrimitive.Group, { className: cn("scroll-my-1 p-1", className), "data-slot": "select-group", ...props }));
9
+ }
10
+ function SelectValue({ className, ...props }) {
11
+ return (_jsx(SelectPrimitive.Value, { className: cn("flex flex-1 text-left", className), "data-slot": "select-value", ...props }));
12
+ }
13
+ function SelectTrigger({ className, size = "default", children, ...props }) {
14
+ return (_jsxs(SelectPrimitive.Trigger, { className: cn("flex w-fit items-center justify-between gap-1.5 whitespace-nowrap rounded-4xl border border-input bg-input/30 px-3 py-2 text-sm outline-none transition-colors focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 aria-invalid:border-destructive aria-invalid:ring-[3px] aria-invalid:ring-destructive/20 data-[size=default]:h-9 data-[size=sm]:h-8 data-[placeholder]:text-muted-foreground *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-1.5 dark:aria-invalid:border-destructive/50 dark:aria-invalid:ring-destructive/40 dark:hover:bg-input/50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0", className), "data-size": size, "data-slot": "select-trigger", ...props, children: [children, _jsx(SelectPrimitive.Icon, { render: _jsx(ChevronDownIcon, { className: "pointer-events-none size-4 text-muted-foreground" }) })] }));
15
+ }
16
+ function SelectContent({ className, children, side = "bottom", sideOffset = 4, align = "center", alignOffset = 0, alignItemWithTrigger = true, ...props }) {
17
+ return (_jsx(SelectPrimitive.Portal, { children: _jsx(SelectPrimitive.Positioner, { align: align, alignItemWithTrigger: alignItemWithTrigger, alignOffset: alignOffset, className: "isolate z-50", side: side, sideOffset: sideOffset, children: _jsxs(SelectPrimitive.Popup, { className: cn("data-closed:fade-out-0 data-open:fade-in-0 data-closed:zoom-out-95 data-open:zoom-in-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 relative isolate z-50 max-h-(--available-height) w-(--anchor-width) min-w-36 origin-(--transform-origin) overflow-y-auto overflow-x-hidden rounded-2xl bg-popover text-popover-foreground shadow-2xl ring-1 ring-foreground/5 duration-100 data-closed:animate-out data-open:animate-in", className), "data-slot": "select-content", ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.List, { children: children }), _jsx(SelectScrollDownButton, {})] }) }) }));
18
+ }
19
+ function SelectLabel({ className, ...props }) {
20
+ return (_jsx(SelectPrimitive.GroupLabel, { className: cn("px-3 py-2.5 text-muted-foreground text-xs", className), "data-slot": "select-label", ...props }));
21
+ }
22
+ function SelectItem({ className, children, ...props }) {
23
+ return (_jsxs(SelectPrimitive.Item, { className: cn("relative flex w-full cursor-default select-none items-center gap-2.5 rounded-xl py-2 pr-8 pl-3 text-sm outline-hidden focus:bg-accent focus:text-accent-foreground not-data-[variant=destructive]:focus:**:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4 [&_svg]:pointer-events-none [&_svg]:shrink-0 *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), "data-slot": "select-item", ...props, children: [_jsx(SelectPrimitive.ItemText, { className: "flex flex-1 shrink-0 gap-2 whitespace-nowrap", children: children }), _jsx(SelectPrimitive.ItemIndicator, { render: _jsx("span", { className: "pointer-events-none absolute right-2 flex size-4 items-center justify-center" }), children: _jsx(CheckIcon, { className: "pointer-events-none" }) })] }));
24
+ }
25
+ function SelectSeparator({ className, ...props }) {
26
+ return (_jsx(SelectPrimitive.Separator, { className: cn("-mx-1 pointer-events-none my-1 h-px bg-border/50", className), "data-slot": "select-separator", ...props }));
27
+ }
28
+ function SelectScrollUpButton({ className, ...props }) {
29
+ return (_jsx(SelectPrimitive.ScrollUpArrow, { className: cn("top-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), "data-slot": "select-scroll-up-button", ...props, children: _jsx(ChevronUpIcon, {}) }));
30
+ }
31
+ function SelectScrollDownButton({ className, ...props }) {
32
+ return (_jsx(SelectPrimitive.ScrollDownArrow, { className: cn("bottom-0 z-10 flex w-full cursor-default items-center justify-center bg-popover py-1 [&_svg:not([class*='size-'])]:size-4", className), "data-slot": "select-scroll-down-button", ...props, children: _jsx(ChevronDownIcon, {}) }));
33
+ }
34
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
@@ -0,0 +1,4 @@
1
+ import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
2
+ declare function Separator({ className, orientation, ...props }: SeparatorPrimitive.Props): import("react/jsx-runtime").JSX.Element;
3
+ export { Separator };
4
+ //# sourceMappingURL=separator.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"separator.d.ts","sourceRoot":"","sources":["../src/separator.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,IAAI,kBAAkB,EAAE,MAAM,0BAA0B,CAAC;AAI3E,iBAAS,SAAS,CAAC,EACjB,SAAS,EACT,WAA0B,EAC1B,GAAG,KAAK,EACT,EAAE,kBAAkB,CAAC,KAAK,2CAY1B;AAED,OAAO,EAAE,SAAS,EAAE,CAAC"}
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { Separator as SeparatorPrimitive } from "@base-ui/react/separator";
3
+ import { cn } from "./utils/cn";
4
+ function Separator({ className, orientation = "horizontal", ...props }) {
5
+ return (_jsx(SeparatorPrimitive, { className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-px data-[orientation=vertical]:self-stretch", className), "data-slot": "separator", orientation: orientation, ...props }));
6
+ }
7
+ export { Separator };
@@ -0,0 +1,15 @@
1
+ import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
2
+ import type * as React from "react";
3
+ declare function Sheet({ ...props }: SheetPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
4
+ declare function SheetTrigger({ ...props }: SheetPrimitive.Trigger.Props): import("react/jsx-runtime").JSX.Element;
5
+ declare function SheetClose({ ...props }: SheetPrimitive.Close.Props): import("react/jsx-runtime").JSX.Element;
6
+ declare function SheetContent({ className, children, side, showCloseButton, ...props }: SheetPrimitive.Popup.Props & {
7
+ side?: "top" | "right" | "bottom" | "left";
8
+ showCloseButton?: boolean;
9
+ }): import("react/jsx-runtime").JSX.Element;
10
+ declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
11
+ declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
12
+ declare function SheetTitle({ className, ...props }: SheetPrimitive.Title.Props): import("react/jsx-runtime").JSX.Element;
13
+ declare function SheetDescription({ className, ...props }: SheetPrimitive.Description.Props): import("react/jsx-runtime").JSX.Element;
14
+ export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
15
+ //# sourceMappingURL=sheet.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sheet.d.ts","sourceRoot":"","sources":["../src/sheet.tsx"],"names":[],"mappings":"AAAA,OAAO,EAAE,MAAM,IAAI,cAAc,EAAE,MAAM,uBAAuB,CAAC;AAEjE,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAIpC,iBAAS,KAAK,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,IAAI,CAAC,KAAK,2CAErD;AAED,iBAAS,YAAY,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,OAAO,CAAC,KAAK,2CAE/D;AAED,iBAAS,UAAU,CAAC,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,2CAE3D;AAmBD,iBAAS,YAAY,CAAC,EACpB,SAAS,EACT,QAAQ,EACR,IAAc,EACd,eAAsB,EACtB,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,GAAG;IAC9B,IAAI,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC3C,eAAe,CAAC,EAAE,OAAO,CAAC;CAC3B,2CAgCA;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQxE;AAED,iBAAS,UAAU,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,cAAc,CAAC,KAAK,CAAC,KAAK,2CAQtE;AAED,iBAAS,gBAAgB,CAAC,EACxB,SAAS,EACT,GAAG,KAAK,EACT,EAAE,cAAc,CAAC,WAAW,CAAC,KAAK,2CAQlC;AAED,OAAO,EACL,KAAK,EACL,YAAY,EACZ,UAAU,EACV,YAAY,EACZ,WAAW,EACX,WAAW,EACX,UAAU,EACV,gBAAgB,GACjB,CAAC"}
package/dist/sheet.js ADDED
@@ -0,0 +1,36 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { Dialog as SheetPrimitive } from "@base-ui/react/dialog";
3
+ import { XIcon } from "lucide-react";
4
+ import { Button } from "./button";
5
+ import { cn } from "./utils/cn";
6
+ function Sheet({ ...props }) {
7
+ return _jsx(SheetPrimitive.Root, { "data-slot": "sheet", ...props });
8
+ }
9
+ function SheetTrigger({ ...props }) {
10
+ return _jsx(SheetPrimitive.Trigger, { "data-slot": "sheet-trigger", ...props });
11
+ }
12
+ function SheetClose({ ...props }) {
13
+ return _jsx(SheetPrimitive.Close, { "data-slot": "sheet-close", ...props });
14
+ }
15
+ function SheetPortal({ ...props }) {
16
+ return _jsx(SheetPrimitive.Portal, { "data-slot": "sheet-portal", ...props });
17
+ }
18
+ function SheetOverlay({ className, ...props }) {
19
+ return (_jsx(SheetPrimitive.Backdrop, { className: cn("data-closed:fade-out-0 data-open:fade-in-0 fixed inset-0 z-50 bg-black/80 duration-100 data-closed:animate-out data-open:animate-in data-ending-style:opacity-0 data-starting-style:opacity-0 supports-backdrop-filter:backdrop-blur-xs", className), "data-slot": "sheet-overlay", ...props }));
20
+ }
21
+ function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
22
+ return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Popup, { className: cn("data-[side=right]:data-closed:slide-out-to-right-10 data-[side=right]:data-open:slide-in-from-right-10 data-[side=left]:data-closed:slide-out-to-left-10 data-[side=left]:data-open:slide-in-from-left-10 data-[side=top]:data-closed:slide-out-to-top-10 data-[side=top]:data-open:slide-in-from-top-10 data-closed:fade-out-0 data-open:fade-in-0 data-[side=bottom]:data-closed:slide-out-to-bottom-10 data-[side=bottom]:data-open:slide-in-from-bottom-10 fixed z-50 flex flex-col bg-background bg-clip-padding text-sm shadow-lg transition duration-200 ease-in-out data-[side=bottom]:inset-x-0 data-[side=top]:inset-x-0 data-[side=left]:inset-y-0 data-[side=right]:inset-y-0 data-[side=top]:top-0 data-[side=right]:right-0 data-[side=bottom]:bottom-0 data-[side=left]:left-0 data-[side=bottom]:h-auto data-[side=left]:h-full data-[side=right]:h-full data-[side=top]:h-auto data-[side=left]:w-3/4 data-[side=right]:w-3/4 data-closed:animate-out data-open:animate-in data-[side=bottom]:border-t data-[side=left]:border-r data-[side=top]:border-b data-[side=right]:border-l data-[side=left]:sm:max-w-sm data-[side=right]:sm:max-w-sm", className), "data-side": side, "data-slot": "sheet-content", ...props, children: [children, showCloseButton ? (_jsxs(SheetPrimitive.Close, { "data-slot": "sheet-close", render: _jsx(Button, { className: "absolute top-4 right-4", size: "icon-sm", variant: "ghost" }), children: [_jsx(XIcon, {}), _jsx("span", { className: "sr-only", children: "Close" })] })) : null] })] }));
23
+ }
24
+ function SheetHeader({ className, ...props }) {
25
+ return (_jsx("div", { className: cn("flex flex-col gap-1.5 p-6", className), "data-slot": "sheet-header", ...props }));
26
+ }
27
+ function SheetFooter({ className, ...props }) {
28
+ return (_jsx("div", { className: cn("mt-auto flex flex-col gap-2 p-6", className), "data-slot": "sheet-footer", ...props }));
29
+ }
30
+ function SheetTitle({ className, ...props }) {
31
+ return (_jsx(SheetPrimitive.Title, { className: cn("font-medium text-base text-foreground", className), "data-slot": "sheet-title", ...props }));
32
+ }
33
+ function SheetDescription({ className, ...props }) {
34
+ return (_jsx(SheetPrimitive.Description, { className: cn("text-muted-foreground text-sm", className), "data-slot": "sheet-description", ...props }));
35
+ }
36
+ export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
@@ -0,0 +1,63 @@
1
+ import { useRender } from "@base-ui/react/use-render";
2
+ import { type VariantProps } from "class-variance-authority";
3
+ import { Button } from "./button";
4
+ import { Input } from "./input";
5
+ import { Separator } from "./separator";
6
+ import { TooltipContent } from "./tooltip";
7
+ type SidebarContextProps = {
8
+ state: "expanded" | "collapsed";
9
+ open: boolean;
10
+ setOpen: (open: boolean) => void;
11
+ openMobile: boolean;
12
+ setOpenMobile: (open: boolean) => void;
13
+ isMobile: boolean;
14
+ toggleSidebar: () => void;
15
+ };
16
+ declare function useSidebar(): SidebarContextProps;
17
+ declare function SidebarProvider({ defaultOpen, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }: React.ComponentProps<"div"> & {
18
+ defaultOpen?: boolean;
19
+ open?: boolean;
20
+ onOpenChange?: (open: boolean) => void;
21
+ }): import("react/jsx-runtime").JSX.Element;
22
+ declare function Sidebar({ side, variant, collapsible, className, children, ...props }: React.ComponentProps<"div"> & {
23
+ side?: "left" | "right";
24
+ variant?: "sidebar" | "floating" | "inset";
25
+ collapsible?: "offExamples" | "icon" | "none";
26
+ }): import("react/jsx-runtime").JSX.Element;
27
+ declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): import("react/jsx-runtime").JSX.Element;
28
+ declare function SidebarRail({ className, ...props }: React.ComponentProps<"button">): import("react/jsx-runtime").JSX.Element;
29
+ declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): import("react/jsx-runtime").JSX.Element;
30
+ declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): import("react/jsx-runtime").JSX.Element;
31
+ declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
32
+ declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
33
+ declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): import("react/jsx-runtime").JSX.Element;
34
+ declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
35
+ declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
36
+ declare function SidebarGroupLabel({ className, render, ...props }: useRender.ComponentProps<"div"> & React.ComponentProps<"div">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
37
+ declare function SidebarGroupAction({ className, render, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button">): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
38
+ declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
39
+ declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
40
+ declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
41
+ declare const sidebarMenuButtonVariants: (props?: ({
42
+ variant?: "default" | "outline" | null | undefined;
43
+ size?: "default" | "sm" | "lg" | null | undefined;
44
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
45
+ declare function SidebarMenuButton({ render, isActive, variant, size, tooltip, className, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
46
+ isActive?: boolean;
47
+ tooltip?: string | React.ComponentProps<typeof TooltipContent>;
48
+ } & VariantProps<typeof sidebarMenuButtonVariants>): import("react/jsx-runtime").JSX.Element;
49
+ declare function SidebarMenuAction({ className, render, showOnHover, ...props }: useRender.ComponentProps<"button"> & React.ComponentProps<"button"> & {
50
+ showOnHover?: boolean;
51
+ }): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
52
+ declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
53
+ declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
54
+ showIcon?: boolean;
55
+ }): import("react/jsx-runtime").JSX.Element;
56
+ declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">): import("react/jsx-runtime").JSX.Element;
57
+ declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">): import("react/jsx-runtime").JSX.Element;
58
+ declare function SidebarMenuSubButton({ render, size, isActive, className, ...props }: useRender.ComponentProps<"a"> & React.ComponentProps<"a"> & {
59
+ size?: "sm" | "md";
60
+ isActive?: boolean;
61
+ }): import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>>;
62
+ 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, };
63
+ //# sourceMappingURL=sidebar.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"sidebar.d.ts","sourceRoot":"","sources":["../src/sidebar.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,256 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import { mergeProps } from "@base-ui/react/merge-props";
3
+ import { useRender } from "@base-ui/react/use-render";
4
+ import { cva } from "class-variance-authority";
5
+ import { PanelLeftIcon } from "lucide-react";
6
+ import { createContext, useCallback, useContext, useEffect, useMemo, useState, } from "react";
7
+ import { Button } from "./button";
8
+ import { Input } from "./input";
9
+ import { Separator } from "./separator";
10
+ import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "./sheet";
11
+ import { Skeleton } from "./skeleton";
12
+ import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip";
13
+ import { cn } from "./utils/cn";
14
+ import { useIsMobile } from "./utils/is-mobile";
15
+ const SIDEBAR_COOKIE_NAME = "sidebar_state";
16
+ const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
17
+ const SIDEBAR_WIDTH = "16rem";
18
+ const SIDEBAR_WIDTH_MOBILE = "18rem";
19
+ const SIDEBAR_WIDTH_ICON = "3rem";
20
+ const SIDEBAR_KEYBOARD_SHORTCUT = "b";
21
+ const SidebarContext = createContext(null);
22
+ function useSidebar() {
23
+ const context = useContext(SidebarContext);
24
+ if (!context) {
25
+ throw new Error("useSidebar must be used within a SidebarProvider.");
26
+ }
27
+ return context;
28
+ }
29
+ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
30
+ const isMobile = useIsMobile();
31
+ const [openMobile, setOpenMobile] = useState(false);
32
+ // This is the internal state of the sidebar.
33
+ // We use openProp and setOpenProp for control from outside the component.
34
+ const [_open, _setOpen] = useState(defaultOpen);
35
+ const open = openProp ?? _open;
36
+ const setOpen = useCallback(
37
+ // biome-ignore lint/nursery/noShadow: intentional
38
+ (value) => {
39
+ const openState = typeof value === "function" ? value(open) : value;
40
+ if (setOpenProp) {
41
+ setOpenProp(openState);
42
+ }
43
+ else {
44
+ _setOpen(openState);
45
+ }
46
+ // This sets the cookie to keep the sidebar state.
47
+ // biome-ignore lint/suspicious/noDocumentCookie: intentional
48
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
49
+ }, [setOpenProp, open]);
50
+ // Helper to toggle the sidebar.
51
+ const toggleSidebar = useCallback(() => (isMobile ? setOpenMobile((o) => !o) : setOpen((o) => !o)), [isMobile, setOpen]);
52
+ // Adds a keyboard shortcut to toggle the sidebar.
53
+ useEffect(() => {
54
+ const handleKeyDown = (event) => {
55
+ if (event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
56
+ (event.metaKey || event.ctrlKey)) {
57
+ event.preventDefault();
58
+ toggleSidebar();
59
+ }
60
+ };
61
+ window.addEventListener("keydown", handleKeyDown);
62
+ return () => window.removeEventListener("keydown", handleKeyDown);
63
+ }, [toggleSidebar]);
64
+ // We add a state so that we can do data-state="expanded" or "collapsed".
65
+ // This makes it easier to style the sidebar with Tailwind classes.
66
+ const state = open ? "expanded" : "collapsed";
67
+ const contextValue = useMemo(() => ({
68
+ state,
69
+ open,
70
+ setOpen,
71
+ isMobile,
72
+ openMobile,
73
+ setOpenMobile,
74
+ toggleSidebar,
75
+ }), [state, open, setOpen, isMobile, openMobile, toggleSidebar]);
76
+ return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx("div", { className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className), "data-slot": "sidebar-wrapper", style: {
77
+ "--sidebar-width": SIDEBAR_WIDTH,
78
+ "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
79
+ ...style,
80
+ }, ...props, children: children }) }));
81
+ }
82
+ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offExamples", className, children, ...props }) {
83
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
84
+ if (collapsible === "none") {
85
+ return (_jsx("div", { className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className), "data-slot": "sidebar", ...props, children: children }));
86
+ }
87
+ if (isMobile) {
88
+ return (_jsx(Sheet, { onOpenChange: setOpenMobile, open: openMobile, ...props, children: _jsxs(SheetContent, { className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", "data-mobile": "true", "data-sidebar": "sidebar", "data-slot": "sidebar", side: side, style: {
89
+ "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
90
+ }, children: [_jsxs(SheetHeader, { className: "sr-only", children: [_jsx(SheetTitle, { children: "Sidebar" }), _jsx(SheetDescription, { children: "Displays the mobile sidebar." })] }), _jsx("div", { className: "flex h-full w-full flex-col", children: children })] }) }));
91
+ }
92
+ return (_jsxs("div", { className: "group peer hidden text-sidebar-foreground md:block", "data-collapsible": state === "collapsed" ? collapsible : "", "data-side": side, "data-slot": "sidebar", "data-state": state, "data-variant": variant, children: [_jsx("div", { className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offExamples]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset"
93
+ ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
94
+ : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)"), "data-slot": "sidebar-gap" }), _jsx("div", { className: cn("fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear md:flex", side === "left"
95
+ ? "left-0 group-data-[collapsible=offExamples]:left-[calc(var(--sidebar-width)*-1)]"
96
+ : "right-0 group-data-[collapsible=offExamples]:right-[calc(var(--sidebar-width)*-1)]",
97
+ // Adjust the padding for floating and inset variants.
98
+ variant === "floating" || variant === "inset"
99
+ ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
100
+ : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className), "data-slot": "sidebar-container", ...props, children: _jsx("div", { 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", "data-sidebar": "sidebar", "data-slot": "sidebar-inner", children: children }) })] }));
101
+ }
102
+ function SidebarTrigger({ className, onClick, ...props }) {
103
+ const { toggleSidebar } = useSidebar();
104
+ return (_jsxs(Button, { className: cn(className), "data-sidebar": "trigger", "data-slot": "sidebar-trigger", onClick: (event) => {
105
+ onClick?.(event);
106
+ toggleSidebar();
107
+ }, size: "icon-sm", variant: "ghost", ...props, children: [_jsx(PanelLeftIcon, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
108
+ }
109
+ function SidebarRail({ className, ...props }) {
110
+ const { toggleSidebar } = useSidebar();
111
+ return (_jsx("button", { "aria-label": "Toggle Sidebar", className: cn("-translate-x-1/2 group-data-[side=left]:-right-4 absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border group-data-[side=right]:left-0 sm:flex", "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=offExamples]:translate-x-0 hover:group-data-[collapsible=offExamples]:bg-sidebar group-data-[collapsible=offExamples]:after:left-full", "[[data-side=left][data-collapsible=offExamples]_&]:-right-2", "[[data-side=right][data-collapsible=offExamples]_&]:-left-2", className), "data-sidebar": "rail", "data-slot": "sidebar-rail", onClick: toggleSidebar, tabIndex: -1, title: "Toggle Sidebar", ...props }));
112
+ }
113
+ function SidebarInset({ className, ...props }) {
114
+ return (_jsx("main", { className: cn("relative flex w-full flex-1 flex-col bg-background md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2 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", className), "data-slot": "sidebar-inset", ...props }));
115
+ }
116
+ function SidebarInput({ className, ...props }) {
117
+ return (_jsx(Input, { className: cn("h-8 w-full bg-background shadow-none", className), "data-sidebar": "input", "data-slot": "sidebar-input", ...props }));
118
+ }
119
+ function SidebarHeader({ className, ...props }) {
120
+ return (_jsx("div", { className: cn("flex flex-col gap-2 p-2", className), "data-sidebar": "header", "data-slot": "sidebar-header", ...props }));
121
+ }
122
+ function SidebarFooter({ className, ...props }) {
123
+ return (_jsx("div", { className: cn("flex flex-col gap-2 p-2", className), "data-sidebar": "footer", "data-slot": "sidebar-footer", ...props }));
124
+ }
125
+ function SidebarSeparator({ className, ...props }) {
126
+ return (_jsx(Separator, { className: cn("mx-2 w-auto bg-sidebar-border", className), "data-sidebar": "separator", "data-slot": "sidebar-separator", ...props }));
127
+ }
128
+ function SidebarContent({ className, ...props }) {
129
+ return (_jsx("div", { className: cn("no-scrollbar flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className), "data-sidebar": "content", "data-slot": "sidebar-content", ...props }));
130
+ }
131
+ function SidebarGroup({ className, ...props }) {
132
+ return (_jsx("div", { className: cn("relative flex w-full min-w-0 flex-col p-2", className), "data-sidebar": "group", "data-slot": "sidebar-group", ...props }));
133
+ }
134
+ function SidebarGroupLabel({ className, render, ...props }) {
135
+ return useRender({
136
+ defaultTagName: "div",
137
+ props: mergeProps({
138
+ className: cn("group-data-[collapsible=icon]:-mt-8 flex h-8 shrink-0 items-center rounded-md px-2 font-medium text-sidebar-foreground/70 text-xs outline-hidden ring-sidebar-ring transition-[margin,opacity] duration-200 ease-linear focus-visible:ring-2 group-data-[collapsible=icon]:opacity-0 [&>svg]:size-4 [&>svg]:shrink-0", className),
139
+ }, props),
140
+ render,
141
+ state: {
142
+ slot: "sidebar-group-label",
143
+ sidebar: "group-label",
144
+ },
145
+ });
146
+ }
147
+ function SidebarGroupAction({ className, render, ...props }) {
148
+ return useRender({
149
+ defaultTagName: "button",
150
+ props: mergeProps({
151
+ className: cn("after:-inset-2 absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform after:absolute hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 group-data-[collapsible=icon]:hidden md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", className),
152
+ }, props),
153
+ render,
154
+ state: {
155
+ slot: "sidebar-group-action",
156
+ sidebar: "group-action",
157
+ },
158
+ });
159
+ }
160
+ function SidebarGroupContent({ className, ...props }) {
161
+ return (_jsx("div", { className: cn("w-full text-sm", className), "data-sidebar": "group-content", "data-slot": "sidebar-group-content", ...props }));
162
+ }
163
+ function SidebarMenu({ className, ...props }) {
164
+ return (_jsx("ul", { className: cn("flex w-full min-w-0 flex-col gap-1", className), "data-sidebar": "menu", "data-slot": "sidebar-menu", ...props }));
165
+ }
166
+ function SidebarMenuItem({ className, ...props }) {
167
+ return (_jsx("li", { className: cn("group/menu-item relative", className), "data-sidebar": "menu-item", "data-slot": "sidebar-menu-item", ...props }));
168
+ }
169
+ const sidebarMenuButtonVariants = cva("peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-lg p-2 text-left text-sm outline-hidden ring-sidebar-ring transition-[width,height,padding] 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 group-has-data-[sidebar=menu-action]/menu-item:pr-8 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground data-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground group-data-[collapsible=icon]:size-8! group-data-[collapsible=icon]:p-2! [&>span:last-child]:truncate [&_svg]:size-4 [&_svg]:shrink-0", {
170
+ variants: {
171
+ variant: {
172
+ default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
173
+ outline: "bg-background shadow-[0_0_0_1px_hsl(var(--sidebar-border))] hover:bg-sidebar-accent hover:text-sidebar-accent-foreground hover:shadow-[0_0_0_1px_hsl(var(--sidebar-accent))]",
174
+ },
175
+ size: {
176
+ default: "h-9 text-sm",
177
+ sm: "h-8 text-xs",
178
+ lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
179
+ },
180
+ },
181
+ defaultVariants: {
182
+ variant: "default",
183
+ size: "default",
184
+ },
185
+ });
186
+ function SidebarMenuButton({ render, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) {
187
+ const { isMobile, state } = useSidebar();
188
+ const comp = useRender({
189
+ defaultTagName: "button",
190
+ props: mergeProps({
191
+ className: cn(sidebarMenuButtonVariants({ variant, size }), className),
192
+ }, props),
193
+ render: tooltip ? TooltipTrigger : render,
194
+ state: {
195
+ slot: "sidebar-menu-button",
196
+ sidebar: "menu-button",
197
+ size,
198
+ active: isActive,
199
+ },
200
+ });
201
+ if (!tooltip) {
202
+ return comp;
203
+ }
204
+ if (typeof tooltip === "string") {
205
+ tooltip = {
206
+ children: tooltip,
207
+ };
208
+ }
209
+ return (_jsxs(Tooltip, { children: [comp, _jsx(TooltipContent, { align: "center", hidden: state !== "collapsed" || isMobile, side: "right", ...tooltip })] }));
210
+ }
211
+ function SidebarMenuAction({ className, render, showOnHover = false, ...props }) {
212
+ return useRender({
213
+ defaultTagName: "button",
214
+ props: mergeProps({
215
+ className: cn("after:-inset-2 absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-md p-0 text-sidebar-foreground outline-hidden ring-sidebar-ring transition-transform after:absolute hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 peer-hover/menu-button:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden peer-data-[size=default]/menu-button:top-2 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0", showOnHover &&
216
+ "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 data-open:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground md:opacity-0", className),
217
+ }, props),
218
+ render,
219
+ state: {
220
+ slot: "sidebar-menu-action",
221
+ sidebar: "menu-action",
222
+ },
223
+ });
224
+ }
225
+ function SidebarMenuBadge({ className, ...props }) {
226
+ return (_jsx("div", { className: cn("pointer-events-none absolute right-1 flex h-5 min-w-5 select-none items-center justify-center rounded-md px-1 font-medium text-sidebar-foreground text-xs tabular-nums peer-hover/menu-button:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden 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), "data-sidebar": "menu-badge", "data-slot": "sidebar-menu-badge", ...props }));
227
+ }
228
+ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
229
+ // Random width between 50 to 90%.
230
+ const [width] = useState(() => `${Math.floor(Math.random() * 40) + 50}%`);
231
+ return (_jsxs("div", { className: cn("flex h-8 items-center gap-2 rounded-md px-2", className), "data-sidebar": "menu-skeleton", "data-slot": "sidebar-menu-skeleton", ...props, children: [showIcon ? (_jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" })) : null, _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", style: {
232
+ "--skeleton-width": width,
233
+ } })] }));
234
+ }
235
+ function SidebarMenuSub({ className, ...props }) {
236
+ return (_jsx("ul", { className: cn("mx-3.5 flex min-w-0 translate-x-px flex-col gap-1 border-sidebar-border border-l px-2.5 py-0.5 group-data-[collapsible=icon]:hidden", className), "data-sidebar": "menu-sub", "data-slot": "sidebar-menu-sub", ...props }));
237
+ }
238
+ function SidebarMenuSubItem({ className, ...props }) {
239
+ return (_jsx("li", { className: cn("group/menu-sub-item relative", className), "data-sidebar": "menu-sub-item", "data-slot": "sidebar-menu-sub-item", ...props }));
240
+ }
241
+ function SidebarMenuSubButton({ render, size = "md", isActive = false, className, ...props }) {
242
+ return useRender({
243
+ defaultTagName: "a",
244
+ props: mergeProps({
245
+ className: cn("-translate-x-px flex h-7 min-w-0 items-center gap-2 overflow-hidden rounded-md px-2 text-sidebar-foreground outline-hidden ring-sidebar-ring 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-active:bg-sidebar-accent data-[size=md]:text-sm data-[size=sm]:text-xs data-active:text-sidebar-accent-foreground group-data-[collapsible=icon]:hidden [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", className),
246
+ }, props),
247
+ render,
248
+ state: {
249
+ slot: "sidebar-menu-sub-button",
250
+ sidebar: "menu-sub-button",
251
+ size,
252
+ active: isActive,
253
+ },
254
+ });
255
+ }
256
+ 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, };
@@ -0,0 +1,3 @@
1
+ declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react/jsx-runtime").JSX.Element;
2
+ export { Skeleton };
3
+ //# sourceMappingURL=skeleton.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"skeleton.d.ts","sourceRoot":"","sources":["../src/skeleton.tsx"],"names":[],"mappings":"AAEA,iBAAS,QAAQ,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,KAAK,CAAC,cAAc,CAAC,KAAK,CAAC,2CAQrE;AAED,OAAO,EAAE,QAAQ,EAAE,CAAC"}
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { cn } from "./utils/cn";
3
+ function Skeleton({ className, ...props }) {
4
+ return (_jsx("div", { className: cn("animate-pulse rounded-xl bg-muted", className), "data-slot": "skeleton", ...props }));
5
+ }
6
+ export { Skeleton };
@@ -0,0 +1,4 @@
1
+ import { Slider as SliderPrimitive } from "@base-ui/react/slider";
2
+ declare function Slider({ className, defaultValue, value, min, max, ...props }: SliderPrimitive.Root.Props): import("react/jsx-runtime").JSX.Element;
3
+ export { Slider };
4
+ //# sourceMappingURL=slider.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"slider.d.ts","sourceRoot":"","sources":["../src/slider.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,MAAM,IAAI,eAAe,EAAE,MAAM,uBAAuB,CAAC;AAIlE,iBAAS,MAAM,CAAC,EACd,SAAS,EACT,YAAY,EACZ,KAAK,EACL,GAAO,EACP,GAAS,EACT,GAAG,KAAK,EACT,EAAE,eAAe,CAAC,IAAI,CAAC,KAAK,2CAiD5B;AAED,OAAO,EAAE,MAAM,EAAE,CAAC"}
package/dist/slider.js ADDED
@@ -0,0 +1,15 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { Slider as SliderPrimitive } from "@base-ui/react/slider";
4
+ import { useMemo } from "react";
5
+ import { cn } from "./utils/cn";
6
+ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
7
+ const _values = useMemo(() => Array.isArray(value)
8
+ ? value
9
+ : // biome-ignore lint/style/noNestedTernary: intentional
10
+ Array.isArray(defaultValue)
11
+ ? defaultValue
12
+ : [min, max], [value, defaultValue, min, max]);
13
+ return (_jsx(SliderPrimitive.Root, { className: "data-vertical:h-full data-horizontal:w-full", "data-slot": "slider", defaultValue: defaultValue, max: max, min: min, thumbAlignment: "edge", value: value, ...props, children: _jsxs(SliderPrimitive.Control, { className: cn("relative flex w-full touch-none select-none items-center data-vertical:h-full data-vertical:min-h-40 data-vertical:w-auto data-vertical:flex-col data-disabled:opacity-50", className), children: [_jsx(SliderPrimitive.Track, { className: "relative select-none overflow-hidden rounded-4xl bg-muted data-horizontal:h-3 data-vertical:h-full data-horizontal:w-full data-vertical:w-3", "data-slot": "slider-track", children: _jsx(SliderPrimitive.Indicator, { className: "select-none bg-primary data-horizontal:h-full data-vertical:w-full", "data-slot": "slider-range" }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { className: "block size-4 shrink-0 select-none rounded-4xl border border-primary bg-white shadow-sm ring-ring/50 transition-colors hover:ring-4 focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50", "data-slot": "slider-thumb" }, index)))] }) }));
14
+ }
15
+ export { Slider };
@@ -0,0 +1,4 @@
1
+ import { type ToasterProps } from "sonner";
2
+ declare const Toaster: ({ theme, ...props }: ToasterProps) => import("react/jsx-runtime").JSX.Element;
3
+ export { Toaster };
4
+ //# sourceMappingURL=sonner.d.ts.map