{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "title": "Field",
  "description": "Accessible form field layout: label, control, description and error, with horizontal and vertical orientations.",
  "dependencies": [
    "class-variance-authority@^0.7.1"
  ],
  "registryDependencies": [
    "https://rdf.dev.360online.com/r/label.json",
    "https://rdf.dev.360online.com/r/separator.json"
  ],
  "files": [
    {
      "path": "registry/rapid/ui/field/field.tsx",
      "content": "'use client'\n\nimport { cva, type VariantProps } from 'class-variance-authority'\nimport { useMemo } from 'react'\nimport { Label } from '@/components/ui/label'\nimport { Separator } from '@/components/ui/separator'\nimport { cn } from '@/lib/utils'\n\nfunction FieldSet({ className, ...props }: React.ComponentProps<'fieldset'>) {\n\treturn (\n\t\t<fieldset\n\t\t\tdata-slot=\"field-set\"\n\t\t\tclassName={cn(\n\t\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\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction FieldLegend({\n\tclassName,\n\tvariant = 'legend',\n\t...props\n}: React.ComponentProps<'legend'> & { variant?: 'legend' | 'label' }) {\n\treturn (\n\t\t<legend\n\t\t\tdata-slot=\"field-legend\"\n\t\t\tdata-variant={variant}\n\t\t\tclassName={cn('mb-1.5 font-medium data-[variant=label]:text-sm data-[variant=legend]:text-base', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"field-group\"\n\t\t\tclassName={cn(\n\t\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\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nconst fieldVariants = cva('group/field flex w-full gap-2 data-[invalid=true]:text-destructive', {\n\tvariants: {\n\t\torientation: {\n\t\t\tvertical: 'flex-col *:w-full [&>.sr-only]:w-auto',\n\t\t\thorizontal:\n\t\t\t\t'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\tresponsive:\n\t\t\t\t'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},\n\t},\n\tdefaultVariants: {\n\t\torientation: 'vertical',\n\t},\n})\n\nfunction Field({\n\tclassName,\n\torientation = 'vertical',\n\t...props\n}: React.ComponentProps<'div'> & VariantProps<typeof fieldVariants>) {\n\treturn (\n\t\t<div\n\t\t\trole=\"group\"\n\t\t\tdata-slot=\"field\"\n\t\t\tdata-orientation={orientation}\n\t\t\tclassName={cn(fieldVariants({ orientation }), className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"field-content\"\n\t\t\tclassName={cn('group/field-content flex flex-1 flex-col gap-0.5 leading-snug', className)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n\treturn (\n\t\t<Label\n\t\t\tdata-slot=\"field-label\"\n\t\t\tclassName={cn(\n\t\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 has-[>[data-slot=field]]:not-has-[:disabled,[data-disabled]]:hover:bg-muted/50 has-[>[data-slot=field]]:has-[:focus-visible]:border-ring has-[>[data-slot=field]]:has-[:focus-visible]:ring-3 has-[>[data-slot=field]]:has-[:focus-visible]:ring-ring/50 *:data-[slot=field]:p-2.5 dark:has-data-checked:border-primary/20 dark:has-data-checked:bg-primary/10',\n\t\t\t\t'has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<'div'>) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"field-label\"\n\t\t\tclassName={cn(\n\t\t\t\t'flex w-fit items-center gap-2 text-sm font-medium group-data-[disabled=true]/field:opacity-50',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<'p'>) {\n\treturn (\n\t\t<p\n\t\t\tdata-slot=\"field-description\"\n\t\t\tclassName={cn(\n\t\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\t'last:mt-0 nth-last-2:-mt-1',\n\t\t\t\t'[&>a]:underline [&>a]:underline-offset-4 [&>a:hover]:text-primary',\n\t\t\t\tclassName,\n\t\t\t)}\n\t\t\t{...props}\n\t\t/>\n\t)\n}\n\nfunction FieldSeparator({\n\tchildren,\n\tclassName,\n\t...props\n}: React.ComponentProps<'div'> & {\n\tchildren?: React.ReactNode\n}) {\n\treturn (\n\t\t<div\n\t\t\tdata-slot=\"field-separator\"\n\t\t\tdata-content={!!children}\n\t\t\tclassName={cn('relative -my-2 h-5 text-sm group-data-[variant=outline]/field-group:-mb-2', className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t<Separator className=\"absolute inset-0 top-1/2\" />\n\t\t\t{children && (\n\t\t\t\t<span\n\t\t\t\t\tclassName=\"relative mx-auto block w-fit bg-background px-2 text-muted-foreground\"\n\t\t\t\t\tdata-slot=\"field-separator-content\"\n\t\t\t\t>\n\t\t\t\t\t{children}\n\t\t\t\t</span>\n\t\t\t)}\n\t\t</div>\n\t)\n}\n\nfunction FieldError({\n\tclassName,\n\tchildren,\n\terrors,\n\t...props\n}: React.ComponentProps<'div'> & {\n\terrors?: Array<{ message?: string } | undefined>\n}) {\n\tconst content = useMemo(() => {\n\t\tif (children) {\n\t\t\treturn children\n\t\t}\n\n\t\tif (!errors?.length) {\n\t\t\treturn null\n\t\t}\n\n\t\tconst uniqueErrors = [...new Map(errors.map((error) => [error?.message, error])).values()]\n\n\t\tif (uniqueErrors?.length == 1) {\n\t\t\treturn uniqueErrors[0]?.message\n\t\t}\n\n\t\treturn (\n\t\t\t<ul className=\"ml-4 flex list-disc flex-col gap-1\">\n\t\t\t\t{uniqueErrors.map((error) => error?.message && <li key={error.message}>{error.message}</li>)}\n\t\t\t</ul>\n\t\t)\n\t}, [children, errors])\n\n\tif (!content) {\n\t\treturn null\n\t}\n\n\treturn (\n\t\t<div\n\t\t\trole=\"alert\"\n\t\t\tdata-slot=\"field-error\"\n\t\t\tclassName={cn('text-sm font-normal text-destructive', className)}\n\t\t\t{...props}\n\t\t>\n\t\t\t{content}\n\t\t</div>\n\t)\n}\n\nexport {\n\tField,\n\tFieldLabel,\n\tFieldDescription,\n\tFieldError,\n\tFieldGroup,\n\tFieldLegend,\n\tFieldSeparator,\n\tFieldSet,\n\tFieldContent,\n\tFieldTitle,\n}\n",
      "type": "registry:ui",
      "target": "components/ui/field.tsx"
    }
  ],
  "meta": {
    "new": true
  },
  "type": "registry:ui"
}