{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "form-section",
  "title": "Form Section",
  "description": "Form Section from the Get IT Done design system.",
  "dependencies": [
    "class-variance-authority@^0.7.0"
  ],
  "registryDependencies": [
    "https://zero-design.itdone.de/r/utils.json",
    "https://zero-design.itdone.de/r/theme.json"
  ],
  "files": [
    {
      "path": "registry/ui/form-section.tsx",
      "content": "'use client';\n\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport * as React from 'react';\n\nimport { cn } from '@/lib/utils';\n\n// Figma: FormSection 10157:2055 (Layout One-column | Two-column (intro, gap space/6, fields) | Two-column fields (fields in a 2-column grid) | Sheet).\nconst formSectionVariants = cva('w-full', {\n  variants: {\n    layout: {\n      'one-column': 'flex max-w-form-one-column flex-col gap-4',\n      // The two columns sit side by side from a section width of 768px (container query, not the viewport), so the layout also holds in a narrow column next to a sidebar.\n      'two-column': 'py-6 @container',\n      // Intro left, fields in a real 2-column grid on the right (Figma Layout=Two-column fields).\n      'two-column-fields': 'py-6 @container',\n      // Compact inside a slide-out sheet: side padding, small title.\n      sheet: 'flex max-w-form-sheet flex-col gap-4 px-5 py-4',\n    },\n    divider: {\n      true: 'border-b border-solid border-border',\n      false: '',\n    },\n  },\n  defaultVariants: { layout: 'two-column', divider: false },\n});\n\nexport interface FormSectionProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'>, VariantProps<typeof formSectionVariants> {\n  title: React.ReactNode;\n  description?: React.ReactNode;\n  // Heading element for the title (renders inside a labelled group).\n  titleAs?: 'h2' | 'h3' | 'h4';\n  // Fields: Input, Select, Toggle. Field gap is space/4.\n  children: React.ReactNode;\n}\n\nconst FormSection = React.forwardRef<HTMLDivElement, FormSectionProps>(\n  ({ className, layout = 'two-column', divider, title, description, titleAs: Title = 'h3', children, ...props }, ref) => {\n    const id = React.useId();\n    const resolved = layout ?? 'two-column';\n    const split = resolved === 'two-column' || resolved === 'two-column-fields';\n    const intro = (\n      <div className={cn('flex flex-col gap-1', split && '@3xl:w-form-intro @3xl:shrink-0')}>\n        <Title id={id} className={resolved === 'sheet' ? 'typography-ui-medium text-text-default' : 'typography-ui-lg-semibold text-text-default'}>\n          {title}\n        </Title>\n        {description ? <p className=\"typography-ui text-text-subtle\">{description}</p> : null}\n      </div>\n    );\n    const fields = (\n      <div\n        className={cn(\n          'min-w-0',\n          resolved === 'two-column-fields'\n            ? 'grid grid-cols-[repeat(auto-fit,minmax(min(100%,max(var(--size-form-field-min),calc((100%-var(--space-4))/2))),1fr))] content-start gap-4 @3xl:flex-1 [&>[role=switch]]:col-span-full [&>[data-span=full]]:col-span-full'\n            : 'flex flex-col gap-4',\n          resolved === 'two-column' && '@3xl:w-form-fields @3xl:max-w-full @3xl:shrink-0',\n        )}\n      >\n        {children}\n      </div>\n    );\n    return (\n      <div\n        ref={ref}\n        role=\"group\"\n        aria-labelledby={id}\n        className={cn(formSectionVariants({ layout, divider: divider ?? split }), className)}\n        {...props}\n      >\n        {split ? (\n          <div className=\"flex flex-col gap-6 @3xl:flex-row\">\n            {intro}\n            {fields}\n          </div>\n        ) : (\n          <>\n            {intro}\n            {fields}\n          </>\n        )}\n      </div>\n    );\n  },\n);\nFormSection.displayName = 'FormSection';\n\n// Side by side fields inside a FormSection (first and last name).\nconst FormRow = React.forwardRef<HTMLDivElement, React.HTMLAttributes<HTMLDivElement>>(({ className, ...props }, ref) => (\n  <div ref={ref} className={cn('flex flex-col gap-4 sm:flex-row [&>*]:flex-1', className)} {...props} />\n));\nFormRow.displayName = 'FormRow';\n\nexport interface FormSectionFieldProps extends React.HTMLAttributes<HTMLDivElement> {\n  // `full` spans both columns of a Two-column fields layout (steppers, toggles, wide fields). Default keeps one column.\n  span?: 'half' | 'full';\n}\n\n// Wrapper for a field inside a `two-column-fields` FormSection.\nconst FormSectionField = React.forwardRef<HTMLDivElement, FormSectionFieldProps>(({ className, span = 'half', ...props }, ref) => (\n  <div ref={ref} data-span={span === 'full' ? 'full' : undefined} className={cn('flex min-w-0 flex-col gap-2', className)} {...props} />\n));\nFormSectionField.displayName = 'FormSectionField';\n\nexport interface FormFieldPairProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'children'> {\n  // Left field, usually an Input.\n  start: React.ReactNode;\n  // Right field, usually a Select (Figma Type=Field pair select) or a second Input (Type=Field pair).\n  end: React.ReactNode;\n}\n\n// Two equal fields side by side, stacked below the sm breakpoint.\nconst FormFieldPair = React.forwardRef<HTMLDivElement, FormFieldPairProps>(({ className, start, end, ...props }, ref) => (\n  <div ref={ref} className={cn('grid grid-cols-1 gap-4 sm:grid-cols-2 [&>*]:min-w-0', className)} {...props}>\n    {start}\n    {end}\n  </div>\n));\nFormFieldPair.displayName = 'FormFieldPair';\n\nexport { FormFieldPair, FormRow, FormSection, FormSectionField, formSectionVariants };\n",
      "type": "registry:ui"
    }
  ],
  "type": "registry:ui"
}