@spear-ai/spectral 1.11.3 → 1.12.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (123) hide show
  1. package/README.md +4 -0
  2. package/dist/.js +124 -121
  3. package/dist/{Accordion-CDXdSAST.js → Accordion-Cyrb2byI.js} +1 -1
  4. package/dist/Accordion.js +1 -1
  5. package/dist/Alert/AlertBase.js +1 -1
  6. package/dist/Alert.js +3 -3
  7. package/dist/{AnimatePresence-D-9jXfgI.js → AnimatePresence-D9FLxIGV.js} +1 -1
  8. package/dist/Avatar.js +46 -48
  9. package/dist/Badge.js +1 -1
  10. package/dist/Button.js +1 -1
  11. package/dist/ButtonGroup/ButtonGroupButton.js +1 -1
  12. package/dist/ButtonGroup.js +1 -1
  13. package/dist/ButtonIcon.js +1 -1
  14. package/dist/{Calendar-s4lyijkn.js → Calendar-2UVWeLYp.js} +4 -4
  15. package/dist/Checkbox/CheckboxBase.js +1 -1
  16. package/dist/Checkbox.d.ts +10 -3
  17. package/dist/Checkbox.js +55 -35
  18. package/dist/{es2015-YHaMV-St.js → Combination-9q50p_Vu.js} +251 -254
  19. package/dist/Combobox/ComboboxBase.js +492 -3
  20. package/dist/Combobox-Ch5Rxk5v.js +6360 -0
  21. package/dist/Combobox.d.ts +5 -3
  22. package/dist/Combobox.js +3 -143
  23. package/dist/ControlGroup/ControlGroupSelect.d.ts +5 -2
  24. package/dist/ControlGroup/ControlGroupSelect.js +32 -29
  25. package/dist/ControlGroup.d.ts +3 -2
  26. package/dist/ControlGroup.js +41 -33
  27. package/dist/DataCard/Card.js +1 -1
  28. package/dist/DataCard.js +1 -1
  29. package/dist/DateTimePicker/Calendar.js +1 -1
  30. package/dist/DateTimePicker/DateTimeDisplayInput.js +84 -83
  31. package/dist/DateTimePicker/DateTimeInput.js +2 -2
  32. package/dist/DateTimePicker/DateTimeUtils.js +1 -1
  33. package/dist/DateTimePicker/TimePeriodSelect.js +32 -35
  34. package/dist/DateTimePicker/TimePicker.js +2 -2
  35. package/dist/DateTimePicker.d.ts +1 -1
  36. package/dist/DateTimePicker.js +55 -52
  37. package/dist/{DateTimeUtils-DVvG6H-p.js → DateTimeUtils-DrR2JWoU.js} +1 -1
  38. package/dist/Dialog.js +3 -3
  39. package/dist/Drawer.js +1 -1
  40. package/dist/DropdownMenu.d.ts +61 -0
  41. package/dist/DropdownMenu.js +869 -0
  42. package/dist/{HoverCard-CYDsIiVK.js → HoverCard-BGpW6LnA.js} +3 -3
  43. package/dist/HoverCard.js +1 -1
  44. package/dist/Icons/AdjustmentsIcon.d.ts +5 -0
  45. package/dist/Icons/AdjustmentsIcon.js +78 -0
  46. package/dist/Icons/MenuDotsIcon.d.ts +5 -0
  47. package/dist/Icons/MenuDotsIcon.js +36 -0
  48. package/dist/Icons/MenuIcon.d.ts +5 -0
  49. package/dist/Icons/MenuIcon.js +36 -0
  50. package/dist/Icons/index.d.ts +3 -0
  51. package/dist/Icons.js +81 -78
  52. package/dist/IconsAnimated/PanelLeftCloseIcon.js +3 -3
  53. package/dist/IconsAnimated/PanelLeftOpenIcon.js +3 -3
  54. package/dist/Input.js +1 -1
  55. package/dist/InputNumeric.js +1 -1
  56. package/dist/{InputOTP-cVn5Bzyp.js → InputOTP-BkSw_KIB.js} +12 -10
  57. package/dist/InputOTP.js +1 -1
  58. package/dist/Kbd.js +1 -1
  59. package/dist/Label.js +1 -1
  60. package/dist/MultiSelect/MultiSelectBase.d.ts +6 -4
  61. package/dist/MultiSelect/MultiSelectBase.js +222 -201
  62. package/dist/MultiSelect.d.ts +2 -1
  63. package/dist/MultiSelect.js +14 -12
  64. package/dist/Popover.js +2 -2
  65. package/dist/RadioButton.js +1 -1
  66. package/dist/RadioButtonGroup/RadioButtonGroupBase.js +1 -1
  67. package/dist/RadioButtonGroup.js +1 -1
  68. package/dist/RadioGroup-CfjhpW5o.js +328 -0
  69. package/dist/RadioGroup.d.ts +7 -0
  70. package/dist/RadioGroup.js +1 -1
  71. package/dist/Select.d.ts +5 -2
  72. package/dist/Select.js +97 -85
  73. package/dist/Separator.js +1 -1
  74. package/dist/Skeleton.js +1 -1
  75. package/dist/{Slider-BzzZT3Zm.js → Slider-mODhqkCs.js} +4 -4
  76. package/dist/Slider.js +1 -1
  77. package/dist/Switch-Wj_zov--.js +144 -0
  78. package/dist/Switch.d.ts +12 -3
  79. package/dist/Switch.js +1 -1
  80. package/dist/Tabs/TabsBase.js +4 -4
  81. package/dist/Tabs.js +1 -1
  82. package/dist/Textarea.d.ts +3 -2
  83. package/dist/Textarea.js +50 -45
  84. package/dist/{Toast-9zqXxKKO.js → Toast-CJvzLlMD.js} +1 -1
  85. package/dist/Toast.js +1 -1
  86. package/dist/Toggle.js +1 -1
  87. package/dist/ToggleGroup.js +1 -1
  88. package/dist/{Tooltip-D1K8kY1y.js → Tooltip-DH_BzFye.js} +5 -5
  89. package/dist/Tooltip.js +1 -1
  90. package/dist/Tray.js +5 -5
  91. package/dist/{chunk-h9knIhTc.js → chunk-C4rFPcKS.js} +1 -1
  92. package/dist/dist-BMu6Dgh_.js +149 -0
  93. package/dist/{dist-fW81qjVl.js → dist-C9fJjxxB.js} +41 -41
  94. package/dist/{dist-C0Hifjgh.js → dist-Cv8I-d2q.js} +2 -2
  95. package/dist/{dist-B9tup-4O.js → dist-D6QANKSj.js} +5 -5
  96. package/dist/{dist-3Af8168y.js → dist-Tbzy5UFA.js} +1 -1
  97. package/dist/{dist-B2k1iWFp.js → dist-jQ7HawWM.js} +1 -1
  98. package/dist/{dist-BtdmHAzK.js → dist-nYKAWiy4.js} +6 -6
  99. package/dist/main.js +1 -1
  100. package/dist/primitives/button.js +1 -1
  101. package/dist/primitives/input-group.js +1 -1
  102. package/dist/primitives/input.js +1 -1
  103. package/dist/primitives/popover.js +2 -2
  104. package/dist/primitives/select.js +40 -40
  105. package/dist/primitives/textarea.js +1 -1
  106. package/dist/{proxy-Dn10Pl_g.js → proxy-CCB7C4Pu.js} +10 -10
  107. package/dist/styles/spectral.css +1 -1
  108. package/dist/{twUtils-VNWgstKL.js → twUtils-D_qzdiwM.js} +1 -1
  109. package/dist/{use-animation-CBUDycyW.js → use-animation-C-qL83hj.js} +1 -1
  110. package/dist/utils/formFieldUtils.d.ts +15 -1
  111. package/dist/utils/formFieldUtils.d.ts.map +1 -1
  112. package/dist/utils/formFieldUtils.js +35 -19
  113. package/dist/utils/twUtils.js +1 -1
  114. package/package.json +27 -22
  115. package/dist/ComboboxBase-qX-mQhT6.js +0 -491
  116. package/dist/RadioGroup-w_q6RGEK.js +0 -447
  117. package/dist/Switch-CVzRJ-0n.js +0 -126
  118. /package/dist/{dist-Bfjk-jx9.js → dist-ChNh3U3S.js} +0 -0
  119. /package/dist/{dist-B4FgboI8.js → dist-Cujfuel1.js} +0 -0
  120. /package/dist/{dist-D8Wb_MX9.js → dist-DDjUcieO.js} +0 -0
  121. /package/dist/{dist-s1uWaZYZ.js → dist-DFT13f_s.js} +0 -0
  122. /package/dist/{dist-ClmepHp4.js → dist-DIt8FP2G.js} +0 -0
  123. /package/dist/{dist-BK1K0g9W.js → dist-K0_i37VL.js} +0 -0
