@spear-ai/spectral 1.6.16 → 1.7.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 (150) hide show
  1. package/dist/.js +196 -191
  2. package/dist/Accordion.d.ts +13 -15
  3. package/dist/Accordion.js +172 -165
  4. package/dist/Alert/AlertBase.d.ts +7 -7
  5. package/dist/Alert/AlertBase.js +23 -21
  6. package/dist/Alert.d.ts +2 -2
  7. package/dist/Alert.js +32 -30
  8. package/dist/Avatar.d.ts +2 -2
  9. package/dist/Avatar.js +30 -22
  10. package/dist/Badge.d.ts +1 -1
  11. package/dist/Badge.js +3 -2
  12. package/dist/Button.d.ts +3 -3
  13. package/dist/Button.js +108 -46
  14. package/dist/ButtonGroup/ButtonGroupButton.d.ts +1 -1
  15. package/dist/ButtonGroup/ButtonGroupButton.js +5 -5
  16. package/dist/ButtonGroup.d.ts +5 -5
  17. package/dist/ButtonGroup.js +21 -21
  18. package/dist/ButtonIcon.d.ts +2 -2
  19. package/dist/ButtonIcon.js +31 -30
  20. package/dist/Checkbox/CheckboxBase.d.ts +2 -2
  21. package/dist/Checkbox/CheckboxBase.js +50 -57
  22. package/dist/Checkbox.js +16 -18
  23. package/dist/DataCard/Card.d.ts +1 -1
  24. package/dist/DataCard/Card.js +1 -1
  25. package/dist/DataCard.js +1 -1
  26. package/dist/DateTimePicker/Calendar.d.ts +4 -4
  27. package/dist/DateTimePicker/Calendar.js +4 -2
  28. package/dist/DateTimePicker/DateTimeDisplayInput.js +126 -136
  29. package/dist/DateTimePicker/DateTimeInput.js +4 -4
  30. package/dist/DateTimePicker/DateTimeUtils.d.ts +31 -31
  31. package/dist/DateTimePicker/DateTimeUtils.js +139 -197
  32. package/dist/DateTimePicker/TimePicker.d.ts +4 -4
  33. package/dist/DateTimePicker/TimePicker.js +3 -3
  34. package/dist/DateTimePicker.d.ts +5 -5
  35. package/dist/DateTimePicker.js +96 -74
  36. package/dist/Dialog.d.ts +13 -13
  37. package/dist/Dialog.js +57 -84
  38. package/dist/Drawer.d.ts +2 -2
  39. package/dist/Drawer.js +8 -8
  40. package/dist/HoverCard.d.ts +6 -5
  41. package/dist/HoverCard.js +64 -64
  42. package/dist/Icons/LineToolIcon.js +37 -10
  43. package/dist/Icons/MeasureIcon.d.ts +5 -0
  44. package/dist/Icons/MeasureIcon.js +26 -0
  45. package/dist/Icons/SearchIcon.d.ts +5 -0
  46. package/dist/Icons/SearchIcon.js +10 -0
  47. package/dist/Icons/index.d.ts +2 -0
  48. package/dist/Icons.js +76 -72
  49. package/dist/IconsAnimated/PanelLeftCloseIcon.js +2 -2
  50. package/dist/IconsAnimated/PanelLeftOpenIcon.js +2 -2
  51. package/dist/Input/InputUtils.d.ts +2 -2
  52. package/dist/Input/InputUtils.js +4 -4
  53. package/dist/Input.d.ts +1 -1
  54. package/dist/Input.js +31 -29
  55. package/dist/InputOTP.d.ts +10 -10
  56. package/dist/InputOTP.js +125 -123
  57. package/dist/Kbd.d.ts +8 -5
  58. package/dist/Kbd.js +85 -20
  59. package/dist/Label.d.ts +4 -2
  60. package/dist/Label.js +3 -3
  61. package/dist/MultiSelect/MultiSelectBase.d.ts +1 -1
  62. package/dist/MultiSelect/MultiSelectBase.js +278 -200
  63. package/dist/MultiSelect.d.ts +6 -6
  64. package/dist/MultiSelect.js +9 -9
  65. package/dist/Popover.js +22 -237
  66. package/dist/RadioButtonGroup/RadioButtonGroupBase.d.ts +11 -11
  67. package/dist/RadioButtonGroup/RadioButtonGroupBase.js +28 -28
  68. package/dist/RadioButtonGroup.d.ts +1 -1
  69. package/dist/RadioGroup.d.ts +15 -15
  70. package/dist/RadioGroup.js +253 -236
  71. package/dist/Select.d.ts +3 -1
  72. package/dist/Select.js +92 -87
  73. package/dist/Separator.js +4 -4
  74. package/dist/Skeleton.d.ts +1 -2
  75. package/dist/Skeleton.js +2 -4
  76. package/dist/Slider.d.ts +6 -6
  77. package/dist/Slider.js +78 -78
  78. package/dist/Switch/SwitchBase.d.ts +4 -4
  79. package/dist/Switch/SwitchBase.js +68 -68
  80. package/dist/Switch.d.ts +3 -3
  81. package/dist/Switch.js +9 -9
  82. package/dist/Tabs/TabsBase.js +39 -38
  83. package/dist/Tabs/tabsUtils.js +7 -7
  84. package/dist/Tabs.d.ts +0 -4
  85. package/dist/Tabs.js +62 -66
  86. package/dist/Textarea/TextareaUtils.d.ts +7 -7
  87. package/dist/Textarea/TextareaUtils.js +13 -13
  88. package/dist/Textarea.js +34 -22
  89. package/dist/Toast.d.ts +43 -0
  90. package/dist/Toast.js +883 -0
  91. package/dist/Toggle/ToggleBase.d.ts +4 -4
  92. package/dist/Toggle/ToggleBase.js +32 -33
  93. package/dist/Toggle.d.ts +1 -1
  94. package/dist/Toggle.js +7 -12
  95. package/dist/ToggleGroup/ToggleGroupBase.d.ts +5 -5
  96. package/dist/ToggleGroup/ToggleGroupBase.js +30 -30
  97. package/dist/ToggleGroup.d.ts +1 -1
  98. package/dist/ToggleGroup.js +27 -30
  99. package/dist/Tooltip.d.ts +1 -1
  100. package/dist/Tooltip.js +97 -97
  101. package/dist/Tray.d.ts +9 -9
  102. package/dist/Tray.js +77 -74
  103. package/dist/hooks/useAccordionAutoScroll.d.ts.map +1 -1
  104. package/dist/hooks/useAccordionAutoScroll.js +42 -39
  105. package/dist/hooks/useControllableState.d.ts +2 -2
  106. package/dist/hooks/useControllableState.d.ts.map +1 -1
  107. package/dist/hooks/useControllableState.js +2 -2
  108. package/dist/index-C12FUuIW.js +13 -0
  109. package/dist/{index-yU8jOTzS.js → index-CpovUAO-.js} +1 -1
  110. package/dist/{index-BdS7Ix8W.js → index-CqbPiOid.js} +1 -1
  111. package/dist/{index-B3UpsZ2x.js → index-CrjD9cAD.js} +1 -1
  112. package/dist/index-DEYs15GP.js +66 -0
  113. package/dist/index-DdFoGvON.js +146 -0
  114. package/dist/index-Q3N6lgwg.js +225 -0
  115. package/dist/index.d.ts +3 -3
  116. package/dist/index.d.ts.map +1 -1
  117. package/dist/primitives/button.d.ts +1 -1
  118. package/dist/primitives/button.js +4 -4
  119. package/dist/primitives/input.d.ts.map +1 -1
  120. package/dist/primitives/input.js +8 -5
  121. package/dist/primitives/select.d.ts +12 -13
  122. package/dist/primitives/select.d.ts.map +1 -1
  123. package/dist/primitives/select.js +68 -95
  124. package/dist/primitives/slot.d.ts +5 -5
  125. package/dist/primitives/slot.d.ts.map +1 -1
  126. package/dist/primitives/slot.js +24 -33
  127. package/dist/primitives/textarea.d.ts.map +1 -1
  128. package/dist/primitives/textarea.js +4 -3
  129. package/dist/{proxy-Cukf-VVj.js → proxy-CgaCj1WQ.js} +7 -3
  130. package/dist/styles/base-colors.css +30 -30
  131. package/dist/styles/horizon/base-colors.css +30 -30
  132. package/dist/styles/horizon/colors.css +40 -11
  133. package/dist/styles/horizon/utilities.css +26 -3
  134. package/dist/styles/main.css +1 -1
  135. package/dist/styles/spectral.css +1 -1
  136. package/dist/styles/theme.css +96 -44
  137. package/dist/{use-animation-zNd5Nq85.js → use-animation-CR-SdV2l.js} +1 -1
  138. package/dist/utils/formFieldUtils.d.ts +2 -2
  139. package/dist/utils/formFieldUtils.d.ts.map +1 -1
  140. package/dist/utils/formFieldUtils.js +14 -11
  141. package/dist/utils/sharedUtils.d.ts +3 -3
  142. package/dist/utils/sharedUtils.d.ts.map +1 -1
  143. package/dist/utils/sharedUtils.js +1 -4
  144. package/dist/utils/twUtils.d.ts +1 -1
  145. package/dist/utils/twUtils.d.ts.map +1 -1
  146. package/dist/utils/twUtils.js +1 -4
  147. package/package.json +5 -1
  148. package/dist/createLucideIcon-D4r5Phnh.js +0 -70
  149. package/dist/index-CeP1E2kK.js +0 -209
  150. package/dist/index-Dy-Hzr7y.js +0 -13
