@epilot/spark-ui 1.0.0-alpha.6 → 1.0.0-alpha.7

package/dist/components/input.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.js","names":[],"sources":["../../src/components/input.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\ntype InputVariant = SparkInputStyle | 'none'\n\nconst inputVariants = cva(\n  'flex h-10 w-full min-w-0 [appearance:textfield] bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n  {\n    variants: {\n      chrome: {\n        none: 'border-0 px-0',\n        // inside an inset field the shell is the box; the input keeps the\n        // classic underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-lg px-3 py-1 text-base transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\ninterface InputProps extends React.ComponentProps<'input'> {\n  variant?: InputVariant\n}\n\nfunction Input({\n  variant,\n  className,\n  id: idProp,\n  'aria-describedby': ariaDescribedByProp,\n  ...props\n}: InputProps) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({\n      id: idProp,\n      ariaDescribedBy: ariaDescribedByProp,\n      variant: variant !== 'none' ? variant : undefined,\n    })\n  // an explicit variant prop keeps the box even inside an inset field\n  const chrome =\n    variant === 'none'\n      ? 'none'\n      : !variant && field?.labelPosition === 'inset'\n        ? 'inset'\n        : 'box'\n\n  return (\n    <input\n      data-slot=\"input\"\n      className={cn(\n        inputVariants({ chrome, inputStyle, inputColor }),\n        className,\n      )}\n      id={id}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    />\n  )\n}\n\nexport { Input }\nexport type { InputProps, InputVariant }\n"],"mappings":";;;;;;;;AASA,MAAM,gBAAgB,IACpB,gYACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM;GAGN,OAAO;GACP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;GACxB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;GACxB;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAMD,SAAS,MAAM,EACb,SACA,WACA,IAAI,QACJ,oBAAoB,qBACpB,GAAG,SACU;CACb,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9C,gBAAgB;EACd,IAAI;EACJ,iBAAiB;EACjB,SAAS,YAAY,SAAS,UAAU,KAAA;EACzC,CAAC;AASJ,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT,cAAc;GAAE,QAVpB,YAAY,SACR,SACA,CAAC,WAAW,OAAO,kBAAkB,UACnC,UACA;GAMsB;GAAY;GAAY,CAAC,EACjD,UACD;EACG;EACJ,GAAI;EACJ,oBAAkB;EAClB,CAAA"}
+{"version":3,"file":"input.js","names":["React"],"sources":["../../src/components/input.tsx"],"sourcesContent":["import { cva } from 'class-variance-authority'\nimport * as React from 'react'\nimport { boxChrome, GHOST_UNDERLINE } from '../lib/input-box-variants'\nimport type { SparkInputStyle } from '../lib/theme-types'\nimport { cn } from '../utils/cn'\nimport { useFieldControl } from './field'\n\ntype InputVariant = SparkInputStyle | 'none'\n\nconst inputVariants = cva(\n  'flex h-10 w-full min-w-0 [appearance:textfield] bg-transparent text-gray outline-hidden transition-all group-data-[invalid=true]/field:text-error placeholder:text-gray-disabled disabled:cursor-not-allowed disabled:text-gray-disabled aria-invalid:text-error motion-reduce:transition-none [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none',\n  {\n    variants: {\n      chrome: {\n        none: 'border-0 px-0',\n        // inside an inset field the shell is the box; the input keeps the\n        // classic underline (the pre-knob default look)\n        inset: GHOST_UNDERLINE,\n        box: 'h-11 rounded-lg px-3 py-1 text-base transition-all motion-reduce:transition-none',\n      },\n      inputStyle: { soft: '', surface: '', outlined: '', ghost: '' },\n      inputColor: { brand: '', gray: '' },\n    },\n    compoundVariants: [\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'brand',\n        class: boxChrome.soft.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'soft',\n        inputColor: 'gray',\n        class: boxChrome.soft.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'brand',\n        class: boxChrome.surface.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'surface',\n        inputColor: 'gray',\n        class: boxChrome.surface.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'brand',\n        class: boxChrome.outlined.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'outlined',\n        inputColor: 'gray',\n        class: boxChrome.outlined.gray,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'brand',\n        class: boxChrome.ghost.brand,\n      },\n      {\n        chrome: 'box',\n        inputStyle: 'ghost',\n        inputColor: 'gray',\n        class: boxChrome.ghost.gray,\n      },\n      { chrome: 'inset', inputColor: 'brand', class: 'border-b-input' },\n      { chrome: 'inset', inputColor: 'gray', class: 'border-b-input-gray' },\n    ],\n  },\n)\n\ninterface InputProps extends React.ComponentProps<'input'> {\n  variant?: InputVariant\n}\n\n// forwardRef keeps refs working for React 18 consumers (ref-as-prop is 19-only)\nconst Input = React.forwardRef<HTMLInputElement, InputProps>(function Input(\n  {\n    variant,\n    className,\n    id: idProp,\n    'aria-describedby': ariaDescribedByProp,\n    ...props\n  },\n  ref,\n) {\n  const { field, id, ariaDescribedBy, inputStyle, inputColor } =\n    useFieldControl({\n      id: idProp,\n      ariaDescribedBy: ariaDescribedByProp,\n      variant: variant !== 'none' ? variant : undefined,\n    })\n  // an explicit variant prop keeps the box even inside an inset field\n  const chrome =\n    variant === 'none'\n      ? 'none'\n      : !variant && field?.labelPosition === 'inset'\n        ? 'inset'\n        : 'box'\n\n  return (\n    <input\n      data-slot=\"input\"\n      className={cn(\n        inputVariants({ chrome, inputStyle, inputColor }),\n        className,\n      )}\n      id={id}\n      ref={ref}\n      {...props}\n      aria-describedby={ariaDescribedBy}\n    />\n  )\n})\n\nexport { Input }\nexport type { InputProps, InputVariant }\n"],"mappings":";;;;;;;;AASA,MAAM,gBAAgB,IACpB,gYACA;CACE,UAAU;EACR,QAAQ;GACN,MAAM;GAGN,OAAO;GACP,KAAK;GACN;EACD,YAAY;GAAE,MAAM;GAAI,SAAS;GAAI,UAAU;GAAI,OAAO;GAAI;EAC9D,YAAY;GAAE,OAAO;GAAI,MAAM;GAAI;EACpC;CACD,kBAAkB;EAChB;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,KAAK;GACvB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,QAAQ;GAC1B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,SAAS;GAC3B;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;GACxB;EACD;GACE,QAAQ;GACR,YAAY;GACZ,YAAY;GACZ,OAAO,UAAU,MAAM;GACxB;EACD;GAAE,QAAQ;GAAS,YAAY;GAAS,OAAO;GAAkB;EACjE;GAAE,QAAQ;GAAS,YAAY;GAAQ,OAAO;GAAuB;EACtE;CACF,CACF;AAOD,MAAM,QAAQA,QAAM,WAAyC,SAAS,MACpE,EACE,SACA,WACA,IAAI,QACJ,oBAAoB,qBACpB,GAAG,SAEL,KACA;CACA,MAAM,EAAE,OAAO,IAAI,iBAAiB,YAAY,eAC9C,gBAAgB;EACd,IAAI;EACJ,iBAAiB;EACjB,SAAS,YAAY,SAAS,UAAU,KAAA;EACzC,CAAC;AASJ,QACE,oBAAC,SAAD;EACE,aAAU;EACV,WAAW,GACT,cAAc;GAAE,QAVpB,YAAY,SACR,SACA,CAAC,WAAW,OAAO,kBAAkB,UACnC,UACA;GAMsB;GAAY;GAAY,CAAC,EACjD,UACD;EACG;EACC;EACL,GAAI;EACJ,oBAAkB;EAClB,CAAA;EAEJ"}

package/dist/components/line-chart.js

@@ -1,6 +1,6 @@
 "use client";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { localeNumberFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick } from "../utils/chart-scale.js";
 import { ChartTooltipCard, clampTooltipPosition, useMeasuredSize } from "./chart.js";

package/dist/components/page-header.d.cts

@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/page-header.d.ts
 declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
-declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "color" | "size" | "styleVariant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "color" | "styleVariant" | "size">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

package/dist/components/page-header.d.ts

@@ -7,7 +7,7 @@ import { useRender } from "@base-ui/react/use-render";
 
 //#region src/components/page-header.d.ts
 declare const PageHeader: React$1.ForwardRefExoticComponent<React$1.HTMLAttributes<HTMLElement> & React$1.RefAttributes<HTMLElement>>;
-declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "color" | "size" | "styleVariant">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
+declare const PageHeaderBackButton: React$1.ForwardRefExoticComponent<Omit<Omit<ButtonProps, "color" | "styleVariant" | "size">, "ref"> & React$1.RefAttributes<HTMLButtonElement>>;
 declare const PageHeaderTitle: ({
   className,
   ...props

package/dist/components/power-history-chart.js

@@ -1,6 +1,6 @@
 "use client";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import "../utils/chars.js";
 import { twoDecimalFormat } from "../utils/format.js";
 import { buildYAxisScale, formatYAxisTick } from "../utils/chart-scale.js";

package/dist/components/power-history.cjs

@@ -1,11 +1,11 @@
 "use client";
 require("../chunk-aJGBMT86.cjs");
-const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
 require("../utils/chars.cjs");
 const require_utils_format = require("../utils/format.cjs");
 const require_components_series_legend = require("./series-legend.cjs");
 const require_components_typography = require("./typography.cjs");
 const require_components_line_chart = require("./line-chart.cjs");
+const require_hooks_use_container_width = require("../hooks/use-container-width.cjs");
 let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 //#region src/components/power-history.tsx

package/dist/components/power-history.js

@@ -1,10 +1,10 @@
 "use client";
-import { useContainerWidth } from "../hooks/use-container-width.js";
 import "../utils/chars.js";
 import { oneDecimalFormat } from "../utils/format.js";
 import { SeriesLegend } from "./series-legend.js";
 import { SectionTitle } from "./typography.js";
 import { LineChart } from "./line-chart.js";
+import { useContainerWidth } from "../hooks/use-container-width.js";
 import { useCallback, useMemo, useState } from "react";
 import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/components/power-history.tsx

package/dist/components/power-network.cjs

@@ -1,8 +1,8 @@
 "use client";
 Object.defineProperty(exports, Symbol.toStringTag, { value: "Module" });
 require("../chunk-aJGBMT86.cjs");
-const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_icons_material_symbol = require("../icons/material-symbol.cjs");
+const require_hooks_use_reduced_motion = require("../hooks/use-reduced-motion.cjs");
 const require_components_typography = require("./typography.cjs");
 const require_components_number_flow = require("./number-flow.cjs");
 const require_components_skeleton = require("./skeleton.cjs");

package/dist/components/power-network.js

@@ -1,7 +1,7 @@
 "use client";
-import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { cn } from "../utils/cn.js";
 import { MaterialSymbol } from "../icons/material-symbol.js";
+import { useReducedMotion } from "../hooks/use-reduced-motion.js";
 import { SectionTitle } from "./typography.js";
 import NumberFlow from "./number-flow.js";
 import { Skeleton } from "./skeleton.js";

package/dist/components/slider.cjs

@@ -102,7 +102,7 @@ Slider.displayName = "Slider";
 function SliderControl({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_slider.Slider.Control, {
 		"data-slot": "slider-control",
-		className: (0, cnfast.cn)("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),
+		className: (0, cnfast.cn)("group/slider 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),
 		...props
 	});
 }
@@ -120,7 +120,7 @@ SliderTrack.displayName = "SliderTrack";
 function SliderIndicator({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_slider.Slider.Indicator, {
 		"data-slot": "slider-indicator",
-		className: (0, cnfast.cn)("rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))", "transition-[width,height,inset-inline-start] duration-150 data-dragging:transition-none motion-reduce:transition-none", className),
+		className: (0, cnfast.cn)("rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))", "transition-none duration-150 group-focus-within/slider:transition-[width,height,inset-inline-start] data-dragging:transition-none motion-reduce:transition-none", className),
 		...props
 	});
 }
@@ -162,7 +162,7 @@ SliderTicks.displayName = "SliderTicks";
 function SliderThumb({ className, ...props }) {
 	return /* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_slider.Slider.Thumb, {
 		"data-slot": "slider-thumb",
-		className: (0, cnfast.cn)("block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))", "shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]", "before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2", "data-dragging:ring-2 data-dragging:ring-offset-2", "transition-[inset-inline-start,top,box-shadow] duration-150 data-dragging:transition-none motion-reduce:transition-none", "disabled:pointer-events-none", className),
+		className: (0, cnfast.cn)("block size-4 shrink-0 rounded-(--spark-rounded-lg) bg-(--spark-slider-range,var(--spark-9))", "shadow-[0_0_0_2px_var(--spark-background,#fff),0_1px_2px_0_rgb(0_0_0/0.2)]", "before:absolute before:top-1/2 before:left-1/2 before:size-6 before:-translate-x-1/2 before:-translate-y-1/2 before:content-['']", "outline-hidden has-[input:focus-visible]:ring-2 has-[input:focus-visible]:ring-offset-2", "data-dragging:ring-2 data-dragging:ring-offset-2", "transition-shadow duration-150 group-focus-within/slider:transition-[inset-inline-start,top,box-shadow] data-dragging:transition-none motion-reduce:transition-none", "disabled:pointer-events-none", className),
 		...props
 	});
 }

package/dist/components/slider.cjs.map

@@ -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\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    if (!isControlled) {\n      setUncontrolled(next as SliderValue)\n    }\n\n    onValueChange?.(next as Value, 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?.(next as Value, eventDetails)\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        '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        'transition-[width,height,inset-inline-start] duration-150 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-[inset-inline-start,top,box-shadow] duration-150 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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"}
+{"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\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    if (!isControlled) {\n      setUncontrolled(next as SliderValue)\n    }\n\n    onValueChange?.(next as Value, 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?.(next as Value, eventDetails)\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 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":";;;;;;;;;AAUA,MAAM,YAAY;AAKlB,SAAS,WACP,OACA,KACA,KACA,MACQ;CACR,MAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,MAAM,CAAC;AAEnD,KAAI,EAAE,OAAO,GACX,QAAO;CAGT,MAAM,UAAU,MAAM,KAAK,OAAO,UAAU,OAAO,KAAK,GAAG;CAC3D,MAAM,UAAU,KAAK,IAAI,KAAK,KAAK,IAAI,KAAK,QAAQ,CAAC;CACrD,MAAM,YAAY,OAAO,KAAK,CAAC,MAAM,IAAI,CAAC,MAAM,IAAI;AAEpD,QAAO,WAAW,IAAI,OAAO,QAAQ,QAAQ,SAAS,CAAC,GAAG;;AA8B5D,MAAM,gBAAgBA,MAAM,cAAyC,KAAK;AAE1E,SAAS,iBAAiB,MAAkC;CAC1D,MAAM,MAAMA,MAAM,WAAW,cAAc;AAE3C,KAAI,CAAC,IACH,OAAM,IAAI,MAAM,IAAI,KAAK,oCAAoC;AAG/D,QAAO;;;;;;;;;AAoCT,SAAS,OAAgD,EACvD,WACA,UACA,OACA,cACA,MAAM,GACN,MAAM,KACN,OAAO,GACP,WAAW,OACX,cAAc,cACd,UAAU,WACV,eACA,kBAIA,iBAAiB,QAIjB,cAAc,WACd,mBAAmB,gBACnB,GAAG,SACkB;CACrB,MAAM,eAAe,UAAU,KAAA;CAC/B,MAAM,CAAC,cAAc,mBAAmBA,MAAM,SAC5C,gBAAgB,IACjB;CACD,MAAM,UAAW,eAAe,QAAQ;CACxC,MAAM,SAASA,MAAM,cACZ,MAAM,QAAQ,QAAQ,GAAG,UAAU,CAAC,QAAQ,EACnD,CAAC,QAAQ,CACV;CAID,MAAM,cACJ,MACA,iBACG;AACH,MAAI,CAAC,aACH,iBAAgB,KAAoB;AAGtC,kBAAgB,MAAe,aAAa;;CAQ9C,MAAM,iBACJ,OACA,MACA,YACG;EACH,MAAM,UAAU,WAAW,MAAM,KAAK,KAAK,KAAK;EAChD,MAAM,WAAW,MAAM,QAAQ,QAAQ;EACvC,IAAI;AAEJ,MAAI,UAAU;GACZ,MAAM,OAAO,CAAC,GAAI,QAAqB;AACvC,QAAK,SAAS;AACd,QAAK,MAAM,GAAG,MAAM,IAAI,EAAE;AAC1B,eAAY;QAEZ,aAAY;EAGd,MAAM,UAAU,WACX,UAAuB,MAAM,GAAG,MAAM,MAAO,QAAqB,GAAG,GACtE,cAAc;EAIlB,MAAM,UAAU,EACd,QAAQ,gBACT;AAED,MAAI,QACF,YAAW,WAAW,QAAQ;AAGhC,MAAI,SAAS;OAET,QAAQ,mBAAmB,KAAA,IACvB,UACA,YAAY,QAAQ,eAGxB,oBACE,WACA,QACD;;;CAOP,MAAM,UAA8B;EAClC;EACA;EACA;EACA;EACA;EACA;EACD;CAID,MAAM,YAAY,YAAY,WAAW,gBAAgB;AAEzD,QACE,iBAAA,GAAA,kBAAA,KAAC,cAAc,UAAf;EAAwB,OAAO;YAC7B,iBAAA,GAAA,kBAAA,KAACC,sBAAAA,OAAW,MAAZ;GACE,cAAY;GACZ,mBAAiB;GACjB,aAAU;GACV,OAAO;GACF;GACA;GACC;GACI;GACG;GACG;GAChB,eAAe;GACf,mBAAmB,MAAM,iBACvB,mBAAmB,MAAe,aAAa;GAEjD,YAAA,GAAA,OAAA,IACE,kJACA,UACD;GACD,GAAI;aAEH,YACC,iBAAA,GAAA,kBAAA,KAAC,eAAD,EAAA,UACE,iBAAA,GAAA,kBAAA,MAAC,aAAD,EAAA,UAAA;IACE,iBAAA,GAAA,kBAAA,KAAC,iBAAD,EAAmB,CAAA;IAClB,YAAY,iBAAA,GAAA,kBAAA,KAAC,aAAD,EAAe,CAAA,GAAG;IAC9B,OAAO,KAAK,GAAG,UACd,iBAAA,GAAA,kBAAA,KAAC,aAAD;KACE,cAAY;KACZ,mBAAiB;KACjB,OAAO,OAAO,SAAS,IAAI,QAAQ,KAAA;KAEnC,EADK,MACL,CACF;IACU,EAAA,CAAA,EACA,CAAA;GAEF,CAAA;EACK,CAAA;;AAI7B,OAAO,cAAc;;;;;;AAOrB,SAAS,cAAc,EACrB,WACA,GAAG,SAC+C;AAClD,QACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAW,SAAZ;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,iFACA,sJACA,8DACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,cAAc,cAAc;;AAG5B,SAAS,YAAY,EACnB,WACA,GAAG,SAC6C;AAChD,QACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAW,OAAZ;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAIE,+DACA,sEACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,YAAY,cAAc;;AAG1B,SAAS,gBAAgB,EACvB,WACA,GAAG,SACiD;AACpD,QACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAW,WAAZ;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAEE,yEAIA,mKACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,gBAAgB,cAAc;;;;;;;;;;AAW9B,SAAS,YAAY,EAAE,WAAW,GAAG,SAAsC;CACzE,MAAM,EAAE,KAAK,KAAK,MAAM,WAAW,iBAAiB,cAAc;AAElE,KAAI,EAAE,OAAO,MAAM,OAAO,IACxB,QAAO;CAKT,MAAM,YAAY,KAAK,OAAO,MAAM,OAAO,KAAK;AAEhD,KAAI,YAAY,KAAK,YAAY,UAC/B,QAAO;CAIT,MAAM,WADiB,MAAM,YAAY,SAAS,MAChB,YAAY,IAAI;CAGlD,MAAM,UAAU,OAAO,SAAS,IAAI,KAAK,IAAI,GAAG,OAAO,GAAG;CAC1D,MAAM,WAAW,OAAO,SAAS,IAAI,KAAK,IAAI,GAAG,OAAO,GAAI,OAAO,MAAM;AAEzE,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EACE,eAAY;EACZ,YAAA,GAAA,OAAA,IAAc,wCAAwC,UAAU;EAChE,aAAU;EACV,GAAI;YAEH,MAAM,KAAK,EAAE,QAAQ,UAAU,GAAG,GAAG,MAAM;GAC1C,MAAM,QAAQ,IAAI;GAClB,MAAM,WAAW,MAAM,QAAQ;GAC/B,MAAM,OAAQ,WAAW,QAAQ,MAAM,OAAQ;AAG/C,UACE,iBAAA,GAAA,kBAAA,KAAC,QAAD;IACE,YAAA,GAAA,OAAA,IACE,0EALS,YAAY,WAAW,YAAY,WASxC,2DACA,aACL;IAED,OAAO,EAAE,MAAM,GAAG,IAAI,IAAI;IAC1B,EAFK,MAEL;IAEJ;EACE,CAAA;;AAIV,YAAY,cAAc;AAE1B,SAAS,YAAY,EACnB,WACA,GAAG,SAC6C;AAChD,QACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAW,OAAZ;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IACE,+FACA,8EACA,oIACA,2FACA,oDACA,uKACA,gCACA,UACD;EACD,GAAI;EACJ,CAAA;;AAIN,YAAY,cAAc;AAE1B,SAAS,YAAY,EACnB,WACA,GAAG,SAC6C;AAChD,QACE,iBAAA,GAAA,kBAAA,KAACA,sBAAAA,OAAW,OAAZ;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,kCAAkC,UAAU;EAC1D,GAAI;EACJ,CAAA;;AAIN,YAAY,cAAc;;;;;;;;;;AAqB1B,SAAS,YAAY,EACnB,WACA,QAAQ,GACR,MACA,UACA,SACA,QACA,WACA,GAAG,SACgB;CACnB,MAAM,MAAM,iBAAiB,cAAc;CAC3C,MAAM,eAAe,IAAI,OAAO,UAAU,IAAI;CAC9C,MAAM,CAAC,OAAO,YAAYD,MAAM,SAAiB,OAAO,aAAa,CAAC;CACtE,MAAM,CAAC,SAAS,cAAcA,MAAM,SAAS,MAAM;CAEnD,MAAM,cAAcA,MAAM,OAAO,aAAa;AAI9C,OAAM,gBAAgB;AACpB,MAAI,CAAC,QACH,UAAS,OAAO,aAAa,CAAC;IAE/B,CAAC,cAAc,QAAQ,CAAC;CAE3B,MAAM,cAAc,QAA+B;AACjD,MAAI,IAAI,MAAM,KAAK,GACjB,QAAO;EAGT,MAAM,SAAS,OAAO,IAAI;AAE1B,SAAO,OAAO,MAAM,OAAO,GAAG,OAAO;;CAGvC,MAAM,eAAe;EACnB,MAAM,SAAS,WAAW,MAAM;AAEhC,MAAI,WAAW,MAAM;AACnB,YAAS,OAAO,aAAa,CAAC;AAC9B;;AAGF,MAAI,cAAc,OAAO,QAAQ;GAC/B,QAAQ;GACR,gBAAgB,YAAY;GAC7B,CAAC;;AAGJ,QACE,iBAAA,GAAA,kBAAA,MAAC,QAAD;EACE,aAAU;EACV,YAAA,GAAA,OAAA,IAAc,oCAAoC,UAAU;YAF9D,CAIE,iBAAA,GAAA,kBAAA,KAAC,SAAD;GACE,MAAK;GACL,WAAU;GACV,KAAK,IAAI;GACT,KAAK,IAAI;GACT,MAAM,IAAI;GACV,UAAU,YAAY,IAAI;GAC1B,OAAO,UAAU,QAAQ,OAAO,aAAa;GAC7C,WAAW,UAAU;IACnB,MAAM,MAAM,MAAM,OAAO;AACzB,aAAS,IAAI;IACb,MAAM,SAAS,WAAW,IAAI;AAK9B,QAAI,WAAW,QAAQ,UAAU,IAAI,OAAO,UAAU,IAAI,IACxD,KAAI,cAAc,OAAO,OAAO;;GAGpC,UAAU,UAAU;AAClB,gBAAY,UAAU,IAAI,OAAO,UAAU,IAAI;AAC/C,eAAW,KAAK;AAChB,cAAU,MAAM;;GAElB,SAAS,UAAU;AACjB,eAAW,MAAM;AACjB,YAAQ;AACR,aAAS,MAAM;;GAEjB,YAAY,UAAU;AAEpB,QAAI,MAAM,QAAQ,QAChB,OAAM,cAAc,MAAM;AAG5B,gBAAY,MAAM;;GAEpB,YAAA,GAAA,OAAA,IACE,mDACA,iFACA,mDAEA,uHACD;GACD,GAAI;GACJ,CAAA,EACD,OACC,iBAAA,GAAA,kBAAA,KAAC,QAAD;GAAM,WAAU;GAAoB,aAAU;aAC3C;GACI,CAAA,GACL,KACC;;;AAIX,YAAY,cAAc"}

package/dist/components/slider.js

@@ -99,7 +99,7 @@ Slider.displayName = "Slider";
 function SliderControl({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Slider$1.Control, {
 		"data-slot": "slider-control",
-		className: cn("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),
+		className: cn("group/slider 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),
 		...props
 	});
 }
@@ -117,7 +117,7 @@ SliderTrack.displayName = "SliderTrack";
 function SliderIndicator({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Slider$1.Indicator, {
 		"data-slot": "slider-indicator",
-		className: cn("rounded-(--spark-rounded-sm) bg-(--spark-slider-range,var(--spark-9))", "transition-[width,height,inset-inline-start] duration-150 data-dragging:transition-none motion-reduce:transition-none", className),
+		className: 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),
 		...props
 	});
 }
@@ -159,7 +159,7 @@ SliderTicks.displayName = "SliderTicks";
 function SliderThumb({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Slider$1.Thumb, {
 		"data-slot": "slider-thumb",
-		className: 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-[inset-inline-start,top,box-shadow] duration-150 data-dragging:transition-none motion-reduce:transition-none", "disabled:pointer-events-none", className),
+		className: 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),
 		...props
 	});
 }

package/dist/components/slider.js.map

@@ -1 +1 @@
-{"version":3,"file":"slider.js","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\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    if (!isControlled) {\n      setUncontrolled(next as SliderValue)\n    }\n\n    onValueChange?.(next as Value, 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?.(next as Value, eventDetails)\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        '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        'transition-[width,height,inset-inline-start] duration-150 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-[inset-inline-start,top,box-shadow] duration-150 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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"}
+{"version":3,"file":"slider.js","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\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    if (!isControlled) {\n      setUncontrolled(next as SliderValue)\n    }\n\n    onValueChange?.(next as Value, 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?.(next as Value, eventDetails)\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 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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"}

package/dist/components/tabs.cjs

@@ -92,6 +92,7 @@ function TabsList({ className, style, variant = "underline", ref, ...props }) {
 			mounted = true;
 		};
 		measure();
+		const readyFrame = requestAnimationFrame(() => scroller.setAttribute("data-indicator-ready", ""));
 		scroller.addEventListener("scroll", syncOverflow, { passive: true });
 		const mo = new MutationObserver(measure);
 		mo.observe(scroller, {
@@ -103,6 +104,8 @@ function TabsList({ className, style, variant = "underline", ref, ...props }) {
 		const ro = new ResizeObserver(measure);
 		ro.observe(scroller);
 		return () => {
+			cancelAnimationFrame(readyFrame);
+			scroller.removeAttribute("data-indicator-ready");
 			scroller.removeEventListener("scroll", syncOverflow);
 			clearTimeout(wormTimer);
 			mo.disconnect();
@@ -134,7 +137,7 @@ function TabsList({ className, style, variant = "underline", ref, ...props }) {
 			/* @__PURE__ */ (0, react_jsx_runtime.jsx)(_base_ui_react_tabs.Tabs.List, {
 				"data-slot": "tabs-scroller",
 				ref: scrollerCallbackRef,
-				className: (0, cnfast.cn)("relative no-scrollbar flex w-full items-stretch overflow-x-auto scroll-smooth motion-reduce:scroll-auto", resolved === "underline" && "gap-2", resolved === "underline" && "after:pointer-events-none after:absolute after:bottom-0 after:left-(--tabs-indicator-x,0px) after:h-1 after:w-(--tabs-indicator-w,0px) after:rounded-full after:bg-(--spark-tabs-indicator,var(--spark-indicator)) after:transition-[left,width] after:duration-200 after:ease-out after:content-[''] motion-reduce:after:transition-none", resolved === "pill" && "gap-0 rounded-md bg-gray-a3 p-1"),
+				className: (0, cnfast.cn)("relative no-scrollbar flex w-full items-stretch overflow-x-auto scroll-smooth motion-reduce:scroll-auto", resolved === "underline" && "gap-2", resolved === "underline" && "after:pointer-events-none after:absolute after:bottom-0 after:left-(--tabs-indicator-x,0px) after:h-1 after:w-(--tabs-indicator-w,0px) after:rounded-full after:bg-(--spark-tabs-indicator,var(--spark-indicator)) after:transition-none after:duration-200 after:ease-out after:content-[''] data-indicator-ready:after:transition-[left,width] motion-reduce:after:transition-none!", resolved === "pill" && "gap-0 rounded-md bg-gray-a3 p-1"),
 				...props
 			}),
 			chevron(1)

package/dist/components/tabs.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"tabs.cjs","names":["React","TabsPrimitive","MaterialSymbol"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\n// useLayoutEffect warns during SSR; the isomorphic swap is the standard Radix idiom.\nconst useIsomorphicLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\n// Merge our internal scroller ref with a consumer-forwarded ref. Written locally\n// and React 19-correct: it propagates cleanup-returning callback refs and nulls\n// plain refs on unmount.\ntype PossibleRef<T> = React.Ref<T> | undefined\n\nfunction setRef<T>(ref: PossibleRef<T>, value: T | null) {\n  if (typeof ref === 'function') return ref(value)\n  if (ref) ref.current = value\n  return undefined\n}\n\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n  return (node: T) => {\n    let hasCleanup = false\n    const cleanups = refs.map((ref) => {\n      const cleanup = setRef(ref, node)\n      if (typeof cleanup === 'function') hasCleanup = true\n      return cleanup\n    })\n    if (hasCleanup) {\n      return () => {\n        for (let i = 0; i < refs.length; i++) {\n          const cleanup = cleanups[i]\n          if (typeof cleanup === 'function') cleanup()\n          else setRef(refs[i], null)\n        }\n      }\n    }\n    return undefined\n  }\n}\n\ntype TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>\n\nfunction Tabs(props: TabsProps) {\n  return <TabsPrimitive.Root data-slot=\"tabs\" {...props} />\n}\n\ntype TabsListVariant = 'underline'\n\n/**\n * @deprecated Not part of Spark's tab design — use `'underline'`. `'pill'` (a\n * segmented control) and the old text-only `'default'` still render for\n * back-compat but are undocumented and may be removed.\n */\ntype TabsListVariantLegacy = 'default' | 'pill'\n\ntype TabsListProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.List>,\n  'style'\n> & {\n  /** `underline` — the Spark tab: bold label + a sliding accent bar. */\n  variant?: TabsListVariant | TabsListVariantLegacy\n  // style lands on the plain wrapper div, so no Base UI state-callback form\n  style?: React.CSSProperties\n}\n\n// how much of a neighboring tab a scroll-into-view reveals (matches scroll-mx-10)\nconst REVEAL_PEEK = 40\n// worm indicator: the accent bar stretches across old+new, then contracts to the\n// new tab. WORM_MS must be >= the bar's CSS transition (200ms) so the stretch fully\n// settles before the contract begins — then contract sets left+width from rest in\n// one synced transition, pinning the leading edge so the motion never jiggles (a\n// contract that starts mid-stretch desyncs the two edges → wobble on big jumps).\nconst WORM_MS = 210\n\nfunction TabsList({\n  className,\n  style,\n  variant = 'underline',\n  ref,\n  ...props\n}: TabsListProps) {\n  // 'underline' is the only real variant. Deprecated 'pill' still renders (a\n  // segmented control, kept for back-compat); anything else (incl. the old\n  // text-only 'default') folds into underline.\n  const resolved = variant === 'pill' ? 'pill' : 'underline'\n  const wrapperRef = React.useRef<HTMLDivElement | null>(null)\n  const scrollerRef = React.useRef<HTMLDivElement | null>(null)\n  // stable identity (keyed on the forwarded ref) so React doesn't detach/re-attach\n  // the scroller ref on every render — TabsList re-renders on each selection.\n  const scrollerCallbackRef = React.useMemo(\n    () => composeRefs<HTMLDivElement>(scrollerRef, ref),\n    [ref],\n  )\n\n  // Sliding underline + overflow state + travel-into-view. The bar lives on the\n  // SCROLLER (::after scrolls with the content) and follows the active trigger via\n  // two measured vars; useLayoutEffect measures before paint (no flash); the\n  // MutationObserver tracks selection + children + text changes; the ResizeObserver\n  // re-measures on container/scroller reflow. Together they cover everything that\n  // moves a tab: selection, add/remove, a counter Badge growing, and resize.\n  useIsomorphicLayoutEffect(() => {\n    const wrapper = wrapperRef.current\n    const scroller = scrollerRef.current\n    if (!wrapper || !scroller) return\n    // the edge chevrons show per side while more content hides in that direction\n    const syncOverflow = () => {\n      // 2px epsilon absorbs sub-pixel rounding at fractional browser zoom\n      // (scrollWidth/clientWidth round to int, scrollLeft is fractional). Assumes\n      // LTR (scrollLeft >= 0) — Spark's tab strips are LTR.\n      const max = scroller.scrollWidth - scroller.clientWidth\n      wrapper.toggleAttribute('data-overflow-start', scroller.scrollLeft > 2)\n      wrapper.toggleAttribute(\n        'data-overflow-end',\n        scroller.scrollLeft < max - 2,\n      )\n    }\n    // scroller-local reveal — deliberately NOT scrollIntoView, which also scrolls\n    // ancestors and would yank the page when the list is half off-screen. The peek\n    // keeps the neighboring tab partially visible (\"there's more here\").\n    const reveal = (el: HTMLElement) => {\n      // jsdom (unit tests) doesn't implement Element.scrollTo\n      if (typeof scroller.scrollTo !== 'function') return\n      const start = el.offsetLeft - REVEAL_PEEK\n      const end = el.offsetLeft + el.offsetWidth + REVEAL_PEEK\n      if (start < scroller.scrollLeft) {\n        scroller.scrollTo({ left: Math.max(0, start) })\n      } else if (end > scroller.scrollLeft + scroller.clientWidth) {\n        scroller.scrollTo({ left: end - scroller.clientWidth })\n      }\n    }\n    // matchMedia guarded for jsdom (unit tests); read .matches live so toggling the\n    // OS reduce-motion setting mid-session takes effect on the next selection.\n    const motionQuery =\n      typeof window.matchMedia === 'function'\n        ? window.matchMedia('(prefers-reduced-motion: reduce)')\n        : null\n    const setBar = (x: number, w: number) => {\n      scroller.style.setProperty('--tabs-indicator-x', `${x}px`)\n      scroller.style.setProperty('--tabs-indicator-w', `${w}px`)\n    }\n    let lastActive: HTMLElement | null = null\n    let mounted = false\n    let wormTimer: ReturnType<typeof setTimeout> | undefined\n    const measure = () => {\n      const active = scroller.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-active]',\n      )\n      const changed = active !== lastActive\n      if (resolved === 'underline') {\n        if (!active) {\n          // no selection → collapse the bar (width 0), forget the previous tab, and\n          // cancel any pending contract, so a later selection never worms from a\n          // stale/removed node\n          clearTimeout(wormTimer)\n          lastActive = null\n          scroller.style.setProperty('--tabs-indicator-w', '0px')\n        } else if (\n          changed &&\n          lastActive?.isConnected &&\n          mounted &&\n          !motionQuery?.matches\n        ) {\n          // worm: stretch across old + new (one edge holds, the other reaches),\n          // then contract to the new tab (the trailing edge catches up). The union\n          // makes it direction-agnostic. isConnected guards dynamic tab removal — a\n          // detached old node reports offsets of 0 and would sweep the bar from x=0.\n          const from = Math.min(lastActive.offsetLeft, active.offsetLeft)\n          const to = Math.max(\n            lastActive.offsetLeft + lastActive.offsetWidth,\n            active.offsetLeft + active.offsetWidth,\n          )\n          setBar(from, to - from)\n          clearTimeout(wormTimer)\n          const el = active\n          wormTimer = setTimeout(\n            () => setBar(el.offsetLeft, el.offsetWidth),\n            WORM_MS,\n          )\n        } else {\n          // first paint, reduced motion, detached previous, or a resize (same tab)\n          // → settle on the active tab, no worm\n          clearTimeout(wormTimer)\n          setBar(active.offsetLeft, active.offsetWidth)\n        }\n      }\n      syncOverflow()\n      // travel the active tab into view on selection change — and on mount, so a\n      // defaulted off-screen tab is visible. reveal() is scroller-local, so it never\n      // scrolls the page/ancestors.\n      if (active && changed) {\n        reveal(active)\n        lastActive = active\n      }\n      mounted = true\n    }\n    measure()\n    scroller.addEventListener('scroll', syncOverflow, { passive: true })\n    const mo = new MutationObserver(measure)\n    mo.observe(scroller, {\n      subtree: true,\n      childList: true,\n      // characterData catches a trigger's text growing (e.g. a counter Badge 9→120):\n      // in overflow the scroller's border-box is pinned, so that only changes\n      // scrollWidth (never reported by the ResizeObserver) yet shifts every tab.\n      characterData: true,\n      attributeFilter: ['data-active'],\n    })\n    const ro = new ResizeObserver(measure)\n    ro.observe(scroller)\n    return () => {\n      scroller.removeEventListener('scroll', syncOverflow)\n      clearTimeout(wormTimer)\n      mo.disconnect()\n      ro.disconnect()\n    }\n  }, [resolved])\n\n  const scrollByPage = (dir: 1 | -1) => () => {\n    const scroller = scrollerRef.current\n    if (typeof scroller?.scrollBy !== 'function') return\n    // behavior omitted → follows the scroller's CSS scroll-behavior (smooth,\n    // motion-reduce → auto)\n    scroller.scrollBy({ left: dir * scroller.clientWidth * 0.6 })\n  }\n  const chevron = (dir: 1 | -1) => (\n    <button\n      aria-hidden=\"true\"\n      data-slot={dir === 1 ? 'tabs-scroll-next' : 'tabs-scroll-prev'}\n      onClick={scrollByPage(dir)}\n      tabIndex={-1}\n      type=\"button\"\n      className={cn(\n        'absolute top-1/2 z-1 hidden size-10 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] bg-gray-1/72 text-gray-a11 backdrop-blur-sm hover:text-gray-12',\n        dir === 1\n          ? 'right-0 group-data-overflow-end/tabs:flex'\n          : 'left-0 group-data-overflow-start/tabs:flex',\n      )}\n    >\n      <MaterialSymbol name={dir === 1 ? 'chevron_right' : 'chevron_left'} />\n    </button>\n  )\n\n  return (\n    // the wrapper is the public box (data-slot tabs-list, consumer className +\n    // style) — group/tabs + data-variant here drive the trigger's group-data-[…]/tabs\n    // styling, and data-overflow-start/end (set above) show/hide the chevrons.\n    // className + style both land here so a consumer's layout (margin/width) moves\n    // the whole control, not just the inner scroller (which would offset the chevrons).\n    <div\n      className={cn('group/tabs relative inline-block max-w-full', className)}\n      data-slot=\"tabs-list\"\n      data-variant={resolved}\n      ref={wrapperRef}\n      style={style}\n    >\n      {chevron(-1)}\n      <TabsPrimitive.List\n        data-slot=\"tabs-scroller\"\n        ref={scrollerCallbackRef}\n        className={cn(\n          'relative no-scrollbar flex w-full items-stretch overflow-x-auto scroll-smooth motion-reduce:scroll-auto',\n          resolved === 'underline' && 'gap-2',\n          resolved === 'underline' &&\n            \"after:pointer-events-none after:absolute after:bottom-0 after:left-(--tabs-indicator-x,0px) after:h-1 after:w-(--tabs-indicator-w,0px) after:rounded-full after:bg-(--spark-tabs-indicator,var(--spark-indicator)) after:transition-[left,width] after:duration-200 after:ease-out after:content-[''] motion-reduce:after:transition-none\",\n          resolved === 'pill' && 'gap-0 rounded-md bg-gray-a3 p-1',\n        )}\n        {...props}\n      />\n      {chevron(1)}\n    </div>\n  )\n}\n\ntype TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Tab>\n\nfunction TabsTrigger({ className, children, ...props }: TabsTriggerProps) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        'group/trigger inline-flex min-w-(--tabs-trigger-minw,0px) shrink-0 cursor-pointer scroll-mx-10 items-center justify-center whitespace-nowrap text-gray-12 transition-colors',\n        'data-active:text-(--spark-tabs-ink,var(--spark-a11))',\n        'focus-visible:outline-hidden',\n        'group-data-[variant=pill]/tabs:focus-visible:ring-2 group-data-[variant=pill]/tabs:focus-visible:ring-offset-1',\n        'data-disabled:pointer-events-none data-disabled:text-gray-a8',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        'group-data-[variant=underline]/tabs:min-h-12 group-data-[variant=underline]/tabs:px-1 group-data-[variant=underline]/tabs:text-base group-data-[variant=underline]/tabs:font-bold group-data-[variant=underline]/tabs:[--tabs-trigger-minw:5rem]',\n        'group-data-[variant=underline]/tabs:border-b-2 group-data-[variant=underline]/tabs:border-gray-a5',\n        'group-data-[variant=pill]/tabs:h-8 group-data-[variant=pill]/tabs:rounded-sm group-data-[variant=pill]/tabs:px-4 group-data-[variant=pill]/tabs:text-sm group-data-[variant=pill]/tabs:font-medium',\n        'group-data-[variant=pill]/tabs:not-data-active:hover:bg-gray-a3',\n        'group-data-[variant=pill]/tabs:data-active:bg-gray-1 group-data-[variant=pill]/tabs:data-active:shadow-sm dark:group-data-[variant=pill]/tabs:data-active:bg-gray-a4 dark:group-data-[variant=pill]/tabs:data-active:inset-ring dark:group-data-[variant=pill]/tabs:data-active:inset-ring-gray-a6',\n        className,\n      )}\n      {...props}\n    >\n      {/* the Radix two-box anatomy: the hover paints this compact label box (with\n          clearance above the bar/track), not the full 48px hit target */}\n      <span\n        data-slot=\"tabs-trigger-inner\"\n        className={cn(\n          'inline-flex items-center gap-1',\n          'group-data-[variant=underline]/tabs:rounded-md group-data-[variant=underline]/tabs:px-2 group-data-[variant=underline]/tabs:py-1 group-data-[variant=underline]/tabs:transition-colors',\n          'group-data-[variant=underline]/tabs:group-hover/trigger:bg-gray-a3',\n          'group-data-[variant=underline]/tabs:group-focus-visible/trigger:ring-2 group-data-[variant=underline]/tabs:group-focus-visible/trigger:ring-offset-1',\n        )}\n      >\n        {children}\n      </span>\n    </TabsPrimitive.Tab>\n  )\n}\n\n/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */\nconst TabsTriggerUnderline = TabsTrigger\n\n/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */\nconst TabsTriggerPill = TabsTrigger\n\ntype TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Panel>\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\n        'focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  TabsTriggerPill,\n  TabsTriggerUnderline,\n}\nexport type { TabsListProps, TabsListVariant, TabsProps, TabsTriggerProps }\n"],"mappings":"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"}
+{"version":3,"file":"tabs.cjs","names":["React","TabsPrimitive","MaterialSymbol"],"sources":["../../src/components/tabs.tsx"],"sourcesContent":["import { Tabs as TabsPrimitive } from '@base-ui/react/tabs'\nimport * as React from 'react'\nimport { MaterialSymbol } from '../icons/material-symbol'\nimport { cn } from '../utils/cn'\n\n// useLayoutEffect warns during SSR; the isomorphic swap is the standard Radix idiom.\nconst useIsomorphicLayoutEffect =\n  typeof window === 'undefined' ? React.useEffect : React.useLayoutEffect\n\n// Merge our internal scroller ref with a consumer-forwarded ref. Written locally\n// and React 19-correct: it propagates cleanup-returning callback refs and nulls\n// plain refs on unmount.\ntype PossibleRef<T> = React.Ref<T> | undefined\n\nfunction setRef<T>(ref: PossibleRef<T>, value: T | null) {\n  if (typeof ref === 'function') return ref(value)\n  if (ref) ref.current = value\n  return undefined\n}\n\nfunction composeRefs<T>(...refs: PossibleRef<T>[]) {\n  return (node: T) => {\n    let hasCleanup = false\n    const cleanups = refs.map((ref) => {\n      const cleanup = setRef(ref, node)\n      if (typeof cleanup === 'function') hasCleanup = true\n      return cleanup\n    })\n    if (hasCleanup) {\n      return () => {\n        for (let i = 0; i < refs.length; i++) {\n          const cleanup = cleanups[i]\n          if (typeof cleanup === 'function') cleanup()\n          else setRef(refs[i], null)\n        }\n      }\n    }\n    return undefined\n  }\n}\n\ntype TabsProps = React.ComponentProps<typeof TabsPrimitive.Root>\n\nfunction Tabs(props: TabsProps) {\n  return <TabsPrimitive.Root data-slot=\"tabs\" {...props} />\n}\n\ntype TabsListVariant = 'underline'\n\n/**\n * @deprecated Not part of Spark's tab design — use `'underline'`. `'pill'` (a\n * segmented control) and the old text-only `'default'` still render for\n * back-compat but are undocumented and may be removed.\n */\ntype TabsListVariantLegacy = 'default' | 'pill'\n\ntype TabsListProps = Omit<\n  React.ComponentProps<typeof TabsPrimitive.List>,\n  'style'\n> & {\n  /** `underline` — the Spark tab: bold label + a sliding accent bar. */\n  variant?: TabsListVariant | TabsListVariantLegacy\n  // style lands on the plain wrapper div, so no Base UI state-callback form\n  style?: React.CSSProperties\n}\n\n// how much of a neighboring tab a scroll-into-view reveals (matches scroll-mx-10)\nconst REVEAL_PEEK = 40\n// worm indicator: the accent bar stretches across old+new, then contracts to the\n// new tab. WORM_MS must be >= the bar's CSS transition (200ms) so the stretch fully\n// settles before the contract begins — then contract sets left+width from rest in\n// one synced transition, pinning the leading edge so the motion never jiggles (a\n// contract that starts mid-stretch desyncs the two edges → wobble on big jumps).\nconst WORM_MS = 210\n\nfunction TabsList({\n  className,\n  style,\n  variant = 'underline',\n  ref,\n  ...props\n}: TabsListProps) {\n  // 'underline' is the only real variant. Deprecated 'pill' still renders (a\n  // segmented control, kept for back-compat); anything else (incl. the old\n  // text-only 'default') folds into underline.\n  const resolved = variant === 'pill' ? 'pill' : 'underline'\n  const wrapperRef = React.useRef<HTMLDivElement | null>(null)\n  const scrollerRef = React.useRef<HTMLDivElement | null>(null)\n  // stable identity (keyed on the forwarded ref) so React doesn't detach/re-attach\n  // the scroller ref on every render — TabsList re-renders on each selection.\n  const scrollerCallbackRef = React.useMemo(\n    () => composeRefs<HTMLDivElement>(scrollerRef, ref),\n    [ref],\n  )\n\n  // Sliding underline + overflow state + travel-into-view. The bar lives on the\n  // SCROLLER (::after scrolls with the content) and follows the active trigger via\n  // two measured vars; useLayoutEffect measures before paint (no flash); the\n  // MutationObserver tracks selection + children + text changes; the ResizeObserver\n  // re-measures on container/scroller reflow. Together they cover everything that\n  // moves a tab: selection, add/remove, a counter Badge growing, and resize.\n  useIsomorphicLayoutEffect(() => {\n    const wrapper = wrapperRef.current\n    const scroller = scrollerRef.current\n    if (!wrapper || !scroller) return\n    // the edge chevrons show per side while more content hides in that direction\n    const syncOverflow = () => {\n      // 2px epsilon absorbs sub-pixel rounding at fractional browser zoom\n      // (scrollWidth/clientWidth round to int, scrollLeft is fractional). Assumes\n      // LTR (scrollLeft >= 0) — Spark's tab strips are LTR.\n      const max = scroller.scrollWidth - scroller.clientWidth\n      wrapper.toggleAttribute('data-overflow-start', scroller.scrollLeft > 2)\n      wrapper.toggleAttribute(\n        'data-overflow-end',\n        scroller.scrollLeft < max - 2,\n      )\n    }\n    // scroller-local reveal — deliberately NOT scrollIntoView, which also scrolls\n    // ancestors and would yank the page when the list is half off-screen. The peek\n    // keeps the neighboring tab partially visible (\"there's more here\").\n    const reveal = (el: HTMLElement) => {\n      // jsdom (unit tests) doesn't implement Element.scrollTo\n      if (typeof scroller.scrollTo !== 'function') return\n      const start = el.offsetLeft - REVEAL_PEEK\n      const end = el.offsetLeft + el.offsetWidth + REVEAL_PEEK\n      if (start < scroller.scrollLeft) {\n        scroller.scrollTo({ left: Math.max(0, start) })\n      } else if (end > scroller.scrollLeft + scroller.clientWidth) {\n        scroller.scrollTo({ left: end - scroller.clientWidth })\n      }\n    }\n    // matchMedia guarded for jsdom (unit tests); read .matches live so toggling the\n    // OS reduce-motion setting mid-session takes effect on the next selection.\n    const motionQuery =\n      typeof window.matchMedia === 'function'\n        ? window.matchMedia('(prefers-reduced-motion: reduce)')\n        : null\n    const setBar = (x: number, w: number) => {\n      scroller.style.setProperty('--tabs-indicator-x', `${x}px`)\n      scroller.style.setProperty('--tabs-indicator-w', `${w}px`)\n    }\n    let lastActive: HTMLElement | null = null\n    let mounted = false\n    let wormTimer: ReturnType<typeof setTimeout> | undefined\n    const measure = () => {\n      const active = scroller.querySelector<HTMLElement>(\n        '[data-slot=\"tabs-trigger\"][data-active]',\n      )\n      const changed = active !== lastActive\n      if (resolved === 'underline') {\n        if (!active) {\n          // no selection → collapse the bar (width 0), forget the previous tab, and\n          // cancel any pending contract, so a later selection never worms from a\n          // stale/removed node\n          clearTimeout(wormTimer)\n          lastActive = null\n          scroller.style.setProperty('--tabs-indicator-w', '0px')\n        } else if (\n          changed &&\n          lastActive?.isConnected &&\n          mounted &&\n          !motionQuery?.matches\n        ) {\n          // worm: stretch across old + new (one edge holds, the other reaches),\n          // then contract to the new tab (the trailing edge catches up). The union\n          // makes it direction-agnostic. isConnected guards dynamic tab removal — a\n          // detached old node reports offsets of 0 and would sweep the bar from x=0.\n          const from = Math.min(lastActive.offsetLeft, active.offsetLeft)\n          const to = Math.max(\n            lastActive.offsetLeft + lastActive.offsetWidth,\n            active.offsetLeft + active.offsetWidth,\n          )\n          setBar(from, to - from)\n          clearTimeout(wormTimer)\n          const el = active\n          wormTimer = setTimeout(\n            () => setBar(el.offsetLeft, el.offsetWidth),\n            WORM_MS,\n          )\n        } else {\n          // first paint, reduced motion, detached previous, or a resize (same tab)\n          // → settle on the active tab, no worm\n          clearTimeout(wormTimer)\n          setBar(active.offsetLeft, active.offsetWidth)\n        }\n      }\n      syncOverflow()\n      // travel the active tab into view on selection change — and on mount, so a\n      // defaulted off-screen tab is visible. reveal() is scroller-local, so it never\n      // scrolls the page/ancestors.\n      if (active && changed) {\n        reveal(active)\n        lastActive = active\n      }\n      mounted = true\n    }\n    measure()\n    const readyFrame = requestAnimationFrame(() =>\n      scroller.setAttribute('data-indicator-ready', ''),\n    )\n    scroller.addEventListener('scroll', syncOverflow, { passive: true })\n    const mo = new MutationObserver(measure)\n    mo.observe(scroller, {\n      subtree: true,\n      childList: true,\n      // characterData catches a trigger's text growing (e.g. a counter Badge 9→120):\n      // in overflow the scroller's border-box is pinned, so that only changes\n      // scrollWidth (never reported by the ResizeObserver) yet shifts every tab.\n      characterData: true,\n      attributeFilter: ['data-active'],\n    })\n    const ro = new ResizeObserver(measure)\n    ro.observe(scroller)\n    return () => {\n      cancelAnimationFrame(readyFrame)\n      scroller.removeAttribute('data-indicator-ready')\n      scroller.removeEventListener('scroll', syncOverflow)\n      clearTimeout(wormTimer)\n      mo.disconnect()\n      ro.disconnect()\n    }\n  }, [resolved])\n\n  const scrollByPage = (dir: 1 | -1) => () => {\n    const scroller = scrollerRef.current\n    if (typeof scroller?.scrollBy !== 'function') return\n    // behavior omitted → follows the scroller's CSS scroll-behavior (smooth,\n    // motion-reduce → auto)\n    scroller.scrollBy({ left: dir * scroller.clientWidth * 0.6 })\n  }\n  const chevron = (dir: 1 | -1) => (\n    <button\n      aria-hidden=\"true\"\n      data-slot={dir === 1 ? 'tabs-scroll-next' : 'tabs-scroll-prev'}\n      onClick={scrollByPage(dir)}\n      tabIndex={-1}\n      type=\"button\"\n      className={cn(\n        'absolute top-1/2 z-1 hidden size-10 -translate-y-1/2 cursor-pointer items-center justify-center rounded-[max(var(--spark-rounded-md),var(--spark-rounded-full))] bg-gray-1/72 text-gray-a11 backdrop-blur-sm hover:text-gray-12',\n        dir === 1\n          ? 'right-0 group-data-overflow-end/tabs:flex'\n          : 'left-0 group-data-overflow-start/tabs:flex',\n      )}\n    >\n      <MaterialSymbol name={dir === 1 ? 'chevron_right' : 'chevron_left'} />\n    </button>\n  )\n\n  return (\n    // the wrapper is the public box (data-slot tabs-list, consumer className +\n    // style) — group/tabs + data-variant here drive the trigger's group-data-[…]/tabs\n    // styling, and data-overflow-start/end (set above) show/hide the chevrons.\n    // className + style both land here so a consumer's layout (margin/width) moves\n    // the whole control, not just the inner scroller (which would offset the chevrons).\n    <div\n      className={cn('group/tabs relative inline-block max-w-full', className)}\n      data-slot=\"tabs-list\"\n      data-variant={resolved}\n      ref={wrapperRef}\n      style={style}\n    >\n      {chevron(-1)}\n      <TabsPrimitive.List\n        data-slot=\"tabs-scroller\"\n        ref={scrollerCallbackRef}\n        className={cn(\n          'relative no-scrollbar flex w-full items-stretch overflow-x-auto scroll-smooth motion-reduce:scroll-auto',\n          resolved === 'underline' && 'gap-2',\n          resolved === 'underline' &&\n            // transition only once data-indicator-ready is set (a frame after the\n            // first measure) so the bar appears in place instead of sweeping in\n            \"after:pointer-events-none after:absolute after:bottom-0 after:left-(--tabs-indicator-x,0px) after:h-1 after:w-(--tabs-indicator-w,0px) after:rounded-full after:bg-(--spark-tabs-indicator,var(--spark-indicator)) after:transition-none after:duration-200 after:ease-out after:content-[''] data-indicator-ready:after:transition-[left,width] motion-reduce:after:transition-none!\",\n          resolved === 'pill' && 'gap-0 rounded-md bg-gray-a3 p-1',\n        )}\n        {...props}\n      />\n      {chevron(1)}\n    </div>\n  )\n}\n\ntype TabsTriggerProps = React.ComponentProps<typeof TabsPrimitive.Tab>\n\nfunction TabsTrigger({ className, children, ...props }: TabsTriggerProps) {\n  return (\n    <TabsPrimitive.Tab\n      data-slot=\"tabs-trigger\"\n      className={cn(\n        'group/trigger inline-flex min-w-(--tabs-trigger-minw,0px) shrink-0 cursor-pointer scroll-mx-10 items-center justify-center whitespace-nowrap text-gray-12 transition-colors',\n        'data-active:text-(--spark-tabs-ink,var(--spark-a11))',\n        'focus-visible:outline-hidden',\n        'group-data-[variant=pill]/tabs:focus-visible:ring-2 group-data-[variant=pill]/tabs:focus-visible:ring-offset-1',\n        'data-disabled:pointer-events-none data-disabled:text-gray-a8',\n        '[&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*=size-])]:size-4',\n        'group-data-[variant=underline]/tabs:min-h-12 group-data-[variant=underline]/tabs:px-1 group-data-[variant=underline]/tabs:text-base group-data-[variant=underline]/tabs:font-bold group-data-[variant=underline]/tabs:[--tabs-trigger-minw:5rem]',\n        'group-data-[variant=underline]/tabs:border-b-2 group-data-[variant=underline]/tabs:border-gray-a5',\n        'group-data-[variant=pill]/tabs:h-8 group-data-[variant=pill]/tabs:rounded-sm group-data-[variant=pill]/tabs:px-4 group-data-[variant=pill]/tabs:text-sm group-data-[variant=pill]/tabs:font-medium',\n        'group-data-[variant=pill]/tabs:not-data-active:hover:bg-gray-a3',\n        'group-data-[variant=pill]/tabs:data-active:bg-gray-1 group-data-[variant=pill]/tabs:data-active:shadow-sm dark:group-data-[variant=pill]/tabs:data-active:bg-gray-a4 dark:group-data-[variant=pill]/tabs:data-active:inset-ring dark:group-data-[variant=pill]/tabs:data-active:inset-ring-gray-a6',\n        className,\n      )}\n      {...props}\n    >\n      {/* the Radix two-box anatomy: the hover paints this compact label box (with\n          clearance above the bar/track), not the full 48px hit target */}\n      <span\n        data-slot=\"tabs-trigger-inner\"\n        className={cn(\n          'inline-flex items-center gap-1',\n          'group-data-[variant=underline]/tabs:rounded-md group-data-[variant=underline]/tabs:px-2 group-data-[variant=underline]/tabs:py-1 group-data-[variant=underline]/tabs:transition-colors',\n          'group-data-[variant=underline]/tabs:group-hover/trigger:bg-gray-a3',\n          'group-data-[variant=underline]/tabs:group-focus-visible/trigger:ring-2 group-data-[variant=underline]/tabs:group-focus-visible/trigger:ring-offset-1',\n        )}\n      >\n        {children}\n      </span>\n    </TabsPrimitive.Tab>\n  )\n}\n\n/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */\nconst TabsTriggerUnderline = TabsTrigger\n\n/** @deprecated Use `TabsTrigger` — it adapts to the `TabsList` variant automatically. */\nconst TabsTriggerPill = TabsTrigger\n\ntype TabsContentProps = React.ComponentProps<typeof TabsPrimitive.Panel>\n\nfunction TabsContent({ className, ...props }: TabsContentProps) {\n  return (\n    <TabsPrimitive.Panel\n      data-slot=\"tabs-content\"\n      className={cn(\n        'focus-visible:ring-2 focus-visible:ring-offset-0 focus-visible:outline-hidden',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nexport {\n  Tabs,\n  TabsContent,\n  TabsList,\n  TabsTrigger,\n  TabsTriggerPill,\n  TabsTriggerUnderline,\n}\nexport type { TabsListProps, TabsListVariant, TabsProps, TabsTriggerProps }\n"],"mappings":"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"}

package/dist/components/tabs.js

@@ -89,6 +89,7 @@ function TabsList({ className, style, variant = "underline", ref, ...props }) {
 			mounted = true;
 		};
 		measure();
+		const readyFrame = requestAnimationFrame(() => scroller.setAttribute("data-indicator-ready", ""));
 		scroller.addEventListener("scroll", syncOverflow, { passive: true });
 		const mo = new MutationObserver(measure);
 		mo.observe(scroller, {
@@ -100,6 +101,8 @@ function TabsList({ className, style, variant = "underline", ref, ...props }) {
 		const ro = new ResizeObserver(measure);
 		ro.observe(scroller);
 		return () => {
+			cancelAnimationFrame(readyFrame);
+			scroller.removeAttribute("data-indicator-ready");
 			scroller.removeEventListener("scroll", syncOverflow);
 			clearTimeout(wormTimer);
 			mo.disconnect();
@@ -131,7 +134,7 @@ function TabsList({ className, style, variant = "underline", ref, ...props }) {
 			/* @__PURE__ */ jsx(Tabs$1.List, {
 				"data-slot": "tabs-scroller",
 				ref: scrollerCallbackRef,
-				className: cn("relative no-scrollbar flex w-full items-stretch overflow-x-auto scroll-smooth motion-reduce:scroll-auto", resolved === "underline" && "gap-2", resolved === "underline" && "after:pointer-events-none after:absolute after:bottom-0 after:left-(--tabs-indicator-x,0px) after:h-1 after:w-(--tabs-indicator-w,0px) after:rounded-full after:bg-(--spark-tabs-indicator,var(--spark-indicator)) after:transition-[left,width] after:duration-200 after:ease-out after:content-[''] motion-reduce:after:transition-none", resolved === "pill" && "gap-0 rounded-md bg-gray-a3 p-1"),
+				className: cn("relative no-scrollbar flex w-full items-stretch overflow-x-auto scroll-smooth motion-reduce:scroll-auto", resolved === "underline" && "gap-2", resolved === "underline" && "after:pointer-events-none after:absolute after:bottom-0 after:left-(--tabs-indicator-x,0px) after:h-1 after:w-(--tabs-indicator-w,0px) after:rounded-full after:bg-(--spark-tabs-indicator,var(--spark-indicator)) after:transition-none after:duration-200 after:ease-out after:content-[''] data-indicator-ready:after:transition-[left,width] motion-reduce:after:transition-none!", resolved === "pill" && "gap-0 rounded-md bg-gray-a3 p-1"),
 				...props
 			}),
 			chevron(1)