@@ -0,0 +1,328 @@
1
+ import "./styles/main.css";
2
+ import { a as e, d as t, l as n, r, t as i } from "./dist-7HRQ5IKN.js";
3
+ import { t as a } from "./dist-CGzgmYB9.js";
4
+ import { t as o } from "./dist-Bft31cJh.js";
5
+ import { t as s } from "./twUtils-D_qzdiwM.js";
6
+ import { ErrorMessage as c, WarningMessage as l, useFormFieldId as u } from "./utils/formFieldUtils.js";
7
+ import { Label as d } from "./Label.js";
8
+ import { t as f } from "./dist-K0_i37VL.js";
9
+ import { t as p } from "./dist-DFT13f_s.js";
10
+ import { n as m, r as h, t as g } from "./dist-BMu6Dgh_.js";
11
+ import { a as _, i as v, o as y, t as b, u as x } from "./proxy-CCB7C4Pu.js";
12
+ import { t as S } from "./AnimatePresence-D9FLxIGV.js";
13
+ import * as C from "react";
14
+ import { createContext as w, memo as T, useContext as E, useId as D, useMemo as ee, useState as O } from "react";
15
+ import { jsx as k, jsxs as A } from "react/jsx-runtime";
16
+ //#region node_modules/.pnpm/@radix-ui+react-radio-group@1.3.8_@types+react-dom@19.2.3_@types+react@19.2.14__@types+_3694a89ac1e1986bc2583e58a261f48c/node_modules/@radix-ui/react-radio-group/dist/index.mjs
17
+ var j = "Radio", [te, M] = t(j), [ne, re] = te(j), N = C.forwardRef((t, r) => {
18
+ let { __scopeRadio: a, name: o, checked: s = !1, required: c, disabled: l, value: u = "on", onCheck: d, form: f, ...p } = t, [m, h] = C.useState(null), g = n(r, (e) => h(e)), _ = C.useRef(!1), v = m ? f || !!m.closest("form") : !0;
19
+ return /* @__PURE__ */ A(ne, {
20
+ scope: a,
21
+ checked: s,
22
+ disabled: l,
23
+ children: [/* @__PURE__ */ k(i.button, {
24
+ type: "button",
25
+ role: "radio",
26
+ "aria-checked": s,
27
+ "data-state": L(s),
28
+ "data-disabled": l ? "" : void 0,
29
+ disabled: l,
30
+ value: u,
31
+ ...p,
32
+ ref: g,
33
+ onClick: e(t.onClick, (e) => {
34
+ s || d?.(), v && (_.current = e.isPropagationStopped(), _.current || e.stopPropagation());
35
+ })
36
+ }), v && /* @__PURE__ */ k(I, {
37
+ control: m,
38
+ bubbles: !_.current,
39
+ name: o,
40
+ value: u,
41
+ checked: s,
42
+ required: c,
43
+ disabled: l,
44
+ form: f,
45
+ style: { transform: "translateX(-100%)" }
46
+ })]
47
+ });
48
+ });
49
+ N.displayName = j;
50
+ var P = "RadioIndicator", F = C.forwardRef((e, t) => {
51
+ let { __scopeRadio: n, forceMount: r, ...a } = e, s = re(P, n);
52
+ return /* @__PURE__ */ k(o, {
53
+ present: r || s.checked,
54
+ children: /* @__PURE__ */ k(i.span, {
55
+ "data-state": L(s.checked),
56
+ "data-disabled": s.disabled ? "" : void 0,
57
+ ...a,
58
+ ref: t
59
+ })
60
+ });
61
+ });
62
+ F.displayName = P;
63
+ var ie = "RadioBubbleInput", I = C.forwardRef(({ __scopeRadio: e, control: t, checked: r, bubbles: a = !0, ...o }, s) => {
64
+ let c = C.useRef(null), l = n(c, s), u = p(r), d = f(t);
65
+ return C.useEffect(() => {
66
+ let e = c.current;
67
+ if (!e) return;
68
+ let t = window.HTMLInputElement.prototype, n = Object.getOwnPropertyDescriptor(t, "checked").set;
69
+ if (u !== r && n) {
70
+ let t = new Event("click", { bubbles: a });
71
+ n.call(e, r), e.dispatchEvent(t);
72
+ }
73
+ }, [
74
+ u,
75
+ r,
76
+ a
77
+ ]), /* @__PURE__ */ k(i.input, {
78
+ type: "radio",
79
+ "aria-hidden": !0,
80
+ defaultChecked: r,
81
+ ...o,
82
+ tabIndex: -1,
83
+ ref: l,
84
+ style: {
85
+ ...o.style,
86
+ ...d,
87
+ position: "absolute",
88
+ pointerEvents: "none",
89
+ opacity: 0,
90
+ margin: 0
91
+ }
92
+ });
93
+ });
94
+ I.displayName = ie;
95
+ function L(e) {
96
+ return e ? "checked" : "unchecked";
97
+ }
98
+ var ae = [
99
+ "ArrowUp",
100
+ "ArrowDown",
101
+ "ArrowLeft",
102
+ "ArrowRight"
103
+ ], R = "RadioGroup", [oe, se] = t(R, [h, M]), z = h(), B = M(), [V, ce] = oe(R), H = C.forwardRef((e, t) => {
104
+ let { __scopeRadioGroup: n, name: o, defaultValue: s, value: c, required: l = !1, disabled: u = !1, orientation: d, dir: f, loop: p = !0, onValueChange: h, ...g } = e, _ = z(n), v = a(f), [y, b] = r({
105
+ prop: c,
106
+ defaultProp: s ?? null,
107
+ onChange: h,
108
+ caller: R
109
+ });
110
+ return /* @__PURE__ */ k(V, {
111
+ scope: n,
112
+ name: o,
113
+ required: l,
114
+ disabled: u,
115
+ value: y,
116
+ onValueChange: b,
117
+ children: /* @__PURE__ */ k(m, {
118
+ asChild: !0,
119
+ ..._,
120
+ orientation: d,
121
+ dir: v,
122
+ loop: p,
123
+ children: /* @__PURE__ */ k(i.div, {
124
+ role: "radiogroup",
125
+ "aria-required": l,
126
+ "aria-orientation": d,
127
+ "data-disabled": u ? "" : void 0,
128
+ dir: v,
129
+ ...g,
130
+ ref: t
131
+ })
132
+ })
133
+ });
134
+ });
135
+ H.displayName = R;
136
+ var U = "RadioGroupItem", W = C.forwardRef((t, r) => {
137
+ let { __scopeRadioGroup: i, disabled: a, ...o } = t, s = ce(U, i), c = s.disabled || a, l = z(i), u = B(i), d = C.useRef(null), f = n(r, d), p = s.value === o.value, m = C.useRef(!1);
138
+ return C.useEffect(() => {
139
+ let e = (e) => {
140
+ ae.includes(e.key) && (m.current = !0);
141
+ }, t = () => m.current = !1;
142
+ return document.addEventListener("keydown", e), document.addEventListener("keyup", t), () => {
143
+ document.removeEventListener("keydown", e), document.removeEventListener("keyup", t);
144
+ };
145
+ }, []), /* @__PURE__ */ k(g, {
146
+ asChild: !0,
147
+ ...l,
148
+ focusable: !c,
149
+ active: p,
150
+ children: /* @__PURE__ */ k(N, {
151
+ disabled: c,
152
+ required: s.required,
153
+ checked: p,
154
+ ...u,
155
+ ...o,
156
+ name: s.name,
157
+ ref: f,
158
+ onCheck: () => s.onValueChange(o.value),
159
+ onKeyDown: e((e) => {
160
+ e.key === "Enter" && e.preventDefault();
161
+ }),
162
+ onFocus: e(o.onFocus, () => {
163
+ m.current && d.current?.click();
164
+ })
165
+ })
166
+ });
167
+ });
168
+ W.displayName = U;
169
+ var le = "RadioGroupIndicator", G = C.forwardRef((e, t) => {
170
+ let { __scopeRadioGroup: n, ...r } = e;
171
+ return /* @__PURE__ */ k(F, {
172
+ ...B(n),
173
+ ...r,
174
+ ref: t
175
+ });
176
+ });
177
+ G.displayName = le;
178
+ var ue = H, K = W, q = G;
179
+ //#endregion
180
+ //#region node_modules/.pnpm/framer-motion@12.38.0_react-dom@19.2.3_react@19.2.3__react@19.2.3/node_modules/framer-motion/dist/es/utils/reduced-motion/use-reduced-motion.mjs
181
+ function de() {
182
+ !_.current && v();
183
+ let [e] = O(y.current);
184
+ return process.env.NODE_ENV !== "production" && x(e !== !0, "You have Reduced Motion enabled on your device. Animations may not appear as expected.", "reduced-motion-disabled"), e;
185
+ }
186
+ //#endregion
187
+ //#region src/components/RadioGroup/RadioGroup.tsx
188
+ var J = w({
189
+ disabledValues: [],
190
+ groupDisabled: !1,
191
+ orientation: "vertical",
192
+ variant: "default"
193
+ }), Y = "pointer-events-none opacity-60", X = (e) => {
194
+ let t = "selected" in e, { className: n, disabled: r, errorMessage: i, itemClassName: a, name: o, onChange: d, onValueChange: f, orientation: p = "vertical", ref: m, selected: h, state: g = "default", variant: _ = "default", warningMessage: v, "aria-describedby": y, ...b } = e, x = t ? h ?? "" : h, S = u(b.id, o), C = `${S}-error`, w = `${S}-warning`, T = g === "error" && i ? C : g === "warning" && v ? w : void 0, E = (e) => {
195
+ f(e), d?.(e);
196
+ }, D = ee(() => ({
197
+ disabledValues: Array.isArray(r) ? r : [],
198
+ groupDisabled: typeof r == "boolean" ? r : !1,
199
+ itemClassName: a,
200
+ orientation: p,
201
+ selected: x,
202
+ variant: _
203
+ }), [
204
+ p,
205
+ _,
206
+ r,
207
+ a,
208
+ x
209
+ ]);
210
+ return /* @__PURE__ */ A(J.Provider, {
211
+ value: D,
212
+ children: [
213
+ /* @__PURE__ */ k(ue, {
214
+ className: s("flex w-full text-text-primary", p === "vertical" ? "gap-4 flex-col" : "gap-5 flex-row", _ === "unstyled" && "gap-2.5 w-fit", n),
215
+ "data-state": g,
216
+ "data-testid": "spectral-radio-group",
217
+ id: S,
218
+ "aria-invalid": g === "error" ? !0 : void 0,
219
+ "aria-describedby": [T, y].filter(Boolean).join(" ") || void 0,
220
+ disabled: D.groupDisabled,
221
+ name: o,
222
+ onValueChange: E,
223
+ ref: m,
224
+ value: x,
225
+ ...b
226
+ }),
227
+ g === "error" && i && /* @__PURE__ */ k(c, {
228
+ dataTestId: "spectral-radio-group-error-message",
229
+ id: C,
230
+ message: i
231
+ }),
232
+ g === "warning" && v && /* @__PURE__ */ k(l, {
233
+ dataTestId: "spectral-radio-group-warning-message",
234
+ id: w,
235
+ message: v
236
+ })
237
+ ]
238
+ });
239
+ };
240
+ X.displayName = "RadioGroup";
241
+ var fe = {
242
+ type: "spring",
243
+ stiffness: 200,
244
+ damping: 16
245
+ }, Z = T(({ className: e, id: t, isDisabled: n, ref: r, transition: i = fe, value: a, ...o }) => de() ? /* @__PURE__ */ k(K, {
246
+ className: s("h-4.5 w-4.5 border-border-subtle ring-black relative aspect-square cursor-pointer rounded-full border-2 bg-radio-bg transition-colors", "hover:border-radio-border--hover focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-accent", "data-[state=checked]:border-radio-border--selected data-[state=checked]:bg-radio-bg", n && Y, e),
247
+ "data-testid": "spectral-radio-group-item",
248
+ disabled: n,
249
+ id: t,
250
+ ref: r,
251
+ value: a,
252
+ ...o,
253
+ children: /* @__PURE__ */ k(q, { className: s("after:inset-0 after:h-2.5 after:w-2.5 after:absolute after:m-auto after:rounded-full after:bg-radio-bg--selected after:content-['']", n && Y) })
254
+ }) : /* @__PURE__ */ k(K, {
255
+ value: a,
256
+ id: t,
257
+ disabled: n,
258
+ asChild: !0,
259
+ ...o,
260
+ children: /* @__PURE__ */ k(b.button, {
261
+ className: s("h-4.5 w-4.5 border-border-subtle ring-black relative aspect-square cursor-pointer rounded-full border-2 bg-radio-bg transition-colors", "hover:border-radio-border--hover focus-visible:outline-1 focus-visible:outline-offset-2 focus-visible:outline-accent", "data-[state=checked]:border-radio-border--selected data-[state=checked]:bg-radio-bg", n && Y, e),
262
+ "data-testid": "spectral-radio-group-item",
263
+ ref: r,
264
+ whileHover: { scale: 1.05 },
265
+ whileTap: { scale: .95 },
266
+ children: /* @__PURE__ */ k(q, {
267
+ className: "relative flex items-center justify-center",
268
+ children: /* @__PURE__ */ k(S, { children: /* @__PURE__ */ k(b.div, {
269
+ animate: {
270
+ opacity: 1,
271
+ scale: 1
272
+ },
273
+ className: "h-2.5 w-2.5 absolute rounded-full bg-radio-bg--selected",
274
+ exit: {
275
+ opacity: 0,
276
+ scale: 0
277
+ },
278
+ initial: {
279
+ opacity: 0,
280
+ scale: 0
281
+ },
282
+ transition: i
283
+ }, "radio-indicator") })
284
+ })
285
+ })
286
+ }));
287
+ Z.displayName = "RadioButton";
288
+ var Q = ({ children: e, className: t, disabled: n, ref: r, value: i, ...a }) => {
289
+ let { disabledValues: o, groupDisabled: c, itemClassName: l, variant: u, orientation: f } = E(J), p = D(), m = i.toString(), h = a.id?.toString() ?? `${m}-${p}`, g = c || o.includes(m) || !!n;
290
+ return u === "unstyled" ? /* @__PURE__ */ k(K, {
291
+ asChild: !0,
292
+ "data-testid": "spectral-radio-group-item",
293
+ disabled: g,
294
+ id: h,
295
+ ref: r,
296
+ value: m,
297
+ ...a,
298
+ children: /* @__PURE__ */ k(d, {
299
+ className: s("rounded flex h-fit w-fit border-2 border-transparent data-[state=checked]:border-radio-border--selected", g && Y, l, t),
300
+ "data-testid": "spectral-radio-group-item-label",
301
+ htmlFor: h,
302
+ children: e
303
+ })
304
+ }) : /* @__PURE__ */ A("div", {
305
+ className: s("flex items-center", g && Y, l, t, f),
306
+ children: [/* @__PURE__ */ k(Z, {
307
+ ref: r,
308
+ value: m,
309
+ id: h,
310
+ isDisabled: g,
311
+ ...a
312
+ }), e && /* @__PURE__ */ k(d, {
313
+ className: s("text-md font-normal cursor-pointer", f === "vertical" ? "ml-2" : "ml-1"),
314
+ htmlFor: h,
315
+ children: e
316
+ })]
317
+ });
318
+ };
319
+ Q.displayName = "RadioGroup.Item";
320
+ var $ = ({ ref: e, className: t, ...n }) => /* @__PURE__ */ k(d, {
321
+ ref: e,
322
+ "data-testid": "spectral-radio-group-label",
323
+ className: s("text-md font-medium block", t),
324
+ ...n
325
+ });
326
+ $.displayName = "RadioGroup.Label";
327
+ //#endregion
328
+ export { Q as n, $ as r, X as t };
@@ -1,17 +1,24 @@
1
1
  import { Label } from '../Label/Label';
