@jfrader/ui 0.2.0 → 0.4.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 (167) hide show
  1. package/dist/accordion-Bd-j04hW.js +198 -0
  2. package/dist/accordion.js +1 -1
  3. package/dist/alert-BBqaKI4k.js +135 -0
  4. package/dist/alert.js +1 -1
  5. package/dist/avatar-BahDVO9t.js +132 -0
  6. package/dist/avatar.js +1 -1
  7. package/dist/badge-B_sLygxU.js +108 -0
  8. package/dist/badge.js +1 -1
  9. package/dist/breadcrumbs-DVAOxfvL.js +141 -0
  10. package/dist/breadcrumbs.js +1 -1
  11. package/dist/button-P2e7_44z.js +200 -0
  12. package/dist/button.js +1 -1
  13. package/dist/calendar-C9Yad_-w.js +394 -0
  14. package/dist/calendar.js +1 -1
  15. package/dist/card-D-aI2QHx.js +158 -0
  16. package/dist/card.js +1 -1
  17. package/dist/checkbox-COYG6L7d.js +140 -0
  18. package/dist/checkbox.js +1 -1
  19. package/dist/{choice-control-ByFogYcT.js → choice-control-5kJkLXgv.js} +1 -1
  20. package/dist/{collection-registry-1l9f3XJZ.js → collection-registry-BTYi6zGh.js} +1 -1
  21. package/dist/combobox-DiMC2g_u.js +327 -0
  22. package/dist/combobox.js +1 -1
  23. package/dist/command-palette-V_2pEay7.js +379 -0
  24. package/dist/command-palette.js +1 -1
  25. package/dist/container-BOaSptJa.js +41 -0
  26. package/dist/container.js +1 -1
  27. package/dist/date-picker-C29Uo4Tx.js +250 -0
  28. package/dist/date-picker.js +1 -1
  29. package/dist/dialog-xaydbXl2.js +218 -0
  30. package/dist/dialog.js +1 -1
  31. package/dist/divider-DYoJf0I_.js +84 -0
  32. package/dist/divider.js +1 -1
  33. package/dist/field-anatomy-D2ToMeRa.js +109 -0
  34. package/dist/flex-Dh-_J5-U.js +28 -0
  35. package/dist/flex.js +1 -1
  36. package/dist/{icon-wrapper-CFWzew5m.js → icon-wrapper-stN8sD7R.js} +1 -1
  37. package/dist/index.js +38 -37
  38. package/dist/kbd-C3ACoMoE.js +71 -0
  39. package/dist/kbd.js +1 -1
  40. package/dist/{layout-style-7ZTOiWGR.js → layout-style-Cbd1Vilw.js} +1 -1
  41. package/dist/{loading-ring-BpdB0aFi.js → loading-ring-B8-30Dl1.js} +1 -1
  42. package/dist/menu-CGPTNRnF.js +216 -0
  43. package/dist/menu.js +1 -1
  44. package/dist/navigation-DhnKriOp.js +197 -0
  45. package/dist/navigation.js +1 -1
  46. package/dist/pagination-DYdwsxwe.js +156 -0
  47. package/dist/pagination.js +1 -1
  48. package/dist/pill-DO2gHzMb.js +56 -0
  49. package/dist/pill.js +1 -1
  50. package/dist/popover-CdRXjQqI.js +113 -0
  51. package/dist/popover.js +1 -1
  52. package/dist/progress-BpJswTG4.js +90 -0
  53. package/dist/progress.js +1 -1
  54. package/dist/radio-group-Ce0_IWQr.js +145 -0
  55. package/dist/radio-group.js +1 -1
  56. package/dist/select-BgG7WgSh.js +286 -0
  57. package/dist/select.js +1 -1
  58. package/dist/skeleton-OoFlOEXO.js +54 -0
  59. package/dist/skeleton.js +1 -1
  60. package/dist/spinner-C2YDoiMn.js +56 -0
  61. package/dist/spinner.js +1 -1
  62. package/dist/stack-DC3IbtWk.js +27 -0
  63. package/dist/stack.js +1 -1
  64. package/dist/switch-Dr-qjmT4.js +142 -0
  65. package/dist/switch.js +1 -1
  66. package/dist/sx-Dx9JUKp5.js +23 -0
  67. package/dist/tabs-CK_g1RKa.js +203 -0
  68. package/dist/tabs.js +1 -1
  69. package/dist/{text-field-8PQAqRpM.js → text-field-D60ok14S.js} +19 -18
  70. package/dist/text-field.js +1 -1
  71. package/dist/{textarea-CcGWuntL.js → textarea-DyfjtP0A.js} +19 -18
  72. package/dist/textarea.js +1 -1
  73. package/dist/theme-root-BbTBuLMQ.js +46 -0
  74. package/dist/theme-root.js +1 -1
  75. package/dist/theme-scope-t7nAKc2c.js +27 -0
  76. package/dist/toast-CjmELMZZ.js +283 -0
  77. package/dist/toast.js +1 -1
  78. package/dist/toggle-group-CI0e7hFm.js +166 -0
  79. package/dist/toggle-group.js +1 -1
  80. package/dist/tooltip-CaL3rKbV.js +108 -0
  81. package/dist/tooltip.js +1 -1
  82. package/dist/{trigger-style-B1GFmH7M.js → trigger-style-B1KVC8O1.js} +1 -1
  83. package/dist/types/components/accordion/accordion.d.ts +9 -8
  84. package/dist/types/components/alert/alert.d.ts +3 -2
  85. package/dist/types/components/avatar/avatar.d.ts +3 -2
  86. package/dist/types/components/badge/badge.d.ts +3 -2
  87. package/dist/types/components/breadcrumbs/breadcrumbs.d.ts +5 -4
  88. package/dist/types/components/button/button.d.ts +3 -2
  89. package/dist/types/components/calendar/calendar.d.ts +7 -6
  90. package/dist/types/components/card/card.d.ts +13 -12
  91. package/dist/types/components/checkbox/checkbox.d.ts +3 -2
  92. package/dist/types/components/combobox/combobox.d.ts +8 -7
  93. package/dist/types/components/command-palette/command-palette.d.ts +15 -14
  94. package/dist/types/components/container/container.d.ts +3 -2
  95. package/dist/types/components/date-picker/date-picker.d.ts +3 -2
  96. package/dist/types/components/dialog/dialog.d.ts +11 -10
  97. package/dist/types/components/divider/divider.d.ts +3 -2
  98. package/dist/types/components/field/field-anatomy.d.ts +3 -2
  99. package/dist/types/components/flex/flex.d.ts +3 -2
  100. package/dist/types/components/kbd/kbd.d.ts +5 -4
  101. package/dist/types/components/menu/menu.d.ts +9 -8
  102. package/dist/types/components/navigation/navigation.d.ts +7 -6
  103. package/dist/types/components/pagination/pagination.d.ts +3 -2
  104. package/dist/types/components/pill/pill.d.ts +3 -2
  105. package/dist/types/components/popover/popover.d.ts +5 -4
  106. package/dist/types/components/progress/progress.d.ts +3 -2
  107. package/dist/types/components/radio-group/radio-group.d.ts +5 -4
  108. package/dist/types/components/select/select.d.ts +9 -8
  109. package/dist/types/components/skeleton/skeleton.d.ts +3 -2
  110. package/dist/types/components/spinner/spinner.d.ts +3 -2
  111. package/dist/types/components/stack/stack.d.ts +1 -1
  112. package/dist/types/components/switch/switch.d.ts +3 -2
  113. package/dist/types/components/tabs/tabs.d.ts +9 -8
  114. package/dist/types/components/text-field/text-field.d.ts +3 -2
  115. package/dist/types/components/textarea/textarea.d.ts +3 -2
  116. package/dist/types/components/theme-provider/theme-provider.d.ts +11 -0
  117. package/dist/types/components/theme-root/theme-root.d.ts +11 -4
  118. package/dist/types/components/toast/toast.d.ts +3 -2
  119. package/dist/types/components/toggle-group/toggle-group.d.ts +5 -4
  120. package/dist/types/components/tooltip/tooltip.d.ts +5 -4
  121. package/dist/types/index.d.ts +4 -0
  122. package/dist/types/overlay/overlay-portal.d.ts +7 -0
  123. package/dist/types/styling/css.d.ts +3 -2
  124. package/dist/types/styling/styled.d.ts +1 -0
  125. package/dist/types/styling/sx.d.ts +16 -0
  126. package/dist/types/styling/theme-scope.d.ts +19 -0
  127. package/dist/types/styling/theme.d.ts +98 -0
  128. package/dist/use-overlay-floating-Bit-f0FU.js +31 -0
  129. package/dist/{visually-hidden-DCWhf0Cb.js → visually-hidden-BJdvqqvn.js} +1 -1
  130. package/package.json +3 -2
  131. package/dist/accordion-CkOZ-tvs.js +0 -178
  132. package/dist/alert-Dsjx14UW.js +0 -131
  133. package/dist/avatar-BRGKkoSr.js +0 -127
  134. package/dist/badge-DLxUMsCx.js +0 -104
  135. package/dist/breadcrumbs-694hF_hm.js +0 -131
  136. package/dist/button-CoaIcykB.js +0 -190
  137. package/dist/calendar-Doj7PTdG.js +0 -379
  138. package/dist/card-2IM71XZj.js +0 -134
  139. package/dist/checkbox-B7xGNFzp.js +0 -136
  140. package/dist/combobox-Bjhxv5U3.js +0 -311
  141. package/dist/command-palette-BhJwm6cS.js +0 -344
  142. package/dist/container-BhnrGPu-.js +0 -36
  143. package/dist/css-Cgj6sCHn.js +0 -2
  144. package/dist/date-picker-Jk8SpoiO.js +0 -245
  145. package/dist/dialog-fhS07G41.js +0 -187
  146. package/dist/divider-v_78HYF5.js +0 -79
  147. package/dist/field-anatomy-BzGw1Ch9.js +0 -105
  148. package/dist/flex-COZzFqI8.js +0 -22
  149. package/dist/kbd-CeP8Kfvp.js +0 -61
  150. package/dist/menu-B6KCbLCr.js +0 -196
  151. package/dist/navigation-BDht6S2-.js +0 -182
  152. package/dist/pagination-B50PCaDU.js +0 -151
  153. package/dist/pill-2_XzBdkD.js +0 -51
  154. package/dist/popover-DRHbeIVq.js +0 -103
  155. package/dist/progress-CpsskKTD.js +0 -85
  156. package/dist/radio-group-DPI5KUCj.js +0 -136
  157. package/dist/select-C1xGrOhT.js +0 -266
  158. package/dist/skeleton-DitdP-yz.js +0 -49
  159. package/dist/spinner-CFq5HPoo.js +0 -51
  160. package/dist/stack-D_g6NJzo.js +0 -21
  161. package/dist/switch-B5TTU-oJ.js +0 -138
  162. package/dist/tabs-C26PWl2c.js +0 -183
  163. package/dist/theme-root-BRLIA4eb.js +0 -22
  164. package/dist/toast-B1PXuwZ4.js +0 -277
  165. package/dist/toggle-group-N_owicT0.js +0 -156
  166. package/dist/tooltip-BJPisf60.js +0 -98
  167. package/dist/use-overlay-floating-efeqppiw.js +0 -19
