{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "dependencies": [
    "react-aria-components"
  ],
  "files": [
    {
      "content": "export * as Slider from \"./namespace\";\nexport * from \"./slider\";\nexport * from \"./styles\";\n",
      "path": "src/registry/ui/slider/index.ts",
      "type": "registry:ui"
    },
    {
      "content": "\"use client\";\n\nimport { use } from \"react\";\nimport {\n  composeRenderProps,\n  SliderOutput as Output,\n  Slider,\n  SliderStateContext,\n  SliderThumb as Thumb,\n  SliderTrack as Track,\n} from \"react-aria-components\";\nimport { SliderStyles } from \"./styles\";\n\nexport interface SliderRootProps<T extends number | number[]>\n  extends React.ComponentProps<typeof Slider<T>> {}\n\nexport function SliderRoot<T extends number | number[]>({\n  className,\n  ...props\n}: SliderRootProps<T>) {\n  return (\n    <Slider\n      {...props}\n      className={composeRenderProps(className, (className) =>\n        SliderStyles.Root({ className })\n      )}\n      data-slot=\"slider-root\"\n    />\n  );\n}\n\nexport interface SliderTrackProps extends React.ComponentProps<typeof Track> {}\n\nexport function SliderTrack({ className, ...props }: SliderTrackProps) {\n  return (\n    <Track\n      {...props}\n      className={composeRenderProps(className, (className) =>\n        SliderStyles.Track({ className })\n      )}\n      data-slot=\"slider-track\"\n    />\n  );\n}\n\nexport interface SliderThumbProps extends React.ComponentProps<typeof Thumb> {}\n\nexport function SliderThumb({ className, ...props }: SliderThumbProps) {\n  const context = use(SliderStateContext);\n\n  if (!context) {\n    throw new Error(\"SliderThumb should be used within a Slider component.\");\n  }\n\n  return context.values.map((_value, idx) => (\n    <Thumb\n      {...props}\n      className={composeRenderProps(className, (className) =>\n        SliderStyles.Thumb({ className })\n      )}\n      data-slot=\"slider-thumb\"\n      index={idx}\n      // biome-ignore lint/suspicious/noArrayIndexKey: Using index as key is acceptable here since SliderThumbs are generated based on the number of values in the slider.\n      key={idx}\n    />\n  ));\n}\n\nexport interface SliderOutputProps\n  extends React.ComponentProps<typeof Output> {}\n\nexport function SliderOutput({ className, ...props }: SliderOutputProps) {\n  return (\n    <Output\n      {...props}\n      className={composeRenderProps(className, (className) =>\n        SliderStyles.Output({ className })\n      )}\n      data-slot=\"slider-output\"\n    />\n  );\n}\n\ninterface GetSliderRangeStyleProps {\n  getThumbPercent: (index: number) => number;\n  orientation: \"horizontal\" | \"vertical\";\n  values: number[];\n}\n\nfunction getSliderRangeStyle(\n  props: GetSliderRangeStyleProps\n): React.CSSProperties {\n  const { orientation, getThumbPercent, values } = props;\n\n  if (values.length === 1) {\n    return orientation === \"horizontal\"\n      ? { width: `${getThumbPercent(0) * 100}%` }\n      : { height: `${getThumbPercent(0) * 100}%` };\n  }\n\n  return orientation === \"horizontal\"\n    ? {\n        left: `${getThumbPercent(0) * 100}%`,\n        width: `${Math.abs(getThumbPercent(0) - getThumbPercent(1)) * 100}%`,\n      }\n    : {\n        bottom: `${getThumbPercent(0) * 100}%`,\n        height: `${Math.abs(getThumbPercent(0) - getThumbPercent(1)) * 100}%`,\n      };\n}\n\nexport interface SliderRangeProps extends React.ComponentProps<\"div\"> {}\n\nexport function SliderRange({ className, ...props }: SliderRangeProps) {\n  const context = use(SliderStateContext);\n\n  if (!context) {\n    throw new Error(\"SliderRange should be used within a Slider component.\");\n  }\n\n  const { orientation, getThumbPercent, values } = context;\n\n  return (\n    <div\n      {...props}\n      className={SliderStyles.Range({ className })}\n      style={getSliderRangeStyle({\n        getThumbPercent,\n        orientation,\n        values,\n      })}\n    />\n  );\n}\n\nexport interface SliderHeaderProps extends React.ComponentProps<\"div\"> {}\n\nexport function SliderHeader({ className, ...props }: SliderHeaderProps) {\n  return (\n    <div\n      {...props}\n      className={SliderStyles.Header({ className })}\n      data-slot=\"slider-header\"\n    />\n  );\n}\n",
      "path": "src/registry/ui/slider/slider.tsx",
      "type": "registry:ui"
    },
    {
      "content": "import { cva } from \"~/registry/lib/cva\";\n\nexport const SliderStyles = {\n  Header: cva({\n    base: [\"flex items-center justify-between gap-2\"],\n  }),\n  Output: cva({\n    base: [\"text-muted-foreground text-sm tabular-nums\"],\n  }),\n  Range: cva({\n    base: [\n      \"rounded-full bg-primary group-disabled/track:bg-background-disabled\",\n      \"group-orientation-horizontal/top-0 pointer-events-none absolute group-orientation-vertical/track:bottom-0 group-orientation-horizontal/track:h-full group-orientation-vertical/track:w-full\",\n    ],\n  }),\n  Root: cva({\n    base: [\n      \"flex flex-col gap-2\",\n      \"orientation-vertical:h-56 orientation-vertical:items-center\",\n      \"orientation-horizontal:w-full\",\n      \"disabled:opacity-50\",\n    ],\n  }),\n  Thumb: cva({\n    base: [\n      \"top-1/2 left-1/2 size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm ring-ring/50 transition-[color,box-shadow] hover:ring-4 focus-visible:outline-hidden focus-visible:ring-4 disabled:pointer-events-none disabled:opacity-50\",\n    ],\n  }),\n  Track: cva({\n    base: [\n      \"group/track relative rounded-full bg-zinc-200 disabled:bg-background-disabled dark:bg-zinc-800\",\n      \"orientation-horizontal:h-1.5 orientation-horizontal:w-full orientation-vertical:w-1.5 orientation-vertical:flex-1 grow\",\n    ],\n  }),\n};\n",
      "path": "src/registry/ui/slider/styles.ts",
      "type": "registry:ui"
    },
    {
      "content": "export {\n  SliderHeader as Header,\n  SliderOutput as Output,\n  SliderRange as Range,\n  SliderRoot as Root,\n  SliderThumb as Thumb,\n  SliderTrack as Track,\n} from \"./slider\";\n",
      "path": "src/registry/ui/slider/namespace.ts",
      "type": "registry:ui"
    }
  ],
  "name": "slider",
  "registryDependencies": [
    "@kanpeki/cva",
    "@kanpeki/custom-plugin"
  ],
  "type": "registry:ui"
}