Field

1"use client";
2 
3import "./field.css";
4import { Field as BaseField } from "@base-ui/react/field";
5import type React from "react";
6import { cn } from "tailwind-variants";
7 
8import { FieldContext, useFieldContext } from "./field.context";
9import { fieldVariants, type FieldVariants } from "./field.variants";
10 
11export type FieldProps = FieldVariants & React.ComponentProps<typeof BaseField.Root>;
12 
13export const FieldRoot = ({ children, className, size, ...props }: FieldProps) => {
14  const slots = fieldVariants({ size });
15 
16  return (
17    <FieldContext.Provider value={{ slots }}>
18      <BaseField.Root className={cn(slots.root(), className)} {...props}>
19        {children}
20      </BaseField.Root>
21    </FieldContext.Provider>
22  );
23};
24 
25export type FieldLabelProps = React.ComponentProps<typeof BaseField.Label>;
26 
27export const FieldLabel = ({ className, ...props }: FieldLabelProps) => {
28  const { slots } = useFieldContext();
29  return <BaseField.Label className={cn(slots.label(), className)} {...props} />;
30};
31 
32export type FieldControlProps = React.ComponentProps<typeof BaseField.Control>;
33 
34export const FieldControl = ({ className, ...props }: FieldControlProps) => {
35  const { slots } = useFieldContext();
36  return <BaseField.Control className={cn(slots.control(), className)} {...props} />;
37};
38 
39export type FieldErrorProps = React.ComponentProps<typeof BaseField.Error>;
40 
41export const FieldError = ({ className, ...props }: FieldErrorProps) => {
42  const { slots } = useFieldContext();
43  return <BaseField.Error className={cn(slots.error(), className)} {...props} />;
44};
45 
46export type FieldDescriptionProps = React.ComponentProps<typeof BaseField.Description>;
47 
48export const FieldDescription = ({ className, ...props }: FieldDescriptionProps) => {
49  const { slots } = useFieldContext();
50  return <BaseField.Description className={cn(slots.description(), className)} {...props} />;
51};
52 
53export type FieldItemProps = React.ComponentProps<typeof BaseField.Item>;
54 
55export const FieldItem = ({ className, ...props }: FieldItemProps) => {
56  const { slots } = useFieldContext();
57  return <BaseField.Item className={cn(slots.item(), className)} {...props} />;
58};
59 
60export type FieldValidityProps = React.ComponentProps<typeof BaseField.Validity>;
61 
62export const FieldValidity = (props: FieldValidityProps) => {
63  return <BaseField.Validity {...props} />;
64};