{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "field",
  "title": "Field",
  "description": "Form layout: a label, the control, a description and errors, in groups and fieldsets.",
  "dependencies": [
    "class-variance-authority"
  ],
  "registryDependencies": [
    "@cupertinoui/macos-theme",
    "@cupertinoui/label",
    "@cupertinoui/separator"
  ],
  "files": [
    {
      "path": "registry/macos/ui/field.tsx",
      "content": "\"use client\"\n\nimport * as React from \"react\"\nimport { cva, type VariantProps } from \"class-variance-authority\"\n\nimport { cn } from \"@/lib/utils\"\nimport { Label } from \"@/registry/macos/ui/label\"\nimport { Separator } from \"@/registry/macos/ui/separator\"\n\n// Form layout: a label, the control, a description and errors, alone or\n// in groups and fieldsets.\nfunction FieldSet({ className, ...props }: React.ComponentProps<\"fieldset\">) {\n  return (\n    <fieldset\n      data-slot=\"field-set\"\n      className={cn(\"flex flex-col gap-4 has-[>[data-slot=checkbox-group]]:gap-3 has-[>[data-slot=radio-group]]:gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldLegend({ className, variant = \"legend\", ...props }: React.ComponentProps<\"legend\"> & { variant?: \"legend\" | \"label\" }) {\n  return (\n    <legend\n      data-slot=\"field-legend\"\n      data-variant={variant}\n      className={cn(\"mb-1.5 font-semibold text-mac-label data-[variant=label]:text-mac-body data-[variant=legend]:text-[15px]\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction FieldGroup({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"field-group\"\n      className={cn(\"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\", className)}\n      {...props}\n    />\n  )\n}\n\nconst fieldVariants = cva(\"group/field flex w-full gap-1.5 text-mac-body data-[invalid=true]:text-mac-red\", {\n  variants: {\n    orientation: {\n      vertical: \"flex-col *:w-full [&>.sr-only]:w-auto\",\n      horizontal:\n        \"flex-row items-center gap-2 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      responsive:\n        \"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\",\n    },\n  },\n  defaultVariants: { orientation: \"vertical\" },\n})\n\nfunction Field({ className, orientation = \"vertical\", ...props }: React.ComponentProps<\"div\"> & VariantProps<typeof fieldVariants>) {\n  return <div role=\"group\" data-slot=\"field\" data-orientation={orientation} className={cn(fieldVariants({ orientation }), className)} {...props} />\n}\n\nfunction FieldContent({ className, ...props }: React.ComponentProps<\"div\">) {\n  return <div data-slot=\"field-content\" className={cn(\"group/field-content flex flex-1 flex-col gap-0.5 leading-snug\", className)} {...props} />\n}\n\nfunction FieldLabel({ className, ...props }: React.ComponentProps<typeof Label>) {\n  return (\n    <Label\n      data-slot=\"field-label\"\n      className={cn(\n        \"group/field-label peer/field-label flex w-fit gap-2 leading-snug font-medium group-data-[disabled=true]/field:opacity-50\",\n        // A label around a whole field becomes a selectable card.\n        \"has-[>[data-slot=field]]:w-full has-[>[data-slot=field]]:flex-col has-[>[data-slot=field]]:rounded-[10px] has-[>[data-slot=field]]:shadow-[inset_0_0_0_1px_var(--mac-grid)] has-[>[data-slot=field]]:hover:bg-mac-fill-quaternary has-data-checked:bg-mac-accent/8 has-data-checked:shadow-[inset_0_0_0_1px_color-mix(in_srgb,var(--mac-accent)_45%,transparent)] *:data-[slot=field]:p-3\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldTitle({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div data-slot=\"field-label\" className={cn(\"flex w-fit items-center gap-2 text-mac-body font-semibold group-data-[disabled=true]/field:opacity-50\", className)} {...props} />\n  )\n}\n\nfunction FieldDescription({ className, ...props }: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"field-description\"\n      className={cn(\n        \"text-left text-mac-subheadline leading-[14px] font-normal text-mac-label-secondary group-has-data-horizontal/field:text-balance [[data-variant=legend]+&]:-mt-1.5\",\n        \"last:mt-0 nth-last-2:-mt-0.5\",\n        \"[&>a]:text-mac-link [&>a:hover]:underline\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction FieldSeparator({ children, className, ...props }: React.ComponentProps<\"div\"> & { children?: React.ReactNode }) {\n  return (\n    <div data-slot=\"field-separator\" data-content={!!children} className={cn(\"relative -my-2 h-5 text-mac-subheadline\", className)} {...props}>\n      <Separator className=\"absolute inset-0 top-1/2 bg-mac-grid\" />\n      {children && (\n        <span className=\"relative mx-auto block w-fit bg-mac-window px-2 text-mac-label-secondary\" data-slot=\"field-separator-content\">\n          {children}\n        </span>\n      )}\n    </div>\n  )\n}\n\nfunction FieldError({\n  className,\n  children,\n  errors,\n  ...props\n}: React.ComponentProps<\"div\"> & {\n  errors?: Array<{ message?: string } | undefined>\n}) {\n  const content = React.useMemo(() => {\n    if (children) return children\n    if (!errors?.length) return null\n    const unique = [...new Map(errors.map((error) => [error?.message, error])).values()]\n    if (unique.length === 1) return unique[0]?.message\n    return (\n      <ul className=\"ml-4 flex list-disc flex-col gap-1\">\n        {unique.map((error, index) => error?.message && <li key={index}>{error.message}</li>)}\n      </ul>\n    )\n  }, [children, errors])\n\n  if (!content) return null\n  return (\n    <div role=\"alert\" data-slot=\"field-error\" className={cn(\"text-mac-subheadline font-normal text-mac-red\", className)} {...props}>\n      {content}\n    </div>\n  )\n}\n\nexport { Field, FieldContent, FieldDescription, FieldError, FieldGroup, FieldLabel, FieldLegend, FieldSeparator, FieldSet, FieldTitle }\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}