@spear-ai/spectral 1.9.1 → 1.10.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 (236) hide show
  1. package/README.md +6 -5
  2. package/dist/.js +112 -239
  3. package/dist/Accordion-CDXdSAST.js +363 -0
  4. package/dist/Accordion.js +3 -498
  5. package/dist/Alert/AlertBase.js +69 -152
  6. package/dist/Alert.js +58 -106
  7. package/dist/AnimatePresence-D-9jXfgI.js +178 -0
  8. package/dist/App.js +6 -6
  9. package/dist/Avatar.js +83 -65
  10. package/dist/Badge.d.ts +1 -3
  11. package/dist/Badge.js +21 -25
  12. package/dist/Button.js +102 -178
  13. package/dist/ButtonGroup/ButtonGroupButton.js +38 -40
  14. package/dist/ButtonGroup.js +55 -59
  15. package/dist/ButtonIcon.js +58 -134
  16. package/dist/Calendar-s4lyijkn.js +3109 -0
  17. package/dist/Checkbox/CheckboxBase.js +94 -126
  18. package/dist/Checkbox.d.ts +1 -1
  19. package/dist/Checkbox.js +40 -105
  20. package/dist/Combobox/ComboboxBase.js +2 -79
  21. package/dist/Combobox.js +106 -172
  22. package/dist/ComboboxBase-D8Nf4xC-.js +491 -0
  23. package/dist/ControlGroup/ControlGroupSelect.d.ts +1 -1
  24. package/dist/ControlGroup/ControlGroupSelect.js +85 -101
  25. package/dist/ControlGroup.js +45 -48
  26. package/dist/DataCard/Card.js +37 -12
  27. package/dist/DataCard.d.ts +1 -1
  28. package/dist/DataCard.js +36 -16
  29. package/dist/DateTimePicker/Calendar.js +2 -2967
  30. package/dist/DateTimePicker/DateTimeDisplayInput.d.ts +1 -1
  31. package/dist/DateTimePicker/DateTimeDisplayInput.js +379 -275
  32. package/dist/DateTimePicker/DateTimeInput.d.ts +1 -1
  33. package/dist/DateTimePicker/DateTimeInput.js +133 -141
  34. package/dist/DateTimePicker/DateTimeUtils.js +2 -2193
  35. package/dist/DateTimePicker/TimePeriodSelect.d.ts +1 -1
  36. package/dist/DateTimePicker/TimePeriodSelect.js +45 -20
  37. package/dist/DateTimePicker/TimePicker.d.ts +1 -1
  38. package/dist/DateTimePicker/TimePicker.js +76 -60
  39. package/dist/DateTimePicker.d.ts +2 -2
  40. package/dist/DateTimePicker.js +87 -205
  41. package/dist/DateTimeUtils-DVvG6H-p.js +2098 -0
  42. package/dist/Dialog.js +74 -74
  43. package/dist/Drawer.js +67 -37
  44. package/dist/HoverCard-CYDsIiVK.js +201 -0
  45. package/dist/HoverCard.d.ts +1 -1
  46. package/dist/HoverCard.js +2 -218
  47. package/dist/Icons/AnalyzeIcon.js +50 -57
  48. package/dist/Icons/AnnotationsIcon.js +20 -15
  49. package/dist/Icons/ApprovedIcon.js +26 -18
  50. package/dist/Icons/ArrowDownIcon.js +20 -6
  51. package/dist/Icons/ArrowUpIcon.js +20 -6
  52. package/dist/Icons/BoxToolIcon.js +17 -12
  53. package/dist/Icons/CalendarIcon.js +43 -20
  54. package/dist/Icons/CheckCircleIcon.js +26 -10
  55. package/dist/Icons/CheckSquareIcon.js +26 -10
  56. package/dist/Icons/CheckmarkIcon.js +22 -9
  57. package/dist/Icons/ChevronDownIcon.js +22 -9
  58. package/dist/Icons/ChevronUpIcon.js +22 -9
  59. package/dist/Icons/ClockIcon.js +26 -18
  60. package/dist/Icons/CloseCircleIcon.js +26 -10
  61. package/dist/Icons/CloseIcon.js +18 -9
  62. package/dist/Icons/DashboardIcon.js +36 -10
  63. package/dist/Icons/DatabaseIcon.js +36 -19
  64. package/dist/Icons/DeleteIcon.js +36 -19
  65. package/dist/Icons/DurationIcon.js +57 -22
  66. package/dist/Icons/EditIcon.js +26 -27
  67. package/dist/Icons/EmailIcon.js +26 -10
  68. package/dist/Icons/EraserIcon.js +41 -25
  69. package/dist/Icons/ErrorIcon.js +27 -11
  70. package/dist/Icons/EyeClosedIcon.js +29 -13
  71. package/dist/Icons/EyeClosedIcon2.js +27 -11
  72. package/dist/Icons/EyeOpenIcon.js +22 -9
  73. package/dist/Icons/FileDownloadIcon.js +43 -20
  74. package/dist/Icons/GoToFirstIcon.js +26 -9
  75. package/dist/Icons/GoToLastIcon.js +26 -9
  76. package/dist/Icons/HarmonicCursorsIcon.js +23 -9
  77. package/dist/Icons/IconBase.d.ts +3 -3
  78. package/dist/Icons/IconBase.js +49 -66
  79. package/dist/Icons/InfoIcon.js +36 -10
  80. package/dist/Icons/KeyboardIcon.js +26 -27
  81. package/dist/Icons/LabelIcon.js +19 -14
  82. package/dist/Icons/LassoIcon.js +36 -28
  83. package/dist/Icons/LineToolIcon.js +48 -39
  84. package/dist/Icons/LiveViewIcon.js +50 -12
  85. package/dist/Icons/LoaderIcon.js +67 -27
  86. package/dist/Icons/LocationIcon.js +26 -27
  87. package/dist/Icons/LogoutIcon.js +20 -15
  88. package/dist/Icons/MeasureIcon.js +78 -25
  89. package/dist/Icons/MessagesIcon.js +33 -18
  90. package/dist/Icons/MetadataIcon.js +20 -15
  91. package/dist/Icons/MinusIcon.d.ts +1 -1
  92. package/dist/Icons/MinusIcon.js +18 -6
  93. package/dist/Icons/OntologyIcon.js +87 -71
  94. package/dist/Icons/PanelIconClose.js +28 -10
  95. package/dist/Icons/PanelIconOpen.js +28 -10
  96. package/dist/Icons/PlayIcon.js +20 -6
  97. package/dist/Icons/PlusIcon.js +20 -14
  98. package/dist/Icons/PolygonIcon.js +50 -39
  99. package/dist/Icons/ProgressCheckIcon.d.ts +5 -0
  100. package/dist/Icons/ProgressCheckIcon.js +58 -0
  101. package/dist/Icons/ResetIcon.js +17 -12
  102. package/dist/Icons/ReviewedIcon.js +36 -19
  103. package/dist/Icons/ScissorsIcon.js +22 -17
  104. package/dist/Icons/SearchIcon.js +26 -9
  105. package/dist/Icons/SettingsIcon.js +26 -27
  106. package/dist/Icons/SortAscendingIcon.js +50 -12
  107. package/dist/Icons/SortAtoZIcon.js +50 -12
  108. package/dist/Icons/SortDescendingIcon.js +50 -12
  109. package/dist/Icons/SortZtoAIcon.js +50 -12
  110. package/dist/Icons/StackIcon.js +26 -9
  111. package/dist/Icons/StarIcon.js +20 -6
  112. package/dist/Icons/TrashIcon.js +17 -12
  113. package/dist/Icons/UndoIcon.js +20 -15
  114. package/dist/Icons/User2Icon.js +26 -10
  115. package/dist/Icons/UserIcon.js +19 -14
  116. package/dist/Icons/WarningIcon.js +19 -14
  117. package/dist/Icons/ZoomAllIcon.js +71 -15
  118. package/dist/Icons/ZoomXIcon.js +36 -10
  119. package/dist/Icons/ZoomYIcon.js +36 -10
  120. package/dist/Icons/index.d.ts +1 -0
  121. package/dist/Icons.js +68 -136
  122. package/dist/IconsAnimated/PanelLeftCloseIcon.js +66 -36
  123. package/dist/IconsAnimated/PanelLeftOpenIcon.js +66 -36
  124. package/dist/IconsAnimated.js +3 -6
  125. package/dist/Input/InputUtils.js +51 -52
  126. package/dist/Input.js +132 -185
  127. package/dist/InputOTP-XUWW9xcI.js +461 -0
  128. package/dist/InputOTP.js +2 -382
  129. package/dist/Kbd.d.ts +1 -1
  130. package/dist/Kbd.js +182 -86
  131. package/dist/Label.js +12 -14
  132. package/dist/MultiSelect/MultiSelectBase.js +331 -403
  133. package/dist/MultiSelect.d.ts +1 -1
  134. package/dist/MultiSelect.js +23 -23
  135. package/dist/Popover.js +28 -32
  136. package/dist/RadioButton.d.ts +17 -0
  137. package/dist/RadioButton.js +33 -0
  138. package/dist/RadioButtonGroup/RadioButtonGroupBase.d.ts +3 -1
  139. package/dist/RadioButtonGroup/RadioButtonGroupBase.js +49 -46
  140. package/dist/RadioButtonGroup.d.ts +1 -1
  141. package/dist/RadioButtonGroup.js +11 -8
  142. package/dist/RadioGroup-w_q6RGEK.js +447 -0
  143. package/dist/RadioGroup.js +2 -505
  144. package/dist/Select.js +163 -186
  145. package/dist/Separator.js +16 -19
  146. package/dist/Skeleton.js +10 -6
  147. package/dist/Slider-BzzZT3Zm.js +490 -0
  148. package/dist/Slider.js +2 -562
  149. package/dist/SpectralProvider.js +8 -5
  150. package/dist/Switch/SwitchBase.js +91 -95
  151. package/dist/Switch-CVzRJ-0n.js +126 -0
  152. package/dist/Switch.d.ts +1 -1
  153. package/dist/Switch.js +2 -134
  154. package/dist/Tabs/TabsBase.js +242 -250
  155. package/dist/Tabs/tabsUtils.js +65 -73
  156. package/dist/Tabs.d.ts +1 -1
  157. package/dist/Tabs.js +73 -103
  158. package/dist/Textarea/TextareaUtils.js +35 -46
  159. package/dist/Textarea.js +83 -160
  160. package/dist/Toast-9zqXxKKO.js +711 -0
  161. package/dist/Toast.js +2 -885
  162. package/dist/Toggle/ToggleBase.js +46 -56
  163. package/dist/Toggle.d.ts +1 -1
  164. package/dist/Toggle.js +52 -62
  165. package/dist/ToggleGroup/ToggleGroupBase.js +128 -104
  166. package/dist/ToggleGroup.d.ts +1 -1
  167. package/dist/ToggleGroup.js +52 -63
  168. package/dist/Tooltip-D1K8kY1y.js +389 -0
  169. package/dist/Tooltip.js +2 -365
  170. package/dist/Tray.js +174 -217
  171. package/dist/chunk-h9knIhTc.js +20 -0
  172. package/dist/clsx-jM1GlMvB.js +16 -0
  173. package/dist/dist-3Af8168y.js +913 -0
  174. package/dist/dist-7HRQ5IKN.js +249 -0
  175. package/dist/dist-B2k1iWFp.js +129 -0
  176. package/dist/dist-B4FgboI8.js +122 -0
  177. package/dist/dist-B4g6zpUF.js +33 -0
  178. package/dist/dist-B9tup-4O.js +216 -0
  179. package/dist/dist-BK1K0g9W.js +29 -0
  180. package/dist/dist-Bfjk-jx9.js +28 -0
  181. package/dist/dist-Bft31cJh.js +65 -0
  182. package/dist/dist-BtdmHAzK.js +190 -0
  183. package/dist/dist-C0Hifjgh.js +1287 -0
  184. package/dist/dist-CGzgmYB9.js +68 -0
  185. package/dist/dist-ClmepHp4.js +10 -0
  186. package/dist/dist-D8Wb_MX9.js +6 -0
  187. package/dist/dist-Dtvmk11N.js +12 -0
  188. package/dist/dist-fW81qjVl.js +677 -0
  189. package/dist/dist-s1uWaZYZ.js +11 -0
  190. package/dist/es2015-YHaMV-St.js +701 -0
  191. package/dist/hooks/useAccordionAutoScroll.js +66 -67
  192. package/dist/hooks/useControllableState.js +14 -13
  193. package/dist/hooks/useTheme.js +21 -17
  194. package/dist/index.d.ts +2 -1
  195. package/dist/index.d.ts.map +1 -1
  196. package/dist/main.js +18954 -27224
  197. package/dist/primitives/button.js +39 -41
  198. package/dist/primitives/input-group.js +57 -73
  199. package/dist/primitives/input.js +11 -20
  200. package/dist/primitives/popover.js +34 -28
  201. package/dist/primitives/select.js +70 -138
  202. package/dist/primitives/slot.js +32 -31
  203. package/dist/primitives/textarea.js +10 -16
  204. package/dist/proxy-Dn10Pl_g.js +4920 -0
  205. package/dist/styles/main.css +2 -1
  206. package/dist/styles/spectral.css +1 -1
  207. package/dist/twUtils-VNWgstKL.js +1673 -0
  208. package/dist/use-animation-CBUDycyW.js +57 -0
  209. package/dist/utils/constants.js +4 -4
  210. package/dist/utils/formFieldUtils.js +136 -148
  211. package/dist/utils/sharedUtils.js +26 -7
  212. package/dist/utils/twUtils.js +2 -2919
  213. package/package.json +24 -28
  214. package/dist/ComboboxBase-CxNxYtdT.js +0 -408
  215. package/dist/clsx-OuTLNxxd.js +0 -16
  216. package/dist/index-0ioNhtNM.js +0 -10
  217. package/dist/index-6oYKCvIn.js +0 -677
  218. package/dist/index-BFOf48AQ.js +0 -69
  219. package/dist/index-BZPx6jYI.js +0 -8
  220. package/dist/index-BlHU_t18.js +0 -142
  221. package/dist/index-Bm1RbF6w.js +0 -1037
  222. package/dist/index-Bv2OIg5P.js +0 -225
  223. package/dist/index-CKEI0pDv.js +0 -56
  224. package/dist/index-CM_hWgfC.js +0 -32
  225. package/dist/index-C_YVr64u.js +0 -1538
  226. package/dist/index-Cl8VeY0o.js +0 -149
  227. package/dist/index-CwSyIPrv.js +0 -13
  228. package/dist/index-D29mdTf5.js +0 -34
  229. package/dist/index-DEYs15GP.js +0 -66
  230. package/dist/index-Dc0No4pV.js +0 -233
  231. package/dist/index-T6XEa11q.js +0 -822
  232. package/dist/index-pBCLb6Gr.js +0 -240
  233. package/dist/index-psiVrsnE.js +0 -27
  234. package/dist/index-rKs9bXHr.js +0 -6
  235. package/dist/proxy-CO_-Vget.js +0 -4975
  236. package/dist/use-animation-DhEPRwZ3.js +0 -62
