{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "title": "Field",
  "description": "Groups a label, control, and description into an accessible form field, built on Base UI.",
  "dependencies": [
    "@base-ui/react",
    "class-variance-authority"
  ],
  "registryDependencies": [
    "utils"
  ],
  "files": [
    {
      "path": "registry/base/ui/field.tsx",
      "content": "import { Field as FieldPrimitive } from \"@base-ui/react/field\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\nimport type * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\nconst fieldVariants = cva(\"group/field flex flex-col gap-2\", {\n  variants: {\n    orientation: {\n      vertical: \"\",\n      horizontal: \"flex-row items-center justify-between gap-4\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n})\n\nfunction Field({\n  className,\n  orientation,\n  ...props\n}: FieldPrimitive.Root.Props & VariantProps<typeof fieldVariants>) {\n  return (\n    <FieldPrimitive.Root\n      data-slot=\"field\"\n      data-orientation={orientation}\n      className={cn(fieldVariants({ orientation }), className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\"flex flex-col gap-6\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldItem({ className, ...props }: FieldPrimitive.Item.Props) {\n  return (\n    <FieldPrimitive.Item\n      data-slot=\"field-item\"\n      className={cn(\"flex\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLabel({ className, ...props }: FieldPrimitive.Label.Props) {\n  return (\n    <FieldPrimitive.Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"flex items-center gap-2 text-sm leading-none font-medium select-none group-data-[disabled]/field:opacity-50 group-data-[invalid]/field:text-destructive\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldDescription({\n  className,\n  ...props\n}: FieldPrimitive.Description.Props) {\n  return (\n    <FieldPrimitive.Description\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-sm leading-normal text-muted-foreground group-data-[disabled]/field:opacity-50\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldError({ className, ...props }: FieldPrimitive.Error.Props) {\n  return (\n    <FieldPrimitive.Error\n      data-slot=\"field-error\"\n      className={cn(\"text-sm leading-normal text-destructive\", className)}\n      {...props}\n    />\n  )\n}\n\n// Aliases for Base UI parts that need no extra styling, exposed so custom or\n// third-party controls can register with the field context and so validity\n// state is reachable via render props.\nconst FieldControl: typeof FieldPrimitive.Control = FieldPrimitive.Control\nconst FieldValidity: typeof FieldPrimitive.Validity = FieldPrimitive.Validity\n\nexport {\n  Field,\n  FieldControl,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldItem,\n  FieldLabel,\n  FieldValidity,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}