{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "dependencies": [
    "react-aria-components",
    "tailwind-variants"
  ],
  "registryDependencies": [
    "https://taki-ui.com/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/new-york/ui/slider.tsx",
      "content": "\"use client\"\n\nimport React from \"react\"\nimport {\n  Slider as AriaSlider,\n  SliderProps as AriaSliderProps,\n  composeRenderProps,\n  SliderOutput,\n  SliderThumb,\n  SliderTrack,\n} from \"react-aria-components\"\nimport { tv } from \"tailwind-variants\"\n\nimport { cn, focusRing } from \"../lib/utils\"\nimport { FieldLabel } from \"./field\"\n\nconst trackStyles = tv({\n  base: \"rounded-full bg-muted relative overflow-hidden\",\n  variants: {\n    orientation: {\n      horizontal: \"w-full h-1.5\",\n      vertical: \"h-full w-1.5 ml-[50%] -translate-x-[50%]\",\n    },\n    isDisabled: {\n      false: \"\",\n      true: \"opacity-50\",\n    },\n  },\n})\n\nconst rangeStyles = tv({\n  base: \"bg-primary absolute\",\n  variants: {\n    orientation: {\n      horizontal: \"h-full\",\n      vertical: \"w-full\",\n    },\n  },\n})\n\nconst thumbStyles = tv({\n  extend: focusRing,\n  base: \"size-4 group-orientation-horizontal:mt-4 group-orientation-vertical:ml-3 rounded-full bg-white border border-primary shadow-sm transition-[color,box-shadow] outline-hidden\",\n  variants: {\n    isDragging: {\n      true: \"ring-4 ring-ring/50\",\n    },\n    isFocusVisible: {\n      true: \"ring-4 ring-ring/50\",\n    },\n    isDisabled: {\n      true: \"opacity-50 pointer-events-none\",\n    },\n  },\n})\n\nexport interface SliderProps<T> extends AriaSliderProps<T> {\n  label?: string\n  thumbLabels?: string[]\n}\n\nexport function Slider<T extends number | number[]>({\n  label,\n  thumbLabels,\n  ...props\n}: SliderProps<T>) {\n  return (\n    <AriaSlider\n      {...props}\n      className={composeRenderProps(props.className, (className) =>\n        cn(\n          \"orientation-horizontal:grid orientation-vertical:flex orientation-horizontal:w-64 grid-cols-[1fr_auto] flex-col items-center gap-2\",\n          className\n        )\n      )}\n    >\n      <FieldLabel>{label}</FieldLabel>\n      <SliderOutput className=\"orientation-vertical:hidden text-muted-foreground text-sm font-medium\">\n        {({ state }) =>\n          state.values.map((_, i) => state.getThumbValueLabel(i)).join(\" – \")\n        }\n      </SliderOutput>\n      <SliderTrack className=\"group orientation-horizontal:h-6 orientation-vertical:w-6 orientation-vertical:h-64 col-span-2 flex items-center\">\n        {({ state, ...renderProps }) => {\n          const orientation = renderProps.orientation || \"horizontal\"\n          const isHorizontal = orientation === \"horizontal\"\n          const minValue = state.getThumbMinValue(0)\n          const maxValue = state.getThumbMaxValue(state.values.length - 1)\n          const range = maxValue - minValue\n\n          const fillStart =\n            state.values.length > 1\n              ? ((state.values[0] - minValue) / range) * 100\n              : 0\n          const fillEnd =\n            state.values.length > 1\n              ? ((state.values[state.values.length - 1] - minValue) / range) *\n                100\n              : ((state.values[0] - minValue) / range) * 100\n          const fillSize = fillEnd - fillStart\n\n          return (\n            <>\n              <div className={trackStyles(renderProps)}>\n                <div\n                  className={rangeStyles({ orientation })}\n                  style={\n                    isHorizontal\n                      ? { left: `${fillStart}%`, width: `${fillSize}%` }\n                      : { bottom: `${fillStart}%`, height: `${fillSize}%` }\n                  }\n                />\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        }}\n      </SliderTrack>\n    </AriaSlider>\n  )\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}