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 { Field as FieldPrimitive } from '@base-ui/react/field';import type * as React from 'react';import { cn } from '@/lib/utils';/** * Groups all parts of the field. * Renders a `<div>` element. * * Documentation: [Caprice UI Field](https://caprice-ui.com/docs/components/field) * * API Reference: [Base UI Field](https://base-ui.com/react/components/field) */export namespace Root {  export type State = FieldPrimitive.Root.State;  export type Props = React.ComponentProps<typeof FieldPrimitive.Root>;}export function Root({ ...props }: Root.Props) {  return <FieldPrimitive.Root data-slot="field" {...props} />;}/** * An accessible label that is automatically associated with the field control. * Renders a `<label>` element. * * Documentation: [Caprice UI Field](https://caprice-ui.com/docs/components/field) * * API Reference: [Base UI Field](https://base-ui.com/react/components/field#label) */export namespace Label {  export type Props = React.ComponentProps<typeof FieldPrimitive.Label>;  export type State = FieldPrimitive.Label.State;}export function Label({ className, ...props }: Label.Props) {  return (    <FieldPrimitive.Label      className={cn(        'flex select-none items-center gap-2 font-medium text-sm leading-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-data-disabled:cursor-not-allowed peer-data-disabled:opacity-50',        className      )}      data-slot="field-label"      {...props}    />  );}/** * The form control to label and validate. * Renders an `<input>` element. * * You can omit this part and use any Base UI input component instead. For example, * [Input](https://caprice-ui.com/docs/components/input), [Checkbox](https://caprice-ui.com/docs/components/checkbox), * or [Select](https://caprice-ui.com/docs/components/select), among others, will work with Field out of the box. * * Documentation: [Caprice UI Field](https://caprice-ui.com/docs/components/field) * * API Reference: [Base UI Field](https://base-ui.com/react/components/field#control) */export namespace Control {  export type Props = React.ComponentProps<typeof FieldPrimitive.Control>;  export type State = FieldPrimitive.Control.State;  export type ChangeEventDetails = FieldPrimitive.Control.ChangeEventDetails;  export type ChangeEventReason = FieldPrimitive.Control.ChangeEventReason;}export function Control({ ...props }: Control.Props) {  return <FieldPrimitive.Control data-slot="field-control" {...props} />;}/** * A paragraph with additional information about the field. * Renders a `<p>` element. * * Documentation: [Caprice UI Field](https://caprice-ui.com/docs/components/field) * * API Reference: [Base UI Field](https://base-ui.com/react/components/field#description) */export namespace Description {  export type Props = React.ComponentProps<typeof FieldPrimitive.Description>;  export type State = FieldPrimitive.Description.State;}export function Description({ ...props }: Description.Props) {  return <FieldPrimitive.Description data-slot="field-description" {...props} />;}/** * An error message displayed if the field control fails validation. * Renders a `<div>` element. * * Documentation: [Caprice UI Field](https://caprice-ui.com/docs/components/field) * * API Reference: [Base UI Field](https://base-ui.com/react/components/field#error) */export namespace Error {  export type Props = React.ComponentProps<typeof FieldPrimitive.Error>;  export type State = FieldPrimitive.Error.State;}// biome-ignore lint/suspicious/noShadowRestrictedNames: false positiveexport function Error({ ...props }: Error.Props) {  return <FieldPrimitive.Error data-slot="field-error" {...props} />;}/** * Used to display a custom message based on the field’s validity. * Requires `children` to be a function that accepts field validity state as an argument. * * Documentation: [Caprice UI Field](https://caprice-ui.com/docs/components/field) * * API Reference: [Base UI Field](https://base-ui.com/react/components/field#validity) */export namespace Validity {  export type State = FieldPrimitive.Validity.State;  export type Props = React.ComponentProps<typeof FieldPrimitive.Validity>;}export function Validity({ ...props }: Validity.Props) {  return <FieldPrimitive.Validity data-slot="field-validity" {...props} />;}/** * Groups individual items in a checkbox group or radio group with a label and description. * Renders a `<div>` element. * * Documentation: [Caprice UI Field](https://caprice-ui.com/docs/components/field) * * API Reference: [Base UI Field](https://base-ui.com/react/components/field#item) */export namespace Item {  export type State = FieldPrimitive.Item.State;  export type Props = React.ComponentProps<typeof FieldPrimitive.Item>;}export function Item({ ...props }: Item.Props) {  return <FieldPrimitive.Item data-slot="field-item" {...props} />;}