@@ -1,5 +1,5 @@
1
- import { Period, PeriodLabels } from './DateTimeUtils';
2
1
  import { ComponentProps } from 'react';
2
+ import { Period, PeriodLabels } from './DateTimeUtils';
3
3
  export interface TimePeriodSelectProps extends Omit<ComponentProps<'button'>, 'onChange' | 'ref'> {
4
4
  ariaLabel?: string;
5
5
  labels?: PeriodLabels;
@@ -1,23 +1,48 @@
1
1
  "use client";
2
2
  import "../styles/main.css";
3
- import { jsxs as a, jsx as r } from "react/jsx-runtime";
4
- import "./DateTimeUtils.js";
5
- import { Select as S, SelectTrigger as A, SelectValue as v, SelectContent as w, SelectItem as o } from "../primitives/select.js";
6
- import { cn as y } from "../utils/twUtils.js";
7
- import { forwardRef as D } from "react";
8
- const L = { am: "AM", pm: "PM" }, M = D(({ ariaLabel: c, className: m, disabled: l, labels: e = L, onLeftFocus: d, onPeriodChange: n, onRightFocus: p, period: i, ...s }, f) => {
9
- const u = c ?? `Select ${e.am} or ${e.pm}`, h = (t) => {
10
- t.key === "ArrowRight" && (t.preventDefault(), p?.()), t.key === "ArrowLeft" && (t.preventDefault(), d?.());
11
- };
12
- return /* @__PURE__ */ a(S, { defaultValue: i, disabled: l, onValueChange: (t) => n(t), value: i, children: [
13
- /* @__PURE__ */ r(A, { "aria-label": u, className: y("w-fit", m), "data-slot": "time-period-select", "data-testid": "spectral-time-period-select", onKeyDown: h, ref: f, size: "sm", ...s, children: /* @__PURE__ */ r(v, { children: i === "AM" ? e.am : e.pm }) }),
14
- /* @__PURE__ */ a(w, { "data-testid": "spectral-time-period-select-content", position: "popper", sideOffset: 4, children: [
15
- /* @__PURE__ */ r(o, { "data-testid": "spectral-time-period-select-am", value: "AM", children: e.am }),
16
- /* @__PURE__ */ r(o, { "data-testid": "spectral-time-period-select-pm", value: "PM", children: e.pm })
17
- ] })
18
- ] });
3
+ import { t as e } from "../twUtils-VNWgstKL.js";
4
+ import { Select as t, SelectContent as n, SelectItem as r, SelectTrigger as i, SelectValue as a } from "../primitives/select.js";
5
+ import { forwardRef as o } from "react";
6
+ import { jsx as s, jsxs as c } from "react/jsx-runtime";
7
+ //#region src/components/DateTimePicker/TimePeriodSelect.tsx
8
+ var l = {
9
+ am: "AM",
10
+ pm: "PM"
11
+ }, u = o(({ ariaLabel: o, className: u, disabled: d, labels: f = l, onLeftFocus: p, onPeriodChange: m, onRightFocus: h, period: g, ..._ }, v) => {
12
+ let y = o ?? `Select ${f.am} or ${f.pm}`, b = (e) => {
13
+ e.key === "ArrowRight" && (e.preventDefault(), h?.()), e.key === "ArrowLeft" && (e.preventDefault(), p?.());
14
+ };
15
+ return /* @__PURE__ */ c(t, {
16
+ defaultValue: g,
17
+ disabled: d,
18
+ onValueChange: (e) => m(e),
19
+ value: g,
20
+ children: [/* @__PURE__ */ s(i, {
21
+ "aria-label": y,
22
+ className: e("w-fit", u),
23
+ "data-slot": "time-period-select",
24
+ "data-testid": "spectral-time-period-select",
25
+ onKeyDown: b,
26
+ ref: v,
27
+ size: "sm",
28
+ ..._,
29
+ children: /* @__PURE__ */ s(a, { children: g === "AM" ? f.am : f.pm })
30
+ }), /* @__PURE__ */ c(n, {
31
+ "data-testid": "spectral-time-period-select-content",
32
+ position: "popper",
33
+ sideOffset: 4,
34
+ children: [/* @__PURE__ */ s(r, {
35
+ "data-testid": "spectral-time-period-select-am",
36
+ value: "AM",
37
+ children: f.am
38
+ }), /* @__PURE__ */ s(r, {
39
+ "data-testid": "spectral-time-period-select-pm",
40
+ value: "PM",
41
+ children: f.pm
42
+ })]
43
+ })]
44
+ });
19
45
  });
20
- M.displayName = "TimePeriodSelect";
21
- export {
22
- M as TimePeriodSelect
23
- };
46
+ u.displayName = "TimePeriodSelect";
47
+ //#endregion
48
+ export { u as TimePeriodSelect };
@@ -1,5 +1,5 @@
1
- import { HourFormat, Period, TimePickerTranslations } from './DateTimeUtils';
2
1
  import { ComponentProps } from 'react';
2
+ import { HourFormat, Period, TimePickerTranslations } from './DateTimeUtils';
3
3
  export interface TimePickerProps extends Omit<ComponentProps<'div'>, 'onChange'> {
4
4
  date: Date | undefined;
5
5
  hourFormat?: HourFormat;
@@ -1,63 +1,79 @@
1
1
  "use client";
2
2
  import "../styles/main.css";
3
- import { jsxs as A, jsx as c } from "react/jsx-runtime";
4
- import { DateTimeInput as T } from "./DateTimeInput.js";
5
- import { getResolvedLocale as x, DEFAULT_TRANSLATIONS as S, detectHourFormat as j, getLocalizedPeriodLabels as M, formatSelectPeriodLabel as I, getPeriodFromHours as b } from "./DateTimeUtils.js";
6
- import { TimePeriodSelect as w } from "./TimePeriodSelect.js";
7
- import { cn as y } from "../utils/twUtils.js";
8
- import { useRef as d, useMemo as s } from "react";
9
- const z = ({ className: g, date: t, hourFormat: p, locale: f, onChange: a, onPeriodChange: L, translations: P, ...R }) => {
10
- const l = d(null), h = d(null), k = d(null), o = s(() => x(f), [f]), e = s(() => ({ ...S, ...P }), [P]), v = s(() => p ?? j(o), [p, o]), n = s(() => M(o), [o]), F = s(() => I(n, e.selectPeriodTemplate), [e.selectPeriodTemplate, n]), r = v === "24", u = t ? b(t.getHours()) : "AM", N = (i) => {
11
- if (!t) {
12
- L?.(i);
13
- return;
14
- }
15
- const m = new Date(t), H = m.getHours();
16
- if (b(H) !== i) {
17
- const D = i === "PM" ? 12 : -12;
18
- m.setHours(H + D), a(m);
19
- }
20
- L?.(i);
21
- };
22
- return /* @__PURE__ */ A("div", { "aria-label": r ? e.timePicker24Hour : e.timePicker12Hour, className: y("inline-flex items-center gap-1", g), "data-slot": "time-picker", "data-testid": "spectral-time-picker", role: "group", ...R, children: [
23
- /* @__PURE__ */ c(
24
- T,
25
- {
26
- "aria-label": r ? e.hours24 : e.hours12,
27
- className: "w-12",
28
- "data-testid": "spectral-time-picker-hours",
29
- date: t,
30
- locale: o,
31
- onRightFocus: () => l.current?.focus(),
32
- period: r ? void 0 : u,
33
- picker: r ? "hours" : "12hours",
34
- ref: h,
35
- setDate: a,
36
- translations: e
37
- }
38
- ),
39
- /* @__PURE__ */ c("span", { "aria-hidden": "true", className: "select-none", children: ":" }),
40
- /* @__PURE__ */ c(
41
- T,
42
- {
43
- "aria-label": e.minutes,
44
- className: "w-12",
45
- "data-testid": "spectral-time-picker-minutes",
46
- date: t,
47
- locale: o,
48
- onLeftFocus: () => h.current?.focus(),
49
- onRightFocus: r ? void 0 : () => k.current?.focus(),
50
- period: r ? void 0 : u,
51
- picker: "minutes",
52
- ref: l,
53
- setDate: a,
54
- translations: e
55
- }
56
- ),
57
- !r && /* @__PURE__ */ c(w, { ariaLabel: F, labels: n, onLeftFocus: () => l.current?.focus(), onPeriodChange: N, period: u, ref: k })
58
- ] });
59
- };
60
- z.displayName = "TimePicker";
61
- export {
62
- z as TimePicker
3
+ import { t as e } from "../twUtils-VNWgstKL.js";
4
+ import { S as t, b as n, f as r, t as i, u as a, x as o } from "../DateTimeUtils-DVvG6H-p.js";
5
+ import { DateTimeInput as s } from "./DateTimeInput.js";
6
+ import { TimePeriodSelect as c } from "./TimePeriodSelect.js";
7
+ import { useMemo as l, useRef as u } from "react";
8
+ import { jsx as d, jsxs as f } from "react/jsx-runtime";
9
+ //#region src/components/DateTimePicker/TimePicker.tsx
10
+ var p = ({ className: p, date: m, hourFormat: h, locale: g, onChange: _, onPeriodChange: v, translations: y, ...b }) => {
11
+ let x = u(null), S = u(null), C = u(null), w = l(() => t(g), [g]), T = l(() => ({
12
+ ...i,
13
+ ...y
14
+ }), [y]), E = l(() => h ?? a(w), [h, w]), D = l(() => n(w), [w]), O = l(() => r(D, T.selectPeriodTemplate), [T.selectPeriodTemplate, D]), k = E === "24", A = m ? o(m.getHours()) : "AM", j = (e) => {
15
+ if (!m) {
16
+ v?.(e);
17
+ return;
18
+ }
19
+ let t = new Date(m), n = t.getHours();
20
+ if (o(n) !== e) {
21
+ let r = e === "PM" ? 12 : -12;
22
+ t.setHours(n + r), _(t);
23
+ }
24
+ v?.(e);
25
+ };
26
+ return /* @__PURE__ */ f("div", {
27
+ "aria-label": k ? T.timePicker24Hour : T.timePicker12Hour,
28
+ className: e("gap-1 inline-flex items-center", p),
29
+ "data-slot": "time-picker",
30
+ "data-testid": "spectral-time-picker",
31
+ role: "group",
32
+ ...b,
33
+ children: [
34
+ /* @__PURE__ */ d(s, {
35
+ "aria-label": k ? T.hours24 : T.hours12,
36
+ className: "w-12",
37
+ "data-testid": "spectral-time-picker-hours",
38
+ date: m,
39
+ locale: w,
40
+ onRightFocus: () => x.current?.focus(),
41
+ period: k ? void 0 : A,
42
+ picker: k ? "hours" : "12hours",
43
+ ref: S,
44
+ setDate: _,
45
+ translations: T
46
+ }),
47
+ /* @__PURE__ */ d("span", {
48
+ "aria-hidden": "true",
49
+ className: "select-none",
50
+ children: ":"
51
+ }),
52
+ /* @__PURE__ */ d(s, {
53
+ "aria-label": T.minutes,
54
+ className: "w-12",
55
+ "data-testid": "spectral-time-picker-minutes",
56
+ date: m,
57
+ locale: w,
58
+ onLeftFocus: () => S.current?.focus(),
59
+ onRightFocus: k ? void 0 : () => C.current?.focus(),
60
+ period: k ? void 0 : A,
61
+ picker: "minutes",
62
+ ref: x,
63
+ setDate: _,
64
+ translations: T
65
+ }),
66
+ !k && /* @__PURE__ */ d(c, {
67
+ ariaLabel: O,
68
+ labels: D,
69
+ onLeftFocus: () => x.current?.focus(),
70
+ onPeriodChange: j,
71
+ period: A,
72
+ ref: C
73
+ })
74
+ ]
75
+ });
63
76
  };
77
+ p.displayName = "TimePicker";
78
+ //#endregion
79
+ export { p as TimePicker };
@@ -1,7 +1,7 @@
1
- import { CalendarProps } from './Calendar';
2
- import { HourFormat, TimePickerTranslations } from './DateTimeUtils';
3
1
  import { ComponentProps } from 'react';
4
2
  import { Locale } from 'react-day-picker';
3
+ import { CalendarProps } from './Calendar';
4
+ import { HourFormat, TimePickerTranslations } from './DateTimeUtils';
5
5
  export interface DateTimePickerProps extends Omit<ComponentProps<'div'>, 'onChange' | 'defaultValue'> {
6
6
  calendarProps?: Omit<CalendarProps, 'mode' | 'selected' | 'onSelect' | 'disablePastDates' | 'locale'>;
7
7
  defaultValue?: Date;
@@ -1,208 +1,90 @@
1
1
  "use client";
2
2
  import "./styles/main.css";
3
- import { jsxs as n, jsx as e } from "react/jsx-runtime";
4
- import { Calendar as b } from "./DateTimePicker/Calendar.js";
5
- import { DateTimeDisplayInput as k } from "./DateTimePicker/DateTimeDisplayInput.js";
6
- import { getResolvedLocale as w, detectHourFormat as I } from "./DateTimePicker/DateTimeUtils.js";
7
- import { DEFAULT_TRANSLATIONS as gr, DateTimeConfigSchema as fr, HourFormatSchema as hr, PICKER_TYPES as Tr, PeriodSchema as vr, TIME_BOUNDS as xr, TimePickerTypeSchema as Hr, TimeValueSchema as yr, convert12HourTo24Hour as Vr, display12HourValue as Cr, formatSelectPeriodLabel as Sr, formatTimeNumber as Nr, getAriaLabel as Pr, getAriaValueMinMax as Ar, getAriaValueNow as Dr, getArrowByType as br, getDateByType as kr, getLocalizedPeriodLabel as wr, getLocalizedPeriodLabels as Ir, getPeriodFromHours as Lr, getValid12Hour as Mr, getValidArrow12Hour as Fr, getValidArrowHour as Er, getValidArrowMinute as Br, getValidArrowNumber as Or, getValidHour as jr, getValidMinute as Rr, getValidNumber as _r, isValid12Hour as zr, isValidHour as Ur, isValidMinute as Kr, set12Hours as Yr, setDateByType as qr, setHours as Gr, setMinutes as Jr } from "./DateTimePicker/DateTimeUtils.js";
8
- import { TimePicker as L } from "./DateTimePicker/TimePicker.js";
9
- import "./Icons/AnalyzeIcon.js";
10
- import "./Icons/AnnotationsIcon.js";
11
- import "./Icons/ApprovedIcon.js";
12
- import "./Icons/ArrowDownIcon.js";
13
- import "./Icons/ArrowUpIcon.js";
14
- import "./Icons/BoxToolIcon.js";
15
- import { CalendarIcon as M } from "./Icons/CalendarIcon.js";
16
- import "./Icons/CheckCircleIcon.js";
17
- import "./Icons/CheckSquareIcon.js";
18
- import "./Icons/CheckmarkIcon.js";
19
- import "./Icons/ChevronDownIcon.js";
20
- import "./Icons/ChevronUpIcon.js";
21
- import "./Icons/ClockIcon.js";
22
- import "./Icons/CloseCircleIcon.js";
23
- import "./Icons/CloseIcon.js";
24
- import "./Icons/DashboardIcon.js";
25
- import "./Icons/DatabaseIcon.js";
26
- import "./Icons/DeleteIcon.js";
27
- import "./Icons/DurationIcon.js";
28
- import "./Icons/EditIcon.js";
29
- import "./Icons/EmailIcon.js";
30
- import "./Icons/EraserIcon.js";
31
- import "./Icons/ErrorIcon.js";
32
- import "./Icons/EyeClosedIcon.js";
33
- import "./Icons/EyeClosedIcon2.js";
34
- import "./Icons/EyeOpenIcon.js";
35
- import "./Icons/FileDownloadIcon.js";
36
- import "./Icons/GoToFirstIcon.js";
37
- import "./Icons/GoToLastIcon.js";
38
- import "./Icons/HarmonicCursorsIcon.js";
39
- import "./Icons/InfoIcon.js";
40
- import "./Icons/KeyboardIcon.js";
41
- import "./Icons/LabelIcon.js";
42
- import "./Icons/LassoIcon.js";
43
- import "./Icons/LineToolIcon.js";
44
- import "./Icons/LiveViewIcon.js";
45
- import "./Icons/LoaderIcon.js";
46
- import "./Icons/LocationIcon.js";
47
- import "./Icons/LogoutIcon.js";
48
- import "./Icons/MeasureIcon.js";
49
- import "./Icons/MessagesIcon.js";
50
- import "./Icons/MetadataIcon.js";
51
- import "./Icons/MinusIcon.js";
52
- import "./Icons/OntologyIcon.js";
53
- import "./Icons/PanelIconClose.js";
54
- import "./Icons/PanelIconOpen.js";
55
- import "./Icons/PlayIcon.js";
56
- import "./Icons/PlusIcon.js";
57
- import "./Icons/PolygonIcon.js";
58
- import "./Icons/ResetIcon.js";
59
- import "./Icons/ReviewedIcon.js";
60
- import "./Icons/ScissorsIcon.js";
61
- import "./Icons/SearchIcon.js";
62
- import "./Icons/SettingsIcon.js";
63
- import "./Icons/SortAscendingIcon.js";
64
- import "./Icons/SortAtoZIcon.js";
65
- import "./Icons/SortDescendingIcon.js";
66
- import "./Icons/SortZtoAIcon.js";
67
- import "./Icons/StackIcon.js";
68
- import "./Icons/StarIcon.js";
69
- import "./Icons/TrashIcon.js";
70
- import "./Icons/UndoIcon.js";
71
- import "./Icons/User2Icon.js";
72
- import "./Icons/UserIcon.js";
73
- import "./Icons/WarningIcon.js";
74
- import "./Icons/ZoomAllIcon.js";
75
- import "./Icons/ZoomXIcon.js";
76
- import "./Icons/ZoomYIcon.js";
77
- import { Popover as F, PopoverTrigger as E, PopoverContent as B } from "./Popover.js";
78
- import { useControllableState as O } from "./hooks/useControllableState.js";
79
- import { ErrorMessage as j } from "./utils/formFieldUtils.js";
80
- import { cn as a } from "./utils/twUtils.js";
81
- import { useMemo as g, useCallback as R } from "react";
82
- import { DateTimeInput as Wr } from "./DateTimePicker/DateTimeInput.js";
83
- import { TimePeriodSelect as Zr } from "./DateTimePicker/TimePeriodSelect.js";
84
- const _ = ({
85
- calendarProps: f,
86
- className: h,
87
- defaultValue: T,
88
- disabled: m = !1,
89
- disablePastDates: v = !0,
90
- errorMessage: s,
91
- hourFormat: d,
92
- label: x,
93
- locale: H,
94
- onChange: y,
95
- showTimePicker: o = !0,
96
- state: c = "default",
97
- timeLocale: u,
98
- timeTranslations: V,
99
- value: C,
100
- ...S
101
- }) => {
102
- const [r, i] = O({
103
- defaultValue: T,
104
- onChange: y,
105
- value: C
106
- }), l = g(() => w(u), [u]), p = g(() => d ?? I(l), [d, l]), N = (t) => {
107
- if (!t) {
108
- i(void 0);
109
- return;
110
- }
111
- r && t.setHours(r.getHours(), r.getMinutes(), 0, 0), i(t);
112
- }, P = R(
113
- (t) => {
114
- i(t);
115
- },
116
- [i]
117
- ), A = (t) => {
118
- }, D = (t) => {
119
- i(t);
120
- };
121
- return /* @__PURE__ */ n(F, { children: [
122
- /* @__PURE__ */ n("div", { className: a("w-full", h), "data-slot": "datetime-picker", "data-testid": "spectral-datetime-picker", ...S, children: [
123
- /* @__PURE__ */ e(
124
- k,
125
- {
126
- className: a("flex w-full justify-start gap-4 pr-12", !r && "text-text-secondary"),
127
- "data-testid": "spectral-datetime-picker-input",
128
- disabled: m,
129
- endIcon: /* @__PURE__ */ e(E, { asChild: !0, disabled: m, children: /* @__PURE__ */ e(
130
- M,
131
- {
132
- "aria-label": "Open date picker",
133
- className: a("text-input-icon hover:text-input-icon--hover absolute top-1/2 right-4 -translate-y-1/2 cursor-pointer focus:outline-none", m ? "pointer-events-none cursor-not-allowed opacity-50" : "hover:text-input-icon--hover cursor-pointer"),
134
- "data-testid": "spectral-datetime-picker-trigger",
135
- disabled: m
136
- }
137
- ) }),
138
- hourFormat: p,
139
- label: x,
140
- onChange: D,
141
- showTime: o,
142
- state: c,
143
- value: r
144
- }
145
- ),
146
- c === "error" && s && /* @__PURE__ */ e(j, { message: s, dataTestId: "spectral-datetime-picker-error-message", id: "datetime-picker-error" })
147
- ] }),
148
- /* @__PURE__ */ n(
149
- B,
150
- {
151
- align: "start",
152
- className: a("flex rounded-lg px-6 py-4", !o && "w-[330px]", o && p === "24" && "w-[486px]", o && p === "12" && "w-[560px]"),
153
- "data-testid": "spectral-datetime-picker-popover",
154
- onOpenAutoFocus: (t) => t.preventDefault(),
155
- children: [
156
- /* @__PURE__ */ e(b, { ...f, disablePastDates: v, locale: H, mode: "single", onSelect: N, selected: r }),
157
- o && /* @__PURE__ */ e("div", { className: "border-border-secondary border-l pl-6", children: /* @__PURE__ */ e(L, { date: r, hourFormat: p, locale: l, onChange: P, onPeriodChange: A, translations: V }) })
158
- ]
159
- }
160
- )
161
- ] });
162
- };
163
- _.displayName = "DateTimePicker";
164
- export {
165
- b as Calendar,
166
- gr as DEFAULT_TRANSLATIONS,
167
- fr as DateTimeConfigSchema,
168
- k as DateTimeDisplayInput,
169
- Wr as DateTimeInput,
170
- _ as DateTimePicker,
171
- hr as HourFormatSchema,
172
- Tr as PICKER_TYPES,
173
- vr as PeriodSchema,
174
- xr as TIME_BOUNDS,
175
- Zr as TimePeriodSelect,
176
- L as TimePicker,
177
- Hr as TimePickerTypeSchema,
178
- yr as TimeValueSchema,
179
- Vr as convert12HourTo24Hour,
180
- I as detectHourFormat,
181
- Cr as display12HourValue,
182
- Sr as formatSelectPeriodLabel,
183
- Nr as formatTimeNumber,
184
- Pr as getAriaLabel,
185
- Ar as getAriaValueMinMax,
186
- Dr as getAriaValueNow,
187
- br as getArrowByType,
188
- kr as getDateByType,
189
- wr as getLocalizedPeriodLabel,
190
- Ir as getLocalizedPeriodLabels,
191
- Lr as getPeriodFromHours,
192
- w as getResolvedLocale,
193
- Mr as getValid12Hour,
194
- Fr as getValidArrow12Hour,
195
- Er as getValidArrowHour,
196
- Br as getValidArrowMinute,
197
- Or as getValidArrowNumber,
198
- jr as getValidHour,
199
- Rr as getValidMinute,
200
- _r as getValidNumber,
201
- zr as isValid12Hour,
202
- Ur as isValidHour,
203
- Kr as isValidMinute,
204
- Yr as set12Hours,
205
- qr as setDateByType,
206
- Gr as setHours,
207
- Jr as setMinutes
3
+ import { CalendarIcon as e } from "./Icons/CalendarIcon.js";
4
+ import { t } from "./twUtils-VNWgstKL.js";
5
+ import { ErrorMessage as n } from "./utils/formFieldUtils.js";
6
+ import { useControllableState as r } from "./hooks/useControllableState.js";
7
+ import { Popover as i, PopoverContent as a, PopoverTrigger as o } from "./Popover.js";
8
+ import { t as s } from "./Calendar-s4lyijkn.js";
9
+ import { A as c, C as l, D as u, E as d, F as f, I as p, L as m, M as h, N as g, O as _, P as v, S as y, T as b, _ as x, a as S, b as C, c as w, d as T, f as E, g as D, h as O, i as k, j as A, k as j, l as M, m as N, n as P, o as F, p as I, r as L, s as R, t as z, u as B, v as V, w as H, x as U, y as W } from "./DateTimeUtils-DVvG6H-p.js";
10
+ import { DateTimeDisplayInput as G } from "./DateTimePicker/DateTimeDisplayInput.js";
11
+ import { DateTimeInput as K } from "./DateTimePicker/DateTimeInput.js";
12
+ import { TimePeriodSelect as q } from "./DateTimePicker/TimePeriodSelect.js";
13
+ import { TimePicker as J } from "./DateTimePicker/TimePicker.js";
14
+ import { useCallback as Y, useMemo as X } from "react";
15
+ import { jsx as Z, jsxs as Q } from "react/jsx-runtime";
16
+ //#region src/components/DateTimePicker/DateTimePicker.tsx
17
+ var $ = ({ calendarProps: c, className: l, defaultValue: u, disabled: d = !1, disablePastDates: f = !0, errorMessage: p, hourFormat: m, label: h, locale: g, onChange: _, showTimePicker: v = !0, state: b = "default", timeLocale: x, timeTranslations: S, value: C, ...w }) => {
18
+ let [T, E] = r({
19
+ defaultValue: u,
20
+ onChange: _,
21
+ value: C
22
+ }), D = X(() => y(x), [x]), O = X(() => m ?? B(D), [m, D]), k = (e) => {
23
+ if (!e) {
24
+ E(void 0);
25
+ return;
26
+ }
27
+ T && e.setHours(T.getHours(), T.getMinutes(), 0, 0), E(e);
28
+ }, A = Y((e) => {
29
+ E(e);
30
+ }, [E]), j = (e) => {}, M = (e) => {
31
+ E(e);
32
+ };
33
+ return /* @__PURE__ */ Q(i, { children: [/* @__PURE__ */ Q("div", {
34
+ className: t("w-full", l),
35
+ "data-slot": "datetime-picker",
36
+ "data-testid": "spectral-datetime-picker",
37
+ ...w,
38
+ children: [/* @__PURE__ */ Z(G, {
39
+ className: t("gap-4 pr-12 flex w-full justify-start", !T && "text-text-secondary"),
40
+ "data-testid": "spectral-datetime-picker-input",
41
+ disabled: d,
42
+ endIcon: /* @__PURE__ */ Z(o, {
43
+ asChild: !0,
44
+ disabled: d,
45
+ children: /* @__PURE__ */ Z(e, {
46
+ "aria-label": "Open date picker",
47
+ className: t("right-4 text-input-icon hover:text-input-icon--hover absolute top-1/2 -translate-y-1/2 cursor-pointer focus:outline-none", d ? "pointer-events-none cursor-not-allowed opacity-50" : "hover:text-input-icon--hover cursor-pointer"),
48
+ "data-testid": "spectral-datetime-picker-trigger",
49
+ disabled: d
50
+ })
51
+ }),
52
+ hourFormat: O,
53
+ label: h,
54
+ onChange: M,
55
+ showTime: v,
56
+ state: b,
57
+ value: T
58
+ }), b === "error" && p && /* @__PURE__ */ Z(n, {
59
+ message: p,
60
+ dataTestId: "spectral-datetime-picker-error-message",
61
+ id: "datetime-picker-error"
62
+ })]
63
+ }), /* @__PURE__ */ Q(a, {
64
+ align: "start",
65
+ className: t("rounded-lg py-4 px-6 flex", !v && "w-[330px]", v && O === "24" && "w-[486px]", v && O === "12" && "w-[560px]"),
66
+ "data-testid": "spectral-datetime-picker-popover",
67
+ onOpenAutoFocus: (e) => e.preventDefault(),
68
+ children: [/* @__PURE__ */ Z(s, {
69
+ ...c,
70
+ disablePastDates: f,
71
+ locale: g,
72
+ mode: "single",
73
+ onSelect: k,
74
+ selected: T
75
+ }), v && /* @__PURE__ */ Z("div", {
76
+ className: "pl-6 border-l border-border-secondary",
77
+ children: /* @__PURE__ */ Z(J, {
78
+ date: T,
79
+ hourFormat: O,
80
+ locale: D,
81
+ onChange: A,
82
+ onPeriodChange: j,
83
+ translations: S
84
+ })
85
+ })]
86
+ })] });
208
87
  };
88
+ $.displayName = "DateTimePicker";
89
+ //#endregion
90
+ export { s as Calendar, z as DEFAULT_TRANSLATIONS, P as DateTimeConfigSchema, G as DateTimeDisplayInput, K as DateTimeInput, $ as DateTimePicker, L as HourFormatSchema, k as PICKER_TYPES, S as PeriodSchema, F as TIME_BOUNDS, q as TimePeriodSelect, J as TimePicker, R as TimePickerTypeSchema, w as TimeValueSchema, M as convert12HourTo24Hour, B as detectHourFormat, T as display12HourValue, E as formatSelectPeriodLabel, I as formatTimeNumber, N as getAriaLabel, O as getAriaValueMinMax, D as getAriaValueNow, x as getArrowByType, V as getDateByType, W as getLocalizedPeriodLabel, C as getLocalizedPeriodLabels, U as getPeriodFromHours, y as getResolvedLocale, l as getValid12Hour, H as getValidArrow12Hour, b as getValidArrowHour, d as getValidArrowMinute, u as getValidArrowNumber, _ as getValidHour, j as getValidMinute, c as getValidNumber, A as isValid12Hour, h as isValidHour, g as isValidMinute, v as set12Hours, f as setDateByType, p as setHours, m as setMinutes };