{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "title": "Field",
  "description": "A field component for grouping form elements with labels and descriptions.",
  "dependencies": [
    "clsx",
    "tailwind-merge"
  ],
  "registryDependencies": [
    "https://optics.agusmayol.com.ar/r/label.json",
    "https://optics.agusmayol.com.ar/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/optics/field.jsx",
      "content": "\"use client\";\n\nimport { useMemo } from \"react\";\nimport { cva } from \"class-variance-authority\";\n\nimport { cn } from \"@/lib/utils\";\nimport { Label } from \"@/registry/optics/label\";\nimport { Separator } from \"@/registry/optics/separator\";\n\nfunction FieldSet({ className = \"\", ...props }) {\n\treturn (\n\t\t<fieldset\n\t\t\tdata-slot=\"field-set\"\n\t\t\tclassName={cn(\n\t\t\t\t\"gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3 flex flex-col\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction FieldLegend({ className = \"\", variant = \"legend\", ...props }) {\n\treturn (\n\t\t<legend\n\t\t\tdata-slot=\"field-legend\"\n\t\t\tdata-variant={variant}\n\t\t\tclassName={cn(\n\t\t\t\t\"mb-2 font-medium data-[variant=label]:text-xs/relaxed data-[variant=legend]:text-sm\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction FieldGroup({ className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"field-group\"\n\t\t\tclassName={cn(\n\t\t\t\t\"gap-4 data-[slot=checkbox-group]:gap-3 [&>[data-slot=field-group]]:gap-4 group/field-group @container/field-group flex w-full flex-col\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nconst fieldVariants = cva(\n\t\"data-[invalid=true]:text-destructive gap-2 group/field flex w-full\",\n\t{\n\t\tvariants: {\n\t\t\torientation: {\n\t\t\t\tvertical: \"flex-col [&>*]:w-full [&>.sr-only]:w-auto\",\n\t\t\t\thorizontal:\n\t\t\t\t\t\"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\",\n\t\t\t\tresponsive:\n\t\t\t\t\t\"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\",\n\t\t\t},\n\t\t},\n\t\tdefaultVariants: {\n\t\t\torientation: \"vertical\",\n\t\t},\n\t},\n);\n\nfunction Field({ className = \"\", orientation = \"vertical\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\tdata-slot=\"field\"\n\t\t\tdata-orientation={orientation}\n\t\t\tclassName={cn(fieldVariants({ orientation }), className)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction FieldContent({ className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"field-content\"\n\t\t\tclassName={cn(\n\t\t\t\t\"gap-0.5 group/field-content flex flex-1 flex-col leading-snug\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction FieldLabel({ className = \"\", ...props }) {\n\treturn (\n\t\t<Label\n\t\t\tdata-slot=\"field-label\"\n\t\t\tclassName={cn(\n\t\t\t\t\"has-data-checked:bg-primary/5 dark:has-data-checked:bg-primary/10 gap-2 group-data-[disabled=true]/field:opacity-50 has-[>[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\",\n\t\t\t\t\"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction FieldTitle({ className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"field-label\"\n\t\t\tclassName={cn(\n\t\t\t\t\"gap-2 text-xs/relaxed font-medium group-data-[disabled=true]/field:opacity-50 flex w-fit items-center leading-snug\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction FieldDescription({ className = \"\", ...props }) {\n\treturn (\n\t\t<p\n\t\t\tdata-slot=\"field-description\"\n\t\t\tclassName={cn(\n\t\t\t\t\"text-muted-foreground text-left text-xs/relaxed [[data-variant=legend]+&]:-mt-1.5 leading-normal font-normal group-has-[[data-orientation=horizontal]]/field:text-balance\",\n\t\t\t\t\"last:mt-0 nth-last-2:-mt-1\",\n\t\t\t\t\"[&>a:hover]:text-primary [&>a]:underline [&>a]:underline-offset-4\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t);\n}\n\nfunction FieldSeparator({ children = null, className = \"\", ...props }) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"field-separator\"\n\t\t\tdata-content={!!children}\n\t\t\tclassName={cn(\n\t\t\t\t\"-my-2 h-5 text-xs/relaxed group-data-[variant=outline]/field-group:-mb-2 relative\",\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Separator className=\"absolute inset-0 top-1/2\" />\n\t\t\t{children && (\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"text-muted-foreground px-2 bg-background relative mx-auto block w-fit\"\n\t\t\t\t\tdata-slot=\"field-separator-content\"\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</div>\n\t);\n}\n\nfunction FieldError({\n\tclassName = \"\",\n\tchildren = null,\n\terrors = [],\n\t...props\n}) {\n\tconst content = useMemo(() => {\n\t\tif (children) {\n\t\t\treturn children;\n\t\t}\n\n\t\tif (!errors?.length) {\n\t\t\treturn null;\n\t\t}\n\n\t\tconst uniqueErrors = [\n\t\t\t...new Map(errors.map((error) => [error?.message, error])).values(),\n\t\t];\n\n\t\tif (uniqueErrors?.length == 1) {\n\t\t\treturn uniqueErrors[0]?.message;\n\t\t}\n\n\t\treturn (\n\t\t\t<ul className=\"ml-4 flex list-disc flex-col gap-1\">\n\t\t\t\t{uniqueErrors.map(\n\t\t\t\t\t(error, index) =>\n\t\t\t\t\t\terror?.message && <li key={index}>{error.message}</li>,\n\t\t\t\t)}\n\t\t\t</ul>\n\t\t);\n\t}, [children, errors]);\n\n\tif (!content) {\n\t\treturn null;\n\t}\n\n\treturn (\n\t\t<div\n\t\t\trole=\"alert\"\n\t\t\tdata-slot=\"field-error\"\n\t\t\tclassName={cn(\"text-destructive text-xs/relaxed font-normal\", className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{content}\n\t\t</div>\n\t);\n}\n\nField.displayName = \"Field\";\nFieldLabel.displayName = \"FieldLabel\";\nFieldDescription.displayName = \"FieldDescription\";\nFieldError.displayName = \"FieldError\";\nFieldGroup.displayName = \"FieldGroup\";\nFieldLegend.displayName = \"FieldLegend\";\nFieldSeparator.displayName = \"FieldSeparator\";\nFieldSet.displayName = \"FieldSet\";\nFieldContent.displayName = \"FieldContent\";\nFieldTitle.displayName = \"FieldTitle\";\n\nexport {\n\tField,\n\tFieldLabel,\n\tFieldDescription,\n\tFieldError,\n\tFieldGroup,\n\tFieldLegend,\n\tFieldSeparator,\n\tFieldSet,\n\tFieldContent,\n\tFieldTitle,\n};\n",
      "type": "registry:component",
      "target": "components/optics/field.jsx"
    }
  ],
  "type": "registry:component"
}