@@ -1,10 +1,10 @@
1
1
  "use client";
2
2
  import "./styles/main.css";
3
- import { jsx as s } from "react/jsx-runtime";
3
+ import { jsx as i } from "react/jsx-runtime";
4
4
  import { ButtonGroupButton as u } from "./ButtonGroup/ButtonGroupButton.js";
5
5
  import { Separator as d } from "./Separator.js";
6
6
  import { Slot as m } from "./primitives/slot.js";
7
- import { cn as i } from "./utils/twUtils.js";
7
+ import { cn as l } from "./utils/twUtils.js";
8
8
  import { c } from "./index-D29mdTf5.js";
9
9
  import { Children as f, isValidElement as b, cloneElement as g } from "react";
10
10
  const v = c(
@@ -22,35 +22,35 @@ const v = c(
22
22
  }
23
23
  }
24
24
  ), h = ({
25
- className: o,
25
+ children: o,
26
+ className: r,
26
27
  orientation: t = "horizontal",
27
- variant: r = "default",
28
28
  size: a = "md",
29
- children: l,
30
- ...n
31
- }) => /* @__PURE__ */ s("div", { role: "group", "data-slot": "button-group", "data-testid": "spectral-button-group", "aria-label": n["aria-label"], "data-orientation": t, className: i(v({ orientation: t }), o), ...n, children: f.map(l, (e) => b(e) && (e.type === p || e.type === u) ? g(e, {
32
- variant: e.props.variant ?? r,
29
+ variant: n = "default",
30
+ ...s
31
+ }) => /* @__PURE__ */ i("div", { "aria-label": s["aria-label"], className: l(v({ orientation: t }), r), "data-orientation": t, "data-slot": "button-group", "data-testid": "spectral-button-group", role: "group", ...s, children: f.map(o, (e) => b(e) && (e.type === p || e.type === u) ? g(e, {
32
+ variant: e.props.variant ?? n,
33
33
  size: e.props.size ?? a
34
34
  }) : e) });
35
35
  h.displayName = "ButtonGroup";
36
36
  const p = ({
37
- children: o,
37
+ asChild: o,
38
+ children: r,
38
39
  className: t,
39
- size: r,
40
- variant: a,
41
- asChild: l,
42
- ...n
43
- }) => /* @__PURE__ */ s(u, { "data-slot": "button-group-item", "data-testid": "spectral-button-group-item", "data-variant": a, size: r, variant: a, asChild: l, className: i(t), ...n, children: o });
40
+ size: a,
41
+ variant: n,
42
+ ...s
43
+ }) => /* @__PURE__ */ i(u, { asChild: o, className: l(t), "data-slot": "button-group-item", "data-testid": "spectral-button-group-item", "data-variant": n, size: a, variant: n, ...s, children: r });
44
44
  p.displayName = "ButtonGroupItem";
45
45
  const C = ({
46
+ asChild: o = !1,
47
+ className: r,
48
+ ...t
49
+ }) => /* @__PURE__ */ i(o ? m : "div", { className: l("bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", r), "data-slot": "button-group-text", "data-testid": "spectral-button-group-text", ...t }), x = ({
46
50
  className: o,
47
- asChild: t = !1,
48
- ...r
49
- }) => /* @__PURE__ */ s(t ? m : "div", { "data-slot": "button-group-text", "data-testid": "spectral-button-group-text", className: i("bg-muted flex items-center gap-2 rounded-md border px-4 text-sm font-medium shadow-xs [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4", o), ...r }), x = ({
50
- className: o,
51
- orientation: t = "vertical",
52
- ...r
53
- }) => /* @__PURE__ */ s(d, { "data-slot": "button-group-separator", "data-testid": "spectral-button-group-separator", orientation: t, className: i("bg-input-primitive-border relative m-0! self-stretch data-[orientation=vertical]:h-auto", o), ...r });
51
+ orientation: r = "vertical",
52
+ ...t
53
+ }) => /* @__PURE__ */ i(d, { className: l("bg-input-primitive-border relative m-0! self-stretch data-[orientation=vertical]:h-auto", o), "data-slot": "button-group-separator", "data-testid": "spectral-button-group-separator", orientation: r, ...t });
54
54
  x.displayName = "ButtonGroupSeparator";
