@jfrader/ui 0.4.0 → 0.5.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 (257) hide show
  1. package/README.md +2 -0
  2. package/dist/{accordion-Bd-j04hW.js → accordion-xCI_u0BV.js} +2 -2
  3. package/dist/accordion.js +1 -1
  4. package/dist/{alert-BBqaKI4k.js → alert-DS_einpy.js} +1 -1
  5. package/dist/alert.js +1 -1
  6. package/dist/announcement-bar-B58xempt.js +382 -0
  7. package/dist/announcement-bar.js +2 -0
  8. package/dist/avatar-group-DOQQuV51.js +138 -0
  9. package/dist/avatar-group.js +2 -0
  10. package/dist/bottom-sheet-DPJBFkie.js +673 -0
  11. package/dist/bottom-sheet.js +2 -0
  12. package/dist/{breadcrumbs-DVAOxfvL.js → breadcrumbs-Cfw_hgt2.js} +1 -1
  13. package/dist/breadcrumbs.js +1 -1
  14. package/dist/{button-P2e7_44z.js → button-C92uYFJW.js} +1 -1
  15. package/dist/button.js +1 -1
  16. package/dist/calendar-B3Svu0X2.js +447 -0
  17. package/dist/calendar.js +1 -1
  18. package/dist/carousel-IvPqN-oM.js +472 -0
  19. package/dist/carousel.js +2 -0
  20. package/dist/{checkbox-COYG6L7d.js → checkbox-cFquiSdy.js} +1 -1
  21. package/dist/checkbox.js +1 -1
  22. package/dist/chip-group-DTQd_M-G.js +289 -0
  23. package/dist/chip-group.js +2 -0
  24. package/dist/code-block/shiki.js +147 -0
  25. package/dist/code-block-ahnRi-g8.js +292 -0
  26. package/dist/code-block.js +2 -0
  27. package/dist/collection-registry-k6JcD3Jr.js +44 -0
  28. package/dist/combobox-Bhzvu9ma.js +334 -0
  29. package/dist/combobox.js +1 -1
  30. package/dist/command-palette-BQ5LleGb.js +384 -0
  31. package/dist/command-palette.js +1 -1
  32. package/dist/copy-button-ByiA6D3R.js +252 -0
  33. package/dist/copy-button.js +2 -0
  34. package/dist/countdown-Dp_TD1VP.js +293 -0
  35. package/dist/countdown.js +2 -0
  36. package/dist/date-picker-5zKSSuFF.js +255 -0
  37. package/dist/date-picker.js +1 -1
  38. package/dist/date-range-picker-B5uFWsm-.js +562 -0
  39. package/dist/date-range-picker.js +2 -0
  40. package/dist/{dialog-xaydbXl2.js → dialog-ciiv9H2b.js} +19 -19
  41. package/dist/dialog.js +1 -1
  42. package/dist/drawer-DsASTiP-.js +553 -0
  43. package/dist/drawer.js +2 -0
  44. package/dist/empty-state-CDgrjPPf.js +142 -0
  45. package/dist/empty-state.js +2 -0
  46. package/dist/expandable-card-C-qJcZ14.js +340 -0
  47. package/dist/expandable-card.js +2 -0
  48. package/dist/field-anatomy-COVdNpf5.js +84 -0
  49. package/dist/file-dropzone-pR4v7owg.js +457 -0
  50. package/dist/file-dropzone.js +2 -0
  51. package/dist/filter-toolbar-D5KEKTSe.js +312 -0
  52. package/dist/filter-toolbar.js +2 -0
  53. package/dist/hold-to-confirm-DjB2EVjM.js +294 -0
  54. package/dist/hold-to-confirm.js +2 -0
  55. package/dist/hover-card-B-nrCIy2.js +347 -0
  56. package/dist/hover-card.js +2 -0
  57. package/dist/image-compare-ciuhPtQZ.js +415 -0
  58. package/dist/image-compare.js +2 -0
  59. package/dist/index.js +79 -38
  60. package/dist/inline-edit-C0eeml65.js +535 -0
  61. package/dist/inline-edit.js +2 -0
  62. package/dist/input-control-DmMuAuPS.js +34 -0
  63. package/dist/json-viewer-BcySQfjZ.js +798 -0
  64. package/dist/json-viewer.js +2 -0
  65. package/dist/listbox-style-WX-RASp1.js +59 -0
  66. package/dist/{media-D_eA_I-e.js → media-8yrN85VT.js} +2 -2
  67. package/dist/mention-input-BcQKX2EJ.js +599 -0
  68. package/dist/mention-input.js +2 -0
  69. package/dist/menu-xwOOUtWP.js +275 -0
  70. package/dist/menu.js +1 -1
  71. package/dist/metric-card-Bh9K4fZs.js +118 -0
  72. package/dist/metric-card.js +2 -0
  73. package/dist/multi-select-Pce_IYnz.js +590 -0
  74. package/dist/multi-select.js +2 -0
  75. package/dist/{navigation-DhnKriOp.js → navigation-sP5fiuQS.js} +4 -4
  76. package/dist/navigation.js +1 -1
  77. package/dist/overlay-layer-SeUyyEPD.js +64 -0
  78. package/dist/overlay-portal-C4JZFq2M.js +15 -0
  79. package/dist/{pagination-DYdwsxwe.js → pagination-DmXZ8E85.js} +1 -1
  80. package/dist/pagination.js +1 -1
  81. package/dist/password-field-03pWRkuY.js +250 -0
  82. package/dist/password-field.js +2 -0
  83. package/dist/popover-QHcEvf9c.js +119 -0
  84. package/dist/popover.js +1 -1
  85. package/dist/{progress-BpJswTG4.js → progress-CbOWBUdA.js} +4 -4
  86. package/dist/progress.js +1 -1
  87. package/dist/radio-cards-D2QZENI_.js +455 -0
  88. package/dist/radio-cards.js +2 -0
  89. package/dist/{radio-group-Ce0_IWQr.js → radio-group-E6mMRgo7.js} +4 -4
  90. package/dist/radio-group.js +1 -1
  91. package/dist/resizable-panels-BhjUVXZZ.js +519 -0
  92. package/dist/resizable-panels.js +2 -0
  93. package/dist/scroll-area-CcZyiSOQ.js +371 -0
  94. package/dist/scroll-area.js +2 -0
  95. package/dist/search-field-IxF0IJXm.js +274 -0
  96. package/dist/search-field.js +2 -0
  97. package/dist/segmented-control-yO1K1nbi.js +326 -0
  98. package/dist/segmented-control.js +2 -0
  99. package/dist/select-n_H52W1Z.js +292 -0
  100. package/dist/select.js +1 -1
  101. package/dist/signature-pad-q2SAsrdD.js +640 -0
  102. package/dist/signature-pad.js +2 -0
  103. package/dist/{skeleton-OoFlOEXO.js → skeleton-XQQDkCHd.js} +1 -1
  104. package/dist/skeleton.js +1 -1
  105. package/dist/slider-t0B5cecO.js +477 -0
  106. package/dist/slider.js +2 -0
  107. package/dist/sortable-data-table-tirqlLY2.js +365 -0
  108. package/dist/sortable-data-table.js +2 -0
  109. package/dist/{spinner-C2YDoiMn.js → spinner-DtxvDPdM.js} +1 -1
  110. package/dist/spinner.js +1 -1
  111. package/dist/split-button-Cb3EHs64.js +268 -0
  112. package/dist/split-button.js +2 -0
  113. package/dist/stepper-CruHbXxX.js +480 -0
  114. package/dist/stepper.js +2 -0
  115. package/dist/swipe-actions-DiZC57-3.js +418 -0
  116. package/dist/swipe-actions.js +2 -0
  117. package/dist/{switch-Dr-qjmT4.js → switch-qwv8jQnR.js} +1 -1
  118. package/dist/switch.js +1 -1
  119. package/dist/{tabs-CK_g1RKa.js → tabs-CAVJndX1.js} +2 -2
  120. package/dist/tabs.js +1 -1
  121. package/dist/tag-input-DSRCyrX2.js +418 -0
  122. package/dist/tag-input.js +2 -0
  123. package/dist/{text-field-D60ok14S.js → text-field-C8TWG-tY.js} +6 -5
  124. package/dist/text-field.js +1 -1
  125. package/dist/{textarea-DyfjtP0A.js → textarea-BrW0XcG_.js} +6 -5
  126. package/dist/textarea.js +1 -1
  127. package/dist/time-picker-Db8D49cP.js +305 -0
  128. package/dist/time-picker.js +2 -0
  129. package/dist/timeline-k3nURuCP.js +618 -0
  130. package/dist/timeline.js +2 -0
  131. package/dist/toast-BHxI32ZA.js +352 -0
  132. package/dist/toast-stack-DqrAzdg5.js +183 -0
  133. package/dist/toast-stack.js +2 -0
  134. package/dist/toast.js +1 -1
  135. package/dist/{toggle-group-CI0e7hFm.js → toggle-group-fcjzpifI.js} +4 -4
  136. package/dist/toggle-group.js +1 -1
  137. package/dist/tooltip-CkeiW9C1.js +113 -0
  138. package/dist/tooltip.js +1 -1
  139. package/dist/tree-view-C2liIxqy.js +360 -0
  140. package/dist/tree-view.js +2 -0
  141. package/dist/types/components/announcement-bar/announcement-bar.d.ts +75 -0
  142. package/dist/types/components/announcement-bar/index.d.ts +2 -0
  143. package/dist/types/components/avatar-group/avatar-group.d.ts +43 -0
  144. package/dist/types/components/avatar-group/index.d.ts +2 -0
  145. package/dist/types/components/bottom-sheet/bottom-sheet.d.ts +60 -0
  146. package/dist/types/components/bottom-sheet/index.d.ts +2 -0
  147. package/dist/types/components/calendar/calendar.d.ts +25 -1
  148. package/dist/types/components/calendar/index.d.ts +1 -1
  149. package/dist/types/components/carousel/carousel.d.ts +73 -0
  150. package/dist/types/components/carousel/index.d.ts +2 -0
  151. package/dist/types/components/chip-group/chip-group.d.ts +54 -0
  152. package/dist/types/components/chip-group/index.d.ts +1 -0
  153. package/dist/types/components/code-block/code-block.d.ts +58 -0
  154. package/dist/types/components/code-block/index.d.ts +1 -0
  155. package/dist/types/components/code-block/shiki.d.ts +3 -0
  156. package/dist/types/components/combobox/combobox.d.ts +1 -1
  157. package/dist/types/components/command-palette/command-palette.d.ts +1 -1
  158. package/dist/types/components/copy-button/copy-button.d.ts +49 -0
  159. package/dist/types/components/copy-button/index.d.ts +2 -0
  160. package/dist/types/components/countdown/countdown.d.ts +37 -0
  161. package/dist/types/components/countdown/index.d.ts +1 -0
  162. package/dist/types/components/date-picker/date-picker.d.ts +1 -1
  163. package/dist/types/components/date-range-picker/date-range-picker.d.ts +103 -0
  164. package/dist/types/components/date-range-picker/index.d.ts +2 -0
  165. package/dist/types/components/drawer/drawer.d.ts +59 -0
  166. package/dist/types/components/drawer/index.d.ts +2 -0
  167. package/dist/types/components/empty-state/empty-state.d.ts +36 -0
  168. package/dist/types/components/empty-state/index.d.ts +2 -0
  169. package/dist/types/components/expandable-card/expandable-card.d.ts +28 -0
  170. package/dist/types/components/expandable-card/index.d.ts +2 -0
  171. package/dist/types/components/field/field-anatomy.d.ts +4 -2
  172. package/dist/types/components/file-dropzone/file-dropzone.d.ts +93 -0
  173. package/dist/types/components/file-dropzone/index.d.ts +2 -0
  174. package/dist/types/components/filter-toolbar/filter-toolbar.d.ts +70 -0
  175. package/dist/types/components/filter-toolbar/index.d.ts +1 -0
  176. package/dist/types/components/hold-to-confirm/hold-to-confirm.d.ts +32 -0
  177. package/dist/types/components/hold-to-confirm/index.d.ts +2 -0
  178. package/dist/types/components/hover-card/hover-card.d.ts +97 -0
  179. package/dist/types/components/hover-card/index.d.ts +2 -0
  180. package/dist/types/components/image-compare/image-compare.d.ts +54 -0
  181. package/dist/types/components/image-compare/index.d.ts +1 -0
  182. package/dist/types/components/inline-edit/index.d.ts +2 -0
  183. package/dist/types/components/inline-edit/inline-edit.d.ts +93 -0
  184. package/dist/types/components/json-viewer/index.d.ts +2 -0
  185. package/dist/types/components/json-viewer/json-viewer.d.ts +82 -0
  186. package/dist/types/components/mention-input/index.d.ts +2 -0
  187. package/dist/types/components/mention-input/mention-input.d.ts +87 -0
  188. package/dist/types/components/menu/menu.d.ts +23 -5
  189. package/dist/types/components/metric-card/index.d.ts +1 -0
  190. package/dist/types/components/metric-card/metric-card.d.ts +37 -0
  191. package/dist/types/components/multi-select/index.d.ts +2 -0
  192. package/dist/types/components/multi-select/multi-select.d.ts +73 -0
  193. package/dist/types/components/password-field/index.d.ts +2 -0
  194. package/dist/types/components/password-field/password-field.d.ts +34 -0
  195. package/dist/types/components/popover/popover.d.ts +1 -1
  196. package/dist/types/components/radio-cards/index.d.ts +1 -0
  197. package/dist/types/components/radio-cards/radio-cards.d.ts +42 -0
  198. package/dist/types/components/resizable-panels/index.d.ts +2 -0
  199. package/dist/types/components/resizable-panels/resizable-panels.d.ts +42 -0
  200. package/dist/types/components/scroll-area/index.d.ts +2 -0
  201. package/dist/types/components/scroll-area/scroll-area.d.ts +34 -0
  202. package/dist/types/components/search-field/index.d.ts +1 -0
  203. package/dist/types/components/search-field/search-field.d.ts +31 -0
  204. package/dist/types/components/segmented-control/index.d.ts +2 -0
  205. package/dist/types/components/segmented-control/segmented-control.d.ts +32 -0
  206. package/dist/types/components/select/select.d.ts +1 -1
  207. package/dist/types/components/signature-pad/index.d.ts +2 -0
  208. package/dist/types/components/signature-pad/signature-pad.d.ts +104 -0
  209. package/dist/types/components/slider/index.d.ts +1 -0
  210. package/dist/types/components/slider/slider.d.ts +70 -0
  211. package/dist/types/components/sortable-data-table/index.d.ts +1 -0
  212. package/dist/types/components/sortable-data-table/sortable-data-table.d.ts +76 -0
  213. package/dist/types/components/split-button/index.d.ts +2 -0
  214. package/dist/types/components/split-button/split-button.d.ts +55 -0
  215. package/dist/types/components/stepper/index.d.ts +2 -0
  216. package/dist/types/components/stepper/stepper.d.ts +85 -0
  217. package/dist/types/components/swipe-actions/index.d.ts +2 -0
  218. package/dist/types/components/swipe-actions/swipe-actions.d.ts +44 -0
  219. package/dist/types/components/tag-input/index.d.ts +2 -0
  220. package/dist/types/components/tag-input/tag-input.d.ts +66 -0
  221. package/dist/types/components/time-picker/index.d.ts +2 -0
  222. package/dist/types/components/time-picker/time-picker.d.ts +48 -0
  223. package/dist/types/components/timeline/index.d.ts +2 -0
  224. package/dist/types/components/timeline/timeline.d.ts +66 -0
  225. package/dist/types/components/toast/toast.d.ts +37 -2
  226. package/dist/types/components/toast-stack/index.d.ts +2 -0
  227. package/dist/types/components/toast-stack/toast-stack.d.ts +28 -0
  228. package/dist/types/components/tooltip/tooltip.d.ts +1 -1
  229. package/dist/types/components/tree-view/index.d.ts +1 -0
  230. package/dist/types/components/tree-view/tree-view.d.ts +47 -0
  231. package/dist/types/components/usage-meter/index.d.ts +2 -0
  232. package/dist/types/components/usage-meter/usage-meter.d.ts +83 -0
  233. package/dist/types/index.d.ts +40 -0
  234. package/dist/types/overlay/overlay-layer.d.ts +33 -0
  235. package/dist/types/overlay/use-overlay-floating.d.ts +11 -1
  236. package/dist/types/styling/media.d.ts +1 -0
  237. package/dist/types/styling/theme.d.ts +12 -0
  238. package/dist/types/utils/use-controlled-state.d.ts +2 -1
  239. package/dist/usage-meter-qyQ3rYVv.js +463 -0
  240. package/dist/usage-meter.js +2 -0
  241. package/dist/use-controlled-state-DpeVQZNR.js +20 -0
  242. package/dist/use-latest-callback-cj1OOQL6.js +11 -0
  243. package/dist/use-overlay-floating-DvJifLpF.js +31 -0
  244. package/package.json +175 -3
  245. package/dist/calendar-C9Yad_-w.js +0 -394
  246. package/dist/collection-registry-BTYi6zGh.js +0 -98
  247. package/dist/combobox-DiMC2g_u.js +0 -327
  248. package/dist/command-palette-V_2pEay7.js +0 -379
  249. package/dist/date-picker-C29Uo4Tx.js +0 -250
  250. package/dist/field-anatomy-D2ToMeRa.js +0 -109
  251. package/dist/menu-CGPTNRnF.js +0 -216
  252. package/dist/popover-CdRXjQqI.js +0 -113
  253. package/dist/select-BgG7WgSh.js +0 -286
  254. package/dist/toast-CjmELMZZ.js +0 -283
  255. package/dist/tooltip-CaL3rKbV.js +0 -108
  256. package/dist/use-controlled-state-CVXDa-qM.js +0 -21
  257. package/dist/use-overlay-floating-Bit-f0FU.js +0 -31
