@techsio/ui-kit 0.41.1 → 0.42.0

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 (151) hide show
  1. package/README.md +2 -1
  2. package/dist/atoms/numeric-input.js +3 -3
  3. package/dist/atoms/rating.js +3 -3
  4. package/dist/atoms/tooltip.js +3 -3
  5. package/dist/internal/molecules/drawer.context.js +133 -0
  6. package/dist/internal/molecules/drawer.styles.js +107 -0
  7. package/dist/internal/organisms/sidebar.context.js +223 -0
  8. package/dist/internal/organisms/sidebar.focus.js +169 -0
  9. package/dist/internal/organisms/sidebar.styles.js +146 -0
  10. package/dist/molecules/accordion.js +3 -3
  11. package/dist/molecules/carousel.js +3 -3
  12. package/dist/molecules/chart.js +1 -1
  13. package/dist/molecules/dialog.js +3 -3
  14. package/dist/molecules/drawer.js +262 -0
  15. package/dist/molecules/menu.js +5 -5
  16. package/dist/molecules/radio-group.js +3 -3
  17. package/dist/molecules/select.js +4 -4
  18. package/dist/molecules/slider.js +3 -3
  19. package/dist/molecules/switch.js +3 -3
  20. package/dist/molecules/tabs.js +3 -3
  21. package/dist/molecules/toast.js +6 -6
  22. package/dist/molecules/tree-view.js +4 -4
  23. package/dist/organisms/data-table.fields.js +1 -1
  24. package/dist/organisms/data-table.js +7 -7
  25. package/dist/organisms/sidebar.js +448 -0
  26. package/dist/src/atoms/action-icon.d.ts +1 -1
  27. package/dist/src/atoms/button.d.ts +1 -1
  28. package/dist/src/atoms/link-button.d.ts +1 -1
  29. package/dist/src/atoms/numeric-input.d.ts +1 -1
  30. package/dist/src/atoms/status-text.d.ts +1 -1
  31. package/dist/src/internal/molecules/drawer.context.d.ts +53 -0
  32. package/dist/src/internal/molecules/drawer.context.d.ts.map +1 -0
  33. package/dist/src/internal/molecules/drawer.styles.d.ts +115 -0
  34. package/dist/src/internal/molecules/drawer.styles.d.ts.map +1 -0
  35. package/dist/src/internal/organisms/sidebar.context.d.ts +83 -0
  36. package/dist/src/internal/organisms/sidebar.context.d.ts.map +1 -0
  37. package/dist/src/internal/organisms/sidebar.focus.d.ts +16 -0
  38. package/dist/src/internal/organisms/sidebar.focus.d.ts.map +1 -0
  39. package/dist/src/internal/organisms/sidebar.styles.d.ts +149 -0
  40. package/dist/src/internal/organisms/sidebar.styles.d.ts.map +1 -0
  41. package/dist/src/molecules/accordion.d.ts +1 -1
  42. package/dist/src/molecules/breadcrumb.d.ts +2 -2
  43. package/dist/src/molecules/carousel.d.ts +2 -2
  44. package/dist/src/molecules/combobox.d.ts +1 -1
  45. package/dist/src/molecules/drawer.d.ts +112 -0
  46. package/dist/src/molecules/drawer.d.ts.map +1 -0
  47. package/dist/src/molecules/form-input.d.ts +1 -1
  48. package/dist/src/molecules/form-numeric-input.d.ts +1 -1
  49. package/dist/src/molecules/form-textarea.d.ts +1 -1
  50. package/dist/src/molecules/menu.d.ts +1 -1
  51. package/dist/src/molecules/pagination.d.ts +1 -1
  52. package/dist/src/molecules/phone-input.d.ts +3 -3
  53. package/dist/src/molecules/popover.d.ts +1 -1
  54. package/dist/src/molecules/product-card.d.ts +4 -4
  55. package/dist/src/molecules/radio-card.d.ts +2 -2
  56. package/dist/src/molecules/radio-group.d.ts +2 -2
  57. package/dist/src/molecules/search-form.d.ts +5 -5
  58. package/dist/src/molecules/select.d.ts +1 -1
  59. package/dist/src/molecules/steps.d.ts +1 -1
  60. package/dist/src/molecules/switch.d.ts +3 -3
  61. package/dist/src/molecules/tabs.d.ts +1 -1
  62. package/dist/src/molecules/toast.d.ts +6 -6
  63. package/dist/src/molecules/tree-view.d.ts +1 -1
  64. package/dist/src/organisms/data-table.d.ts +8 -8
  65. package/dist/src/organisms/data-table.fields.d.ts +2 -2
  66. package/dist/src/organisms/data-table.helpers.d.ts +1 -1
  67. package/dist/src/organisms/gallery.d.ts +2 -2
  68. package/dist/src/organisms/sidebar.d.ts +93 -0
  69. package/dist/src/organisms/sidebar.d.ts.map +1 -0
  70. package/dist/src/templates/accordion.d.ts +2 -2
  71. package/dist/src/templates/breadcrumb.d.ts +2 -2
  72. package/dist/src/templates/carousel.d.ts +2 -2
  73. package/dist/src/templates/gallery.d.ts +3 -3
  74. package/dist/src/templates/numeric-input.d.ts +2 -2
  75. package/dist/src/templates/popover.d.ts +1 -1
  76. package/dist/src/templates/product-card.d.ts +2 -2
  77. package/dist/src/templates/select.d.ts +1 -1
  78. package/dist/src/templates/tabs.d.ts +1 -1
  79. package/dist/src/theme/theme-provider.d.ts +1 -1
  80. package/dist/src/types/zag.d.ts +1 -0
  81. package/dist/src/types/zag.d.ts.map +1 -1
  82. package/dist/stories/atoms/badge.stories.d.ts +1 -1
  83. package/dist/stories/atoms/button.stories.d.ts +1 -1
  84. package/dist/stories/atoms/checkbox.stories.d.ts +1 -1
  85. package/dist/stories/atoms/icon.stories.d.ts +1 -1
  86. package/dist/stories/atoms/image.stories.d.ts +1 -1
  87. package/dist/stories/atoms/input.stories.d.ts +1 -1
  88. package/dist/stories/atoms/numeric-input.stories.d.ts +1 -1
  89. package/dist/stories/atoms/rating.stories.d.ts +1 -1
  90. package/dist/stories/atoms/skeleton.stories.d.ts +1 -1
  91. package/dist/stories/atoms/status-text.stories.d.ts +1 -1
  92. package/dist/stories/atoms/textarea.stories.d.ts +1 -1
  93. package/dist/stories/atoms/tooltip.stories.d.ts +2 -2
  94. package/dist/stories/changelog/changelog.stories.d.ts.map +1 -1
  95. package/dist/stories/helpers/icon-options.d.ts +1 -1
  96. package/dist/stories/molecules/accordion.stories.d.ts +1 -1
  97. package/dist/stories/molecules/breadcrumb.stories.d.ts +1 -1
  98. package/dist/stories/molecules/carousel.stories.d.ts +1 -1
  99. package/dist/stories/molecules/chart.stories.d.ts +1 -1
  100. package/dist/stories/molecules/color-select.stories.d.ts +1 -1
  101. package/dist/stories/molecules/combobox.stories.d.ts +1 -1
  102. package/dist/stories/molecules/dialog.stories.d.ts +1 -1
  103. package/dist/stories/molecules/drawer.stories.d.ts +158 -0
  104. package/dist/stories/molecules/drawer.stories.d.ts.map +1 -0
  105. package/dist/stories/molecules/form-checkbox.stories.d.ts +1 -1
  106. package/dist/stories/molecules/form-input.stories.d.ts +1 -1
  107. package/dist/stories/molecules/form-numeric-input.stories.d.ts +1 -1
  108. package/dist/stories/molecules/form-textarea.stories.d.ts +1 -1
  109. package/dist/stories/molecules/menu.stories.d.ts +1 -1
  110. package/dist/stories/molecules/pagination.stories.d.ts +1 -1
  111. package/dist/stories/molecules/phone-input.stories.d.ts +1 -1
  112. package/dist/stories/molecules/popover.stories.d.ts +1 -1
  113. package/dist/stories/molecules/product-card.stories.d.ts +1 -1
  114. package/dist/stories/molecules/radio-card.stories.d.ts +1 -1
  115. package/dist/stories/molecules/radio-group.stories.d.ts +1 -1
  116. package/dist/stories/molecules/search-form.stories.d.ts +1 -1
  117. package/dist/stories/molecules/select.stories.d.ts +1 -1
  118. package/dist/stories/molecules/slider.stories.d.ts +1 -1
  119. package/dist/stories/molecules/steps.stories.d.ts +1 -1
  120. package/dist/stories/molecules/switch.stories.d.ts +1 -1
  121. package/dist/stories/molecules/tabs.stories.d.ts +1 -1
  122. package/dist/stories/molecules/tree-view.stories.d.ts +1 -1
  123. package/dist/stories/organisms/data-table.stories.d.ts +1 -1
  124. package/dist/stories/organisms/footer.stories.d.ts +1 -1
  125. package/dist/stories/organisms/gallery.stories.d.ts +2 -2
  126. package/dist/stories/organisms/header.stories.d.ts +1 -1
  127. package/dist/stories/organisms/sidebar.stories.d.ts +66 -0
  128. package/dist/stories/organisms/sidebar.stories.d.ts.map +1 -0
  129. package/dist/stories/organisms/table.stories.d.ts +1 -1
  130. package/dist/stories/templates/accordion.stories.d.ts +1 -1
  131. package/dist/stories/templates/breadcrumb.stories.d.ts +1 -1
  132. package/dist/stories/templates/carousel.stories.d.ts +1 -1
  133. package/dist/stories/templates/gallery.stories.d.ts +1 -1
  134. package/dist/stories/templates/numeric-input.stories.d.ts +1 -1
  135. package/dist/stories/templates/popover.stories.d.ts +1 -1
  136. package/dist/stories/templates/product-card.stories.d.ts +1 -1
  137. package/dist/stories/templates/select.stories.d.ts +1 -1
  138. package/dist/stories/templates/tabs.stories.d.ts +1 -1
  139. package/dist/test/drawer.behavior.spec.d.ts +2 -0
  140. package/dist/test/drawer.behavior.spec.d.ts.map +1 -0
  141. package/dist/test/sidebar.behavior.spec.d.ts +2 -0
  142. package/dist/test/sidebar.behavior.spec.d.ts.map +1 -0
  143. package/dist/test/sidebar.ssr.bun.d.ts +2 -0
  144. package/dist/test/sidebar.ssr.bun.d.ts.map +1 -0
  145. package/dist/theme/theme-provider.js +4 -4
  146. package/dist/theme/theme-toggle.js +1 -1
  147. package/package.json +43 -33
  148. package/src/tokens/components/components.css +2 -0
  149. package/src/tokens/components/molecules/_drawer.css +369 -0
  150. package/src/tokens/components/organisms/_sidebar.css +93 -0
  151. package/src/tokens/styles.d.ts +3 -0
