Slider

import { cn as merge } from 'cn';
import type { VariantProps } from 'cva';
import { defineConfig } from 'cva/config';
import { getSchema } from 'cva/tools';

export const { cva, cx: cn } = defineConfig({
  cx: merge,
});

export type { VariantProps };
export { getSchema };

import { Slider as SliderPrimitive } from '@base-ui/react/slider';
import type * as React from 'react';

/**
 * Groups all parts of the slider.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Slider](https://caprice-ui.com/docs/components/slider)
 *
 * API Reference: [Base UI Slider](https://base-ui.com/react/components/slider#root)
 */
export namespace Slider {
  export type State = SliderPrimitive.Root.State;
  export type Props = React.ComponentProps<typeof SliderPrimitive.Root>;
  export type ChangeEventDetails = SliderPrimitive.Root.ChangeEventDetails;
  export type ChangeEventReason = SliderPrimitive.Root.ChangeEventReason;
  export type CommitEventDetails = SliderPrimitive.Root.CommitEventDetails;
  export type CommitEventReason = SliderPrimitive.Root.CommitEventReason;
}

export function Slider({ ...props }: Slider.Props) {
  return (
    <SliderPrimitive.Root data-slot="slider" {...props}>
      <SliderPrimitive.Value data-slot="slider-value" />
      <SliderPrimitive.Control data-slot="slider-control">
        <SliderPrimitive.Track data-slot="slider-track">
          <SliderPrimitive.Indicator data-slot="slider-indicator" />
          <SliderPrimitive.Thumb data-slot="slider-thumb" />
        </SliderPrimitive.Track>
      </SliderPrimitive.Control>
    </SliderPrimitive.Root>
  );
}