Number Field

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 { NumberField as NumberFieldPrimitive } from '@base-ui/react/number-field';
import { cn } from '@/lib/utils';

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

export function Root({ className, ...props }: Root.Props) {
  return <NumberFieldPrimitive.Root className={cn('')} data-slot="number-field" {...props} />;
}

/**
 * An interactive area where the user can click and drag to change the field value.
 * Renders a `<span>` element.
 *
 * Documentation: [Caprice UI Number Field](https://caprice-ui.com/docs/components/number-field)
 *
 * API Reference: [Base UI Number Field](https://base-ui.com/react/components/number-field#scrub-area)
 */
export namespace ScrubArea {
  export type State = NumberFieldPrimitive.ScrubArea.State;
  export type Props = React.ComponentProps<typeof NumberFieldPrimitive.ScrubArea>;
}

export function ScrubArea({ ...props }: ScrubArea.Props) {
  return <NumberFieldPrimitive.ScrubArea data-slot="number-field-scrub-area" {...props} />;
}

/**
 * A custom element to display instead of the native cursor while using the scrub area.
 * Renders a `<span>` element.
 *
 * This component uses the [Pointer Lock API](https://developer.mozilla.org/en-US/docs/Web/API/Pointer_Lock_API), which may prompt the browser to display a related notification. It is disabled
 * in Safari to avoid a layout shift that this notification causes there.
 *
 * Documentation: [Caprice UI Number Field](https://caprice-ui.com/docs/components/number-field)
 *
 * API Reference: [Base UI Number Field](https://base-ui.com/react/components/number-field#scrub-area-cursor)
 */
export namespace ScrubAreaCursor {
  export type State = NumberFieldPrimitive.ScrubAreaCursor.State;
  export type Props = React.ComponentProps<typeof NumberFieldPrimitive.ScrubAreaCursor>;
}

export function ScrubAreaCursor({ ...props }: ScrubAreaCursor.Props) {
  return (
    <NumberFieldPrimitive.ScrubAreaCursor data-slot="number-field-scrub-area-cursor" {...props} />
  );
}

/**
 * Groups the input with the increment and decrement buttons.
 * Renders a `<div>` element.
 *
 * Documentation: [Caprice UI Number Field](https://caprice-ui.com/docs/components/number-field)
 *
 * API Reference: [Base UI Number Field](https://base-ui.com/react/components/number-field#group)
 */
export namespace Group {
  export type State = NumberFieldPrimitive.Group.State;
  export type Props = React.ComponentProps<typeof NumberFieldPrimitive.Group>;
}
export function Group({ ...props }: Group.Props) {
  return <NumberFieldPrimitive.Group data-slot="number-field-group" {...props} />;
}

/**
 * The native input control in the number field.
 * Renders an `<input>` element.
 *
 * Documentation: [Caprice UI Number Field](https://caprice-ui.com/docs/components/number-field)
 *
 * API Reference: [Base UI Number Field](https://base-ui.com/react/components/number-field#input)
 */
export namespace Input {
  export type State = NumberFieldPrimitive.Input.State;
  export type Props = React.ComponentProps<typeof NumberFieldPrimitive.Input>;
}

export function Input({ ...props }: Input.Props) {
  return <NumberFieldPrimitive.Input data-slot="number-field-input" {...props} />;
}

/**
 * A stepper button that decreases the field value when clicked.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Number Field](https://caprice-ui.com/docs/components/number-field)
 *
 * API Reference: [Base UI Number Field](https://base-ui.com/react/components/number-field#decrement)
 */
export namespace Decrement {
  export type State = NumberFieldPrimitive.Decrement.State;
  export type Props = React.ComponentProps<typeof NumberFieldPrimitive.Decrement>;
}

export function Decrement({ ...props }: Decrement.Props) {
  return <NumberFieldPrimitive.Decrement data-slot="number-field-decrement" {...props} />;
}

/**
 * A stepper button that increases the field value when clicked.
 * Renders a `<button>` element.
 *
 * Documentation: [Caprice UI Number Field](https://caprice-ui.com/docs/components/number-field)
 *
 * API Reference: [Base UI Number Field](https://base-ui.com/react/components/number-field#increment)
 */
export namespace Increment {
  export type State = NumberFieldPrimitive.Increment.State;
  export type Props = React.ComponentProps<typeof NumberFieldPrimitive.Increment>;
}

export function Increment({ ...props }: Increment.Props) {
  return <NumberFieldPrimitive.Increment data-slot="number-field-increment" {...props} />;
}