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 { 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 positive
export 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} />;
}