{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "title": "Field",
  "description": "Combine labels, controls, and help text to compose accessible form fields and grouped inputs.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "https://blok.sitecore.com/r/theme.json",
    "https://blok.sitecore.com/r/input.json",
    "https://blok.sitecore.com/r/switch.json"
  ],
  "files": [
    {
      "path": "src/components/ui/field.tsx",
      "content": "import { cn } from \"@/lib/utils\";\nimport { type VariantProps, cva } from \"class-variance-authority\";\nimport type * as React from \"react\";\n\n// FieldSet - Container that renders a semantic fieldset\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"fieldset\"\n      className={cn(\"flex flex-col gap-2\", className)}\n      {...props}\n    />\n  );\n}\n\n// FieldLegend - Legend element for a FieldSet\nconst fieldLegendVariants = cva(\"\", {\n  variants: {\n    variant: {\n      legend: \"text-lg font-semibold\",\n      label: \"text-md font-medium\",\n    },\n  },\n  defaultVariants: {\n    variant: \"legend\",\n  },\n});\n\nfunction FieldLegend({\n  className,\n  variant = \"legend\",\n  ...props\n}: React.ComponentProps<\"legend\"> & VariantProps<typeof fieldLegendVariants>) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      className={cn(fieldLegendVariants({ variant }), className)}\n      {...props}\n    />\n  );\n}\n\n// FieldGroup - Layout wrapper that stacks Field components\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\"flex flex-col gap-3 mt-5\", className)}\n      {...props}\n    />\n  );\n}\n\n// Field - Core wrapper for a single field\nconst fieldVariants = cva(\"flex gap-2\", {\n  variants: {\n    orientation: {\n      vertical: \"flex-col gap-2.5\",\n      horizontal: \"flex-row items-center gap-4\",\n      responsive:\n        \"flex-col gap-2.5 @container/field-group:flex-row @container/field-group:items-center @container/field-group:gap-4\",\n    },\n  },\n  defaultVariants: {\n    orientation: \"vertical\",\n  },\n});\n\nfunction Field({\n  className,\n  orientation = \"vertical\",\n  \"data-invalid\": dataInvalid,\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof fieldVariants> & {\n    \"data-invalid\"?: boolean;\n  }) {\n  return (\n    <div\n      data-slot=\"field\"\n      role=\"group\"\n      data-invalid={dataInvalid}\n      className={cn(\n        fieldVariants({ orientation }),\n        dataInvalid &&\n          \"data-[invalid=true]:[&_input]:border-destructive data-[invalid=true]:[&_select]:border-destructive data-[invalid=true]:[&_textarea]:border-destructive\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// FieldContent - Flex column that groups label and description\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-content\"\n      className={cn(\"flex flex-col gap-1\", className)}\n      {...props}\n    />\n  );\n}\n\n// FieldLabel - Label styled for form fields\nfunction FieldLabel({ className, ...props }: React.ComponentProps<\"label\">) {\n  return (\n    <label\n      data-slot=\"field-label\"\n      className={cn(\n        \"text-md text-neutral-fg flex items-center gap-2 leading-none font-medium select-none group-data-[disabled=true]:pointer-events-none group-data-[disabled=true]:opacity-50 peer-disabled:cursor-not-allowed peer-disabled:opacity-50\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\n// FieldTitle - Renders a title with label styling inside FieldContent\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-title\"\n      className={cn(\"text-md font-medium\", className)}\n      {...props}\n    />\n  );\n}\n\n// FieldDescription - Helper text slot\nfunction FieldDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-description\"\n      className={cn(\"text-sm text-muted-foreground -mt-1\", className)}\n      {...props}\n    />\n  );\n}\n\n// FieldSeparator - Visual divider to separate sections\nfunction FieldSeparator({\n  className,\n  children,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  if (children) {\n    return (\n      <div\n        data-slot=\"field-separator\"\n        className={cn(\n          \"relative flex items-center gap-2 py-4\",\n          \"before:flex-1 before:border-t before:border-border\",\n          \"after:flex-1 after:border-t after:border-border\",\n          className,\n        )}\n        {...props}\n      >\n        {children}\n      </div>\n    );\n  }\n  return (\n    <div\n      data-slot=\"field-separator\"\n      className={cn(\"border-t border-border\", className)}\n      {...props}\n    />\n  );\n}\n\n// FieldError - Accessible error container\nfunction FieldError({\n  className,\n  errors,\n  children,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>;\n}) {\n  const errorMessages = errors?.filter(Boolean) || [];\n\n  if (errorMessages.length === 0 && !children) {\n    return null;\n  }\n\n  return (\n    <div\n      data-slot=\"field-error\"\n      role=\"alert\"\n      aria-live=\"polite\"\n      className={cn(\"text-sm text-destructive -mt-1\", className)}\n      {...props}\n    >\n      {children ||\n        (errorMessages.length === 1 ? (\n          <span>{errorMessages[0]?.message}</span>\n        ) : (\n          <ul className=\"list-disc list-inside space-y-1\">\n            {errorMessages.map((error, index) => (\n              <li key={index}>{error?.message}</li>\n            ))}\n          </ul>\n        ))}\n    </div>\n  );\n}\n\nexport {\n  Field,\n  FieldContent,\n  FieldDescription,\n  FieldError,\n  FieldGroup,\n  FieldLabel,\n  FieldLegend,\n  FieldSeparator,\n  FieldSet,\n  FieldTitle,\n};\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}