@rangka/client 0.1.1 → 0.1.3

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 (317) hide show
  1. package/dist/App.d.ts.map +1 -1
  2. package/dist/App.js +7 -1
  3. package/dist/App.js.map +1 -1
  4. package/dist/index.d.ts +2 -0
  5. package/dist/index.d.ts.map +1 -1
  6. package/dist/index.js +2 -0
  7. package/dist/index.js.map +1 -1
  8. package/dist/main.d.ts.map +1 -1
  9. package/dist/main.js +20 -0
  10. package/dist/main.js.map +1 -1
  11. package/dist/shell/assets/index-63v1sBS3.css +1 -0
  12. package/dist/shell/assets/index-Dh7K40cQ.js +8634 -0
  13. package/dist/shell/assets/vendor-query-B2cydN5j.js +1 -0
  14. package/dist/shell/assets/vendor-radix-BJxYPxPb.js +69 -0
  15. package/dist/shell/assets/vendor-router-ET_myMt5.js +17 -0
  16. package/dist/shell/index.html +5 -2
  17. package/dist/theme.css +82 -0
  18. package/dist/widgets/components/lazy-manifest.d.ts +11 -0
  19. package/dist/widgets/components/lazy-manifest.d.ts.map +1 -0
  20. package/dist/widgets/components/lazy-manifest.js +32 -0
  21. package/dist/widgets/components/lazy-manifest.js.map +1 -0
  22. package/dist/widgets/components/register.js +12 -12
  23. package/dist/widgets/components/register.js.map +1 -1
  24. package/dist/widgets/loader.d.ts +3 -0
  25. package/dist/widgets/loader.d.ts.map +1 -0
  26. package/dist/widgets/loader.js +73 -0
  27. package/dist/widgets/loader.js.map +1 -0
  28. package/dist/widgets/renderer/LazyWidget.d.ts +8 -0
  29. package/dist/widgets/renderer/LazyWidget.d.ts.map +1 -0
  30. package/dist/widgets/renderer/LazyWidget.js +31 -0
  31. package/dist/widgets/renderer/LazyWidget.js.map +1 -0
  32. package/dist/widgets/renderer/WidgetErrorBoundary.d.ts +17 -0
  33. package/dist/widgets/renderer/WidgetErrorBoundary.d.ts.map +1 -0
  34. package/dist/widgets/renderer/WidgetErrorBoundary.js +18 -0
  35. package/dist/widgets/renderer/WidgetErrorBoundary.js.map +1 -0
  36. package/dist/widgets/renderer/WidgetRenderer.d.ts.map +1 -1
  37. package/dist/widgets/renderer/WidgetRenderer.js +8 -6
  38. package/dist/widgets/renderer/WidgetRenderer.js.map +1 -1
  39. package/package.json +7 -4
  40. package/.claude/skills/add-widget/SKILL.md +0 -101
  41. package/.turbo/turbo-build.log +0 -29
  42. package/CHANGELOG.md +0 -25
  43. package/CLAUDE.md +0 -236
  44. package/components.json +0 -25
  45. package/dist/components/ui/chart.d.ts +0 -45
  46. package/dist/components/ui/chart.d.ts.map +0 -1
  47. package/dist/components/ui/chart.js +0 -119
  48. package/dist/components/ui/chart.js.map +0 -1
  49. package/dist/shell/assets/index--35CAvcP.js +0 -8715
  50. package/dist/shell/assets/index-COLmoPYo.css +0 -1
  51. package/index.html +0 -12
  52. package/src/App.tsx +0 -44
  53. package/src/__tests__/setup.ts +0 -1
  54. package/src/api/auth.ts +0 -41
  55. package/src/api/boot.ts +0 -10
  56. package/src/api/client.ts +0 -26
  57. package/src/api/paths.ts +0 -3
  58. package/src/api/token.ts +0 -13
  59. package/src/auth/LoginForm.tsx +0 -67
  60. package/src/auth/SessionExpired.tsx +0 -24
  61. package/src/auth/SetupForm.tsx +0 -76
  62. package/src/boot/BootGate.tsx +0 -35
  63. package/src/boot/BootProvider.tsx +0 -28
  64. package/src/boot/types.ts +0 -9
  65. package/src/boot/useBoot.ts +0 -111
  66. package/src/components/Icon.tsx +0 -17
  67. package/src/components/ui/accordion.tsx +0 -82
  68. package/src/components/ui/alert-dialog.tsx +0 -180
  69. package/src/components/ui/alert.tsx +0 -76
  70. package/src/components/ui/aspect-ratio.tsx +0 -9
  71. package/src/components/ui/avatar.tsx +0 -94
  72. package/src/components/ui/badge.tsx +0 -45
  73. package/src/components/ui/breadcrumb.tsx +0 -104
  74. package/src/components/ui/button-group.tsx +0 -78
  75. package/src/components/ui/button.tsx +0 -65
  76. package/src/components/ui/calendar.tsx +0 -187
  77. package/src/components/ui/card.tsx +0 -85
  78. package/src/components/ui/carousel.tsx +0 -229
  79. package/src/components/ui/chart.tsx +0 -339
  80. package/src/components/ui/checkbox.tsx +0 -27
  81. package/src/components/ui/collapsible.tsx +0 -21
  82. package/src/components/ui/combobox.tsx +0 -275
  83. package/src/components/ui/command.tsx +0 -178
  84. package/src/components/ui/context-menu.tsx +0 -242
  85. package/src/components/ui/dialog.tsx +0 -146
  86. package/src/components/ui/direction.tsx +0 -20
  87. package/src/components/ui/drawer.tsx +0 -118
  88. package/src/components/ui/dropdown-menu.tsx +0 -247
  89. package/src/components/ui/empty.tsx +0 -94
  90. package/src/components/ui/field.tsx +0 -224
  91. package/src/components/ui/hover-card.tsx +0 -36
  92. package/src/components/ui/input-group.tsx +0 -142
  93. package/src/components/ui/input-otp.tsx +0 -86
  94. package/src/components/ui/input.tsx +0 -19
  95. package/src/components/ui/item.tsx +0 -182
  96. package/src/components/ui/kbd.tsx +0 -26
  97. package/src/components/ui/label.tsx +0 -19
  98. package/src/components/ui/menubar.tsx +0 -260
  99. package/src/components/ui/native-select.tsx +0 -55
  100. package/src/components/ui/navigation-menu.tsx +0 -160
  101. package/src/components/ui/pagination.tsx +0 -112
  102. package/src/components/ui/popover.tsx +0 -74
  103. package/src/components/ui/progress.tsx +0 -31
  104. package/src/components/ui/radio-group.tsx +0 -42
  105. package/src/components/ui/resizable.tsx +0 -42
  106. package/src/components/ui/scroll-area.tsx +0 -53
  107. package/src/components/ui/select.tsx +0 -185
  108. package/src/components/ui/separator.tsx +0 -26
  109. package/src/components/ui/sheet.tsx +0 -128
  110. package/src/components/ui/sidebar.tsx +0 -669
  111. package/src/components/ui/skeleton.tsx +0 -13
  112. package/src/components/ui/slider.tsx +0 -54
  113. package/src/components/ui/sonner.tsx +0 -43
  114. package/src/components/ui/spinner.tsx +0 -16
  115. package/src/components/ui/switch.tsx +0 -33
  116. package/src/components/ui/table.tsx +0 -87
  117. package/src/components/ui/tabs.tsx +0 -80
  118. package/src/components/ui/textarea.tsx +0 -18
  119. package/src/components/ui/toggle-group.tsx +0 -86
  120. package/src/components/ui/toggle.tsx +0 -44
  121. package/src/components/ui/tooltip.tsx +0 -53
  122. package/src/context/MetaContext.tsx +0 -22
  123. package/src/context/ModuleContext.tsx +0 -62
  124. package/src/context/PermissionsContext.tsx +0 -39
  125. package/src/context/ShellProviders.tsx +0 -33
  126. package/src/context/UserContext.tsx +0 -16
  127. package/src/data/QueryProvider.tsx +0 -7
  128. package/src/data/queryClient.ts +0 -18
  129. package/src/data/useModelMeta.ts +0 -17
  130. package/src/data/useMutation.ts +0 -60
  131. package/src/data/useRecord.ts +0 -29
  132. package/src/data/useSource.ts +0 -112
  133. package/src/hooks/use-mobile.ts +0 -19
  134. package/src/index.css +0 -260
  135. package/src/index.ts +0 -16
  136. package/src/lib/utils.ts +0 -6
  137. package/src/main.tsx +0 -17
  138. package/src/router/NotFound.tsx +0 -8
  139. package/src/router/RouterProvider.tsx +0 -7
  140. package/src/router/buildRouteTree.tsx +0 -63
  141. package/src/router/createShellRouter.ts +0 -9
  142. package/src/router/hooks.ts +0 -43
  143. package/src/shell/CommandPalette.tsx +0 -76
  144. package/src/shell/ConfirmDialog.tsx +0 -34
  145. package/src/shell/ConfirmProvider.tsx +0 -56
  146. package/src/shell/DrawerContext.tsx +0 -44
  147. package/src/shell/HeaderActions.tsx +0 -31
  148. package/src/shell/ModuleSelectorPage.tsx +0 -149
  149. package/src/shell/PageOutlet.tsx +0 -21
  150. package/src/shell/ShellContext.tsx +0 -45
  151. package/src/shell/ShellDevTools.tsx +0 -153
  152. package/src/shell/ShellLayout.tsx +0 -231
  153. package/src/shell/Toast.tsx +0 -58
  154. package/src/shell/ToastProvider.tsx +0 -60
  155. package/src/shell/app-sidebar/AppSidebar.tsx +0 -44
  156. package/src/shell/app-sidebar/ModuleSwitcher.tsx +0 -87
  157. package/src/shell/app-sidebar/NavMain.tsx +0 -64
  158. package/src/shell/app-sidebar/NavUser.tsx +0 -97
  159. package/src/shell/app-sidebar/SearchMenu.tsx +0 -22
  160. package/src/shell/app-sidebar/index.ts +0 -8
  161. package/src/shell/app-sidebar/types.ts +0 -38
  162. package/src/shell/types.ts +0 -6
  163. package/src/shell/useBreadcrumbs.ts +0 -42
  164. package/src/studio/bridge.ts +0 -125
  165. package/src/studio/index.ts +0 -3
  166. package/src/studio/overlay.ts +0 -47
  167. package/src/studio/types.ts +0 -32
  168. package/src/studio/walker.ts +0 -48
  169. package/src/vite-env.d.ts +0 -1
  170. package/src/widgets/__tests__/action-edge-cases.test.ts +0 -281
  171. package/src/widgets/__tests__/action.test.ts +0 -236
  172. package/src/widgets/__tests__/attachment-widget.test.tsx +0 -85
  173. package/src/widgets/__tests__/attachments-widget.test.tsx +0 -109
  174. package/src/widgets/__tests__/binding.test.ts +0 -76
  175. package/src/widgets/__tests__/button-widget.test.tsx +0 -145
  176. package/src/widgets/__tests__/checkbox-widget.test.tsx +0 -158
  177. package/src/widgets/__tests__/code-widget.test.tsx +0 -64
  178. package/src/widgets/__tests__/computed-widget.test.tsx +0 -62
  179. package/src/widgets/__tests__/condition-edge-cases.test.ts +0 -120
  180. package/src/widgets/__tests__/condition.test.ts +0 -221
  181. package/src/widgets/__tests__/context.test.ts +0 -99
  182. package/src/widgets/__tests__/data-widget.test.tsx +0 -204
  183. package/src/widgets/__tests__/datepicker-widget.test.tsx +0 -66
  184. package/src/widgets/__tests__/datetime-widget.test.tsx +0 -67
  185. package/src/widgets/__tests__/drawer-widget.test.tsx +0 -149
  186. package/src/widgets/__tests__/dynamic-link-widget.test.tsx +0 -52
  187. package/src/widgets/__tests__/edge-cases.test.ts +0 -232
  188. package/src/widgets/__tests__/evaluator.test.ts +0 -107
  189. package/src/widgets/__tests__/functions.test.ts +0 -147
  190. package/src/widgets/__tests__/grid-widget.test.tsx +0 -137
  191. package/src/widgets/__tests__/hooks.test.tsx +0 -249
  192. package/src/widgets/__tests__/icon-widget.test.tsx +0 -129
  193. package/src/widgets/__tests__/input-widget.test.tsx +0 -264
  194. package/src/widgets/__tests__/integration.test.ts +0 -116
  195. package/src/widgets/__tests__/json-widget.test.tsx +0 -70
  196. package/src/widgets/__tests__/link-widget.test.tsx +0 -92
  197. package/src/widgets/__tests__/many-to-many-widget.test.tsx +0 -93
  198. package/src/widgets/__tests__/modal-widget.test.tsx +0 -148
  199. package/src/widgets/__tests__/money-widget.test.tsx +0 -97
  200. package/src/widgets/__tests__/parser.test.ts +0 -171
  201. package/src/widgets/__tests__/reactive-variables.test.ts +0 -383
  202. package/src/widgets/__tests__/renderer.test.tsx +0 -300
  203. package/src/widgets/__tests__/repeat-widget.test.tsx +0 -229
  204. package/src/widgets/__tests__/select-widget.test.tsx +0 -231
  205. package/src/widgets/__tests__/sequence-widget.test.tsx +0 -58
  206. package/src/widgets/__tests__/shell-integration.test.tsx +0 -1343
  207. package/src/widgets/__tests__/split-widget.test.tsx +0 -133
  208. package/src/widgets/__tests__/state-edge-cases.test.ts +0 -118
  209. package/src/widgets/__tests__/state.test.ts +0 -106
  210. package/src/widgets/__tests__/table-data-binding.test.tsx +0 -482
  211. package/src/widgets/__tests__/table-filter-popover.test.tsx +0 -486
  212. package/src/widgets/__tests__/table-search.test.tsx +0 -305
  213. package/src/widgets/__tests__/table-widget.test.tsx +0 -509
  214. package/src/widgets/__tests__/textarea-widget.test.tsx +0 -105
  215. package/src/widgets/__tests__/tracker-validator-edge-cases.test.ts +0 -242
  216. package/src/widgets/__tests__/tracker.test.ts +0 -133
  217. package/src/widgets/__tests__/tree-widget.test.tsx +0 -97
  218. package/src/widgets/__tests__/use-model-source.test.ts +0 -67
  219. package/src/widgets/__tests__/validator.test.ts +0 -208
  220. package/src/widgets/action/dispatcher.ts +0 -334
  221. package/src/widgets/action/index.ts +0 -2
  222. package/src/widgets/binding/index.ts +0 -2
  223. package/src/widgets/binding/resolver.ts +0 -61
  224. package/src/widgets/components/AttachmentWidget.tsx +0 -111
  225. package/src/widgets/components/AttachmentsWidget.tsx +0 -121
  226. package/src/widgets/components/BadgeWidget.tsx +0 -35
  227. package/src/widgets/components/ButtonWidget.tsx +0 -43
  228. package/src/widgets/components/CardWidget.tsx +0 -68
  229. package/src/widgets/components/CheckboxWidget.tsx +0 -39
  230. package/src/widgets/components/CodeWidget.tsx +0 -44
  231. package/src/widgets/components/ColumnWidget.tsx +0 -22
  232. package/src/widgets/components/ComputedWidget.tsx +0 -49
  233. package/src/widgets/components/DataWidget.tsx +0 -189
  234. package/src/widgets/components/DatePickerWidget.tsx +0 -73
  235. package/src/widgets/components/DatetimeWidget.tsx +0 -160
  236. package/src/widgets/components/DividerWidget.tsx +0 -37
  237. package/src/widgets/components/DrawerWidget.tsx +0 -52
  238. package/src/widgets/components/DynamicLinkWidget.tsx +0 -130
  239. package/src/widgets/components/GridWidget.tsx +0 -134
  240. package/src/widgets/components/GroupWidget.tsx +0 -111
  241. package/src/widgets/components/IconWidget.tsx +0 -29
  242. package/src/widgets/components/ImageWidget.tsx +0 -28
  243. package/src/widgets/components/InputWidget.tsx +0 -70
  244. package/src/widgets/components/JsonWidget.tsx +0 -78
  245. package/src/widgets/components/LinkWidget.tsx +0 -99
  246. package/src/widgets/components/ManyToManyWidget.tsx +0 -125
  247. package/src/widgets/components/ModalWidget.tsx +0 -52
  248. package/src/widgets/components/MoneyWidget.tsx +0 -80
  249. package/src/widgets/components/RepeatWidget.tsx +0 -66
  250. package/src/widgets/components/ScrollAreaWidget.tsx +0 -40
  251. package/src/widgets/components/SectionWidget.tsx +0 -78
  252. package/src/widgets/components/SelectWidget.tsx +0 -63
  253. package/src/widgets/components/SequenceWidget.tsx +0 -32
  254. package/src/widgets/components/SpacerWidget.tsx +0 -29
  255. package/src/widgets/components/SplitWidget.tsx +0 -60
  256. package/src/widgets/components/StackWidget.tsx +0 -44
  257. package/src/widgets/components/TableWidget.tsx +0 -366
  258. package/src/widgets/components/TextWidget.tsx +0 -44
  259. package/src/widgets/components/TextareaWidget.tsx +0 -49
  260. package/src/widgets/components/TreeWidget.tsx +0 -109
  261. package/src/widgets/components/index.ts +0 -30
  262. package/src/widgets/components/register.ts +0 -93
  263. package/src/widgets/components/table/CellRenderers.tsx +0 -83
  264. package/src/widgets/components/table/TablePagination.tsx +0 -45
  265. package/src/widgets/components/table/TableToolbar.tsx +0 -285
  266. package/src/widgets/components/table/filter-operators.ts +0 -134
  267. package/src/widgets/components/table/index.ts +0 -11
  268. package/src/widgets/condition/evaluator.ts +0 -57
  269. package/src/widgets/condition/index.ts +0 -1
  270. package/src/widgets/context/builder.ts +0 -99
  271. package/src/widgets/context/index.ts +0 -8
  272. package/src/widgets/context/types.ts +0 -37
  273. package/src/widgets/data/index.ts +0 -5
  274. package/src/widgets/data/useModelQuery.ts +0 -116
  275. package/src/widgets/data/useModelRecord.ts +0 -37
  276. package/src/widgets/expression/evaluator.ts +0 -100
  277. package/src/widgets/expression/functions.ts +0 -131
  278. package/src/widgets/expression/index.ts +0 -13
  279. package/src/widgets/expression/parser.ts +0 -229
  280. package/src/widgets/expression/types.ts +0 -45
  281. package/src/widgets/form/FormContext.ts +0 -29
  282. package/src/widgets/form/FormProvider.tsx +0 -84
  283. package/src/widgets/form/FormWidget.tsx +0 -42
  284. package/src/widgets/form/index.ts +0 -4
  285. package/src/widgets/form/useFormState.ts +0 -127
  286. package/src/widgets/form/useFormSubmit.ts +0 -90
  287. package/src/widgets/form/useFormValidation.ts +0 -62
  288. package/src/widgets/hooks/index.ts +0 -8
  289. package/src/widgets/hooks/useAction.ts +0 -83
  290. package/src/widgets/hooks/useBind.ts +0 -34
  291. package/src/widgets/hooks/useCondition.ts +0 -21
  292. package/src/widgets/hooks/useDataQuery.ts +0 -48
  293. package/src/widgets/hooks/useExpression.ts +0 -14
  294. package/src/widgets/hooks/usePageState.ts +0 -21
  295. package/src/widgets/hooks/useSurfaceContext.ts +0 -11
  296. package/src/widgets/hooks/useWidgetContext.ts +0 -14
  297. package/src/widgets/index.ts +0 -80
  298. package/src/widgets/lib/layout-props.ts +0 -135
  299. package/src/widgets/reactivity/index.ts +0 -11
  300. package/src/widgets/reactivity/tracker.ts +0 -139
  301. package/src/widgets/reactivity/variables.ts +0 -213
  302. package/src/widgets/registry.ts +0 -41
  303. package/src/widgets/renderer/SlotRenderer.tsx +0 -47
  304. package/src/widgets/renderer/WidgetRenderer.tsx +0 -191
  305. package/src/widgets/renderer/index.ts +0 -4
  306. package/src/widgets/shell/WidgetSlotRenderer.tsx +0 -73
  307. package/src/widgets/shell/index.ts +0 -4
  308. package/src/widgets/shell/useActionHandlers.ts +0 -170
  309. package/src/widgets/state/index.ts +0 -2
  310. package/src/widgets/state/store.ts +0 -96
  311. package/src/widgets/types.ts +0 -28
  312. package/src/widgets/validation/index.ts +0 -2
  313. package/src/widgets/validation/validator.ts +0 -140
  314. package/tsconfig.json +0 -27
  315. package/tsconfig.tsbuildinfo +0 -1
  316. package/vite.config.ts +0 -21
  317. package/vitest.config.ts +0 -16
