@epilot/spark-ui 1.0.0-alpha.3 → 1.0.0-alpha.5

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-[var(--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-[var(--spark-rounded-sm)] bg-[var(--spark-slider-range,var(--spark-9))]',\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-[var(--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\n/**\n * The grab handle — a 16px accent knob. Corners follow the [data-radius] knob\n * (`--spark-rounded-lg`, matching the switch thumb): a circle at medium+, a\n * rounded square at small, a square at none. A background-colored separator ring\n * lifts it off the accent-filled range and a soft drop shadow adds depth; both\n * ride `--tw-shadow` so `focus-visible:ring` stays free. The invisible 24px hit\n * area meets the WCAG 2.5.8 target minimum.\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-[var(--spark-rounded-lg)] bg-[var(--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        'focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-[dragging]:ring data-[dragging]:ring-offset-2',\n        'disabled:pointer-events-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderThumb.displayName = 'SliderThumb'\n\n/**\n * Read-only value readout (`<output>`). Reads Base UI's own slider context, so\n * it stays formatted per the Root's `format`/`locale`. Pass a render function\n * for custom output, e.g. `{(f) => `${f[0]} €`}`.\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-[var(--spark-rounded-sm)] focus-visible:ring 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        '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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"}

package/dist/components/slider.d.cts

@@ -92,14 +92,6 @@ declare function SliderTicks({
 declare namespace SliderTicks {
   var displayName: string;
 }
-/**
- * The grab handle — a 16px accent knob. Corners follow the [data-radius] knob
- * (`--spark-rounded-lg`, matching the switch thumb): a circle at medium+, a
- * rounded square at small, a square at none. A background-colored separator ring
- * lifts it off the accent-filled range and a soft drop shadow adds depth; both
- * ride `--tw-shadow` so `focus-visible:ring` stays free. The invisible 24px hit
- * area meets the WCAG 2.5.8 target minimum.
- */
 declare function SliderThumb({
   className,
   ...props
@@ -107,11 +99,6 @@ declare function SliderThumb({
 declare namespace SliderThumb {
   var displayName: string;
 }
-/**
- * Read-only value readout (`<output>`). Reads Base UI's own slider context, so
- * it stays formatted per the Root's `format`/`locale`. Pass a render function
- * for custom output, e.g. `{(f) => `${f[0]} €`}`.
- */
 declare function SliderValue({
   className,
   ...props

package/dist/components/slider.d.ts

@@ -92,14 +92,6 @@ declare function SliderTicks({
 declare namespace SliderTicks {
   var displayName: string;
 }
-/**
- * The grab handle — a 16px accent knob. Corners follow the [data-radius] knob
- * (`--spark-rounded-lg`, matching the switch thumb): a circle at medium+, a
- * rounded square at small, a square at none. A background-colored separator ring
- * lifts it off the accent-filled range and a soft drop shadow adds depth; both
- * ride `--tw-shadow` so `focus-visible:ring` stays free. The invisible 24px hit
- * area meets the WCAG 2.5.8 target minimum.
- */
 declare function SliderThumb({
   className,
   ...props
@@ -107,11 +99,6 @@ declare function SliderThumb({
 declare namespace SliderThumb {
   var displayName: string;
 }
-/**
- * Read-only value readout (`<output>`). Reads Base UI's own slider context, so
- * it stays formatted per the Root's `format`/`locale`. Pass a render function
- * for custom output, e.g. `{(f) => `${f[0]} €`}`.
- */
 declare function SliderValue({
   className,
   ...props

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("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
 	});
 }
@@ -108,7 +108,7 @@ SliderControl.displayName = "SliderControl";
 function SliderTrack({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Slider$1.Track, {
 		"data-slot": "slider-track",
-		className: cn("relative h-3 w-full rounded-[var(--spark-rounded-sm)] bg-gray-a4", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3", className),
+		className: cn("relative h-3 w-full rounded-(--spark-rounded-sm) bg-gray-a4", "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-3", 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-[var(--spark-rounded-sm)] bg-[var(--spark-slider-range,var(--spark-9))]", className),
+		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),
 		...props
 	});
 }
@@ -149,34 +149,21 @@ function SliderTicks({ className, ...props }) {
 			const position = min + index * step;
 			const pct = (position - min) / (max - min) * 100;
 			return /* @__PURE__ */ jsx("span", {
-				className: cn("absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full", position >= bandLow && position <= bandHigh ? "bg-[var(--spark-slider-tick-on,var(--spark-on-solid,#fff))]" : "bg-gray-a8"),
+				className: cn("absolute top-1/2 size-1 -translate-x-1/2 -translate-y-1/2 rounded-full", position >= bandLow && position <= bandHigh ? "bg-(--spark-slider-tick-on,var(--spark-on-solid,#fff))" : "bg-gray-a8"),
 				style: { left: `${pct}%` }
 			}, index);
 		})
 	});
 }
 SliderTicks.displayName = "SliderTicks";
-/**
-* The grab handle — a 16px accent knob. Corners follow the [data-radius] knob
-* (`--spark-rounded-lg`, matching the switch thumb): a circle at medium+, a
-* rounded square at small, a square at none. A background-colored separator ring
-* lifts it off the accent-filled range and a soft drop shadow adds depth; both
-* ride `--tw-shadow` so `focus-visible:ring` stays free. The invisible 24px hit
-* area meets the WCAG 2.5.8 target minimum.
-*/
 function SliderThumb({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Slider$1.Thumb, {
 		"data-slot": "slider-thumb",
-		className: cn("block size-4 shrink-0 rounded-[var(--spark-rounded-lg)] bg-[var(--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-['']", "focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden", "data-[dragging]:ring data-[dragging]:ring-offset-2", "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-[inset-inline-start,top,box-shadow] duration-150 data-dragging:transition-none motion-reduce:transition-none", "disabled:pointer-events-none", className),
 		...props
 	});
 }
 SliderThumb.displayName = "SliderThumb";
-/**
-* Read-only value readout (`<output>`). Reads Base UI's own slider context, so
-* it stays formatted per the Root's `format`/`locale`. Pass a render function
-* for custom output, e.g. `{(f) => `${f[0]} €`}`.
-*/
 function SliderValue({ className, ...props }) {
 	return /* @__PURE__ */ jsx(Slider$1.Value, {
 		"data-slot": "slider-value",
@@ -250,7 +237,7 @@ function SliderInput({ className, index = 0, unit, disabled, onFocus, onBlur, on
 				if (event.key === "Enter") event.currentTarget.blur();
 				onKeyDown?.(event);
 			},
-			className: cn("w-16 bg-transparent tabular-nums outline-hidden", "rounded-[var(--spark-rounded-sm)] focus-visible:ring focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"),
+			className: cn("w-16 bg-transparent tabular-nums outline-hidden", "rounded-(--spark-rounded-sm) focus-visible:ring-2 focus-visible:ring-offset-2", "disabled:cursor-not-allowed disabled:opacity-50", "[appearance:textfield] [&::-webkit-inner-spin-button]:appearance-none [&::-webkit-outer-spin-button]:appearance-none"),
 			...props
 		}), unit ? /* @__PURE__ */ jsx("span", {
 			className: "text-sm text-gray",

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-[var(--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-[var(--spark-rounded-sm)] bg-[var(--spark-slider-range,var(--spark-9))]',\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-[var(--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\n/**\n * The grab handle — a 16px accent knob. Corners follow the [data-radius] knob\n * (`--spark-rounded-lg`, matching the switch thumb): a circle at medium+, a\n * rounded square at small, a square at none. A background-colored separator ring\n * lifts it off the accent-filled range and a soft drop shadow adds depth; both\n * ride `--tw-shadow` so `focus-visible:ring` stays free. The invisible 24px hit\n * area meets the WCAG 2.5.8 target minimum.\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-[var(--spark-rounded-lg)] bg-[var(--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        'focus-visible:ring focus-visible:ring-offset-2 focus-visible:outline-hidden',\n        'data-[dragging]:ring data-[dragging]:ring-offset-2',\n        'disabled:pointer-events-none',\n        className,\n      )}\n      {...props}\n    />\n  )\n}\n\nSliderThumb.displayName = 'SliderThumb'\n\n/**\n * Read-only value readout (`<output>`). Reads Base UI's own slider context, so\n * it stays formatted per the Root's `format`/`locale`. Pass a render function\n * for custom output, e.g. `{(f) => `${f[0]} €`}`.\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-[var(--spark-rounded-sm)] focus-visible:ring 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        '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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"}

package/dist/components/solar-forecast-chart.cjs

@@ -12,12 +12,12 @@ let react = require("react");
 let react_jsx_runtime = require("react/jsx-runtime");
 let cnfast = require("cnfast");
 //#region src/components/solar-forecast-chart.tsx
-const DEFAULT_HEIGHT = 180;
+const DEFAULT_HEIGHT = 220;
 const BASE_MARGIN = {
 	top: 8,
 	right: 8,
 	bottom: 28,
-	left: 8
+	left: 34
 };
 /** Extra headroom for the weather icon row pinned above the plot. */
 const WEATHER_ROW_HEIGHT = 24;
@@ -33,7 +33,7 @@ function defaultFormatTime(date) {
 * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its
 * container; compose a title and any summary around it.
 */
-function SolarForecastChart({ produced, forecast, producedLabel = "Produced", forecastLabel = "Forecast", formatValue = defaultFormatValue, formatTime = defaultFormatTime, formatTooltipTime, weather, sunrise, sunset, formatMarkerTime, curve = "monotone", height = DEFAULT_HEIGHT, className }) {
+function SolarForecastChart({ produced, forecast, producedLabel = "Produced", forecastLabel = "Forecast", formatValue = defaultFormatValue, yAxisUnit = "kW", formatTime = defaultFormatTime, formatTooltipTime, weather, sunrise, sunset, formatMarkerTime, curve = "monotone", height = DEFAULT_HEIGHT, className }) {
 	const containerRef = (0, react.useRef)(null);
 	const [width, setWidth] = (0, react.useState)(0);
 	(0, react.useEffect)(() => {
@@ -90,6 +90,7 @@ function SolarForecastChart({ produced, forecast, producedLabel = "Produced", fo
 			showGrid: true,
 			xTickCount: 6,
 			yTickCount: 4,
+			yAxisUnit,
 			formatDate: formatTime,
 			formatTooltipDate: formatTooltipTime ?? formatTime,
 			formatValue,

package/dist/components/solar-forecast-chart.cjs.map

@@ -1 +1 @@
-{"version":3,"file":"solar-forecast-chart.cjs","names":["oneDecimalFormat","MaterialSymbol","LineChart"],"sources":["../../src/components/solar-forecast-chart.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useEffect, useRef, useState } from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { cn } from '../utils/cn'\nimport { oneDecimalFormat } from '../utils/format'\nimport {\n  LineChart,\n  type LineChartCurve,\n  type LineChartDatum,\n} from './line-chart'\n\nconst DEFAULT_HEIGHT = 180\nconst BASE_MARGIN = { top: 8, right: 8, bottom: 28, left: 8 }\n/** Extra headroom for the weather icon row pinned above the plot. */\nconst WEATHER_ROW_HEIGHT = 24\n\nfunction defaultFormatValue(value: number): string {\n  return `${oneDecimalFormat.format(value)}${NARROW_NBSP}kW`\n}\n\nfunction defaultFormatTime(date: Date): string {\n  return date.getHours().toString().padStart(2, '0')\n}\n\nexport interface SolarForecastWeatherPoint {\n  date: Date\n  icon: MaterialSymbolIconName\n}\n\nexport interface SolarForecastChartProps {\n  /** Measured production, drawn as the solid line. */\n  produced: LineChartDatum[]\n  /** Predicted production, drawn as the dashed line. */\n  forecast: LineChartDatum[]\n  /** Tooltip label for the produced series. */\n  producedLabel?: ReactNode\n  /** Tooltip label for the forecast series. */\n  forecastLabel?: ReactNode\n  /** Y-axis + tooltip formatter. Defaults to one-decimal kW (power). */\n  formatValue?: (value: number) => string\n  /** X-axis tick formatter. Defaults to the zero-padded hour. */\n  formatTime?: (date: Date) => string\n  /** Tooltip time formatter. Defaults to `formatTime`. */\n  formatTooltipTime?: (date: Date) => string\n  /**\n   * Hourly weather icons drawn along the top of the plot, aligned to the time\n   * axis. Their dates must fall within the plotted day.\n   */\n  weather?: SolarForecastWeatherPoint[]\n  /** Sunrise time, drawn as a labelled vertical marker on the plot. */\n  sunrise?: Date\n  /** Sunset time, drawn as a labelled vertical marker on the plot. */\n  sunset?: Date\n  /** Label formatter for the sunrise/sunset markers. Defaults to `formatTime`. */\n  formatMarkerTime?: (date: Date) => string\n  curve?: LineChartCurve\n  height?: number\n  className?: string\n}\n\n/**\n * Responsive line plot of measured production (solid) against a forecast\n * (dashed) over a day. Optionally overlays hourly weather icons and\n * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its\n * container; compose a title and any summary around it.\n */\nexport function SolarForecastChart({\n  produced,\n  forecast,\n  producedLabel = 'Produced',\n  forecastLabel = 'Forecast',\n  formatValue = defaultFormatValue,\n  formatTime = defaultFormatTime,\n  formatTooltipTime,\n  weather,\n  sunrise,\n  sunset,\n  formatMarkerTime,\n  curve = 'monotone',\n  height = DEFAULT_HEIGHT,\n  className,\n}: SolarForecastChartProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n    const ro = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setWidth(entry.contentRect.width)\n    })\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [])\n\n  const hasWeather = weather != null && weather.length > 0\n  const margin = {\n    ...BASE_MARGIN,\n    top: hasWeather ? BASE_MARGIN.top + WEATHER_ROW_HEIGHT : BASE_MARGIN.top,\n  }\n  const formatMarker = formatMarkerTime ?? formatTooltipTime ?? formatTime\n\n  const topContent = hasWeather\n    ? weather.map((point, i) => ({\n        key: `weather-${point.date.valueOf()}-${i}`,\n        date: point.date,\n        content: (\n          <MaterialSymbol\n            name={point.icon}\n            className=\"text-(length:--spark-icon-size,18px)! text-gray-light\"\n          />\n        ),\n      }))\n    : undefined\n\n  const referenceLines = [\n    sunrise && { key: 'sunrise', date: sunrise, label: formatMarker(sunrise) },\n    sunset && { key: 'sunset', date: sunset, label: formatMarker(sunset) },\n  ].filter((x): x is { key: string; date: Date; label: string } => Boolean(x))\n\n  return (\n    <div ref={containerRef} className={cn('w-full', className)}>\n      {width > 0 && (\n        <LineChart\n          width={width}\n          height={height}\n          margin={margin}\n          curve={curve}\n          series={[\n            { id: 'produced', data: produced, label: producedLabel },\n            {\n              id: 'forecast',\n              data: forecast,\n              label: forecastLabel,\n              dashed: true,\n            },\n          ]}\n          showGrid\n          xTickCount={6}\n          yTickCount={4}\n          formatDate={formatTime}\n          formatTooltipDate={formatTooltipTime ?? formatTime}\n          formatValue={formatValue}\n          referenceLines={\n            referenceLines.length > 0 ? referenceLines : undefined\n          }\n          topContent={topContent}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default SolarForecastChart\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,iBAAiB;AACvB,MAAM,cAAc;CAAE,KAAK;CAAG,OAAO;CAAG,QAAQ;CAAI,MAAM;CAAG;;AAE7D,MAAM,qBAAqB;AAE3B,SAAS,mBAAmB,OAAuB;AACjD,QAAO,GAAGA,qBAAAA,iBAAiB,OAAO,MAAM;;AAG1C,SAAS,kBAAkB,MAAoB;AAC7C,QAAO,KAAK,UAAU,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI;;;;;;;;AA6CpD,SAAgB,mBAAmB,EACjC,UACA,UACA,gBAAgB,YAChB,gBAAgB,YAChB,cAAc,oBACd,aAAa,mBACb,mBACA,SACA,SACA,QACA,kBACA,QAAQ,YACR,SAAS,gBACT,aACuC;CACvC,MAAM,gBAAA,GAAA,MAAA,QAAsC,KAAK;CACjD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqB,EAAE;AAErC,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;EACT,MAAM,KAAK,IAAI,gBAAgB,YAAY;GACzC,MAAM,QAAQ,QAAQ;AACtB,OAAI,MAAO,UAAS,MAAM,YAAY,MAAM;IAC5C;AACF,KAAG,QAAQ,GAAG;AACd,eAAa,GAAG,YAAY;IAC3B,EAAE,CAAC;CAEN,MAAM,aAAa,WAAW,QAAQ,QAAQ,SAAS;CACvD,MAAM,SAAS;EACb,GAAG;EACH,KAAK,aAAa,YAAY,MAAM,qBAAqB,YAAY;EACtE;CACD,MAAM,eAAe,oBAAoB,qBAAqB;CAE9D,MAAM,aAAa,aACf,QAAQ,KAAK,OAAO,OAAO;EACzB,KAAK,WAAW,MAAM,KAAK,SAAS,CAAC,GAAG;EACxC,MAAM,MAAM;EACZ,SACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GACE,MAAM,MAAM;GACZ,WAAU;GACV,CAAA;EAEL,EAAE,GACH,KAAA;CAEJ,MAAM,iBAAiB,CACrB,WAAW;EAAE,KAAK;EAAW,MAAM;EAAS,OAAO,aAAa,QAAQ;EAAE,EAC1E,UAAU;EAAE,KAAK;EAAU,MAAM;EAAQ,OAAO,aAAa,OAAO;EAAE,CACvE,CAAC,QAAQ,MAAuD,QAAQ,EAAE,CAAC;AAE5E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,KAAK;EAAc,YAAA,GAAA,OAAA,IAAc,UAAU,UAAU;YACvD,QAAQ,KACP,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,WAAD;GACS;GACC;GACA;GACD;GACP,QAAQ,CACN;IAAE,IAAI;IAAY,MAAM;IAAU,OAAO;IAAe,EACxD;IACE,IAAI;IACJ,MAAM;IACN,OAAO;IACP,QAAQ;IACT,CACF;GACD,UAAA;GACA,YAAY;GACZ,YAAY;GACZ,YAAY;GACZ,mBAAmB,qBAAqB;GAC3B;GACb,gBACE,eAAe,SAAS,IAAI,iBAAiB,KAAA;GAEnC;GACZ,CAAA;EAEA,CAAA"}
+{"version":3,"file":"solar-forecast-chart.cjs","names":["oneDecimalFormat","MaterialSymbol","LineChart"],"sources":["../../src/components/solar-forecast-chart.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useEffect, useRef, useState } from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { cn } from '../utils/cn'\nimport { oneDecimalFormat } from '../utils/format'\nimport {\n  LineChart,\n  type LineChartCurve,\n  type LineChartDatum,\n} from './line-chart'\n\nconst DEFAULT_HEIGHT = 220\n// `left` leaves room for the y-axis tick labels + unit (matches the 34px gutter\n// used by BarChart / PowerHistoryChart).\nconst BASE_MARGIN = { top: 8, right: 8, bottom: 28, left: 34 }\n/** Extra headroom for the weather icon row pinned above the plot. */\nconst WEATHER_ROW_HEIGHT = 24\n\nfunction defaultFormatValue(value: number): string {\n  return `${oneDecimalFormat.format(value)}${NARROW_NBSP}kW`\n}\n\nfunction defaultFormatTime(date: Date): string {\n  return date.getHours().toString().padStart(2, '0')\n}\n\nexport interface SolarForecastWeatherPoint {\n  date: Date\n  icon: MaterialSymbolIconName\n}\n\nexport interface SolarForecastChartProps {\n  /** Measured production, drawn as the solid line. */\n  produced: LineChartDatum[]\n  /** Predicted production, drawn as the dashed line. */\n  forecast: LineChartDatum[]\n  /** Tooltip label for the produced series. */\n  producedLabel?: ReactNode\n  /** Tooltip label for the forecast series. */\n  forecastLabel?: ReactNode\n  /** Tooltip value formatter. Defaults to one-decimal kW (power). */\n  formatValue?: (value: number) => string\n  /** Unit shown once atop the y-axis; ticks render as plain numbers. Defaults to \"kW\". */\n  yAxisUnit?: string\n  /** X-axis tick formatter. Defaults to the zero-padded hour. */\n  formatTime?: (date: Date) => string\n  /** Tooltip time formatter. Defaults to `formatTime`. */\n  formatTooltipTime?: (date: Date) => string\n  /**\n   * Hourly weather icons drawn along the top of the plot, aligned to the time\n   * axis. Their dates must fall within the plotted day.\n   */\n  weather?: SolarForecastWeatherPoint[]\n  /** Sunrise time, drawn as a labelled vertical marker on the plot. */\n  sunrise?: Date\n  /** Sunset time, drawn as a labelled vertical marker on the plot. */\n  sunset?: Date\n  /** Label formatter for the sunrise/sunset markers. Defaults to `formatTime`. */\n  formatMarkerTime?: (date: Date) => string\n  curve?: LineChartCurve\n  height?: number\n  className?: string\n}\n\n/**\n * Responsive line plot of measured production (solid) against a forecast\n * (dashed) over a day. Optionally overlays hourly weather icons and\n * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its\n * container; compose a title and any summary around it.\n */\nexport function SolarForecastChart({\n  produced,\n  forecast,\n  producedLabel = 'Produced',\n  forecastLabel = 'Forecast',\n  formatValue = defaultFormatValue,\n  yAxisUnit = 'kW',\n  formatTime = defaultFormatTime,\n  formatTooltipTime,\n  weather,\n  sunrise,\n  sunset,\n  formatMarkerTime,\n  curve = 'monotone',\n  height = DEFAULT_HEIGHT,\n  className,\n}: SolarForecastChartProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n    const ro = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setWidth(entry.contentRect.width)\n    })\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [])\n\n  const hasWeather = weather != null && weather.length > 0\n  const margin = {\n    ...BASE_MARGIN,\n    top: hasWeather ? BASE_MARGIN.top + WEATHER_ROW_HEIGHT : BASE_MARGIN.top,\n  }\n  const formatMarker = formatMarkerTime ?? formatTooltipTime ?? formatTime\n\n  const topContent = hasWeather\n    ? weather.map((point, i) => ({\n        key: `weather-${point.date.valueOf()}-${i}`,\n        date: point.date,\n        content: (\n          <MaterialSymbol\n            name={point.icon}\n            className=\"text-(length:--spark-icon-size,18px)! text-gray-light\"\n          />\n        ),\n      }))\n    : undefined\n\n  const referenceLines = [\n    sunrise && { key: 'sunrise', date: sunrise, label: formatMarker(sunrise) },\n    sunset && { key: 'sunset', date: sunset, label: formatMarker(sunset) },\n  ].filter((x): x is { key: string; date: Date; label: string } => Boolean(x))\n\n  return (\n    <div ref={containerRef} className={cn('w-full', className)}>\n      {width > 0 && (\n        <LineChart\n          width={width}\n          height={height}\n          margin={margin}\n          curve={curve}\n          series={[\n            { id: 'produced', data: produced, label: producedLabel },\n            {\n              id: 'forecast',\n              data: forecast,\n              label: forecastLabel,\n              dashed: true,\n            },\n          ]}\n          showGrid\n          xTickCount={6}\n          yTickCount={4}\n          yAxisUnit={yAxisUnit}\n          formatDate={formatTime}\n          formatTooltipDate={formatTooltipTime ?? formatTime}\n          formatValue={formatValue}\n          referenceLines={\n            referenceLines.length > 0 ? referenceLines : undefined\n          }\n          topContent={topContent}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default SolarForecastChart\n"],"mappings":";;;;;;;;;;;;;;AAcA,MAAM,iBAAiB;AAGvB,MAAM,cAAc;CAAE,KAAK;CAAG,OAAO;CAAG,QAAQ;CAAI,MAAM;CAAI;;AAE9D,MAAM,qBAAqB;AAE3B,SAAS,mBAAmB,OAAuB;AACjD,QAAO,GAAGA,qBAAAA,iBAAiB,OAAO,MAAM;;AAG1C,SAAS,kBAAkB,MAAoB;AAC7C,QAAO,KAAK,UAAU,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI;;;;;;;;AA+CpD,SAAgB,mBAAmB,EACjC,UACA,UACA,gBAAgB,YAChB,gBAAgB,YAChB,cAAc,oBACd,YAAY,MACZ,aAAa,mBACb,mBACA,SACA,SACA,QACA,kBACA,QAAQ,YACR,SAAS,gBACT,aACuC;CACvC,MAAM,gBAAA,GAAA,MAAA,QAAsC,KAAK;CACjD,MAAM,CAAC,OAAO,aAAA,GAAA,MAAA,UAAqB,EAAE;AAErC,EAAA,GAAA,MAAA,iBAAgB;EACd,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;EACT,MAAM,KAAK,IAAI,gBAAgB,YAAY;GACzC,MAAM,QAAQ,QAAQ;AACtB,OAAI,MAAO,UAAS,MAAM,YAAY,MAAM;IAC5C;AACF,KAAG,QAAQ,GAAG;AACd,eAAa,GAAG,YAAY;IAC3B,EAAE,CAAC;CAEN,MAAM,aAAa,WAAW,QAAQ,QAAQ,SAAS;CACvD,MAAM,SAAS;EACb,GAAG;EACH,KAAK,aAAa,YAAY,MAAM,qBAAqB,YAAY;EACtE;CACD,MAAM,eAAe,oBAAoB,qBAAqB;CAE9D,MAAM,aAAa,aACf,QAAQ,KAAK,OAAO,OAAO;EACzB,KAAK,WAAW,MAAM,KAAK,SAAS,CAAC,GAAG;EACxC,MAAM,MAAM;EACZ,SACE,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,gBAAD;GACE,MAAM,MAAM;GACZ,WAAU;GACV,CAAA;EAEL,EAAE,GACH,KAAA;CAEJ,MAAM,iBAAiB,CACrB,WAAW;EAAE,KAAK;EAAW,MAAM;EAAS,OAAO,aAAa,QAAQ;EAAE,EAC1E,UAAU;EAAE,KAAK;EAAU,MAAM;EAAQ,OAAO,aAAa,OAAO;EAAE,CACvE,CAAC,QAAQ,MAAuD,QAAQ,EAAE,CAAC;AAE5E,QACE,iBAAA,GAAA,kBAAA,KAAC,OAAD;EAAK,KAAK;EAAc,YAAA,GAAA,OAAA,IAAc,UAAU,UAAU;YACvD,QAAQ,KACP,iBAAA,GAAA,kBAAA,KAACC,8BAAAA,WAAD;GACS;GACC;GACA;GACD;GACP,QAAQ,CACN;IAAE,IAAI;IAAY,MAAM;IAAU,OAAO;IAAe,EACxD;IACE,IAAI;IACJ,MAAM;IACN,OAAO;IACP,QAAQ;IACT,CACF;GACD,UAAA;GACA,YAAY;GACZ,YAAY;GACD;GACX,YAAY;GACZ,mBAAmB,qBAAqB;GAC3B;GACb,gBACE,eAAe,SAAS,IAAI,iBAAiB,KAAA;GAEnC;GACZ,CAAA;EAEA,CAAA"}

package/dist/components/solar-forecast-chart.d.cts

@@ -18,8 +18,10 @@ interface SolarForecastChartProps {
   producedLabel?: ReactNode;
   /** Tooltip label for the forecast series. */
   forecastLabel?: ReactNode;
-  /** Y-axis + tooltip formatter. Defaults to one-decimal kW (power). */
+  /** Tooltip value formatter. Defaults to one-decimal kW (power). */
   formatValue?: (value: number) => string;
+  /** Unit shown once atop the y-axis; ticks render as plain numbers. Defaults to "kW". */
+  yAxisUnit?: string;
   /** X-axis tick formatter. Defaults to the zero-padded hour. */
   formatTime?: (date: Date) => string;
   /** Tooltip time formatter. Defaults to `formatTime`. */
@@ -51,6 +53,7 @@ declare function SolarForecastChart({
   producedLabel,
   forecastLabel,
   formatValue,
+  yAxisUnit,
   formatTime,
   formatTooltipTime,
   weather,

package/dist/components/solar-forecast-chart.d.ts

@@ -18,8 +18,10 @@ interface SolarForecastChartProps {
   producedLabel?: ReactNode;
   /** Tooltip label for the forecast series. */
   forecastLabel?: ReactNode;
-  /** Y-axis + tooltip formatter. Defaults to one-decimal kW (power). */
+  /** Tooltip value formatter. Defaults to one-decimal kW (power). */
   formatValue?: (value: number) => string;
+  /** Unit shown once atop the y-axis; ticks render as plain numbers. Defaults to "kW". */
+  yAxisUnit?: string;
   /** X-axis tick formatter. Defaults to the zero-padded hour. */
   formatTime?: (date: Date) => string;
   /** Tooltip time formatter. Defaults to `formatTime`. */
@@ -51,6 +53,7 @@ declare function SolarForecastChart({
   producedLabel,
   forecastLabel,
   formatValue,
+  yAxisUnit,
   formatTime,
   formatTooltipTime,
   weather,

package/dist/components/solar-forecast-chart.js

@@ -7,12 +7,12 @@ import { LineChart } from "./line-chart.js";
 import { useEffect, useRef, useState } from "react";
 import { jsx } from "react/jsx-runtime";
 //#region src/components/solar-forecast-chart.tsx
-const DEFAULT_HEIGHT = 180;
+const DEFAULT_HEIGHT = 220;
 const BASE_MARGIN = {
 	top: 8,
 	right: 8,
 	bottom: 28,
-	left: 8
+	left: 34
 };
 /** Extra headroom for the weather icon row pinned above the plot. */
 const WEATHER_ROW_HEIGHT = 24;
@@ -28,7 +28,7 @@ function defaultFormatTime(date) {
 * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its
 * container; compose a title and any summary around it.
 */
-function SolarForecastChart({ produced, forecast, producedLabel = "Produced", forecastLabel = "Forecast", formatValue = defaultFormatValue, formatTime = defaultFormatTime, formatTooltipTime, weather, sunrise, sunset, formatMarkerTime, curve = "monotone", height = DEFAULT_HEIGHT, className }) {
+function SolarForecastChart({ produced, forecast, producedLabel = "Produced", forecastLabel = "Forecast", formatValue = defaultFormatValue, yAxisUnit = "kW", formatTime = defaultFormatTime, formatTooltipTime, weather, sunrise, sunset, formatMarkerTime, curve = "monotone", height = DEFAULT_HEIGHT, className }) {
 	const containerRef = useRef(null);
 	const [width, setWidth] = useState(0);
 	useEffect(() => {
@@ -85,6 +85,7 @@ function SolarForecastChart({ produced, forecast, producedLabel = "Produced", fo
 			showGrid: true,
 			xTickCount: 6,
 			yTickCount: 4,
+			yAxisUnit,
 			formatDate: formatTime,
 			formatTooltipDate: formatTooltipTime ?? formatTime,
 			formatValue,

package/dist/components/solar-forecast-chart.js.map

@@ -1 +1 @@
-{"version":3,"file":"solar-forecast-chart.js","names":[],"sources":["../../src/components/solar-forecast-chart.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useEffect, useRef, useState } from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { cn } from '../utils/cn'\nimport { oneDecimalFormat } from '../utils/format'\nimport {\n  LineChart,\n  type LineChartCurve,\n  type LineChartDatum,\n} from './line-chart'\n\nconst DEFAULT_HEIGHT = 180\nconst BASE_MARGIN = { top: 8, right: 8, bottom: 28, left: 8 }\n/** Extra headroom for the weather icon row pinned above the plot. */\nconst WEATHER_ROW_HEIGHT = 24\n\nfunction defaultFormatValue(value: number): string {\n  return `${oneDecimalFormat.format(value)}${NARROW_NBSP}kW`\n}\n\nfunction defaultFormatTime(date: Date): string {\n  return date.getHours().toString().padStart(2, '0')\n}\n\nexport interface SolarForecastWeatherPoint {\n  date: Date\n  icon: MaterialSymbolIconName\n}\n\nexport interface SolarForecastChartProps {\n  /** Measured production, drawn as the solid line. */\n  produced: LineChartDatum[]\n  /** Predicted production, drawn as the dashed line. */\n  forecast: LineChartDatum[]\n  /** Tooltip label for the produced series. */\n  producedLabel?: ReactNode\n  /** Tooltip label for the forecast series. */\n  forecastLabel?: ReactNode\n  /** Y-axis + tooltip formatter. Defaults to one-decimal kW (power). */\n  formatValue?: (value: number) => string\n  /** X-axis tick formatter. Defaults to the zero-padded hour. */\n  formatTime?: (date: Date) => string\n  /** Tooltip time formatter. Defaults to `formatTime`. */\n  formatTooltipTime?: (date: Date) => string\n  /**\n   * Hourly weather icons drawn along the top of the plot, aligned to the time\n   * axis. Their dates must fall within the plotted day.\n   */\n  weather?: SolarForecastWeatherPoint[]\n  /** Sunrise time, drawn as a labelled vertical marker on the plot. */\n  sunrise?: Date\n  /** Sunset time, drawn as a labelled vertical marker on the plot. */\n  sunset?: Date\n  /** Label formatter for the sunrise/sunset markers. Defaults to `formatTime`. */\n  formatMarkerTime?: (date: Date) => string\n  curve?: LineChartCurve\n  height?: number\n  className?: string\n}\n\n/**\n * Responsive line plot of measured production (solid) against a forecast\n * (dashed) over a day. Optionally overlays hourly weather icons and\n * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its\n * container; compose a title and any summary around it.\n */\nexport function SolarForecastChart({\n  produced,\n  forecast,\n  producedLabel = 'Produced',\n  forecastLabel = 'Forecast',\n  formatValue = defaultFormatValue,\n  formatTime = defaultFormatTime,\n  formatTooltipTime,\n  weather,\n  sunrise,\n  sunset,\n  formatMarkerTime,\n  curve = 'monotone',\n  height = DEFAULT_HEIGHT,\n  className,\n}: SolarForecastChartProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n    const ro = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setWidth(entry.contentRect.width)\n    })\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [])\n\n  const hasWeather = weather != null && weather.length > 0\n  const margin = {\n    ...BASE_MARGIN,\n    top: hasWeather ? BASE_MARGIN.top + WEATHER_ROW_HEIGHT : BASE_MARGIN.top,\n  }\n  const formatMarker = formatMarkerTime ?? formatTooltipTime ?? formatTime\n\n  const topContent = hasWeather\n    ? weather.map((point, i) => ({\n        key: `weather-${point.date.valueOf()}-${i}`,\n        date: point.date,\n        content: (\n          <MaterialSymbol\n            name={point.icon}\n            className=\"text-(length:--spark-icon-size,18px)! text-gray-light\"\n          />\n        ),\n      }))\n    : undefined\n\n  const referenceLines = [\n    sunrise && { key: 'sunrise', date: sunrise, label: formatMarker(sunrise) },\n    sunset && { key: 'sunset', date: sunset, label: formatMarker(sunset) },\n  ].filter((x): x is { key: string; date: Date; label: string } => Boolean(x))\n\n  return (\n    <div ref={containerRef} className={cn('w-full', className)}>\n      {width > 0 && (\n        <LineChart\n          width={width}\n          height={height}\n          margin={margin}\n          curve={curve}\n          series={[\n            { id: 'produced', data: produced, label: producedLabel },\n            {\n              id: 'forecast',\n              data: forecast,\n              label: forecastLabel,\n              dashed: true,\n            },\n          ]}\n          showGrid\n          xTickCount={6}\n          yTickCount={4}\n          formatDate={formatTime}\n          formatTooltipDate={formatTooltipTime ?? formatTime}\n          formatValue={formatValue}\n          referenceLines={\n            referenceLines.length > 0 ? referenceLines : undefined\n          }\n          topContent={topContent}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default SolarForecastChart\n"],"mappings":";;;;;;;;;AAcA,MAAM,iBAAiB;AACvB,MAAM,cAAc;CAAE,KAAK;CAAG,OAAO;CAAG,QAAQ;CAAI,MAAM;CAAG;;AAE7D,MAAM,qBAAqB;AAE3B,SAAS,mBAAmB,OAAuB;AACjD,QAAO,GAAG,iBAAiB,OAAO,MAAM;;AAG1C,SAAS,kBAAkB,MAAoB;AAC7C,QAAO,KAAK,UAAU,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI;;;;;;;;AA6CpD,SAAgB,mBAAmB,EACjC,UACA,UACA,gBAAgB,YAChB,gBAAgB,YAChB,cAAc,oBACd,aAAa,mBACb,mBACA,SACA,SACA,QACA,kBACA,QAAQ,YACR,SAAS,gBACT,aACuC;CACvC,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;AAErC,iBAAgB;EACd,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;EACT,MAAM,KAAK,IAAI,gBAAgB,YAAY;GACzC,MAAM,QAAQ,QAAQ;AACtB,OAAI,MAAO,UAAS,MAAM,YAAY,MAAM;IAC5C;AACF,KAAG,QAAQ,GAAG;AACd,eAAa,GAAG,YAAY;IAC3B,EAAE,CAAC;CAEN,MAAM,aAAa,WAAW,QAAQ,QAAQ,SAAS;CACvD,MAAM,SAAS;EACb,GAAG;EACH,KAAK,aAAa,YAAY,MAAM,qBAAqB,YAAY;EACtE;CACD,MAAM,eAAe,oBAAoB,qBAAqB;CAE9D,MAAM,aAAa,aACf,QAAQ,KAAK,OAAO,OAAO;EACzB,KAAK,WAAW,MAAM,KAAK,SAAS,CAAC,GAAG;EACxC,MAAM,MAAM;EACZ,SACE,oBAAC,gBAAD;GACE,MAAM,MAAM;GACZ,WAAU;GACV,CAAA;EAEL,EAAE,GACH,KAAA;CAEJ,MAAM,iBAAiB,CACrB,WAAW;EAAE,KAAK;EAAW,MAAM;EAAS,OAAO,aAAa,QAAQ;EAAE,EAC1E,UAAU;EAAE,KAAK;EAAU,MAAM;EAAQ,OAAO,aAAa,OAAO;EAAE,CACvE,CAAC,QAAQ,MAAuD,QAAQ,EAAE,CAAC;AAE5E,QACE,oBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,GAAG,UAAU,UAAU;YACvD,QAAQ,KACP,oBAAC,WAAD;GACS;GACC;GACA;GACD;GACP,QAAQ,CACN;IAAE,IAAI;IAAY,MAAM;IAAU,OAAO;IAAe,EACxD;IACE,IAAI;IACJ,MAAM;IACN,OAAO;IACP,QAAQ;IACT,CACF;GACD,UAAA;GACA,YAAY;GACZ,YAAY;GACZ,YAAY;GACZ,mBAAmB,qBAAqB;GAC3B;GACb,gBACE,eAAe,SAAS,IAAI,iBAAiB,KAAA;GAEnC;GACZ,CAAA;EAEA,CAAA"}
+{"version":3,"file":"solar-forecast-chart.js","names":[],"sources":["../../src/components/solar-forecast-chart.tsx"],"sourcesContent":["import { type JSX, type ReactNode, useEffect, useRef, useState } from 'react'\nimport {\n  MaterialSymbol,\n  type MaterialSymbolIconName,\n} from '../icons/material-symbol'\nimport { NARROW_NBSP } from '../utils/chars'\nimport { cn } from '../utils/cn'\nimport { oneDecimalFormat } from '../utils/format'\nimport {\n  LineChart,\n  type LineChartCurve,\n  type LineChartDatum,\n} from './line-chart'\n\nconst DEFAULT_HEIGHT = 220\n// `left` leaves room for the y-axis tick labels + unit (matches the 34px gutter\n// used by BarChart / PowerHistoryChart).\nconst BASE_MARGIN = { top: 8, right: 8, bottom: 28, left: 34 }\n/** Extra headroom for the weather icon row pinned above the plot. */\nconst WEATHER_ROW_HEIGHT = 24\n\nfunction defaultFormatValue(value: number): string {\n  return `${oneDecimalFormat.format(value)}${NARROW_NBSP}kW`\n}\n\nfunction defaultFormatTime(date: Date): string {\n  return date.getHours().toString().padStart(2, '0')\n}\n\nexport interface SolarForecastWeatherPoint {\n  date: Date\n  icon: MaterialSymbolIconName\n}\n\nexport interface SolarForecastChartProps {\n  /** Measured production, drawn as the solid line. */\n  produced: LineChartDatum[]\n  /** Predicted production, drawn as the dashed line. */\n  forecast: LineChartDatum[]\n  /** Tooltip label for the produced series. */\n  producedLabel?: ReactNode\n  /** Tooltip label for the forecast series. */\n  forecastLabel?: ReactNode\n  /** Tooltip value formatter. Defaults to one-decimal kW (power). */\n  formatValue?: (value: number) => string\n  /** Unit shown once atop the y-axis; ticks render as plain numbers. Defaults to \"kW\". */\n  yAxisUnit?: string\n  /** X-axis tick formatter. Defaults to the zero-padded hour. */\n  formatTime?: (date: Date) => string\n  /** Tooltip time formatter. Defaults to `formatTime`. */\n  formatTooltipTime?: (date: Date) => string\n  /**\n   * Hourly weather icons drawn along the top of the plot, aligned to the time\n   * axis. Their dates must fall within the plotted day.\n   */\n  weather?: SolarForecastWeatherPoint[]\n  /** Sunrise time, drawn as a labelled vertical marker on the plot. */\n  sunrise?: Date\n  /** Sunset time, drawn as a labelled vertical marker on the plot. */\n  sunset?: Date\n  /** Label formatter for the sunrise/sunset markers. Defaults to `formatTime`. */\n  formatMarkerTime?: (date: Date) => string\n  curve?: LineChartCurve\n  height?: number\n  className?: string\n}\n\n/**\n * Responsive line plot of measured production (solid) against a forecast\n * (dashed) over a day. Optionally overlays hourly weather icons and\n * sunrise/sunset markers, all pinned to the same time axis. Sizes itself to its\n * container; compose a title and any summary around it.\n */\nexport function SolarForecastChart({\n  produced,\n  forecast,\n  producedLabel = 'Produced',\n  forecastLabel = 'Forecast',\n  formatValue = defaultFormatValue,\n  yAxisUnit = 'kW',\n  formatTime = defaultFormatTime,\n  formatTooltipTime,\n  weather,\n  sunrise,\n  sunset,\n  formatMarkerTime,\n  curve = 'monotone',\n  height = DEFAULT_HEIGHT,\n  className,\n}: SolarForecastChartProps): JSX.Element {\n  const containerRef = useRef<HTMLDivElement>(null)\n  const [width, setWidth] = useState(0)\n\n  useEffect(() => {\n    const el = containerRef.current\n    if (!el) return\n    const ro = new ResizeObserver((entries) => {\n      const entry = entries[0]\n      if (entry) setWidth(entry.contentRect.width)\n    })\n    ro.observe(el)\n    return () => ro.disconnect()\n  }, [])\n\n  const hasWeather = weather != null && weather.length > 0\n  const margin = {\n    ...BASE_MARGIN,\n    top: hasWeather ? BASE_MARGIN.top + WEATHER_ROW_HEIGHT : BASE_MARGIN.top,\n  }\n  const formatMarker = formatMarkerTime ?? formatTooltipTime ?? formatTime\n\n  const topContent = hasWeather\n    ? weather.map((point, i) => ({\n        key: `weather-${point.date.valueOf()}-${i}`,\n        date: point.date,\n        content: (\n          <MaterialSymbol\n            name={point.icon}\n            className=\"text-(length:--spark-icon-size,18px)! text-gray-light\"\n          />\n        ),\n      }))\n    : undefined\n\n  const referenceLines = [\n    sunrise && { key: 'sunrise', date: sunrise, label: formatMarker(sunrise) },\n    sunset && { key: 'sunset', date: sunset, label: formatMarker(sunset) },\n  ].filter((x): x is { key: string; date: Date; label: string } => Boolean(x))\n\n  return (\n    <div ref={containerRef} className={cn('w-full', className)}>\n      {width > 0 && (\n        <LineChart\n          width={width}\n          height={height}\n          margin={margin}\n          curve={curve}\n          series={[\n            { id: 'produced', data: produced, label: producedLabel },\n            {\n              id: 'forecast',\n              data: forecast,\n              label: forecastLabel,\n              dashed: true,\n            },\n          ]}\n          showGrid\n          xTickCount={6}\n          yTickCount={4}\n          yAxisUnit={yAxisUnit}\n          formatDate={formatTime}\n          formatTooltipDate={formatTooltipTime ?? formatTime}\n          formatValue={formatValue}\n          referenceLines={\n            referenceLines.length > 0 ? referenceLines : undefined\n          }\n          topContent={topContent}\n        />\n      )}\n    </div>\n  )\n}\n\nexport default SolarForecastChart\n"],"mappings":";;;;;;;;;AAcA,MAAM,iBAAiB;AAGvB,MAAM,cAAc;CAAE,KAAK;CAAG,OAAO;CAAG,QAAQ;CAAI,MAAM;CAAI;;AAE9D,MAAM,qBAAqB;AAE3B,SAAS,mBAAmB,OAAuB;AACjD,QAAO,GAAG,iBAAiB,OAAO,MAAM;;AAG1C,SAAS,kBAAkB,MAAoB;AAC7C,QAAO,KAAK,UAAU,CAAC,UAAU,CAAC,SAAS,GAAG,IAAI;;;;;;;;AA+CpD,SAAgB,mBAAmB,EACjC,UACA,UACA,gBAAgB,YAChB,gBAAgB,YAChB,cAAc,oBACd,YAAY,MACZ,aAAa,mBACb,mBACA,SACA,SACA,QACA,kBACA,QAAQ,YACR,SAAS,gBACT,aACuC;CACvC,MAAM,eAAe,OAAuB,KAAK;CACjD,MAAM,CAAC,OAAO,YAAY,SAAS,EAAE;AAErC,iBAAgB;EACd,MAAM,KAAK,aAAa;AACxB,MAAI,CAAC,GAAI;EACT,MAAM,KAAK,IAAI,gBAAgB,YAAY;GACzC,MAAM,QAAQ,QAAQ;AACtB,OAAI,MAAO,UAAS,MAAM,YAAY,MAAM;IAC5C;AACF,KAAG,QAAQ,GAAG;AACd,eAAa,GAAG,YAAY;IAC3B,EAAE,CAAC;CAEN,MAAM,aAAa,WAAW,QAAQ,QAAQ,SAAS;CACvD,MAAM,SAAS;EACb,GAAG;EACH,KAAK,aAAa,YAAY,MAAM,qBAAqB,YAAY;EACtE;CACD,MAAM,eAAe,oBAAoB,qBAAqB;CAE9D,MAAM,aAAa,aACf,QAAQ,KAAK,OAAO,OAAO;EACzB,KAAK,WAAW,MAAM,KAAK,SAAS,CAAC,GAAG;EACxC,MAAM,MAAM;EACZ,SACE,oBAAC,gBAAD;GACE,MAAM,MAAM;GACZ,WAAU;GACV,CAAA;EAEL,EAAE,GACH,KAAA;CAEJ,MAAM,iBAAiB,CACrB,WAAW;EAAE,KAAK;EAAW,MAAM;EAAS,OAAO,aAAa,QAAQ;EAAE,EAC1E,UAAU;EAAE,KAAK;EAAU,MAAM;EAAQ,OAAO,aAAa,OAAO;EAAE,CACvE,CAAC,QAAQ,MAAuD,QAAQ,EAAE,CAAC;AAE5E,QACE,oBAAC,OAAD;EAAK,KAAK;EAAc,WAAW,GAAG,UAAU,UAAU;YACvD,QAAQ,KACP,oBAAC,WAAD;GACS;GACC;GACA;GACD;GACP,QAAQ,CACN;IAAE,IAAI;IAAY,MAAM;IAAU,OAAO;IAAe,EACxD;IACE,IAAI;IACJ,MAAM;IACN,OAAO;IACP,QAAQ;IACT,CACF;GACD,UAAA;GACA,YAAY;GACZ,YAAY;GACD;GACX,YAAY;GACZ,mBAAmB,qBAAqB;GAC3B;GACb,gBACE,eAAe,SAAS,IAAI,iBAAiB,KAAA;GAEnC;GACZ,CAAA;EAEA,CAAA"}

package/dist/components/stepper.cjs

@@ -47,7 +47,7 @@ const Stepper = react.forwardRef(({ value, onValueChange, onValueCommit, min = 0
 				"aria-label": decreaseLabel,
 				onClick: decrement,
 				disabled: disabled || atMin,
-				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
 					className: "text-[16px]",
 					name: "chevron_left"
@@ -63,7 +63,7 @@ const Stepper = react.forwardRef(({ value, onValueChange, onValueCommit, min = 0
 				"aria-label": increaseLabel,
 				onClick: increment,
 				disabled: disabled || atMax,
-				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-slate-a3 disabled:opacity-40 disabled:hover:bg-transparent",
+				className: "inline-flex size-8 items-center justify-center rounded-md text-gray transition-colors hover:bg-gray-a3 disabled:opacity-40 disabled:hover:bg-transparent",
 				children: /* @__PURE__ */ (0, react_jsx_runtime.jsx)(require_icons_material_symbol.MaterialSymbol, {
 					className: "text-[16px]",
 					name: "chevron_right"