{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "title": "Field",
  "description": "Label, control, description and error wired with the right aria.",
  "dependencies": [],
  "registryDependencies": [
    "utils",
    "https://ui.cuelark.com/r/theme.json"
  ],
  "files": [
    {
      "path": "src/registry/cuelark/ui/field.tsx",
      "content": "\"use client\";\n\nimport * as React from \"react\";\n\nimport { cn } from \"@/lib/utils\";\n\ntype FieldContext = { id: string; descriptionId: string; errorId: string; invalid: boolean };\nconst FieldCtx = React.createContext<FieldContext | null>(null);\n\n/**\n * Wires a label, control, description and error together with the right ids and aria attributes, so every form\n * field is accessible without hand-written aria-describedby. Put any control inside FieldControl.\n */\nfunction Field({ className, invalid = false, orientation = \"vertical\", ...props }: React.ComponentProps<\"div\"> & { invalid?: boolean; orientation?: \"vertical\" | \"horizontal\" }) {\n  const id = React.useId();\n  return (\n    <FieldCtx.Provider value={{ id: `${id}-control`, descriptionId: `${id}-description`, errorId: `${id}-error`, invalid }}>\n      <div\n        data-slot=\"field\"\n        data-invalid={invalid || undefined}\n        className={cn(\"grid gap-2\", orientation === \"horizontal\" && \"grid-cols-[1fr_auto] items-center gap-x-4\", className)}\n        {...props}\n      />\n    </FieldCtx.Provider>\n  );\n}\n\nfunction useField() {\n  const ctx = React.useContext(FieldCtx);\n  if (!ctx) throw new Error(\"Field parts must be used inside <Field>\");\n  return ctx;\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<\"label\">) {\n  const { id } = useField();\n  return <label data-slot=\"field-label\" htmlFor={id} className={cn(\"text-sm leading-none font-medium\", className)} {...props} />;\n}\n\n/** Clones its single child with id, aria-describedby and aria-invalid. */\nfunction FieldControl({ children }: { children: React.ReactElement<Record<string, unknown>> }) {\n  const { id, descriptionId, errorId, invalid } = useField();\n  return React.cloneElement(children, { id, \"aria-describedby\": invalid ? `${descriptionId} ${errorId}` : descriptionId, \"aria-invalid\": invalid || undefined });\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  const { descriptionId } = useField();\n  return <p data-slot=\"field-description\" id={descriptionId} className={cn(\"text-xs text-muted-foreground\", className)} {...props} />;\n}\n\nfunction FieldError({ className, children, ...props }: React.ComponentProps<\"p\">) {\n  const { errorId, invalid } = useField();\n  if (!invalid || !children) return null;\n  return (\n    <p data-slot=\"field-error\" id={errorId} role=\"alert\" className={cn(\"text-xs font-medium text-destructive\", className)} {...props}>\n      {children}\n    </p>\n  );\n}\n\nexport { Field, FieldLabel, FieldControl, FieldDescription, FieldError };\n",
      "type": "registry:ui"
    }
  ],
  "docs": "Docs and examples: https://ui.cuelark.com/components/field",
  "categories": [
    "forms"
  ],
  "type": "registry:ui"
}