@aereamart/design-system 0.3.5 → 0.4.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 (260) hide show
  1. package/dist/cn.d.ts +2 -1
  2. package/dist/cn.js +4 -2
  3. package/dist/hooks/use-mobile.d.ts +1 -0
  4. package/dist/hooks/use-mobile.js +15 -0
  5. package/dist/index.d.ts +48 -37
  6. package/dist/index.js +48 -37
  7. package/dist/ui/accordion.d.ts +7 -0
  8. package/dist/ui/accordion.js +17 -0
  9. package/dist/ui/alert-dialog.d.ts +18 -0
  10. package/dist/ui/alert-dialog.js +42 -0
  11. package/dist/ui/alert.d.ts +9 -0
  12. package/dist/ui/alert.js +24 -0
  13. package/dist/ui/aspect-ratio.d.ts +3 -0
  14. package/dist/ui/aspect-ratio.js +6 -0
  15. package/dist/ui/avatar.d.ts +11 -0
  16. package/dist/ui/avatar.js +23 -0
  17. package/dist/ui/badge.d.ts +9 -0
  18. package/dist/ui/badge.js +24 -0
  19. package/dist/ui/breadcrumb.d.ts +11 -0
  20. package/dist/ui/breadcrumb.js +27 -0
  21. package/dist/ui/button.d.ts +10 -0
  22. package/dist/ui/button.js +35 -0
  23. package/dist/ui/calendar.d.ts +8 -0
  24. package/dist/ui/calendar.js +75 -0
  25. package/dist/ui/card.d.ts +9 -0
  26. package/dist/ui/card.js +24 -0
  27. package/dist/ui/carousel.d.ts +19 -0
  28. package/dist/ui/carousel.js +91 -0
  29. package/dist/ui/chart.d.ts +44 -0
  30. package/dist/ui/chart.js +132 -0
  31. package/dist/ui/checkbox.d.ts +4 -0
  32. package/dist/ui/checkbox.js +8 -0
  33. package/dist/ui/collapsible.d.ts +5 -0
  34. package/dist/ui/collapsible.js +13 -0
  35. package/dist/ui/command.d.ts +18 -0
  36. package/dist/ui/command.js +34 -0
  37. package/dist/ui/context-menu.d.ts +25 -0
  38. package/dist/ui/context-menu.js +51 -0
  39. package/dist/ui/dialog.d.ts +17 -0
  40. package/dist/ui/dialog.js +36 -0
  41. package/dist/ui/drawer.d.ts +13 -0
  42. package/dist/ui/drawer.js +35 -0
  43. package/dist/ui/dropdown-menu.d.ts +25 -0
  44. package/dist/ui/dropdown-menu.js +50 -0
  45. package/dist/ui/form.d.ts +24 -0
  46. package/dist/ui/form.js +58 -0
  47. package/dist/ui/hover-card.d.ts +6 -0
  48. package/dist/ui/hover-card.js +13 -0
  49. package/dist/ui/input-otp.d.ts +11 -0
  50. package/dist/ui/input-otp.js +21 -0
  51. package/dist/ui/input.d.ts +3 -0
  52. package/dist/ui/input.js +6 -0
  53. package/dist/ui/label.d.ts +4 -0
  54. package/dist/ui/label.js +8 -0
  55. package/dist/ui/menubar.d.ts +26 -0
  56. package/dist/ui/menubar.js +53 -0
  57. package/dist/ui/navigation-menu.d.ts +14 -0
  58. package/dist/ui/navigation-menu.js +31 -0
  59. package/dist/ui/pagination.d.ts +13 -0
  60. package/dist/ui/pagination.js +29 -0
  61. package/dist/ui/popover.d.ts +10 -0
  62. package/dist/ui/popover.js +26 -0
  63. package/dist/ui/progress.d.ts +4 -0
  64. package/dist/ui/progress.js +7 -0
  65. package/dist/ui/radio-group.d.ts +5 -0
  66. package/dist/ui/radio-group.js +12 -0
  67. package/dist/ui/resizable.d.ts +7 -0
  68. package/dist/ui/resizable.js +14 -0
  69. package/dist/ui/scroll-area.d.ts +5 -0
  70. package/dist/ui/scroll-area.js +12 -0
  71. package/dist/ui/select.d.ts +15 -0
  72. package/dist/ui/select.js +38 -0
  73. package/dist/ui/separator.d.ts +4 -0
  74. package/dist/ui/separator.js +7 -0
  75. package/dist/ui/sheet.d.ts +14 -0
  76. package/dist/ui/sheet.js +40 -0
  77. package/dist/ui/sidebar.d.ts +69 -0
  78. package/dist/ui/sidebar.js +211 -0
  79. package/dist/ui/skeleton.d.ts +2 -0
  80. package/dist/ui/skeleton.js +6 -0
  81. package/dist/ui/slider.d.ts +4 -0
  82. package/dist/ui/slider.js +13 -0
  83. package/dist/ui/sonner.d.ts +3 -0
  84. package/dist/ui/sonner.js +21 -0
  85. package/dist/ui/switch.d.ts +6 -0
  86. package/dist/ui/switch.js +7 -0
  87. package/dist/ui/table.d.ts +10 -0
  88. package/dist/ui/table.js +28 -0
  89. package/dist/ui/tabs.d.ts +11 -0
  90. package/dist/ui/tabs.js +28 -0
  91. package/dist/ui/textarea.d.ts +3 -0
  92. package/dist/ui/textarea.js +6 -0
  93. package/dist/ui/toggle-group.d.ts +9 -0
  94. package/dist/ui/toggle-group.js +22 -0
  95. package/dist/ui/toggle.d.ts +9 -0
  96. package/dist/ui/toggle.js +26 -0
  97. package/dist/ui/tooltip.d.ts +7 -0
  98. package/dist/ui/tooltip.js +16 -0
  99. package/package.json +28 -4
  100. package/src/cn.ts +5 -2
  101. package/src/hooks/use-mobile.ts +19 -0
  102. package/src/index.css +140 -0
  103. package/src/index.ts +48 -37
  104. package/src/ui/accordion.tsx +63 -0
  105. package/src/ui/alert-dialog.tsx +196 -0
  106. package/src/ui/alert.tsx +65 -0
  107. package/src/ui/aspect-ratio.tsx +9 -0
  108. package/src/ui/avatar.tsx +108 -0
  109. package/src/ui/badge.tsx +47 -0
  110. package/src/ui/breadcrumb.tsx +108 -0
  111. package/src/ui/button.tsx +63 -0
  112. package/src/ui/calendar.tsx +218 -0
  113. package/src/ui/card.tsx +91 -0
  114. package/src/ui/carousel.tsx +241 -0
  115. package/src/ui/chart.tsx +371 -0
  116. package/src/ui/checkbox.tsx +29 -0
  117. package/src/ui/collapsible.tsx +33 -0
  118. package/src/ui/command.tsx +184 -0
  119. package/src/ui/context-menu.tsx +251 -0
  120. package/src/ui/dialog.tsx +156 -0
  121. package/src/ui/drawer.tsx +134 -0
  122. package/src/ui/dropdown-menu.tsx +254 -0
  123. package/src/ui/form.tsx +165 -0
  124. package/src/ui/hover-card.tsx +41 -0
  125. package/src/ui/input-otp.tsx +76 -0
  126. package/src/ui/input.tsx +20 -0
  127. package/src/ui/label.tsx +23 -0
  128. package/src/ui/menubar.tsx +273 -0
  129. package/src/ui/navigation-menu.tsx +167 -0
  130. package/src/ui/pagination.tsx +127 -0
  131. package/src/ui/popover.tsx +88 -0
  132. package/src/ui/progress.tsx +28 -0
  133. package/src/ui/radio-group.tsx +44 -0
  134. package/src/ui/resizable.tsx +50 -0
  135. package/src/ui/scroll-area.tsx +55 -0
  136. package/src/ui/select.tsx +189 -0
  137. package/src/ui/separator.tsx +25 -0
  138. package/src/ui/sheet.tsx +142 -0
  139. package/src/ui/sidebar.tsx +724 -0
  140. package/src/ui/skeleton.tsx +13 -0
  141. package/src/ui/slider.tsx +60 -0
  142. package/src/ui/sonner.tsx +40 -0
  143. package/src/ui/switch.tsx +32 -0
  144. package/src/ui/table.tsx +115 -0
  145. package/src/ui/tabs.tsx +88 -0
  146. package/src/ui/textarea.tsx +17 -0
  147. package/src/ui/toggle-group.tsx +83 -0
  148. package/src/ui/toggle.tsx +46 -0
  149. package/src/ui/tooltip.tsx +54 -0
  150. package/dist/Accordion.d.ts +0 -10
  151. package/dist/Accordion.js +0 -12
  152. package/dist/AlertBanner.d.ts +0 -9
  153. package/dist/AlertBanner.js +0 -21
  154. package/dist/AppBar.d.ts +0 -7
  155. package/dist/AppBar.js +0 -5
  156. package/dist/Avatar.d.ts +0 -6
  157. package/dist/Avatar.js +0 -20
  158. package/dist/Badge.d.ts +0 -6
  159. package/dist/Badge.js +0 -11
  160. package/dist/BottomSheet.d.ts +0 -8
  161. package/dist/BottomSheet.js +0 -24
  162. package/dist/Breadcrumb.d.ts +0 -8
  163. package/dist/Breadcrumb.js +0 -9
  164. package/dist/Button.d.ts +0 -9
  165. package/dist/Button.js +0 -18
  166. package/dist/Card.d.ts +0 -7
  167. package/dist/Card.js +0 -6
  168. package/dist/Checkbox.d.ts +0 -5
  169. package/dist/Checkbox.js +0 -5
  170. package/dist/Chip.d.ts +0 -7
  171. package/dist/Chip.js +0 -15
  172. package/dist/DataTable.d.ts +0 -15
  173. package/dist/DataTable.js +0 -7
  174. package/dist/DatePicker.d.ts +0 -5
  175. package/dist/DatePicker.js +0 -11
  176. package/dist/Divider.d.ts +0 -5
  177. package/dist/Divider.js +0 -11
  178. package/dist/Drawer.d.ts +0 -10
  179. package/dist/Drawer.js +0 -24
  180. package/dist/EmptyState.d.ts +0 -7
  181. package/dist/EmptyState.js +0 -6
  182. package/dist/Input.d.ts +0 -5
  183. package/dist/Input.js +0 -7
  184. package/dist/Link.d.ts +0 -4
  185. package/dist/Link.js +0 -6
  186. package/dist/Menu.d.ts +0 -14
  187. package/dist/Menu.js +0 -29
  188. package/dist/Modal.d.ts +0 -9
  189. package/dist/Modal.js +0 -24
  190. package/dist/NavigationBar.d.ts +0 -14
  191. package/dist/NavigationBar.js +0 -22
  192. package/dist/Pagination.d.ts +0 -7
  193. package/dist/Pagination.js +0 -24
  194. package/dist/Popover.d.ts +0 -7
  195. package/dist/Popover.js +0 -9
  196. package/dist/Progress.d.ts +0 -8
  197. package/dist/Progress.js +0 -15
  198. package/dist/Radio.d.ts +0 -15
  199. package/dist/Radio.js +0 -8
  200. package/dist/SegmentedControl.d.ts +0 -13
  201. package/dist/SegmentedControl.js +0 -18
  202. package/dist/Select.d.ts +0 -5
  203. package/dist/Select.js +0 -7
  204. package/dist/Sidebar.d.ts +0 -16
  205. package/dist/Sidebar.js +0 -19
  206. package/dist/Slider.d.ts +0 -5
  207. package/dist/Slider.js +0 -5
  208. package/dist/Snackbar.d.ts +0 -12
  209. package/dist/Snackbar.js +0 -20
  210. package/dist/Spinner.d.ts +0 -3
  211. package/dist/Spinner.js +0 -5
  212. package/dist/Switch.d.ts +0 -4
  213. package/dist/Switch.js +0 -5
  214. package/dist/Tabs.d.ts +0 -14
  215. package/dist/Tabs.js +0 -24
  216. package/dist/Tag.d.ts +0 -6
  217. package/dist/Tag.js +0 -11
  218. package/dist/Textarea.d.ts +0 -5
  219. package/dist/Textarea.js +0 -7
  220. package/dist/Tooltip.d.ts +0 -7
  221. package/dist/Tooltip.js +0 -5
  222. package/dist/TreeView.d.ts +0 -12
  223. package/dist/TreeView.js +0 -34
  224. package/src/Accordion.tsx +0 -58
  225. package/src/AlertBanner.tsx +0 -62
  226. package/src/AppBar.tsx +0 -29
  227. package/src/Avatar.tsx +0 -42
  228. package/src/Badge.tsx +0 -27
  229. package/src/BottomSheet.tsx +0 -60
  230. package/src/Breadcrumb.tsx +0 -48
  231. package/src/Button.tsx +0 -54
  232. package/src/Card.tsx +0 -39
  233. package/src/Checkbox.tsx +0 -31
  234. package/src/Chip.tsx +0 -44
  235. package/src/DataTable.tsx +0 -64
  236. package/src/DatePicker.tsx +0 -44
  237. package/src/Divider.tsx +0 -33
  238. package/src/Drawer.tsx +0 -71
  239. package/src/EmptyState.tsx +0 -37
  240. package/src/Input.tsx +0 -30
  241. package/src/Link.tsx +0 -22
  242. package/src/Menu.tsx +0 -73
  243. package/src/Modal.tsx +0 -62
  244. package/src/NavigationBar.tsx +0 -68
  245. package/src/Pagination.tsx +0 -69
  246. package/src/Popover.tsx +0 -34
  247. package/src/Progress.tsx +0 -53
  248. package/src/Radio.tsx +0 -49
  249. package/src/SegmentedControl.tsx +0 -63
  250. package/src/Select.tsx +0 -32
  251. package/src/Sidebar.tsx +0 -73
  252. package/src/Slider.tsx +0 -33
  253. package/src/Snackbar.tsx +0 -72
  254. package/src/Spinner.tsx +0 -19
  255. package/src/Switch.tsx +0 -40
  256. package/src/Tabs.tsx +0 -77
  257. package/src/Tag.tsx +0 -29
  258. package/src/Textarea.tsx +0 -30
  259. package/src/Tooltip.tsx +0 -25
  260. package/src/TreeView.tsx +0 -105
