/**
 * @factory/ui — Slider (Radix `@radix-ui/react-slider` wrapper).
 * Radix handles value clamping, keyboard (arrows/PageUp-Down) and ARIA.
 */
import * as React from "react";
import * as RadixSlider from "@radix-ui/react-slider";
import { clsx } from "clsx";

export const Slider = React.forwardRef<
  React.ElementRef<typeof RadixSlider.Root>,
  React.ComponentPropsWithoutRef<typeof RadixSlider.Root>
>(({ className, ...props }, ref) => (
  <RadixSlider.Root
    ref={ref}
    className={clsx(
      "relative flex h-5 w-full touch-none select-none items-center",
      "focus-visible:outline-2 focus-visible:outline-offset-4 focus-visible:outline-ring",
      className,
    )}
    {...props}
  >
    <RadixSlider.Track className="relative h-1.5 grow rounded-full bg-secondary">
      <RadixSlider.Range className="absolute h-full rounded-full bg-primary" />
    </RadixSlider.Track>
    <RadixSlider.Thumb className="block h-4 w-4 rounded-full border border-input bg-card shadow-sm transition-transform focus:outline-none focus-visible:ring-2 focus-visible:ring-ring" />
  </RadixSlider.Root>
));
Slider.displayName = "Slider";