@spear-ai/spectral 1.9.1 → 1.10.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 (241) hide show
  1. package/README.md +6 -5
  2. package/dist/.js +113 -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/InputNumeric.d.ts +14 -0
  128. package/dist/InputNumeric.js +137 -0
  129. package/dist/InputOTP-cVn5Bzyp.js +461 -0
  130. package/dist/InputOTP.js +2 -382
  131. package/dist/Kbd.d.ts +1 -1
  132. package/dist/Kbd.js +182 -86
  133. package/dist/Label.js +12 -14
  134. package/dist/MultiSelect/MultiSelectBase.js +331 -403
  135. package/dist/MultiSelect.d.ts +1 -1
  136. package/dist/MultiSelect.js +23 -23
  137. package/dist/Popover.js +28 -32
  138. package/dist/RadioButton.d.ts +17 -0
  139. package/dist/RadioButton.js +33 -0
  140. package/dist/RadioButtonGroup/RadioButtonGroupBase.d.ts +3 -1
  141. package/dist/RadioButtonGroup/RadioButtonGroupBase.js +49 -46
  142. package/dist/RadioButtonGroup.d.ts +1 -1
  143. package/dist/RadioButtonGroup.js +11 -8
  144. package/dist/RadioGroup-w_q6RGEK.js +447 -0
  145. package/dist/RadioGroup.js +2 -505
  146. package/dist/Select.js +163 -186
  147. package/dist/Separator.js +16 -19
  148. package/dist/Skeleton.js +10 -6
  149. package/dist/Slider-BzzZT3Zm.js +490 -0
  150. package/dist/Slider.js +2 -562
  151. package/dist/SpectralProvider.js +8 -5
  152. package/dist/Switch/SwitchBase.js +91 -95
  153. package/dist/Switch-CVzRJ-0n.js +126 -0
  154. package/dist/Switch.d.ts +1 -1
  155. package/dist/Switch.js +2 -134
  156. package/dist/Tabs/TabsBase.js +242 -250
  157. package/dist/Tabs/tabsUtils.js +65 -73
  158. package/dist/Tabs.d.ts +1 -1
  159. package/dist/Tabs.js +73 -103
  160. package/dist/Textarea/TextareaUtils.js +35 -46
  161. package/dist/Textarea.js +83 -160
  162. package/dist/Toast-9zqXxKKO.js +711 -0
  163. package/dist/Toast.js +2 -885
  164. package/dist/Toggle/ToggleBase.js +46 -56
  165. package/dist/Toggle.d.ts +1 -1
  166. package/dist/Toggle.js +52 -62
  167. package/dist/ToggleGroup/ToggleGroupBase.js +128 -104
  168. package/dist/ToggleGroup.d.ts +1 -1
  169. package/dist/ToggleGroup.js +52 -63
  170. package/dist/Tooltip-D1K8kY1y.js +389 -0
  171. package/dist/Tooltip.js +2 -365
  172. package/dist/Tray.js +174 -217
  173. package/dist/chunk-h9knIhTc.js +20 -0
  174. package/dist/clsx-jM1GlMvB.js +16 -0
  175. package/dist/dist-3Af8168y.js +913 -0
  176. package/dist/dist-7HRQ5IKN.js +249 -0
  177. package/dist/dist-B2k1iWFp.js +129 -0
  178. package/dist/dist-B4FgboI8.js +122 -0
  179. package/dist/dist-B4g6zpUF.js +33 -0
  180. package/dist/dist-B9tup-4O.js +216 -0
  181. package/dist/dist-BK1K0g9W.js +29 -0
  182. package/dist/dist-Bfjk-jx9.js +28 -0
  183. package/dist/dist-Bft31cJh.js +65 -0
  184. package/dist/dist-BtdmHAzK.js +190 -0
  185. package/dist/dist-C0Hifjgh.js +1287 -0
  186. package/dist/dist-CGzgmYB9.js +68 -0
  187. package/dist/dist-ClmepHp4.js +10 -0
  188. package/dist/dist-D8Wb_MX9.js +6 -0
  189. package/dist/dist-Dtvmk11N.js +12 -0
  190. package/dist/dist-fW81qjVl.js +677 -0
  191. package/dist/dist-s1uWaZYZ.js +11 -0
  192. package/dist/es2015-YHaMV-St.js +701 -0
  193. package/dist/hooks/useAccordionAutoScroll.js +66 -67
  194. package/dist/hooks/useControllableState.js +14 -13
  195. package/dist/hooks/useConvertToOklch.d.ts +3 -0
  196. package/dist/hooks/useConvertToOklch.d.ts.map +1 -0
  197. package/dist/hooks/useConvertToOklch.js +51 -0
  198. package/dist/hooks/useTheme.js +21 -17
  199. package/dist/index.d.ts +3 -1
  200. package/dist/index.d.ts.map +1 -1
  201. package/dist/main.js +18954 -27224
  202. package/dist/primitives/button.js +39 -41
  203. package/dist/primitives/input-group.js +57 -73
  204. package/dist/primitives/input.js +11 -20
  205. package/dist/primitives/popover.js +34 -28
  206. package/dist/primitives/select.js +70 -138
  207. package/dist/primitives/slot.js +32 -31
  208. package/dist/primitives/textarea.js +10 -16
  209. package/dist/proxy-Dn10Pl_g.js +4920 -0
  210. package/dist/styles/main.css +2 -1
  211. package/dist/styles/spectral.css +1 -1
  212. package/dist/twUtils-VNWgstKL.js +1673 -0
  213. package/dist/use-animation-CBUDycyW.js +57 -0
  214. package/dist/utils/constants.js +4 -4
  215. package/dist/utils/formFieldUtils.js +136 -148
  216. package/dist/utils/sharedUtils.js +26 -7
  217. package/dist/utils/twUtils.js +2 -2919
  218. package/package.json +24 -28
  219. package/dist/ComboboxBase-CxNxYtdT.js +0 -408
  220. package/dist/clsx-OuTLNxxd.js +0 -16
  221. package/dist/index-0ioNhtNM.js +0 -10
  222. package/dist/index-6oYKCvIn.js +0 -677
  223. package/dist/index-BFOf48AQ.js +0 -69
  224. package/dist/index-BZPx6jYI.js +0 -8
  225. package/dist/index-BlHU_t18.js +0 -142
  226. package/dist/index-Bm1RbF6w.js +0 -1037
  227. package/dist/index-Bv2OIg5P.js +0 -225
  228. package/dist/index-CKEI0pDv.js +0 -56
  229. package/dist/index-CM_hWgfC.js +0 -32
  230. package/dist/index-C_YVr64u.js +0 -1538
  231. package/dist/index-Cl8VeY0o.js +0 -149
  232. package/dist/index-CwSyIPrv.js +0 -13
  233. package/dist/index-D29mdTf5.js +0 -34
  234. package/dist/index-DEYs15GP.js +0 -66
  235. package/dist/index-Dc0No4pV.js +0 -233
  236. package/dist/index-T6XEa11q.js +0 -822
  237. package/dist/index-pBCLb6Gr.js +0 -240
  238. package/dist/index-psiVrsnE.js +0 -27
  239. package/dist/index-rKs9bXHr.js +0 -6
  240. package/dist/proxy-CO_-Vget.js +0 -4975
  241. package/dist/use-animation-DhEPRwZ3.js +0 -62
