{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "title": "Slider",
  "description": "One value, a range, or steps, read out in words.",
  "dependencies": [
    "@radix-ui/react-slider@^1.5.0"
  ],
  "registryDependencies": [
    "https://creance.pages.dev/r/creance-base.json"
  ],
  "files": [
    {
      "path": "slider/Slider.css",
      "content": ".cr-slider {\n  display: grid;\n  gap: var(--cr-space-3);\n  color: var(--cr-color-text-default);\n  font-family: var(--cr-font-family-sans);\n}\n\n.cr-slider[data-disabled] {\n  opacity: 0.55;\n}\n\n.cr-slider__head {\n  display: flex;\n  justify-content: space-between;\n  gap: var(--cr-space-3);\n}\n\n.cr-slider__label {\n  font-size: var(--cr-font-size-sm);\n  font-weight: var(--cr-font-weight-semibold);\n}\n\n.cr-slider__value {\n  font-size: var(--cr-font-size-md);\n  font-weight: var(--cr-font-weight-semibold);\n  font-variant-numeric: tabular-nums;\n}\n\n.cr-slider__root {\n  position: relative;\n  display: flex;\n  align-items: center;\n  height: 24px;\n  touch-action: none;\n  user-select: none;\n}\n\n.cr-slider__track {\n  position: relative;\n  flex: 1;\n  height: 6px;\n  overflow: hidden;\n  border-radius: var(--cr-radius-full);\n  background: var(--cr-color-border-default);\n}\n\n.cr-slider__range {\n  position: absolute;\n  height: 100%;\n  border-radius: var(--cr-radius-full);\n  background: var(--cr-color-ink-bg);\n}\n\n.cr-slider__thumb {\n  display: block;\n  width: 24px;\n  height: 24px;\n  border-radius: var(--cr-radius-full);\n  background: var(--cr-color-bg-raised);\n  box-shadow: 0 2px 6px var(--cr-color-border-strong), inset 0 0 0 0.5px var(--cr-color-border-default);\n  cursor: grab;\n}\n\n.cr-slider__thumb:active {\n  cursor: grabbing;\n}\n\n.cr-slider__thumb:focus-visible {\n  outline: var(--cr-focus-width) solid var(--cr-color-focus);\n  outline-offset: var(--cr-focus-offset);\n}\n\n.cr-slider__marks {\n  display: flex;\n  justify-content: space-between;\n  color: var(--cr-color-text-muted);\n  font-size: var(--cr-font-size-xs);\n}\n\n.cr-slider__marks [data-active] {\n  color: var(--cr-color-text-default);\n  font-weight: var(--cr-font-weight-semibold);\n}\n",
      "type": "registry:file",
      "target": "@components/creance/slider/Slider.css"
    },
    {
      "path": "slider/Slider.tsx",
      "content": "'use client';\n\nimport * as RadixSlider from '@radix-ui/react-slider';\nimport { useId, useState, type ReactNode } from 'react';\nimport { cx } from '@/lib/creance/cx';\nimport './Slider.css';\n\nexport interface SliderProps {\n  label: ReactNode;\n  /** One value, or two for a range. */\n  value?: number[];\n  defaultValue?: number[];\n  onValueChange?: (value: number[]) => void;\n  /** Fires once when the person lets go. */\n  onValueCommit?: (value: number[]) => void;\n  min?: number;\n  max?: number;\n  step?: number;\n  /** How a value reads, on screen and to screen readers: `(v) => `${v / 1000}K tokens``. */\n  formatValue?: (value: number) => string;\n  /** Names for the thumbs of a range, such as ['Minimum retry delay', 'Maximum retry delay']. */\n  thumbLabels?: string[];\n  /** Labels under the track. Use for stepped sliders; otherwise the ends show min and max. */\n  marks?: { value: number; label: ReactNode }[];\n  disabled?: boolean;\n  name?: string;\n  className?: string;\n}\n\n/** Radix Slider with a label and a live value. Arrow keys step; Page Up and Down take bigger steps. */\nexport function Slider({\n  label,\n  value,\n  defaultValue,\n  onValueChange,\n  onValueCommit,\n  min = 0,\n  max = 100,\n  step = 1,\n  formatValue = String,\n  thumbLabels,\n  marks,\n  disabled,\n  name,\n  className,\n}: SliderProps) {\n  const labelId = useId();\n  const [own, setOwn] = useState(defaultValue ?? [min]);\n  const current = value ?? own;\n  const shown = current.map(formatValue).join(' to ');\n  return (\n    <div className={cx('cr-slider', className)} data-disabled={disabled || undefined}>\n      <div className=\"cr-slider__head\">\n        <span id={labelId} className=\"cr-slider__label\">\n          {label}\n        </span>\n        <span className=\"cr-slider__value\" aria-hidden=\"true\">\n          {shown}\n        </span>\n      </div>\n      <RadixSlider.Root\n        className=\"cr-slider__root\"\n        value={current}\n        min={min}\n        max={max}\n        step={step}\n        disabled={disabled}\n        name={name}\n        onValueChange={(v) => {\n          if (value === undefined) setOwn(v);\n          onValueChange?.(v);\n        }}\n        onValueCommit={onValueCommit}\n      >\n        <RadixSlider.Track className=\"cr-slider__track\">\n          <RadixSlider.Range className=\"cr-slider__range\" />\n        </RadixSlider.Track>\n        {current.map((v, i) => (\n          <RadixSlider.Thumb\n            key={i}\n            className=\"cr-slider__thumb\"\n            aria-labelledby={thumbLabels?.[i] ? undefined : labelId}\n            aria-label={thumbLabels?.[i]}\n            aria-valuetext={formatValue(v)}\n          />\n        ))}\n      </RadixSlider.Root>\n      <div className=\"cr-slider__marks\" aria-hidden=\"true\">\n        {(marks ?? [\n          { value: min, label: formatValue(min) },\n          { value: max, label: formatValue(max) },\n        ]).map((m) => (\n          <span key={m.value} data-active={current.includes(m.value) || undefined}>\n            {m.label}\n          </span>\n        ))}\n      </div>\n    </div>\n  );\n}\n",
      "type": "registry:ui",
      "target": "@components/creance/slider/Slider.tsx"
    }
  ],
  "categories": [
    "molecule",
    "forms"
  ],
  "type": "registry:ui"
}