@epilot/spark-ui 0.20.0 → 0.20.2

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 (314) hide show
  1. package/dist/components/accordion.cjs +7 -7
  2. package/dist/components/accordion.cjs.map +1 -1
  3. package/dist/components/accordion.d.ts +1 -1
  4. package/dist/components/accordion.js +1 -1
  5. package/dist/components/alert-dialog.cjs +10 -10
  6. package/dist/components/alert-dialog.cjs.map +1 -1
  7. package/dist/components/alert-dialog.js +1 -1
  8. package/dist/components/attachment.cjs +10 -10
  9. package/dist/components/attachment.cjs.map +1 -1
  10. package/dist/components/attachment.d.cts +2 -2
  11. package/dist/components/attachment.d.ts +2 -2
  12. package/dist/components/autocomplete.cjs +13 -13
  13. package/dist/components/autocomplete.cjs.map +1 -1
  14. package/dist/components/autocomplete.js +1 -1
  15. package/dist/components/avatar.cjs +2 -2
  16. package/dist/components/avatar.cjs.map +1 -1
  17. package/dist/components/avatar.js +1 -1
  18. package/dist/components/badge.cjs +2 -2
  19. package/dist/components/badge.cjs.map +1 -1
  20. package/dist/components/badge.js +2 -2
  21. package/dist/components/badge.js.map +1 -1
  22. package/dist/components/bar-chart-with-total.d.cts +1 -1
  23. package/dist/components/bar-chart-with-total.d.ts +1 -1
  24. package/dist/components/bar-chart.cjs +4 -4
  25. package/dist/components/bar-chart.cjs.map +1 -1
  26. package/dist/components/bar-chart.js +2 -2
  27. package/dist/components/bar-chart.js.map +1 -1
  28. package/dist/components/box.cjs +2 -2
  29. package/dist/components/box.cjs.map +1 -1
  30. package/dist/components/box.js +1 -1
  31. package/dist/components/breadcrumbs.cjs +7 -7
  32. package/dist/components/breadcrumbs.cjs.map +1 -1
  33. package/dist/components/bubble.cjs +5 -5
  34. package/dist/components/bubble.cjs.map +1 -1
  35. package/dist/components/bubble.d.cts +1 -1
  36. package/dist/components/bubble.d.ts +1 -1
  37. package/dist/components/button-group.cjs +5 -5
  38. package/dist/components/button-group.cjs.map +1 -1
  39. package/dist/components/button-group.js +1 -1
  40. package/dist/components/button.cjs +2 -2
  41. package/dist/components/button.cjs.map +1 -1
  42. package/dist/components/button.d.cts +3 -3
  43. package/dist/components/button.d.ts +3 -3
  44. package/dist/components/button.js +1 -1
  45. package/dist/components/button.js.map +1 -1
  46. package/dist/components/calendar.cjs +12 -11
  47. package/dist/components/calendar.cjs.map +1 -1
  48. package/dist/components/calendar.js +5 -4
  49. package/dist/components/calendar.js.map +1 -1
  50. package/dist/components/callout.cjs +8 -8
  51. package/dist/components/callout.cjs.map +1 -1
  52. package/dist/components/callout.d.ts +1 -1
  53. package/dist/components/callout.js +1 -1
  54. package/dist/components/card.cjs +16 -16
  55. package/dist/components/card.cjs.map +1 -1
  56. package/dist/components/card.js +2 -2
  57. package/dist/components/card.js.map +1 -1
  58. package/dist/components/chart.cjs +2 -2
  59. package/dist/components/chart.cjs.map +1 -1
  60. package/dist/components/checkbox.cjs +2 -2
  61. package/dist/components/checkbox.cjs.map +1 -1
  62. package/dist/components/checkbox.js +1 -1
  63. package/dist/components/checkbox.js.map +1 -1
  64. package/dist/components/circular-gauge.cjs +3 -3
  65. package/dist/components/circular-gauge.cjs.map +1 -1
  66. package/dist/components/circular-gauge.js +1 -1
  67. package/dist/components/circular-gauge.js.map +1 -1
  68. package/dist/components/day-of-week-picker.cjs +4 -4
  69. package/dist/components/day-of-week-picker.cjs.map +1 -1
  70. package/dist/components/dialog.cjs +9 -9
  71. package/dist/components/dialog.cjs.map +1 -1
  72. package/dist/components/dialog.js +1 -1
  73. package/dist/components/donut-chart.cjs.map +1 -1
  74. package/dist/components/donut-chart.js.map +1 -1
  75. package/dist/components/drawer.cjs +8 -8
  76. package/dist/components/drawer.cjs.map +1 -1
  77. package/dist/components/drawer.js +2 -2
  78. package/dist/components/drawer.js.map +1 -1
  79. package/dist/components/dropdown-menu.cjs +11 -11
  80. package/dist/components/dropdown-menu.cjs.map +1 -1
  81. package/dist/components/dropdown-menu.js +1 -1
  82. package/dist/components/empty-state.d.ts +1 -1
  83. package/dist/components/energy-breakdown.cjs +80 -0
  84. package/dist/components/energy-breakdown.cjs.map +1 -0
  85. package/dist/components/energy-breakdown.d.cts +24 -0
  86. package/dist/components/energy-breakdown.d.ts +24 -0
  87. package/dist/components/energy-breakdown.js +79 -0
  88. package/dist/components/energy-breakdown.js.map +1 -0
  89. package/dist/components/energy-history-chart.cjs +63 -0
  90. package/dist/components/energy-history-chart.cjs.map +1 -0
  91. package/dist/components/energy-history-chart.d.cts +64 -0
  92. package/dist/components/energy-history-chart.d.ts +64 -0
  93. package/dist/components/energy-history-chart.js +62 -0
  94. package/dist/components/energy-history-chart.js.map +1 -0
  95. package/dist/components/entity-card.cjs +11 -11
  96. package/dist/components/entity-card.cjs.map +1 -1
  97. package/dist/components/entity-card.d.ts +1 -1
  98. package/dist/components/field.cjs +16 -16
  99. package/dist/components/field.cjs.map +1 -1
  100. package/dist/components/field.js +1 -1
  101. package/dist/components/field.js.map +1 -1
  102. package/dist/components/hero-metric.cjs +4 -4
  103. package/dist/components/hero-metric.cjs.map +1 -1
  104. package/dist/components/icon.cjs +6 -6
  105. package/dist/components/icon.cjs.map +1 -1
  106. package/dist/components/icon.js +5 -5
  107. package/dist/components/icon.js.map +1 -1
  108. package/dist/components/info-block.cjs +9 -9
  109. package/dist/components/info-block.cjs.map +1 -1
  110. package/dist/components/info-block.d.cts +1 -1
  111. package/dist/components/info-block.d.ts +1 -1
  112. package/dist/components/input-date.cjs +5 -4
  113. package/dist/components/input-date.cjs.map +1 -1
  114. package/dist/components/input-date.d.cts +3 -1
  115. package/dist/components/input-date.d.ts +3 -1
  116. package/dist/components/input-date.js +3 -2
  117. package/dist/components/input-date.js.map +1 -1
  118. package/dist/components/input-group.cjs +5 -5
  119. package/dist/components/input-group.cjs.map +1 -1
  120. package/dist/components/input-otp.cjs +3 -3
  121. package/dist/components/input-otp.cjs.map +1 -1
  122. package/dist/components/input-otp.js +1 -1
  123. package/dist/components/input.cjs +3 -3
  124. package/dist/components/input.cjs.map +1 -1
  125. package/dist/components/input.js +1 -1
  126. package/dist/components/label.cjs +2 -2
  127. package/dist/components/label.cjs.map +1 -1
  128. package/dist/components/layout.cjs +2 -2
  129. package/dist/components/layout.cjs.map +1 -1
  130. package/dist/components/line-chart.cjs +7 -7
  131. package/dist/components/line-chart.cjs.map +1 -1
  132. package/dist/components/line-chart.js +5 -5
  133. package/dist/components/line-chart.js.map +1 -1
  134. package/dist/components/list.cjs +11 -11
  135. package/dist/components/list.cjs.map +1 -1
  136. package/dist/components/list.d.cts +7 -2
  137. package/dist/components/list.d.ts +7 -2
  138. package/dist/components/list.js +2 -2
  139. package/dist/components/list.js.map +1 -1
  140. package/dist/components/marker.cjs +4 -4
  141. package/dist/components/marker.cjs.map +1 -1
  142. package/dist/components/marker.d.cts +1 -1
  143. package/dist/components/marker.d.ts +1 -1
  144. package/dist/components/message-scroller.cjs +8 -8
  145. package/dist/components/message-scroller.cjs.map +1 -1
  146. package/dist/components/message-scroller.js +4 -4
  147. package/dist/components/message-scroller.js.map +1 -1
  148. package/dist/components/message.cjs +7 -7
  149. package/dist/components/message.cjs.map +1 -1
  150. package/dist/components/number-flow.d.cts +2 -12
  151. package/dist/components/number-flow.d.ts +2 -12
  152. package/dist/components/page-header.cjs +6 -6
  153. package/dist/components/page-header.cjs.map +1 -1
  154. package/dist/components/page-header.js +1 -1
  155. package/dist/components/period-tabs.cjs +6 -6
  156. package/dist/components/period-tabs.cjs.map +1 -1
  157. package/dist/components/pill.cjs +4 -4
  158. package/dist/components/pill.cjs.map +1 -1
  159. package/dist/components/pill.js +4 -4
  160. package/dist/components/pill.js.map +1 -1
  161. package/dist/components/popover.cjs +2 -2
  162. package/dist/components/popover.cjs.map +1 -1
  163. package/dist/components/power-history-chart.cjs +498 -0
  164. package/dist/components/power-history-chart.cjs.map +1 -0
  165. package/dist/components/power-history-chart.d.cts +71 -0
  166. package/dist/components/power-history-chart.d.ts +71 -0
  167. package/dist/components/power-history-chart.js +496 -0
  168. package/dist/components/power-history-chart.js.map +1 -0
  169. package/dist/components/power-network.cjs +559 -0
  170. package/dist/components/power-network.cjs.map +1 -0
  171. package/dist/components/power-network.d.cts +80 -0
  172. package/dist/components/power-network.d.ts +80 -0
  173. package/dist/components/power-network.js +553 -0
  174. package/dist/components/power-network.js.map +1 -0
  175. package/dist/components/progress.cjs +3 -3
  176. package/dist/components/progress.cjs.map +1 -1
  177. package/dist/components/progress.js +1 -1
  178. package/dist/components/progress.js.map +1 -1
  179. package/dist/components/radio-card-group.cjs +3 -3
  180. package/dist/components/radio-card-group.cjs.map +1 -1
  181. package/dist/components/radio.cjs +3 -3
  182. package/dist/components/radio.cjs.map +1 -1
  183. package/dist/components/radio.js +1 -1
  184. package/dist/components/sankey-chart.cjs +15 -5
  185. package/dist/components/sankey-chart.cjs.map +1 -1
  186. package/dist/components/sankey-chart.d.cts +3 -2
  187. package/dist/components/sankey-chart.d.ts +3 -2
  188. package/dist/components/sankey-chart.js +13 -4
  189. package/dist/components/sankey-chart.js.map +1 -1
  190. package/dist/components/schedule-editor.cjs +9 -9
  191. package/dist/components/schedule-editor.cjs.map +1 -1
  192. package/dist/components/schedule-list.cjs +11 -11
  193. package/dist/components/schedule-list.cjs.map +1 -1
  194. package/dist/components/schedule-list.js +1 -1
  195. package/dist/components/scroll-area.cjs +3 -3
  196. package/dist/components/scroll-area.cjs.map +1 -1
  197. package/dist/components/segmented-control.cjs +8 -8
  198. package/dist/components/segmented-control.cjs.map +1 -1
  199. package/dist/components/segmented-control.d.cts +2 -16
  200. package/dist/components/segmented-control.d.ts +2 -16
  201. package/dist/components/segmented-control.js +5 -5
  202. package/dist/components/segmented-control.js.map +1 -1
  203. package/dist/components/select.cjs +13 -13
  204. package/dist/components/select.cjs.map +1 -1
  205. package/dist/components/select.js +2 -2
  206. package/dist/components/separator.cjs +3 -3
  207. package/dist/components/separator.cjs.map +1 -1
  208. package/dist/components/series-legend.cjs +4 -4
  209. package/dist/components/series-legend.cjs.map +1 -1
  210. package/dist/components/sheet.cjs +9 -9
  211. package/dist/components/sheet.cjs.map +1 -1
  212. package/dist/components/sheet.js +1 -1
  213. package/dist/components/skeleton.cjs +3 -3
  214. package/dist/components/skeleton.cjs.map +1 -1
  215. package/dist/components/slider.cjs +11 -11
  216. package/dist/components/slider.cjs.map +1 -1
  217. package/dist/components/slider.js.map +1 -1
  218. package/dist/components/solar-forecast-chart.cjs +108 -0
  219. package/dist/components/solar-forecast-chart.cjs.map +1 -0
  220. package/dist/components/solar-forecast-chart.d.cts +77 -0
  221. package/dist/components/solar-forecast-chart.d.ts +77 -0
  222. package/dist/components/solar-forecast-chart.js +103 -0
  223. package/dist/components/solar-forecast-chart.js.map +1 -0
  224. package/dist/components/sortable-list.cjs +3 -3
  225. package/dist/components/sortable-list.cjs.map +1 -1
  226. package/dist/components/spinner.cjs +2 -2
  227. package/dist/components/spinner.cjs.map +1 -1
  228. package/dist/components/stat-card.cjs +8 -8
  229. package/dist/components/stat-card.cjs.map +1 -1
  230. package/dist/components/stepper.cjs +3 -3
  231. package/dist/components/stepper.cjs.map +1 -1
  232. package/dist/components/stepper.js +1 -1
  233. package/dist/components/switch.cjs +3 -3
  234. package/dist/components/switch.cjs.map +1 -1
  235. package/dist/components/switch.js +2 -2
  236. package/dist/components/switch.js.map +1 -1
  237. package/dist/components/table.cjs +9 -9
  238. package/dist/components/table.cjs.map +1 -1
  239. package/dist/components/table.js +1 -1
  240. package/dist/components/tabs.cjs +10 -10
  241. package/dist/components/tabs.cjs.map +1 -1
  242. package/dist/components/tabs.d.cts +1 -8
  243. package/dist/components/tabs.d.ts +1 -8
  244. package/dist/components/tabs.js +3 -3
  245. package/dist/components/tabs.js.map +1 -1
  246. package/dist/components/textarea.cjs +3 -3
  247. package/dist/components/textarea.cjs.map +1 -1
  248. package/dist/components/textarea.js +1 -1
  249. package/dist/components/theme.cjs +2 -2
  250. package/dist/components/theme.cjs.map +1 -1
  251. package/dist/components/theme.js +1 -1
  252. package/dist/components/thumbnail.cjs +3 -3
  253. package/dist/components/thumbnail.cjs.map +1 -1
  254. package/dist/components/time-picker.cjs +3 -3
  255. package/dist/components/time-picker.cjs.map +1 -1
  256. package/dist/components/toast.cjs +40 -15
  257. package/dist/components/toast.cjs.map +1 -1
  258. package/dist/components/toast.d.cts +15 -2
  259. package/dist/components/toast.d.ts +15 -2
  260. package/dist/components/toast.js +33 -8
  261. package/dist/components/toast.js.map +1 -1
  262. package/dist/components/toggle-group.cjs +40 -0
  263. package/dist/components/toggle-group.cjs.map +1 -0
  264. package/dist/components/toggle-group.d.cts +28 -0
  265. package/dist/components/toggle-group.d.ts +28 -0
  266. package/dist/components/toggle-group.js +37 -0
  267. package/dist/components/toggle-group.js.map +1 -0
  268. package/dist/components/toggle.cjs +69 -0
  269. package/dist/components/toggle.cjs.map +1 -0
  270. package/dist/components/toggle.d.cts +23 -0
  271. package/dist/components/toggle.d.ts +23 -0
  272. package/dist/components/toggle.js +66 -0
  273. package/dist/components/toggle.js.map +1 -0
  274. package/dist/components/tooltip.cjs +4 -4
  275. package/dist/components/tooltip.cjs.map +1 -1
  276. package/dist/components/tooltip.js +2 -2
  277. package/dist/components/tooltip.js.map +1 -1
  278. package/dist/components/typography.cjs +6 -6
  279. package/dist/components/typography.cjs.map +1 -1
  280. package/dist/components/wizard-layout.cjs +8 -8
  281. package/dist/components/wizard-layout.cjs.map +1 -1
  282. package/dist/lib/generate-radix-colors.cjs +1 -1
  283. package/dist/lib/generate-radix-colors.cjs.map +1 -1
  284. package/dist/lib/generate-radix-colors.js +1 -1
  285. package/dist/lib/generate-radix-colors.js.map +1 -1
  286. package/dist/lib/input-box-variants.cjs +9 -9
  287. package/dist/lib/input-box-variants.cjs.map +1 -1
  288. package/dist/lib/toggle-group-context.cjs +12 -0
  289. package/dist/lib/toggle-group-context.cjs.map +1 -0
  290. package/dist/lib/toggle-group-context.d.cts +17 -0
  291. package/dist/lib/toggle-group-context.d.ts +17 -0
  292. package/dist/lib/toggle-group-context.js +9 -0
  293. package/dist/lib/toggle-group-context.js.map +1 -0
  294. package/dist/number-flow-Bch81ixZ.d.cts +14 -0
  295. package/dist/number-flow-Bch81ixZ.d.ts +14 -0
  296. package/dist/styles/spark-default.css +11 -0
  297. package/dist/styles/theme.css +15 -4
  298. package/dist/utils/build-sankey-nodes.cjs +72 -0
  299. package/dist/utils/build-sankey-nodes.cjs.map +1 -0
  300. package/dist/utils/build-sankey-nodes.d.cts +27 -0
  301. package/dist/utils/build-sankey-nodes.d.ts +27 -0
  302. package/dist/utils/build-sankey-nodes.js +71 -0
  303. package/dist/utils/build-sankey-nodes.js.map +1 -0
  304. package/dist/utils/cn.cjs +2 -2
  305. package/dist/utils/cn.d.cts +1 -1
  306. package/dist/utils/cn.d.ts +1 -1
  307. package/dist/utils/cn.js +1 -1
  308. package/dist/utils/format.cjs +14 -0
  309. package/dist/utils/format.cjs.map +1 -1
  310. package/dist/utils/format.d.cts +8 -1
  311. package/dist/utils/format.d.ts +8 -1
  312. package/dist/utils/format.js +12 -1
  313. package/dist/utils/format.js.map +1 -1
  314. package/package.json +1 -1