@@ -0,0 +1,379 @@
1
+ 'use client';
2
+ import { r as e, t } from "./sx-Dx9JUKp5.js";
3
+ import { t as n } from "./focus-ring-BK5W5_NY.js";
4
+ import { t as r } from "./use-controlled-state-CVXDa-qM.js";
5
+ import { t as i } from "./visually-hidden-BJdvqqvn.js";
6
+ import { t as a } from "./renderable-DzcIj1Lo.js";
7
+ import { a as o, r as s, s as c, t as l } from "./collection-registry-BTYi6zGh.js";
8
+ import { t as u } from "./trigger-style-B1KVC8O1.js";
9
+ import { i as d, r as f, t as p } from "./use-native-dialog-DWpIUVO1.js";
10
+ import { n as m, t as h } from "./surface-DZ4d-2aL.js";
11
+ import { createContext as g, useCallback as _, useContext as v, useId as y, useMemo as b, useRef as x, useState as S } from "react";
12
+ import { vars as C } from "@jfrader/tokens/vars";
13
+ import { jsx as w, jsxs as T } from "@emotion/react/jsx-runtime";
14
+ import { FloatingList as E, useFloatingRootContext as D, useInteractions as O, useListNavigation as ee, useMergeRefs as k } from "@floating-ui/react";
15
+ //#region src/components/command-palette/command-palette.styles.ts
16
+ var A = e({
17
+ ...h,
18
+ marginBlockStart: C.space[12]
19
+ }), j = e({
20
+ ...m,
21
+ display: "flex",
22
+ flexDirection: "column",
23
+ borderRadius: C.radius.lg,
24
+ boxShadow: C.shadow.floating,
25
+ inlineSize: "min(560px, calc(100vw - 32px))"
26
+ }), M = e({
27
+ boxSizing: "border-box",
28
+ inlineSize: "100%",
29
+ blockSize: "48px",
30
+ margin: 0,
31
+ border: 0,
32
+ borderBlockEnd: `1px solid ${C.color.borderControl}`,
33
+ borderStartStartRadius: C.radius.lg,
34
+ borderStartEndRadius: C.radius.lg,
35
+ backgroundColor: "transparent",
36
+ paddingInline: C.space[4],
37
+ font: "inherit",
38
+ fontSize: C.textSize.md,
39
+ color: C.color.text,
40
+ "&::placeholder": { color: C.color.textSubtle },
41
+ "&:focus-visible": { ...n }
42
+ }), N = e({
43
+ boxSizing: "border-box",
44
+ display: "flex",
45
+ flexDirection: "column",
46
+ maxBlockSize: "320px",
47
+ overflow: "auto",
48
+ padding: C.space[1],
49
+ "&[hidden]": { display: "none" }
50
+ }), P = e({
51
+ display: "flex",
52
+ flexDirection: "column",
53
+ "&[hidden]": { display: "none" }
54
+ }), F = e({
55
+ paddingBlock: C.space[1],
56
+ paddingInline: C.space[2],
57
+ fontSize: C.textSize.xs,
58
+ fontWeight: C.fontWeight.medium,
59
+ color: C.color.textMuted
60
+ }), te = e({
61
+ "&:hover, &[data-active]": { backgroundColor: C.color.surfaceHover },
62
+ "&[hidden]": { display: "none" }
63
+ }), I = e({
64
+ paddingBlock: C.space[6],
65
+ paddingInline: C.space[4],
66
+ textAlign: "center",
67
+ fontSize: C.textSize.sm,
68
+ color: C.color.textMuted
69
+ }), ne = "Command palette", re = "No results", L = new Intl.PluralRules("en"), ie = (e, t) => e.toLocaleLowerCase().includes(t.toLocaleLowerCase()), ae = (e) => `${e} ${L.select(e) === "one" ? "result" : "results"}`, R = g(null), z = g(null);
70
+ function B(e) {
71
+ let t = v(R);
72
+ if (!t) throw Error(`CommandPalette.${e} must be rendered inside <CommandPalette>.`);
73
+ return t;
74
+ }
75
+ var V = (e) => {
76
+ e?.setAttribute("autofocus", "");
77
+ };
78
+ function H({ open: e, defaultOpen: t = !1, onOpenChange: n, label: i = ne, filter: a = ie, emptyMessage: s = re, formatResultCount: c = ae, children: l }) {
79
+ let u = y(), [f = !1, p] = r(e, t, n), { dialogElementRef: m, setDialogElement: h, setOpen: g, requestClose: v, repairToken: C } = d(f, p), [T, E] = S(""), [k, A] = S(!1), [j, M] = S(null), [N, P] = o(), [F, te] = S(null), [I, L] = S(null), [z, B] = S(f), V = x([]);
80
+ f !== z && (B(f), f && (E(""), A(!1), M(null)));
81
+ let H = _(() => {
82
+ g(!(f && m.current?.open));
83
+ }, [
84
+ f,
85
+ g,
86
+ m
87
+ ]), { matchedValues: U, matchedIndices: W, visibleGroupIds: G } = b(() => {
88
+ let e = /* @__PURE__ */ new Set(), t = [], n = /* @__PURE__ */ new Set();
89
+ return N.forEach((r, i) => {
90
+ r.index !== -1 && (T === "" || a(r.label, T) || r.keywords !== void 0 && a(r.keywords, T)) && (e.add(i), t.push(r.index), r.groupId !== null && n.add(r.groupId));
91
+ }), t.sort((e, t) => e - t), {
92
+ matchedValues: e,
93
+ matchedIndices: t,
94
+ visibleGroupIds: n
95
+ };
96
+ }, [
97
+ N,
98
+ T,
99
+ a
100
+ ]), K = b(() => new Set(W), [W]), q = j !== null && K.has(j) ? j : W[0] ?? null, J = D({
101
+ open: f,
102
+ onOpenChange: (e) => g(e),
103
+ elements: {
104
+ reference: F,
105
+ floating: I
106
+ }
107
+ }), Y = ee(J, {
108
+ listRef: V,
109
+ activeIndex: q,
110
+ onNavigate: (e) => {
111
+ e !== null && M(e);
112
+ },
113
+ virtual: !0,
114
+ loop: !0,
115
+ focusItemOnOpen: !1,
116
+ disabledIndices: (e) => !K.has(e)
117
+ }), { getReferenceProps: X, getFloatingProps: Z, getItemProps: Q } = O([Y]), $ = W.length, oe = k ? c($) : "", se = b(() => ({
118
+ open: f,
119
+ setOpen: g,
120
+ toggleOpen: H,
121
+ requestClose: v,
122
+ repairToken: C,
123
+ setDialogElement: h,
124
+ label: i,
125
+ emptyMessage: s,
126
+ baseId: u,
127
+ listId: `${u}-list`,
128
+ query: T,
129
+ announcement: oe,
130
+ matchCount: $,
131
+ matchedValues: U,
132
+ visibleGroupIds: G,
133
+ activeIndex: q,
134
+ elementsRef: V,
135
+ setInputElement: te,
136
+ setListElement: L,
137
+ getReferenceProps: X,
138
+ getFloatingProps: Z,
139
+ getItemProps: Q,
140
+ changeQuery: (e) => {
141
+ E(e), A(!0), M(null);
142
+ },
143
+ moveToEdge: (e) => {
144
+ let t = e === "first" ? W[0] : W[W.length - 1];
145
+ t !== void 0 && M(t);
146
+ },
147
+ registration: P
148
+ }), [
149
+ f,
150
+ g,
151
+ H,
152
+ v,
153
+ C,
154
+ h,
155
+ i,
156
+ s,
157
+ u,
158
+ T,
159
+ oe,
160
+ $,
161
+ U,
162
+ W,
163
+ G,
164
+ q,
165
+ X,
166
+ Z,
167
+ Q,
168
+ P
169
+ ]);
170
+ return /* @__PURE__ */ w(R.Provider, {
171
+ value: se,
172
+ children: l
173
+ });
174
+ }
175
+ H.displayName = "CommandPalette";
176
+ function U({ ref: e, onClick: n, className: r, sx: i, ...a }) {
177
+ let { open: o, toggleOpen: s } = B("Trigger"), c = (e) => {
178
+ n?.(e), e.defaultPrevented || s();
179
+ };
180
+ return /* @__PURE__ */ w(t, {
181
+ className: r,
182
+ styles: u,
183
+ sx: i,
184
+ children: (t) => /* @__PURE__ */ w("button", {
185
+ type: "button",
186
+ ...a,
187
+ ref: e,
188
+ "data-ui": "command-palette-trigger",
189
+ "aria-haspopup": "dialog",
190
+ "aria-expanded": o,
191
+ onClick: c,
192
+ className: t
193
+ })
194
+ });
195
+ }
196
+ U.displayName = "CommandPalette.Trigger";
197
+ function W({ ref: e, className: n, sx: r, ...a }) {
198
+ let { children: o, onCancel: s, onClick: c, onClose: l, ...u } = p(a), d = B("Content"), { label: m, announcement: h } = d, g = f(d, {
199
+ onCancel: s,
200
+ onClick: c,
201
+ onClose: l
202
+ }, e);
203
+ return /* @__PURE__ */ w(t, {
204
+ className: n,
205
+ styles: A,
206
+ sx: r,
207
+ children: (e) => /* @__PURE__ */ w("dialog", {
208
+ "aria-label": m,
209
+ ...u,
210
+ ...g,
211
+ "data-ui": "command-palette",
212
+ "aria-modal": "true",
213
+ className: e,
214
+ children: /* @__PURE__ */ T("div", {
215
+ css: j,
216
+ children: [o, /* @__PURE__ */ w("div", {
217
+ role: "status",
218
+ "aria-live": "polite",
219
+ "aria-atomic": "true",
220
+ css: i,
221
+ children: h
222
+ })]
223
+ })
224
+ })
225
+ });
226
+ }
227
+ W.displayName = "CommandPalette.Content";
228
+ function G({ ref: e, onChange: n, onKeyDown: r, className: i, sx: a, ...o }) {
229
+ let { label: s, listId: c, query: l, matchCount: u, activeIndex: d, elementsRef: f, requestClose: p, setInputElement: m, getReferenceProps: h, changeQuery: g, moveToEdge: _ } = B("Input"), v = k([
230
+ m,
231
+ V,
232
+ e
233
+ ]), y = (e) => {
234
+ n?.(e), g(e.currentTarget.value);
235
+ }, b = (e) => {
236
+ r?.(e), !(e.defaultPrevented || e.nativeEvent.isComposing) && (e.key === "Escape" ? (e.preventDefault(), p()) : (e.key === "Home" || e.key === "End") && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey ? (e.preventDefault(), _(e.key === "Home" ? "first" : "last")) : e.key === "Enter" && d !== null && (e.preventDefault(), f.current[d]?.click()));
237
+ };
238
+ return /* @__PURE__ */ w(t, {
239
+ className: i,
240
+ styles: M,
241
+ sx: a,
242
+ children: (e) => /* @__PURE__ */ w("input", {
243
+ "aria-label": s,
244
+ autoComplete: "off",
245
+ spellCheck: !1,
246
+ ...h({
247
+ ...o,
248
+ onChange: y,
249
+ onKeyDown: b
250
+ }),
251
+ ref: v,
252
+ type: "text",
253
+ value: l,
254
+ role: "combobox",
255
+ "aria-autocomplete": "list",
256
+ "aria-expanded": u > 0,
257
+ "aria-controls": c,
258
+ "data-ui": "command-palette-input",
259
+ className: e
260
+ })
261
+ });
262
+ }
263
+ G.displayName = "CommandPalette.Input";
264
+ function K({ ref: e, onMouseDown: n, children: r, className: i, sx: a, ...o }) {
265
+ let { label: s, listId: c, matchCount: l, elementsRef: u, setListElement: d, getFloatingProps: f } = B("List"), p = k([d, e]), m = (e) => {
266
+ n?.(e), e.preventDefault();
267
+ };
268
+ return /* @__PURE__ */ w(t, {
269
+ className: i,
270
+ styles: N,
271
+ sx: a,
272
+ children: (e) => /* @__PURE__ */ w("div", {
273
+ "aria-label": s,
274
+ ...f({
275
+ ...o,
276
+ onMouseDown: m
277
+ }),
278
+ ref: p,
279
+ id: c,
280
+ role: "listbox",
281
+ hidden: l === 0,
282
+ "data-ui": "command-palette-list",
283
+ className: e,
284
+ children: /* @__PURE__ */ w(E, {
285
+ elementsRef: u,
286
+ children: r
287
+ })
288
+ })
289
+ });
290
+ }
291
+ K.displayName = "CommandPalette.List";
292
+ function q({ ref: e, children: n, className: r, sx: i, ...o }) {
293
+ let { matchCount: s, emptyMessage: c } = B("Empty");
294
+ return s > 0 ? null : /* @__PURE__ */ w(t, {
295
+ className: r,
296
+ styles: I,
297
+ sx: i,
298
+ children: (t) => /* @__PURE__ */ w("div", {
299
+ ...o,
300
+ ref: e,
301
+ "data-ui": "command-palette-empty",
302
+ className: t,
303
+ children: a(n) ? n : c
304
+ })
305
+ });
306
+ }
307
+ q.displayName = "CommandPalette.Empty";
308
+ function J({ ref: e, label: n, children: r, "aria-labelledby": i, className: a, sx: o, ...s }) {
309
+ let { visibleGroupIds: c } = B("Group"), l = y(), u = `${l}-heading`;
310
+ return /* @__PURE__ */ w(t, {
311
+ className: a,
312
+ styles: P,
313
+ sx: o,
314
+ children: (t) => /* @__PURE__ */ T("div", {
315
+ ...s,
316
+ ref: e,
317
+ role: "group",
318
+ "aria-labelledby": [i, u].filter(Boolean).join(" "),
319
+ hidden: !c.has(l),
320
+ "data-ui": "command-palette-group",
321
+ className: t,
322
+ children: [/* @__PURE__ */ w("div", {
323
+ id: u,
324
+ css: F,
325
+ children: n
326
+ }), /* @__PURE__ */ w(z.Provider, {
327
+ value: l,
328
+ children: r
329
+ })]
330
+ })
331
+ });
332
+ }
333
+ J.displayName = "CommandPalette.Group";
334
+ function Y({ ref: e, value: n, onSelect: r, keywords: i, onClick: a, children: o, className: u, sx: d, ...f }) {
335
+ let { baseId: p, activeIndex: m, matchedValues: h, getItemProps: g, setOpen: _, registration: y } = B("Item"), b = v(z), S = x(null), { ref: C, index: T } = s(n, y, S, (e, t) => ({
336
+ index: e,
337
+ label: t,
338
+ keywords: i,
339
+ groupId: b
340
+ })), E = k([
341
+ C,
342
+ S,
343
+ e
344
+ ]), D = T !== -1 && m === T, O = (e) => {
345
+ a?.(e), !e.defaultPrevented && (r?.(), _(!1));
346
+ };
347
+ return /* @__PURE__ */ w(t, {
348
+ className: u,
349
+ styles: [c, te],
350
+ sx: d,
351
+ children: (e) => /* @__PURE__ */ w("div", {
352
+ ...g({
353
+ id: l(p, n),
354
+ ...f,
355
+ onClick: O
356
+ }),
357
+ ref: E,
358
+ role: "option",
359
+ "aria-selected": D,
360
+ hidden: !h.has(n),
361
+ "data-active": D || void 0,
362
+ "data-ui": "command-palette-item",
363
+ className: e,
364
+ children: o
365
+ })
366
+ });
367
+ }
368
+ Y.displayName = "CommandPalette.Item";
369
+ var X = Object.assign(H, {
370
+ Trigger: U,
371
+ Content: W,
372
+ Input: G,
373
+ List: K,
374
+ Empty: q,
375
+ Group: J,
376
+ Item: Y
377
+ });
378
+ //#endregion
379
+ export { X as t };
@@ -1,2 +1,2 @@
1
1
  'use client';
