"use client" import { useMemo } from "react" import { cva, type VariantProps } from "class-variance-authority" import { cn } from "@/lib/utils" import { Label } from "@/registry/new-york/ui/label" import { Separator } from "@/registry/new-york/ui/separator" function FieldSet({ className, ...props }: React.ComponentProps<"fieldset">) { return (

[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3", className )} {...props} /> ) } function FieldLegend({ className, variant = "legend", ...props }: React.ComponentProps<"legend"> & { variant?: "legend" | "label" }) { return ( ) } function FieldGroup({ className, ...props }: React.ComponentProps<"div">) { return (

[data-slot=field-group]]:gap-4", className )} {...props} /> ) } const fieldVariants = cva( "group/field data-[invalid=true]:text-destructive flex w-full gap-3", { 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]]:[&>[role=checkbox],[role=radio]]:mt-px has-[>[data-slot=field-content]]:items-start", ], responsive: [ "@md/field-group:flex-row @md/field-group:items-center @md/field-group:[&>*]:w-auto flex-col [&>*]:w-full [&>.sr-only]: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 }: React.ComponentProps<"div"> & VariantProps) { return (

) } function FieldContent({ className, ...props }: React.ComponentProps<"div">) { return (

) } function FieldLabel({ className, ...props }: React.ComponentProps) { return ( [data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-md has-[>[data-slot=field]]:border [&>[data-slot=field]]:p-4", "has-data-[state=checked]:bg-primary/5 has-data-[state=checked]:border-primary dark:has-data-[state=checked]:bg-primary/10", className )} {...props} /> ) } function FieldTitle({ className, ...props }: React.ComponentProps<"div">) { return (

) } function FieldDescription({ className, ...props }: React.ComponentProps<"p">) { return (

a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4", className )} {...props} /> ) } function FieldSeparator({ children, className, ...props }: React.ComponentProps<"div"> & { children?: React.ReactNode }) { return (

{children && ( {children} )}

) } function FieldError({ className, children, errors, ...props }: React.ComponentProps<"div"> & { errors?: Array<{ message?: string } | undefined> }) { const content = useMemo(() => { if (children) { return children } if (!errors) { return null } if (errors?.length === 1 && errors[0]?.message) { return errors[0].message } return (

{error.message}

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

{content}

) } export { Field, FieldLabel, FieldDescription, FieldError, FieldGroup, FieldLegend, FieldSeparator, FieldSet, FieldContent, FieldTitle, }

Field

Instalação

Registry dependencies