Number Field

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

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. * * 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 an `<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 an `<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} />;}