@@ -1,669 +0,0 @@
1
- import * as React from 'react';
2
- import { cva, type VariantProps } from 'class-variance-authority';
3
- import { Slot } from 'radix-ui';
4
-
5
- import { useIsMobile } from '@/hooks/use-mobile';
6
- import { cn } from '@/lib/utils';
7
- import { Button } from '@/components/ui/button';
8
- import { Input } from '@/components/ui/input';
9
- import { Separator } from '@/components/ui/separator';
10
- import {
11
- Sheet,
12
- SheetContent,
13
- SheetDescription,
14
- SheetHeader,
15
- SheetTitle,
16
- } from '@/components/ui/sheet';
17
- import { Skeleton } from '@/components/ui/skeleton';
18
- import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip';
19
- import { PanelLeftIcon } from 'lucide-react';
20
-
21
- const SIDEBAR_COOKIE_NAME = 'sidebar_state';
22
- const SIDEBAR_COOKIE_MAX_AGE = 60 * 60 * 24 * 7;
23
- const SIDEBAR_WIDTH = '16rem';
24
- const SIDEBAR_WIDTH_MOBILE = '18rem';
25
- const SIDEBAR_WIDTH_ICON = '3rem';
26
- const SIDEBAR_KEYBOARD_SHORTCUT = 'b';
27
-
28
- type SidebarContextProps = {
29
- state: 'expanded' | 'collapsed';
30
- open: boolean;
31
- setOpen: (open: boolean) => void;
32
- openMobile: boolean;
33
- setOpenMobile: (open: boolean) => void;
34
- isMobile: boolean;
35
- toggleSidebar: () => void;
36
- };
37
-
38
- const SidebarContext = React.createContext<SidebarContextProps | null>(null);
39
-
40
- function useSidebar() {
41
- const context = React.useContext(SidebarContext);
42
- if (!context) {
43
- throw new Error('useSidebar must be used within a SidebarProvider.');
44
- }
45
-
46
- return context;
47
- }
48
-
49
- function SidebarProvider({
50
- defaultOpen = true,
51
- open: openProp,
52
- onOpenChange: setOpenProp,
53
- className,
54
- style,
55
- children,
56
- ...props
57
- }: React.ComponentProps<'div'> & {
58
- defaultOpen?: boolean;
59
- open?: boolean;
60
- onOpenChange?: (open: boolean) => void;
61
- }) {
62
- const isMobile = useIsMobile();
63
- const [openMobile, setOpenMobile] = React.useState(false);
64
-
65
- // This is the internal state of the sidebar.
66
- // We use openProp and setOpenProp for control from outside the component.
67
- const [_open, _setOpen] = React.useState(defaultOpen);
68
- const open = openProp ?? _open;
69
- const setOpen = React.useCallback(
70
- (value: boolean | ((value: boolean) => boolean)) => {
71
- const openState = typeof value === 'function' ? value(open) : value;
72
- if (setOpenProp) {
73
- setOpenProp(openState);
74
- } else {
75
- _setOpen(openState);
76
- }
77
-
78
- // This sets the cookie to keep the sidebar state.
79
- document.cookie = `${SIDEBAR_COOKIE_NAME}=${openState}; path=/; max-age=${SIDEBAR_COOKIE_MAX_AGE}`;
80
- },
81
- [setOpenProp, open],
82
- );
83
-
84
- // Helper to toggle the sidebar.
85
- const toggleSidebar = React.useCallback(() => {
86
- return isMobile ? setOpenMobile((open) => !open) : setOpen((open) => !open);
87
- }, [isMobile, setOpen, setOpenMobile]);
88
-
89
- // Adds a keyboard shortcut to toggle the sidebar.
90
- React.useEffect(() => {
91
- const handleKeyDown = (event: KeyboardEvent) => {
92
- if (event.key === SIDEBAR_KEYBOARD_SHORTCUT && (event.metaKey || event.ctrlKey)) {
93
- event.preventDefault();
94
- toggleSidebar();
95
- }
96
- };
97
-
98
- window.addEventListener('keydown', handleKeyDown);
99
- return () => window.removeEventListener('keydown', handleKeyDown);
100
- }, [toggleSidebar]);
101
-
102
- // We add a state so that we can do data-state="expanded" or "collapsed".
103
- // This makes it easier to style the sidebar with Tailwind classes.
104
- const state = open ? 'expanded' : 'collapsed';
105
-
106
- const contextValue = React.useMemo<SidebarContextProps>(
107
- () => ({
108
- state,
109
- open,
110
- setOpen,
111
- isMobile,
112
- openMobile,
113
- setOpenMobile,
114
- toggleSidebar,
115
- }),
116
- [state, open, setOpen, isMobile, openMobile, setOpenMobile, toggleSidebar],
117
- );
118
-
119
- return (
120
- <SidebarContext.Provider value={contextValue}>
121
- <div
122
- data-slot="sidebar-wrapper"
123
- style={
124
- {
125
- '--sidebar-width': SIDEBAR_WIDTH,
126
- '--sidebar-width-icon': SIDEBAR_WIDTH_ICON,
127
- ...style,
128
- } as React.CSSProperties
129
- }
130
- className={cn(
131
- 'group/sidebar-wrapper flex min-h-svh w-full has-data-[variant=inset]:bg-sidebar',
132
- className,
133
- )}
134
- {...props}
135
- >
136
- {children}
137
- </div>
138
- </SidebarContext.Provider>
139
- );
140
- }
141
-
142
- function Sidebar({
143
- side = 'left',
144
- variant = 'sidebar',
145
- collapsible = 'offcanvas',
146
- className,
147
- children,
148
- dir,
149
- ...props
150
- }: React.ComponentProps<'div'> & {
151
- side?: 'left' | 'right';
152
- variant?: 'sidebar' | 'floating' | 'inset';
153
- collapsible?: 'offcanvas' | 'icon' | 'none';
154
- }) {
155
- const { isMobile, state, openMobile, setOpenMobile } = useSidebar();
156
-
157
- if (collapsible === 'none') {
158
- return (
159
- <div
160
- data-slot="sidebar"
161
- className={cn(
162
- 'flex h-full w-(--sidebar-width) flex-col bg-sidebar text-sidebar-foreground',
163
- className,
164
- )}
165
- {...props}
166
- >
167
- {children}
168
- </div>
169
- );
170
- }
171
-
172
- if (isMobile) {
173
- return (
174
- <Sheet open={openMobile} onOpenChange={setOpenMobile} {...props}>
175
- <SheetContent
176
- dir={dir}
177
- data-sidebar="sidebar"
178
- data-slot="sidebar"
179
- data-mobile="true"
180
- className="w-(--sidebar-width) bg-sidebar p-0 text-sidebar-foreground [&>button]:hidden"
181
- style={
182
- {
183
- '--sidebar-width': SIDEBAR_WIDTH_MOBILE,
184
- } as React.CSSProperties
185
- }
186
- side={side}
187
- >
188
- <SheetHeader className="sr-only">
189
- <SheetTitle>Sidebar</SheetTitle>
190
- <SheetDescription>Displays the mobile sidebar.</SheetDescription>
191
- </SheetHeader>
192
- <div className="flex h-full w-full flex-col">{children}</div>
193
- </SheetContent>
194
- </Sheet>
195
- );
196
- }
197
-
198
- return (
199
- <div
200
- className="group peer hidden text-sidebar-foreground md:block"
201
- data-state={state}
202
- data-collapsible={state === 'collapsed' ? collapsible : ''}
203
- data-variant={variant}
204
- data-side={side}
205
- data-slot="sidebar"
206
- >
207
- {/* This is what handles the sidebar gap on desktop */}
208
- <div
209
- data-slot="sidebar-gap"
210
- className={cn(
211
- 'relative w-(--sidebar-width) bg-transparent transition-[width] duration-200 ease-linear',
212
- 'group-data-[collapsible=offcanvas]:w-0',
213
- 'group-data-[side=right]:rotate-180',
214
- variant === 'floating' || variant === 'inset'
215
- ? 'group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4)))]'
216
- : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon)',
217
- )}
218
- />
219
- <div
220
- data-slot="sidebar-container"
221
- data-side={side}
222
- className={cn(
223
- 'fixed inset-y-0 z-10 hidden h-svh w-(--sidebar-width) transition-[left,right,width] duration-200 ease-linear data-[side=left]:left-0 data-[side=left]:group-data-[collapsible=offcanvas]:left-[calc(var(--sidebar-width)*-1)] data-[side=right]:right-0 data-[side=right]:group-data-[collapsible=offcanvas]:right-[calc(var(--sidebar-width)*-1)] md:flex',
224
- // Adjust the padding for floating and inset variants.
225
- variant === 'floating' || variant === 'inset'
226
- ? 'p-2 group-data-[collapsible=icon]:w-[calc(var(--sidebar-width-icon)+(--spacing(4))+2px)]'
227
- : 'group-data-[collapsible=icon]:w-(--sidebar-width-icon) group-data-[side=left]:border-r group-data-[side=right]:border-l',
228
- className,
229
- )}
230
- {...props}
231
- >
232
- <div
233
- data-sidebar="sidebar"
234
- data-slot="sidebar-inner"
235
- className="flex size-full flex-col bg-sidebar group-data-[variant=floating]:rounded-none group-data-[variant=floating]:shadow-sm group-data-[variant=floating]:ring-1 group-data-[variant=floating]:ring-sidebar-border"
236
- >
237
- {children}
238
- </div>
239
- </div>
240
- </div>
241
- );
242
- }
243
-
244
- function SidebarTrigger({ className, onClick, ...props }: React.ComponentProps<typeof Button>) {
245
- const { toggleSidebar } = useSidebar();
246
-
247
- return (
248
- <Button
249
- data-sidebar="trigger"
250
- data-slot="sidebar-trigger"
251
- variant="ghost"
252
- size="icon-sm"
253
- className={cn(className)}
254
- onClick={(event) => {
255
- onClick?.(event);
256
- toggleSidebar();
257
- }}
258
- {...props}
259
- >
260
- <PanelLeftIcon />
261
- <span className="sr-only">Toggle Sidebar</span>
262
- </Button>
263
- );
264
- }
265
-
266
- function SidebarRail({ className, ...props }: React.ComponentProps<'button'>) {
267
- const { toggleSidebar } = useSidebar();
268
-
269
- return (
270
- <button
271
- data-sidebar="rail"
272
- data-slot="sidebar-rail"
273
- aria-label="Toggle Sidebar"
274
- tabIndex={-1}
275
- onClick={toggleSidebar}
276
- title="Toggle Sidebar"
277
- className={cn(
278
- 'absolute inset-y-0 z-20 hidden w-4 transition-all ease-linear group-data-[side=left]:-right-4 group-data-[side=right]:left-0 after:absolute after:inset-y-0 after:start-1/2 after:w-[2px] hover:after:bg-sidebar-border sm:flex ltr:-translate-x-1/2 rtl:-translate-x-1/2',
279
- 'in-data-[side=left]:cursor-w-resize in-data-[side=right]:cursor-e-resize',
280
- '[[data-side=left][data-state=collapsed]_&]:cursor-e-resize [[data-side=right][data-state=collapsed]_&]:cursor-w-resize',
281
- 'group-data-[collapsible=offcanvas]:translate-x-0 group-data-[collapsible=offcanvas]:after:left-full hover:group-data-[collapsible=offcanvas]:bg-sidebar',
282
- '[[data-side=left][data-collapsible=offcanvas]_&]:-right-2',
283
- '[[data-side=right][data-collapsible=offcanvas]_&]:-left-2',
284
- className,
285
- )}
286
- {...props}
287
- />
288
- );
289
- }
290
-
291
- function SidebarInset({ className, ...props }: React.ComponentProps<'main'>) {
292
- return (
293
- <main
294
- data-slot="sidebar-inset"
295
- className={cn(
296
- '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-none md:peer-data-[variant=inset]:shadow-sm md:peer-data-[variant=inset]:peer-data-[state=collapsed]:ml-2',
297
- className,
298
- )}
299
- {...props}
300
- />
301
- );
302
- }
303
-
304
- function SidebarInput({ className, ...props }: React.ComponentProps<typeof Input>) {
305
- return (
306
- <Input
307
- data-slot="sidebar-input"
308
- data-sidebar="input"
309
- className={cn('h-8 w-full bg-background shadow-none', className)}
310
- {...props}
311
- />
312
- );
313
- }
314
-
315
- function SidebarHeader({ className, ...props }: React.ComponentProps<'div'>) {
316
- return (
317
- <div
318
- data-slot="sidebar-header"
319
- data-sidebar="header"
320
- className={cn('flex flex-col gap-2 p-2', className)}
321
- {...props}
322
- />
323
- );
324
- }
325
-
326
- function SidebarFooter({ className, ...props }: React.ComponentProps<'div'>) {
327
- return (
328
- <div
329
- data-slot="sidebar-footer"
330
- data-sidebar="footer"
331
- className={cn('flex flex-col gap-2 p-2', className)}
332
- {...props}
333
- />
334
- );
335
- }
336
-
337
- function SidebarSeparator({ className, ...props }: React.ComponentProps<typeof Separator>) {
338
- return (
339
- <Separator
340
- data-slot="sidebar-separator"
341
- data-sidebar="separator"
342
- className={cn('mx-2 w-auto bg-sidebar-border', className)}
343
- {...props}
344
- />
345
- );
346
- }
347
-
348
- function SidebarContent({ className, ...props }: React.ComponentProps<'div'>) {
349
- return (
350
- <div
351
- data-slot="sidebar-content"
352
- data-sidebar="content"
353
- className={cn(
354
- 'no-scrollbar flex min-h-0 flex-1 flex-col gap-0 overflow-auto group-data-[collapsible=icon]:overflow-hidden',
355
- className,
356
- )}
357
- {...props}
358
- />
359
- );
360
- }
361
-
362
- function SidebarGroup({ className, ...props }: React.ComponentProps<'div'>) {
363
- return (
364
- <div
365
- data-slot="sidebar-group"
366
- data-sidebar="group"
367
- className={cn('relative flex w-full min-w-0 flex-col p-2', className)}
368
- {...props}
369
- />
370
- );
371
- }
372
-
373
- function SidebarGroupLabel({
374
- className,
375
- asChild = false,
376
- ...props
377
- }: React.ComponentProps<'div'> & { asChild?: boolean }) {
378
- const Comp = asChild ? Slot.Root : 'div';
379
-
380
- return (
381
- <Comp
382
- data-slot="sidebar-group-label"
383
- data-sidebar="group-label"
384
- className={cn(
385
- 'flex h-8 shrink-0 items-center rounded-none px-2 text-xs text-sidebar-foreground/70 ring-sidebar-ring outline-hidden transition-[margin,opacity] duration-200 ease-linear group-data-[collapsible=icon]:-mt-8 group-data-[collapsible=icon]:opacity-0 focus-visible:ring-2 [&>svg]:size-4 [&>svg]:shrink-0',
386
- className,
387
- )}
388
- {...props}
389
- />
390
- );
391
- }
392
-
393
- function SidebarGroupAction({
394
- className,
395
- asChild = false,
396
- ...props
397
- }: React.ComponentProps<'button'> & { asChild?: boolean }) {
398
- const Comp = asChild ? Slot.Root : 'button';
399
-
400
- return (
401
- <Comp
402
- data-slot="sidebar-group-action"
403
- data-sidebar="group-action"
404
- className={cn(
405
- 'absolute top-3.5 right-3 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
406
- className,
407
- )}
408
- {...props}
409
- />
410
- );
411
- }
412
-
413
- function SidebarGroupContent({ className, ...props }: React.ComponentProps<'div'>) {
414
- return (
415
- <div
416
- data-slot="sidebar-group-content"
417
- data-sidebar="group-content"
418
- className={cn('w-full text-xs', className)}
419
- {...props}
420
- />
421
- );
422
- }
423
-
424
- function SidebarMenu({ className, ...props }: React.ComponentProps<'ul'>) {
425
- return (
426
- <ul
427
- data-slot="sidebar-menu"
428
- data-sidebar="menu"
429
- className={cn('flex w-full min-w-0 flex-col gap-0', className)}
430
- {...props}
431
- />
432
- );
433
- }
434
-
435
- function SidebarMenuItem({ className, ...props }: React.ComponentProps<'li'>) {
436
- return (
437
- <li
438
- data-slot="sidebar-menu-item"
439
- data-sidebar="menu-item"
440
- className={cn('group/menu-item relative', className)}
441
- {...props}
442
- />
443
- );
444
- }
445
-
446
- const sidebarMenuButtonVariants = cva(
447
- 'peer/menu-button group/menu-button flex w-full items-center gap-2 overflow-hidden rounded-none p-2 text-left text-xs 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-open:hover:bg-sidebar-accent data-open:hover:text-sidebar-accent-foreground data-active:bg-sidebar-accent data-active:font-medium data-active:text-sidebar-accent-foreground [&_svg]:size-4 [&_svg]:shrink-0 [&>span:last-child]:truncate',
448
- {
449
- variants: {
450
- variant: {
451
- default: 'hover:bg-sidebar-accent hover:text-sidebar-accent-foreground',
452
- outline:
453
- '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)]',
454
- },
455
- size: {
456
- default: 'h-8 text-xs',
457
- sm: 'h-7 text-xs',
458
- lg: 'h-12 text-xs group-data-[collapsible=icon]:p-0!',
459
- },
460
- },
461
- defaultVariants: {
462
- variant: 'default',
463
- size: 'default',
464
- },
465
- },
466
- );
467
-
468
- function SidebarMenuButton({
469
- asChild = false,
470
- isActive = false,
471
- variant = 'default',
472
- size = 'default',
473
- tooltip,
474
- className,
475
- ...props
476
- }: React.ComponentProps<'button'> & {
477
- asChild?: boolean;
478
- isActive?: boolean;
479
- tooltip?: string | React.ComponentProps<typeof TooltipContent>;
480
- } & VariantProps<typeof sidebarMenuButtonVariants>) {
481
- const Comp = asChild ? Slot.Root : 'button';
482
- const { isMobile, state } = useSidebar();
483
-
484
- const button = (
485
- <Comp
486
- data-slot="sidebar-menu-button"
487
- data-sidebar="menu-button"
488
- data-size={size}
489
- data-active={isActive}
490
- className={cn(sidebarMenuButtonVariants({ variant, size }), className)}
491
- {...props}
492
- />
493
- );
494
-
495
- if (!tooltip) {
496
- return button;
497
- }
498
-
499
- if (typeof tooltip === 'string') {
500
- tooltip = {
501
- children: tooltip,
502
- };
503
- }
504
-
505
- return (
506
- <Tooltip>
507
- <TooltipTrigger asChild>{button}</TooltipTrigger>
508
- <TooltipContent
509
- side="right"
510
- align="center"
511
- hidden={state !== 'collapsed' || isMobile}
512
- {...tooltip}
513
- />
514
- </Tooltip>
515
- );
516
- }
517
-
518
- function SidebarMenuAction({
519
- className,
520
- asChild = false,
521
- showOnHover = false,
522
- ...props
523
- }: React.ComponentProps<'button'> & {
524
- asChild?: boolean;
525
- showOnHover?: boolean;
526
- }) {
527
- const Comp = asChild ? Slot.Root : 'button';
528
-
529
- return (
530
- <Comp
531
- data-slot="sidebar-menu-action"
532
- data-sidebar="menu-action"
533
- className={cn(
534
- 'absolute top-1.5 right-1 flex aspect-square w-5 items-center justify-center rounded-none p-0 text-sidebar-foreground ring-sidebar-ring outline-hidden transition-transform group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 after:absolute after:-inset-2 hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 md:after:hidden [&>svg]:size-4 [&>svg]:shrink-0',
535
- showOnHover &&
536
- 'group-focus-within/menu-item:opacity-100 group-hover/menu-item:opacity-100 peer-data-active/menu-button:text-sidebar-accent-foreground aria-expanded:opacity-100 md:opacity-0',
537
- className,
538
- )}
539
- {...props}
540
- />
541
- );
542
- }
543
-
544
- function SidebarMenuBadge({ className, ...props }: React.ComponentProps<'div'>) {
545
- return (
546
- <div
547
- data-slot="sidebar-menu-badge"
548
- data-sidebar="menu-badge"
549
- className={cn(
550
- 'pointer-events-none absolute right-1 flex h-5 min-w-5 items-center justify-center rounded-none px-1 text-xs font-medium text-sidebar-foreground tabular-nums select-none group-data-[collapsible=icon]:hidden peer-hover/menu-button:text-sidebar-accent-foreground peer-data-[size=default]/menu-button:top-1.5 peer-data-[size=lg]/menu-button:top-2.5 peer-data-[size=sm]/menu-button:top-1 peer-data-active/menu-button:text-sidebar-accent-foreground',
551
- className,
552
- )}
553
- {...props}
554
- />
555
- );
556
- }
557
-
558
- function SidebarMenuSkeleton({
559
- className,
560
- showIcon = false,
561
- ...props
562
- }: React.ComponentProps<'div'> & {
563
- showIcon?: boolean;
564
- }) {
565
- // Random width between 50 to 90%.
566
- const [width] = React.useState(() => {
567
- return `${Math.floor(Math.random() * 40) + 50}%`;
568
- });
569
-
570
- return (
571
- <div
572
- data-slot="sidebar-menu-skeleton"
573
- data-sidebar="menu-skeleton"
574
- className={cn('flex h-8 items-center gap-2 rounded-none px-2', className)}
575
- {...props}
576
- >
577
- {showIcon && <Skeleton className="size-4 rounded-none" data-sidebar="menu-skeleton-icon" />}
578
- <Skeleton
579
- className="h-4 max-w-(--skeleton-width) flex-1"
580
- data-sidebar="menu-skeleton-text"
581
- style={
582
- {
583
- '--skeleton-width': width,
584
- } as React.CSSProperties
585
- }
586
- />
587
- </div>
588
- );
589
- }
590
-
591
- function SidebarMenuSub({ className, ...props }: React.ComponentProps<'ul'>) {
592
- return (
593
- <ul
594
- data-slot="sidebar-menu-sub"
595
- data-sidebar="menu-sub"
596
- className={cn(
597
- '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',
598
- className,
599
- )}
600
- {...props}
601
- />
602
- );
603
- }
604
-
605
- function SidebarMenuSubItem({ className, ...props }: React.ComponentProps<'li'>) {
606
- return (
607
- <li
608
- data-slot="sidebar-menu-sub-item"
609
- data-sidebar="menu-sub-item"
610
- className={cn('group/menu-sub-item relative', className)}
611
- {...props}
612
- />
613
- );
614
- }
615
-
616
- function SidebarMenuSubButton({
617
- asChild = false,
618
- size = 'md',
619
- isActive = false,
620
- className,
621
- ...props
622
- }: React.ComponentProps<'a'> & {
623
- asChild?: boolean;
624
- size?: 'sm' | 'md';
625
- isActive?: boolean;
626
- }) {
627
- const Comp = asChild ? Slot.Root : 'a';
628
-
629
- return (
630
- <Comp
631
- data-slot="sidebar-menu-sub-button"
632
- data-sidebar="menu-sub-button"
633
- data-size={size}
634
- data-active={isActive}
635
- className={cn(
636
- 'flex h-7 min-w-0 -translate-x-px items-center gap-2 overflow-hidden rounded-none px-2 text-sidebar-foreground ring-sidebar-ring outline-hidden group-data-[collapsible=icon]:hidden hover:bg-sidebar-accent hover:text-sidebar-accent-foreground focus-visible:ring-2 active:bg-sidebar-accent active:text-sidebar-accent-foreground disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 data-[size=md]:text-xs data-[size=sm]:text-xs data-active:bg-sidebar-accent data-active:text-sidebar-accent-foreground [&>span:last-child]:truncate [&>svg]:size-4 [&>svg]:shrink-0 [&>svg]:text-sidebar-accent-foreground',
637
- className,
638
- )}
639
- {...props}
640
- />
641
- );
642
- }
643
-
644
- export {
645
- Sidebar,
646
- SidebarContent,
647
- SidebarFooter,
648
- SidebarGroup,
649
- SidebarGroupAction,
650
- SidebarGroupContent,
651
- SidebarGroupLabel,
652
- SidebarHeader,
653
- SidebarInput,
654
- SidebarInset,
655
- SidebarMenu,
656
- SidebarMenuAction,
657
- SidebarMenuBadge,
658
- SidebarMenuButton,
659
- SidebarMenuItem,
660
- SidebarMenuSkeleton,
661
- SidebarMenuSub,
662
- SidebarMenuSubButton,
663
- SidebarMenuSubItem,
664
- SidebarProvider,
665
- SidebarRail,
666
- SidebarSeparator,
667
- SidebarTrigger,
668
- useSidebar,
669
- };
@@ -1,13 +0,0 @@
1
- import { cn } from '@/lib/utils';
2
-
3
- function Skeleton({ className, ...props }: React.ComponentProps<'div'>) {
4
- return (
5
- <div
6
- data-slot="skeleton"
7
- className={cn('animate-pulse rounded-none bg-muted', className)}
8
- {...props}
9
- />
10
- );
11
- }
12
-
13
- export { Skeleton };