@@ -1,10 +1,10 @@
1
1
  "use client";
2
2
  "use client";
3
3
  import { cn } from "../utils/cn.js";
4
- import { useFieldControl } from "./field.js";
5
4
  import { boxChrome } from "../lib/input-box-variants.js";
6
- import { Check, Close, KeyboardArrowDown } from "@epilot/spark-icons";
5
+ import { useFieldControl } from "./field.js";
7
6
  import "react";
7
+ import { Check, Close, KeyboardArrowDown } from "@epilot/spark-icons";
8
8
  import { jsx, jsxs } from "react/jsx-runtime";
9
9
  import { Select as Select$1 } from "@base-ui/react/select";
10
10
  //#region src/components/select.tsx
@@ -4,12 +4,12 @@ const require_chunk = require("../chunk-DY84GLCh.cjs");
4
4
  let react = require("react");
5
5
  react = require_chunk.__toESM(react);
6
6
  let react_jsx_runtime = require("react/jsx-runtime");
7
- let cnfast = require("cnfast");
7
+ let cn = require("cn");
8
8
  //#region src/components/separator.tsx
9
9
  const Separator = react.forwardRef(({ className, orientation = "horizontal", decorative, children, ...props }, ref) => {
10
10
  const isDecorative = decorative ?? !children;
11
11
  if (children) return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("div", {
12
- className: (0, cnfast.cn)("flex items-center gap-4", className),
12
+ className: (0, cn.cn)("flex items-center gap-4", className),
13
13
  "data-orientation": orientation,
14
14
  ref,
15
15
  role: isDecorative ? "none" : "separator",
@@ -24,7 +24,7 @@ const Separator = react.forwardRef(({ className, orientation = "horizontal", dec
24
24
  ]
25
25
  });
26
26
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
27
- className: (0, cnfast.cn)("shrink-0 border-gray", orientation === "horizontal" ? "h-px w-full border-t" : "h-full w-px border-l", className),
27
+ className: (0, cn.cn)("shrink-0 border-gray", orientation === "horizontal" ? "h-px w-full border-t" : "h-full w-px border-l", className),
28
28
  "data-orientation": orientation,
29
29
  ref,
30
30
  role: isDecorative ? "none" : "separator",
@@ -1 +1 @@
1
- {"version":3,"file":"separator.cjs","names":["React"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n orientation?: 'horizontal' | 'vertical'\n decorative?: boolean\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n (\n { className, orientation = 'horizontal', decorative, children, ...props },\n ref,\n ) => {\n // A labeled divider (e.g. \"OR\") conveys meaning, so default it to\n // role=\"separator\" unless the caller opts back into decorative.\n const isDecorative = decorative ?? !children\n\n if (children) {\n return (\n <div\n className={cn('flex items-center gap-4', className)}\n data-orientation={orientation}\n ref={ref}\n role={isDecorative ? 'none' : 'separator'}\n {...props}\n >\n <div className=\"h-px flex-1 border-t border-gray\" />\n <span className=\"shrink-0 text-sm text-gray-light\">{children}</span>\n <div className=\"h-px flex-1 border-t border-gray\" />\n </div>\n )\n }\n\n return (\n <div\n className={cn(\n 'shrink-0 border-gray',\n orientation === 'horizontal'\n ? 'h-px w-full border-t'\n : 'h-full w-px border-l',\n className,\n )}\n data-orientation={orientation}\n ref={ref}\n role={isDecorative ? 'none' : 'separator'}\n {...props}\n />\n )\n },\n)\n\nSeparator.displayName = 'Separator'\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAYA,MAAM,YAEpB,EAAE,WAAW,cAAc,cAAc,YAAY,UAAU,GAAG,SAClE,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;CAEpC,IAAI,UACF,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAClD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,mCAAoC,CAAA;GACnD,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;IAAoC;GAAe,CAAA;GACnE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,mCAAoC,CAAA;EAChD;;CAIT,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,wBACA,gBAAgB,eACZ,yBACA,wBACJ,SACF;EACA,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}
1
+ {"version":3,"file":"separator.cjs","names":["React"],"sources":["../../src/components/separator.tsx"],"sourcesContent":["import * as React from 'react'\nimport { cn } from '../utils/cn'\n\ninterface SeparatorProps extends React.HTMLAttributes<HTMLDivElement> {\n orientation?: 'horizontal' | 'vertical'\n decorative?: boolean\n}\n\nconst Separator = React.forwardRef<HTMLDivElement, SeparatorProps>(\n (\n { className, orientation = 'horizontal', decorative, children, ...props },\n ref,\n ) => {\n // A labeled divider (e.g. \"OR\") conveys meaning, so default it to\n // role=\"separator\" unless the caller opts back into decorative.\n const isDecorative = decorative ?? !children\n\n if (children) {\n return (\n <div\n className={cn('flex items-center gap-4', className)}\n data-orientation={orientation}\n ref={ref}\n role={isDecorative ? 'none' : 'separator'}\n {...props}\n >\n <div className=\"h-px flex-1 border-t border-gray\" />\n <span className=\"shrink-0 text-sm text-gray-light\">{children}</span>\n <div className=\"h-px flex-1 border-t border-gray\" />\n </div>\n )\n }\n\n return (\n <div\n className={cn(\n 'shrink-0 border-gray',\n orientation === 'horizontal'\n ? 'h-px w-full border-t'\n : 'h-full w-px border-l',\n className,\n )}\n data-orientation={orientation}\n ref={ref}\n role={isDecorative ? 'none' : 'separator'}\n {...props}\n />\n )\n },\n)\n\nSeparator.displayName = 'Separator'\n\nexport { Separator }\nexport type { SeparatorProps }\n"],"mappings":";;;;;;;;AAQA,MAAM,YAAYA,MAAM,YAEpB,EAAE,WAAW,cAAc,cAAc,YAAY,UAAU,GAAG,SAClE,QACG;CAGH,MAAM,eAAe,cAAc,CAAC;CAEpC,IAAI,UACF,OACE,iBAAA,GAAA,kBAAA,MAAC,OAAD;EACE,YAAA,GAAA,GAAA,IAAc,2BAA2B,SAAS;EAClD,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;YALN;GAOE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,mCAAoC,CAAA;GACnD,iBAAA,GAAA,kBAAA,KAAC,QAAD;IAAM,WAAU;IAAoC;GAAe,CAAA;GACnE,iBAAA,GAAA,kBAAA,KAAC,OAAD,EAAK,WAAU,mCAAoC,CAAA;EAChD;;CAIT,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,GAAA,IACE,wBACA,gBAAgB,eACZ,yBACA,wBACJ,SACF;EACA,oBAAkB;EACb;EACL,MAAM,eAAe,SAAS;EAC9B,GAAI;CACL,CAAA;AAEL,CACF;AAEA,UAAU,cAAc"}
@@ -1,13 +1,13 @@
1
1
  "use client";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  let react_jsx_runtime = require("react/jsx-runtime");
4
- let cnfast = require("cnfast");
4
+ let cn = require("cn");
5
5
  //#region src/components/series-legend.tsx
6
6
  function SeriesLegend({ ariaLabel = "Filter data series", className, hiddenIds, items, onToggle }) {
7
7
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
8
8
  role: "group",
9
9
  "aria-label": ariaLabel,
10
- className: (0, cnfast.cn)("flex flex-wrap gap-x-4", className),
10
+ className: (0, cn.cn)("flex flex-wrap gap-x-4", className),
11
11
  children: items.map((item) => {
12
12
  const hidden = hiddenIds.has(item.id);
13
13
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("button", {
@@ -15,7 +15,7 @@ function SeriesLegend({ ariaLabel = "Filter data series", className, hiddenIds,
15
15
  onClick: () => onToggle(item.id),
16
16
  "aria-pressed": !hidden,
17
17
  "aria-label": `${item.label}, ${hidden ? "hidden" : "shown"}`,
18
- className: (0, cnfast.cn)("flex min-h-[1.5rem] min-w-[1.5rem] cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", hidden && "opacity-40"),
18
+ className: (0, cn.cn)("flex min-h-[1.5rem] min-w-[1.5rem] cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none", hidden && "opacity-40"),
19
19
  children: [item.marker === "dashed-line" ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
20
20
  "aria-hidden": "true",
21
21
  className: "w-3 shrink-0 border-t-2 border-dashed",
@@ -25,7 +25,7 @@ function SeriesLegend({ ariaLabel = "Filter data series", className, hiddenIds,
25
25
  className: "size-2.5 shrink-0 rounded-full",
26
26
  style: { backgroundColor: item.color }
27
27
  }), /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
28
- className: (0, cnfast.cn)(hidden && "line-through"),
28
+ className: (0, cn.cn)(hidden && "line-through"),
29
29
  children: item.label
30
30
  })]
31
31
  }, item.id);
@@ -1 +1 @@
1
- {"version":3,"file":"series-legend.cjs","names":[],"sources":["../../src/components/series-legend.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport interface SeriesLegendItem {\n id: string\n label: string\n /** CSS color value applied inline (e.g. `var(--orange-a9)` or `#f00`). */\n color: string\n /** Swatch shape: `dot` (default) for bar/area series, `dashed-line` for line overlays. */\n marker?: 'dot' | 'dashed-line'\n}\n\ninterface SeriesLegendProps {\n items: SeriesLegendItem[]\n hiddenIds: ReadonlySet<string>\n onToggle: (id: string) => void\n className?: string\n /** Accessible label announced for the legend group. */\n ariaLabel?: string\n}\n\nexport function SeriesLegend({\n ariaLabel = 'Filter data series',\n className,\n hiddenIds,\n items,\n onToggle,\n}: SeriesLegendProps) {\n return (\n <div\n role=\"group\"\n aria-label={ariaLabel}\n className={cn('flex flex-wrap gap-x-4', className)}\n >\n {items.map((item) => {\n const hidden = hiddenIds.has(item.id)\n return (\n <button\n key={item.id}\n type=\"button\"\n onClick={() => onToggle(item.id)}\n aria-pressed={!hidden}\n aria-label={`${item.label}, ${hidden ? 'hidden' : 'shown'}`}\n className={cn(\n // fixed rem, not min-h-6/min-w-6: the 24px floor must not shrink with [data-scaling]\n 'flex min-h-[1.5rem] min-w-[1.5rem] cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n hidden && 'opacity-40',\n )}\n >\n {item.marker === 'dashed-line' ? (\n <span\n aria-hidden=\"true\"\n className=\"w-3 shrink-0 border-t-2 border-dashed\"\n style={{ borderColor: item.color }}\n />\n ) : (\n <span\n aria-hidden=\"true\"\n className=\"size-2.5 shrink-0 rounded-full\"\n style={{ backgroundColor: item.color }}\n />\n )}\n <span className={cn(hidden && 'line-through')}>{item.label}</span>\n </button>\n )\n })}\n </div>\n )\n}\n"],"mappings":";;;;;AAoBA,SAAgB,aAAa,EAC3B,YAAY,sBACZ,WACA,WACA,OACA,YACoB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,YAAA,GAAA,OAAA,IAAc,0BAA0B,SAAS;YAEhD,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,UAAU,IAAI,KAAK,EAAE;GACpC,OACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;IAEE,MAAK;IACL,eAAe,SAAS,KAAK,EAAE;IAC/B,gBAAc,CAAC;IACf,cAAY,GAAG,KAAK,MAAM,IAAI,SAAS,WAAW;IAClD,YAAA,GAAA,OAAA,IAEE,4PACA,UAAU,YACZ;cAVF,CAYG,KAAK,WAAW,gBACf,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,aAAa,KAAK,MAAM;IAClC,CAAA,IAED,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,MAAM;IACtC,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,YAAA,GAAA,OAAA,IAAc,UAAU,cAAc;eAAI,KAAK;IAAY,CAAA,CAC3D;MAzBD,KAAK,EAyBJ;EAEZ,CAAC;CACE,CAAA;AAET"}
1
+ {"version":3,"file":"series-legend.cjs","names":[],"sources":["../../src/components/series-legend.tsx"],"sourcesContent":["import { cn } from '../utils/cn'\n\nexport interface SeriesLegendItem {\n id: string\n label: string\n /** CSS color value applied inline (e.g. `var(--orange-a9)` or `#f00`). */\n color: string\n /** Swatch shape: `dot` (default) for bar/area series, `dashed-line` for line overlays. */\n marker?: 'dot' | 'dashed-line'\n}\n\ninterface SeriesLegendProps {\n items: SeriesLegendItem[]\n hiddenIds: ReadonlySet<string>\n onToggle: (id: string) => void\n className?: string\n /** Accessible label announced for the legend group. */\n ariaLabel?: string\n}\n\nexport function SeriesLegend({\n ariaLabel = 'Filter data series',\n className,\n hiddenIds,\n items,\n onToggle,\n}: SeriesLegendProps) {\n return (\n <div\n role=\"group\"\n aria-label={ariaLabel}\n className={cn('flex flex-wrap gap-x-4', className)}\n >\n {items.map((item) => {\n const hidden = hiddenIds.has(item.id)\n return (\n <button\n key={item.id}\n type=\"button\"\n onClick={() => onToggle(item.id)}\n aria-pressed={!hidden}\n aria-label={`${item.label}, ${hidden ? 'hidden' : 'shown'}`}\n className={cn(\n // fixed rem, not min-h-6/min-w-6: the 24px floor must not shrink with [data-scaling]\n 'flex min-h-[1.5rem] min-w-[1.5rem] cursor-pointer items-center gap-1.5 rounded-sm text-xs text-gray-light transition-opacity hover:text-gray focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:outline-hidden motion-reduce:transition-none',\n hidden && 'opacity-40',\n )}\n >\n {item.marker === 'dashed-line' ? (\n <span\n aria-hidden=\"true\"\n className=\"w-3 shrink-0 border-t-2 border-dashed\"\n style={{ borderColor: item.color }}\n />\n ) : (\n <span\n aria-hidden=\"true\"\n className=\"size-2.5 shrink-0 rounded-full\"\n style={{ backgroundColor: item.color }}\n />\n )}\n <span className={cn(hidden && 'line-through')}>{item.label}</span>\n </button>\n )\n })}\n </div>\n )\n}\n"],"mappings":";;;;;AAoBA,SAAgB,aAAa,EAC3B,YAAY,sBACZ,WACA,WACA,OACA,YACoB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,MAAK;EACL,cAAY;EACZ,YAAA,GAAA,GAAA,IAAc,0BAA0B,SAAS;YAEhD,MAAM,KAAK,SAAS;GACnB,MAAM,SAAS,UAAU,IAAI,KAAK,EAAE;GACpC,OACE,iBAAA,GAAA,kBAAA,MAAC,UAAD;IAEE,MAAK;IACL,eAAe,SAAS,KAAK,EAAE;IAC/B,gBAAc,CAAC;IACf,cAAY,GAAG,KAAK,MAAM,IAAI,SAAS,WAAW;IAClD,YAAA,GAAA,GAAA,IAEE,4PACA,UAAU,YACZ;cAVF,CAYG,KAAK,WAAW,gBACf,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,aAAa,KAAK,MAAM;IAClC,CAAA,IAED,iBAAA,GAAA,kBAAA,KAAC,QAAD;KACE,eAAY;KACZ,WAAU;KACV,OAAO,EAAE,iBAAiB,KAAK,MAAM;IACtC,CAAA,GAEH,iBAAA,GAAA,kBAAA,KAAC,QAAD;KAAM,YAAA,GAAA,GAAA,IAAc,UAAU,cAAc;eAAI,KAAK;IAAY,CAAA,CAC3D;MAzBD,KAAK,EAyBJ;EAEZ,CAAC;CACE,CAAA;AAET"}
@@ -2,12 +2,12 @@
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  const require_chunk = require("../chunk-DY84GLCh.cjs");
4
4
  const require_components_button = require("./button.cjs");
5
- let _epilot_spark_icons = require("@epilot/spark-icons");
6
5
  let react = require("react");
7
6
  react = require_chunk.__toESM(react);
7
+ let _epilot_spark_icons = require("@epilot/spark-icons");
8
8
  let react_jsx_runtime = require("react/jsx-runtime");
9
9
  let _base_ui_react_dialog = require("@base-ui/react/dialog");
10
- let cnfast = require("cnfast");
10
+ let cn = require("cn");
11
11
  //#region src/components/sheet.tsx
12
12
  function Sheet(props) {
13
13
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Root, { ...props });
@@ -27,7 +27,7 @@ function SheetClose({ className, children, ...props }) {
27
27
  });
28
28
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Close, {
29
29
  "data-slot": "sheet-close",
30
- className: (0, cnfast.cn)(require_components_button.buttonVariants({
30
+ className: (0, cn.cn)(require_components_button.buttonVariants({
31
31
  size: "icon",
32
32
  variant: "tertiary"
33
33
  }), "absolute top-2.5 right-3 rounded-full", className),
@@ -44,7 +44,7 @@ function SheetPortal(props) {
44
44
  function SheetOverlay({ className, ...props }) {
45
45
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Backdrop, {
46
46
  "data-slot": "sheet-overlay",
47
- className: (0, cnfast.cn)("fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none", className),
47
+ className: (0, cn.cn)("fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none", className),
48
48
  ...props
49
49
  });
50
50
  }
@@ -52,35 +52,35 @@ function SheetContent({ side = "right", className, ...props }) {
52
52
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Popup, {
53
53
  "data-slot": "sheet-content",
54
54
  "data-side": side,
55
- className: (0, cnfast.cn)("fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-1 p-safe-offset-4 text-gray shadow-lg transition-[translate] duration-200 ease-in-out data-ending-style:duration-300 motion-reduce:transition-none", "data-[side=top]:inset-x-0 data-[side=top]:top-(--spark-viewport-top,0) data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full", "data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full", "data-[side=left]:top-(--spark-viewport-top,0) data-[side=left]:left-0 data-[side=left]:h-(--spark-viewport-height,100%) data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=left]:sm:max-w-sm", "data-[side=right]:top-(--spark-viewport-top,0) data-[side=right]:right-0 data-[side=right]:h-(--spark-viewport-height,100%) data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=right]:sm:max-w-sm", className),
55
+ className: (0, cn.cn)("fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-1 p-safe-offset-4 text-gray shadow-lg transition-[translate] duration-200 ease-in-out data-ending-style:duration-300 motion-reduce:transition-none", "data-[side=top]:inset-x-0 data-[side=top]:top-(--spark-viewport-top,0) data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full", "data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full", "data-[side=left]:top-(--spark-viewport-top,0) data-[side=left]:left-0 data-[side=left]:h-(--spark-viewport-height,100%) data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=left]:sm:max-w-sm", "data-[side=right]:top-(--spark-viewport-top,0) data-[side=right]:right-0 data-[side=right]:h-(--spark-viewport-height,100%) data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=right]:sm:max-w-sm", className),
56
56
  ...props
57
57
  });
58
58
  }
59
59
  function SheetHeader({ className, ...props }) {
60
60
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
61
61
  "data-slot": "sheet-header",
62
- className: (0, cnfast.cn)("flex flex-col gap-2 text-center sm:text-left", className),
62
+ className: (0, cn.cn)("flex flex-col gap-2 text-center sm:text-left", className),
63
63
  ...props
64
64
  });
65
65
  }
66
66
  function SheetFooter({ className, ...props }) {
67
67
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
68
68
  "data-slot": "sheet-footer",
69
- className: (0, cnfast.cn)("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
69
+ className: (0, cn.cn)("mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end", className),
70
70
  ...props
71
71
  });
72
72
  }
73
73
  function SheetTitle({ className, ...props }) {
74
74
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Title, {
75
75
  "data-slot": "sheet-title",
76
- className: (0, cnfast.cn)("text-lg font-semibold text-gray", className),
76
+ className: (0, cn.cn)("text-lg font-semibold text-gray", className),
77
77
  ...props
78
78
  });
79
79
  }
80
80
  function SheetDescription({ className, ...props }) {
81
81
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_dialog.Dialog.Description, {
82
82
  "data-slot": "sheet-description",
83
- className: (0, cnfast.cn)("text-sm text-gray-light", className),
83
+ className: (0, cn.cn)("text-sm text-gray-light", className),
84
84
  ...props
85
85
  });
86
86
  }
@@ -1 +1 @@
1
- {"version":3,"file":"sheet.cjs","names":["SheetPrimitive","buttonVariants","Close"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n return <SheetPrimitive.Root {...props} />\n}\n\nfunction SheetTrigger(\n props: React.ComponentProps<typeof SheetPrimitive.Trigger>,\n) {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, labeled closes)\nfunction SheetClose({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n if (children || props.render) {\n return (\n <SheetPrimitive.Close\n data-slot=\"sheet-close\"\n className={className}\n {...props}\n >\n {children}\n </SheetPrimitive.Close>\n )\n }\n\n return (\n <SheetPrimitive.Close\n data-slot=\"sheet-close\"\n className={cn(\n buttonVariants({ size: 'icon', variant: 'tertiary' }),\n 'absolute top-2.5 right-3 rounded-full',\n className,\n )}\n {...props}\n >\n <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n </SheetPrimitive.Close>\n )\n}\n\nfunction SheetPortal(\n props: React.ComponentProps<typeof SheetPrimitive.Portal>,\n) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Backdrop>) {\n return (\n <SheetPrimitive.Backdrop\n data-slot=\"sheet-overlay\"\n className={cn(\n 'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',\n className,\n )}\n {...props}\n />\n )\n}\n\ninterface SheetContentProps extends React.ComponentProps<\n typeof SheetPrimitive.Popup\n> {\n side?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nfunction SheetContent({\n side = 'right',\n className,\n ...props\n}: SheetContentProps) {\n return (\n <SheetPrimitive.Popup\n data-slot=\"sheet-content\"\n data-side={side}\n className={cn(\n 'fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-1 p-safe-offset-4 text-gray shadow-lg transition-[translate] duration-200 ease-in-out data-ending-style:duration-300 motion-reduce:transition-none',\n 'data-[side=top]:inset-x-0 data-[side=top]:top-(--spark-viewport-top,0) data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full',\n 'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full',\n 'data-[side=left]:top-(--spark-viewport-top,0) data-[side=left]:left-0 data-[side=left]:h-(--spark-viewport-height,100%) data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=left]:sm:max-w-sm',\n 'data-[side=right]:top-(--spark-viewport-top,0) data-[side=right]:right-0 data-[side=right]:h-(--spark-viewport-height,100%) data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=right]:sm:max-w-sm',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n {...props}\n />\n )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn(\n 'mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n return (\n <SheetPrimitive.Title\n data-slot=\"sheet-title\"\n className={cn('text-lg font-semibold text-gray', className)}\n {...props}\n />\n )\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n return (\n <SheetPrimitive.Description\n data-slot=\"sheet-description\"\n className={cn('text-sm text-gray-light', className)}\n {...props}\n />\n )\n}\n\nexport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetOverlay,\n SheetPortal,\n SheetTitle,\n SheetTrigger,\n}\nexport type { SheetContentProps }\n"],"mappings":";;;;;;;;;;;AAMA,SAAS,MAAM,OAAyD;CACtE,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,MAAhB,EAAqB,GAAI,MAAQ,CAAA;AAC1C;AAEA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,IAAI,YAAY,MAAM,QACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACmB,CAAA;CAI1B,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACEC,0BAAAA,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAO,WAAU,wDAAyD,CAAA;CACtD,CAAA;AAE1B;AAEA,SAAS,YACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACF,sBAAAA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACoD;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,UAAhB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,wOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,aAAa,EACpB,OAAO,SACP,WACA,GAAG,SACiB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,YAAA,GAAA,OAAA,IACE,4MACA,6MACA,uOACA,qTACA,4TACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,kEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,aAAhB;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}
1
+ {"version":3,"file":"sheet.cjs","names":["SheetPrimitive","buttonVariants","Close"],"sources":["../../src/components/sheet.tsx"],"sourcesContent":["import { Dialog as SheetPrimitive } from '@base-ui/react/dialog'\nimport { Close } from '@epilot/spark-icons'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\nimport { buttonVariants } from './button'\n\nfunction Sheet(props: React.ComponentProps<typeof SheetPrimitive.Root>) {\n return <SheetPrimitive.Root {...props} />\n}\n\nfunction SheetTrigger(\n props: React.ComponentProps<typeof SheetPrimitive.Trigger>,\n) {\n return <SheetPrimitive.Trigger data-slot=\"sheet-trigger\" {...props} />\n}\n\n// bare = the ready-made corner X (label is the consumer's, via aria-label);\n// with children or a render prop it stays the bare primitive (footer buttons, labeled closes)\nfunction SheetClose({\n className,\n children,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Close>) {\n if (children || props.render) {\n return (\n <SheetPrimitive.Close\n data-slot=\"sheet-close\"\n className={className}\n {...props}\n >\n {children}\n </SheetPrimitive.Close>\n )\n }\n\n return (\n <SheetPrimitive.Close\n data-slot=\"sheet-close\"\n className={cn(\n buttonVariants({ size: 'icon', variant: 'tertiary' }),\n 'absolute top-2.5 right-3 rounded-full',\n className,\n )}\n {...props}\n >\n <Close className=\"[--spark-icon-size:calc(20px*var(--spark-scaling,1))]\" />\n </SheetPrimitive.Close>\n )\n}\n\nfunction SheetPortal(\n props: React.ComponentProps<typeof SheetPrimitive.Portal>,\n) {\n return <SheetPrimitive.Portal data-slot=\"sheet-portal\" {...props} />\n}\n\nfunction SheetOverlay({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Backdrop>) {\n return (\n <SheetPrimitive.Backdrop\n data-slot=\"sheet-overlay\"\n className={cn(\n 'fixed top-(--spark-viewport-top,0) right-0 left-0 z-50 h-(--spark-viewport-height,100%) bg-(--color-overlay) transition-opacity duration-150 data-ending-style:opacity-0 data-starting-style:opacity-0 motion-reduce:transition-none',\n className,\n )}\n {...props}\n />\n )\n}\n\ninterface SheetContentProps extends React.ComponentProps<\n typeof SheetPrimitive.Popup\n> {\n side?: 'top' | 'right' | 'bottom' | 'left'\n}\n\nfunction SheetContent({\n side = 'right',\n className,\n ...props\n}: SheetContentProps) {\n return (\n <SheetPrimitive.Popup\n data-slot=\"sheet-content\"\n data-side={side}\n className={cn(\n 'fixed z-50 flex flex-col gap-4 border-gray-a1 bg-gray-1 p-safe-offset-4 text-gray shadow-lg transition-[translate] duration-200 ease-in-out data-ending-style:duration-300 motion-reduce:transition-none',\n 'data-[side=top]:inset-x-0 data-[side=top]:top-(--spark-viewport-top,0) data-[side=top]:border-b data-[side=top]:data-ending-style:-translate-y-full data-[side=top]:data-starting-style:-translate-y-full',\n 'data-[side=bottom]:inset-x-0 data-[side=bottom]:bottom-(--spark-viewport-bottom-offset,0) data-[side=bottom]:border-t data-[side=bottom]:data-ending-style:translate-y-full data-[side=bottom]:data-starting-style:translate-y-full',\n 'data-[side=left]:top-(--spark-viewport-top,0) data-[side=left]:left-0 data-[side=left]:h-(--spark-viewport-height,100%) data-[side=left]:w-3/4 data-[side=left]:border-r data-[side=left]:data-ending-style:-translate-x-full data-[side=left]:data-starting-style:-translate-x-full data-[side=left]:sm:max-w-sm',\n 'data-[side=right]:top-(--spark-viewport-top,0) data-[side=right]:right-0 data-[side=right]:h-(--spark-viewport-height,100%) data-[side=right]:w-3/4 data-[side=right]:border-l data-[side=right]:data-ending-style:translate-x-full data-[side=right]:data-starting-style:translate-x-full data-[side=right]:sm:max-w-sm',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction SheetHeader({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sheet-header\"\n className={cn('flex flex-col gap-2 text-center sm:text-left', className)}\n {...props}\n />\n )\n}\n\nfunction SheetFooter({ className, ...props }: React.ComponentProps<'div'>) {\n return (\n <div\n data-slot=\"sheet-footer\"\n className={cn(\n 'mt-auto flex flex-col-reverse gap-2 sm:flex-row sm:justify-end',\n className,\n )}\n {...props}\n />\n )\n}\n\nfunction SheetTitle({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Title>) {\n return (\n <SheetPrimitive.Title\n data-slot=\"sheet-title\"\n className={cn('text-lg font-semibold text-gray', className)}\n {...props}\n />\n )\n}\n\nfunction SheetDescription({\n className,\n ...props\n}: React.ComponentProps<typeof SheetPrimitive.Description>) {\n return (\n <SheetPrimitive.Description\n data-slot=\"sheet-description\"\n className={cn('text-sm text-gray-light', className)}\n {...props}\n />\n )\n}\n\nexport {\n Sheet,\n SheetClose,\n SheetContent,\n SheetDescription,\n SheetFooter,\n SheetHeader,\n SheetOverlay,\n SheetPortal,\n SheetTitle,\n SheetTrigger,\n}\nexport type { SheetContentProps }\n"],"mappings":";;;;;;;;;;;AAMA,SAAS,MAAM,OAAyD;CACtE,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,MAAhB,EAAqB,GAAI,MAAQ,CAAA;AAC1C;AAEA,SAAS,aACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,SAAhB;EAAwB,aAAU;EAAgB,GAAI;CAAQ,CAAA;AACvE;AAIA,SAAS,WAAW,EAClB,WACA,UACA,GAAG,SACiD;CACpD,IAAI,YAAY,MAAM,QACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACC;EACX,GAAI;EAEH;CACmB,CAAA;CAI1B,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACEC,0BAAAA,eAAe;GAAE,MAAM;GAAQ,SAAS;EAAW,CAAC,GACpD,yCACA,SACF;EACA,GAAI;YAEJ,iBAAA,GAAA,kBAAA,KAACC,oBAAAA,OAAD,EAAO,WAAU,wDAAyD,CAAA;CACtD,CAAA;AAE1B;AAEA,SAAS,YACP,OACA;CACA,OAAO,iBAAA,GAAA,kBAAA,KAACF,sBAAAA,OAAe,QAAhB;EAAuB,aAAU;EAAe,GAAI;CAAQ,CAAA;AACrE;AAEA,SAAS,aAAa,EACpB,WACA,GAAG,SACoD;CACvD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,UAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,wOACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAQA,SAAS,aAAa,EACpB,OAAO,SACP,WACA,GAAG,SACiB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,aAAW;EACX,YAAA,GAAA,GAAA,IACE,4MACA,6MACA,uOACA,qTACA,4TACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,gDAAgD,SAAS;EACvE,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IACE,kEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,WAAW,EAClB,WACA,GAAG,SACiD;CACpD,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,OAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,mCAAmC,SAAS;EAC1D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,iBAAiB,EACxB,WACA,GAAG,SACuD;CAC1D,OACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAe,aAAhB;EACE,aAAU;EACV,YAAA,GAAA,GAAA,IAAc,2BAA2B,SAAS;EAClD,GAAI;CACL,CAAA;AAEL"}
@@ -1,8 +1,8 @@
1
1
  "use client";
2
2
  import { cn } from "../utils/cn.js";
3
3
  import { buttonVariants } from "./button.js";
4
- import { Close } from "@epilot/spark-icons";
5
4
  import "react";
5
+ import { Close } from "@epilot/spark-icons";
6
6
  import { jsx } from "react/jsx-runtime";
7
7
  import { Dialog } from "@base-ui/react/dialog";
8
8
  //#region src/components/sheet.tsx
@@ -1,17 +1,17 @@
1
1
  "use client";
2
2
  Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
3
3
  let react_jsx_runtime = require("react/jsx-runtime");
4
- let cnfast = require("cnfast");
4
+ let cn = require("cn");
5
5
  //#region src/components/skeleton.tsx
6
6
  function Skeleton({ className = "", ...props }) {
7
7
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
8
- className: (0, cnfast.cn)("animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none", className),
8
+ className: (0, cn.cn)("animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none", className),
9
9
  ...props
10
10
  });
11
11
  }
12
12
  function CardSkeleton({ children, className = "", padding = "p-4", ...props }) {
13
13
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
14
- className: (0, cnfast.cn)("flex flex-col rounded-lg border border-gray", padding, className),
14
+ className: (0, cn.cn)("flex flex-col rounded-lg border border-gray", padding, className),
15
15
  ...props,
16
16
  children
17
17
  });
@@ -1 +1 @@
1
- {"version":3,"file":"skeleton.cjs","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../utils/cn'\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement>\n\nexport function Skeleton({ className = '', ...props }: SkeletonProps) {\n return (\n <div\n className={cn(\n 'animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none',\n className,\n )}\n {...props}\n />\n )\n}\n\ninterface CardSkeletonProps extends HTMLAttributes<HTMLDivElement> {\n children?: ReactNode\n padding?: 'p-3' | 'p-4'\n}\n\nexport function CardSkeleton({\n children,\n className = '',\n padding = 'p-4',\n ...props\n}: CardSkeletonProps) {\n return (\n <div\n className={cn(\n 'flex flex-col rounded-lg border border-gray',\n padding,\n className,\n )}\n {...props}\n >\n {children}\n </div>\n )\n}\n"],"mappings":";;;;;AAKA,SAAgB,SAAS,EAAE,YAAY,IAAI,GAAG,SAAwB;CACpE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,yEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAOA,SAAgB,aAAa,EAC3B,UACA,YAAY,IACZ,UAAU,OACV,GAAG,SACiB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,OAAA,IACE,+CACA,SACA,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET"}
1
+ {"version":3,"file":"skeleton.cjs","names":[],"sources":["../../src/components/skeleton.tsx"],"sourcesContent":["import type { HTMLAttributes, ReactNode } from 'react'\nimport { cn } from '../utils/cn'\n\ntype SkeletonProps = HTMLAttributes<HTMLDivElement>\n\nexport function Skeleton({ className = '', ...props }: SkeletonProps) {\n return (\n <div\n className={cn(\n 'animate-pulse rounded-md bg-base-gray-soft motion-reduce:animate-none',\n className,\n )}\n {...props}\n />\n )\n}\n\ninterface CardSkeletonProps extends HTMLAttributes<HTMLDivElement> {\n children?: ReactNode\n padding?: 'p-3' | 'p-4'\n}\n\nexport function CardSkeleton({\n children,\n className = '',\n padding = 'p-4',\n ...props\n}: CardSkeletonProps) {\n return (\n <div\n className={cn(\n 'flex flex-col rounded-lg border border-gray',\n padding,\n className,\n )}\n {...props}\n >\n {children}\n </div>\n )\n}\n"],"mappings":";;;;;AAKA,SAAgB,SAAS,EAAE,YAAY,IAAI,GAAG,SAAwB;CACpE,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,GAAA,IACE,yEACA,SACF;EACA,GAAI;CACL,CAAA;AAEL;AAOA,SAAgB,aAAa,EAC3B,UACA,YAAY,IACZ,UAAU,OACV,GAAG,SACiB;CACpB,OACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,YAAA,GAAA,GAAA,IACE,+CACA,SACA,SACF;EACA,GAAI;EAEH;CACE,CAAA;AAET"}
@@ -5,7 +5,7 @@ let react = require("react");
5
5
  react = require_chunk.__toESM(react);
6
6
  let react_jsx_runtime = require("react/jsx-runtime");
7
7
  let _base_ui_react_slider = require("@base-ui/react/slider");
8
- let cnfast = require("cnfast");
8
+ let cn = require("cn");
9
9
  //#region src/components/slider.tsx
10
10
  const MAX_TICKS = 24;
11
11
  function snapToStep(value, min, max, step) {
@@ -85,7 +85,7 @@ function Slider({ className, children, value, defaultValue, min = 0, max = 100,
85
85
  thumbAlignment,
86
86
  onValueChange: emitChange,
87
87
  onValueCommitted: (next, eventDetails) => onValueCommitted?.(matchValueShape(next, current), eventDetails),
88
- className: (0, cnfast.cn)("relative flex w-full flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-row", className),
88
+ className: (0, cn.cn)("relative flex w-full flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-row", className),
89
89
  ...props,
90
90
  children: children ?? /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderControl, { children: /* @__PURE__ */ (0, react_jsx_runtime.jsxs)(SliderTrack, { children: [
91
91
  /* @__PURE__ */ (0, react_jsx_runtime.jsx)(SliderIndicator, {}),
@@ -108,7 +108,7 @@ Slider.displayName = "Slider";
108
108
  function SliderControl({ className, ...props }) {
109
109
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_slider.Slider.Control, {
110
110
  "data-slot": "slider-control",
111
- className: (0, cnfast.cn)("group/slider touch-target relative flex min-h-6 w-full touch-none items-center select-none", "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center", "data-disabled:pointer-events-none data-disabled:opacity-50", className),
111
+ className: (0, cn.cn)("group/slider touch-target relative flex min-h-6 w-full touch-none items-center select-none", "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center", "data-disabled:pointer-events-none data-disabled:opacity-50", className),
112
112
  ...props
113
113
  });
114
114
  }
@@ -117,7 +117,7 @@ SliderControl.displayName = "SliderControl";
117
117
  function SliderTrack({ className, ...props }) {
118
118
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_slider.Slider.Track, {
119
119
  "data-slot": "slider-track",
120
- className: (0, cnfast.cn)("relative h-3 w-full rounded-(--spark-rounded-sm) bg-gray-a4", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3", className),
120
+ className: (0, cn.cn)("relative h-3 w-full rounded-(--spark-rounded-sm) bg-gray-a4", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3", className),
121
121
  ...props
122
122
  });
123
123
  }
@@ -126,7 +126,7 @@ SliderTrack.displayName = "SliderTrack";
126
126
  function SliderIndicator({ className, ...props }) {
127
127
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_slider.Slider.Indicator, {
128
128
  "data-slot": "slider-indicator",
129
- className: (0, cnfast.cn)("rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))", "transition-none duration-150 group-focus-within/slider:transition-[width,height,inset-inline-start] data-dragging:transition-none motion-reduce:transition-none", className),
129
+ className: (0, cn.cn)("rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))", "transition-none duration-150 group-focus-within/slider:transition-[width,height,inset-inline-start] data-dragging:transition-none motion-reduce:transition-none", className),
130
130
  ...props
131
131
  });
132
132
  }
@@ -150,7 +150,7 @@ function SliderTicks({ className, ...props }) {
150
150
  const bandHigh = values.length > 1 ? Math.max(...values) : values[0] ?? min;
151
151
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("div", {
152
152
  "aria-hidden": "true",
153
- className: (0, cnfast.cn)("pointer-events-none absolute inset-0", className),
153
+ className: (0, cn.cn)("pointer-events-none absolute inset-0", className),
154
154
  "data-slot": "slider-ticks",
155
155
  ...props,
156
156
  children: Array.from({ length: dotCount }, (_, k) => {
@@ -158,7 +158,7 @@ function SliderTicks({ className, ...props }) {
158
158
  const position = min + index * step;
159
159
  const pct = (position - min) / (max - min) * 100;
160
160
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
161
- className: (0, cnfast.cn)("absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full", position >= bandLow && position <= bandHigh ? "bg-(--spark-slider-tick-on,var(--spark-on-solid,#fff))" : "bg-gray-a8"),
161
+ className: (0, cn.cn)("absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full", position >= bandLow && position <= bandHigh ? "bg-(--spark-slider-tick-on,var(--spark-on-solid,#fff))" : "bg-gray-a8"),
162
162
  style: { left: `${pct}%` }
163
163
  }, index);
164
164
  })
@@ -168,7 +168,7 @@ SliderTicks.displayName = "SliderTicks";
168
168
  function SliderThumb({ className, ...props }) {
169
169
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_slider.Slider.Thumb, {
170
170
  "data-slot": "slider-thumb",
171
- className: (0, cnfast.cn)("block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))", "shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]", "before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2", "data-dragging:ring-2 data-dragging:ring-offset-2", "transition-shadow duration-150 group-focus-within/slider:transition-[inset-inline-start,top,box-shadow] data-dragging:transition-none motion-reduce:transition-none", "disabled:pointer-events-none", className),
171
+ className: (0, cn.cn)("block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))", "shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]", "before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2", "data-dragging:ring-2 data-dragging:ring-offset-2", "transition-shadow duration-150 group-focus-within/slider:transition-[inset-inline-start,top,box-shadow] data-dragging:transition-none motion-reduce:transition-none", "disabled:pointer-events-none", className),
172
172
  ...props
173
173
  });
174
174
  }
@@ -176,7 +176,7 @@ SliderThumb.displayName = "SliderThumb";
176
176
  function SliderValue({ className, ...props }) {
177
177
  return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_slider.Slider.Value, {
178
178
  "data-slot": "slider-value",
179
- className: (0, cnfast.cn)("text-sm text-gray tabular-nums", className),
179
+ className: (0, cn.cn)("text-sm text-gray tabular-nums", className),
180
180
  ...props
181
181
  });
182
182
  }
@@ -217,7 +217,7 @@ function SliderInput({ className, index = 0, unit, disabled, onFocus, onBlur, on
217
217
  };
218
218
  return /* @__PURE__ */ (0, react_jsx_runtime.jsxs)("span", {
219
219
  "data-slot": "slider-input",
220
- className: (0, cnfast.cn)("inline-flex items-baseline gap-1", className),
220
+ className: (0, cn.cn)("inline-flex items-baseline gap-1", className),
221
221
  children: [/* @__PURE__ */ (0, react_jsx_runtime.jsx)("input", {
222
222
  type: "number",
223
223
  inputMode: "decimal",
@@ -246,7 +246,7 @@ function SliderInput({ className, index = 0, unit, disabled, onFocus, onBlur, on
246
246
  if (event.key === "Enter") event.currentTarget.blur();
247
247
  onKeyDown?.(event);
248
248
  },
249
- className: (0, cnfast.cn)("w-16 bg-transparent tabular-nums outline-hidden", "rounded-(--spark-rounded-sm) focus-visible:ring-2 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"),
249
+ className: (0, cn.cn)("w-16 bg-transparent tabular-nums outline-hidden", "rounded-(--spark-rounded-sm) focus-visible:ring-2 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"),
250
250
  ...props
251
251
  }), unit ? /* @__PURE__ */ (0, react_jsx_runtime.jsx)("span", {
252
252
  className: "text-sm text-gray",
@@ -1 +1 @@
1
- {"version":3,"file":"slider.cjs","names":["React","BaseSlider"],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype SliderValue = number | number[]\n\ntype SliderVariant = 'default' | 'ticks'\n\n// Above this many steps the tick dots become a picket fence, so `variant=\"ticks\"`\n// silently stops drawing them (the continuous rail stays).\nconst MAX_TICKS = 24\n\n// Clamp to [min, max] then snap to the step grid (origin = min), trimming float\n// noise to the step's own decimal precision. `max` is always valid even if it\n// isn't a step multiple (matches Base UI).\nfunction snapToStep(\n value: number,\n min: number,\n max: number,\n step: number,\n): number {\n const clamped = Math.min(max, Math.max(min, value))\n\n if (!(step > 0)) {\n return clamped\n }\n\n const snapped = min + Math.round((clamped - min) / step) * step\n const bounded = Math.min(max, Math.max(min, snapped))\n const decimals = (String(step).split('.')[1] ?? '').length\n\n return decimals > 0 ? Number(bounded.toFixed(decimals)) : bounded\n}\n\nfunction matchValueShape(\n next: number | readonly number[],\n current: SliderValue,\n): SliderValue {\n const nextValues = typeof next === 'number' ? [next] : [...next]\n if (Array.isArray(current)) {\n return nextValues\n }\n return nextValues[0] ?? current\n}\n\n/**\n * Base UI's slider context is internal-only (not re-exported from\n * `@base-ui/react/slider`), so the editable `<SliderInput>` can't read the\n * current value from it. Instead `<Slider>` owns the value (controllable) and\n * shares it through this Spark context — keeping direct-input robust against\n * Base UI internal changes and letting inputs live anywhere in the subtree.\n */\ntype SliderContextValue = {\n values: readonly number[]\n min: number\n max: number\n step: number\n disabled: boolean\n /**\n * Write one thumb's value (from a `SliderInput`). Snaps to the step grid and\n * clamps; range values are kept sorted. Fires `onValueChange` only when the\n * value actually changes. When `commit` is set it also fires `onValueCommitted`\n * — but only if the committed value differs from `commitBaseline` (the value\n * when editing began), so a plain focus→blur never emits a spurious commit.\n */\n setThumbValue: (\n index: number,\n next: number,\n options?: { commit?: boolean; commitBaseline?: number },\n ) => void\n}\n\nconst SliderContext = React.createContext<SliderContextValue | null>(null)\n\nfunction useSliderContext(part: string): SliderContextValue {\n const ctx = React.useContext(SliderContext)\n\n if (!ctx) {\n throw new Error(`<${part}> must be rendered inside <Slider>`)\n }\n\n return ctx\n}\n\ntype SliderProps<Value extends SliderValue = SliderValue> = Omit<\n React.ComponentProps<typeof BaseSlider.Root>,\n 'value' | 'defaultValue' | 'onValueChange' | 'onValueCommitted' | 'render'\n> & {\n value?: Value\n defaultValue?: Value\n // Generic over the value shape: a single `number` keeps single-thumb handlers\n // number-typed, an array keeps range handlers array-typed — so callers don't\n // widen/narrow at every call site.\n onValueChange?: (\n value: Value,\n eventDetails: BaseSlider.Root.ChangeEventDetails,\n ) => void\n onValueCommitted?: (\n value: Value,\n eventDetails: BaseSlider.Root.CommitEventDetails,\n ) => void\n /**\n * `ticks` marks each step with a small dot on the rail — light on the accent\n * fill, neutral on the unfilled rail. Needs a sensible `step`; the dots are\n * hidden when the step count is < 2 or exceeds {@link MAX_TICKS}, and (in the\n * default render) for vertical sliders. Default `default`.\n */\n variant?: SliderVariant\n}\n\n/**\n * Root. Owns the value (controlled via `value` or uncontrolled via\n * `defaultValue`) and provides the Spark context. With no children it renders\n * the default single/range track (a childless-default, matching the library's\n * `*Close` idiom); pass children to compose `SliderInput` / `SliderValue` /\n * `SliderControl` yourself.\n */\nfunction Slider<Value extends SliderValue = SliderValue>({\n className,\n children,\n value,\n defaultValue,\n min = 0,\n max = 100,\n step = 1,\n disabled = false,\n orientation = 'horizontal',\n variant = 'default',\n onValueChange,\n onValueCommitted,\n // Radix positioned thumbs edge-aligned (inset within the track at min/max);\n // Base UI defaults to center-aligned (half the thumb overflows). `edge` keeps\n // the classic look and the thumb inside the rail.\n thumbAlignment = 'edge',\n // The accessible name belongs on the thumb's nested range input, not just the\n // Root — so keep it on the Root (names the group) AND forward it to the\n // childless-default thumb(s). When you compose your own thumbs, label them.\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n ...props\n}: SliderProps<Value>) {\n const isControlled = value !== undefined\n const [uncontrolled, setUncontrolled] = React.useState<SliderValue>(\n defaultValue ?? min,\n )\n const current = (isControlled ? value : uncontrolled) as SliderValue\n const values = React.useMemo(\n () => (Array.isArray(current) ? current : [current]),\n [current],\n )\n\n // Base UI hands back `number | readonly number[]`; we forward it as the\n // caller's `Value` (the runtime shape matches what they passed in).\n const emitChange = (\n next: number | readonly number[],\n eventDetails: BaseSlider.Root.ChangeEventDetails,\n ) => {\n const shaped = matchValueShape(next, current) as Value\n\n if (!isControlled) {\n setUncontrolled(shaped as SliderValue)\n }\n\n onValueChange?.(shaped, eventDetails)\n }\n\n // The direct-input write path. Snaps + clamps; for a range it swaps one thumb\n // and re-sorts (Base UI renders from a sorted copy, so an unsorted write would\n // desync the inputs from the thumbs). Fires onValueChange only on a real\n // change; fires onValueCommitted only when the committed value moved off the\n // pre-edit baseline.\n const setThumbValue = (\n index: number,\n next: number,\n options?: { commit?: boolean; commitBaseline?: number },\n ) => {\n const snapped = snapToStep(next, min, max, step)\n const wasArray = Array.isArray(current)\n let nextValue: SliderValue\n\n if (wasArray) {\n const copy = [...(current as number[])]\n copy[index] = snapped\n copy.sort((a, b) => a - b)\n nextValue = copy\n } else {\n nextValue = snapped\n }\n\n const changed = wasArray\n ? (nextValue as number[]).some((v, i) => v !== (current as number[])[i])\n : nextValue !== current\n\n // input-driven changes have no pointer/keyboard event; Base UI's own detail\n // object isn't constructible here, so we hand the consumer a minimal one.\n const details = {\n reason: 'input-change',\n } as unknown as BaseSlider.Root.ChangeEventDetails\n\n if (changed) {\n emitChange(nextValue, details)\n }\n\n if (options?.commit) {\n const committedChanged =\n options.commitBaseline === undefined\n ? changed\n : snapped !== options.commitBaseline\n\n if (committedChanged) {\n onValueCommitted?.(\n nextValue as Value,\n details as unknown as BaseSlider.Root.CommitEventDetails,\n )\n }\n }\n }\n\n // Rebuilt each render (cheap — <Slider> only re-renders on a value change) so\n // setThumbValue always closes over the current value + latest callbacks.\n const context: SliderContextValue = {\n values,\n min,\n max,\n step,\n disabled,\n setThumbValue,\n }\n\n // ticks are horizontal-only in the default render; SliderTicks self-hides when\n // the step count isn't countable, so no density check is needed here.\n const showTicks = variant === 'ticks' && orientation === 'horizontal'\n\n return (\n <SliderContext.Provider value={context}>\n <BaseSlider.Root\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n data-slot=\"slider\"\n value={current}\n min={min}\n max={max}\n step={step}\n disabled={disabled}\n orientation={orientation}\n thumbAlignment={thumbAlignment}\n onValueChange={emitChange}\n onValueCommitted={(next, eventDetails) =>\n onValueCommitted?.(\n matchValueShape(next, current) as Value,\n eventDetails,\n )\n }\n className={cn(\n 'relative flex w-full flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-row',\n className,\n )}\n {...props}\n >\n {children ?? (\n <SliderControl>\n <SliderTrack>\n <SliderIndicator />\n {showTicks ? <SliderTicks /> : null}\n {values.map((_, index) => (\n <SliderThumb\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n index={values.length > 1 ? index : undefined}\n key={index}\n />\n ))}\n </SliderTrack>\n </SliderControl>\n )}\n </BaseSlider.Root>\n </SliderContext.Provider>\n )\n}\n\nSlider.displayName = 'Slider'\n\n/**\n * The interactive, draggable surface. A pointer-press anywhere on it moves the\n * nearest thumb (Base UI's track-press), so its full band is the target — kept\n * at ≥24px tall (WCAG 2.5.8) with the thin rail centered.\n */\nfunction SliderControl({\n className,\n ...props\n}: React.ComponentProps<typeof BaseSlider.Control>) {\n return (\n <BaseSlider.Control\n data-slot=\"slider-control\"\n className={cn(\n 'group/slider touch-target relative flex min-h-6 w-full touch-none items-center select-none',\n 'data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center',\n 'data-disabled:pointer-events-none data-disabled:opacity-50',\n className,\n )}\n {...props}\n />\n )\n}\n\nSliderControl.displayName = 'SliderControl'\n\n/** The rail — the full extent, neutral at rest. Holds the Indicator + Thumb(s). */\nfunction SliderTrack({\n className,\n ...props\n}: React.ComponentProps<typeof BaseSlider.Track>) {\n return (\n <BaseSlider.Track\n data-slot=\"slider-track\"\n className={cn(\n // 12px rail so the corner radius is legible; follows the [data-radius] knob\n // (square at none → pill at large/full). no overflow-hidden: the thumb is a\n // child and would be clipped.\n 'relative h-3 w-full rounded-(--spark-rounded-sm) bg-gray-a4',\n 'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3',\n className,\n )}\n {...props}\n />\n )\n}\n\nSliderTrack.displayName = 'SliderTrack'\n\n/** The filled portion (min → thumb). Accent, deepens in high-contrast. */\nfunction SliderIndicator({\n className,\n ...props\n}: React.ComponentProps<typeof BaseSlider.Indicator>) {\n return (\n <BaseSlider.Indicator\n data-slot=\"slider-indicator\"\n className={cn(\n // matches the rail's radius so the fill's corners track the knob too\n 'rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))',\n // ease only while focused (keyboard/rail-click); programmatic and\n // initial value sets snap instantly instead of sweeping from 0.\n // transition-none base matters: bare duration-150 leaves property=all\n 'transition-none duration-150 group-focus-within/slider:transition-[width,height,inset-inline-start] data-dragging:transition-none motion-reduce:transition-none',\n className,\n )}\n {...props}\n />\n )\n}\n\nSliderIndicator.displayName = 'SliderIndicator'\n\n/**\n * Step tick dots overlaid on the rail (shown when `variant=\"ticks\"`). A dot at\n * each interior step — light (`--spark-slider-tick-on`, on the accent fill) for\n * steps up to the value, neutral gray beyond it. The endpoints are omitted (they\n * sit under the rounded rail ends / the thumb). Self-guards: draws nothing unless\n * the step count is in `[2, MAX_TICKS]`, so it's safe to compose directly.\n * Decorative + pointer-transparent so it never blocks a track-press. (Horizontal\n * orientation.)\n */\nfunction SliderTicks({ className, ...props }: React.ComponentProps<'div'>) {\n const { min, max, step, values } = useSliderContext('SliderTicks')\n\n if (!(step > 0) || max <= min) {\n return null\n }\n\n // count the reachable step intervals (floor, so a non-dividing step still gets\n // a dot on its last reachable step); drop the final one when it lands on max.\n const intervals = Math.floor((max - min) / step)\n\n if (intervals < 2 || intervals > MAX_TICKS) {\n return null\n }\n\n const lastIsEndpoint = min + intervals * step === max\n const dotCount = lastIsEndpoint ? intervals - 1 : intervals\n\n // Active band: [min, value] for a single thumb, [low, high] for a range.\n const bandLow = values.length > 1 ? Math.min(...values) : min\n const bandHigh = values.length > 1 ? Math.max(...values) : (values[0] ?? min)\n\n return (\n <div\n aria-hidden=\"true\"\n className={cn('pointer-events-none absolute inset-0', className)}\n data-slot=\"slider-ticks\"\n {...props}\n >\n {Array.from({ length: dotCount }, (_, k) => {\n const index = k + 1 // interior steps only (skip the two endpoints)\n const position = min + index * step\n const pct = ((position - min) / (max - min)) * 100\n const filled = position >= bandLow && position <= bandHigh\n\n return (\n <span\n className={cn(\n 'absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full',\n // light dot on the accent fill (flips to step-1 in HC via the token);\n // neutral gray dot on the unfilled rail.\n filled\n ? 'bg-(--spark-slider-tick-on,var(--spark-on-solid,#fff))'\n : 'bg-gray-a8',\n )}\n key={index}\n style={{ left: `${pct}%` }}\n />\n )\n })}\n </div>\n )\n}\n\nSliderTicks.displayName = 'SliderTicks'\n\nfunction SliderThumb({\n className,\n ...props\n}: React.ComponentProps<typeof BaseSlider.Thumb>) {\n return (\n <BaseSlider.Thumb\n data-slot=\"slider-thumb\"\n className={cn(\n 'block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))',\n 'shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]',\n \"before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n 'outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2',\n 'data-dragging:ring-2 data-dragging:ring-offset-2',\n 'transition-shadow duration-150 group-focus-within/slider:transition-[inset-inline-start,top,box-shadow] data-dragging:transition-none motion-reduce:transition-none',\n 'disabled:pointer-events-none',\n className,\n )}\n {...props}\n />\n )\n}\n\nSliderThumb.displayName = 'SliderThumb'\n\nfunction SliderValue({\n className,\n ...props\n}: React.ComponentProps<typeof BaseSlider.Value>) {\n return (\n <BaseSlider.Value\n data-slot=\"slider-value\"\n className={cn('text-sm text-gray tabular-nums', className)}\n {...props}\n />\n )\n}\n\nSliderValue.displayName = 'SliderValue'\n\ntype SliderInputProps = Omit<\n React.ComponentProps<'input'>,\n 'value' | 'defaultValue' | 'type' | 'onChange' | 'min' | 'max' | 'step'\n> & {\n /** Which thumb this input drives on a range slider. Defaults to 0. */\n index?: number\n /** Unit rendered after the field (e.g. \"€/month\"). Consumer-supplied — no default. */\n unit?: React.ReactNode\n}\n\n/**\n * Accessible direct-input — a native number field synced to a thumb's value, so\n * a user can type an exact value instead of dragging (or in addition to it).\n * Needs an accessible name: pass `aria-label` (no built-in default — portals are\n * multi-language). While typing it live-updates the thumb only for values already\n * in range (no mid-keystroke jump to the min/max); it snaps + clamps on\n * blur/Enter. `onFocus`/`onBlur`/`onKeyDown` you pass are composed with the\n * internal handlers, not replaced.\n */\nfunction SliderInput({\n className,\n index = 0,\n unit,\n disabled,\n onFocus,\n onBlur,\n onKeyDown,\n ...props\n}: SliderInputProps) {\n const ctx = useSliderContext('SliderInput')\n const currentValue = ctx.values[index] ?? ctx.min\n const [draft, setDraft] = React.useState<string>(String(currentValue))\n const [editing, setEditing] = React.useState(false)\n // the thumb value when editing began — commit fires only if it moved off this\n const baselineRef = React.useRef(currentValue)\n\n // Keep the field in sync when the value changes elsewhere (drag/keyboard),\n // but never fight the user's in-progress typing.\n React.useEffect(() => {\n if (!editing) {\n setDraft(String(currentValue))\n }\n }, [currentValue, editing])\n\n const parseInput = (raw: string): number | null => {\n if (raw.trim() === '') {\n return null\n }\n\n const parsed = Number(raw)\n\n return Number.isNaN(parsed) ? null : parsed\n }\n\n const commit = () => {\n const parsed = parseInput(draft)\n\n if (parsed === null) {\n setDraft(String(currentValue)) // reset an empty/invalid entry\n return\n }\n\n ctx.setThumbValue(index, parsed, {\n commit: true,\n commitBaseline: baselineRef.current,\n })\n }\n\n return (\n <span\n data-slot=\"slider-input\"\n className={cn('inline-flex items-baseline gap-1', className)}\n >\n <input\n type=\"number\"\n inputMode=\"decimal\"\n min={ctx.min}\n max={ctx.max}\n step={ctx.step}\n disabled={disabled ?? ctx.disabled}\n value={editing ? draft : String(currentValue)}\n onChange={(event) => {\n const raw = event.target.value\n setDraft(raw)\n const parsed = parseInput(raw)\n\n // live-update the thumb only when the typed value is already in range,\n // so a partial entry (e.g. \"7\" en route to \"75\") doesn't snap the thumb\n // to the min mid-keystroke. Out-of-range values clamp on blur/Enter.\n if (parsed !== null && parsed >= ctx.min && parsed <= ctx.max) {\n ctx.setThumbValue(index, parsed)\n }\n }}\n onFocus={(event) => {\n baselineRef.current = ctx.values[index] ?? ctx.min\n setEditing(true)\n onFocus?.(event)\n }}\n onBlur={(event) => {\n setEditing(false)\n commit()\n onBlur?.(event)\n }}\n onKeyDown={(event) => {\n // Enter blurs, and the single onBlur commit runs — no double-commit.\n if (event.key === 'Enter') {\n event.currentTarget.blur()\n }\n\n onKeyDown?.(event)\n }}\n className={cn(\n 'w-16 bg-transparent tabular-nums outline-hidden',\n 'rounded-(--spark-rounded-sm) focus-visible:ring-2 focus-visible:ring-offset-2',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n // hide the native spinners — the slider is the primary affordance\n '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n )}\n {...props}\n />\n {unit ? (\n <span className=\"text-sm text-gray\" data-slot=\"slider-unit\">\n {unit}\n </span>\n ) : null}\n </span>\n )\n}\n\nSliderInput.displayName = 'SliderInput'\n\nexport {\n Slider,\n SliderControl,\n SliderIndicator,\n SliderInput,\n SliderThumb,\n SliderTicks,\n SliderTrack,\n SliderValue,\n}\nexport type { SliderInputProps, SliderProps, SliderVariant }\n"],"mappings":"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"}
1
+ {"version":3,"file":"slider.cjs","names":["React","BaseSlider"],"sources":["../../src/components/slider.tsx"],"sourcesContent":["import { Slider as BaseSlider } from '@base-ui/react/slider'\nimport * as React from 'react'\nimport { cn } from '../utils/cn'\n\ntype SliderValue = number | number[]\n\ntype SliderVariant = 'default' | 'ticks'\n\n// Above this many steps the tick dots become a picket fence, so `variant=\"ticks\"`\n// silently stops drawing them (the continuous rail stays).\nconst MAX_TICKS = 24\n\n// Clamp to [min, max] then snap to the step grid (origin = min), trimming float\n// noise to the step's own decimal precision. `max` is always valid even if it\n// isn't a step multiple (matches Base UI).\nfunction snapToStep(\n value: number,\n min: number,\n max: number,\n step: number,\n): number {\n const clamped = Math.min(max, Math.max(min, value))\n\n if (!(step > 0)) {\n return clamped\n }\n\n const snapped = min + Math.round((clamped - min) / step) * step\n const bounded = Math.min(max, Math.max(min, snapped))\n const decimals = (String(step).split('.')[1] ?? '').length\n\n return decimals > 0 ? Number(bounded.toFixed(decimals)) : bounded\n}\n\nfunction matchValueShape(\n next: number | readonly number[],\n current: SliderValue,\n): SliderValue {\n const nextValues = typeof next === 'number' ? [next] : [...next]\n if (Array.isArray(current)) {\n return nextValues\n }\n return nextValues[0] ?? current\n}\n\n/**\n * Base UI's slider context is internal-only (not re-exported from\n * `@base-ui/react/slider`), so the editable `<SliderInput>` can't read the\n * current value from it. Instead `<Slider>` owns the value (controllable) and\n * shares it through this Spark context — keeping direct-input robust against\n * Base UI internal changes and letting inputs live anywhere in the subtree.\n */\ntype SliderContextValue = {\n values: readonly number[]\n min: number\n max: number\n step: number\n disabled: boolean\n /**\n * Write one thumb's value (from a `SliderInput`). Snaps to the step grid and\n * clamps; range values are kept sorted. Fires `onValueChange` only when the\n * value actually changes. When `commit` is set it also fires `onValueCommitted`\n * — but only if the committed value differs from `commitBaseline` (the value\n * when editing began), so a plain focus→blur never emits a spurious commit.\n */\n setThumbValue: (\n index: number,\n next: number,\n options?: { commit?: boolean; commitBaseline?: number },\n ) => void\n}\n\nconst SliderContext = React.createContext<SliderContextValue | null>(null)\n\nfunction useSliderContext(part: string): SliderContextValue {\n const ctx = React.useContext(SliderContext)\n\n if (!ctx) {\n throw new Error(`<${part}> must be rendered inside <Slider>`)\n }\n\n return ctx\n}\n\ntype SliderProps<Value extends SliderValue = SliderValue> = Omit<\n React.ComponentProps<typeof BaseSlider.Root>,\n 'value' | 'defaultValue' | 'onValueChange' | 'onValueCommitted' | 'render'\n> & {\n value?: Value\n defaultValue?: Value\n // Generic over the value shape: a single `number` keeps single-thumb handlers\n // number-typed, an array keeps range handlers array-typed — so callers don't\n // widen/narrow at every call site.\n onValueChange?: (\n value: Value,\n eventDetails: BaseSlider.Root.ChangeEventDetails,\n ) => void\n onValueCommitted?: (\n value: Value,\n eventDetails: BaseSlider.Root.CommitEventDetails,\n ) => void\n /**\n * `ticks` marks each step with a small dot on the rail — light on the accent\n * fill, neutral on the unfilled rail. Needs a sensible `step`; the dots are\n * hidden when the step count is < 2 or exceeds {@link MAX_TICKS}, and (in the\n * default render) for vertical sliders. Default `default`.\n */\n variant?: SliderVariant\n}\n\n/**\n * Root. Owns the value (controlled via `value` or uncontrolled via\n * `defaultValue`) and provides the Spark context. With no children it renders\n * the default single/range track (a childless-default, matching the library's\n * `*Close` idiom); pass children to compose `SliderInput` / `SliderValue` /\n * `SliderControl` yourself.\n */\nfunction Slider<Value extends SliderValue = SliderValue>({\n className,\n children,\n value,\n defaultValue,\n min = 0,\n max = 100,\n step = 1,\n disabled = false,\n orientation = 'horizontal',\n variant = 'default',\n onValueChange,\n onValueCommitted,\n // Radix positioned thumbs edge-aligned (inset within the track at min/max);\n // Base UI defaults to center-aligned (half the thumb overflows). `edge` keeps\n // the classic look and the thumb inside the rail.\n thumbAlignment = 'edge',\n // The accessible name belongs on the thumb's nested range input, not just the\n // Root — so keep it on the Root (names the group) AND forward it to the\n // childless-default thumb(s). When you compose your own thumbs, label them.\n 'aria-label': ariaLabel,\n 'aria-labelledby': ariaLabelledby,\n ...props\n}: SliderProps<Value>) {\n const isControlled = value !== undefined\n const [uncontrolled, setUncontrolled] = React.useState<SliderValue>(\n defaultValue ?? min,\n )\n const current = (isControlled ? value : uncontrolled) as SliderValue\n const values = React.useMemo(\n () => (Array.isArray(current) ? current : [current]),\n [current],\n )\n\n // Base UI hands back `number | readonly number[]`; we forward it as the\n // caller's `Value` (the runtime shape matches what they passed in).\n const emitChange = (\n next: number | readonly number[],\n eventDetails: BaseSlider.Root.ChangeEventDetails,\n ) => {\n const shaped = matchValueShape(next, current) as Value\n\n if (!isControlled) {\n setUncontrolled(shaped as SliderValue)\n }\n\n onValueChange?.(shaped, eventDetails)\n }\n\n // The direct-input write path. Snaps + clamps; for a range it swaps one thumb\n // and re-sorts (Base UI renders from a sorted copy, so an unsorted write would\n // desync the inputs from the thumbs). Fires onValueChange only on a real\n // change; fires onValueCommitted only when the committed value moved off the\n // pre-edit baseline.\n const setThumbValue = (\n index: number,\n next: number,\n options?: { commit?: boolean; commitBaseline?: number },\n ) => {\n const snapped = snapToStep(next, min, max, step)\n const wasArray = Array.isArray(current)\n let nextValue: SliderValue\n\n if (wasArray) {\n const copy = [...(current as number[])]\n copy[index] = snapped\n copy.sort((a, b) => a - b)\n nextValue = copy\n } else {\n nextValue = snapped\n }\n\n const changed = wasArray\n ? (nextValue as number[]).some((v, i) => v !== (current as number[])[i])\n : nextValue !== current\n\n // input-driven changes have no pointer/keyboard event; Base UI's own detail\n // object isn't constructible here, so we hand the consumer a minimal one.\n const details = {\n reason: 'input-change',\n } as unknown as BaseSlider.Root.ChangeEventDetails\n\n if (changed) {\n emitChange(nextValue, details)\n }\n\n if (options?.commit) {\n const committedChanged =\n options.commitBaseline === undefined\n ? changed\n : snapped !== options.commitBaseline\n\n if (committedChanged) {\n onValueCommitted?.(\n nextValue as Value,\n details as unknown as BaseSlider.Root.CommitEventDetails,\n )\n }\n }\n }\n\n // Rebuilt each render (cheap — <Slider> only re-renders on a value change) so\n // setThumbValue always closes over the current value + latest callbacks.\n const context: SliderContextValue = {\n values,\n min,\n max,\n step,\n disabled,\n setThumbValue,\n }\n\n // ticks are horizontal-only in the default render; SliderTicks self-hides when\n // the step count isn't countable, so no density check is needed here.\n const showTicks = variant === 'ticks' && orientation === 'horizontal'\n\n return (\n <SliderContext.Provider value={context}>\n <BaseSlider.Root\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n data-slot=\"slider\"\n value={current}\n min={min}\n max={max}\n step={step}\n disabled={disabled}\n orientation={orientation}\n thumbAlignment={thumbAlignment}\n onValueChange={emitChange}\n onValueCommitted={(next, eventDetails) =>\n onValueCommitted?.(\n matchValueShape(next, current) as Value,\n eventDetails,\n )\n }\n className={cn(\n 'relative flex w-full flex-col gap-2 data-[orientation=vertical]:h-full data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-row',\n className,\n )}\n {...props}\n >\n {children ?? (\n <SliderControl>\n <SliderTrack>\n <SliderIndicator />\n {showTicks ? <SliderTicks /> : null}\n {values.map((_, index) => (\n <SliderThumb\n aria-label={ariaLabel}\n aria-labelledby={ariaLabelledby}\n index={values.length > 1 ? index : undefined}\n // oxlint-disable-next-line react/no-array-index-key -- Base UI identifies thumbs by their index\n key={index}\n />\n ))}\n </SliderTrack>\n </SliderControl>\n )}\n </BaseSlider.Root>\n </SliderContext.Provider>\n )\n}\n\nSlider.displayName = 'Slider'\n\n/**\n * The interactive, draggable surface. A pointer-press anywhere on it moves the\n * nearest thumb (Base UI's track-press), so its full band is the target — kept\n * at ≥24px tall (WCAG 2.5.8) with the thin rail centered.\n */\nfunction SliderControl({\n className,\n ...props\n}: React.ComponentProps<typeof BaseSlider.Control>) {\n return (\n <BaseSlider.Control\n data-slot=\"slider-control\"\n className={cn(\n 'group/slider touch-target relative flex min-h-6 w-full touch-none items-center select-none',\n 'data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-6 data-[orientation=vertical]:justify-center',\n 'data-disabled:pointer-events-none data-disabled:opacity-50',\n className,\n )}\n {...props}\n />\n )\n}\n\nSliderControl.displayName = 'SliderControl'\n\n/** The rail — the full extent, neutral at rest. Holds the Indicator + Thumb(s). */\nfunction SliderTrack({\n className,\n ...props\n}: React.ComponentProps<typeof BaseSlider.Track>) {\n return (\n <BaseSlider.Track\n data-slot=\"slider-track\"\n className={cn(\n // 12px rail so the corner radius is legible; follows the [data-radius] knob\n // (square at none → pill at large/full). no overflow-hidden: the thumb is a\n // child and would be clipped.\n 'relative h-3 w-full rounded-(--spark-rounded-sm) bg-gray-a4',\n 'data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3',\n className,\n )}\n {...props}\n />\n )\n}\n\nSliderTrack.displayName = 'SliderTrack'\n\n/** The filled portion (min → thumb). Accent, deepens in high-contrast. */\nfunction SliderIndicator({\n className,\n ...props\n}: React.ComponentProps<typeof BaseSlider.Indicator>) {\n return (\n <BaseSlider.Indicator\n data-slot=\"slider-indicator\"\n className={cn(\n // matches the rail's radius so the fill's corners track the knob too\n 'rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))',\n // ease only while focused (keyboard/rail-click); programmatic and\n // initial value sets snap instantly instead of sweeping from 0.\n // transition-none base matters: bare duration-150 leaves property=all\n 'transition-none duration-150 group-focus-within/slider:transition-[width,height,inset-inline-start] data-dragging:transition-none motion-reduce:transition-none',\n className,\n )}\n {...props}\n />\n )\n}\n\nSliderIndicator.displayName = 'SliderIndicator'\n\n/**\n * Step tick dots overlaid on the rail (shown when `variant=\"ticks\"`). A dot at\n * each interior step — light (`--spark-slider-tick-on`, on the accent fill) for\n * steps up to the value, neutral gray beyond it. The endpoints are omitted (they\n * sit under the rounded rail ends / the thumb). Self-guards: draws nothing unless\n * the step count is in `[2, MAX_TICKS]`, so it's safe to compose directly.\n * Decorative + pointer-transparent so it never blocks a track-press. (Horizontal\n * orientation.)\n */\nfunction SliderTicks({ className, ...props }: React.ComponentProps<'div'>) {\n const { min, max, step, values } = useSliderContext('SliderTicks')\n\n if (!(step > 0) || max <= min) {\n return null\n }\n\n // count the reachable step intervals (floor, so a non-dividing step still gets\n // a dot on its last reachable step); drop the final one when it lands on max.\n const intervals = Math.floor((max - min) / step)\n\n if (intervals < 2 || intervals > MAX_TICKS) {\n return null\n }\n\n const lastIsEndpoint = min + intervals * step === max\n const dotCount = lastIsEndpoint ? intervals - 1 : intervals\n\n // Active band: [min, value] for a single thumb, [low, high] for a range.\n const bandLow = values.length > 1 ? Math.min(...values) : min\n const bandHigh = values.length > 1 ? Math.max(...values) : (values[0] ?? min)\n\n return (\n <div\n aria-hidden=\"true\"\n className={cn('pointer-events-none absolute inset-0', className)}\n data-slot=\"slider-ticks\"\n {...props}\n >\n {Array.from({ length: dotCount }, (_, k) => {\n const index = k + 1 // interior steps only (skip the two endpoints)\n const position = min + index * step\n const pct = ((position - min) / (max - min)) * 100\n const filled = position >= bandLow && position <= bandHigh\n\n return (\n <span\n className={cn(\n 'absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full',\n // light dot on the accent fill (flips to step-1 in HC via the token);\n // neutral gray dot on the unfilled rail.\n filled\n ? 'bg-(--spark-slider-tick-on,var(--spark-on-solid,#fff))'\n : 'bg-gray-a8',\n )}\n key={index}\n style={{ left: `${pct}%` }}\n />\n )\n })}\n </div>\n )\n}\n\nSliderTicks.displayName = 'SliderTicks'\n\nfunction SliderThumb({\n className,\n ...props\n}: React.ComponentProps<typeof BaseSlider.Thumb>) {\n return (\n <BaseSlider.Thumb\n data-slot=\"slider-thumb\"\n className={cn(\n 'block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))',\n 'shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]',\n \"before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']\",\n 'outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2',\n 'data-dragging:ring-2 data-dragging:ring-offset-2',\n 'transition-shadow duration-150 group-focus-within/slider:transition-[inset-inline-start,top,box-shadow] data-dragging:transition-none motion-reduce:transition-none',\n 'disabled:pointer-events-none',\n className,\n )}\n {...props}\n />\n )\n}\n\nSliderThumb.displayName = 'SliderThumb'\n\nfunction SliderValue({\n className,\n ...props\n}: React.ComponentProps<typeof BaseSlider.Value>) {\n return (\n <BaseSlider.Value\n data-slot=\"slider-value\"\n className={cn('text-sm text-gray tabular-nums', className)}\n {...props}\n />\n )\n}\n\nSliderValue.displayName = 'SliderValue'\n\ntype SliderInputProps = Omit<\n React.ComponentProps<'input'>,\n 'value' | 'defaultValue' | 'type' | 'onChange' | 'min' | 'max' | 'step'\n> & {\n /** Which thumb this input drives on a range slider. Defaults to 0. */\n index?: number\n /** Unit rendered after the field (e.g. \"€/month\"). Consumer-supplied — no default. */\n unit?: React.ReactNode\n}\n\n/**\n * Accessible direct-input — a native number field synced to a thumb's value, so\n * a user can type an exact value instead of dragging (or in addition to it).\n * Needs an accessible name: pass `aria-label` (no built-in default — portals are\n * multi-language). While typing it live-updates the thumb only for values already\n * in range (no mid-keystroke jump to the min/max); it snaps + clamps on\n * blur/Enter. `onFocus`/`onBlur`/`onKeyDown` you pass are composed with the\n * internal handlers, not replaced.\n */\nfunction SliderInput({\n className,\n index = 0,\n unit,\n disabled,\n onFocus,\n onBlur,\n onKeyDown,\n ...props\n}: SliderInputProps) {\n const ctx = useSliderContext('SliderInput')\n const currentValue = ctx.values[index] ?? ctx.min\n const [draft, setDraft] = React.useState<string>(String(currentValue))\n const [editing, setEditing] = React.useState(false)\n // the thumb value when editing began — commit fires only if it moved off this\n const baselineRef = React.useRef(currentValue)\n\n // Keep the field in sync when the value changes elsewhere (drag/keyboard),\n // but never fight the user's in-progress typing.\n React.useEffect(() => {\n if (!editing) {\n setDraft(String(currentValue))\n }\n }, [currentValue, editing])\n\n const parseInput = (raw: string): number | null => {\n if (raw.trim() === '') {\n return null\n }\n\n const parsed = Number(raw)\n\n return Number.isNaN(parsed) ? null : parsed\n }\n\n const commit = () => {\n const parsed = parseInput(draft)\n\n if (parsed === null) {\n setDraft(String(currentValue)) // reset an empty/invalid entry\n return\n }\n\n ctx.setThumbValue(index, parsed, {\n commit: true,\n commitBaseline: baselineRef.current,\n })\n }\n\n return (\n <span\n data-slot=\"slider-input\"\n className={cn('inline-flex items-baseline gap-1', className)}\n >\n <input\n type=\"number\"\n inputMode=\"decimal\"\n min={ctx.min}\n max={ctx.max}\n step={ctx.step}\n disabled={disabled ?? ctx.disabled}\n value={editing ? draft : String(currentValue)}\n onChange={(event) => {\n const raw = event.target.value\n setDraft(raw)\n const parsed = parseInput(raw)\n\n // live-update the thumb only when the typed value is already in range,\n // so a partial entry (e.g. \"7\" en route to \"75\") doesn't snap the thumb\n // to the min mid-keystroke. Out-of-range values clamp on blur/Enter.\n if (parsed !== null && parsed >= ctx.min && parsed <= ctx.max) {\n ctx.setThumbValue(index, parsed)\n }\n }}\n onFocus={(event) => {\n baselineRef.current = ctx.values[index] ?? ctx.min\n setEditing(true)\n onFocus?.(event)\n }}\n onBlur={(event) => {\n setEditing(false)\n commit()\n onBlur?.(event)\n }}\n onKeyDown={(event) => {\n // Enter blurs, and the single onBlur commit runs — no double-commit.\n if (event.key === 'Enter') {\n event.currentTarget.blur()\n }\n\n onKeyDown?.(event)\n }}\n className={cn(\n 'w-16 bg-transparent tabular-nums outline-hidden',\n 'rounded-(--spark-rounded-sm) focus-visible:ring-2 focus-visible:ring-offset-2',\n 'disabled:cursor-not-allowed disabled:opacity-50',\n // hide the native spinners — the slider is the primary affordance\n '[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n )}\n {...props}\n />\n {unit ? (\n <span className=\"text-sm text-gray\" data-slot=\"slider-unit\">\n {unit}\n </span>\n ) : null}\n </span>\n )\n}\n\nSliderInput.displayName = 'SliderInput'\n\nexport {\n Slider,\n SliderControl,\n SliderIndicator,\n SliderInput,\n SliderThumb,\n SliderTicks,\n SliderTrack,\n SliderValue,\n}\nexport type { SliderInputProps, SliderProps, SliderVariant }\n"],"mappings":"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"}