2
+ import { BaseFormFieldProps, FormFieldState } from './utils/formFieldUtils';
2
3
  import { ComponentProps, ComponentRef, ReactElement, ReactNode, Ref } from 'react';
3
4
  import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
4
5
  type RadioGroupVariant = 'default' | 'unstyled';
5
6
  export interface RadioGroupProps extends Omit<ComponentProps<typeof RadioGroupPrimitive.Root>, 'onChange' | 'disabled'> {
7
+ 'aria-describedby'?: string;
8
+ 'aria-label'?: string;
6
9
  className?: string;
7
10
  disabled?: boolean | string[];
11
+ errorMessage?: BaseFormFieldProps['errorMessage'];
8
12
  itemClassName?: string;
9
13
  name: string;
14
+ onChange?: (selected: string) => void;
10
15
  onValueChange: (selected: string) => void;
11
16
  orientation?: 'horizontal' | 'vertical';
12
17
  required?: boolean;
13
18
  selected?: string;
19
+ state?: FormFieldState;
14
20
  variant?: RadioGroupVariant;
21
+ warningMessage?: BaseFormFieldProps['errorMessage'];
15
22
  }
16
23
  export interface RadioGroupItemProps extends ComponentProps<typeof RadioGroupPrimitive.Item> {
17
24
  className?: string;
@@ -1,2 +1,2 @@
1
- import { n as e, r as t, t as n } from "./RadioGroup-w_q6RGEK.js";
1
+ import { n as e, r as t, t as n } from "./RadioGroup-CfjhpW5o.js";
2
2
  export { n as RadioGroup, e as RadioGroupItem, t as RadioGroupLabel };
package/dist/Select.d.ts CHANGED
@@ -1,9 +1,9 @@
1
- import { BaseFormFieldProps, BaseOption, DropdownWidth } from './utils/formFieldUtils';
1
+ import { BaseFormFieldProps, BaseOption, DropdownWidth, FormFieldState } from './utils/formFieldUtils';
2
2
  import { ComponentPropsWithoutRef, ReactNode, Ref } from 'react';
3
3
  type SelectOption = BaseOption;
4
4
  type Align = 'start' | 'center' | 'end';
5
5
  type Side = 'top' | 'bottom' | 'left' | 'right';
6
- export interface SelectProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'onChange' | 'aria-disabled' | 'aria-invalid' | 'aria-required' | 'aria-describedby' | 'aria-label'>, BaseFormFieldProps {
6
+ export interface SelectProps extends Omit<ComponentPropsWithoutRef<'button'>, 'value' | 'onChange' | 'aria-disabled' | 'aria-invalid' | 'aria-required' | 'aria-describedby' | 'aria-label'>, Omit<BaseFormFieldProps, 'state'> {
7
7
  defaultValue?: string;
8
8
  dropdownWidth?: DropdownWidth;
9
9
  emptyMessage?: ReactNode;
@@ -12,9 +12,12 @@ export interface SelectProps extends Omit<ComponentPropsWithoutRef<'button'>, 'v
12
12
  labelClassName?: string;
13
13
  loadingMessage?: string;
14
14
  onChange?: (value: string) => void;
15
+ onValueChange?: (value: string) => void;
15
16
  options: SelectOption[];
16
17
  placeholder?: string;
18
+ state?: Exclude<FormFieldState, 'disabled'>;
17
19
  value?: string;
20
+ warningMessage?: BaseFormFieldProps['errorMessage'];
18
21
  }
19
22
  export interface SelectExtendedProps extends SelectProps {
20
23
  align?: Align;
package/dist/Select.js CHANGED
@@ -3,61 +3,67 @@ import "./styles/main.css";
3
3
  import { CheckmarkIcon as e } from "./Icons/CheckmarkIcon.js";
4
4
  import { ChevronDownIcon as t } from "./Icons/ChevronDownIcon.js";
5
5
  import { LoaderIcon as n } from "./Icons/LoaderIcon.js";
6
- import { t as r } from "./twUtils-VNWgstKL.js";
7
- import { EmptyState as i, ErrorMessage as a, LoadingState as o, getAriaProps as s, getDropdownSurfaceClasses as c, getErrorMessageId as l, getFormFieldCSSProperties as ee, getOptionClasses as te, getStateClasses as ne, getTriggerClasses as re, groupOptions as ie, useFormFieldId as ae, useFormFieldState as oe } from "./utils/formFieldUtils.js";
6
+ import { t as r } from "./twUtils-D_qzdiwM.js";
7
+ import { EmptyState as i, ErrorMessage as a, LoadingState as o, WarningMessage as s, getAriaProps as c, getDropdownSurfaceClasses as l, getDropdownWidthStyles as ee, getErrorMessageId as te, getFormFieldCSSProperties as ne, getOptionClasses as re, getTriggerClasses as ie, groupOptions as ae, useFormFieldId as oe } from "./utils/formFieldUtils.js";
8
8
  import { Label as u } from "./Label.js";
9
- import { useAutoDropdownHorizontalShift as d } from "./utils/dropdownPositioning.js";
10
- import { a as f, c as p, d as m, f as h, h as se, i as ce, l as le, m as ue, n as de, o as fe, p as pe, r as me, t as he, u as ge } from "./dist-fW81qjVl.js";
11
- import { useState as g } from "react";
12
- import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
9
+ import { a as se, c as ce, d as le, f as d, h as f, i as p, l as ue, m as de, n as fe, o as pe, p as me, r as he, t as ge, u as _e } from "./dist-C9fJjxxB.js";
10
+ import { useAutoDropdownHorizontalShift as ve } from "./utils/dropdownPositioning.js";
11
+ import { useState as ye } from "react";
12
+ import { Fragment as m, jsx as h, jsxs as g } from "react/jsx-runtime";
13
13
  //#region src/components/Select/Select.tsx
14
- var b = (b) => {
15
- let x = "value" in b, { align: S = "start", alignOffset: C = 0, avoidCollisions: w = !0, className: T, collisionBoundary: E, collisionPadding: D = 10, defaultValue: O, dropdownWidth: k = "trigger", emptyMessage: A = "No options found", errorMessage: j, id: M, label: N, labelClassName: P, loadingMessage: F = "Loading…", name: I, onChange: L, options: R = [], placeholder: _e = "Select an option", position: z = "popper", ref: ve, side: ye = "bottom", sideOffset: be = 4, state: B = "default", value: V, "aria-label": xe, "aria-describedby": Se, ...H } = b, U = x ? V ?? "" : V, [W, Ce] = g(!1), { dropdownShiftStyle: we, setDropdownElement: Te } = d(W), G = ae(M, I), K = l(G), q = k === "trigger" ? "var(--radix-select-trigger-width)" : k === "content" ? "max-content" : k, J = k === "trigger" || k === "content" ? k : "custom", Ee = {
16
- "--spectral-select-content-width": q,
17
- width: z === "item-aligned" ? q : void 0,
18
- ...we
19
- }, { isDisabled: Y, isLoading: X, isInvalid: De } = oe(H.disabled, B), Z = s(B, Se, H.required, K), { groups: Q, ungrouped: $ } = ie(R), Oe = () => {
20
- if (X) return /* @__PURE__ */ v(o, {
14
+ var _ = (_) => {
15
+ let v = "value" in _, { align: y = "start", alignOffset: b = 0, avoidCollisions: x = !0, className: S, collisionBoundary: C, collisionPadding: w = 10, defaultValue: T, dropdownWidth: E = "trigger", emptyMessage: D = "No options found", errorMessage: O, disabled: k, id: A, label: j, labelClassName: M, loadingMessage: N = "Loading…", name: P, onChange: be, onValueChange: xe, options: F = [], placeholder: Se = "Select an option", position: I = "popper", ref: Ce, required: L, side: we = "bottom", sideOffset: Te = 4, state: R = "default", value: z, warningMessage: B, "aria-label": Ee, "aria-describedby": De, ...Oe } = _, V = v ? z ?? "" : z, [H, ke] = ye(!1), { dropdownShiftStyle: Ae, setDropdownElement: je } = ve(H), U = oe(A, P), W = `${U}-listbox`, G = te(U), K = `${U}-warning`, Me = R === "error" && O ? G : R === "warning" && B ? K : void 0, { dropdownWidthMode: q, dropdownWidthStyle: Ne, resolvedDropdownWidth: J } = ee({
16
+ dropdownWidth: E,
17
+ triggerWidth: "var(--radix-select-trigger-width)"
18
+ }), Pe = {
19
+ "--spectral-select-content-width": J,
20
+ ...I === "item-aligned" ? { width: J } : {},
21
+ ...Ne,
22
+ ...Ae
23
+ }, Y = !!k, X = R === "loading", Fe = R === "error", Z = c(R, De, L, Me), { groups: Q, ungrouped: $ } = ae(F), Ie = (e) => {
24
+ be?.(e), xe?.(e);
25
+ }, Le = () => {
26
+ if (X) return /* @__PURE__ */ h(o, {
21
27
  "data-testid": "spectral-select-loading",
22
- message: F
28
+ message: N
23
29
  });
24
- if (R.length === 0) return /* @__PURE__ */ v(i, {
30
+ if (F.length === 0) return /* @__PURE__ */ h(i, {
25
31
  "data-testid": "spectral-select-empty",
26
- message: A
32
+ message: D
27
33
  });
28
34
  let t = (t) => {
29
- let n = U === t.value;
30
- return /* @__PURE__ */ y(ce, {
31
- className: r(te(!!t.disabled, !1, n), "relative flex w-full cursor-pointer items-center"),
35
+ let n = V === t.value;
36
+ return /* @__PURE__ */ g(p, {
37
+ className: r(re(!!t.disabled, !1, n), "relative flex w-full cursor-pointer items-center"),
32
38
  "data-testid": "spectral-select-item",
33
39
  disabled: t.disabled,
34
40
  value: t.value,
35
- children: [/* @__PURE__ */ v(fe, {
41
+ children: [/* @__PURE__ */ h(pe, {
36
42
  "data-testid": "spectral-select-item-text",
37
43
  className: "block truncate",
38
44
  children: t.label
39
- }), /* @__PURE__ */ v(f, {
45
+ }), /* @__PURE__ */ h(se, {
40
46
  "data-testid": "spectral-select-item-selected-indicator",
41
47
  asChild: !0,
42
- children: /* @__PURE__ */ v("span", {
48
+ children: /* @__PURE__ */ h("span", {
43
49
  className: "right-2 h-4 w-4 absolute flex items-center justify-center",
44
- children: /* @__PURE__ */ v(e, { size: 16 })
50
+ children: /* @__PURE__ */ h(e, { size: 16 })
45
51
  })
46
52
  })]
47
53
  }, t.value);
48
54
  };
49
- return /* @__PURE__ */ y(_, { children: [$.length > 0 && /* @__PURE__ */ y(_, { children: [$.map(t), Object.keys(Q).length > 0 && /* @__PURE__ */ v(h, {
55
+ return /* @__PURE__ */ g(m, { children: [$.length > 0 && /* @__PURE__ */ g(m, { children: [$.map(t), Object.keys(Q).length > 0 && /* @__PURE__ */ h(d, {
50
56
  className: "-mx-1 my-1 h-px bg-border-secondary",
51
57
  "data-testid": "spectral-select-separator"
52
- })] }), Object.entries(Q).map(([e, n], i) => /* @__PURE__ */ y(de, {
58
+ })] }), Object.entries(Q).map(([e, n], i) => /* @__PURE__ */ g(fe, {
53
59
  "data-testid": "spectral-select-group",
54
60
  children: [
55
- i > 0 && /* @__PURE__ */ v(h, {
61
+ i > 0 && /* @__PURE__ */ h(d, {
56
62
  className: "-mx-1 my-1 h-px bg-border-secondary",
57
63
  "data-testid": "spectral-select-group-separator"
58
64
  }),
59
- /* @__PURE__ */ v(u, {
60
- className: r("px-2 py-1.5 text-base font-semibold text-text-primary", P),
65
+ /* @__PURE__ */ h(u, {
66
+ className: r("px-2 py-1.5 text-base font-semibold text-text-primary", M),
61
67
  "data-testid": "spectral-select-group-label",
62
68
  children: e
63
69
  }),
@@ -65,97 +71,98 @@ var b = (b) => {
65
71
  ]
66
72
  }, e))] });
67
73
  };
68
- return /* @__PURE__ */ y("div", {
74
+ return /* @__PURE__ */ g("div", {
69
75
  className: "w-full",
70
76
  children: [
71
- N && /* @__PURE__ */ v(u, {
72
- className: r("mb-2 block text-text-primary", P, Y && "text-text-secondary"),
77
+ j && /* @__PURE__ */ h(u, {
78
+ className: r("mb-2 block text-text-primary", M, Y && "text-text-secondary"),
73
79
  "data-testid": "spectral-select-label",
74
- htmlFor: G,
75
- children: N
80
+ htmlFor: U,
81
+ children: j
76
82
  }),
77
- /* @__PURE__ */ y(le, {
83
+ /* @__PURE__ */ g(ue, {
78
84
  "data-testid": "spectral-select",
79
- defaultValue: O,
85
+ defaultValue: T,
80
86
  disabled: Y,
81
- name: I,
82
- onOpenChange: Ce,
83
- onValueChange: L,
84
- open: W,
85
- required: H.required,
86
- value: U,
87
- children: [/* @__PURE__ */ v(pe, {
88
- "aria-controls": G,
89
- "aria-expanded": W,
90
- "aria-label": xe ?? N,
87
+ name: P,
88
+ onOpenChange: ke,
89
+ onValueChange: Ie,
90
+ open: H,
91
+ required: L,
92
+ value: V,
93
+ children: [/* @__PURE__ */ h(me, {
94
+ "aria-controls": W,
95
+ "aria-expanded": H,
96
+ "aria-label": Ee ?? j,
91
97
  asChild: !0,
92
- className: r(re(!1, B), ne(B), "text-input-text data-placeholder:text-input-text-placeholder!", T),
98
+ className: r(ie(H, R), "text-input-text data-placeholder:text-input-text-placeholder!", S),
93
99
  "data-slot": "select-trigger",
94
- "data-state": B,
100
+ "data-state": R,
95
101
  "data-testid": "spectral-select-trigger",
96
- id: G,
97
- ref: ve,
102
+ id: U,
103
+ ref: Ce,
98
104
  role: "combobox",
99
- style: ee(),
105
+ style: ne(),
100
106
  ...Z,
101
- ...H,
102
- children: /* @__PURE__ */ y("button", {
107
+ ...Oe,
108
+ children: /* @__PURE__ */ g("button", {
103
109
  className: "min-w-0 gap-2 [&>span]:min-w-0 grid w-full cursor-pointer grid-cols-[minmax(0,1fr)_auto] items-center overflow-hidden text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text-placeholder! [&>span]:block [&>span]:overflow-hidden [&>span]:text-ellipsis [&>span]:whitespace-nowrap [&>span[data-placeholder]]:text-input-text-placeholder!",
104
110
  type: "button",
105
111
  disabled: Y,
106
- children: [/* @__PURE__ */ v(ue, {
112
+ children: [/* @__PURE__ */ h(de, {
107
113
  className: "min-w-0 block max-w-full flex-1 truncate text-left whitespace-nowrap text-input-text! data-placeholder:text-input-text-placeholder!",
108
114
  "data-testid": "spectral-select-value",
109
- placeholder: _e
110
- }), /* @__PURE__ */ v(me, {
115
+ placeholder: Se
116
+ }), /* @__PURE__ */ h(he, {
111
117
  asChild: !0,
112
- children: /* @__PURE__ */ v("div", {
118
+ children: /* @__PURE__ */ h("div", {
113
119
  className: "flex shrink-0 cursor-pointer items-center",
114
- children: X ? /* @__PURE__ */ v(n, { size: 20 }) : /* @__PURE__ */ v(t, {
115
- className: r("transition-transform duration-200", W && "rotate-180"),
120
+ children: X ? /* @__PURE__ */ h(n, { size: 20 }) : /* @__PURE__ */ h(t, {
121
+ className: r("transition-transform duration-200", H && "rotate-180"),
116
122
  size: 20
117
123
  })
118
124
  })
119
125
  })]
120
126
  })
121
- }), /* @__PURE__ */ v(p, { children: /* @__PURE__ */ y(he, {
122
- align: S,
123
- alignOffset: C,
124
- avoidCollisions: w,
125
- className: r("relative z-50 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in", c(), "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95", "max-h-[min(var(--radix-select-content-available-height),300px)] motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2", "min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto", z === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1"),
126
- collisionBoundary: E,
127
- collisionPadding: D,
128
- "data-dropdown-width-mode": J,
129
- "data-dropdown-width-value": J === "custom" ? k : void 0,
127
+ }), /* @__PURE__ */ h(ce, { children: /* @__PURE__ */ g(ge, {
128
+ align: y,
129
+ alignOffset: b,
130
+ avoidCollisions: x,
131
+ className: r("relative z-50 motion-safe:data-[state=closed]:animate-out motion-safe:data-[state=open]:animate-in", l(), "motion-safe:data-[state=closed]:fade-out-0 motion-safe:data-[state=closed]:zoom-out-95 motion-safe:data-[state=open]:fade-in-0 motion-safe:data-[state=open]:zoom-in-95", "max-h-[min(var(--radix-select-content-available-height),300px)] motion-safe:data-[side=bottom]:slide-in-from-top-2 motion-safe:data-[side=top]:slide-in-from-bottom-2", "min-w-32 origin-(--radix-select-content-transform-origin) overflow-x-hidden overflow-y-auto", I === "popper" && "data-[side=bottom]:translate-y-1 data-[side=top]:-translate-y-1"),
132
+ collisionBoundary: C,
133
+ collisionPadding: w,
134
+ "data-dropdown-width-mode": q,
135
+ "data-dropdown-width-value": q === "custom" ? E : void 0,
136
+ id: W,
130
137
  "data-slot": "select-content",
131
138
  "data-testid": "spectral-select-content",
132
- position: z,
133
- ref: Te,
134
- side: ye,
135
- sideOffset: be,
136
- style: Ee,
139
+ position: I,
140
+ ref: je,
141
+ side: we,
142
+ sideOffset: Te,
143
+ style: Pe,
137
144
  children: [
138
- /* @__PURE__ */ v(m, {
145
+ /* @__PURE__ */ h(le, {
139
146
  className: "py-1 flex cursor-default items-center justify-center",
140
147
  "data-testid": "spectral-select-scroll-up-button",
141
- children: /* @__PURE__ */ v(t, {
148
+ children: /* @__PURE__ */ h(t, {
142
149
  "aria-hidden": "true",
143
150
  className: "rotate-180",
144
151
  size: 18
145
152
  })
146
153
  }),
147
- /* @__PURE__ */ v(se, {
154
+ /* @__PURE__ */ h(f, {
148
155
  asChild: !0,
149
- children: /* @__PURE__ */ v("div", {
150
- className: r("p-1", z === "popper" && "scroll-my-1 h-(--radix-select-trigger-height) w-(--spectral-select-content-width) min-w-(--spectral-select-content-width)"),
156
+ children: /* @__PURE__ */ h("div", {
157
+ className: r("p-1", I === "popper" && (E === "trigger" ? "scroll-my-1 h-(--radix-select-trigger-height) w-(--spectral-select-content-width) min-w-(--spectral-select-content-width)" : "scroll-my-1 h-(--radix-select-trigger-height)")),
151
158
  "data-testid": "spectral-select-items",
152
- children: Oe()
159
+ children: Le()
153
160
  })
154
161
  }),
155
- /* @__PURE__ */ v(ge, {
162
+ /* @__PURE__ */ h(_e, {
156
163
  className: "py-1 flex cursor-default items-center justify-center",
157
164
  "data-testid": "spectral-select-scroll-down-button",
158
- children: /* @__PURE__ */ v(t, {
165
+ children: /* @__PURE__ */ h(t, {
159
166
  "aria-hidden": "true",
160
167
  size: 18
161
168
  })
@@ -163,14 +170,19 @@ var b = (b) => {
163
170
  ]
164
171
  }) })]
165
172
  }),
166
- De && j && /* @__PURE__ */ v(a, {
167
- "data-testid": "spectral-select-error-message",
173
+ Fe && O && /* @__PURE__ */ h(a, {
174
+ dataTestId: "spectral-select-error-message",
175
+ id: G,
176
+ message: O
177
+ }),
178
+ R === "warning" && B && /* @__PURE__ */ h(s, {
179
+ dataTestId: "spectral-select-warning-message",
168
180
  id: K,
169
- message: j
181
+ message: B
170
182
  })
171
183
  ]
172
184
  });
173
185
  };
174
- b.displayName = "Select";
186
+ _.displayName = "Select";
175
187
  //#endregion
176
- export { b as Select };
188
+ export { _ as Select };