{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "slider",
  "title": "Slider",
  "description": "A shadcn-style slider component built with Ark UI primitives.",
  "dependencies": ["@ark-ui/react"],
  "files": [
    {
      "path": "src/components/ui/slider.tsx",
      "content": "\"use client\";\n\nimport {\n  Slider as SliderPrimitive,\n  useSlider,\n  useSliderContext,\n} from \"@ark-ui/react/slider\";\nimport type { ReactNode } from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\nexport type {\n  SliderFocusChangeDetails,\n  SliderValueChangeDetails,\n} from \"@ark-ui/react/slider\";\nexport { useSlider, useSliderContext };\n\nconst normalizeValues = (\n  v: number | number[] | undefined,\n): number[] | undefined => {\n  if (v === undefined) {\n    return undefined;\n  }\n  return typeof v === \"number\" ? [v] : v;\n};\n\nexport type SliderProps = Omit<\n  SliderPrimitive.RootProps,\n  \"defaultValue\" | \"value\"\n> & {\n  defaultValue?: number | number[];\n  value?: number | number[];\n};\n\nexport const Slider = ({\n  className,\n  defaultValue,\n  value,\n  ...props\n}: SliderProps) => (\n  <SliderPrimitive.Root\n    className={cn(\n      \"group/slider flex w-full flex-col gap-2 text-foreground\",\n      \"data-disabled:opacity-50 data-invalid:text-destructive\",\n      className,\n    )}\n    data-slot=\"slider\"\n    defaultValue={normalizeValues(defaultValue)}\n    value={normalizeValues(value)}\n    {...props}\n  />\n);\n\nexport type SliderRootProviderProps = SliderPrimitive.RootProviderProps;\n\nexport const SliderRootProvider = ({\n  className,\n  ...props\n}: SliderRootProviderProps) => (\n  <SliderPrimitive.RootProvider\n    className={cn(\n      \"group/slider flex w-full flex-col gap-2 text-foreground\",\n      \"data-disabled:opacity-50 data-invalid:text-destructive\",\n      className,\n    )}\n    data-slot=\"slider-root-provider\"\n    {...props}\n  />\n);\n\nexport type SliderLabelProps = SliderPrimitive.LabelProps;\n\nexport const SliderLabel = ({ className, ...props }: SliderLabelProps) => (\n  <SliderPrimitive.Label\n    className={cn(\n      \"font-medium text-foreground text-sm leading-none select-none\",\n      className,\n    )}\n    data-slot=\"slider-label\"\n    {...props}\n  />\n);\n\nexport type SliderValueTextProps = SliderPrimitive.ValueTextProps;\n\nexport const SliderValueText = ({\n  className,\n  ...props\n}: SliderValueTextProps) => (\n  <SliderPrimitive.ValueText\n    className={cn(\n      \"font-variant-numeric text-foreground text-sm tabular-nums\",\n      className,\n    )}\n    data-slot=\"slider-value-text\"\n    {...props}\n  />\n);\n\nexport const SliderValue = SliderValueText;\n\nexport type SliderControlProps = SliderPrimitive.ControlProps;\n\nexport const SliderControl = ({ className, ...props }: SliderControlProps) => (\n  <SliderPrimitive.Control\n    className={cn(\n      \"relative flex w-full touch-none select-none items-center py-1.5\",\n      \"data-[orientation=vertical]:h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col data-[orientation=vertical]:py-0\",\n      className,\n    )}\n    data-slot=\"slider-control\"\n    {...props}\n  />\n);\n\nexport type SliderTrackProps = SliderPrimitive.TrackProps;\n\nexport const SliderTrack = ({ className, ...props }: SliderTrackProps) => (\n  <SliderPrimitive.Track\n    className={cn(\n      \"relative h-2 w-full grow overflow-hidden rounded-full bg-muted\",\n      \"group-data-invalid/slider:bg-destructive/15 dark:group-data-invalid/slider:bg-destructive/24\",\n      \"data-[orientation=vertical]:h-full data-[orientation=vertical]:w-2 data-[orientation=vertical]:shrink-0\",\n      className,\n    )}\n    data-slot=\"slider-track\"\n    {...props}\n  />\n);\n\nexport type SliderRangeProps = SliderPrimitive.RangeProps;\n\nexport const SliderRange = ({ className, ...props }: SliderRangeProps) => (\n  <SliderPrimitive.Range\n    className={cn(\n      \"absolute h-full rounded-full bg-primary\",\n      \"group-data-invalid/slider:bg-destructive\",\n      \"data-[orientation=vertical]:w-full\",\n      className,\n    )}\n    data-slot=\"slider-range\"\n    {...props}\n  />\n);\n\nexport type SliderThumbProps = SliderPrimitive.ThumbProps;\n\nexport const SliderThumb = ({ className, ...props }: SliderThumbProps) => (\n  <SliderPrimitive.Thumb\n    className={cn(\n      \"relative block size-5 shrink-0 cursor-grab rounded-full border-2 border-primary bg-background shadow-sm outline-none\",\n      \"focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background\",\n      \"group-data-invalid/slider:border-destructive group-data-invalid/slider:focus-visible:ring-destructive/24 dark:group-data-invalid/slider:focus-visible:ring-destructive/40\",\n      \"data-dragging:cursor-grabbing\",\n      \"data-disabled:pointer-events-none data-disabled:opacity-50\",\n      className,\n    )}\n    data-slot=\"slider-thumb\"\n    {...props}\n  />\n);\n\nexport type SliderHiddenInputProps = SliderPrimitive.HiddenInputProps;\n\nexport const SliderHiddenInput = (props: SliderHiddenInputProps) => (\n  <SliderPrimitive.HiddenInput data-slot=\"slider-hidden-input\" {...props} />\n);\n\nexport type SliderDraggingIndicatorProps =\n  SliderPrimitive.DraggingIndicatorProps;\n\nexport const SliderDraggingIndicator = ({\n  className,\n  style,\n  ...props\n}: SliderDraggingIndicatorProps) => (\n  <SliderPrimitive.DraggingIndicator\n    className={cn(\n      // Ark positions this element via `getDraggingIndicatorProps` (absolute + transform).\n      // Only add visual styling + an extra offset via the `translate` property\n      // (doesn't override `transform`).\n      \"pointer-events-none z-10 rounded-md bg-foreground px-2 py-1.5 font-medium text-background text-xs tabular-nums whitespace-nowrap shadow-sm\",\n      \"data-[state=closed]:opacity-0\",\n      // Horizontal: above the thumb. Vertical: to the side of the thumb.\n      \"[translate:0_calc(-100%-8px)] data-[orientation=vertical]:[translate:calc(100%)_0]\",\n      className,\n    )}\n    data-slot=\"slider-dragging-indicator\"\n    style={style}\n    {...props}\n  />\n);\n\nexport type SliderMarkerGroupProps = SliderPrimitive.MarkerGroupProps;\n\nexport const SliderMarkerGroup = ({\n  className,\n  ...props\n}: SliderMarkerGroupProps) => (\n  <SliderPrimitive.MarkerGroup\n    className={cn(\n      \"mt-2 flex w-full justify-between px-0.5\",\n      \"data-[orientation=vertical]:mt-0 data-[orientation=vertical]:h-full data-[orientation=vertical]:flex-col data-[orientation=vertical]:justify-between data-[orientation=vertical]:ps-3\",\n      className,\n    )}\n    data-slot=\"slider-marker-group\"\n    {...props}\n  />\n);\n\nexport type SliderMarkerProps = SliderPrimitive.MarkerProps;\n\nexport const SliderMarker = ({ className, ...props }: SliderMarkerProps) => (\n  <SliderPrimitive.Marker\n    className={cn(\n      \"relative text-center text-muted-foreground text-xs\",\n      \"before:absolute before:-top-2.5 before:left-1/2 before:size-1 before:-translate-x-1/2 before:rounded-full before:bg-border\",\n      \"data-[state=at-value]:before:bg-primary data-[state=under-value]:before:bg-primary\",\n      className,\n    )}\n    data-slot=\"slider-marker\"\n    {...props}\n  />\n);\n\nexport type SliderContextProps = SliderPrimitive.ContextProps;\n\nexport const SliderContext = (props: SliderContextProps) => (\n  <SliderPrimitive.Context {...props} />\n);\n\nexport type SliderFieldProps = Omit<SliderControlProps, \"children\"> & {\n  trackProps?: SliderTrackProps;\n  rangeProps?: SliderRangeProps;\n  thumbsProps?: {\n    children?: (index: number) => ReactNode;\n  };\n};\n\nexport const SliderField = ({\n  className,\n  trackProps,\n  rangeProps,\n  thumbsProps,\n  ...controlProps\n}: SliderFieldProps) => (\n  <SliderControl className={className} {...controlProps}>\n    <SliderTrack {...trackProps}>\n      <SliderRange {...rangeProps} />\n    </SliderTrack>\n    <SliderThumbs>{thumbsProps?.children}</SliderThumbs>\n  </SliderControl>\n);\n\nexport const SliderThumbs = ({\n  children,\n}: {\n  children?: (index: number) => ReactNode;\n}) => (\n  <SliderPrimitive.Context>\n    {({ value }) =>\n      value.map((_, index) => (\n        <SliderThumb key={index} index={index}>\n          {children?.(index)}\n          <SliderHiddenInput />\n        </SliderThumb>\n      ))\n    }\n  </SliderPrimitive.Context>\n);\n",
      "type": "registry:ui",
      "target": "src/components/ui/slider.tsx"
    }
  ],
  "type": "registry:ui"
}