@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
@@ -1,21 +1,23 @@
1
- import { BaseFormFieldProps, BaseOption, DropdownWidth } from './utils/formFieldUtils';
1
+ import { BaseFormFieldProps, BaseOption, DropdownWidth, FormFieldState } from './utils/formFieldUtils';
2
2
  import { Ref } from 'react';
3
3
  export type ComboboxOption = BaseOption;
4
- export interface ComboboxProps extends Omit<BaseFormFieldProps, 'onChange'> {
4
+ export interface ComboboxProps extends Omit<BaseFormFieldProps, 'onChange' | 'state'> {
5
5
  className?: string;
6
6
  defaultValue?: string;
7
7
  dropdownWidth?: DropdownWidth;
8
8
  emptyMessage?: string;
9
9
  labelClassName?: string;
10
10
  loadingMessage?: string;
11
+ onChange?: (value: string) => void;
11
12
  onValueChange?: (value: string) => void;
12
13
  options: ComboboxOption[];
13
14
  placeholder?: string;
15
+ state?: Exclude<FormFieldState, 'disabled'>;
14
16
  value?: string;
15
17
  warningMessage?: BaseFormFieldProps['errorMessage'];
16
18
  }
17
19
  export declare const Combobox: {
18
- ({ className, disabled, defaultValue, dropdownWidth, emptyMessage, errorMessage, id, label, labelClassName, loadingMessage, name, onValueChange, options, placeholder, ref, required, state, value: valueProp, warningMessage, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, }: ComboboxProps & {
20
+ ({ className, disabled, defaultValue, dropdownWidth, emptyMessage, errorMessage, id, label, labelClassName, loadingMessage, name, onChange, onValueChange, options, placeholder, ref, required, state, value: valueProp, warningMessage, "aria-describedby": ariaDescribedBy, "aria-label": ariaLabel, }: ComboboxProps & {
19
21
  ref?: Ref<HTMLDivElement>;
20
22
  }): import("react/jsx-runtime").JSX.Element;
21
23
  displayName: string;
package/dist/Combobox.js CHANGED
@@ -1,143 +1,3 @@
1
- "use client";
2
- import "./styles/main.css";
3
- import { ChevronDownIcon as e } from "./Icons/ChevronDownIcon.js";
4
- import { LoaderIcon as t } from "./Icons/LoaderIcon.js";
5
- import { t as n } from "./twUtils-VNWgstKL.js";
6
- import { EmptyState as ee, ErrorMessage as te, LoadingState as ne, WarningMessage as re, getAriaProps as ie, getDropdownSurfaceClasses as ae, getErrorMessageId as oe, getFormFieldCSSProperties as se, getOptionClasses as ce, getTriggerClasses as r, useFormFieldId as i, useFormFieldState as a } from "./utils/formFieldUtils.js";
7
- import { useUncontrolledState as o } from "./hooks/useUncontrolledState.js";
8
- import { Label as s } from "./Label.js";
9
- import { InputGroup as c, InputGroupAddon as l } from "./primitives/input-group.js";
10
- import { useAutoDropdownHorizontalShift as u } from "./utils/dropdownPositioning.js";
11
- import { a as d, i as f, n as p, o as m } from "./ComboboxBase-qX-mQhT6.js";
12
- import { useCallback as le, useRef as h, useState as g } from "react";
13
- import { jsx as _, jsxs as v } from "react/jsx-runtime";
14
- //#region src/components/Combobox/Combobox.tsx
15
- var y = ({ className: y, disabled: ue, defaultValue: de = "", dropdownWidth: b = "trigger", emptyMessage: x = "No options found.", errorMessage: S, id: C, label: w, labelClassName: T, loadingMessage: E = "Loading…", name: D, onValueChange: O, options: k = [], placeholder: A = "Search…", ref: j, required: M, state: N = "default", value: P, warningMessage: F, "aria-describedby": I, "aria-label": L }) => {
16
- process.env.NODE_ENV !== "production" && !w && !L && console.warn("Combobox: provide either `label` or `aria-label` for an accessible name.");
17
- let R = h(null), z = h(null), B = i(C, D), V = `${B}-listbox`, H = oe(B), U = `${B}-warning`, fe = N === "error" ? H : N === "warning" && F ? U : void 0, { isDisabled: W, isLoading: G, isInvalid: pe } = a(ue, N), me = ie(N, I, M, fe), [K, q] = g(!1), { dropdownShiftStyle: he, setDropdownElement: ge } = u(K), [J, Y] = g(""), [X, _e] = o({
18
- value: P,
19
- defaultValue: de,
20
- onChange: O
21
- }), Z = k.find((e) => e.value === X), ve = !!(Z && J.length === 0), Q = b === "trigger" || b === "content" ? b : "custom", $ = {
22
- maxWidth: "calc(100vw - 2rem)",
23
- overflowX: "auto",
24
- overflowY: "auto"
25
- }, ye = b === "trigger" ? { width: "100%" } : b === "content" ? {
26
- minWidth: "max-content",
27
- width: "max-content",
28
- ...$
29
- } : {
30
- width: b,
31
- ...$
32
- }, be = (e) => {
33
- _e(e === X ? "" : e), Y(""), q(!1);
34
- }, xe = (e) => {
35
- e.key === "Escape" && q(!1);
36
- }, Se = le(() => {
37
- requestAnimationFrame(() => {
38
- z.current?.contains(document.activeElement) || (q(!1), Y(""));
39
- });
40
- }, []), Ce = () => {
41
- W || G || (R.current?.focus(), q(!0));
42
- }, we = () => G ? /* @__PURE__ */ _("div", {
43
- id: V,
44
- role: "listbox",
45
- children: /* @__PURE__ */ _(ne, { message: E })
46
- }) : k.length === 0 ? /* @__PURE__ */ _("div", {
47
- id: V,
48
- role: "listbox",
49
- children: /* @__PURE__ */ _(ee, { message: x })
50
- }) : /* @__PURE__ */ v(d, {
51
- id: V,
52
- children: [/* @__PURE__ */ _(p, { children: x }), k.map((e) => /* @__PURE__ */ _(f, {
53
- className: n(ce(!!e.disabled, !1, X === e.value), "group/command-item relative flex w-full items-center data-[selected=true]:bg-input-bg--hover"),
54
- "data-checked": X === e.value || void 0,
55
- disabled: e.disabled,
56
- onMouseDown: (e) => e.preventDefault(),
57
- onSelect: () => be(e.value),
58
- value: e.label,
59
- children: /* @__PURE__ */ _("span", {
60
- className: "min-w-0 flex-1 truncate whitespace-nowrap",
61
- children: e.label
62
- })
63
- }, e.value))]
64
- });
65
- return /* @__PURE__ */ v("div", {
66
- className: "w-full",
67
- ref: j,
68
- children: [
69
- D && /* @__PURE__ */ _("input", {
70
- type: "hidden",
71
- name: D,
72
- value: X,
73
- disabled: W
74
- }),
75
- w && /* @__PURE__ */ _(s, {
76
- className: n("mb-2 block text-text-primary", T, W && "text-text-secondary"),
77
- "data-testid": "spectral-combobox-label",
78
- htmlFor: B,
79
- children: w
80
- }),
81
- /* @__PURE__ */ v(m, {
82
- ref: z,
83
- label: L ?? w,
84
- onKeyDown: xe,
85
- className: "relative w-full",
86
- children: [/* @__PURE__ */ v(c, {
87
- "data-slot": "combobox-content",
88
- "data-state": N,
89
- "data-testid": "spectral-combobox-trigger",
90
- className: n(r(K, N), "ring-0!", W && "pointer-events-none cursor-not-allowed", y),
91
- onClick: Ce,
92
- style: se(),
93
- children: [/* @__PURE__ */ _(m.Input, {
94
- ref: R,
95
- autoComplete: "off",
96
- "data-slot": "input-group-control",
97
- "aria-controls": V,
98
- "aria-expanded": K,
99
- "aria-label": L ?? w,
100
- className: n("min-w-0 px-3 py-1 text-base flex-1 truncate overflow-hidden border-0 bg-transparent whitespace-nowrap text-input-text outline-hidden placeholder:opacity-100 focus-visible:ring-0 focus-visible:outline-none", ve ? "placeholder:text-input-text!" : "placeholder:text-input-text-placeholder!"),
101
- disabled: W,
102
- id: B,
103
- onBlur: Se,
104
- onFocus: () => !W && !G && q(!0),
105
- onValueChange: Y,
106
- placeholder: Z?.label ?? A,
107
- role: "combobox",
108
- value: J,
109
- ...me
110
- }), /* @__PURE__ */ _(l, {
111
- align: "inline-end",
112
- className: "cursor-pointer",
113
- children: G ? /* @__PURE__ */ _(t, { className: "size-5 motion-safe:animate-spin" }) : /* @__PURE__ */ _(e, { className: n("size-5 shrink-0 transition-transform duration-200", K && "rotate-180") })
114
- })]
115
- }), /* @__PURE__ */ _("div", {
116
- className: n("left-0 mt-1 p-1 absolute top-full z-50 w-full", ae(), "motion-safe:animate-in motion-safe:fade-in-0 motion-safe:slide-in-from-top-2 motion-safe:zoom-in-95", !K && "hidden"),
117
- "data-dropdown-width-mode": Q,
118
- "data-dropdown-width-value": Q === "custom" ? b : void 0,
119
- "data-testid": "spectral-combobox-content",
120
- ref: ge,
121
- style: {
122
- ...ye,
123
- ...he
124
- },
125
- children: we()
126
- })]
127
- }),
128
- pe && S && /* @__PURE__ */ _(te, {
129
- dataTestId: "spectral-combobox-error-message",
130
- id: H,
131
- message: S
132
- }),
133
- N === "warning" && F && /* @__PURE__ */ _(re, {
134
- dataTestId: "spectral-combobox-warning-message",
135
- id: U,
136
- message: F
137
- })
138
- ]
139
- });
140
- };
141
- y.displayName = "Combobox";
142
- //#endregion
143
- export { y as Combobox };
1
+ import { t as e } from "./Combobox-Ch5Rxk5v.js";
2
+ import "./primitives/input-group.js";
3
+ export { e as Combobox };
@@ -4,6 +4,7 @@ import { DropdownWidth, FormFieldState } from '../utils/formFieldUtils';
4
4
  import { ComponentProps } from 'react';
5
5
  import { ControlGroupProps } from './ControlGroup';
6
6
  export interface SelectOptionType {
7
+ disabled?: boolean;
7
8
  label: string;
8
9
  value: string;
9
10
  }
@@ -26,6 +27,7 @@ type ControlGroupSelectBaseProps = ComponentProps<typeof Select> & Pick<ControlG
26
27
  disabled?: boolean;
27
28
  dropdownWidth?: DropdownWidth;
28
29
  errorMessage?: string | string[] | Record<string, unknown> | null;
30
+ id?: string;
29
31
  /** When `captionLayout` is `inline`, overrides the input's accessible name (defaults to `inputPlaceholder` when set). */
30
32
  inputAriaLabel?: string;
31
33
  inputPlaceholder?: string;
@@ -35,10 +37,11 @@ type ControlGroupSelectBaseProps = ComponentProps<typeof Select> & Pick<ControlG
35
37
  /** When `captionLayout` is `inline` and `selectPlaceholder` is empty, sets the select trigger's accessible name. */
36
38
  selectAriaLabel?: string;
37
39
  selectOptions: SelectOptionType[];
38
- state?: FormFieldState;
40
+ state?: Exclude<FormFieldState, 'disabled'>;
39
41
  type?: 'number' | 'text';
42
+ warningMessage?: string | string[] | Record<string, unknown> | null;
40
43
  };
41
44
  export type ControlGroupSelectProps = ControlGroupSelectBaseProps & ControlGroupSelectInputControlProps;
42
- export declare const ControlGroupSelect: ({ amountStep, ariaLabel, captionLayout, className, dataTestId, disabled, errorMessage, dropdownWidth, inputAriaLabel, inputPlaceholder, inputValue, maxAmount, minAmount, onInputChange, orientation, selectAriaLabel, selectOptions, selectPlaceholder, state, type, ...selectProps }: ControlGroupSelectProps) => import("react/jsx-runtime").JSX.Element;
45
+ export declare const ControlGroupSelect: ({ amountStep, ariaLabel, captionLayout, className, dataTestId, disabled, errorMessage, id, dropdownWidth, inputAriaLabel, inputPlaceholder, inputValue, maxAmount, minAmount, onInputChange, orientation, selectAriaLabel, selectOptions, selectPlaceholder, state, type, warningMessage, ...selectProps }: ControlGroupSelectProps) => import("react/jsx-runtime").JSX.Element;
43
46
  export {};
44
47
  //# sourceMappingURL=ControlGroupSelect.d.ts.map
@@ -1,6 +1,6 @@
1
1
  "use client";
2
2
  import "../styles/main.css";
3
- import { t as e } from "../twUtils-VNWgstKL.js";
3
+ import { t as e } from "../twUtils-D_qzdiwM.js";
4
4
  import { getStateClasses as t } from "../utils/formFieldUtils.js";
5
5
  import { Label as n } from "../Label.js";
6
6
  import { Input as r } from "../primitives/input.js";
@@ -15,45 +15,47 @@ var g = "placeholder:text-small! [appearance:textfield] [&::-webkit-inner-spin-b
15
15
  }, S = (e, t) => {
16
16
  let n = e?.trim();
17
17
  return n && n.length > 0 ? n : t;
18
- }, C = ({ amountStep: e, ariaLabel: t, captionLayout: n = "inline", className: r, dataTestId: i = "spectral-control-group-select", disabled: a, errorMessage: o, dropdownWidth: s = "trigger", inputAriaLabel: c, inputPlaceholder: u, inputValue: d, maxAmount: p = 1e6, minAmount: h = 0, onInputChange: g, orientation: y = "horizontal", selectAriaLabel: b, selectOptions: C, selectPlaceholder: T, state: E = "default", type: D = "number", ...O }) => {
19
- let k = f(), A = `${k}-amount`, j = `${k}-select`, M = `${A}-label`, N = `${j}-label`, P = n === "above", F = P ? void 0 : u, I = P ? void 0 : T, L = S(u, _), R = S(T, v), z = c ?? (P ? void 0 : L), B = b ?? (P ? void 0 : R), V = x(u, 3), H = x(T, 5), U = t ?? `${L} and ${R}`, W = !!a || E === "disabled", G = d !== void 0 && g !== void 0;
18
+ }, C = ({ amountStep: e, ariaLabel: t, captionLayout: n = "inline", className: r, dataTestId: i = "spectral-control-group-select", disabled: a, errorMessage: o, id: s, dropdownWidth: c = "trigger", inputAriaLabel: u, inputPlaceholder: d, inputValue: p, maxAmount: h = 1e6, minAmount: g = 0, onInputChange: y, orientation: b = "horizontal", selectAriaLabel: C, selectOptions: T, selectPlaceholder: E, state: D = "default", type: O = "number", warningMessage: k, ...A }) => {
19
+ let j = f(), M = s ?? j, N = `${M}-amount`, P = `${M}-select`, F = `${N}-label`, I = `${P}-label`, L = n === "above", R = L ? void 0 : d, z = L ? void 0 : E, B = S(d, _), V = S(E, v), H = u ?? (L ? void 0 : B), U = C ?? (L ? void 0 : V), W = x(d, 3), G = x(E, 5), K = t ?? `${B} and ${V}`, q = !!a, J = p !== void 0 && y !== void 0;
20
20
  return /* @__PURE__ */ m(l, {
21
- "aria-label": U,
21
+ "aria-label": K,
22
22
  className: r,
23
23
  "data-testid": i,
24
24
  disabled: a,
25
25
  errorMessage: o,
26
- orientation: y,
27
- state: E,
26
+ id: M,
27
+ orientation: b,
28
+ state: D,
29
+ warningMessage: k,
28
30
  children: /* @__PURE__ */ m(w, {
29
31
  amountStep: e,
30
32
  dataTestId: i,
31
- inputAccessibleName: z,
32
- inputCaption: F,
33
- inputId: A,
34
- inputLabelId: M,
35
- inputLabelText: L,
36
- inputMinWidth: V,
37
- inputValue: G ? d : void 0,
38
- isDisabled: W,
39
- maxAmount: p,
40
- minAmount: h,
41
- onInputChange: G ? g : void 0,
42
- dropdownWidth: s,
43
- selectCaption: I,
44
- selectOptions: C,
45
- selectLabelId: N,
46
- selectLabelText: R,
47
- selectProps: O,
48
- selectTriggerAriaLabel: B,
49
- selectTriggerId: j,
50
- selectTriggerMinWidth: H,
51
- type: D,
52
- useAboveLabels: P
33
+ inputAccessibleName: H,
34
+ inputCaption: R,
35
+ inputId: N,
36
+ inputLabelId: F,
37
+ inputLabelText: B,
38
+ inputMinWidth: W,
39
+ inputValue: J ? p : void 0,
40
+ isDisabled: q,
41
+ maxAmount: h,
42
+ minAmount: g,
43
+ onInputChange: J ? y : void 0,
44
+ dropdownWidth: c,
45
+ selectCaption: z,
46
+ selectOptions: T,
47
+ selectLabelId: I,
48
+ selectLabelText: V,
49
+ selectProps: A,
50
+ selectTriggerAriaLabel: U,
51
+ selectTriggerId: P,
52
+ selectTriggerMinWidth: G,
53
+ type: O,
54
+ useAboveLabels: L
53
55
  })
54
56
  });
55
57
  }, w = ({ amountStep: l, dataTestId: f, dropdownWidth: _, inputAccessibleName: v, inputCaption: x, inputId: S, inputLabelId: C, inputLabelText: w, inputMinWidth: T, inputValue: E, isDisabled: D, maxAmount: O, minAmount: k, onInputChange: A, selectCaption: j, selectLabelId: M, selectLabelText: N, selectOptions: P, selectProps: F, selectTriggerAriaLabel: I, selectTriggerId: L, selectTriggerMinWidth: R, type: z, useAboveLabels: B }) => {
56
- let { errorMessageId: V, orientation: H, state: U } = d(), W = H === "horizontal" ? "rounded-s-md rounded-e-none" : "rounded-ss-md rounded-se-md rounded-es-none rounded-ee-none", G = H === "horizontal" ? "rounded-s-none rounded-e-md" : "rounded-ss-none rounded-se-none rounded-es-md rounded-ee-md", K = H === "horizontal" ? "me-0" : "mbe-0", q = H === "horizontal" ? "me-0 [&>*:last-child]:-ms-0.5" : "mbe-0 [&>*:last-child]:-mt-0.5", J = /* @__PURE__ */ m(r, {
58
+ let { messageId: V, orientation: H, state: U } = d(), W = H === "horizontal" ? "rounded-s-md rounded-e-none" : "rounded-ss-md rounded-se-md rounded-es-none rounded-ee-none", G = H === "horizontal" ? "rounded-s-none rounded-e-md" : "rounded-ss-none rounded-se-none rounded-es-md rounded-ee-md", K = H === "horizontal" ? "me-0" : "mbe-0", q = H === "horizontal" ? "me-0 [&>*:last-child]:-ms-0.5" : "mbe-0 [&>*:last-child]:-mt-0.5", J = /* @__PURE__ */ m(r, {
57
59
  "aria-describedby": V,
58
60
  "aria-label": v,
59
61
  "aria-labelledby": B ? C : void 0,
@@ -115,6 +117,7 @@ var g = "placeholder:text-small! [appearance:textfield] [&::-webkit-inner-spin-b
115
117
  "data-testid": `${f}-select-content`,
116
118
  dropdownWidth: _,
117
119
  children: P.map((e) => /* @__PURE__ */ m(o, {
120
+ disabled: e.disabled,
118
121
  value: e.value,
119
122
  children: e.label
120
123
  }, e.value))
@@ -2,7 +2,7 @@ import { Slot } from './primitives/slot';
2
2
  import { FormFieldState } from './utils/formFieldUtils';
3
3
  import { ComponentProps } from 'react';
4
4
  interface ControlGroupContextValue {
5
- errorMessageId?: string;
5
+ messageId?: string;
6
6
  isDisabled: boolean;
7
7
  isInvalid: boolean;
8
8
  isLoading: boolean;
@@ -17,8 +17,9 @@ export interface ControlGroupProps extends ComponentProps<'div'> {
17
17
  name?: string;
18
18
  orientation?: 'horizontal' | 'vertical';
19
19
  state?: FormFieldState;
20
+ warningMessage?: string | string[] | Record<string, unknown> | null;
20
21
  }
21
- export declare const ControlGroup: ({ className, disabled, errorMessage, id, name, orientation, state, ...props }: ControlGroupProps) => import("react/jsx-runtime").JSX.Element;
22
+ export declare const ControlGroup: ({ className, disabled, errorMessage, id, name, orientation, state, warningMessage, ...props }: ControlGroupProps) => import("react/jsx-runtime").JSX.Element;
22
23
  export declare const ControlGroupItem: ({ className, ...props }: ComponentProps<typeof Slot>) => import("react/jsx-runtime").JSX.Element;
23
24
  export {};
24
25
  //# sourceMappingURL=ControlGroup.d.ts.map
@@ -1,48 +1,56 @@
1
1
  "use client";
2
2
  import "./styles/main.css";
3
- import { t as e } from "./twUtils-VNWgstKL.js";
3
+ import { t as e } from "./twUtils-D_qzdiwM.js";
4
4
  import { Slot as t } from "./primitives/slot.js";
5
- import { ErrorMessage as n, getErrorMessageId as r, useFormFieldId as i, useFormFieldState as a } from "./utils/formFieldUtils.js";
6
- import { createContext as o, useContext as s } from "react";
7
- import { jsx as c, jsxs as l } from "react/jsx-runtime";
5
+ import { ErrorMessage as n, WarningMessage as r, getErrorMessageId as i, useFormFieldId as a, useFormFieldState as o } from "./utils/formFieldUtils.js";
6
+ import { createContext as s, useContext as c } from "react";
7
+ import { jsx as l, jsxs as u } from "react/jsx-runtime";
8
8
  //#region src/components/ControlGroup/ControlGroup.tsx
9
- var u = o(null), d = () => {
10
- let e = s(u);
9
+ var d = s(null), f = () => {
10
+ let e = c(d);
11
11
  if (e === null) throw Error("useControlGroup must be used within a ControlGroup");
12
12
  return e;
13
- }, f = ({ className: t, disabled: o, errorMessage: s, id: d, name: f, orientation: p = "horizontal", state: m = "default", ...h }) => {
14
- let g = i(d, f), _ = r(g), { isDisabled: v, isLoading: y, isInvalid: b } = a(o, m);
15
- return /* @__PURE__ */ l(u.Provider, {
13
+ }, p = ({ className: t, disabled: s, errorMessage: c, id: f, name: p, orientation: m = "horizontal", state: h = "default", warningMessage: g, ..._ }) => {
14
+ let v = a(f, p), y = i(v), b = `${v}-warning`, { isDisabled: x, isLoading: S, isInvalid: C } = o(s, h), w = h === "error" && c ? y : h === "warning" && g ? b : void 0;
15
+ return /* @__PURE__ */ u(d.Provider, {
16
16
  value: {
17
- errorMessageId: b && s ? _ : void 0,
18
- isDisabled: v,
19
- isInvalid: b,
20
- isLoading: y,
21
- orientation: p,
22
- state: m
17
+ messageId: w,
18
+ isDisabled: x,
19
+ isInvalid: C,
20
+ isLoading: S,
21
+ orientation: m,
22
+ state: h
23
23
  },
24
- children: [/* @__PURE__ */ c("div", {
25
- "data-slot": "control-group",
26
- "data-orientation": p,
27
- "data-state": m,
28
- id: g,
29
- role: "group",
30
- "aria-describedby": b && s ? _ : void 0,
31
- className: e("group flex", p === "vertical" && "flex-col", v && "pointer-events-none opacity-50", t),
32
- ...h
33
- }), b && s && /* @__PURE__ */ c(n, {
34
- dataTestId: "spectral-control-group-error-message",
35
- id: _,
36
- message: s
37
- })]
24
+ children: [
25
+ /* @__PURE__ */ l("div", {
26
+ "data-slot": "control-group",
27
+ "data-orientation": m,
28
+ "data-state": h,
29
+ id: v,
30
+ role: "group",
31
+ "aria-describedby": w,
32
+ className: e("group flex", m === "vertical" && "flex-col", x && "pointer-events-none opacity-50", t),
33
+ ..._
34
+ }),
35
+ C && c && /* @__PURE__ */ l(n, {
36
+ dataTestId: "spectral-control-group-error-message",
37
+ id: y,
38
+ message: c
39
+ }),
40
+ h === "warning" && g && /* @__PURE__ */ l(r, {
41
+ dataTestId: "spectral-control-group-warning-message",
42
+ id: b,
43
+ message: g
44
+ })
45
+ ]
38
46
  });
39
- }, p = ({ className: n, ...r }) => {
40
- let { orientation: i } = d();
41
- return /* @__PURE__ */ c(t, {
47
+ }, m = ({ className: n, ...r }) => {
48
+ let { orientation: i } = f();
49
+ return /* @__PURE__ */ l(t, {
42
50
  "data-slot": "control-group-item",
43
51
  className: e("rounded-none focus-within:z-10 hover:z-10", i === "horizontal" && "first:rounded-s-md last:me-0 last:rounded-e-md -me-0.5 h-auto", i === "vertical" && "first:rounded-ss-md first:rounded-se-md last:rounded-ee-md last:rounded-es-md last:mbe-0 -mbe-0.5 w-auto", n),
44
52
  ...r
45
53
  });
46
54
  };
47
55
  //#endregion
48
- export { f as ControlGroup, p as ControlGroupItem, d as useControlGroup };
56
+ export { p as ControlGroup, m as ControlGroupItem, f as useControlGroup };
@@ -1,5 +1,5 @@
1
1
  import "../styles/main.css";
2
- import { t as e } from "../twUtils-VNWgstKL.js";
2
+ import { t as e } from "../twUtils-D_qzdiwM.js";
3
3
  import { Slot as t } from "../primitives/slot.js";
4
4
  import "react";
5
5
  import { jsx as n } from "react/jsx-runtime";
package/dist/DataCard.js CHANGED
@@ -1,5 +1,5 @@
1
1
  import "./styles/main.css";
2
- import { t as e } from "./twUtils-VNWgstKL.js";
2
+ import { t as e } from "./twUtils-D_qzdiwM.js";
3
3
  import { Card as t, CardContent as n, CardHeader as r, CardTitle as i } from "./DataCard/Card.js";
4
4
  import "react";
5
5
  import { jsx as a, jsxs as o } from "react/jsx-runtime";
@@ -1,2 +1,2 @@
1
- import { t as e } from "../Calendar-s4lyijkn.js";
1
+ import { t as e } from "../Calendar-2UVWeLYp.js";
2
2
  export { e as Calendar };