@@ -0,0 +1,553 @@
1
+ 'use client';
2
+ import { i as e, r as t, t as n } from "./sx-Dx9JUKp5.js";
3
+ import { n as r } from "./focus-ring-BK5W5_NY.js";
4
+ import { n as i, r as a } from "./media-8yrN85VT.js";
5
+ import { t as o } from "./use-controlled-state-DpeVQZNR.js";
6
+ import { t as s } from "./renderable-DzcIj1Lo.js";
7
+ import { n as c, t as l } from "./surface-DZ4d-2aL.js";
8
+ import { t as u } from "./trigger-style-B1KVC8O1.js";
9
+ import { i as d, n as f, r as p, t as m } from "./use-native-dialog-DWpIUVO1.js";
10
+ import { createContext as h, useCallback as g, useContext as _, useEffect as v, useId as y, useMemo as b, useRef as x, useState as S } from "react";
11
+ import { vars as C } from "@jfrader/tokens/vars";
12
+ import { jsx as w } from "@emotion/react/jsx-runtime";
13
+ import { useMergeRefs as ee } from "@floating-ui/react";
14
+ import { animate as T } from "motion/react";
15
+ //#region src/components/drawer/drawer.tsx
16
+ var E = h(null), D = h(null);
17
+ function O(e) {
18
+ let t = _(E);
19
+ if (!t) throw Error(`Drawer.${e} must be rendered inside <Drawer>.`);
20
+ return t;
21
+ }
22
+ var k = 1 / 3, A = 500, j = .2, M = 100, N = {
23
+ type: "spring",
24
+ stiffness: 400,
25
+ damping: 40,
26
+ mass: 1
27
+ }, P = [
28
+ "button",
29
+ "a[href]",
30
+ "input",
31
+ "select",
32
+ "textarea",
33
+ "label",
34
+ "[contenteditable]:not([contenteditable=\"false\"])",
35
+ "[data-ui~=\"drawer-title\"]",
36
+ "[data-ui~=\"drawer-description\"]"
37
+ ].join(", "), te = "[data-floating-ui-portal]:not(:empty)", F = {
38
+ sm: "22rem",
39
+ md: "30rem",
40
+ lg: "38rem"
41
+ }, I = "32rem", L = C.space[3], R = "@media (max-width: 40rem)", z = C.space[6], B = C.space[5], V = {
42
+ top: "env(safe-area-inset-top, 0px)",
43
+ bottom: "env(safe-area-inset-bottom, 0px)"
44
+ }, H = e({ from: {
45
+ opacity: 0,
46
+ transform: "translate(var(--drawer-entry-x, 0), var(--drawer-entry-y, 0))"
47
+ } }), ne = t({
48
+ ...l,
49
+ position: "fixed",
50
+ inset: 0,
51
+ margin: 0,
52
+ inlineSize: "100%",
53
+ blockSize: "100%",
54
+ maxInlineSize: "none",
55
+ maxBlockSize: "none",
56
+ overflow: "hidden",
57
+ "&[open]": { display: "flex" }
58
+ }), re = {
59
+ "inline-start": t({
60
+ flexDirection: "row",
61
+ justifyContent: "flex-start"
62
+ }),
63
+ "inline-end": t({
64
+ flexDirection: "row",
65
+ justifyContent: "flex-end"
66
+ }),
67
+ top: t({
68
+ flexDirection: "column",
69
+ justifyContent: "flex-start"
70
+ }),
71
+ bottom: t({
72
+ flexDirection: "column",
73
+ justifyContent: "flex-end"
74
+ })
75
+ }, U = t({
76
+ ...c,
77
+ display: "flex",
78
+ flexDirection: "column",
79
+ minBlockSize: 0,
80
+ borderWidth: 0,
81
+ boxShadow: C.shadow.floating,
82
+ animationName: H,
83
+ animationDuration: C.motion.duration.base,
84
+ animationTimingFunction: C.motion.easeStandard,
85
+ animationFillMode: "backwards",
86
+ [a]: { animation: "none" },
87
+ [i]: {
88
+ boxShadow: "none",
89
+ borderColor: "CanvasText"
90
+ }
91
+ }), W = {
92
+ blockSize: "100%",
93
+ paddingBlockStart: V.top
94
+ }, ie = {
95
+ "inline-start": t({
96
+ ...W,
97
+ borderInlineEndWidth: "1px",
98
+ borderStartEndRadius: C.radius.lg,
99
+ borderEndEndRadius: C.radius.lg,
100
+ "--drawer-entry-x": "-100%",
101
+ "&:dir(rtl)": { "--drawer-entry-x": "100%" },
102
+ [i]: { borderInlineEndWidth: "2px" }
103
+ }),
104
+ "inline-end": t({
105
+ ...W,
106
+ borderInlineStartWidth: "1px",
107
+ borderStartStartRadius: C.radius.lg,
108
+ borderEndStartRadius: C.radius.lg,
109
+ "--drawer-entry-x": "100%",
110
+ "&:dir(rtl)": { "--drawer-entry-x": "-100%" },
111
+ [i]: { borderInlineStartWidth: "2px" }
112
+ }),
113
+ top: t({
114
+ inlineSize: "100%",
115
+ maxBlockSize: `min(${I}, 100dvh)`,
116
+ paddingBlockStart: V.top,
117
+ borderBlockEndWidth: "1px",
118
+ borderEndStartRadius: C.radius.lg,
119
+ borderEndEndRadius: C.radius.lg,
120
+ "--drawer-entry-y": "-100%",
121
+ [i]: { borderBlockEndWidth: "2px" }
122
+ }),
123
+ bottom: t({
124
+ inlineSize: "100%",
125
+ maxBlockSize: `min(${I}, 100dvh)`,
126
+ borderBlockStartWidth: "1px",
127
+ borderStartStartRadius: C.radius.lg,
128
+ borderStartEndRadius: C.radius.lg,
129
+ "--drawer-entry-y": "100%",
130
+ [i]: { borderBlockStartWidth: "2px" }
131
+ })
132
+ }, ae = Object.fromEntries(Object.entries(F).map(([e, n]) => [e, t({
133
+ inlineSize: `min(${n}, calc(100% - ${L}))`,
134
+ [R]: { inlineSize: `calc(100% - ${L})` }
135
+ })])), G = {
136
+ paddingInline: z,
137
+ [R]: { paddingInline: B }
138
+ }, oe = t({
139
+ ...G,
140
+ display: "grid",
141
+ gridTemplateColumns: "minmax(0, 1fr) auto",
142
+ alignItems: "start",
143
+ columnGap: C.space[4],
144
+ flexShrink: 0,
145
+ paddingBlock: z,
146
+ borderBlockEnd: `1px solid ${C.color.border}`,
147
+ "& > *": { gridColumn: 1 },
148
+ "& > [data-ui~=\"drawer-close\"]": {
149
+ gridColumn: 2,
150
+ gridRow: 1
151
+ },
152
+ [R]: { paddingBlock: B }
153
+ }), se = t({
154
+ cursor: "grab",
155
+ touchAction: "none",
156
+ "&[data-dragging]": { cursor: "grabbing" },
157
+ [a]: {
158
+ cursor: "auto",
159
+ touchAction: "auto"
160
+ }
161
+ }), K = { "&:last-child": {
162
+ paddingBlockEnd: `calc(${z} + ${V.bottom})`,
163
+ [R]: { paddingBlockEnd: `calc(${B} + ${V.bottom})` }
164
+ } }, ce = t({
165
+ ...G,
166
+ flex: "1 1 auto",
167
+ minBlockSize: 0,
168
+ overflow: "auto",
169
+ overscrollBehavior: "contain",
170
+ paddingBlock: C.space[5],
171
+ fontSize: C.textSize.sm,
172
+ ...K
173
+ }), le = t({
174
+ ...G,
175
+ display: "flex",
176
+ flexWrap: "wrap",
177
+ justifyContent: "flex-end",
178
+ alignItems: "center",
179
+ gap: C.space[3],
180
+ flexShrink: 0,
181
+ paddingBlock: C.space[4],
182
+ borderBlockStart: `1px solid ${C.color.border}`,
183
+ ...K
184
+ }), ue = t({
185
+ margin: 0,
186
+ fontSize: C.textSize.lg,
187
+ fontWeight: C.fontWeight.semibold,
188
+ lineHeight: C.lineHeight.tight
189
+ }), de = t({
190
+ margin: 0,
191
+ marginBlockStart: C.space[2],
192
+ fontSize: C.textSize.sm,
193
+ color: C.color.textMuted
194
+ }), fe = t({
195
+ appearance: "none",
196
+ display: "inline-flex",
197
+ alignItems: "center",
198
+ justifyContent: "center",
199
+ gap: C.space[2],
200
+ boxSizing: "border-box",
201
+ minBlockSize: C.space[8],
202
+ minInlineSize: C.space[8],
203
+ border: "1px solid transparent",
204
+ borderRadius: C.radius.md,
205
+ backgroundColor: "transparent",
206
+ paddingBlock: C.space[1],
207
+ paddingInline: C.space[3],
208
+ font: "inherit",
209
+ fontSize: C.textSize.sm,
210
+ fontWeight: C.fontWeight.medium,
211
+ color: C.color.textMuted,
212
+ cursor: "pointer",
213
+ transitionProperty: "background-color, color",
214
+ transitionDuration: C.motion.duration.fast,
215
+ transitionTimingFunction: C.motion.easeStandard,
216
+ "&:hover:not(:disabled)": {
217
+ backgroundColor: C.color.surfaceHover,
218
+ color: C.color.text
219
+ },
220
+ "&:focus-visible": { ...r },
221
+ "&:disabled": {
222
+ opacity: .55,
223
+ cursor: "not-allowed"
224
+ },
225
+ [a]: { transitionDuration: "0s" },
226
+ [i]: {
227
+ borderColor: "ButtonText",
228
+ "&:focus-visible": { outlineColor: "Highlight" }
229
+ }
230
+ });
231
+ function q(e) {
232
+ return s(e) && e !== "";
233
+ }
234
+ function J({ open: e, defaultOpen: t = !1, onOpenChange: n, side: r = "inline-end", size: i = "md", draggable: a = !1, children: s }) {
235
+ let c = y(), [l = !1, u] = o(e, t, n), { setDialogElement: f, setOpen: p, requestClose: m, repairToken: h } = d(l, u), [g, _] = S(!1), [v, x] = S(!1), C = b(() => ({
236
+ open: l,
237
+ setOpen: p,
238
+ requestClose: m,
239
+ repairToken: h,
240
+ setDialogElement: f,
241
+ side: r,
242
+ size: i,
243
+ draggable: a,
244
+ titleId: `${c}-title`,
245
+ descriptionId: `${c}-description`,
246
+ hasTitle: g,
247
+ hasDescription: v,
248
+ setHasTitle: _,
249
+ setHasDescription: x
250
+ }), [
251
+ l,
252
+ p,
253
+ m,
254
+ h,
255
+ f,
256
+ r,
257
+ i,
258
+ a,
259
+ c,
260
+ g,
261
+ v
262
+ ]);
263
+ return /* @__PURE__ */ w(E.Provider, {
264
+ value: C,
265
+ children: s
266
+ });
267
+ }
268
+ J.displayName = "Drawer";
269
+ function Y({ ref: e, onClick: t, className: r, sx: i, ...a }) {
270
+ let { open: o, setOpen: s } = O("Trigger"), c = (e) => {
271
+ t?.(e), e.defaultPrevented || s(!0);
272
+ };
273
+ return /* @__PURE__ */ w(n, {
274
+ className: r,
275
+ styles: u,
276
+ sx: i,
277
+ children: (t) => /* @__PURE__ */ w("button", {
278
+ type: "button",
279
+ ...a,
280
+ ref: e,
281
+ "data-ui": "drawer-trigger",
282
+ "aria-haspopup": "dialog",
283
+ "aria-expanded": o,
284
+ onClick: c,
285
+ className: t
286
+ })
287
+ });
288
+ }
289
+ Y.displayName = "Drawer.Trigger";
290
+ var pe = "(prefers-reduced-motion: reduce)", me = {
291
+ "inline-start": "x",
292
+ "inline-end": "x",
293
+ top: "y",
294
+ bottom: "y"
295
+ };
296
+ function he(e, t) {
297
+ return e === "top" ? -1 : e === "bottom" ? 1 : e === "inline-end" === t ? -1 : 1;
298
+ }
299
+ function ge(e, t) {
300
+ let n = t * e.sign;
301
+ return t === 0 ? "" : e.axis === "x" ? `${n}px` : `0 ${n}px`;
302
+ }
303
+ function _e(e, t, n, r) {
304
+ let i = x(null), a = x(null), o = x(0), s = g(() => {
305
+ a.current?.stop(), a.current = null, i.current = null, o.current = 0, n.current && (n.current.style.translate = "");
306
+ }, [n]);
307
+ return v(() => s, [s]), {
308
+ headerGesture: b(() => {
309
+ if (!e) return null;
310
+ let s = (e, t, n) => {
311
+ o.current = n, e.style.translate = ge(t, n);
312
+ }, c = (e, t) => {
313
+ let o = i.current, c = n.current;
314
+ if (!o || o.pointerId !== e.pointerId) return;
315
+ i.current = null, e.currentTarget.removeAttribute("data-dragging");
316
+ let l = o.axis === "x" ? e.clientX : e.clientY, u = [...o.samples, {
317
+ position: l,
318
+ time: e.timeStamp
319
+ }].filter((t) => e.timeStamp - t.time <= M), d = u[0], f = u.at(-1), p = d && f ? (f.time - d.time) / 1e3 : 0, m = d && f && p > 0 ? (f.position - d.position) * o.sign / p : 0;
320
+ t && (o.offset >= o.extent * k || m >= A) && r(), c && o.offset !== 0 && (a.current = T(o.offset, 0, {
321
+ ...N,
322
+ velocity: m,
323
+ onUpdate: (e) => s(c, o, e)
324
+ }));
325
+ };
326
+ return {
327
+ onPointerDown: (e) => {
328
+ let r = n.current;
329
+ if (!e.isPrimary || e.button !== 0 || !r || e.target instanceof Element && e.target.closest(P) || r.ownerDocument.defaultView?.matchMedia(pe).matches) return;
330
+ a.current?.stop();
331
+ let s = me[t], c = he(t, getComputedStyle(r).direction === "rtl"), l = r.getBoundingClientRect(), u = s === "x" ? e.clientX : e.clientY, d = o.current;
332
+ i.current = {
333
+ pointerId: e.pointerId,
334
+ axis: s,
335
+ sign: c,
336
+ start: u - d * c,
337
+ extent: s === "x" ? l.width : l.height,
338
+ offset: d,
339
+ samples: [{
340
+ position: u,
341
+ time: e.timeStamp
342
+ }]
343
+ }, e.currentTarget.setPointerCapture?.(e.pointerId), e.currentTarget.setAttribute("data-dragging", "");
344
+ },
345
+ onPointerMove: (e) => {
346
+ let t = i.current, r = n.current;
347
+ if (!t || t.pointerId !== e.pointerId || !r) return;
348
+ let a = t.axis === "x" ? e.clientX : e.clientY, o = (a - t.start) * t.sign;
349
+ t.offset = o >= 0 ? o : o * j, t.samples = [...t.samples, {
350
+ position: a,
351
+ time: e.timeStamp
352
+ }].filter((t) => e.timeStamp - t.time <= M), s(r, t, t.offset);
353
+ },
354
+ onPointerUp: (e) => c(e, !0),
355
+ onPointerCancel: (e) => c(e, !1),
356
+ onLostPointerCapture: (e) => c(e, !1)
357
+ };
358
+ }, [
359
+ e,
360
+ t,
361
+ n,
362
+ r
363
+ ]),
364
+ reset: s
365
+ };
366
+ }
367
+ function X({ ref: e, className: t, sx: r, ...i }) {
368
+ let { children: a, onCancel: o, onClick: s, onClose: c, onKeyDownCapture: l, onKeyUp: u, "aria-labelledby": d, "aria-describedby": h, withDescription: _ = !0, ...v } = m(i), y = O("Content"), { setOpen: S, titleId: C, descriptionId: ee, hasTitle: T, hasDescription: E, side: k, draggable: A } = y, j = x(null), M = x(null), N = x(!1), P = g(() => {
369
+ f(j.current, S);
370
+ }, [S]), { headerGesture: F, reset: I } = _e(A, k, M, P), L = (e) => {
371
+ N.current ? (N.current = !1, e.preventDefault()) : o?.(e);
372
+ }, R = (e) => {
373
+ I(), c?.(e);
374
+ }, z = p({
375
+ ...y,
376
+ requestClose: P
377
+ }, {
378
+ onCancel: L,
379
+ onClick: s,
380
+ onClose: R
381
+ }, e, j), B = (e, t) => (n) => n.target === j.current ? e(n) : t?.(n), V = {
382
+ ...z,
383
+ onCancel: B(z.onCancel, o),
384
+ onClose: B(z.onClose, c),
385
+ onKeyDownCapture: (e) => {
386
+ l?.(e), e.key === "Escape" && (N.current = !!j.current?.querySelector(te));
387
+ },
388
+ onKeyUp: (e) => {
389
+ u?.(e), e.key === "Escape" && (N.current = !1);
390
+ }
391
+ }, H = b(() => ({
392
+ requestClose: P,
393
+ panelRef: M,
394
+ headerGesture: F
395
+ }), [P, F]), U = [d, T && C].filter(Boolean).join(" ") || void 0, W = [h, _ && E && ee].filter(Boolean).join(" ") || void 0;
396
+ return /* @__PURE__ */ w(n, {
397
+ className: t,
398
+ styles: [ne, re[k]],
399
+ sx: r,
400
+ children: (e) => /* @__PURE__ */ w("dialog", {
401
+ ...v,
402
+ ...V,
403
+ "data-ui": "drawer",
404
+ "data-side": k,
405
+ "aria-modal": "true",
406
+ "aria-labelledby": U,
407
+ "aria-describedby": W,
408
+ className: e,
409
+ children: /* @__PURE__ */ w(D.Provider, {
410
+ value: H,
411
+ children: a
412
+ })
413
+ })
414
+ });
415
+ }
416
+ X.displayName = "Drawer.Content";
417
+ function Z({ ref: e, className: t, sx: r, ...i }) {
418
+ let { side: a, size: o } = O("Panel"), s = _(D)?.panelRef, c = ee([s, e]), l = a === "inline-start" || a === "inline-end";
419
+ return /* @__PURE__ */ w(n, {
420
+ className: t,
421
+ styles: [
422
+ U,
423
+ ie[a],
424
+ l && ae[o]
425
+ ],
426
+ sx: r,
427
+ children: (e) => /* @__PURE__ */ w("div", {
428
+ ...i,
429
+ ref: c,
430
+ "data-ui": "drawer-panel",
431
+ className: e
432
+ })
433
+ });
434
+ }
435
+ Z.displayName = "Drawer.Panel";
436
+ function Q({ ref: e, className: t, sx: r, ...i }) {
437
+ O("Header");
438
+ let a = _(D)?.headerGesture ?? null, o = a && Object.fromEntries(Object.keys(a).map((e) => [e, (t) => {
439
+ i[e]?.(t), a[e]?.(t);
440
+ }]));
441
+ return /* @__PURE__ */ w(n, {
442
+ className: t,
443
+ styles: [oe, a && se],
444
+ sx: r,
445
+ children: (t) => /* @__PURE__ */ w("div", {
446
+ ...i,
447
+ ...o,
448
+ ref: e,
449
+ "data-ui": "drawer-header",
450
+ "data-draggable": a ? "" : void 0,
451
+ className: t
452
+ })
453
+ });
454
+ }
455
+ Q.displayName = "Drawer.Header";
456
+ function $({ ref: e, className: t, sx: r, ...i }) {
457
+ return O("Body"), /* @__PURE__ */ w(n, {
458
+ className: t,
459
+ styles: ce,
460
+ sx: r,
461
+ children: (t) => /* @__PURE__ */ w("div", {
462
+ ...i,
463
+ ref: e,
464
+ "data-ui": "drawer-body",
465
+ className: t
466
+ })
467
+ });
468
+ }
469
+ $.displayName = "Drawer.Body";
470
+ function ve({ ref: e, className: t, sx: r, ...i }) {
471
+ return O("Footer"), /* @__PURE__ */ w(n, {
472
+ className: t,
473
+ styles: le,
474
+ sx: r,
475
+ children: (t) => /* @__PURE__ */ w("div", {
476
+ ...i,
477
+ ref: e,
478
+ "data-ui": "drawer-footer",
479
+ className: t
480
+ })
481
+ });
482
+ }
483
+ ve.displayName = "Drawer.Footer";
484
+ function ye({ ref: e, className: t, sx: r, children: i, ...a }) {
485
+ let { titleId: o, setHasTitle: s } = O("Title"), c = q(i);
486
+ return v(() => {
487
+ if (c) return s(!0), () => s(!1);
488
+ }, [c, s]), c ? /* @__PURE__ */ w(n, {
489
+ className: t,
490
+ styles: ue,
491
+ sx: r,
492
+ children: (t) => /* @__PURE__ */ w("h2", {
493
+ ...a,
494
+ ref: e,
495
+ id: o,
496
+ "data-ui": "drawer-title",
497
+ className: t,
498
+ children: i
499
+ })
500
+ }) : null;
501
+ }
502
+ ye.displayName = "Drawer.Title";
503
+ function be({ ref: e, className: t, sx: r, children: i, ...a }) {
504
+ let { descriptionId: o, setHasDescription: s } = O("Description"), c = q(i);
505
+ return v(() => {
506
+ if (c) return s(!0), () => s(!1);
507
+ }, [c, s]), c ? /* @__PURE__ */ w(n, {
508
+ className: t,
509
+ styles: de,
510
+ sx: r,
511
+ children: (t) => /* @__PURE__ */ w("p", {
512
+ ...a,
513
+ ref: e,
514
+ id: o,
515
+ "data-ui": "drawer-description",
516
+ className: t,
517
+ children: i
518
+ })
519
+ }) : null;
520
+ }
521
+ be.displayName = "Drawer.Description";
522
+ function xe({ ref: e, onClick: t, className: r, sx: i, ...a }) {
523
+ let { setOpen: o } = O("Close"), s = _(D)?.requestClose, c = (e) => {
524
+ t?.(e), !e.defaultPrevented && (s ? s() : o(!1));
525
+ };
526
+ return /* @__PURE__ */ w(n, {
527
+ className: r,
528
+ styles: fe,
529
+ sx: i,
530
+ children: (t) => /* @__PURE__ */ w("button", {
531
+ type: "button",
532
+ ...a,
533
+ ref: e,
534
+ "data-ui": "drawer-close",
535
+ onClick: c,
536
+ className: t
537
+ })
538
+ });
539
+ }
540
+ xe.displayName = "Drawer.Close";
541
+ var Se = Object.assign(J, {
542
+ Trigger: Y,
543
+ Content: X,
544
+ Panel: Z,
545
+ Header: Q,
546
+ Body: $,
547
+ Footer: ve,
548
+ Title: ye,
549
+ Description: be,
550
+ Close: xe
551
+ });
552
+ //#endregion
553
+ export { Se as t };
package/dist/drawer.js ADDED
@@ -0,0 +1,2 @@
1
+ 'use client';
2
+ export { t as Drawer } from "./drawer-DsASTiP-.js";
@@ -0,0 +1,142 @@
1
+ 'use client';
2
+ import { r as e, t } from "./sx-Dx9JUKp5.js";
3
+ import { t as n } from "./renderable-DzcIj1Lo.js";
4
+ import { useId as r } from "react";
5
+ import { vars as i } from "@jfrader/tokens/vars";
6
+ import { jsx as a, jsxs as o } from "@emotion/react/jsx-runtime";
7
+ //#region src/components/empty-state/empty-state.tsx
8
+ var s = "40ch", c = "24ch", l = e({
9
+ boxSizing: "border-box",
10
+ display: "flex",
11
+ gap: i.space[4],
12
+ minInlineSize: 0,
13
+ fontFamily: i.font.sans,
14
+ lineHeight: i.lineHeight.base,
15
+ color: i.color.text
16
+ }), u = {
17
+ centered: e({
18
+ flexDirection: "column",
19
+ alignItems: "center",
20
+ textAlign: "center",
21
+ paddingBlock: i.space[8],
22
+ paddingInline: i.space[5]
23
+ }),
24
+ inline: e({
25
+ flexDirection: "row",
26
+ flexWrap: "wrap",
27
+ alignItems: "center",
28
+ textAlign: "start",
29
+ paddingBlock: i.space[4],
30
+ paddingInline: i.space[5]
31
+ })
32
+ }, d = e({
33
+ boxSizing: "border-box",
34
+ display: "grid",
35
+ placeItems: "center",
36
+ flexShrink: 0,
37
+ inlineSize: i.space[12],
38
+ blockSize: i.space[12],
39
+ border: `1px solid ${i.color.border}`,
40
+ borderRadius: i.radius.md,
41
+ backgroundColor: i.color.surfaceHover,
42
+ color: i.color.textMuted,
43
+ "& > svg": {
44
+ inlineSize: i.space[6],
45
+ blockSize: i.space[6]
46
+ }
47
+ }), f = e({
48
+ display: "grid",
49
+ gap: i.space[2],
50
+ minInlineSize: 0
51
+ }), p = {
52
+ centered: e({
53
+ justifyItems: "center",
54
+ maxInlineSize: "100%"
55
+ }),
56
+ inline: e({ flex: `1 1 ${c}` })
57
+ }, m = e({
58
+ margin: 0,
59
+ fontSize: i.textSize.md,
60
+ fontWeight: i.fontWeight.medium,
61
+ lineHeight: i.lineHeight.base,
62
+ color: i.color.text,
63
+ textWrap: "balance",
64
+ overflowWrap: "anywhere"
65
+ }), h = e({
66
+ margin: 0,
67
+ maxInlineSize: s,
68
+ fontSize: i.textSize.sm,
69
+ color: i.color.textMuted,
70
+ textWrap: "pretty",
71
+ overflowWrap: "anywhere"
72
+ }), g = e({
73
+ display: "flex",
74
+ flexWrap: "wrap",
75
+ alignItems: "center",
76
+ gap: i.space[3]
77
+ }), _ = {
78
+ centered: e({ justifyContent: "center" }),
79
+ inline: void 0
80
+ };
81
+ function v(...e) {
82
+ return e.filter(Boolean).join(" ") || void 0;
83
+ }
84
+ function y({ ref: e, title: i, description: s, icon: c, action: y, headingLevel: b = 3, variant: x = "centered", slotProps: S, className: C, sx: w, "aria-labelledby": T, "aria-describedby": E, ...D }) {
85
+ let O = r(), k = `${O}-title`, A = `${O}-description`, j = n(i), M = n(s), N = `h${b}`;
86
+ return /* @__PURE__ */ a(t, {
87
+ className: C,
88
+ styles: [l, u[x]],
89
+ sx: w,
90
+ children: (t) => /* @__PURE__ */ o("section", {
91
+ ...D,
92
+ ref: e,
93
+ "data-ui": "empty-state",
94
+ "data-variant": x,
95
+ "aria-labelledby": T ? v(T, j && k) : void 0,
96
+ "aria-describedby": v(E, M && A),
97
+ className: t,
98
+ children: [
99
+ n(c) && /* @__PURE__ */ a("div", {
100
+ "data-ui": "empty-state-icon",
101
+ "aria-hidden": "true",
102
+ className: S?.icon?.className,
103
+ css: [d, S?.icon?.css],
104
+ children: c
105
+ }),
106
+ /* @__PURE__ */ o("div", {
107
+ "data-ui": "empty-state-content",
108
+ className: S?.content?.className,
109
+ css: [
110
+ f,
111
+ p[x],
112
+ S?.content?.css
113
+ ],
114
+ children: [j && /* @__PURE__ */ a(N, {
115
+ id: k,
116
+ className: S?.title?.className,
117
+ css: [m, S?.title?.css],
118
+ children: i
119
+ }), M && /* @__PURE__ */ a("p", {
120
+ id: A,
121
+ className: S?.description?.className,
122
+ css: [h, S?.description?.css],
123
+ children: s
124
+ })]
125
+ }),
126
+ n(y) && /* @__PURE__ */ a("div", {
127
+ "data-ui": "empty-state-action",
128
+ className: S?.action?.className,
129
+ css: [
130
+ g,
131
+ _[x],
132
+ S?.action?.css
133
+ ],
134
+ children: y
135
+ })
136
+ ]
137
+ })
138
+ });
139
+ }
140
+ y.displayName = "EmptyState";
141
+ //#endregion
142
+ export { y as t };
@@ -0,0 +1,2 @@
1
+ 'use client';
2
+ export { t as EmptyState } from "./empty-state-CDgrjPPf.js";