package/dist/Avatar.js CHANGED
@@ -1,68 +1,86 @@
1
1
  "use client";
2
2
  import "./styles/main.css";
3
- import { jsx as e } from "react/jsx-runtime";
4
- import { UserIcon as g } from "./Icons/UserIcon.js";
5
- import { cn as o } from "./utils/twUtils.js";
6
- import { useState as v, useEffect as w, isValidElement as y, cloneElement as u } from "react";
7
- const j = {
8
- sm: "h-8 w-8",
9
- md: "h-10 w-10",
10
- lg: "h-12 w-12"
11
- }, p = {
12
- sm: "text-xs",
13
- md: "text-base",
14
- lg: "text-xl"
15
- }, I = {
16
- sm: 24,
17
- md: 32,
18
- lg: 40
19
- }, N = (n) => {
20
- const l = n.trim();
21
- if (!l) return "?";
22
- const t = l.split(/\s+/).filter(Boolean);
23
- return t.length === 0 ? "?" : t.length === 1 ? t[0].charAt(0).toUpperCase() : (t[0].charAt(0) + t[t.length - 1].charAt(0)).toUpperCase();
24
- }, k = ({ alt: n, className: l, fallback: t, icon: r, imageSource: a, size: i = "md", userFullName: c }) => {
25
- const [d, f] = v("loading");
26
- w(() => {
27
- if (!a) return;
28
- f("loading");
29
- const s = new Image();
30
- return s.src = a, s.onload = () => f("loaded"), s.onerror = () => f("error"), () => {
31
- s.onload = null, s.onerror = null;
32
- };
33
- }, [a]);
34
- const h = () => {
35
- if (c)
36
- return /* @__PURE__ */ e(
37
- "span",
38
- {
39
- "aria-label": c + " avatar",
40
- className: o("text-text-primary flex h-full w-full items-center justify-center font-bold tracking-tighter font-stretch-condensed", p[i]),
41
- "data-testid": "spectral-avatar-initials",
42
- children: N(c)
43
- }
44
- );
45
- if (r) {
46
- const s = I[i];
47
- return /* @__PURE__ */ e("span", { className: "flex h-full w-full items-center justify-center", children: y(r) ? (() => {
48
- const m = {
49
- className: o("shrink-0", r.props.className),
50
- "aria-hidden": "true"
51
- };
52
- if (r.type.displayName?.includes("Icon") ?? !1) {
53
- const x = {
54
- ...m,
55
- size: s
56
- };
57
- return u(r, x);
58
- }
59
- return u(r, m);
60
- })() : r });
61
- }
62
- return a && d === "loaded" ? /* @__PURE__ */ e("img", { alt: n ?? "Avatar", "aria-label": n ?? "Avatar", className: "absolute inset-0 h-full w-full rounded-full object-cover", "data-testid": "spectral-avatar-image", role: "img", src: a }) : a && d === "error" && t ? /* @__PURE__ */ e("span", { className: "flex h-full w-full items-center justify-center", "data-testid": "spectral-avatar-img-error-fallback", children: t }) : t ? /* @__PURE__ */ e("span", { className: o("text-text-primary flex h-full w-full items-center justify-center", p[i]), "data-testid": "spectral-avatar-fallback", children: t }) : a && d === "loading" ? /* @__PURE__ */ e("span", { className: "flex h-full w-full items-center justify-center motion-safe:animate-pulse", "data-testid": "spectral-avatar-loading" }) : /* @__PURE__ */ e(g, {});
63
- };
64
- return /* @__PURE__ */ e("div", { className: o("bg-level-two relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full", j[i], l), "data-slot": "avatar", "data-testid": "spectral-avatar", children: h() });
65
- };
66
- export {
67
- k as Avatar
3
+ import { UserIcon as e } from "./Icons/UserIcon.js";
4
+ import { t } from "./twUtils-VNWgstKL.js";
5
+ import { cloneElement as n, isValidElement as r, useEffect as i, useState as a } from "react";
6
+ import { jsx as o } from "react/jsx-runtime";
7
+ //#region src/components/Avatar/Avatar.tsx
8
+ var s = {
9
+ sm: "h-8 w-8",
10
+ md: "h-10 w-10",
11
+ lg: "h-12 w-12"
12
+ }, c = {
13
+ sm: "text-xs",
14
+ md: "text-base",
15
+ lg: "text-xl"
16
+ }, l = {
17
+ sm: 24,
18
+ md: 32,
19
+ lg: 40
20
+ }, u = (e) => {
21
+ let t = e.trim();
22
+ if (!t) return "?";
23
+ let n = t.split(/\s+/).filter(Boolean);
24
+ return n.length === 0 ? "?" : n.length === 1 ? n[0].charAt(0).toUpperCase() : (n[0].charAt(0) + n[n.length - 1].charAt(0)).toUpperCase();
25
+ }, d = ({ alt: d, className: f, fallback: p, icon: m, imageSource: h, size: g = "md", userFullName: _ }) => {
26
+ let [v, y] = a("loading");
27
+ i(() => {
28
+ if (!h) return;
29
+ y("loading");
30
+ let e = new Image();
31
+ return e.src = h, e.onload = () => y("loaded"), e.onerror = () => y("error"), () => {
32
+ e.onload = null, e.onerror = null;
33
+ };
34
+ }, [h]);
35
+ let b = () => {
36
+ if (_) return /* @__PURE__ */ o("span", {
37
+ "aria-label": _ + " avatar",
38
+ className: t("font-bold tracking-tighter flex h-full w-full items-center justify-center text-text-primary font-stretch-condensed", c[g]),
39
+ "data-testid": "spectral-avatar-initials",
40
+ children: u(_)
41
+ });
42
+ if (m) {
43
+ let e = l[g];
44
+ return /* @__PURE__ */ o("span", {
45
+ className: "flex h-full w-full items-center justify-center",
46
+ children: r(m) ? (() => {
47
+ let r = {
48
+ className: t("shrink-0", m.props.className),
49
+ "aria-hidden": "true"
50
+ };
51
+ return m.type.displayName?.includes("Icon") ?? !1 ? n(m, {
52
+ ...r,
53
+ size: e
54
+ }) : n(m, r);
55
+ })() : m
56
+ });
57
+ }
58
+ return h && v === "loaded" ? /* @__PURE__ */ o("img", {
59
+ alt: d ?? "Avatar",
60
+ "aria-label": d ?? "Avatar",
61
+ className: "inset-0 absolute h-full w-full rounded-full object-cover",
62
+ "data-testid": "spectral-avatar-image",
63
+ role: "img",
64
+ src: h
65
+ }) : h && v === "error" && p ? /* @__PURE__ */ o("span", {
66
+ className: "flex h-full w-full items-center justify-center",
67
+ "data-testid": "spectral-avatar-img-error-fallback",
68
+ children: p
69
+ }) : p ? /* @__PURE__ */ o("span", {
70
+ className: t("flex h-full w-full items-center justify-center text-text-primary", c[g]),
71
+ "data-testid": "spectral-avatar-fallback",
72
+ children: p
73
+ }) : h && v === "loading" ? /* @__PURE__ */ o("span", {
74
+ className: "motion-safe:animate-pulse flex h-full w-full items-center justify-center",
75
+ "data-testid": "spectral-avatar-loading"
76
+ }) : /* @__PURE__ */ o(e, {});
77
+ };
78
+ return /* @__PURE__ */ o("div", {
79
+ className: t("relative inline-flex shrink-0 items-center justify-center overflow-hidden rounded-full bg-level-two", s[g], f),
80
+ "data-slot": "avatar",
81
+ "data-testid": "spectral-avatar",
82
+ children: b()
83
+ });
68
84
  };
85
+ //#endregion
86
+ export { d as Avatar };
package/dist/Badge.d.ts CHANGED
@@ -6,8 +6,6 @@ export type BadgeProps = ComponentProps<'span'> & VariantProps<typeof badgeVaria
6
6
  declare const badgeVariants: (props?: ({
7
7
  variant?: "default" | "secondary" | "destructive" | "outline" | null | undefined;
8
8
  } & import('class-variance-authority/types').ClassProp) | undefined) => string;
9
- export declare const Badge: ({ asChild, className, variant, ...props }: ComponentProps<"span"> & VariantProps<typeof badgeVariants> & {
10
- asChild?: boolean;
11
- }) => import("react/jsx-runtime").JSX.Element;
9
+ export declare const Badge: ({ asChild, className, variant, ...props }: BadgeProps) => import("react/jsx-runtime").JSX.Element;
12
10
  export {};
13
11
  //# sourceMappingURL=Badge.d.ts.map
package/dist/Badge.js CHANGED
@@ -1,27 +1,23 @@
1
1
  import "./styles/main.css";
2
- import { jsx as i } from "react/jsx-runtime";
3
- import { Slot as o } from "./primitives/slot.js";
4
- import { cn as d } from "./utils/twUtils.js";
5
- import { c as n } from "./index-D29mdTf5.js";
2
+ import { t as e } from "./twUtils-VNWgstKL.js";
3
+ import { t } from "./dist-B4g6zpUF.js";
4
+ import { Slot as n } from "./primitives/slot.js";
6
5
  import "react";
7
- const g = n(
8
- `inline-flex items-center justify-center rounded-sm px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none
9
- focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-danger-200 aria-invalid:border-danger-200
10
- transition-[color,box-shadow] overflow-hidden`,
11
- {
12
- variants: {
13
- variant: {
14
- default: "bg-badge-primary-bg text-text-primary [a&]:hover:bg-badge-primary-bg--hover group-data-[state=on]:bg-badge-primary-bg--active group-aria-pressed:bg-badge-primary-bg--active",
15
- secondary: "bg-badge-secondary-bg text-badge-secondary-text [a&]:hover:bg-badge-secondary-bg--hover",
16
- destructive: "bg-badge-destructive-bg text-text-primary [a&]:hover:bg-danger-400 focus-visible:ring-badge-destructive-border",
17
- outline: "border border-badge-outline-border text-text-primary [a&]:hover:bg-accent [a&]:hover:text-accent-foreground"
18
- }
19
- },
20
- defaultVariants: {
21
- variant: "default"
22
- }
23
- }
24
- ), l = ({ asChild: e = !1, className: r, variant: a, ...t }) => /* @__PURE__ */ i(e ? o : "span", { className: d(g({ variant: a }), r), "data-slot": "badge", "data-testid": "spectral-badge", ...t });
25
- export {
26
- l as Badge
27
- };
6
+ import { jsx as r } from "react/jsx-runtime";
7
+ //#region src/components/Badge/Badge.tsx
8
+ var i = t("rounded-sm px-2 py-0.5 text-xs font-medium [&>svg]:size-3 gap-1 focus-visible:border-ring focus-visible:ring-ring/50 inline-flex w-fit shrink-0 items-center justify-center overflow-hidden whitespace-nowrap transition-[color,box-shadow] focus-visible:ring-[3px] aria-invalid:border-danger-200 aria-invalid:ring-danger-200 [&>svg]:pointer-events-none", {
9
+ variants: { variant: {
10
+ default: "bg-badge-primary-bg text-text-primary group-aria-pressed:bg-badge-primary-bg--active group-data-[state=on]:bg-badge-primary-bg--active [a&]:hover:bg-badge-primary-bg--hover",
11
+ secondary: "[a&]:hover:bg-badge-secondary-bg--hover bg-badge-secondary-bg text-badge-secondary-text",
12
+ destructive: "bg-badge-destructive-bg text-text-primary focus-visible:ring-badge-destructive-border [a&]:hover:bg-danger-400",
13
+ outline: "[a&]:hover:text-accent-foreground border border-badge-outline-border text-text-primary [a&]:hover:bg-accent"
14
+ } },
15
+ defaultVariants: { variant: "default" }
16
+ }), a = ({ asChild: t = !1, className: a, variant: o, ...s }) => /* @__PURE__ */ r(t ? n : "span", {
17
+ className: e(i({ variant: o }), a),
18
+ "data-slot": "badge",
19
+ "data-testid": "spectral-badge",
20
+ ...s
21
+ });
22
+ //#endregion
23
+ export { a as Badge };
package/dist/Button.js CHANGED
@@ -1,181 +1,105 @@
1
1
  "use client";
2
2
  import "./styles/main.css";
3
- import { jsxs as g, jsx as n, Fragment as z } from "react/jsx-runtime";
4
- import "./Icons/AnalyzeIcon.js";
5
- import "./Icons/AnnotationsIcon.js";
6
- import "./Icons/ApprovedIcon.js";
7
- import "./Icons/ArrowDownIcon.js";
8
- import "./Icons/ArrowUpIcon.js";
9
- import "./Icons/BoxToolIcon.js";
10
- import "./Icons/CalendarIcon.js";
11
- import "./Icons/CheckCircleIcon.js";
12
- import "./Icons/CheckSquareIcon.js";
13
- import "./Icons/CheckmarkIcon.js";
14
- import "./Icons/ChevronDownIcon.js";
15
- import "./Icons/ChevronUpIcon.js";
16
- import "./Icons/ClockIcon.js";
17
- import "./Icons/CloseCircleIcon.js";
18
- import "./Icons/CloseIcon.js";
19
- import "./Icons/DashboardIcon.js";
20
- import "./Icons/DatabaseIcon.js";
21
- import "./Icons/DeleteIcon.js";
22
- import "./Icons/DurationIcon.js";
23
- import "./Icons/EditIcon.js";
24
- import "./Icons/EmailIcon.js";
25
- import "./Icons/EraserIcon.js";
26
- import "./Icons/ErrorIcon.js";
27
- import "./Icons/EyeClosedIcon.js";
28
- import "./Icons/EyeClosedIcon2.js";
29
- import "./Icons/EyeOpenIcon.js";
30
- import "./Icons/FileDownloadIcon.js";
31
- import "./Icons/GoToFirstIcon.js";
32
- import "./Icons/GoToLastIcon.js";
33
- import "./Icons/HarmonicCursorsIcon.js";
34
- import "./Icons/InfoIcon.js";
35
- import "./Icons/KeyboardIcon.js";
36
- import "./Icons/LabelIcon.js";
37
- import "./Icons/LassoIcon.js";
38
- import "./Icons/LineToolIcon.js";
39
- import "./Icons/LiveViewIcon.js";
40
- import { LoaderIcon as B } from "./Icons/LoaderIcon.js";
41
- import "./Icons/LocationIcon.js";
42
- import "./Icons/LogoutIcon.js";
43
- import "./Icons/MeasureIcon.js";
44
- import "./Icons/MessagesIcon.js";
45
- import "./Icons/MetadataIcon.js";
46
- import "./Icons/MinusIcon.js";
47
- import "./Icons/OntologyIcon.js";
48
- import "./Icons/PanelIconClose.js";
49
- import "./Icons/PanelIconOpen.js";
50
- import "./Icons/PlayIcon.js";
51
- import "./Icons/PlusIcon.js";
52
- import "./Icons/PolygonIcon.js";
53
- import "./Icons/ResetIcon.js";
54
- import "./Icons/ReviewedIcon.js";
55
- import "./Icons/ScissorsIcon.js";
56
- import "./Icons/SearchIcon.js";
57
- import "./Icons/SettingsIcon.js";
58
- import "./Icons/SortAscendingIcon.js";
59
- import "./Icons/SortAtoZIcon.js";
60
- import "./Icons/SortDescendingIcon.js";
61
- import "./Icons/SortZtoAIcon.js";
62
- import "./Icons/StackIcon.js";
63
- import "./Icons/StarIcon.js";
64
- import "./Icons/TrashIcon.js";
65
- import "./Icons/UndoIcon.js";
66
- import "./Icons/User2Icon.js";
67
- import "./Icons/UserIcon.js";
68
- import "./Icons/WarningIcon.js";
69
- import "./Icons/ZoomAllIcon.js";
70
- import "./Icons/ZoomXIcon.js";
71
- import "./Icons/ZoomYIcon.js";
72
- import { Slot as E } from "./primitives/slot.js";
73
- import { ErrorMessage as V } from "./utils/formFieldUtils.js";
74
- import { cn as i } from "./utils/twUtils.js";
75
- import { c as _ } from "./index-D29mdTf5.js";
76
- import { isValidElement as D, Children as S } from "react";
77
- const q = _(
78
- `
79
- font-sans! flex relative items-center justify-center gap-2 whitespace-nowrap transition-colors cursor-pointer rounded-lg border font-semibold focus:outline-none focus:outline-none
80
- focus-visible:outline-1 focus-visible:outline-offset-2 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 disabled:pointer-events-none
81
- `,
82
- {
83
- variants: {
84
- variant: {
85
- primary: `bg-button-primary-bg text-button-primary-text border-button-primary-border hover:bg-button-primary-bg--hover hover:text-button-primary-text--hover hover:border-button-primary-border--hover
86
- focus-visible:outline-button-primary-border disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled disabled:border-button-primary-border--disabled`,
87
- secondary: `bg-button-secondary-bg border-button-secondary-border text-button-secondary-text hover:bg-button-secondary-bg--hover hover:text-button-secondary-text--hover
88
- focus-visible:outline-button-secondary-border disabled:bg-button-secondary-bg--disabled disabled:text-button-secondary-text--disabled disabled:border-button-secondary-border--disabled`,
89
- outline: `bg-button-outline-bg border-button-outline-border text-button-outline-text hover:bg-button-outline-bg--hover hover:text-button-outline-text--hover focus-visible:outline-button-outline-border
90
- disabled:text-button-outline-text--disabled disabled:border-button-outline-border--disabled`,
91
- ghost: "bg-button-ghost-bg border-none text-button-ghost-text hover:bg-button-ghost-bg--hover hover:text-button-ghost-text--hover focus-visible:outline-none disabled:text-button-ghost-text--disabled",
92
- unstyled: "font-inherit! font-normal text-inherit inline-flex justify-start gap-0 bg-transparent border-none! p-0! w-auto! rounded-none! shadow-none! hover:cursor-pointer hover:bg-transparent focus-visible:outline-button-outline-border disabled:opacity-50"
93
- },
94
- size: {
95
- small: "py-1 px-4 w-fit text-sm!",
96
- default: "py-2 px-6 w-fit text-base!",
97
- fullWidth: "py-2 px-6 w-full text-base!"
98
- },
99
- state: {
100
- default: "",
101
- error: "bg-button-danger text-text-primary transition focus-visible:outline-button-danger",
102
- loading: "cursor-wait pointer-events-none"
103
- }
104
- },
105
- defaultVariants: {
106
- variant: "primary",
107
- state: "default",
108
- size: "default"
109
- }
110
- }
111
- ), A = ({
112
- asChild: c = !1,
113
- children: a,
114
- className: x,
115
- dataTestId: v,
116
- disabled: r,
117
- endIcon: b,
118
- errorMessage: d,
119
- label: h,
120
- onClick: y,
121
- ref: f,
122
- size: s,
123
- startIcon: p,
124
- state: o,
125
- type: w = "button",
126
- variant: e = "primary",
127
- ...C
128
- }) => {
129
- const u = {
130
- error: {
131
- primary: "bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary",
132
- secondary: "bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary",
133
- outline: "bg-transparent border-button-danger text-button-danger hover:border-button-danger--hover hover:text-button-danger/80",
134
- ghost: "bg-transparent text-button-danger hover:text-button-danger/80",
135
- unstyled: "bg-transparent text-button-danger"
136
- },
137
- loading: {
138
- primary: "bg-button-primary-bg--disabled border-button-primary-border--disabled text-button-primary-text--disabled pointer-events-none",
139
- secondary: "bg-button-secondary-bg--disabled border-button-secondary-border--disabled text-button-secondary-text--disabled pointer-events-none",
140
- outline: "bg-button-outline-bg--disabled border-button-outline-border--disabled text-button-outline-text--disabled pointer-events-none",
141
- ghost: "bg-transparent text-button-ghost-text--disabled pointer-events-none",
142
- unstyled: "bg-transparent opacity-50 pointer-events-none"
143
- }
144
- }, N = i(q({ variant: e, state: o, size: s }), o === "error" && u.error[e], o === "loading" && u.loading[e], x), t = c && D(a) && S.count(a) === 1, l = t ? void 0 : a ?? h;
145
- if (!t && !l)
146
- throw new Error("Button requires either `label` or `children`");
147
- const j = (m) => {
148
- r && (m.preventDefault(), m.stopPropagation());
149
- }, k = t ? E : "button";
150
- return /* @__PURE__ */ g("div", { className: i("flex flex-col justify-items-center", s), children: [
151
- /* @__PURE__ */ n(
152
- k,
153
- {
154
- "aria-disabled": r,
155
- className: i(N, t && "no-underline! before:content-none after:content-none", t && r && "pointer-events-none opacity-50"),
156
- "data-as-child": t ? "true" : void 0,
157
- "data-state": o,
158
- "data-testid": v ?? `spectral-button-${e}`,
159
- "data-variant": e,
160
- disabled: t ? void 0 : r,
161
- onClick: y,
162
- onClickCapture: t ? j : void 0,
163
- ref: f,
164
- tabIndex: t && r ? -1 : void 0,
165
- type: t ? void 0 : w,
166
- ...C,
167
- children: t ? a : /* @__PURE__ */ g(z, { children: [
168
- p && /* @__PURE__ */ n("span", { className: i("flex", e !== "unstyled" && "pr-1"), "aria-hidden": !0, "data-testid": "spectral-button-start-icon", children: p }),
169
- o === "loading" && /* @__PURE__ */ n(B, { className: "ml-2 motion-safe:animate-spin", size: 16 }),
170
- l,
171
- b && o !== "loading" && /* @__PURE__ */ n("span", { className: i("flex", e !== "unstyled" && "pl-2"), "aria-hidden": !0, "data-testid": "spectral-button-end-icon", children: b })
172
- ] })
173
- }
174
- ),
175
- o === "error" && d && /* @__PURE__ */ n(V, { message: d, dataTestId: "spectral-button-error-message", id: "button-error" })
176
- ] });
177
- };
178
- A.displayName = "Button";
179
- export {
180
- A as Button
3
+ import { LoaderIcon as e } from "./Icons/LoaderIcon.js";
4
+ import { t } from "./twUtils-VNWgstKL.js";
5
+ import { t as n } from "./dist-B4g6zpUF.js";
6
+ import { Slot as r } from "./primitives/slot.js";
7
+ import { ErrorMessage as i } from "./utils/formFieldUtils.js";
8
+ import { Children as a, isValidElement as o } from "react";
9
+ import { Fragment as s, jsx as c, jsxs as l } from "react/jsx-runtime";
10
+ //#region src/components/Button/Button.tsx
11
+ var u = n("gap-2 rounded-lg font-semibold [&_svg]:size-4 relative flex cursor-pointer items-center justify-center border font-sans! whitespace-nowrap transition-colors focus:outline-none focus-visible:outline-1 focus-visible:outline-offset-2 disabled:pointer-events-none [&_svg]:pointer-events-none [&_svg]:shrink-0", {
12
+ variants: {
13
+ variant: {
14
+ primary: "border-button-primary-border bg-button-primary-bg text-button-primary-text hover:border-button-primary-border--hover hover:bg-button-primary-bg--hover hover:text-button-primary-text--hover focus-visible:outline-button-primary-border disabled:border-button-primary-border--disabled disabled:bg-button-primary-bg--disabled disabled:text-button-primary-text--disabled",
15
+ secondary: "border-button-secondary-border bg-button-secondary-bg text-button-secondary-text hover:bg-button-secondary-bg--hover hover:text-button-secondary-text--hover focus-visible:outline-button-secondary-border disabled:border-button-secondary-border--disabled disabled:bg-button-secondary-bg--disabled disabled:text-button-secondary-text--disabled",
16
+ outline: "border-button-outline-border bg-button-outline-bg text-button-outline-text hover:bg-button-outline-bg--hover hover:text-button-outline-text--hover focus-visible:outline-button-outline-border disabled:border-button-outline-border--disabled disabled:text-button-outline-text--disabled",
17
+ ghost: "border-none bg-button-ghost-bg text-button-ghost-text hover:bg-button-ghost-bg--hover hover:text-button-ghost-text--hover focus-visible:outline-none disabled:text-button-ghost-text--disabled",
18
+ unstyled: "font-inherit! font-normal gap-0 p-0! inline-flex w-auto! justify-start rounded-none! border-none! bg-transparent text-inherit shadow-none! hover:cursor-pointer hover:bg-transparent focus-visible:outline-button-outline-border disabled:opacity-50"
19
+ },
20
+ size: {
21
+ small: "py-1 px-4 text-sm! w-fit",
22
+ default: "py-2 px-6 text-base! w-fit",
23
+ fullWidth: "py-2 px-6 text-base! w-full"
24
+ },
25
+ state: {
26
+ default: "",
27
+ error: "bg-button-danger text-text-primary transition focus-visible:outline-button-danger",
28
+ loading: "pointer-events-none cursor-wait"
29
+ }
30
+ },
31
+ defaultVariants: {
32
+ variant: "primary",
33
+ state: "default",
34
+ size: "default"
35
+ }
36
+ }), d = ({ asChild: n = !1, children: d, className: f, dataTestId: p, disabled: m, endIcon: h, errorMessage: g, label: _, onClick: v, ref: y, size: b, startIcon: x, state: S, type: C = "button", variant: w = "primary", ...T }) => {
37
+ let E = {
38
+ error: {
39
+ primary: "bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary",
40
+ secondary: "bg-button-danger border-button-danger text-text-primary hover:bg-button-danger--hover hover:text-text-primary",
41
+ outline: "bg-transparent border-button-danger text-button-danger hover:border-button-danger--hover hover:text-button-danger/80",
42
+ ghost: "bg-transparent text-button-danger hover:text-button-danger/80",
43
+ unstyled: "bg-transparent text-button-danger"
44
+ },
45
+ loading: {
46
+ primary: "bg-button-primary-bg--disabled border-button-primary-border--disabled text-button-primary-text--disabled pointer-events-none",
47
+ secondary: "bg-button-secondary-bg--disabled border-button-secondary-border--disabled text-button-secondary-text--disabled pointer-events-none",
48
+ outline: "bg-button-outline-bg--disabled border-button-outline-border--disabled text-button-outline-text--disabled pointer-events-none",
49
+ ghost: "bg-transparent text-button-ghost-text--disabled pointer-events-none",
50
+ unstyled: "bg-transparent opacity-50 pointer-events-none"
51
+ }
52
+ }, D = t(u({
53
+ variant: w,
54
+ state: S,
55
+ size: b
56
+ }), S === "error" && E.error[w], S === "loading" && E.loading[w], f), O = n && o(d) && a.count(d) === 1, k = O ? void 0 : d ?? _;
57
+ if (!O && !k) throw Error("Button requires either `label` or `children`");
58
+ let A = (e) => {
59
+ m && (e.preventDefault(), e.stopPropagation());
60
+ }, j = O ? r : "button";
61
+ return /* @__PURE__ */ l("div", {
62
+ className: t("flex flex-col justify-items-center", b),
63
+ children: [/* @__PURE__ */ c(j, {
64
+ "aria-disabled": m,
65
+ className: t(D, O && "no-underline! before:content-none after:content-none", O && m && "pointer-events-none opacity-50"),
66
+ "data-as-child": O ? "true" : void 0,
67
+ "data-state": S,
68
+ "data-testid": p ?? `spectral-button-${w}`,
69
+ "data-variant": w,
70
+ disabled: O ? void 0 : m,
71
+ onClick: v,
72
+ onClickCapture: O ? A : void 0,
73
+ ref: y,
74
+ tabIndex: O && m ? -1 : void 0,
75
+ type: O ? void 0 : C,
76
+ ...T,
77
+ children: O ? d : /* @__PURE__ */ l(s, { children: [
78
+ x && /* @__PURE__ */ c("span", {
79
+ className: t("flex", w !== "unstyled" && "pr-1"),
80
+ "aria-hidden": !0,
81
+ "data-testid": "spectral-button-start-icon",
82
+ children: x
83
+ }),
84
+ S === "loading" && /* @__PURE__ */ c(e, {
85
+ className: "ml-2 motion-safe:animate-spin",
86
+ size: 16
87
+ }),
88
+ k,
89
+ h && S !== "loading" && /* @__PURE__ */ c("span", {
90
+ className: t("flex", w !== "unstyled" && "pl-2"),
91
+ "aria-hidden": !0,
92
+ "data-testid": "spectral-button-end-icon",
93
+ children: h
94
+ })
95
+ ] })
96
+ }), S === "error" && g && /* @__PURE__ */ c(i, {
97
+ message: g,
98
+ dataTestId: "spectral-button-error-message",
99
+ id: "button-error"
100
+ })]
101
+ });
181
102
  };
103
+ d.displayName = "Button";
104
+ //#endregion
105
+ export { d as Button };
@@ -1,42 +1,40 @@
1
1
  import "../styles/main.css";
2
- import { jsx as n } from "react/jsx-runtime";
3
- import { Slot as a } from "../primitives/slot.js";
4
- import { cn as r } from "../utils/twUtils.js";
5
- import { c as l } from "../index-D29mdTf5.js";
2
+ import { t as e } from "../twUtils-VNWgstKL.js";
3
+ import { t } from "../dist-B4g6zpUF.js";
4
+ import { Slot as n } from "../primitives/slot.js";
6
5
  import "react";
7
- const c = l(
8
- `inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-[var(--radius,0.375rem)] text-sm font-medium transition-all disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none
9
- [&_svg:not([class*='size-'])]:size-4 shrink-0 [&_svg]:shrink-0 outline-none focus-visible:border-accent focus-visible:outline-offset-2 focus-visible:outline-2 focus-visible:outline-accent
10
- aria-invalid:ring-destructive/20 aria-invalid:border-destructive bg-level-one text-text-primary hover:bg-level-two cursor-pointer active:text-text-inverted active:bg-accent`,
11
- {
12
- variants: {
13
- variant: {
14
- default: "",
15
- outline: "border border-level-three"
16
- },
17
- size: {
18
- md: "h-9 px-4 py-2 has-[>svg]:px-3",
19
- sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
20
- lg: "h-10 px-6 has-[>svg]:px-4",
21
- "icon-md": "size-9",
22
- "icon-sm": "size-8",
23
- "icon-lg": "size-10"
24
- }
25
- },
26
- defaultVariants: {
27
- variant: "default",
28
- size: "md"
29
- }
30
- }
31
- ), u = ({
32
- asChild: i = !1,
33
- className: o,
34
- size: t,
35
- variant: e,
36
- ...s
37
- }) => /* @__PURE__ */ n(i ? a : "button", { className: r(c({ variant: e, size: t, className: o })), "data-size": t, "data-slot": "button-group-item", "data-variant": e, ...s });
38
- u.displayName = "ButtonGroupButton";
39
- export {
40
- u as ButtonGroupButton,
41
- c as buttonVariants
42
- };
6
+ import { jsx as r } from "react/jsx-runtime";
7
+ //#region src/components/ButtonGroup/ButtonGroupButton.tsx
8
+ var i = t("gap-2 text-sm font-medium [&_svg:not([class*='size-'])]:size-4 aria-invalid:ring-destructive/20 aria-invalid:border-destructive inline-flex shrink-0 cursor-pointer items-center justify-center rounded-[var(--radius,0.375rem)] bg-level-one whitespace-nowrap text-text-primary transition-all outline-none hover:bg-level-two focus-visible:border-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-accent active:bg-accent active:text-text-inverted disabled:pointer-events-none disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0", {
9
+ variants: {
10
+ variant: {
11
+ default: "",
12
+ outline: "border border-level-three"
13
+ },
14
+ size: {
15
+ md: "h-9 px-4 py-2 has-[>svg]:px-3",
16
+ sm: "h-8 gap-1.5 px-3 has-[>svg]:px-2.5",
17
+ lg: "h-10 px-6 has-[>svg]:px-4",
18
+ "icon-md": "size-9",
19
+ "icon-sm": "size-8",
20
+ "icon-lg": "size-10"
21
+ }
22
+ },
23
+ defaultVariants: {
24
+ variant: "default",
25
+ size: "md"
26
+ }
27
+ }), a = ({ asChild: t = !1, className: a, size: o, variant: s, ...c }) => /* @__PURE__ */ r(t ? n : "button", {
28
+ className: e(i({
29
+ variant: s,
30
+ size: o,
31
+ className: a
32
+ })),
33
+ "data-size": o,
34
+ "data-slot": "button-group-item",
35
+ "data-variant": s,
36
+ ...c
37
+ });
38
+ a.displayName = "ButtonGroupButton";
39
+ //#endregion
40
+ export { a as ButtonGroupButton, i as buttonVariants };