"use client"; import { useMemo } from "react"; import { cva } from "class-variance-authority"; import { cn } from "@/lib/utils"; import { Label } from "@/registry/optics/label"; import { Separator } from "@/registry/optics/separator"; function FieldSet({ className = "", ...props }) { return (

[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col", className, )} {...props} /> ); } function FieldLegend({ className = "", variant = "legend", ...props }) { return ( ); } function FieldGroup({ className = "", ...props }) { return (

[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col", className, )} {...props} /> ); } const fieldVariants = cva( "data-[invalid=true]:text-destructive gap-2 group/field flex w-full", { variants: { orientation: { vertical: "flex-col [&>*]:w-full [&>.sr-only]:w-auto", horizontal: "flex-row items-center [&>[data-slot=field-label]]:flex-auto has-[>[data-slot=field-content]]:items-start has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", responsive: "flex-col [&>*]:w-full [&>.sr-only]:w-auto @md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto @md/field-group:[&>[data-slot=field-label]]:flex-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px", }, }, defaultVariants: { orientation: "vertical", }, }, ); function Field({ className = "", orientation = "vertical", ...props }) { return (

); } function FieldContent({ className = "", ...props }) { return (

); } function FieldLabel({ className = "", ...props }) { return ( [data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>*]:data-[slot=field]:p-2 group/field-label peer/field-label flex w-fit leading-snug", "has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col", className, )} {...props} /> ); } function FieldTitle({ className = "", ...props }) { return (

); } function FieldDescription({ className = "", ...props }) { return (

a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className, )} {...props} /> ); } function FieldSeparator({ children = null, className = "", ...props }) { return (

{children && ( {children} )}

); } function FieldError({ className = "", children = null, errors = [], ...props }) { const content = useMemo(() => { if (children) { return children; } if (!errors?.length) { return null; } const uniqueErrors = [ ...new Map(errors.map((error) => [error?.message, error])).values(), ]; if (uniqueErrors?.length == 1) { return uniqueErrors[0]?.message; } return (

{error.message}

); }, [children, errors]); if (!content) { return null; } return (

{content}

); } Field.displayName = "Field"; FieldLabel.displayName = "FieldLabel"; FieldDescription.displayName = "FieldDescription"; FieldError.displayName = "FieldError"; FieldGroup.displayName = "FieldGroup"; FieldLegend.displayName = "FieldLegend"; FieldSeparator.displayName = "FieldSeparator"; FieldSet.displayName = "FieldSet"; FieldContent.displayName = "FieldContent"; FieldTitle.displayName = "FieldTitle"; export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, };