@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.
- package/dist/components/accordion.cjs +7 -7
- package/dist/components/accordion.cjs.map +1 -1
- package/dist/components/accordion.d.ts +1 -1
- package/dist/components/accordion.js +1 -1
- package/dist/components/alert-dialog.cjs +10 -10
- package/dist/components/alert-dialog.cjs.map +1 -1
- package/dist/components/alert-dialog.js +1 -1
- package/dist/components/attachment.cjs +10 -10
- package/dist/components/attachment.cjs.map +1 -1
- package/dist/components/attachment.d.cts +2 -2
- package/dist/components/attachment.d.ts +2 -2
- package/dist/components/autocomplete.cjs +13 -13
- package/dist/components/autocomplete.cjs.map +1 -1
- package/dist/components/autocomplete.js +1 -1
- package/dist/components/avatar.cjs +2 -2
- package/dist/components/avatar.cjs.map +1 -1
- package/dist/components/avatar.js +1 -1
- package/dist/components/badge.cjs +2 -2
- package/dist/components/badge.cjs.map +1 -1
- package/dist/components/badge.js +2 -2
- package/dist/components/badge.js.map +1 -1
- package/dist/components/bar-chart-with-total.d.cts +1 -1
- package/dist/components/bar-chart-with-total.d.ts +1 -1
- package/dist/components/bar-chart.cjs +4 -4
- package/dist/components/bar-chart.cjs.map +1 -1
- package/dist/components/bar-chart.js +2 -2
- package/dist/components/bar-chart.js.map +1 -1
- package/dist/components/box.cjs +2 -2
- package/dist/components/box.cjs.map +1 -1
- package/dist/components/box.js +1 -1
- package/dist/components/breadcrumbs.cjs +7 -7
- package/dist/components/breadcrumbs.cjs.map +1 -1
- package/dist/components/bubble.cjs +5 -5
- package/dist/components/bubble.cjs.map +1 -1
- package/dist/components/bubble.d.cts +1 -1
- package/dist/components/bubble.d.ts +1 -1
- package/dist/components/button-group.cjs +5 -5
- package/dist/components/button-group.cjs.map +1 -1
- package/dist/components/button-group.js +1 -1
- package/dist/components/button.cjs +2 -2
- package/dist/components/button.cjs.map +1 -1
- package/dist/components/button.d.cts +3 -3
- package/dist/components/button.d.ts +3 -3
- package/dist/components/button.js +1 -1
- package/dist/components/button.js.map +1 -1
- package/dist/components/calendar.cjs +12 -11
- package/dist/components/calendar.cjs.map +1 -1
- package/dist/components/calendar.js +5 -4
- package/dist/components/calendar.js.map +1 -1
- package/dist/components/callout.cjs +8 -8
- package/dist/components/callout.cjs.map +1 -1
- package/dist/components/callout.d.ts +1 -1
- package/dist/components/callout.js +1 -1
- package/dist/components/card.cjs +16 -16
- package/dist/components/card.cjs.map +1 -1
- package/dist/components/card.js +2 -2
- package/dist/components/card.js.map +1 -1
- package/dist/components/chart.cjs +2 -2
- package/dist/components/chart.cjs.map +1 -1
- package/dist/components/checkbox.cjs +2 -2
- package/dist/components/checkbox.cjs.map +1 -1
- package/dist/components/checkbox.js +1 -1
- package/dist/components/checkbox.js.map +1 -1
- package/dist/components/circular-gauge.cjs +3 -3
- package/dist/components/circular-gauge.cjs.map +1 -1
- package/dist/components/circular-gauge.js +1 -1
- package/dist/components/circular-gauge.js.map +1 -1
- package/dist/components/day-of-week-picker.cjs +4 -4
- package/dist/components/day-of-week-picker.cjs.map +1 -1
- package/dist/components/dialog.cjs +9 -9
- package/dist/components/dialog.cjs.map +1 -1
- package/dist/components/dialog.js +1 -1
- package/dist/components/donut-chart.cjs.map +1 -1
- package/dist/components/donut-chart.js.map +1 -1
- package/dist/components/drawer.cjs +8 -8
- package/dist/components/drawer.cjs.map +1 -1
- package/dist/components/drawer.js +2 -2
- package/dist/components/drawer.js.map +1 -1
- package/dist/components/dropdown-menu.cjs +11 -11
- package/dist/components/dropdown-menu.cjs.map +1 -1
- package/dist/components/dropdown-menu.js +1 -1
- package/dist/components/empty-state.d.ts +1 -1
- package/dist/components/energy-breakdown.cjs +80 -0
- package/dist/components/energy-breakdown.cjs.map +1 -0
- package/dist/components/energy-breakdown.d.cts +24 -0
- package/dist/components/energy-breakdown.d.ts +24 -0
- package/dist/components/energy-breakdown.js +79 -0
- package/dist/components/energy-breakdown.js.map +1 -0
- package/dist/components/energy-history-chart.cjs +63 -0
- package/dist/components/energy-history-chart.cjs.map +1 -0
- package/dist/components/energy-history-chart.d.cts +64 -0
- package/dist/components/energy-history-chart.d.ts +64 -0
- package/dist/components/energy-history-chart.js +62 -0
- package/dist/components/energy-history-chart.js.map +1 -0
- package/dist/components/entity-card.cjs +11 -11
- package/dist/components/entity-card.cjs.map +1 -1
- package/dist/components/entity-card.d.ts +1 -1
- package/dist/components/field.cjs +16 -16
- package/dist/components/field.cjs.map +1 -1
- package/dist/components/field.js +1 -1
- package/dist/components/field.js.map +1 -1
- package/dist/components/hero-metric.cjs +4 -4
- package/dist/components/hero-metric.cjs.map +1 -1
- package/dist/components/icon.cjs +6 -6
- package/dist/components/icon.cjs.map +1 -1
- package/dist/components/icon.js +5 -5
- package/dist/components/icon.js.map +1 -1
- package/dist/components/info-block.cjs +9 -9
- package/dist/components/info-block.cjs.map +1 -1
- package/dist/components/info-block.d.cts +1 -1
- package/dist/components/info-block.d.ts +1 -1
- package/dist/components/input-date.cjs +5 -4
- package/dist/components/input-date.cjs.map +1 -1
- package/dist/components/input-date.d.cts +3 -1
- package/dist/components/input-date.d.ts +3 -1
- package/dist/components/input-date.js +3 -2
- package/dist/components/input-date.js.map +1 -1
- package/dist/components/input-group.cjs +5 -5
- package/dist/components/input-group.cjs.map +1 -1
- package/dist/components/input-otp.cjs +3 -3
- package/dist/components/input-otp.cjs.map +1 -1
- package/dist/components/input-otp.js +1 -1
- package/dist/components/input.cjs +3 -3
- package/dist/components/input.cjs.map +1 -1
- package/dist/components/input.js +1 -1
- package/dist/components/label.cjs +2 -2
- package/dist/components/label.cjs.map +1 -1
- package/dist/components/layout.cjs +2 -2
- package/dist/components/layout.cjs.map +1 -1
- package/dist/components/line-chart.cjs +7 -7
- package/dist/components/line-chart.cjs.map +1 -1
- package/dist/components/line-chart.js +5 -5
- package/dist/components/line-chart.js.map +1 -1
- package/dist/components/list.cjs +11 -11
- package/dist/components/list.cjs.map +1 -1
- package/dist/components/list.d.cts +7 -2
- package/dist/components/list.d.ts +7 -2
- package/dist/components/list.js +2 -2
- package/dist/components/list.js.map +1 -1
- package/dist/components/marker.cjs +4 -4
- package/dist/components/marker.cjs.map +1 -1
- package/dist/components/marker.d.cts +1 -1
- package/dist/components/marker.d.ts +1 -1
- package/dist/components/message-scroller.cjs +8 -8
- package/dist/components/message-scroller.cjs.map +1 -1
- package/dist/components/message-scroller.js +4 -4
- package/dist/components/message-scroller.js.map +1 -1
- package/dist/components/message.cjs +7 -7
- package/dist/components/message.cjs.map +1 -1
- package/dist/components/number-flow.d.cts +2 -12
- package/dist/components/number-flow.d.ts +2 -12
- package/dist/components/page-header.cjs +6 -6
- package/dist/components/page-header.cjs.map +1 -1
- package/dist/components/page-header.js +1 -1
- package/dist/components/period-tabs.cjs +6 -6
- package/dist/components/period-tabs.cjs.map +1 -1
- package/dist/components/pill.cjs +4 -4
- package/dist/components/pill.cjs.map +1 -1
- package/dist/components/pill.js +4 -4
- package/dist/components/pill.js.map +1 -1
- package/dist/components/popover.cjs +2 -2
- package/dist/components/popover.cjs.map +1 -1
- package/dist/components/power-history-chart.cjs +498 -0
- package/dist/components/power-history-chart.cjs.map +1 -0
- package/dist/components/power-history-chart.d.cts +71 -0
- package/dist/components/power-history-chart.d.ts +71 -0
- package/dist/components/power-history-chart.js +496 -0
- package/dist/components/power-history-chart.js.map +1 -0
- package/dist/components/power-network.cjs +559 -0
- package/dist/components/power-network.cjs.map +1 -0
- package/dist/components/power-network.d.cts +80 -0
- package/dist/components/power-network.d.ts +80 -0
- package/dist/components/power-network.js +553 -0
- package/dist/components/power-network.js.map +1 -0
- package/dist/components/progress.cjs +3 -3
- package/dist/components/progress.cjs.map +1 -1
- package/dist/components/progress.js +1 -1
- package/dist/components/progress.js.map +1 -1
- package/dist/components/radio-card-group.cjs +3 -3
- package/dist/components/radio-card-group.cjs.map +1 -1
- package/dist/components/radio.cjs +3 -3
- package/dist/components/radio.cjs.map +1 -1
- package/dist/components/radio.js +1 -1
- package/dist/components/sankey-chart.cjs +15 -5
- package/dist/components/sankey-chart.cjs.map +1 -1
- package/dist/components/sankey-chart.d.cts +3 -2
- package/dist/components/sankey-chart.d.ts +3 -2
- package/dist/components/sankey-chart.js +13 -4
- package/dist/components/sankey-chart.js.map +1 -1
- package/dist/components/schedule-editor.cjs +9 -9
- package/dist/components/schedule-editor.cjs.map +1 -1
- package/dist/components/schedule-list.cjs +11 -11
- package/dist/components/schedule-list.cjs.map +1 -1
- package/dist/components/schedule-list.js +1 -1
- package/dist/components/scroll-area.cjs +3 -3
- package/dist/components/scroll-area.cjs.map +1 -1
- package/dist/components/segmented-control.cjs +8 -8
- package/dist/components/segmented-control.cjs.map +1 -1
- package/dist/components/segmented-control.d.cts +2 -16
- package/dist/components/segmented-control.d.ts +2 -16
- package/dist/components/segmented-control.js +5 -5
- package/dist/components/segmented-control.js.map +1 -1
- package/dist/components/select.cjs +13 -13
- package/dist/components/select.cjs.map +1 -1
- package/dist/components/select.js +2 -2
- package/dist/components/separator.cjs +3 -3
- package/dist/components/separator.cjs.map +1 -1
- package/dist/components/series-legend.cjs +4 -4
- package/dist/components/series-legend.cjs.map +1 -1
- package/dist/components/sheet.cjs +9 -9
- package/dist/components/sheet.cjs.map +1 -1
- package/dist/components/sheet.js +1 -1
- package/dist/components/skeleton.cjs +3 -3
- package/dist/components/skeleton.cjs.map +1 -1
- package/dist/components/slider.cjs +11 -11
- package/dist/components/slider.cjs.map +1 -1
- package/dist/components/slider.js.map +1 -1
- package/dist/components/solar-forecast-chart.cjs +108 -0
- package/dist/components/solar-forecast-chart.cjs.map +1 -0
- package/dist/components/solar-forecast-chart.d.cts +77 -0
- package/dist/components/solar-forecast-chart.d.ts +77 -0
- package/dist/components/solar-forecast-chart.js +103 -0
- package/dist/components/solar-forecast-chart.js.map +1 -0
- package/dist/components/sortable-list.cjs +3 -3
- package/dist/components/sortable-list.cjs.map +1 -1
- package/dist/components/spinner.cjs +2 -2
- package/dist/components/spinner.cjs.map +1 -1
- package/dist/components/stat-card.cjs +8 -8
- package/dist/components/stat-card.cjs.map +1 -1
- package/dist/components/stepper.cjs +3 -3
- package/dist/components/stepper.cjs.map +1 -1
- package/dist/components/stepper.js +1 -1
- package/dist/components/switch.cjs +3 -3
- package/dist/components/switch.cjs.map +1 -1
- package/dist/components/switch.js +2 -2
- package/dist/components/switch.js.map +1 -1
- package/dist/components/table.cjs +9 -9
- package/dist/components/table.cjs.map +1 -1
- package/dist/components/table.js +1 -1
- package/dist/components/tabs.cjs +10 -10
- package/dist/components/tabs.cjs.map +1 -1
- package/dist/components/tabs.d.cts +1 -8
- package/dist/components/tabs.d.ts +1 -8
- package/dist/components/tabs.js +3 -3
- package/dist/components/tabs.js.map +1 -1
- package/dist/components/textarea.cjs +3 -3
- package/dist/components/textarea.cjs.map +1 -1
- package/dist/components/textarea.js +1 -1
- package/dist/components/theme.cjs +2 -2
- package/dist/components/theme.cjs.map +1 -1
- package/dist/components/theme.js +1 -1
- package/dist/components/thumbnail.cjs +3 -3
- package/dist/components/thumbnail.cjs.map +1 -1
- package/dist/components/time-picker.cjs +3 -3
- package/dist/components/time-picker.cjs.map +1 -1
- package/dist/components/toast.cjs +40 -15
- package/dist/components/toast.cjs.map +1 -1
- package/dist/components/toast.d.cts +15 -2
- package/dist/components/toast.d.ts +15 -2
- package/dist/components/toast.js +33 -8
- package/dist/components/toast.js.map +1 -1
- package/dist/components/toggle-group.cjs +40 -0
- package/dist/components/toggle-group.cjs.map +1 -0
- package/dist/components/toggle-group.d.cts +28 -0
- package/dist/components/toggle-group.d.ts +28 -0
- package/dist/components/toggle-group.js +37 -0
- package/dist/components/toggle-group.js.map +1 -0
- package/dist/components/toggle.cjs +69 -0
- package/dist/components/toggle.cjs.map +1 -0
- package/dist/components/toggle.d.cts +23 -0
- package/dist/components/toggle.d.ts +23 -0
- package/dist/components/toggle.js +66 -0
- package/dist/components/toggle.js.map +1 -0
- package/dist/components/tooltip.cjs +4 -4
- package/dist/components/tooltip.cjs.map +1 -1
- package/dist/components/tooltip.js +2 -2
- package/dist/components/tooltip.js.map +1 -1
- package/dist/components/typography.cjs +6 -6
- package/dist/components/typography.cjs.map +1 -1
- package/dist/components/wizard-layout.cjs +8 -8
- package/dist/components/wizard-layout.cjs.map +1 -1
- package/dist/lib/generate-radix-colors.cjs +1 -1
- package/dist/lib/generate-radix-colors.cjs.map +1 -1
- package/dist/lib/generate-radix-colors.js +1 -1
- package/dist/lib/generate-radix-colors.js.map +1 -1
- package/dist/lib/input-box-variants.cjs +9 -9
- package/dist/lib/input-box-variants.cjs.map +1 -1
- package/dist/lib/toggle-group-context.cjs +12 -0
- package/dist/lib/toggle-group-context.cjs.map +1 -0
- package/dist/lib/toggle-group-context.d.cts +17 -0
- package/dist/lib/toggle-group-context.d.ts +17 -0
- package/dist/lib/toggle-group-context.js +9 -0
- package/dist/lib/toggle-group-context.js.map +1 -0
- package/dist/number-flow-Bch81ixZ.d.cts +14 -0
- package/dist/number-flow-Bch81ixZ.d.ts +14 -0
- package/dist/styles/spark-default.css +11 -0
- package/dist/styles/theme.css +15 -4
- package/dist/utils/build-sankey-nodes.cjs +72 -0
- package/dist/utils/build-sankey-nodes.cjs.map +1 -0
- package/dist/utils/build-sankey-nodes.d.cts +27 -0
- package/dist/utils/build-sankey-nodes.d.ts +27 -0
- package/dist/utils/build-sankey-nodes.js +71 -0
- package/dist/utils/build-sankey-nodes.js.map +1 -0
- package/dist/utils/cn.cjs +2 -2
- package/dist/utils/cn.d.cts +1 -1
- package/dist/utils/cn.d.ts +1 -1
- package/dist/utils/cn.js +1 -1
- package/dist/utils/format.cjs +14 -0
- package/dist/utils/format.cjs.map +1 -1
- package/dist/utils/format.d.cts +8 -1
- package/dist/utils/format.d.ts +8 -1
- package/dist/utils/format.js +12 -1
- package/dist/utils/format.js.map +1 -1
- 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 {
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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"}
|
package/dist/components/sheet.js
CHANGED
|
@@ -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
|
|
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,
|
|
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,
|
|
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,
|
|
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
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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,
|
|
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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"}
|