2
- export { t as CommandPalette } from "./command-palette-BhJwm6cS.js";
2
+ export { t as CommandPalette } from "./command-palette-V_2pEay7.js";
@@ -0,0 +1,41 @@
1
+ 'use client';
2
+ import { r as e, t } from "./sx-Dx9JUKp5.js";
3
+ import { n } from "./layout-style-Cbd1Vilw.js";
4
+ import { jsx as r } from "@emotion/react/jsx-runtime";
5
+ //#region src/components/container/container.tsx
6
+ var i = {
7
+ sm: "640px",
8
+ md: "768px",
9
+ lg: "1024px",
10
+ xl: "1280px"
11
+ }, a = e({
12
+ boxSizing: "border-box",
13
+ inlineSize: "100%",
14
+ marginInline: "auto"
15
+ }), o = {
16
+ sm: e({ maxInlineSize: i.sm }),
17
+ md: e({ maxInlineSize: i.md }),
18
+ lg: e({ maxInlineSize: i.lg }),
19
+ xl: e({ maxInlineSize: i.xl })
20
+ }, s = n("paddingInline");
21
+ function c({ ref: e, size: n = "lg", paddingInline: i = "md", className: c, sx: l, ...u }) {
22
+ return /* @__PURE__ */ r(t, {
23
+ className: c,
24
+ styles: [
25
+ a,
26
+ o[n],
27
+ s[i]
28
+ ],
29
+ sx: l,
30
+ children: (t) => /* @__PURE__ */ r("div", {
31
+ ...u,
32
+ ref: e,
33
+ "data-ui": "container",
34
+ "data-size": n,
35
+ className: t
36
+ })
37
+ });
38
+ }
39
+ c.displayName = "Container";
40
+ //#endregion
41
+ export { c as t };
package/dist/container.js CHANGED
@@ -1,2 +1,2 @@
1
1
  'use client';
