{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "title": "Field",
  "dependencies": [
    "@base-ui/react"
  ],
  "registryDependencies": [
    "https://ui.hotfix.jobs/r/tokens.json",
    "https://ui.hotfix.jobs/r/utils.json"
  ],
  "files": [
    {
      "path": "registry/components/ui/field.tsx",
      "content": "\"use client\";\n\nimport { Field as FieldPrimitive } from \"@base-ui/react/field\";\nimport { Form as FormPrimitive } from \"@base-ui/react/form\";\nimport type * as React from \"react\";\nimport { cn } from \"@/lib/utils\";\n\n/** Field wraps a label + control + description + error stack. */\nexport function Field({\n  className,\n  ...props\n}: FieldPrimitive.Root.Props): React.ReactElement {\n  return (\n    <FieldPrimitive.Root\n      className={cn(\"group/field flex flex-col items-start gap-2\", className)}\n      data-slot=\"field\"\n      {...props}\n    />\n  );\n}\n\nexport interface FieldLabelProps extends FieldPrimitive.Label.Props {\n  /** Renders a small red asterisk after the label. */\n  required?: boolean;\n  /** Renders \"(optional)\" in tertiary text after the label. */\n  optional?: boolean;\n}\n\nexport function FieldLabel({\n  className,\n  children,\n  required,\n  optional,\n  ...props\n}: FieldLabelProps): React.ReactElement {\n  return (\n    <FieldPrimitive.Label\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-small font-medium text-ink\",\n        className,\n      )}\n      data-slot=\"field-label\"\n      {...props}\n    >\n      {children}\n      {required && (\n        <span\n          aria-hidden=\"true\"\n          className=\"text-mini leading-none text-error\"\n          data-slot=\"field-required\"\n        >\n          *\n        </span>\n      )}\n      {optional && !required && (\n        <span\n          aria-hidden=\"true\"\n          className=\"text-mini text-ink-muted\"\n          data-slot=\"field-optional\"\n        >\n          (optional)\n        </span>\n      )}\n    </FieldPrimitive.Label>\n  );\n}\n\nexport function FieldItem({\n  className,\n  ...props\n}: FieldPrimitive.Item.Props): React.ReactElement {\n  return (\n    <FieldPrimitive.Item\n      className={cn(\"flex\", className)}\n      data-slot=\"field-item\"\n      {...props}\n    />\n  );\n}\n\nexport function FieldDescription({\n  className,\n  ...props\n}: FieldPrimitive.Description.Props): React.ReactElement {\n  return (\n    <FieldPrimitive.Description\n      className={cn(\"text-mini text-ink-subtle\", className)}\n      data-slot=\"field-description\"\n      {...props}\n    />\n  );\n}\n\n/** Error message shown when the field is invalid. */\nexport function FieldError({\n  className,\n  ...props\n}: FieldPrimitive.Error.Props): React.ReactElement {\n  return (\n    <FieldPrimitive.Error\n      className={cn(\n        \"inline-flex items-center gap-1.5 text-mini text-error before:content-[''] before:size-[5px] before:rounded-full before:bg-error\",\n        className,\n      )}\n      data-slot=\"field-error\"\n      render={\n        <span className=\"[animation:patch-field-error-in_var(--duration-state)_var(--ease-standard)]\" />\n      }\n      {...props}\n    />\n  );\n}\n\nexport const FieldControl: typeof FieldPrimitive.Control =\n  FieldPrimitive.Control;\nexport const FieldValidity: typeof FieldPrimitive.Validity =\n  FieldPrimitive.Validity;\n\nexport function Form({\n  className,\n  ...props\n}: FormPrimitive.Props): React.ReactElement {\n  return (\n    <FormPrimitive\n      className={cn(\"flex w-full flex-col gap-4\", className)}\n      data-slot=\"form\"\n      {...props}\n    />\n  );\n}\n\nexport { FieldPrimitive, FormPrimitive };\n",
      "type": "registry:ui",
      "target": "components/ui/field.tsx"
    }
  ],
  "type": "registry:ui"
}