55
55
  export {
56
56
  h as ButtonGroup,
@@ -1,8 +1,8 @@
1
1
  import { ButtonHTMLAttributes, MouseEvent, ReactElement, Ref } from 'react';
2
2
  type IconOrSVG = ReactElement | (() => ReactElement);
3
3
  export interface ButtonIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick'> {
4
- icon: IconOrSVG;
5
4
  className?: string;
5
+ icon: IconOrSVG;
6
6
  isLoading?: boolean;
7
7
  label: string;
8
8
  onClick?: (event: MouseEvent<HTMLButtonElement>) => void;
@@ -10,7 +10,7 @@ export interface ButtonIconProps extends Omit<ButtonHTMLAttributes<HTMLButtonEle
10
10
  size?: 'sm' | 'md' | 'lg';
11
11
  }
12
12
  export declare const ButtonIcon: {
13
- ({ ref, className, disabled, icon, isLoading, label, onClick, shape, size, ...props }: ButtonIconProps & {
13
+ ({ className, disabled, icon, isLoading, label, onClick, ref, shape, size, ...props }: ButtonIconProps & {
14
14
  ref?: Ref<HTMLButtonElement>;
15
15
  }): import("react/jsx-runtime").JSX.Element;
16
16
  displayName: string;
@@ -39,6 +39,7 @@ import "./Icons/LiveViewIcon.js";
39
39
  import { LoaderIcon as N } from "./Icons/LoaderIcon.js";
40
40
  import "./Icons/LocationIcon.js";
41
41
  import "./Icons/LogoutIcon.js";
42
+ import "./Icons/MeasureIcon.js";
42
43
  import "./Icons/MessagesIcon.js";
43
44
  import "./Icons/MetadataIcon.js";
44
45
  import "./Icons/MinusIcon.js";
@@ -50,6 +51,7 @@ import "./Icons/PlusIcon.js";
50
51
  import "./Icons/ResetIcon.js";
51
52
  import "./Icons/ReviewedIcon.js";
52
53
  import "./Icons/ScissorsIcon.js";
54
+ import "./Icons/SearchIcon.js";
53
55
  import "./Icons/SettingsIcon.js";
54
56
  import "./Icons/SortAscendingIcon.js";
55
57
  import "./Icons/SortAtoZIcon.js";
@@ -65,70 +67,69 @@ import "./Icons/WarningIcon.js";
65
67
  import "./Icons/ZoomAllIcon.js";
66
68
  import "./Icons/ZoomXIcon.js";
67
69
  import "./Icons/ZoomYIcon.js";
68
- import { cn as p } from "./utils/twUtils.js";
70
+ import { cn as e } from "./utils/twUtils.js";
69
71
  import { isValidElement as g, cloneElement as m } from "react";
70
- const k = `bg-transparent hover:bg-level-one text-text-primary inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-none focus-visible:outline-2
72
+ const x = `bg-transparent hover:bg-level-one text-text-primary inline-flex items-center justify-center whitespace-nowrap transition-colors focus:outline-none focus-visible:outline-2
71
73
  focus-visible:outline-offset-2 focus-visible:outline-level-two cursor-pointer [&_svg]:pointer-events-none [&_svg]:shrink-0`, n = {
72
74
  sm: { button: "h-8 w-8", icon: 16 },
73
75
  md: { button: "h-10 w-10", icon: 24 },
74
76
  lg: { button: "h-12 w-12", icon: 32 }
75
- }, x = ({
76
- ref: u,
77
- className: f,
77
+ }, k = ({
78
+ className: u,
78
79
  disabled: s,
79
80
  icon: r,
80
81
  isLoading: o = !1,
81
82
  label: c,
82
- onClick: d,
83
+ onClick: f,
84
+ ref: d,
83
85
  shape: h = "square",
84
86
  size: i = "md",
85
87
  ...b
86
88
  }) => {
87
- const v = (t) => d?.(t), y = o ? `${c} - Loading` : c, w = () => {
89
+ const y = (t) => f?.(t), v = o ? `${c} - Loading` : c, w = () => {
88
90
  if (o)
89
91
  return /* @__PURE__ */ a(N, { size: n[i].icon, ariaHidden: !0 });
90
92
  const t = typeof r == "function" ? r() : r;
91
93
  if (g(t)) {
92
- const e = n[i].icon;
94
+ const p = n[i].icon;
93
95
  if (t.type === "svg")
94
96
  return m(t, {
95
- width: e,
96
- height: e,
97
- className: p("shrink-0", t.props.className),
97
+ className: e("shrink-0", t.props.className),
98
+ height: p,
99
+ width: p,
98
100
  "aria-hidden": "true"
99
101
  });
100
- {
101
- const l = {
102
- className: p("shrink-0", t.props.className),
103
- ariaHidden: !0
102
+ const l = {
103
+ ariaHidden: !0,
104
+ className: e("shrink-0", t.props.className)
105
+ };
106
+ if (t.type.displayName?.endsWith("Icon") ?? !1) {
107
+ const I = {
108
+ ...l,
109
+ size: p
104
110
  };
105
- if (t.type.displayName?.endsWith("Icon") ?? !1) {
106
- const I = {
107
- ...l,
108
- size: e
109
- };
110
- return m(t, I);
111
- }
112
- return m(t, l);
111
+ return m(t, I);
113
112
  }
113
+ return m(t, l);
114
114
  }
115
115
  return t;
116
116
  };
117
117
  return /* @__PURE__ */ a(
118
118
  "button",
119
119
  {
120
- "aria-label": y,
121
- className: p(k, h === "circle" ? "rounded-full" : "rounded-[0.75rem]", n[i].button, o && "cursor-wait", s && "cursor-not-allowed opacity-50", f),
120
+ "aria-label": v,
121
+ className: e(x, h === "circle" ? "rounded-full" : "rounded-xl", n[i].button, o && "cursor-wait", s && "cursor-not-allowed opacity-50", u),
122
122
  "data-testid": "spectral-button-icon",
123
- disabled: s || o,
124
- onClick: v,
125
- ref: u,
123
+ disabled: s ?? o,
124
+ onClick: y,
125
+ ref: d,
126
+ type: "button",
126
127
  ...b,
127
128
  children: w()
128
129
  }
129
130
  );
130
131
  };
131
- x.displayName = "ButtonIcon";
132
+ k.displayName = "ButtonIcon";
132
133
  export {
133
- x as ButtonIcon
134
+ k as ButtonIcon
134
135
  };
@@ -12,7 +12,7 @@ export type CheckboxBaseProps = BaseButtonProps & AsChildProp & {
12
12
  value?: string;
13
13
  };
14
14
  export declare const CheckboxBase: {
15
- ({ ref, asChild, checked, className, disabled, defaultChecked, form, id, name, onCheckedChange, onClick, onKeyDown, required, type, value, ...rest }: CheckboxBaseProps & {
15
+ ({ asChild, checked, className, defaultChecked, disabled, form, id, name, onCheckedChange, onClick, onKeyDown, ref, required, type, value, ...rest }: CheckboxBaseProps & {
16
16
  ref?: Ref<HTMLButtonElement>;
17
17
  }): import("react/jsx-runtime").JSX.Element;
18
18
  displayName: string;
@@ -21,7 +21,7 @@ export type CheckboxIndicatorProps = HTMLAttributes<HTMLSpanElement> & AsChildPr
21
21
  forceMount?: boolean;
22
22
  };
23
23
  export declare const CheckboxIndicator: {
24
- ({ ref, asChild, className, forceMount, ...props }: CheckboxIndicatorProps & {
24
+ ({ asChild, className, forceMount, ref, ...props }: CheckboxIndicatorProps & {
25
25
  ref?: Ref<HTMLSpanElement>;
26
26
  }): import("react/jsx-runtime").JSX.Element | null;
27
27
  displayName: string;
@@ -4,74 +4,67 @@ import { jsx as f, jsxs as q } from "react/jsx-runtime";
4
4
  import { useControllableState as F } from "../hooks/useControllableState.js";
5
5
  import { Slot as y } from "../primitives/slot.js";
6
6
  import { cn as C } from "../utils/twUtils.js";
7
- import { createContext as K, useRef as M, useId as O, useEffect as g, useCallback as u, useContext as T } from "react";
8
- const E = K(null);
9
- function I(n) {
10
- return n === "indeterminate" ? "indeterminate" : n ? "checked" : "unchecked";
11
- }
12
- function V(n) {
13
- return n === "indeterminate" ? !0 : !n;
14
- }
15
- const $ = ({
16
- ref: n,
17
- asChild: d,
7
+ import { createContext as K, useRef as M, useId as O, useEffect as g, useCallback as d, useContext as T } from "react";
8
+ const E = K(null), I = (n) => n === "indeterminate" ? "indeterminate" : n ? "checked" : "unchecked", V = (n) => n === "indeterminate" ? !0 : !n, $ = ({
9
+ asChild: n,
18
10
  checked: l,
19
11
  className: m,
20
- disabled: i,
21
- defaultChecked: r = !1,
22
- form: h,
23
- id: p,
24
- name: w,
25
- onCheckedChange: N,
12
+ defaultChecked: o = !1,
13
+ disabled: r,
14
+ form: i,
15
+ id: h,
16
+ name: p,
17
+ onCheckedChange: w,
26
18
  onClick: b,
27
19
  onKeyDown: v,
20
+ ref: N,
28
21
  required: j,
29
22
  // eslint-disable-next-line @typescript-eslint/no-unused-vars
30
23
  type: A,
31
24
  value: S = "on",
32
25
  ...x
33
26
  }) => {
34
- const o = M(null), P = O(), R = p ?? `chk-${P}`, [t, a] = F({
35
- defaultValue: r,
36
- onChange: N,
27
+ const a = M(null), P = O(), R = h ?? `chk-${P}`, [t, s] = F({
28
+ defaultValue: o,
29
+ onChange: w,
37
30
  value: l
38
31
  });
39
32
  g(() => {
40
- o.current && (o.current.indeterminate = t === "indeterminate");
33
+ a.current && (a.current.indeterminate = t === "indeterminate");
41
34
  }, [t]), g(() => {
42
- const e = o.current?.form ?? null;
35
+ const e = a.current?.form ?? null;
43
36
  if (!e) return;
44
- const c = () => {
45
- a(r);
37
+ const u = () => {
38
+ s(o);
46
39
  };
47
- return e.addEventListener("reset", c), () => e.removeEventListener("reset", c);
48
- }, [r, a]);
49
- const k = u(() => {
50
- const e = o.current;
40
+ return e.addEventListener("reset", u), () => e.removeEventListener("reset", u);
41
+ }, [o, s]);
42
+ const k = d(() => {
43
+ const e = a.current;
51
44
  if (!e) return;
52
45
  e.checked = t === !0, e.indeterminate = t === "indeterminate";
53
- const c = new Event("change", { bubbles: !0 });
54
- e.dispatchEvent(c);
55
- }, [t]), s = u(() => {
56
- if (i) return;
46
+ const u = new Event("change", { bubbles: !0 });
47
+ e.dispatchEvent(u);
48
+ }, [t]), c = d(() => {
49
+ if (r) return;
57
50
  const e = V(t);
58
- a(e), queueMicrotask(() => k());
59
- }, [i, k, a, t]), B = u(
51
+ s(e), queueMicrotask(() => k());
52
+ }, [r, k, s, t]), B = d(
60
53
  (e) => {
61
- b?.(e), !e.defaultPrevented && s();
54
+ b?.(e), !e.defaultPrevented && c();
62
55
  },
63
- [s, b]
64
- ), D = u(
56
+ [c, b]
57
+ ), D = d(
65
58
  (e) => {
66
- v?.(e), !e.defaultPrevented && e.key === " " && (e.preventDefault(), s());
59
+ v?.(e), !e.defaultPrevented && e.key === " " && (e.preventDefault(), c());
67
60
  },
68
- [s, v]
69
- ), L = d ? y : "button";
70
- return /* @__PURE__ */ f(E.Provider, { value: { state: t, disabled: i }, children: /* @__PURE__ */ q(
61
+ [c, v]
62
+ ), L = n ? y : "button";
63
+ return /* @__PURE__ */ f(E.Provider, { value: { state: t, disabled: r }, children: /* @__PURE__ */ q(
71
64
  L,
72
65
  {
73
66
  "aria-checked": t === "indeterminate" ? "mixed" : t,
74
- "aria-disabled": i || void 0,
67
+ "aria-disabled": r ?? void 0,
75
68
  className: C(
76
69
  "inline-flex h-4 w-4 shrink-0 items-center justify-center",
77
70
  "border-input bg-background rounded-sm border",
@@ -82,9 +75,9 @@ const $ = ({
82
75
  ),
83
76
  "data-indeterminate": t === "indeterminate" ? "" : void 0,
84
77
  "data-state": I(t),
85
- disabled: i,
78
+ disabled: r,
86
79
  id: R,
87
- ref: n,
80
+ ref: N,
88
81
  role: "checkbox",
89
82
  type: "button",
90
83
  onClick: B,
@@ -96,22 +89,22 @@ const $ = ({
96
89
  {
97
90
  "aria-hidden": "true",
98
91
  checked: t === !0,
99
- disabled: i,
100
- form: h,
101
- name: w,
102
- ref: o,
92
+ disabled: r,
93
+ form: i,
94
+ name: p,
103
95
  readOnly: !0,
96
+ ref: a,
104
97
  required: j,
105
- tabIndex: -1,
106
- type: "checkbox",
107
- value: S,
108
98
  style: {
109
99
  position: "absolute",
110
100
  opacity: 0,
111
101
  width: 0,
112
102
  height: 0,
113
103
  pointerEvents: "none"
114
- }
104
+ },
105
+ tabIndex: -1,
106
+ type: "checkbox",
107
+ value: S
115
108
  }
116
109
  ),
117
110
  x.children
@@ -121,14 +114,14 @@ const $ = ({
121
114
  };
122
115
  $.displayName = "CheckboxBase";
123
116
  const z = ({
124
- ref: n,
125
- asChild: d,
117
+ asChild: n,
126
118
  className: l,
127
119
  forceMount: m,
128
- ...i
120
+ ref: o,
121
+ ...r
129
122
  }) => {
130
- const r = T(E);
131
- return !r || !(r.state === !0 || r.state === "indeterminate") && !m ? null : /* @__PURE__ */ f(d ? y : "span", { className: C("flex items-center justify-center text-current", l), "data-indeterminate": r.state === "indeterminate" ? "" : void 0, "data-state": I(r.state), ref: n, ...i });
123
+ const i = T(E);
124
+ return !i || !(i.state === !0 || i.state === "indeterminate") && !m ? null : /* @__PURE__ */ f(n ? y : "span", { className: C("flex items-center justify-center text-current", l), "data-indeterminate": i.state === "indeterminate" ? "" : void 0, "data-state": I(i.state), ref: o, ...r });
132
125
  };
133
126
  z.displayName = "CheckboxIndicator";
134
127
  export {
package/dist/Checkbox.js CHANGED
@@ -1,6 +1,6 @@
1
1
  import "./styles/main.css";
2
2
  import { jsxs as d, jsx as o } from "react/jsx-runtime";
3
- import { CheckboxBase as l, CheckboxIndicator as b } from "./Checkbox/CheckboxBase.js";
3
+ import { CheckboxBase as l, CheckboxIndicator as n } from "./Checkbox/CheckboxBase.js";
4
4
  import "./Icons/AnalyzeIcon.js";
5
5
  import "./Icons/AnnotationsIcon.js";
6
6
  import "./Icons/ApprovedIcon.js";
@@ -9,7 +9,7 @@ import "./Icons/ArrowUpIcon.js";
9
9
  import "./Icons/CalendarIcon.js";
10
10
  import "./Icons/CheckCircleIcon.js";
11
11
  import "./Icons/CheckSquareIcon.js";
12
- import { CheckmarkIcon as n } from "./Icons/CheckmarkIcon.js";
12
+ import { CheckmarkIcon as b } from "./Icons/CheckmarkIcon.js";
13
13
  import "./Icons/ChevronDownIcon.js";
14
14
  import "./Icons/ChevronUpIcon.js";
15
15
  import "./Icons/ClockIcon.js";
@@ -39,6 +39,7 @@ import "./Icons/LiveViewIcon.js";
39
39
  import "./Icons/LoaderIcon.js";
40
40
  import "./Icons/LocationIcon.js";
41
41
  import "./Icons/LogoutIcon.js";
42
+ import "./Icons/MeasureIcon.js";
42
43
  import "./Icons/MessagesIcon.js";
43
44
  import "./Icons/MetadataIcon.js";
44
45
  import { MinusIcon as h } from "./Icons/MinusIcon.js";
@@ -50,6 +51,7 @@ import "./Icons/PlusIcon.js";
50
51
  import "./Icons/ResetIcon.js";
51
52
  import "./Icons/ReviewedIcon.js";
52
53
  import "./Icons/ScissorsIcon.js";
54
+ import "./Icons/SearchIcon.js";
53
55
  import "./Icons/SettingsIcon.js";
54
56
  import "./Icons/SortAscendingIcon.js";
55
57
  import "./Icons/SortAtoZIcon.js";
@@ -68,38 +70,34 @@ import "./Icons/ZoomYIcon.js";
68
70
  import { cn as i } from "./utils/twUtils.js";
69
71
  import "react";
70
72
  const x = ({
71
- checked: r,
73
+ checked: t,
72
74
  className: e,
73
- id: t,
75
+ id: r,
74
76
  labelText: m,
75
77
  onCheckedChange: p,
76
78
  ref: c,
77
- required: a,
78
- ...s
79
+ required: s,
80
+ ...a
79
81
  }) => /* @__PURE__ */ d("div", { className: "flex items-center gap-2", children: [
80
82
  /* @__PURE__ */ o(
81
83
  l,
82
84
  {
83
- "aria-labelledby": `${t}-label`,
84
- "aria-required": a,
85
- checked: r,
85
+ "aria-required": s ?? void 0,
86
+ checked: t,
86
87
  className: i(
87
- [
88
- "checkbox peer border-checkbox-border h-5 w-5 shrink-0 rounded-sm border hover:opacity-80",
89
- "focus-visible:outline-checkbox-border--focus focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-2 disabled:cursor-not-allowed",
90
- "data-[state=checked]:border-checkbox-border--checked disabled:opacity-50"
91
- ].join(" "),
88
+ "checkbox peer border-checkbox-border focus-visible:outline-checkbox-border--focus h-5 w-5 shrink-0 rounded-sm border hover:opacity-80 focus:outline-none focus-visible:outline-1",
89
+ "data-[state=checked]:border-checkbox-border--checked focus-visible:outline-offset-2 disabled:cursor-not-allowed disabled:opacity-50",
92
90
  e
93
91
  ),
94
92
  "data-testid": "spectral-checkbox",
95
- id: t,
93
+ id: r,
96
94
  onCheckedChange: p,
97
95
  ref: c,
98
- ...s,
99
- children: /* @__PURE__ */ o(b, { "data-testid": "spectral-checkbox-indicator", className: i("checkbox-indicator text-checkbox-indicator--checked flex items-center justify-center"), children: r === "indeterminate" ? /* @__PURE__ */ o(h, { className: "checkbox-indeterminate", size: 16, strokeWidth: 4 }) : /* @__PURE__ */ o(n, { className: "checkbox-check", size: 16, strokeWidth: 4 }) })
96
+ ...a,
97
+ children: /* @__PURE__ */ o(n, { "data-testid": "spectral-checkbox-indicator", className: i("checkbox-indicator text-checkbox-indicator--checked flex items-center justify-center"), children: t === "indeterminate" ? /* @__PURE__ */ o(h, { className: "checkbox-indeterminate", size: 16, strokeWidth: 4 }) : /* @__PURE__ */ o(b, { className: "checkbox-check", size: 16, strokeWidth: 4 }) })
100
98
  }
101
99
  ),
102
- /* @__PURE__ */ o("label", { className: "text-md text-text-primary peer-disabled:text-neutral-400", "data-testid": "spectral-checkbox-label", htmlFor: t, children: m })
100
+ /* @__PURE__ */ o("label", { className: "text-md text-text-primary peer-disabled:text-neutral-400", "data-testid": "spectral-checkbox-label", htmlFor: r, children: m })
103
101
  ] });
104
102
  x.displayName = "Checkbox";
105
103
  export {
@@ -7,5 +7,5 @@ export declare const CardHeader: ({ className, ...props }: CardProps) => import(
7
7
  export declare const CardTitle: ({ className, asChild, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
8
8
  export declare const CardHeaderEndSlot: ({ className, asChild, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
9
9
  export declare const CardContent: ({ className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
10
- export declare const Card: ({ className, asChild, children, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
10
+ export declare const Card: ({ asChild, children, className, ...props }: CardProps) => import("react/jsx-runtime").JSX.Element;
11
11
  //# sourceMappingURL=Card.d.ts.map
@@ -3,7 +3,7 @@ import { jsx as e } from "react/jsx-runtime";
3
3
  import { Slot as c } from "../primitives/slot.js";
4
4
  import { cn as d } from "../utils/twUtils.js";
5
5
  import "react";
6
- const o = "text-text-primary flex flex-col w-full card-effects p-3 gap-6 rounded-xl", f = ({ ...t }) => /* @__PURE__ */ e("div", { "data-slot": "card", "data-testid": "spectral-card", ...t }), C = ({ className: t, ...a }) => /* @__PURE__ */ e("div", { "data-slot": "card-header", "data-testid": "spectral-card-header", className: d("@container/card-header flex items-center justify-between pb-4", t), ...a }), u = ({ className: t, asChild: a = !1, ...r }) => /* @__PURE__ */ e(a ? c : "div", { "data-slot": "card-title", "data-testid": "spectral-card-title", className: d("text-xl font-semibold", t), ...r }), x = ({ className: t, asChild: a = !1, ...r }) => /* @__PURE__ */ e(a ? c : "div", { "data-slot": "card-action", "data-testid": "spectral-card-action", className: d("justify-self-end", t), ...r }), v = ({ className: t, ...a }) => /* @__PURE__ */ e("div", { "data-slot": "card-content", "data-testid": "spectral-card-content", className: t, ...a }), N = ({ className: t, asChild: a = !1, children: r, ...s }) => /* @__PURE__ */ e(a ? c : "div", { "data-slot": "card", "data-testid": "spectral-card", className: d(o, t), ...s, children: r });
6
+ const o = "text-text-primary flex flex-col w-full card-effects p-3 gap-6 rounded-xl", f = ({ ...t }) => /* @__PURE__ */ e("div", { "data-slot": "card", "data-testid": "spectral-card", ...t }), C = ({ className: t, ...a }) => /* @__PURE__ */ e("div", { className: d("@container/card-header flex items-center justify-between pb-4", t), "data-slot": "card-header", "data-testid": "spectral-card-header", ...a }), u = ({ className: t, asChild: a = !1, ...r }) => /* @__PURE__ */ e(a ? c : "div", { className: d("text-xl font-semibold", t), "data-slot": "card-title", "data-testid": "spectral-card-title", ...r }), x = ({ className: t, asChild: a = !1, ...r }) => /* @__PURE__ */ e(a ? c : "div", { className: d("justify-self-end", t), "data-slot": "card-action", "data-testid": "spectral-card-action", ...r }), v = ({ className: t, ...a }) => /* @__PURE__ */ e("div", { className: t, "data-slot": "card-content", "data-testid": "spectral-card-content", ...a }), N = ({ asChild: t = !1, children: a, className: r, ...s }) => /* @__PURE__ */ e(t ? c : "div", { className: d(o, r), "data-slot": "card", "data-testid": "spectral-card", ...s, children: a });
7
7
  export {
8
8
  N as Card,
9
9
  f as CardBase,
package/dist/DataCard.js CHANGED
@@ -9,7 +9,7 @@ const C = ({ accentColor: d, cardHeaderEndSlot: e, className: r, dataDescription
9
9
  /* @__PURE__ */ a("div", { style: { color: d }, "data-testid": "spectral-datacard-end-slot", children: e })
10
10
  ] }),
11
11
  /* @__PURE__ */ a(m, { children: /* @__PURE__ */ t("div", { className: "flex flex-col gap-4", children: [
12
- /* @__PURE__ */ a("div", { className: "text-4xl font-bold", style: { color: d }, "data-testid": "spectral-datacard-data-value", children: c }),
12
+ /* @__PURE__ */ a("div", { className: "text-4xl font-bold", "data-testid": "spectral-datacard-data-value", style: { color: d }, children: c }),
13
13
  /* @__PURE__ */ a("div", { className: "text-data-card-description text-xs", "data-testid": "spectral-datacard-data-description", children: s })
14
14
  ] }) })
15
15
  ] });
@@ -6,8 +6,8 @@ export type CalendarProps = DayPickerProps & {
6
6
  /** The locale object used to localize dates. Import from 'react-day-picker/locale'. */
7
7
  locale?: Partial<Locale>;
8
8
  };
9
- export declare function Calendar({ classNames, disabled, disablePastDates, fixedWeeks, locale, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
10
- export declare namespace Calendar {
11
- var displayName: string;
12
- }
9
+ export declare const Calendar: {
10
+ ({ classNames, disabled, disablePastDates, fixedWeeks, locale, showOutsideDays, ...props }: CalendarProps): import("react/jsx-runtime").JSX.Element;
11
+ displayName: string;
12
+ };
13
13
  //# sourceMappingURL=Calendar.d.ts.map
@@ -39,6 +39,7 @@ import "../Icons/LiveViewIcon.js";
39
39
  import "../Icons/LoaderIcon.js";
40
40
  import "../Icons/LocationIcon.js";
41
41
  import "../Icons/LogoutIcon.js";
42
+ import "../Icons/MeasureIcon.js";
42
43
  import "../Icons/MessagesIcon.js";
43
44
  import "../Icons/MetadataIcon.js";
44
45
  import "../Icons/MinusIcon.js";
@@ -50,6 +51,7 @@ import "../Icons/PlusIcon.js";
50
51
  import "../Icons/ResetIcon.js";
51
52
  import "../Icons/ReviewedIcon.js";
52
53
  import "../Icons/ScissorsIcon.js";
54
+ import "../Icons/SearchIcon.js";
53
55
  import "../Icons/SettingsIcon.js";
54
56
  import "../Icons/SortAscendingIcon.js";
55
57
  import "../Icons/SortAtoZIcon.js";
@@ -2910,7 +2912,7 @@ function vs(e) {
2910
2912
  )
2911
2913
  );
2912
2914
  }
2913
- function Ws({ classNames: e, disabled: t, disablePastDates: r = !0, fixedWeeks: n, locale: o, showOutsideDays: i = !0, ...a }) {
2915
+ const Ws = ({ classNames: e, disabled: t, disablePastDates: r = !0, fixedWeeks: n, locale: o, showOutsideDays: i = !0, ...a }) => {
2914
2916
  const s = be(() => /* @__PURE__ */ new Date(), []), c = [...r ? [{ before: s }] : [], ...Array.isArray(t) ? t : t ? [t] : []];
2915
2917
  return /* @__PURE__ */ at(
2916
2918
  vs,
@@ -2951,7 +2953,7 @@ function Ws({ classNames: e, disabled: t, disablePastDates: r = !0, fixedWeeks:
2951
2953
  showOutsideDays: i
2952
2954
  }
2953
2955
  );
2954
- }
2956
+ };
2955
2957
  Ws.displayName = "Calendar";
2956
2958
  export {
2957
2959
  Ws as Calendar