{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "type": "registry:ui",
  "title": "Field",
  "files": [
    {
      "path": "ui/field.tsrx",
      "type": "registry:ui",
      "target": "components/ui/field.tsrx",
      "content": "// Base UI base field — TRANSCRIBED from upstream's `bases/base-ui/ui/field.tsx` (maintainer-supplied),\n// class strings verbatim. Byte-for-byte the same component as the radix base apart from which\n// `Label` and `Separator` it imports.\n//\n// UPSTREAM DOES NOT USE THE `Field` PRIMITIVE HERE, even though @octanejs/base-ui ships one whose\n// parts line up exactly (Root/Control/Label/Description/Error/Validity/Item). That is worth stating\n// because the opposite is the natural guess, and it decides the class strings: `data-invalid` and\n// `data-disabled` on these elements are written by the CONSUMER, so `data-[invalid=true]:` and\n// `group-data-[disabled=true]/field:` are correct as written. Had this routed through `Field.Root`,\n// the primitive would emit BARE `data-invalid=\"\"` (see fieldValidityMapping) and every one of those\n// variants would silently match nothing.\n//\n// It also means `FieldLabel` is safe standalone: it renders this base's plain `<label>`, not\n// `Field.Label`, which hard-requires a `<Field.Root>` ancestor and throws without one.\n//\n// Octane adaptations: \"use client\" dropped; Label/Separator come from this base's own ports;\n// FieldSeparator and FieldError compose their conditional children with createElement (a\n// `children && …` branch beside a sibling descriptor), everything else is template JSX.\nimport { createElement, useMemo, type OctaneNode } from 'octane';\nimport { cva, type VariantProps } from 'class-variance-authority';\n\nimport { cn } from '@/lib/utils';\nimport { Label } from '@/components/ui/label';\nimport { Separator } from '@/components/ui/separator';\n\ntype Props = { className?: string; children?: OctaneNode } & Record<string, unknown>;\n\nexport function FieldSet({ className, ...props }: Props) @{\n\t<fieldset\n\t\tdata-slot=\"field-set\"\n\t\tclassName={cn(\n\t\t\t'flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n\nexport function FieldLegend({ className, variant = 'legend', ...props }: Props & {\n\tvariant?: 'legend' | 'label';\n}) @{\n\t<legend\n\t\tdata-slot=\"field-legend\"\n\t\tdata-variant={variant}\n\t\tclassName={cn(\n\t\t\t'mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n\nexport function FieldGroup({ className, ...props }: Props) @{\n\t<div\n\t\tdata-slot=\"field-group\"\n\t\tclassName={cn(\n\t\t\t'group/field-group @container/field-group flex w-full flex-col gap-5 data-[slot=checkbox-group]:gap-3 *:data-[slot=field-group]:gap-4',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n\nexport const fieldVariants = cva(\n\t'group/field flex w-full gap-2 data-[invalid=true]:text-destructive',\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: 'flex-row items-center has-[>[data-slot=field-content]]:items-start *:data-[slot=field-label]:flex-auto has-[>[data-slot=field-content]]:[&>[role=checkbox],[role=radio]]:mt-px',\n\t\t\t\tresponsive: 'flex-col *:w-full @md/field-group:flex-row @md/field-group:items-center @md/field-group:*:w-auto @md/field-group:has-[>[data-slot=field-content]]:items-start @md/field-group:*:data-[slot=field-label]:flex-auto [&>.sr-only]:w-auto @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\nexport function Field({ className, orientation = 'vertical', ...props }: Props & {\n\torientation?: VariantProps<typeof fieldVariants>['orientation'];\n}) @{\n\t<div\n\t\trole=\"group\"\n\t\tdata-slot=\"field\"\n\t\tdata-orientation={orientation}\n\t\tclassName={cn(fieldVariants({ orientation }), className)}\n\t\t{...props}\n\t/>\n}\n\nexport function FieldContent({ className, ...props }: Props) @{\n\t<div\n\t\tdata-slot=\"field-content\"\n\t\tclassName={cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className)}\n\t\t{...props}\n\t/>\n}\n\nexport function FieldLabel({ className, ...props }: Props) @{\n\t<Label\n\t\tdata-slot=\"field-label\"\n\t\tclassName={cn(\n\t\t\t'group/field-label peer/field-label flex w-fit gap-2 leading-snug group-data-[disabled=true]/field:opacity-50 has-data-checked:border-primary/30 has-data-checked:bg-primary/5 has-[>[data-slot=field]]:rounded-lg has-[>[data-slot=field]]:border *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10',\n\t\t\t'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n\nexport function FieldTitle({ className, ...props }: Props) @{\n\t<div\n\t\tdata-slot=\"field-label\"\n\t\tclassName={cn(\n\t\t\t'flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n\nexport function FieldDescription({ className, ...props }: Props) @{\n\t<p\n\t\tdata-slot=\"field-description\"\n\t\tclassName={cn(\n\t\t\t'text-left text-sm leading-normal font-normal text-muted-foreground group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5',\n\t\t\t'last:mt-0 nth-last-2:-mt-1',\n\t\t\t'[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',\n\t\t\tclassName,\n\t\t)}\n\t\t{...props}\n\t/>\n}\n\nexport function FieldSeparator({ children, className, ...props }: Props) {\n\treturn createElement(\n\t\t'div',\n\t\t{\n\t\t\t'data-slot': 'field-separator',\n\t\t\t'data-content': !!children,\n\t\t\tclassName: cn(\n\t\t\t\t'relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2',\n\t\t\t\tclassName,\n\t\t\t),\n\t\t\t...props,\n\t\t},\n\t\tcreateElement(Separator, { key: 'rule', className: 'absolute inset-0 top-1/2' }),\n\t\tchildren\n\t\t\t? createElement(\n\t\t\t\t\t'span',\n\t\t\t\t\t{\n\t\t\t\t\t\tkey: 'content',\n\t\t\t\t\t\tclassName: 'relative mx-auto block w-fit bg-background px-2 text-muted-foreground',\n\t\t\t\t\t\t'data-slot': 'field-separator-content',\n\t\t\t\t\t},\n\t\t\t\t\tchildren,\n\t\t\t\t)\n\t\t\t: null,\n\t);\n}\n\nexport function FieldError(props: Props & { errors?: Array<{ message?: string } | undefined> }) {\n\tconst { className, children: _children, errors: _errors, ...rest } = props;\n\t// Read through `props` inside the callback: octane's destructured-parameter\n\t// locals are not the value channel the compiler threads into a closure.\n\tconst content = useMemo(() => {\n\t\tif (props.children) return props.children;\n\t\tconst errors = props.errors;\n\t\tif (!errors?.length) return null;\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) return uniqueErrors[0]?.message;\n\n\t\treturn createElement(\n\t\t\t'ul',\n\t\t\t{ className: 'ml-4 flex list-disc flex-col gap-1' },\n\t\t\tuniqueErrors.map(\n\t\t\t\t(error, index) => error?.message\n\t\t\t\t\t? createElement('li', { key: index }, error.message)\n\t\t\t\t\t: null,\n\t\t\t),\n\t\t);\n\t});\n\n\tif (!content) return null;\n\n\treturn createElement(\n\t\t'div',\n\t\t{\n\t\t\trole: 'alert',\n\t\t\t'data-slot': 'field-error',\n\t\t\tclassName: cn('text-sm font-normal text-destructive', className),\n\t\t\t...rest,\n\t\t},\n\t\tcontent,\n\t);\n}\n"
    }
  ],
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@octane/label",
    "@octane/separator",
    "@octane/utils"
  ]
}