{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "type": "registry:ui",
  "title": "Slider",
  "description": "Pick a number, or a range with two thumbs, by dragging or with the arrow keys.",
  "dependencies": [
    "@radix-ui/react-slider@^1.6.1",
    "tailwind-variants@^1.0.0"
  ],
  "registryDependencies": [
    "https://junco.madebytobi.com/r/field.json",
    "https://junco.madebytobi.com/r/junco-theme.json",
    "https://junco.madebytobi.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/junco/ui/slider.tsx",
      "type": "registry:ui",
      "content": "import * as React from \"react\";\nimport { tv, type VariantProps } from \"tailwind-variants\";\nimport { cn } from \"@/lib/utils\";\nimport * as SliderPrimitive from \"@radix-ui/react-slider\";\nimport { useFieldControl } from \"@/components/ui/field\";\n\nexport const sliderVariants = tv({\n  slots: {\n    root: [\n      \"relative flex w-full touch-none items-center select-none\",\n      \"data-[disabled]:cursor-not-allowed data-[disabled]:opacity-50\",\n      \"data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-40 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col\",\n    ],\n    track: \"relative grow overflow-hidden rounded-pill bg-border data-[orientation=vertical]:w-1.5\",\n    range: \"absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full\",\n    thumb: [\n      \"block rounded-pill border border-border-strong bg-surface shadow-float\",\n      \"transition-[transform,border-color] duration-fast ease-standard hover:border-primary\",\n      \"focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring\",\n      \"data-[disabled]:pointer-events-none\",\n    ],\n  },\n  variants: {\n    size: {\n      sm: { track: \"h-1\", thumb: \"size-3.5\" },\n      md: { track: \"h-1.5\", thumb: \"size-4\" },\n    },\n  },\n  defaultVariants: { size: \"md\" },\n});\n\nexport interface SliderProps\n  extends React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>,\n    VariantProps<typeof sliderVariants> {\n  /** One accessible name per thumb, e.g. [\"Minimum\", \"Maximum\"] for a range. A single thumb also takes `aria-label`. */\n  thumbLabels?: string[];\n  /** What screen readers say for a value, e.g. (v) => `${v} minutes`. */\n  getValueLabel?: (value: number) => string;\n  classNames?: { root?: string; track?: string; range?: string; thumb?: string };\n}\n\n/** Pick a number, or a range with two thumbs, by dragging or with the arrow keys. */\nexport const Slider = React.forwardRef<React.ElementRef<typeof SliderPrimitive.Root>, SliderProps>(\n  ({ className, classNames, size, thumbLabels, getValueLabel, \"aria-label\": ariaLabel, ...rest }, ref) => {\n    const { id, ...props } = useFieldControl(rest) as SliderProps;\n    // Thumbs are spans, which a <label for> can't name, so a Field's label is linked by id instead.\n    const fieldLabelId = !rest.id && id ? `${id}-label` : undefined;\n    const values = props.value ?? props.defaultValue ?? [props.min ?? 0];\n    const styles = sliderVariants({ size });\n    return (\n      <SliderPrimitive.Root ref={ref} className={styles.root({ className: cn(classNames?.root, className) })} {...props}>\n        <SliderPrimitive.Track className={styles.track({ className: classNames?.track })}>\n          <SliderPrimitive.Range className={styles.range({ className: classNames?.range })} />\n        </SliderPrimitive.Track>\n        {values.map((v, i) => (\n          <SliderPrimitive.Thumb\n            // biome-ignore lint/suspicious/noArrayIndexKey: thumbs are positional and never reorder\n            key={i}\n            id={i === 0 ? id : undefined}\n            aria-label={thumbLabels?.[i] ?? (values.length === 1 ? ariaLabel : undefined)}\n            aria-labelledby={i === 0 && !thumbLabels && !ariaLabel ? fieldLabelId : undefined}\n            aria-valuetext={getValueLabel?.(v)}\n            className={styles.thumb({ className: classNames?.thumb })}\n          />\n        ))}\n      </SliderPrimitive.Root>\n    );\n  },\n);\nSlider.displayName = \"Slider\";\n"
    }
  ],
  "docs": "Docs and examples: https://junco.madebytobi.com/docs/components/slider",
  "meta": {
    "hash": "387947453f7d24ef",
    "source": "packages/react/src/components/slider.tsx",
    "exports": [
      "sliderVariants",
      "SliderProps",
      "Slider"
    ],
    "props": {
      "Slider": {
        "extends": "React.ComponentPropsWithoutRef<typeof SliderPrimitive.Root>, VariantProps<typeof sliderVariants>",
        "props": [
          {
            "name": "thumbLabels",
            "optional": true,
            "type": "string[]",
            "description": "One accessible name per thumb, e.g. [\"Minimum\", \"Maximum\"] for a range. A single thumb also takes `aria-label`."
          },
          {
            "name": "getValueLabel",
            "optional": true,
            "type": "(value: number) => string",
            "description": "What screen readers say for a value, e.g. (v) => `${v} minutes`."
          },
          {
            "name": "classNames",
            "optional": true,
            "type": "{ root?: string; track?: string; range?: string; thumb?: string }"
          }
        ]
      }
    },
    "variants": {
      "variants": {
        "size": [
          "sm",
          "md"
        ]
      },
      "defaultVariants": {
        "size": "md"
      }
    },
    "docsUrl": "https://junco.madebytobi.com/docs/components/slider"
  }
}