@@ -0,0 +1,38 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { cn } from "../cn";
4
+ import { CheckIcon, ChevronDownIcon, ChevronUpIcon } from "lucide-react";
5
+ import { Select as SelectPrimitive } from "radix-ui";
6
+ function Select({ ...props }) {
7
+ return _jsx(SelectPrimitive.Root, { "data-slot": "select", ...props });
8
+ }
9
+ function SelectGroup({ ...props }) {
10
+ return _jsx(SelectPrimitive.Group, { "data-slot": "select-group", ...props });
11
+ }
12
+ function SelectValue({ ...props }) {
13
+ return _jsx(SelectPrimitive.Value, { "data-slot": "select-value", ...props });
14
+ }
15
+ function SelectTrigger({ className, size = "default", children, ...props }) {
16
+ return (_jsxs(SelectPrimitive.Trigger, { "data-slot": "select-trigger", "data-size": size, className: cn("flex w-fit items-center justify-between gap-2 rounded-md border border-input bg-transparent px-3 py-2 text-sm whitespace-nowrap shadow-xs transition-[color,box-shadow] outline-none 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-destructive/20 data-[placeholder]:text-muted-foreground data-[size=default]:h-9 data-[size=sm]:h-8 *:data-[slot=select-value]:line-clamp-1 *:data-[slot=select-value]:flex *:data-[slot=select-value]:items-center *:data-[slot=select-value]:gap-2 dark:bg-input/30 dark:hover:bg-input/50 dark:aria-invalid:ring-destructive/40 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground", className), ...props, children: [children, _jsx(SelectPrimitive.Icon, { asChild: true, children: _jsx(ChevronDownIcon, { className: "size-4 opacity-50" }) })] }));
17
+ }
18
+ function SelectContent({ className, children, position = "item-aligned", align = "center", ...props }) {
19
+ return (_jsx(SelectPrimitive.Portal, { children: _jsxs(SelectPrimitive.Content, { "data-slot": "select-content", className: cn("relative z-50 max-h-(--radix-select-content-available-height) min-w-[8rem] origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto rounded-md border bg-popover text-popover-foreground shadow-md 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 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", position === "popper" &&
20
+ "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1", className), position: position, align: align, ...props, children: [_jsx(SelectScrollUpButton, {}), _jsx(SelectPrimitive.Viewport, { className: cn("p-1", position === "popper" &&
21
+ "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)] scroll-my-1"), children: children }), _jsx(SelectScrollDownButton, {})] }) }));
22
+ }
23
+ function SelectLabel({ className, ...props }) {
24
+ return (_jsx(SelectPrimitive.Label, { "data-slot": "select-label", className: cn("px-2 py-1.5 text-xs text-muted-foreground", className), ...props }));
25
+ }
26
+ function SelectItem({ className, children, ...props }) {
27
+ return (_jsxs(SelectPrimitive.Item, { "data-slot": "select-item", className: cn("relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground *:[span]:last:flex *:[span]:last:items-center *:[span]:last:gap-2", className), ...props, children: [_jsx("span", { "data-slot": "select-item-indicator", className: "absolute right-2 flex size-3.5 items-center justify-center", children: _jsx(SelectPrimitive.ItemIndicator, { children: _jsx(CheckIcon, { className: "size-4" }) }) }), _jsx(SelectPrimitive.ItemText, { children: children })] }));
28
+ }
29
+ function SelectSeparator({ className, ...props }) {
30
+ return (_jsx(SelectPrimitive.Separator, { "data-slot": "select-separator", className: cn("pointer-events-none -mx-1 my-1 h-px bg-border", className), ...props }));
31
+ }
32
+ function SelectScrollUpButton({ className, ...props }) {
33
+ return (_jsx(SelectPrimitive.ScrollUpButton, { "data-slot": "select-scroll-up-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronUpIcon, { className: "size-4" }) }));
34
+ }
35
+ function SelectScrollDownButton({ className, ...props }) {
36
+ return (_jsx(SelectPrimitive.ScrollDownButton, { "data-slot": "select-scroll-down-button", className: cn("flex cursor-default items-center justify-center py-1", className), ...props, children: _jsx(ChevronDownIcon, { className: "size-4" }) }));
37
+ }
38
+ export { Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectScrollDownButton, SelectScrollUpButton, SelectSeparator, SelectTrigger, SelectValue, };
@@ -0,0 +1,4 @@
1
+ import * as React from "react";
2
+ import { Separator as SeparatorPrimitive } from "radix-ui";
3
+ declare function Separator({ className, orientation, decorative, ...props }: React.ComponentProps<typeof SeparatorPrimitive.Root>): React.JSX.Element;
4
+ export { Separator };
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { cn } from "../cn";
3
+ import { Separator as SeparatorPrimitive } from "radix-ui";
4
+ function Separator({ className, orientation = "horizontal", decorative = true, ...props }) {
5
+ return (_jsx(SeparatorPrimitive.Root, { "data-slot": "separator", decorative: decorative, orientation: orientation, className: cn("shrink-0 bg-border data-[orientation=horizontal]:h-px data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-px", className), ...props }));
6
+ }
7
+ export { Separator };
@@ -0,0 +1,14 @@
1
+ import * as React from "react";
2
+ import { Dialog as SheetPrimitive } from "radix-ui";
3
+ declare function Sheet({ ...props }: React.ComponentProps<typeof SheetPrimitive.Root>): React.JSX.Element;
4
+ declare function SheetTrigger({ ...props }: React.ComponentProps<typeof SheetPrimitive.Trigger>): React.JSX.Element;
5
+ declare function SheetClose({ ...props }: React.ComponentProps<typeof SheetPrimitive.Close>): React.JSX.Element;
6
+ declare function SheetContent({ className, children, side, showCloseButton, ...props }: React.ComponentProps<typeof SheetPrimitive.Content> & {
7
+ side?: "top" | "right" | "bottom" | "left";
8
+ showCloseButton?: boolean;
9
+ }): React.JSX.Element;
10
+ declare function SheetHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
11
+ declare function SheetFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
12
+ declare function SheetTitle({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Title>): React.JSX.Element;
13
+ declare function SheetDescription({ className, ...props }: React.ComponentProps<typeof SheetPrimitive.Description>): React.JSX.Element;
14
+ export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
@@ -0,0 +1,40 @@
1
+ "use client";
2
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
3
+ import { cn } from "../cn";
4
+ import { XIcon } from "lucide-react";
5
+ import { Dialog as SheetPrimitive } from "radix-ui";
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.Overlay, { "data-slot": "sheet-overlay", className: cn("fixed inset-0 z-50 bg-black/50 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:animate-in data-[state=open]:fade-in-0", className), ...props }));
20
+ }
21
+ function SheetContent({ className, children, side = "right", showCloseButton = true, ...props }) {
22
+ return (_jsxs(SheetPortal, { children: [_jsx(SheetOverlay, {}), _jsxs(SheetPrimitive.Content, { "data-slot": "sheet-content", className: cn("fixed z-50 flex flex-col gap-4 bg-background shadow-lg transition ease-in-out data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:animate-in data-[state=open]:duration-500", side === "right" &&
23
+ "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm", side === "left" &&
24
+ "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm", side === "top" &&
25
+ "inset-x-0 top-0 h-auto border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top", side === "bottom" &&
26
+ "inset-x-0 bottom-0 h-auto border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom", className), ...props, children: [children, showCloseButton && (_jsxs(SheetPrimitive.Close, { className: "absolute top-4 right-4 rounded-xs opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:ring-2 focus:ring-ring focus:ring-offset-2 focus:outline-hidden disabled:pointer-events-none data-[state=open]:bg-secondary", children: [_jsx(XIcon, { className: "size-4" }), _jsx("span", { className: "sr-only", children: "Close" })] }))] })] }));
27
+ }
28
+ function SheetHeader({ className, ...props }) {
29
+ return (_jsx("div", { "data-slot": "sheet-header", className: cn("flex flex-col gap-1.5 p-4", className), ...props }));
30
+ }
31
+ function SheetFooter({ className, ...props }) {
32
+ return (_jsx("div", { "data-slot": "sheet-footer", className: cn("mt-auto flex flex-col gap-2 p-4", className), ...props }));
33
+ }
34
+ function SheetTitle({ className, ...props }) {
35
+ return (_jsx(SheetPrimitive.Title, { "data-slot": "sheet-title", className: cn("font-semibold text-foreground", className), ...props }));
36
+ }
37
+ function SheetDescription({ className, ...props }) {
38
+ return (_jsx(SheetPrimitive.Description, { "data-slot": "sheet-description", className: cn("text-sm text-muted-foreground", className), ...props }));
39
+ }
40
+ export { Sheet, SheetTrigger, SheetClose, SheetContent, SheetHeader, SheetFooter, SheetTitle, SheetDescription, };
@@ -0,0 +1,69 @@
1
+ import * as React from "react";
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
+ }): React.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?: "offcanvas" | "icon" | "none";
26
+ }): React.JSX.Element;
27
+ declare function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>): React.JSX.Element;
28
+ declare function SidebarRail({ className, ...props }: React.ComponentProps<"button">): React.JSX.Element;
29
+ declare function SidebarInset({ className, ...props }: React.ComponentProps<"main">): React.JSX.Element;
30
+ declare function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>): React.JSX.Element;
31
+ declare function SidebarHeader({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
32
+ declare function SidebarFooter({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
33
+ declare function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>): React.JSX.Element;
34
+ declare function SidebarContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
35
+ declare function SidebarGroup({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
36
+ declare function SidebarGroupLabel({ className, asChild, ...props }: React.ComponentProps<"div"> & {
37
+ asChild?: boolean;
38
+ }): React.JSX.Element;
39
+ declare function SidebarGroupAction({ className, asChild, ...props }: React.ComponentProps<"button"> & {
40
+ asChild?: boolean;
41
+ }): React.JSX.Element;
42
+ declare function SidebarGroupContent({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
43
+ declare function SidebarMenu({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
44
+ declare function SidebarMenuItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
45
+ declare const sidebarMenuButtonVariants: (props?: ({
46
+ variant?: "default" | "outline" | null | undefined;
47
+ size?: "default" | "sm" | "lg" | null | undefined;
48
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
49
+ declare function SidebarMenuButton({ asChild, isActive, variant, size, tooltip, className, ...props }: React.ComponentProps<"button"> & {
50
+ asChild?: boolean;
51
+ isActive?: boolean;
52
+ tooltip?: string | React.ComponentProps<typeof TooltipContent>;
53
+ } & VariantProps<typeof sidebarMenuButtonVariants>): React.JSX.Element;
54
+ declare function SidebarMenuAction({ className, asChild, showOnHover, ...props }: React.ComponentProps<"button"> & {
55
+ asChild?: boolean;
56
+ showOnHover?: boolean;
57
+ }): React.JSX.Element;
58
+ declare function SidebarMenuBadge({ className, ...props }: React.ComponentProps<"div">): React.JSX.Element;
59
+ declare function SidebarMenuSkeleton({ className, showIcon, ...props }: React.ComponentProps<"div"> & {
60
+ showIcon?: boolean;
61
+ }): React.JSX.Element;
62
+ declare function SidebarMenuSub({ className, ...props }: React.ComponentProps<"ul">): React.JSX.Element;
63
+ declare function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<"li">): React.JSX.Element;
64
+ declare function SidebarMenuSubButton({ asChild, size, isActive, className, ...props }: React.ComponentProps<"a"> & {
65
+ asChild?: boolean;
66
+ size?: "sm" | "md";
67
+ isActive?: boolean;
68
+ }): React.JSX.Element;
69
+ 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,211 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { cva } from "class-variance-authority";
4
+ import { cn } from "../cn";
5
+ import { PanelLeftIcon } from "lucide-react";
6
+ import { Slot } from "radix-ui";
7
+ import { useIsMobile } from "../hooks/use-mobile";
8
+ import { Button } from "./button";
9
+ import { Input } from "./input";
10
+ import { Separator } from "./separator";
11
+ import { Sheet, SheetContent, SheetDescription, SheetHeader, SheetTitle, } from "./sheet";
12
+ import { Skeleton } from "./skeleton";
13
+ import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, } from "./tooltip";
14
+ const SIDEBAR_COOKIE_NAME = "sidebar_state";
15
+ const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
16
+ const SIDEBAR_WIDTH = "16rem";
17
+ const SIDEBAR_WIDTH_MOBILE = "18rem";
18
+ const SIDEBAR_WIDTH_ICON = "3rem";
19
+ const SIDEBAR_KEYBOARD_SHORTCUT = "b";
20
+ const SidebarContext = React.createContext(null);
21
+ function useSidebar() {
22
+ const context = React.useContext(SidebarContext);
23
+ if (!context) {
24
+ throw new Error("useSidebar must be used within a SidebarProvider.");
25
+ }
26
+ return context;
27
+ }
28
+ function SidebarProvider({ defaultOpen = true, open: openProp, onOpenChange: setOpenProp, className, style, children, ...props }) {
29
+ const isMobile = useIsMobile();
30
+ const [openMobile, setOpenMobile] = React.useState(false);
31
+ // This is the internal state of the sidebar.
32
+ // We use openProp and setOpenProp for control from outside the component.
33
+ const [_open, _setOpen] = React.useState(defaultOpen);
34
+ const open = openProp ?? _open;
35
+ const setOpen = React.useCallback((value) => {
36
+ const openState = typeof value === "function" ? value(open) : value;
37
+ if (setOpenProp) {
38
+ setOpenProp(openState);
39
+ }
40
+ else {
41
+ _setOpen(openState);
42
+ }
43
+ // This sets the cookie to keep the sidebar state.
44
+ document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
45
+ }, [setOpenProp, open]);
46
+ // Helper to toggle the sidebar.
47
+ const toggleSidebar = React.useCallback(() => {
48
+ return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
49
+ }, [isMobile, setOpen, setOpenMobile]);
50
+ // Adds a keyboard shortcut to toggle the sidebar.
51
+ React.useEffect(() => {
52
+ const handleKeyDown = (event) => {
53
+ if (event.key === SIDEBAR_KEYBOARD_SHORTCUT &&
54
+ (event.metaKey || event.ctrlKey)) {
55
+ event.preventDefault();
56
+ toggleSidebar();
57
+ }
58
+ };
59
+ window.addEventListener("keydown", handleKeyDown);
60
+ return () => window.removeEventListener("keydown", handleKeyDown);
61
+ }, [toggleSidebar]);
62
+ // We add a state so that we can do data-state="expanded" or "collapsed".
63
+ // This makes it easier to style the sidebar with Tailwind classes.
64
+ const state = open ? "expanded" : "collapsed";
65
+ const contextValue = React.useMemo(() => ({
66
+ state,
67
+ open,
68
+ setOpen,
69
+ isMobile,
70
+ openMobile,
71
+ setOpenMobile,
72
+ toggleSidebar,
73
+ }), [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar]);
74
+ return (_jsx(SidebarContext.Provider, { value: contextValue, children: _jsx(TooltipProvider, { delayDuration: 0, children: _jsx("div", { "data-slot": "sidebar-wrapper", style: {
75
+ "--sidebar-width": SIDEBAR_WIDTH,
76
+ "--sidebar-width-icon": SIDEBAR_WIDTH_ICON,
77
+ ...style,
78
+ }, className: cn("group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar", className), ...props, children: children }) }) }));
79
+ }
80
+ function Sidebar({ side = "left", variant = "sidebar", collapsible = "offcanvas", className, children, ...props }) {
81
+ const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
82
+ if (collapsible === "none") {
83
+ return (_jsx("div", { "data-slot": "sidebar", className: cn("flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground", className), ...props, children: children }));
84
+ }
85
+ if (isMobile) {
86
+ return (_jsx(Sheet, { open: openMobile, onOpenChange: setOpenMobile, ...props, children: _jsxs(SheetContent, { "data-sidebar": "sidebar", "data-slot": "sidebar", "data-mobile": "true", className: "w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden", style: {
87
+ "--sidebar-width": SIDEBAR_WIDTH_MOBILE,
88
+ }, side: side, 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 })] }) }));
89
+ }
90
+ return (_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: [_jsx("div", { "data-slot": "sidebar-gap", className: cn("relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear", "group-data-[collapsible=offcanvas]:w-0", "group-data-[side=right]:rotate-180", variant === "floating" || variant === "inset"
91
+ ? "group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]"
92
+ : "group-data-[collapsible=icon]:w-(--sidebar-width-icon)") }), _jsx("div", { "data-slot": "sidebar-container", 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"
93
+ ? "left-0 group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)]"
94
+ : "right-0 group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)]",
95
+ // Adjust the padding for floating and inset variants.
96
+ variant === "floating" || variant === "inset"
97
+ ? "p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]"
98
+ : "group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l", className), ...props, children: _jsx("div", { "data-sidebar": "sidebar", "data-slot": "sidebar-inner", className: "flex h-full w-full flex-col bg-sidebar group-data-[variant=floating]:rounded-lg group-data-[variant=floating]:border group-data-[variant=floating]:border-sidebar-border group-data-[variant=floating]:shadow-sm", children: children }) })] }));
99
+ }
100
+ function SidebarTrigger({ className, onClick, ...props }) {
101
+ const { toggleSidebar } = useSidebar();
102
+ return (_jsxs(Button, { "data-sidebar": "trigger", "data-slot": "sidebar-trigger", variant: "ghost", size: "icon", className: cn("size-7", className), onClick: (event) => {
103
+ onClick?.(event);
104
+ toggleSidebar();
105
+ }, ...props, children: [_jsx(PanelLeftIcon, {}), _jsx("span", { className: "sr-only", children: "Toggle Sidebar" })] }));
106
+ }
107
+ function SidebarRail({ className, ...props }) {
108
+ const { toggleSidebar } = useSidebar();
109
+ return (_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 -translate-x-1/2 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:left-1/2 after:w-[2px] hover:after:bg-sidebar-border 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=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 }));
110
+ }
111
+ function SidebarInset({ className, ...props }) {
112
+ return (_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 }));
113
+ }
114
+ function SidebarInput({ className, ...props }) {
115
+ return (_jsx(Input, { "data-slot": "sidebar-input", "data-sidebar": "input", className: cn("h-8 w-full bg-background shadow-none", className), ...props }));
116
+ }
117
+ function SidebarHeader({ className, ...props }) {
118
+ return (_jsx("div", { "data-slot": "sidebar-header", "data-sidebar": "header", className: cn("flex flex-col gap-2 p-2", className), ...props }));
119
+ }
120
+ function SidebarFooter({ className, ...props }) {
121
+ return (_jsx("div", { "data-slot": "sidebar-footer", "data-sidebar": "footer", className: cn("flex flex-col gap-2 p-2", className), ...props }));
122
+ }
123
+ function SidebarSeparator({ className, ...props }) {
124
+ return (_jsx(Separator, { "data-slot": "sidebar-separator", "data-sidebar": "separator", className: cn("mx-2 w-auto bg-sidebar-border", className), ...props }));
125
+ }
126
+ function SidebarContent({ className, ...props }) {
127
+ return (_jsx("div", { "data-slot": "sidebar-content", "data-sidebar": "content", className: cn("flex min-h-0 flex-1 flex-col gap-2 overflow-auto group-data-[collapsible=icon]:overflow-hidden", className), ...props }));
128
+ }
129
+ function SidebarGroup({ className, ...props }) {
130
+ return (_jsx("div", { "data-slot": "sidebar-group", "data-sidebar": "group", className: cn("relative flex w-full min-w-0 flex-col p-2", className), ...props }));
131
+ }
132
+ function SidebarGroupLabel({ className, asChild = false, ...props }) {
133
+ const Comp = asChild ? Slot.Root : "div";
134
+ return (_jsx(Comp, { "data-slot": "sidebar-group-label", "data-sidebar": "group-label", 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 ease-linear focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0", "group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0", className), ...props }));
135
+ }
136
+ function SidebarGroupAction({ className, asChild = false, ...props }) {
137
+ const Comp = asChild ? Slot.Root : "button";
138
+ return (_jsx(Comp, { "data-slot": "sidebar-group-action", "data-sidebar": "group-action", 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 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
139
+ // Increases the hit area of the button on mobile.
140
+ "after:absolute after:-inset-2 md:after:hidden", "group-data-[collapsible=icon]:hidden", className), ...props }));
141
+ }
142
+ function SidebarGroupContent({ className, ...props }) {
143
+ return (_jsx("div", { "data-slot": "sidebar-group-content", "data-sidebar": "group-content", className: cn("w-full text-sm", className), ...props }));
144
+ }
145
+ function SidebarMenu({ className, ...props }) {
146
+ return (_jsx("ul", { "data-slot": "sidebar-menu", "data-sidebar": "menu", className: cn("flex w-full min-w-0 flex-col gap-1", className), ...props }));
147
+ }
148
+ function SidebarMenuItem({ className, ...props }) {
149
+ return (_jsx("li", { "data-slot": "sidebar-menu-item", "data-sidebar": "menu-item", className: cn("group/menu-item relative", className), ...props }));
150
+ }
151
+ const sidebarMenuButtonVariants = cva("peer/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] 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-[active=true]:bg-sidebar-accent data-[active=true]:font-medium data-[active=true]:text-sidebar-accent-foreground data-[state=open]:hover:bg-sidebar-accent data-[state=open]:hover:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0", {
152
+ variants: {
153
+ variant: {
154
+ default: "hover:bg-sidebar-accent hover:text-sidebar-accent-foreground",
155
+ 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)]",
156
+ },
157
+ size: {
158
+ default: "h-8 text-sm",
159
+ sm: "h-7 text-xs",
160
+ lg: "h-12 text-sm group-data-[collapsible=icon]:p-0!",
161
+ },
162
+ },
163
+ defaultVariants: {
164
+ variant: "default",
165
+ size: "default",
166
+ },
167
+ });
168
+ function SidebarMenuButton({ asChild = false, isActive = false, variant = "default", size = "default", tooltip, className, ...props }) {
169
+ const Comp = asChild ? Slot.Root : "button";
170
+ const { isMobile, state } = useSidebar();
171
+ const button = (_jsx(Comp, { "data-slot": "sidebar-menu-button", "data-sidebar": "menu-button", "data-size": size, "data-active": isActive, className: cn(sidebarMenuButtonVariants({ variant, size }), className), ...props }));
172
+ if (!tooltip) {
173
+ return button;
174
+ }
175
+ if (typeof tooltip === "string") {
176
+ tooltip = {
177
+ children: tooltip,
178
+ };
179
+ }
180
+ return (_jsxs(Tooltip, { children: [_jsx(TooltipTrigger, { asChild: true, children: button }), _jsx(TooltipContent, { side: "right", align: "center", hidden: state !== "collapsed" || isMobile, ...tooltip })] }));
181
+ }
182
+ function SidebarMenuAction({ className, asChild = false, showOnHover = false, ...props }) {
183
+ const Comp = asChild ? Slot.Root : "button";
184
+ return (_jsx(Comp, { "data-slot": "sidebar-menu-action", "data-sidebar": "menu-action", 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 peer-hover/menu-button:text-sidebar-accent-foreground hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0",
185
+ // Increases the hit area of the button on mobile.
186
+ "after:absolute after:-inset-2 md:after:hidden", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", showOnHover &&
187
+ "group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-[active=true]/menu-button:text-sidebar-accent-foreground data-[state=open]:opacity-100 md:opacity-0", className), ...props }));
188
+ }
189
+ function SidebarMenuBadge({ className, ...props }) {
190
+ return (_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", "peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[active=true]/menu-button:text-sidebar-accent-foreground", "peer-data-[size=sm]/menu-button:top-1", "peer-data-[size=default]/menu-button:top-1.5", "peer-data-[size=lg]/menu-button:top-2.5", "group-data-[collapsible=icon]:hidden", className), ...props }));
191
+ }
192
+ function SidebarMenuSkeleton({ className, showIcon = false, ...props }) {
193
+ // Random width between 50 to 90%.
194
+ const width = React.useMemo(() => {
195
+ return `${Math.floor(Math.random() * 40) + 50}%`;
196
+ }, []);
197
+ return (_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 && (_jsx(Skeleton, { className: "size-4 rounded-md", "data-sidebar": "menu-skeleton-icon" })), _jsx(Skeleton, { className: "h-4 max-w-(--skeleton-width) flex-1", "data-sidebar": "menu-skeleton-text", style: {
198
+ "--skeleton-width": width,
199
+ } })] }));
200
+ }
201
+ function SidebarMenuSub({ className, ...props }) {
202
+ return (_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 }));
203
+ }
204
+ function SidebarMenuSubItem({ className, ...props }) {
205
+ return (_jsx("li", { "data-slot": "sidebar-menu-sub-item", "data-sidebar": "menu-sub-item", className: cn("group/menu-sub-item relative", className), ...props }));
206
+ }
207
+ function SidebarMenuSubButton({ asChild = false, size = "md", isActive = false, className, ...props }) {
208
+ const Comp = asChild ? Slot.Root : "a";
209
+ return (_jsx(Comp, { "data-slot": "sidebar-menu-sub-button", "data-sidebar": "menu-sub-button", "data-size": size, "data-active": isActive, 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 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 [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground", "data-[active=true]:bg-sidebar-accent data-[active=true]:text-sidebar-accent-foreground", size === "sm" && "text-xs", size === "md" && "text-sm", "group-data-[collapsible=icon]:hidden", className), ...props }));
210
+ }
211
+ 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,2 @@
1
+ declare function Skeleton({ className, ...props }: React.ComponentProps<"div">): import("react").JSX.Element;
2
+ export { Skeleton };
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { cn } from "../cn";
3
+ function Skeleton({ className, ...props }) {
4
+ return (_jsx("div", { "data-slot": "skeleton", className: cn("animate-pulse rounded-md bg-accent", className), ...props }));
5
+ }
6
+ export { Skeleton };
@@ -0,0 +1,4 @@
1
+ import * as React from "react";
2
+ import { Slider as SliderPrimitive } from "radix-ui";
3
+ declare function Slider({ className, defaultValue, value, min, max, ...props }: React.ComponentProps<typeof SliderPrimitive.Root>): React.JSX.Element;
4
+ export { Slider };
@@ -0,0 +1,13 @@
1
+ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
2
+ import * as React from "react";
3
+ import { cn } from "../cn";
4
+ import { Slider as SliderPrimitive } from "radix-ui";
5
+ function Slider({ className, defaultValue, value, min = 0, max = 100, ...props }) {
6
+ const _values = React.useMemo(() => Array.isArray(value)
7
+ ? value
8
+ : Array.isArray(defaultValue)
9
+ ? defaultValue
10
+ : [min, max], [value, defaultValue, min, max]);
11
+ return (_jsxs(SliderPrimitive.Root, { "data-slot": "slider", defaultValue: defaultValue, value: value, min: min, max: max, className: cn("relative flex w-full touch-none items-center select-none data-[disabled]:opacity-50 data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col", className), ...props, children: [_jsx(SliderPrimitive.Track, { "data-slot": "slider-track", className: cn("relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=horizontal]:w-full data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"), children: _jsx(SliderPrimitive.Range, { "data-slot": "slider-range", className: cn("absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full") }) }), Array.from({ length: _values.length }, (_, index) => (_jsx(SliderPrimitive.Thumb, { "data-slot": "slider-thumb", className: "block size-4 shrink-0 rounded-full border border-primary bg-white shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:ring-4 focus-visible:outline-hidden disabled:pointer-events-none disabled:opacity-50" }, index)))] }));
12
+ }
13
+ export { Slider };
@@ -0,0 +1,3 @@
1
+ import { type ToasterProps } from "sonner";
2
+ declare const Toaster: ({ ...props }: ToasterProps) => import("react").JSX.Element;
3
+ export { Toaster };
@@ -0,0 +1,21 @@
1
+ "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { CircleCheckIcon, InfoIcon, Loader2Icon, OctagonXIcon, TriangleAlertIcon, } from "lucide-react";
4
+ import { useTheme } from "next-themes";
5
+ import { Toaster as Sonner } from "sonner";
6
+ const Toaster = ({ ...props }) => {
7
+ const { theme = "system" } = useTheme();
8
+ return (_jsx(Sonner, { theme: theme, className: "toaster group", icons: {
9
+ success: _jsx(CircleCheckIcon, { className: "size-4" }),
10
+ info: _jsx(InfoIcon, { className: "size-4" }),
11
+ warning: _jsx(TriangleAlertIcon, { className: "size-4" }),
12
+ error: _jsx(OctagonXIcon, { className: "size-4" }),
13
+ loading: _jsx(Loader2Icon, { className: "size-4 animate-spin" }),
14
+ }, style: {
15
+ "--normal-bg": "var(--popover)",
16
+ "--normal-text": "var(--popover-foreground)",
17
+ "--normal-border": "var(--border)",
18
+ "--border-radius": "var(--radius)",
19
+ }, ...props }));
20
+ };
21
+ export { Toaster };
@@ -0,0 +1,6 @@
1
+ import * as React from "react";
2
+ import { Switch as SwitchPrimitive } from "radix-ui";
3
+ declare function Switch({ className, size, ...props }: React.ComponentProps<typeof SwitchPrimitive.Root> & {
4
+ size?: "sm" | "default";
5
+ }): React.JSX.Element;
6
+ export { Switch };
@@ -0,0 +1,7 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { cn } from "../cn";
3
+ import { Switch as SwitchPrimitive } from "radix-ui";
4
+ function Switch({ className, size = "default", ...props }) {
5
+ return (_jsx(SwitchPrimitive.Root, { "data-slot": "switch", "data-size": size, className: cn("peer group/switch inline-flex shrink-0 items-center rounded-full border border-transparent shadow-xs transition-all outline-none focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 data-[size=default]:h-[1.15rem] data-[size=default]:w-8 data-[size=sm]:h-3.5 data-[size=sm]:w-6 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input dark:data-[state=unchecked]:bg-input/80", className), ...props, children: _jsx(SwitchPrimitive.Thumb, { "data-slot": "switch-thumb", className: cn("pointer-events-none block rounded-full bg-background ring-0 transition-transform group-data-[size=default]/switch:size-4 group-data-[size=sm]/switch:size-3 data-[state=checked]:translate-x-[calc(100%-2px)] data-[state=unchecked]:translate-x-0 dark:data-[state=checked]:bg-primary-foreground dark:data-[state=unchecked]:bg-foreground") }) }));
6
+ }
7
+ export { Switch };
@@ -0,0 +1,10 @@
1
+ import * as React from "react";
2
+ declare function Table({ className, ...props }: React.ComponentProps<"table">): React.JSX.Element;
3
+ declare function TableHeader({ className, ...props }: React.ComponentProps<"thead">): React.JSX.Element;
4
+ declare function TableBody({ className, ...props }: React.ComponentProps<"tbody">): React.JSX.Element;
5
+ declare function TableFooter({ className, ...props }: React.ComponentProps<"tfoot">): React.JSX.Element;
6
+ declare function TableRow({ className, ...props }: React.ComponentProps<"tr">): React.JSX.Element;
7
+ declare function TableHead({ className, ...props }: React.ComponentProps<"th">): React.JSX.Element;
8
+ declare function TableCell({ className, ...props }: React.ComponentProps<"td">): React.JSX.Element;
9
+ declare function TableCaption({ className, ...props }: React.ComponentProps<"caption">): React.JSX.Element;
10
+ export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
@@ -0,0 +1,28 @@
1
+ "use client";
2
+ import { jsx as _jsx } from "react/jsx-runtime";
3
+ import { cn } from "../cn";
4
+ function Table({ className, ...props }) {
5
+ return (_jsx("div", { "data-slot": "table-container", className: "relative w-full overflow-x-auto", children: _jsx("table", { "data-slot": "table", className: cn("w-full caption-bottom text-sm", className), ...props }) }));
6
+ }
7
+ function TableHeader({ className, ...props }) {
8
+ return (_jsx("thead", { "data-slot": "table-header", className: cn("[&_tr]:border-b", className), ...props }));
9
+ }
10
+ function TableBody({ className, ...props }) {
11
+ return (_jsx("tbody", { "data-slot": "table-body", className: cn("[&_tr:last-child]:border-0", className), ...props }));
12
+ }
13
+ function TableFooter({ className, ...props }) {
14
+ return (_jsx("tfoot", { "data-slot": "table-footer", className: cn("border-t bg-muted/50 font-medium [&>tr]:last:border-b-0", className), ...props }));
15
+ }
16
+ function TableRow({ className, ...props }) {
17
+ return (_jsx("tr", { "data-slot": "table-row", className: cn("border-b transition-colors hover:bg-muted/50 has-aria-expanded:bg-muted/50 data-[state=selected]:bg-muted", className), ...props }));
18
+ }
19
+ function TableHead({ className, ...props }) {
20
+ return (_jsx("th", { "data-slot": "table-head", className: cn("h-10 px-2 text-left align-middle font-medium whitespace-nowrap text-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
21
+ }
22
+ function TableCell({ className, ...props }) {
23
+ return (_jsx("td", { "data-slot": "table-cell", className: cn("p-2 align-middle whitespace-nowrap [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-[2px]", className), ...props }));
24
+ }
25
+ function TableCaption({ className, ...props }) {
26
+ return (_jsx("caption", { "data-slot": "table-caption", className: cn("mt-4 text-sm text-muted-foreground", className), ...props }));
27
+ }
28
+ export { Table, TableHeader, TableBody, TableFooter, TableHead, TableRow, TableCell, TableCaption, };
@@ -0,0 +1,11 @@
1
+ import * as React from "react";
2
+ import { type VariantProps } from "class-variance-authority";
3
+ import { Tabs as TabsPrimitive } from "radix-ui";
4
+ declare function Tabs({ className, orientation, ...props }: React.ComponentProps<typeof TabsPrimitive.Root>): React.JSX.Element;
5
+ declare const tabsListVariants: (props?: ({
6
+ variant?: "line" | "default" | null | undefined;
7
+ } & import("class-variance-authority/types").ClassProp) | undefined) => string;
8
+ declare function TabsList({ className, variant, ...props }: React.ComponentProps<typeof TabsPrimitive.List> & VariantProps<typeof tabsListVariants>): React.JSX.Element;
9
+ declare function TabsTrigger({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Trigger>): React.JSX.Element;
10
+ declare function TabsContent({ className, ...props }: React.ComponentProps<typeof TabsPrimitive.Content>): React.JSX.Element;
11
+ export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
@@ -0,0 +1,28 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { cva } from "class-variance-authority";
3
+ import { cn } from "../cn";
4
+ import { Tabs as TabsPrimitive } from "radix-ui";
5
+ function Tabs({ className, orientation = "horizontal", ...props }) {
6
+ return (_jsx(TabsPrimitive.Root, { "data-slot": "tabs", "data-orientation": orientation, orientation: orientation, className: cn("group/tabs flex gap-2 data-[orientation=horizontal]:flex-col", className), ...props }));
7
+ }
8
+ const tabsListVariants = cva("group/tabs-list inline-flex w-fit items-center justify-center rounded-lg p-[3px] text-muted-foreground group-data-[orientation=horizontal]/tabs:h-9 group-data-[orientation=vertical]/tabs:h-fit group-data-[orientation=vertical]/tabs:flex-col data-[variant=line]:rounded-none", {
9
+ variants: {
10
+ variant: {
11
+ default: "bg-muted",
12
+ line: "gap-1 bg-transparent",
13
+ },
14
+ },
15
+ defaultVariants: {
16
+ variant: "default",
17
+ },
18
+ });
19
+ function TabsList({ className, variant = "default", ...props }) {
20
+ return (_jsx(TabsPrimitive.List, { "data-slot": "tabs-list", "data-variant": variant, className: cn(tabsListVariants({ variant }), className), ...props }));
21
+ }
22
+ function TabsTrigger({ className, ...props }) {
23
+ return (_jsx(TabsPrimitive.Trigger, { "data-slot": "tabs-trigger", className: cn("relative inline-flex h-[calc(100%-1px)] flex-1 items-center justify-center gap-1.5 rounded-md border border-transparent px-2 py-1 text-sm font-medium whitespace-nowrap text-foreground/60 transition-all group-data-[orientation=vertical]/tabs:w-full group-data-[orientation=vertical]/tabs:justify-start hover:text-foreground focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 focus-visible:outline-1 focus-visible:outline-ring disabled:pointer-events-none disabled:opacity-50 group-data-[variant=default]/tabs-list:data-[state=active]:shadow-sm group-data-[variant=line]/tabs-list:data-[state=active]:shadow-none dark:text-muted-foreground dark:hover:text-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4", "group-data-[variant=line]/tabs-list:bg-transparent group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:border-transparent dark:group-data-[variant=line]/tabs-list:data-[state=active]:bg-transparent", "data-[state=active]:bg-background data-[state=active]:text-foreground dark:data-[state=active]:border-input dark:data-[state=active]:bg-input/30 dark:data-[state=active]:text-foreground", "after:absolute after:bg-foreground after:opacity-0 after:transition-opacity group-data-[orientation=horizontal]/tabs:after:inset-x-0 group-data-[orientation=horizontal]/tabs:after:bottom-[-5px] group-data-[orientation=horizontal]/tabs:after:h-0.5 group-data-[orientation=vertical]/tabs:after:inset-y-0 group-data-[orientation=vertical]/tabs:after:-right-1 group-data-[orientation=vertical]/tabs:after:w-0.5 group-data-[variant=line]/tabs-list:data-[state=active]:after:opacity-100", className), ...props }));
24
+ }
25
+ function TabsContent({ className, ...props }) {
26
+ return (_jsx(TabsPrimitive.Content, { "data-slot": "tabs-content", className: cn("flex-1 outline-none", className), ...props }));
27
+ }
28
+ export { Tabs, TabsList, TabsTrigger, TabsContent, tabsListVariants };
@@ -0,0 +1,3 @@
1
+ import * as React from "react";
2
+ declare function Textarea({ className, ...props }: React.ComponentProps<"textarea">): React.JSX.Element;
3
+ export { Textarea };
@@ -0,0 +1,6 @@
1
+ import { jsx as _jsx } from "react/jsx-runtime";
2
+ import { cn } from "../cn";
3
+ function Textarea({ className, ...props }) {
4
+ return (_jsx("textarea", { "data-slot": "textarea", className: cn("flex field-sizing-content min-h-16 w-full rounded-md border border-input bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none placeholder:text-muted-foreground 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-destructive/20 md:text-sm dark:bg-input/30 dark:aria-invalid:ring-destructive/40", className), ...props }));
5
+ }
6
+ export { Textarea };
@@ -0,0 +1,9 @@
1
+ import * as React from "react";
2
+ import { type VariantProps } from "class-variance-authority";
3
+ import { ToggleGroup as ToggleGroupPrimitive } from "radix-ui";
4
+ import { toggleVariants } from "./toggle";
5
+ declare function ToggleGroup({ className, variant, size, spacing, children, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Root> & VariantProps<typeof toggleVariants> & {
6
+ spacing?: number;
7
+ }): React.JSX.Element;
8
+ declare function ToggleGroupItem({ className, children, variant, size, ...props }: React.ComponentProps<typeof ToggleGroupPrimitive.Item> & VariantProps<typeof toggleVariants>): React.JSX.Element;
9
+ export { ToggleGroup, ToggleGroupItem };