2
- export { t as Container } from "./container-BhnrGPu-.js";
2
+ export { t as Container } from "./container-BOaSptJa.js";
@@ -0,0 +1,250 @@
1
+ 'use client';
2
+ import { r as e, t } from "./sx-Dx9JUKp5.js";
3
+ import { t as n } from "./use-controlled-state-CVXDa-qM.js";
4
+ import { t as r } from "./renderable-DzcIj1Lo.js";
5
+ import { t as i } from "./calendar-C9Yad_-w.js";
6
+ import { n as a } from "./surface-DZ4d-2aL.js";
7
+ import { n as o, t as s } from "./use-overlay-floating-Bit-f0FU.js";
8
+ import { t as c } from "./text-field-D60ok14S.js";
9
+ import { createContext as l, useContext as u, useEffect as d, useId as f, useLayoutEffect as p, useMemo as m, useRef as h, useState as g } from "react";
10
+ import { vars as _ } from "@jfrader/tokens/vars";
11
+ import { jsx as v, jsxs as y } from "@emotion/react/jsx-runtime";
12
+ import { FloatingFocusManager as b, useClick as x, useDismiss as S, useInteractions as C, useMergeRefs as w, useRole as T } from "@floating-ui/react";
13
+ //#region src/components/date-picker/date-picker.tsx
14
+ var E = "bottom-start", D = /* @__PURE__ */ new Set(["Enter", "ArrowDown"]), O = " ", k = "[data-ui=\"calendar-day\"][tabindex=\"0\"]", A = "[data-ui=\"calendar-day\"]", j = /^\d{4}-\d{2}-\d{2}$/, M = {
15
+ calendar: "gregory",
16
+ timeZone: "UTC",
17
+ dateStyle: "medium"
18
+ }, N = l(null);
19
+ function P(e) {
20
+ let t = u(N);
21
+ if (!t) throw Error(`DatePicker.${e} must be rendered inside <DatePicker>.`);
22
+ return t;
23
+ }
24
+ var F = (e, t) => String(e).padStart(t, "0"), I = (e, t, n) => `${F(e, 4)}-${F(t, 2)}-${F(n, 2)}`;
25
+ function L(e) {
26
+ if (e === void 0 || !j.test(e)) return;
27
+ let [t = NaN, n = NaN, r = NaN] = e.split("-").map(Number), i = new Date(Date.UTC(0, 0, 1));
28
+ return i.setUTCFullYear(t, n - 1, r), I(i.getUTCFullYear(), i.getUTCMonth() + 1, i.getUTCDate()) === e ? i : void 0;
29
+ }
30
+ var R = (e) => L(e) ? e : void 0;
31
+ function ee(e, t, n) {
32
+ return t !== void 0 && e < t ? t : n !== void 0 && e > n ? n : e;
33
+ }
34
+ function te() {
35
+ let e = /* @__PURE__ */ new Date();
36
+ return I(e.getFullYear(), e.getMonth() + 1, e.getDate());
37
+ }
38
+ var ne = () => typeof navigator > "u" ? void 0 : navigator.language;
39
+ function re(e, t) {
40
+ let n = new Intl.DisplayNames(t, { type: "dateTimeField" });
41
+ return e.formatToParts(/* @__PURE__ */ new Date(0)).map((e) => e.type === "literal" ? e.value : n.of(e.type) ?? e.value).join("");
42
+ }
43
+ function z(e) {
44
+ let t = e?.querySelector(k) ?? null;
45
+ return t?.focus({ preventScroll: !0 }), t;
46
+ }
47
+ var B = e({
48
+ cursor: "pointer",
49
+ "&:disabled": { cursor: "not-allowed" }
50
+ }), V = e({
51
+ ...a,
52
+ borderRadius: _.radius.md,
53
+ boxShadow: _.shadow.overlay,
54
+ padding: _.space[3]
55
+ });
56
+ function H({ value: e, defaultValue: t, onValueChange: r, open: i, defaultOpen: a = !1, onOpenChange: o, min: c, max: l, locale: u, firstDayOfWeek: f, disabled: p = !1, name: _, placeholder: b, children: w }) {
57
+ let [D, O] = n(e, t, r), [k = !1, A] = n(i, a, o), [j, P] = g(!1), F = p || j, I = k && !F, [z, B] = g(null), V = h(null), H = h(!1), U = m(() => new Intl.DateTimeFormat(u ?? ne()).resolvedOptions().locale, [u]), W = m(() => new Intl.DateTimeFormat(U, M), [U]), G = m(() => re(W, U), [W, U]), K = L(D), q = K ? W.format(K) : "", J = R(c), Y = R(l), X = ee(R(D) ?? te(), J, Y).slice(0, 7), { refs: Z, floatingStyles: Q, context: $ } = s({
58
+ open: I,
59
+ placement: E,
60
+ onOpenChange: (e, t, n) => {
61
+ F && e || (e || (H.current = n === "escape-key"), A(e));
62
+ }
63
+ });
64
+ d(() => {
65
+ F && (H.current = !1, k && A(!1));
66
+ }, [
67
+ F,
68
+ k,
69
+ A
70
+ ]), d(() => {
71
+ !F && !I && H.current && (H.current = !1, Z.domReference.current?.focus());
72
+ }, [
73
+ F,
74
+ I,
75
+ Z
76
+ ]);
77
+ let ie = x($, {
78
+ enabled: !F,
79
+ keyboardHandlers: !1
80
+ }), ae = S($, {
81
+ escapeKey: !0,
82
+ outsidePress: !0
83
+ }), oe = T($, { role: "dialog" }), { getReferenceProps: se, getFloatingProps: ce } = C([
84
+ ie,
85
+ ae,
86
+ oe
87
+ ]), le = m(() => ({
88
+ open: I,
89
+ disabled: F,
90
+ value: D,
91
+ displayValue: q,
92
+ placeholder: b ?? G,
93
+ initialMonth: X,
94
+ min: J,
95
+ max: Y,
96
+ locale: U,
97
+ firstDayOfWeek: f,
98
+ inputLabelling: z,
99
+ gridRef: V,
100
+ refs: Z,
101
+ floatingContext: $,
102
+ floatingStyles: Q,
103
+ getReferenceProps: se,
104
+ getFloatingProps: ce,
105
+ requestOpenChange: (e) => {
106
+ F && e || A(e);
107
+ },
108
+ selectDate: (e) => {
109
+ F || (O(e), H.current = !0, A(!1));
110
+ },
111
+ setInputLabelling: B,
112
+ setInputDisabled: P
113
+ }), [
114
+ I,
115
+ F,
116
+ D,
117
+ q,
118
+ b,
119
+ G,
120
+ X,
121
+ J,
122
+ Y,
123
+ U,
124
+ f,
125
+ z,
126
+ Z,
127
+ $,
128
+ Q,
129
+ se,
130
+ ce,
131
+ A,
132
+ O
133
+ ]);
134
+ return /* @__PURE__ */ y(N.Provider, {
135
+ value: le,
136
+ children: [w, _ !== void 0 && /* @__PURE__ */ v("input", {
137
+ type: "hidden",
138
+ name: _,
139
+ value: D ?? "",
140
+ disabled: F
141
+ })]
142
+ });
143
+ }
144
+ H.displayName = "DatePicker";
145
+ function U({ ref: e, label: t, id: n, disabled: i, slotProps: a, onKeyDown: o, onKeyUp: s, ...l }) {
146
+ let { open: u, disabled: d, displayValue: m, placeholder: h, gridRef: g, refs: _, getReferenceProps: y, requestOpenChange: b, setInputLabelling: x, setInputDisabled: S } = P("Input"), C = w([_.setReference, e]), T = f(), E = n ?? T, k = `${E}-label`, A = r(t), j = l["aria-labelledby"], M = l["aria-label"], N = M ?? (typeof t == "string" ? t : void 0), F = d || i === !0;
147
+ p(() => (S(i === !0), () => S(!1)), [i, S]), p(() => (x(j === void 0 ? M === void 0 ? typeof t == "string" ? { label: t } : { labelledBy: A ? k : void 0 } : { label: M } : { labelledBy: j }), () => x(null)), [
148
+ j,
149
+ M,
150
+ t,
151
+ A,
152
+ k,
153
+ x
154
+ ]);
155
+ let I = () => {
156
+ F || (u ? z(g.current) : b(!0));
157
+ }, L = (e) => {
158
+ o?.(e), !(e.defaultPrevented || F) && (e.key === O ? e.preventDefault() : D.has(e.key) && (e.preventDefault(), I()));
159
+ }, R = (e) => {
160
+ s?.(e), !(e.defaultPrevented || F || e.key !== O) && I();
161
+ };
162
+ return /* @__PURE__ */ v(c, {
163
+ ...y({
164
+ ...l,
165
+ onKeyDown: L,
166
+ onKeyUp: R
167
+ }),
168
+ ref: C,
169
+ id: E,
170
+ label: A ? /* @__PURE__ */ v("span", {
171
+ id: k,
172
+ children: t
173
+ }) : t,
174
+ slotProps: {
175
+ ...a,
176
+ control: {
177
+ ...a?.control,
178
+ css: [B, a?.control?.css]
179
+ }
180
+ },
181
+ value: m,
182
+ placeholder: h,
183
+ disabled: F,
184
+ readOnly: !0,
185
+ role: "combobox",
186
+ "aria-label": N,
187
+ "aria-autocomplete": "none",
188
+ "data-state": u ? "open" : "closed",
189
+ "data-ui": "date-picker-input"
190
+ });
191
+ }
192
+ U.displayName = "DatePicker.Input";
193
+ function W({ ref: e, style: n, className: r, sx: a, ...s }) {
194
+ let { open: c, value: l, initialMonth: u, min: d, max: f, locale: p, firstDayOfWeek: m, inputLabelling: g, gridRef: _, refs: x, floatingContext: S, floatingStyles: C, getFloatingProps: T, selectDate: E } = P("Popup"), D = w([x.setFloating, e]), O = h(null), k = w([(e) => {
195
+ _.current = e, O.current = z(e);
196
+ }]);
197
+ if (!c) return null;
198
+ let j = s["aria-labelledby"] !== void 0 || s["aria-label"] !== void 0 ? {} : g?.labelledBy === void 0 ? { "aria-label": g?.label } : { "aria-labelledby": g.labelledBy }, M = (e) => {
199
+ let t = e.target.closest(A);
200
+ if (t?.disabled) return;
201
+ let n = t?.dataset.date;
202
+ n !== void 0 && E(n);
203
+ }, N = (e) => {
204
+ e.target.closest(A)?.disabled && e.preventDefault();
205
+ };
206
+ return /* @__PURE__ */ v(o, { children: /* @__PURE__ */ v(b, {
207
+ context: S,
208
+ modal: !1,
209
+ initialFocus: O,
210
+ returnFocus: !1,
211
+ children: /* @__PURE__ */ v(t, {
212
+ className: r,
213
+ styles: V,
214
+ sx: a,
215
+ children: (e) => /* @__PURE__ */ v("div", {
216
+ ...T({
217
+ ...j,
218
+ ...s
219
+ }),
220
+ ref: D,
221
+ "data-ui": "date-picker-popup",
222
+ style: {
223
+ ...n,
224
+ ...C
225
+ },
226
+ className: e,
227
+ children: /* @__PURE__ */ y(i, {
228
+ value: l ?? "",
229
+ defaultVisibleMonth: u,
230
+ min: d,
231
+ max: f,
232
+ locale: p,
233
+ firstDayOfWeek: m,
234
+ children: [/* @__PURE__ */ v(i.Header, {}), /* @__PURE__ */ v(i.Grid, {
235
+ ref: k,
236
+ onClick: M,
237
+ onPointerDownCapture: N
238
+ })]
239
+ })
240
+ })
241
+ })
242
+ }) });
243
+ }
244
+ W.displayName = "DatePicker.Popup";
245
+ var G = Object.assign(H, {
246
+ Input: U,
247
+ Popup: W
248
+ });
249
+ //#endregion
250
+ export { G as t };
@@ -1,2 +1,2 @@
1
1
  'use client';
2
- export { t as DatePicker } from "./date-picker-Jk8SpoiO.js";
2
+ export { t as DatePicker } from "./date-picker-C29Uo4Tx.js";