Meter

import { defineConfig, getSchema, type VariantProps } from 'cva';
import { twMerge } from 'tailwind-merge';

export const { cva, cx: cn } = defineConfig({
  hooks: {
    onComplete: (className: string) => twMerge(className),
  },
});

export type { VariantProps };
export { getSchema };

import { Meter as MeterPrimitive } from '@base-ui/react/meter';

/**
 * Groups all parts of the meter and provides the value for screen readers.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Meter](https://caprice-ui.com/docs/components/meter)
 *
 * API Reference: [Base UI Meter](https://base-ui.com/react/components/meter#root)
 */
export namespace Root {
  export type State = MeterPrimitive.Root.State;
  export type Props = React.ComponentProps<typeof MeterPrimitive.Root>;
}

export function Root({ ...props }: Root.Props) {
  return <MeterPrimitive.Root data-slot="meter" {...props} />;
}

/**
 * Contains the meter indicator and represents the entire range of the meter.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Meter](https://caprice-ui.com/docs/components/meter)
 *
 * API Reference: [Base UI Meter](https://base-ui.com/react/components/meter#track)
 */
export namespace Track {
  export type Props = React.ComponentProps<typeof MeterPrimitive.Track>;
}

export function Track({ ...props }: Track.Props) {
  return <MeterPrimitive.Track data-slot="meter-track" {...props} />;
}

/**
 * Visualizes the position of the value along the range.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Meter](https://caprice-ui.com/docs/components/meter)
 *
 * API Reference: [Base UI Meter](https://base-ui.com/react/components/meter#indicator)
 */
export namespace Indicator {
  export type Props = React.ComponentProps<typeof MeterPrimitive.Indicator>;
}

export function Indicator({ ...props }: Indicator.Props) {
  return <MeterPrimitive.Indicator data-slot="meter-indicator" {...props} />;
}

/**
 * A text element displaying the current value.
 * Renders a `<span>` element.
 *
 * Documentation: [Caprice UI Meter](https://caprice-ui.com/docs/components/meter)
 *
 * API Reference: [Base UI Meter](https://base-ui.com/react/components/meter#value)
 */
export namespace Value {
  export type Props = React.ComponentProps<typeof MeterPrimitive.Value>;
}

export function Value({ ...props }: Value.Props) {
  return <MeterPrimitive.Value data-slot="meter-value" {...props} />;
}

/**
 * An accessible label for the meter.
 * Renders a `<span>` element.
 *
 * Documentation: [Caprice UI Meter](https://caprice-ui.com/docs/components/meter)
 *
 * API Reference: [Base UI Meter](https://base-ui.com/react/components/meter#label)
 */
export namespace Label {
  export type Props = React.ComponentProps<typeof MeterPrimitive.Label>;
}

export function Label({ ...props }: Label.Props) {
  return <MeterPrimitive.Label data-slot="meter-label" {...props} />;
}