@@ -0,0 +1,448 @@
1
+ "use client";
2
+ import { jsx, jsxs } from "react/jsx-runtime";
3
+ import { useId } from "react";
4
+ import { ActionIcon } from "../atoms/action-icon.js";
5
+ import { Tooltip } from "../atoms/tooltip.js";
6
+ import { SidebarPanelProvider, SidebarProvider, useSidebarContext, useSidebarPanelContext, useSidebarState } from "../internal/organisms/sidebar.context.js";
7
+ import { useSidebarPanelFocusTransfer } from "../internal/organisms/sidebar.focus.js";
8
+ import { sidebarVariants } from "../internal/organisms/sidebar.styles.js";
9
+ import { Drawer } from "../molecules/drawer.js";
10
+ function Sidebar({ children, className, collapsible, defaultExpanded, defaultMobileOpen, dir, expanded, id, mobileOpen, onExpandedChange, onMobileOpenChange, ref, ...props }) {
11
+ const state = useSidebarState({
12
+ collapsible,
13
+ defaultExpanded,
14
+ defaultMobileOpen,
15
+ dir,
16
+ expanded,
17
+ id,
18
+ mobileOpen,
19
+ onExpandedChange,
20
+ onMobileOpenChange
21
+ });
22
+ const { breakpoint, root } = sidebarVariants();
23
+ return /*#__PURE__*/ jsx(SidebarProvider, {
24
+ value: state,
25
+ children: /*#__PURE__*/ jsxs("div", {
26
+ ...props,
27
+ className: root({
28
+ className
29
+ }),
30
+ "data-part": "root",
31
+ "data-scope": "sidebar",
32
+ dir: state.dir,
33
+ id: state.rootId,
34
+ ref: ref,
35
+ children: [
36
+ /*#__PURE__*/ jsx("span", {
37
+ "aria-hidden": "true",
38
+ className: breakpoint(),
39
+ "data-part": "breakpoint",
40
+ "data-scope": "sidebar",
41
+ ref: state.breakpointRef
42
+ }),
43
+ children
44
+ ]
45
+ })
46
+ });
47
+ }
48
+ Sidebar.Root = Sidebar;
49
+ Sidebar.Panel = function({ "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, children, className, onBlurCapture, onFocusCapture, ref, side = "start", tabIndex = -1, ...props }) {
50
+ const context = useSidebarContext();
51
+ const collapsible = context.getCollapsible(side);
52
+ const expanded = "none" === collapsible || context.isExpanded(side);
53
+ const state = expanded ? "expanded" : "collapsed";
54
+ const panelId = context.getPanelId(side);
55
+ const styles = sidebarVariants({
56
+ collapsible,
57
+ expanded
58
+ });
59
+ const drawerTriggerValue = context.drawer[side].triggerValue;
60
+ const focusTransfer = useSidebarPanelFocusTransfer({
61
+ focus: context.focus,
62
+ isDesktop: context.isDesktop,
63
+ panelId,
64
+ rootId: context.rootId,
65
+ side,
66
+ triggerValue: drawerTriggerValue
67
+ });
68
+ if (context.isDesktop) {
69
+ const inaccessible = "offcanvas" === collapsible && !expanded;
70
+ return /*#__PURE__*/ jsx(SidebarPanelProvider, {
71
+ value: {
72
+ collapsible,
73
+ expanded,
74
+ side
75
+ },
76
+ children: /*#__PURE__*/ jsx("aside", {
77
+ ...props,
78
+ "aria-hidden": inaccessible || void 0,
79
+ "aria-label": ariaLabel,
80
+ "aria-labelledby": ariaLabelledBy,
81
+ className: styles.desktopPanel({
82
+ className
83
+ }),
84
+ "data-collapsible": collapsible,
85
+ "data-part": "panel",
86
+ "data-scope": "sidebar",
87
+ "data-side": side,
88
+ "data-state": state,
89
+ id: panelId,
90
+ inert: inaccessible || void 0,
91
+ onBlurCapture: (event)=>{
92
+ focusTransfer.onBlurCapture(event);
93
+ onBlurCapture?.(event);
94
+ },
95
+ onFocusCapture: (event)=>{
96
+ focusTransfer.onFocusCapture(event);
97
+ onFocusCapture?.(event);
98
+ },
99
+ ref: ref,
100
+ tabIndex: tabIndex,
101
+ children: children
102
+ })
103
+ });
104
+ }
105
+ return /*#__PURE__*/ jsx(Drawer.RootProvider, {
106
+ size: "full",
107
+ value: context.drawer[side],
108
+ children: /*#__PURE__*/ jsxs(Drawer.Portal, {
109
+ children: [
110
+ /*#__PURE__*/ jsx(Drawer.Backdrop, {}),
111
+ /*#__PURE__*/ jsx(Drawer.Positioner, {
112
+ children: /*#__PURE__*/ jsx(Drawer.Content, {
113
+ "aria-label": ariaLabel,
114
+ "aria-labelledby": ariaLabelledBy,
115
+ className: styles.mobilePanel(),
116
+ onBlurCapture: focusTransfer.onBlurCapture,
117
+ onFocusCapture: focusTransfer.onFocusCapture,
118
+ children: /*#__PURE__*/ jsx(SidebarPanelProvider, {
119
+ value: {
120
+ collapsible,
121
+ expanded: true,
122
+ side
123
+ },
124
+ children: /*#__PURE__*/ jsx("aside", {
125
+ ...props,
126
+ "aria-label": ariaLabel,
127
+ "aria-labelledby": ariaLabelledBy,
128
+ className: styles.mobileAside({
129
+ className
130
+ }),
131
+ "data-collapsible": collapsible,
132
+ "data-part": "panel",
133
+ "data-scope": "sidebar",
134
+ "data-side": side,
135
+ "data-state": "expanded",
136
+ id: panelId,
137
+ onBlurCapture: onBlurCapture,
138
+ onFocusCapture: onFocusCapture,
139
+ ref: ref,
140
+ tabIndex: tabIndex,
141
+ children: children
142
+ })
143
+ })
144
+ })
145
+ }),
146
+ /*#__PURE__*/ jsx(Drawer.SwipeArea, {})
147
+ ]
148
+ })
149
+ });
150
+ };
151
+ Sidebar.Trigger = function({ "aria-label": ariaLabel, className, icon = "token-icon-sidebar-trigger", onBlurCapture, onClick, onFocusCapture, side = "start", tooltip, value, ...props }) {
152
+ const context = useSidebarContext();
153
+ const generatedValue = useId();
154
+ const drawerApi = context.drawer[side];
155
+ const triggerValue = value ?? generatedValue;
156
+ const mobileTriggerProps = context.isDesktop ? void 0 : drawerApi.getTriggerProps({
157
+ value: triggerValue
158
+ });
159
+ const { trigger } = sidebarVariants();
160
+ const expanded = context.isExpanded(side);
161
+ const desktopStateProps = context.isDesktop ? {
162
+ "aria-controls": context.getPanelId(side),
163
+ "aria-expanded": expanded,
164
+ "data-state": expanded ? "open" : "closed"
165
+ } : void 0;
166
+ if (context.isDesktop && context.isFixed(side)) return null;
167
+ const button = /*#__PURE__*/ jsx(ActionIcon, {
168
+ ...mobileTriggerProps,
169
+ ...props,
170
+ ...desktopStateProps,
171
+ "aria-label": ariaLabel,
172
+ className: trigger({
173
+ className
174
+ }),
175
+ "data-side": side,
176
+ "data-sidebar-trigger": "",
177
+ "data-sidebar-trigger-value": triggerValue,
178
+ icon: icon,
179
+ onBlurCapture: (event)=>{
180
+ context.focus.blur({
181
+ mode: context.isDesktop ? "desktop" : "mobile",
182
+ node: event.currentTarget,
183
+ relatedTarget: event.relatedTarget,
184
+ side
185
+ });
186
+ onBlurCapture?.(event);
187
+ },
188
+ onClick: (event)=>{
189
+ onClick?.(event);
190
+ if (event.defaultPrevented) return;
191
+ if (context.isDesktop) context.toggle(side);
192
+ else mobileTriggerProps?.onClick?.(event);
193
+ },
194
+ onFocusCapture: (event)=>{
195
+ context.focus.capture({
196
+ mode: context.isDesktop ? "desktop" : "mobile",
197
+ node: event.currentTarget,
198
+ side,
199
+ triggerValue
200
+ });
201
+ onFocusCapture?.(event);
202
+ }
203
+ });
204
+ if (null === tooltip) return button;
205
+ return /*#__PURE__*/ jsx(Tooltip, {
206
+ content: tooltip ?? ariaLabel,
207
+ dir: context.dir,
208
+ placement: getTooltipPlacement(side, context.dir),
209
+ children: button
210
+ });
211
+ };
212
+ Sidebar.CloseTrigger = function({ "aria-label": ariaLabel, className, icon = "token-icon-sidebar-close", onClick, size = "md", tone = "neutral", ...props }) {
213
+ const context = useSidebarContext();
214
+ const panel = useSidebarPanelContext();
215
+ if (context.isDesktop) return null;
216
+ const { onClick: onMachineClick, ...machineProps } = context.drawer[panel.side].getCloseTriggerProps();
217
+ const { trigger } = sidebarVariants();
218
+ return /*#__PURE__*/ jsx(ActionIcon, {
219
+ ...machineProps,
220
+ ...props,
221
+ "aria-label": ariaLabel,
222
+ className: trigger({
223
+ className
224
+ }),
225
+ icon: icon,
226
+ onClick: (event)=>{
227
+ onClick?.(event);
228
+ if (!event.defaultPrevented) onMachineClick?.(event);
229
+ },
230
+ size: size,
231
+ tone: tone
232
+ });
233
+ };
234
+ Sidebar.Inset = function({ className, ref, ...props }) {
235
+ const { inset } = sidebarVariants();
236
+ return /*#__PURE__*/ jsx("main", {
237
+ ...props,
238
+ className: inset({
239
+ className
240
+ }),
241
+ "data-part": "inset",
242
+ "data-scope": "sidebar",
243
+ ref: ref
244
+ });
245
+ };
246
+ Sidebar.Header = function({ className, ref, ...props }) {
247
+ const { header } = sidebarVariants();
248
+ return /*#__PURE__*/ jsx("div", {
249
+ ...props,
250
+ className: header({
251
+ className
252
+ }),
253
+ "data-part": "header",
254
+ "data-scope": "sidebar",
255
+ ref: ref
256
+ });
257
+ };
258
+ Sidebar.Content = function({ className, ref, ...props }) {
259
+ const { content } = sidebarVariants();
260
+ return /*#__PURE__*/ jsx("div", {
261
+ ...props,
262
+ className: content({
263
+ className
264
+ }),
265
+ "data-part": "content",
266
+ "data-scope": "sidebar",
267
+ ref: ref
268
+ });
269
+ };
270
+ Sidebar.Footer = function({ className, ref, ...props }) {
271
+ const { footer } = sidebarVariants();
272
+ return /*#__PURE__*/ jsx("div", {
273
+ ...props,
274
+ className: footer({
275
+ className
276
+ }),
277
+ "data-part": "footer",
278
+ "data-scope": "sidebar",
279
+ ref: ref
280
+ });
281
+ };
282
+ Sidebar.Group = function({ className, ref, ...props }) {
283
+ const { group } = sidebarVariants();
284
+ return /*#__PURE__*/ jsx("div", {
285
+ ...props,
286
+ className: group({
287
+ className
288
+ }),
289
+ "data-part": "group",
290
+ "data-scope": "sidebar",
291
+ ref: ref
292
+ });
293
+ };
294
+ Sidebar.GroupLabel = function({ className, ref, ...props }) {
295
+ const { groupLabel } = sidebarVariants();
296
+ return /*#__PURE__*/ jsx("h2", {
297
+ ...props,
298
+ className: groupLabel({
299
+ className
300
+ }),
301
+ "data-part": "group-label",
302
+ "data-scope": "sidebar",
303
+ ref: ref
304
+ });
305
+ };
306
+ Sidebar.GroupContent = function({ className, ref, ...props }) {
307
+ const { groupContent } = sidebarVariants();
308
+ return /*#__PURE__*/ jsx("div", {
309
+ ...props,
310
+ className: groupContent({
311
+ className
312
+ }),
313
+ "data-part": "group-content",
314
+ "data-scope": "sidebar",
315
+ ref: ref
316
+ });
317
+ };
318
+ Sidebar.Menu = function({ className, ref, ...props }) {
319
+ const { menu } = sidebarVariants();
320
+ return /*#__PURE__*/ jsx("ul", {
321
+ ...props,
322
+ className: menu({
323
+ className
324
+ }),
325
+ "data-part": "menu",
326
+ "data-scope": "sidebar",
327
+ ref: ref
328
+ });
329
+ };
330
+ Sidebar.Item = function({ className, ref, ...props }) {
331
+ const { item } = sidebarVariants();
332
+ return /*#__PURE__*/ jsx("li", {
333
+ ...props,
334
+ className: item({
335
+ className
336
+ }),
337
+ "data-part": "item",
338
+ "data-scope": "sidebar",
339
+ ref: ref
340
+ });
341
+ };
342
+ Sidebar.Separator = function({ className, ref, ...props }) {
343
+ const { separator } = sidebarVariants();
344
+ return /*#__PURE__*/ jsx("hr", {
345
+ ...props,
346
+ className: separator({
347
+ className
348
+ }),
349
+ "data-part": "separator",
350
+ "data-scope": "sidebar",
351
+ ref: ref
352
+ });
353
+ };
354
+ Sidebar.Expanded = function({ className, ref, ...props }) {
355
+ const panel = useSidebarPanelContext();
356
+ const { expanded } = sidebarVariants();
357
+ return /*#__PURE__*/ jsx("div", {
358
+ ...props,
359
+ className: expanded({
360
+ className
361
+ }),
362
+ "data-part": "expanded",
363
+ "data-scope": "sidebar",
364
+ hidden: !panel.expanded,
365
+ ref: ref
366
+ });
367
+ };
368
+ Sidebar.Label = function({ className, ref, ...props }) {
369
+ const panel = useSidebarPanelContext();
370
+ const collapsed = "icon" === panel.collapsible && !panel.expanded;
371
+ const { label } = sidebarVariants({
372
+ collapsed
373
+ });
374
+ return /*#__PURE__*/ jsx("span", {
375
+ ...props,
376
+ className: label({
377
+ className
378
+ }),
379
+ "data-part": "label",
380
+ "data-scope": "sidebar",
381
+ ref: ref
382
+ });
383
+ };
384
+ Sidebar.PaneGroup = function({ className, ref, ...props }) {
385
+ const { paneGroup } = sidebarVariants();
386
+ return /*#__PURE__*/ jsx("div", {
387
+ ...props,
388
+ className: paneGroup({
389
+ className
390
+ }),
391
+ "data-part": "pane-group",
392
+ "data-scope": "sidebar",
393
+ ref: ref
394
+ });
395
+ };
396
+ Sidebar.Pane = function({ className, ref, size = "auto", visibility = "always", ...props }) {
397
+ const panel = useSidebarPanelContext();
398
+ const { pane } = sidebarVariants({
399
+ paneSize: size
400
+ });
401
+ return /*#__PURE__*/ jsx("div", {
402
+ ...props,
403
+ className: pane({
404
+ className
405
+ }),
406
+ "data-part": "pane",
407
+ "data-scope": "sidebar",
408
+ "data-size": size,
409
+ "data-visibility": visibility,
410
+ hidden: "expanded" === visibility && !panel.expanded,
411
+ ref: ref
412
+ });
413
+ };
414
+ Sidebar.Rail = function({ "aria-label": ariaLabel, className, onClick, ref, title, ...props }) {
415
+ const context = useSidebarContext();
416
+ const panel = useSidebarPanelContext();
417
+ const { rail } = sidebarVariants();
418
+ if ("none" === panel.collapsible) return null;
419
+ return /*#__PURE__*/ jsx("button", {
420
+ ...props,
421
+ "aria-controls": context.getPanelId(panel.side),
422
+ "aria-expanded": panel.expanded,
423
+ "aria-label": ariaLabel,
424
+ className: rail({
425
+ className
426
+ }),
427
+ "data-part": "rail",
428
+ "data-scope": "sidebar",
429
+ "data-side": panel.side,
430
+ onClick: (event)=>{
431
+ onClick?.(event);
432
+ if (!event.defaultPrevented) context.toggle(panel.side);
433
+ },
434
+ ref: ref,
435
+ title: title ?? ariaLabel,
436
+ type: "button"
437
+ });
438
+ };
439
+ Sidebar.Context = function({ children }) {
440
+ const context = useSidebarContext();
441
+ return children(context);
442
+ };
443
+ function getTooltipPlacement(side, dir) {
444
+ const startIsLeft = "rtl" !== dir;
445
+ const isLeft = "start" === side ? startIsLeft : !startIsLeft;
446
+ return isLeft ? "right" : "left";
447
+ }
448
+ export { Sidebar };
@@ -11,7 +11,7 @@
11
11
  */
12
12
  import type { ButtonHTMLAttributes, Ref } from "react";
13
13
  import type { VariantProps } from "tailwind-variants";
14
- import { type IconType } from "./icon";
14
+ import { type IconType } from "./icon.js";
15
15
  declare const actionIconVariants: import("tailwind-variants").TVReturnType<{
16
16
  size: {
17
17
  sm: string;
@@ -11,7 +11,7 @@
11
11
  */
12
12
  import type { ButtonHTMLAttributes, ReactNode, Ref } from "react";
13
13
  import type { VariantProps } from "tailwind-variants";
14
- import { type IconType } from "./icon";
14
+ import { type IconType } from "./icon.js";
15
15
  export declare const buttonVariants: import("tailwind-variants").TVReturnType<{
16
16
  variant: {
17
17
  primary: string;
@@ -11,7 +11,7 @@
11
11
  */
12
12
  import type { ComponentPropsWithoutRef, ElementType, ReactNode, Ref } from "react";
13
13
  import type { VariantProps } from "tailwind-variants";
14
- import { type IconProps, type IconType } from "./icon";
14
+ import { type IconProps, type IconType } from "./icon.js";
15
15
  declare const linkButton: import("tailwind-variants").TVReturnType<{} | {
16
16
  variant: {
17
17
  primary: import("tailwind-merge").ClassNameValue | {
@@ -11,7 +11,7 @@
11
11
  */
12
12
  import * as numberInput from "@zag-js/number-input";
13
13
  import { type ComponentPropsWithoutRef, type ReactNode, type Ref } from "react";
14
- import type { IconType } from "./icon";
14
+ import type { IconType } from "./icon.js";
15
15
  export type NumericInputProps = Omit<numberInput.Props, "value" | "defaultValue" | "id"> & Omit<ComponentPropsWithoutRef<"div">, "onChange" | "children"> & {
16
16
  size?: "sm" | "md" | "lg";
17
17
  value?: number;
@@ -11,7 +11,7 @@
11
11
  */
12
12
  import type { HTMLAttributes, ReactNode, Ref } from "react";
13
13
  import type { VariantProps } from "tailwind-variants";
14
- import { type IconType } from "./icon";
14
+ import { type IconType } from "./icon.js";
15
15
  declare const statusTextVariants: import("tailwind-variants").TVReturnType<{
16
16
  status: {
17
17
  error: string;
@@ -0,0 +1,53 @@
1
+ import * as drawer from "@zag-js/drawer";
2
+ import * as presence from "@zag-js/presence";
3
+ import { type PropTypes } from "@zag-js/react";
4
+ import { type ReactNode, type Ref, type RefCallback } from "react";
5
+ import { type DrawerSize, drawerVariants } from "./drawer.styles.js";
6
+ export type DrawerApi = drawer.Api<PropTypes>;
7
+ export type DrawerStackApi = drawer.DrawerStackApi<PropTypes>;
8
+ export type UseDrawerProps = Omit<drawer.Props, "id"> & {
9
+ id?: string;
10
+ };
11
+ export type DrawerPresenceProps = Pick<presence.Props, "immediate" | "onEnterComplete" | "onExitComplete"> & {
12
+ lazyMount?: boolean;
13
+ skipAnimationOnMount?: boolean;
14
+ unmountOnExit?: boolean;
15
+ };
16
+ type DrawerPresenceOptions = Pick<DrawerPresenceProps, "immediate" | "lazyMount" | "skipAnimationOnMount" | "unmountOnExit">;
17
+ export type DrawerPresenceState = {
18
+ api: presence.Api;
19
+ ref: RefCallback<HTMLDivElement>;
20
+ skipAnimationOnMount: boolean;
21
+ unmounted: boolean;
22
+ };
23
+ type DrawerContextValue = {
24
+ api: DrawerApi;
25
+ presence: DrawerPresenceState;
26
+ presenceOptions: DrawerPresenceOptions;
27
+ styles: ReturnType<typeof drawerVariants>;
28
+ };
29
+ export declare function useDrawer(props?: UseDrawerProps): DrawerApi;
30
+ export declare function useDrawerContext(): DrawerContextValue;
31
+ export declare function useDrawerStackContext(): DrawerStackApi;
32
+ type UseDrawerPresenceProps = DrawerPresenceProps & {
33
+ present: boolean;
34
+ };
35
+ export declare function useDrawerPresence({ immediate, lazyMount, onEnterComplete, onExitComplete, present, skipAnimationOnMount, unmountOnExit, }: UseDrawerPresenceProps): DrawerPresenceState;
36
+ type DrawerProviderProps = DrawerPresenceProps & {
37
+ api: DrawerApi;
38
+ children?: ReactNode;
39
+ size?: DrawerSize;
40
+ };
41
+ export declare function DrawerProvider({ api, children, immediate, lazyMount, onEnterComplete, onExitComplete, size, skipAnimationOnMount, unmountOnExit, }: DrawerProviderProps): import("react/jsx-runtime").JSX.Element;
42
+ export declare function getDrawerPresenceProps(open: boolean, presenceState: DrawerPresenceState): {
43
+ readonly "data-state": "open" | "closed" | null;
44
+ readonly hidden: boolean;
45
+ };
46
+ type PossibleRef<T> = Ref<T> | undefined;
47
+ export declare function useComposedRefs<T>(firstRef: PossibleRef<T>, secondRef: PossibleRef<T>): RefCallback<T>;
48
+ export type DrawerStackProviderProps = {
49
+ children?: ReactNode;
50
+ };
51
+ export declare function DrawerStackProvider({ children }: DrawerStackProviderProps): import("react/jsx-runtime").JSX.Element;
52
+ export {};
53
+ //# sourceMappingURL=drawer.context.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"drawer.context.d.ts","sourceRoot":"","sources":["../../../../src/internal/molecules/drawer.context.tsx"],"names":[],"mappings":"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"}
@@ -0,0 +1,115 @@
1
+ import type { VariantProps } from "tailwind-variants";
2
+ export declare const drawerVariants: import("tailwind-variants").TVReturnType<{
3
+ size: {
4
+ xs: {
5
+ content: string[];
6
+ };
7
+ sm: {
8
+ content: string[];
9
+ };
10
+ md: {
11
+ content: string[];
12
+ };
13
+ lg: {
14
+ content: string[];
15
+ };
16
+ xl: {
17
+ content: string[];
18
+ };
19
+ full: {
20
+ content: string[];
21
+ };
22
+ };
23
+ }, {
24
+ backdrop: string[];
25
+ positioner: string[];
26
+ content: string[];
27
+ header: string[];
28
+ body: string;
29
+ footer: string[];
30
+ title: string;
31
+ description: string;
32
+ trigger: string;
33
+ closeTrigger: string;
34
+ grabber: string[];
35
+ grabberIndicator: string[];
36
+ swipeArea: string[];
37
+ indent: string;
38
+ indentBackground: string;
39
+ }, undefined, {
40
+ size: {
41
+ xs: {
42
+ content: string[];
43
+ };
44
+ sm: {
45
+ content: string[];
46
+ };
47
+ md: {
48
+ content: string[];
49
+ };
50
+ lg: {
51
+ content: string[];
52
+ };
53
+ xl: {
54
+ content: string[];
55
+ };
56
+ full: {
57
+ content: string[];
58
+ };
59
+ };
60
+ }, {
61
+ backdrop: string[];
62
+ positioner: string[];
63
+ content: string[];
64
+ header: string[];
65
+ body: string;
66
+ footer: string[];
67
+ title: string;
68
+ description: string;
69
+ trigger: string;
70
+ closeTrigger: string;
71
+ grabber: string[];
72
+ grabberIndicator: string[];
73
+ swipeArea: string[];
74
+ indent: string;
75
+ indentBackground: string;
76
+ }, import("tailwind-variants").TVReturnType<{
77
+ size: {
78
+ xs: {
79
+ content: string[];
80
+ };
81
+ sm: {
82
+ content: string[];
83
+ };
84
+ md: {
85
+ content: string[];
86
+ };
87
+ lg: {
88
+ content: string[];
89
+ };
90
+ xl: {
91
+ content: string[];
92
+ };
93
+ full: {
94
+ content: string[];
95
+ };
96
+ };
97
+ }, {
98
+ backdrop: string[];
99
+ positioner: string[];
100
+ content: string[];
101
+ header: string[];
102
+ body: string;
103
+ footer: string[];
104
+ title: string;
105
+ description: string;
106
+ trigger: string;
107
+ closeTrigger: string;
108
+ grabber: string[];
109
+ grabberIndicator: string[];
110
+ swipeArea: string[];
111
+ indent: string;
112
+ indentBackground: string;
113
+ }, undefined, unknown, unknown, undefined>>;
114
+ export type DrawerSize = Exclude<VariantProps<typeof drawerVariants>["size"], null | undefined>;
115
+ //# sourceMappingURL=drawer.styles.d.ts.map
@@ -0,0 +1 @@
1
+ {"version":3,"file":"drawer.styles.d.ts","sourceRoot":"","sources":["../../../../src/internal/molecules/drawer.styles.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,mBAAmB,CAAA;AAGrD,eAAO,MAAM,cAAc;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;2CAwGzB,CAAA;AAEF,MAAM,MAAM,UAAU,GAAG,OAAO,CAC9B,YAAY,CAAC,OAAO,cAAc,CAAC,CAAC,MAAM,CAAC,EAC3C,IAAI,GAAG,SAAS,CACjB,CAAA"}