{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "tailwind-slider",
  "type": "registry:ui",
  "title": "Slider",
  "dependencies": [
    "react",
    "react-aria-components",
    "tailwind-variants",
    "tailwindcss-react-aria-components",
    "tw-animate-css"
  ],
  "registryDependencies": [
    "https://react-aria.adobe.com/registry/tailwind-field.json",
    "https://react-aria.adobe.com/registry/tailwind-utils.json"
  ],
  "files": [
    {
      "path": "components/ui/Slider.tsx",
      "type": "registry:ui",
      "content": "'use client';\nimport React from 'react';\nimport {\n  Slider as AriaSlider,\n  type SliderProps as AriaSliderProps,\n  SliderOutput,\n  SliderThumb,\n  SliderTrack,\n  SliderFill\n} from 'react-aria-components/Slider';\nimport {tv} from 'tailwind-variants';\nimport {Label} from '@/registry/react-aria/ui/Field';\nimport {composeTailwindRenderProps, focusRing} from '@/registry/react-aria/lib/react-aria-utils';\n\nconst trackStyles = tv({\n  base: 'relative rounded-full',\n  variants: {\n    orientation: {\n      horizontal: 'w-full h-[6px]',\n      vertical: 'h-full w-[6px] ml-[50%] -translate-x-[50%]'\n    },\n    isDisabled: {\n      false: 'bg-neutral-300 dark:bg-neutral-700 forced-colors:bg-[ButtonBorder]',\n      true: 'bg-neutral-200 dark:bg-neutral-800 forced-colors:bg-[ButtonBorder]'\n    }\n  }\n});\n\nconst fillStyles = tv({\n  base: 'rounded-full',\n  variants: {\n    isDisabled: {\n      false: 'bg-blue-500 forced-colors:bg-[Highlight]',\n      true: 'bg-neutral-300 dark:bg-neutral-600 forced-colors:bg-[GrayText]'\n    }\n  }\n});\n\nconst thumbStyles = tv({\n  extend: focusRing,\n  base: 'w-4.5 h-4.5 group-orientation-horizontal:mt-5 group-orientation-vertical:ml-2.5 rounded-full bg-neutral-50 dark:bg-neutral-900 border border-neutral-700 dark:border-neutral-300',\n  variants: {\n    isDragging: {\n      true: 'bg-neutral-700 dark:bg-neutral-300 forced-colors:bg-[ButtonBorder]'\n    },\n    isDisabled: {\n      true: 'border-neutral-300 dark:border-neutral-700 forced-colors:border-[GrayText]'\n    }\n  }\n});\n\nexport interface SliderProps<T> extends AriaSliderProps<T> {\n  /** Label for the slider. */\n  label?: string;\n  /** Aria labels for each thumb. */\n  thumbLabels?: string[];\n  /**\n   * The offset from which to start the fill.\n   *\n   * @default 0\n   */\n  fillOffset?: number;\n}\n\nexport function Slider<T extends number | number[]>({\n  label,\n  thumbLabels,\n  fillOffset,\n  ...props\n}: SliderProps<T>) {\n  return (\n    <AriaSlider\n      {...props}\n      className={composeTailwindRenderProps(\n        props.className,\n        'font-sans orientation-horizontal:grid orientation-vertical:flex grid-cols-[1fr_auto] flex-col items-center gap-2 orientation-horizontal:w-64 orientation-horizontal:max-w-[calc(100%-10px)]'\n      )}>\n      <Label>{label}</Label>\n      <SliderOutput className=\"text-sm text-neutral-500 dark:text-neutral-400 orientation-vertical:hidden\" />\n      <SliderTrack className=\"group col-span-2 orientation-horizontal:h-5 orientation-vertical:w-5 orientation-vertical:h-38 flex items-center\">\n        {({state, ...renderProps}) => (\n          <>\n            <div className={trackStyles(renderProps)}>\n              <SliderFill offset={fillOffset} className={fillStyles(renderProps)} />\n            </div>\n            {state.values.map((_, i) => (\n              <SliderThumb\n                key={i}\n                index={i}\n                aria-label={thumbLabels?.[i]}\n                className={thumbStyles}\n              />\n            ))}\n          </>\n        )}\n      </SliderTrack>\n    </AriaSlider>\n  );\n}\n"
    }
  ],
  "css": {
    "@plugin \"tailwindcss-react-aria-components\"": {},
    "@import \"tw-animate-css\"": {}
  }
}