{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "grouped-form",
  "title": "Grouped Form",
  "description": "The System Settings layout: titled sections of rounded groups, each row a label and a control.",
  "registryDependencies": [
    "@cupertinoui/macos-theme"
  ],
  "files": [
    {
      "path": "registry/macos/ui/grouped-form.tsx",
      "content": "import * as React from \"react\"\n\nimport { cn } from \"@/lib/utils\"\n\n// The grouped form layout of System Settings: section titles above rounded\n// groups of rows, each row a label on the left and a control on the right.\nfunction GroupedForm({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"grouped-form\"\n      className={cn(\n        \"flex flex-col gap-2.5 px-5 pt-[11px] pb-5 text-mac-body text-mac-label\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction GroupedFormSection({\n  className,\n  ...props\n}: React.ComponentProps<\"section\">) {\n  return (\n    <section\n      data-slot=\"grouped-form-section\"\n      className={cn(\"flex flex-col gap-2.5 not-first:mt-5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction GroupedFormSectionTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"h3\">) {\n  return (\n    <h3\n      data-slot=\"grouped-form-section-title\"\n      className={cn(\n        \"px-[11px] text-mac-body font-semibold text-mac-label\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n// One rounded box of rows.\nfunction GroupedFormGroup({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"grouped-form-group\"\n      className={cn(\n        \"flex flex-col rounded-mac-group bg-mac-group px-2.5\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\nfunction GroupedFormRow({ className, ...props }: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"grouped-form-row\"\n      className={cn(\n        \"flex min-h-9 items-center justify-between gap-4 py-2 not-first:min-h-[37px] has-[[data-slot=grouped-form-row-description]]:py-2.5 not-first:border-t not-first:border-mac-separator has-[[data-slot=select-trigger]]:min-h-[37.5px] not-first:has-[[data-slot=select-trigger]]:min-h-[38.5px]\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n// The left side of a row: a title with an optional description below it.\nfunction GroupedFormRowLabel({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"grouped-form-row-label\"\n      className={cn(\"flex min-w-0 flex-col gap-0.5\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction GroupedFormRowTitle({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"grouped-form-row-title\"\n      className={cn(\"text-mac-body text-mac-label\", className)}\n      {...props}\n    />\n  )\n}\n\nfunction GroupedFormRowDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"p\">) {\n  return (\n    <p\n      data-slot=\"grouped-form-row-description\"\n      className={cn(\n        \"text-mac-subheadline text-mac-label-secondary\",\n        className\n      )}\n      {...props}\n    />\n  )\n}\n\n// The right side of a row: a switch, pop-up button, checkboxes and so on.\nfunction GroupedFormRowControl({\n  className,\n  ...props\n}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"grouped-form-row-control\"\n      className={cn(\"flex shrink-0 items-center gap-3\", className)}\n      {...props}\n    />\n  )\n}\n\nexport {\n  GroupedForm,\n  GroupedFormGroup,\n  GroupedFormRow,\n  GroupedFormRowControl,\n  GroupedFormRowDescription,\n  GroupedFormRowLabel,\n  GroupedFormRowTitle,\n  GroupedFormSection,\n  GroupedFormSectionTitle,\n}\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}