@fragments-sdk/ui 0.17.1 → 0.19.0

package/src/components/EmptyState/EmptyState.contract.json

@@ -0,0 +1,133 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "EmptyState",
+  "description": "Placeholder for empty content areas. Provides context, guidance, and actions when no data is available.",
+  "category": "feedback",
+  "tags": [
+    "empty",
+    "placeholder",
+    "no-data",
+    "zero-state",
+    "blank-slate"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/EmptyState/index.tsx",
+  "exportName": "EmptyState",
+  "propsSummary": [
+    "children: node (required)",
+    "size: sm|md|lg (default: md)"
+  ],
+  "props": {
+    "children": {
+      "type": "node",
+      "description": "EmptyState content - use EmptyState.Icon, EmptyState.Title, EmptyState.Description, EmptyState.Actions sub-components",
+      "required": true
+    },
+    "size": {
+      "type": "enum",
+      "description": "Size variant",
+      "default": "md",
+      "required": false,
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    }
+  },
+  "usage": {
+    "when": [
+      "Empty lists, tables, or search results",
+      "New user onboarding (no content yet)",
+      "Filtered views with no matches",
+      "Error states where content failed to load"
+    ],
+    "whenNot": [
+      "Loading states (use skeleton or spinner)",
+      "Error messages with retry (use Alert)",
+      "Temporary messages (use Toast)"
+    ],
+    "guidelines": [
+      "Always explain why the area is empty",
+      "Provide a clear action to resolve the empty state",
+      "Use appropriate icons to reinforce the message",
+      "Keep messaging positive and actionable",
+      "EmptyState compound sub-components forward DOM props for ids, aria attributes, and handlers"
+    ],
+    "accessibility": [
+      "Empty state content is accessible to screen readers",
+      "Action buttons follow button accessibility guidelines"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Default",
+      "description": "Basic empty state with action",
+      "code": "<EmptyState>\n  <EmptyState.Icon><FolderIcon /></EmptyState.Icon>\n  <EmptyState.Title>No projects yet</EmptyState.Title>\n  <EmptyState.Description>Get started by creating your first project.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Create Project</Button>\n  </EmptyState.Actions>\n</EmptyState>"
+    },
+    {
+      "name": "No Results",
+      "description": "Empty search results",
+      "code": "<EmptyState>\n  <EmptyState.Icon><SearchIcon /></EmptyState.Icon>\n  <EmptyState.Title>No results found</EmptyState.Title>\n  <EmptyState.Description>Try adjusting your search terms or filters.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button variant=\"secondary\">Clear Filters</Button>\n  </EmptyState.Actions>\n</EmptyState>"
+    },
+    {
+      "name": "With Secondary Action",
+      "description": "Empty state with two actions",
+      "code": "<EmptyState>\n  <EmptyState.Icon><InboxIcon /></EmptyState.Icon>\n  <EmptyState.Title>Inbox is empty</EmptyState.Title>\n  <EmptyState.Description>You have no new messages.</EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Compose Message</Button>\n    <Button variant=\"secondary\">View Archive</Button>\n  </EmptyState.Actions>\n</EmptyState>"
+    },
+    {
+      "name": "Small",
+      "description": "Compact empty state for inline use",
+      "code": "<EmptyState size=\"sm\">\n  <EmptyState.Title>No items</EmptyState.Title>\n  <EmptyState.Description>Add items to see them here.</EmptyState.Description>\n</EmptyState>"
+    },
+    {
+      "name": "Large",
+      "description": "Prominent empty state for full-page use",
+      "code": "<EmptyState size=\"lg\">\n  <EmptyState.Icon><FolderIcon /></EmptyState.Icon>\n  <EmptyState.Title>Welcome to your workspace</EmptyState.Title>\n  <EmptyState.Description>\n    This is where your projects will appear. Create your first project to get started.\n  </EmptyState.Description>\n  <EmptyState.Actions>\n    <Button>Create Your First Project</Button>\n  </EmptyState.Actions>\n</EmptyState>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Alert",
+      "relationship": "alternative",
+      "note": "Use Alert for error states with retry"
+    },
+    {
+      "component": "Progress",
+      "relationship": "alternative",
+      "note": "Use Progress/Spinner for loading states"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "size: sm|md|lg (default: md)",
+      "Sub-components: EmptyState.Icon, EmptyState.Title, EmptyState.Description, EmptyState.Actions",
+      "Compound sub-components forward DOM props to their rendered elements"
+    ],
+    "a11yRules": [
+      "A11Y_EMPTY_STATE_CONTENT"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Icon",
+      "Title",
+      "Description",
+      "Actions"
+    ],
+    "requiredChildren": [
+      "Title"
+    ],
+    "commonPatterns": [
+      "<EmptyState><EmptyState.Title>{title}</EmptyState.Title><EmptyState.Description>{description}</EmptyState.Description></EmptyState>",
+      "<EmptyState><EmptyState.Icon>{icon}</EmptyState.Icon><EmptyState.Title>{title}</EmptyState.Title><EmptyState.Description>{description}</EmptyState.Description><EmptyState.Actions><Button>{action}</Button></EmptyState.Actions></EmptyState>"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:18:56.922Z"
+  }
+}

package/src/components/Field/Field.contract.json

@@ -0,0 +1,157 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "Field",
+  "description": "Compositional form field wrapper providing validation, labels, descriptions, and error messages. Use for advanced form needs beyond baked-in Input/Textarea props.",
+  "category": "forms",
+  "tags": [
+    "form",
+    "field",
+    "validation",
+    "label",
+    "error",
+    "input",
+    "accessible"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/Field/index.tsx",
+  "exportName": "Field",
+  "propsSummary": [
+    "children: node (required)",
+    "name: string",
+    "disabled: boolean",
+    "invalid: boolean",
+    "validate: function",
+    "validationMode: onSubmit|onBlur|onChange",
+    "validationDebounceTime: number"
+  ],
+  "props": {
+    "children": {
+      "type": "node",
+      "description": "Field content (Label, Control, Description, Error)",
+      "required": true
+    },
+    "name": {
+      "type": "string",
+      "description": "Field name, used for error distribution from Form",
+      "required": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "description": "Disables the field and its control",
+      "required": false
+    },
+    "invalid": {
+      "type": "boolean",
+      "description": "Marks the field as invalid",
+      "required": false
+    },
+    "validate": {
+      "type": "function",
+      "description": "Custom validation function returning error string(s) or null",
+      "required": false
+    },
+    "validationMode": {
+      "type": "enum",
+      "description": "When to trigger validation",
+      "required": false,
+      "values": [
+        "onSubmit",
+        "onBlur",
+        "onChange"
+      ]
+    },
+    "validationDebounceTime": {
+      "type": "number",
+      "description": "Debounce time in ms for onChange validation",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "You need granular validation with match-based error messages",
+      "Custom form controls need accessible labels and descriptions",
+      "Server-side errors need to be distributed to specific fields",
+      "You need dirty/touched tracking or custom validation logic"
+    ],
+    "whenNot": [
+      "Simple inputs with basic label and helper text (use Input with label prop)",
+      "Standalone selects or textareas with built-in error display"
+    ],
+    "guidelines": [
+      "Always provide a Field.Label for accessibility",
+      "Wrap any form control in Field.Control to connect it to the field context",
+      "Use match prop on Field.Error for granular native validation messages",
+      "Wrap in Form to enable server-side error distribution by field name"
+    ],
+    "accessibility": [
+      "Label automatically linked to control via aria-labelledby",
+      "Description linked via aria-describedby",
+      "Error messages announced to screen readers",
+      "Supports data-disabled and data-invalid attributes for styling"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Single field",
+      "description": "A single field with label, control, and description",
+      "code": "<Field name=\"email\">\n  <Field.Label>Email address</Field.Label>\n  <Field.Control>\n    <Input type=\"email\" placeholder=\"jane@example.com\" />\n  </Field.Control>\n  <Field.Description>We will never share your email.</Field.Description>\n</Field>"
+    },
+    {
+      "name": "Two-column layout",
+      "description": "Fields arranged in a two-column grid",
+      "code": "<Grid columns={2} gap=\"md\">\n  <Field name=\"firstName\">\n    <Field.Label>First Name</Field.Label>\n    <Field.Control>\n      <Input placeholder=\"Jane\" />\n    </Field.Control>\n  </Field>\n  <Field name=\"lastName\">\n    <Field.Label>Last Name</Field.Label>\n    <Field.Control>\n      <Input placeholder=\"Doe\" />\n    </Field.Control>\n  </Field>\n  <Grid.Item colSpan=\"full\">\n    <Field name=\"email\">\n      <Field.Label>Email</Field.Label>\n      <Field.Control>\n        <Input type=\"email\" placeholder=\"jane@example.com\" />\n      </Field.Control>\n      <Field.Error match=\"typeMismatch\">Enter a valid email address</Field.Error>\n    </Field>\n  </Grid.Item>\n</Grid>"
+    },
+    {
+      "name": "Custom validation",
+      "description": "Field with custom validate function",
+      "code": "<Field\n  name=\"age\"\n  validate={(value) => {\n    const num = Number(value);\n    if (isNaN(num) || num < 18) return 'Must be 18 or older';\n    return null;\n  }}\n  validationMode=\"onChange\"\n  validationDebounceTime={500}\n>\n  <Field.Label>Age</Field.Label>\n  <Field.Control>\n    <Input type=\"number\" placeholder=\"18\" />\n  </Field.Control>\n  <Field.Description>You must be at least 18 years old.</Field.Description>\n  <Field.Error match=\"customError\" />\n</Field>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Input",
+      "relationship": "alternative",
+      "note": "Use Input for simple fields with built-in label/error"
+    },
+    {
+      "component": "Form",
+      "relationship": "parent",
+      "note": "Wrap in Form for server-side error distribution"
+    },
+    {
+      "component": "Fieldset",
+      "relationship": "sibling",
+      "note": "Use Fieldset to group related fields"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "name: string - field name for error distribution",
+      "validate: (value) => string | null - custom validation",
+      "validationMode: onSubmit|onBlur|onChange - validation trigger",
+      "Field.Control: wraps any form component (Input, Textarea, etc.)",
+      "Field.Error match: valueMissing|typeMismatch|customError|... - granular errors"
+    ],
+    "a11yRules": [
+      "A11Y_FIELD_LABEL",
+      "A11Y_FIELD_ERROR",
+      "A11Y_FIELD_DESCRIPTION"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Label",
+      "Control",
+      "Description",
+      "Error",
+      "Validity"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:18:59.733Z"
+  }
+}

package/src/components/Fieldset/Fieldset.contract.json

@@ -0,0 +1,117 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "Fieldset",
+  "description": "Groups related form fields with an accessible legend. Use to organize forms into logical sections.",
+  "category": "forms",
+  "tags": [
+    "form",
+    "fieldset",
+    "group",
+    "legend",
+    "accessible"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/Fieldset/index.tsx",
+  "exportName": "Fieldset",
+  "propsSummary": [
+    "children: node (required)",
+    "disabled: boolean"
+  ],
+  "props": {
+    "children": {
+      "type": "node",
+      "description": "Fieldset content including Fieldset.Legend and form fields",
+      "required": true
+    },
+    "disabled": {
+      "type": "boolean",
+      "description": "Disables all fields within the fieldset",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "Grouping related fields in a form (e.g., address, personal info)",
+      "Disabling a group of fields together",
+      "Providing an accessible group label for screen readers"
+    ],
+    "whenNot": [
+      "Generic visual grouping (use Card)",
+      "Single field wrapping (use Field)"
+    ],
+    "guidelines": [
+      "Always include a Fieldset.Legend for accessibility",
+      "Use disabled prop to disable all fields within the group",
+      "Use Grid inside Fieldset for multi-column layouts",
+      "Fieldset.Legend forwards DOM props for ids, aria attributes, and custom data hooks"
+    ],
+    "accessibility": [
+      "Renders semantic fieldset element",
+      "Legend provides accessible group label",
+      "Disabled state propagates to all child fields"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Two-column layout",
+      "description": "Fieldset with Grid for side-by-side fields",
+      "code": "<Fieldset>\n  <Fieldset.Legend>Personal Information</Fieldset.Legend>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"firstName\">\n      <Field.Label>First Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Jane\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"lastName\">\n      <Field.Label>Last Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Doe\" />\n      </Field.Control>\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"email\">\n        <Field.Label>Email</Field.Label>\n        <Field.Control>\n          <Input type=\"email\" placeholder=\"jane@example.com\" />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n  </Grid>\n</Fieldset>"
+    },
+    {
+      "name": "Mixed controls",
+      "description": "Fieldset with textarea, select, and checkbox",
+      "code": "<Fieldset>\n  <Fieldset.Legend>Preferences</Fieldset.Legend>\n  <Field name=\"bio\">\n    <Field.Label>Bio</Field.Label>\n    <Field.Control>\n      <Textarea placeholder=\"Tell us about yourself\" rows={3} />\n    </Field.Control>\n    <Field.Description>Brief description for your profile.</Field.Description>\n  </Field>\n  <Field name=\"role\">\n    <Field.Label>Role</Field.Label>\n    <Field.Control>\n      <Select placeholder=\"Select a role\">\n        <Select.Trigger />\n        <Select.Content>\n          <Select.Item value=\"admin\">Admin</Select.Item>\n          <Select.Item value=\"editor\">Editor</Select.Item>\n          <Select.Item value=\"viewer\">Viewer</Select.Item>\n        </Select.Content>\n      </Select>\n    </Field.Control>\n  </Field>\n  <Field name=\"newsletter\">\n    <Field.Control>\n      <Checkbox label=\"Subscribe to newsletter\" />\n    </Field.Control>\n  </Field>\n</Fieldset>"
+    },
+    {
+      "name": "With Description",
+      "description": "Fieldset with descriptive helper text below the legend",
+      "code": "<Fieldset>\n  <Fieldset.Legend>Notification Settings</Fieldset.Legend>\n  <Fieldset.Description>Choose how you want to be notified about updates.</Fieldset.Description>\n  <Field name=\"emailNotif\">\n    <Field.Control>\n      <Checkbox label=\"Email notifications\" />\n    </Field.Control>\n  </Field>\n  <Field name=\"smsNotif\">\n    <Field.Control>\n      <Checkbox label=\"SMS notifications\" />\n    </Field.Control>\n  </Field>\n</Fieldset>"
+    },
+    {
+      "name": "Disabled",
+      "description": "Disabled fieldset prevents interaction with all children",
+      "code": "<Fieldset disabled>\n  <Fieldset.Legend>Locked Section</Fieldset.Legend>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"lockedFirst\">\n      <Field.Label>First Name</Field.Label>\n      <Field.Control>\n        <Input defaultValue=\"Jane\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"lockedLast\">\n      <Field.Label>Last Name</Field.Label>\n      <Field.Control>\n        <Input defaultValue=\"Doe\" />\n      </Field.Control>\n    </Field>\n  </Grid>\n  <Field name=\"lockedCheck\">\n    <Field.Control>\n      <Checkbox label=\"Cannot toggle\" defaultChecked />\n    </Field.Control>\n  </Field>\n</Fieldset>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Field",
+      "relationship": "sibling",
+      "note": "Contains Field components"
+    },
+    {
+      "component": "Form",
+      "relationship": "parent",
+      "note": "Used within a Form"
+    },
+    {
+      "component": "Card",
+      "relationship": "alternative",
+      "note": "Use Card for non-form visual grouping"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "disabled: boolean - disables all child fields",
+      "Fieldset.Legend: accessible group label",
+      "Fieldset.Legend forwards DOM props",
+      "Fieldset.Description: helper text below the legend"
+    ],
+    "a11yRules": [
+      "A11Y_FIELDSET_LEGEND"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Legend",
+      "Description"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:18:57.275Z"
+  }
+}

package/src/components/Form/Form.contract.json

@@ -0,0 +1,145 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "Form",
+  "description": "Form wrapper that handles server-side error distribution to Field components. Pairs with Field for complete form validation.",
+  "category": "forms",
+  "tags": [
+    "form",
+    "validation",
+    "errors",
+    "submit",
+    "server"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/Form/index.tsx",
+  "exportName": "Form",
+  "propsSummary": [
+    "children: node (required)",
+    "errors: object",
+    "onSubmit: function",
+    "onFormSubmit: function",
+    "onClearErrors: function",
+    "validationMode: onSubmit|onBlur|onChange"
+  ],
+  "props": {
+    "children": {
+      "type": "node",
+      "description": "Form content",
+      "required": true
+    },
+    "errors": {
+      "type": "object",
+      "description": "Server-side errors keyed by field name",
+      "required": false
+    },
+    "onSubmit": {
+      "type": "function",
+      "description": "Form submission handler (preferred)",
+      "required": false
+    },
+    "onFormSubmit": {
+      "type": "function",
+      "description": "Deprecated alias for onSubmit",
+      "required": false
+    },
+    "onClearErrors": {
+      "type": "function",
+      "description": "Called with field name when errors should be cleared",
+      "required": false
+    },
+    "validationMode": {
+      "type": "enum",
+      "description": "When field validation should run",
+      "required": false,
+      "values": [
+        "onSubmit",
+        "onBlur",
+        "onChange"
+      ]
+    }
+  },
+  "usage": {
+    "when": [
+      "Building forms that need server-side error handling",
+      "Distributing validation errors to specific fields by name",
+      "Combining client and server validation in one form"
+    ],
+    "whenNot": [
+      "Simple forms with only client-side validation (use native form or Field alone)",
+      "Non-form layouts (use Grid or Card)"
+    ],
+    "guidelines": [
+      "Pass errors as Record<string, string | string[]> keyed by field name",
+      "Use onClearErrors to clear errors when fields are modified",
+      "Use onSubmit for form submission handling (onFormSubmit is deprecated alias)",
+      "Field components with matching name prop display errors automatically",
+      "Use Grid inside Form or Fieldset for multi-column layouts"
+    ],
+    "accessibility": [
+      "Renders semantic form element",
+      "Error messages linked to fields via aria-describedby"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Sign up",
+      "description": "Registration form with two-column name fields",
+      "code": "<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"firstName\">\n      <Field.Label>First Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Jane\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"lastName\">\n      <Field.Label>Last Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Doe\" />\n      </Field.Control>\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"email\">\n        <Field.Label>Email</Field.Label>\n        <Field.Control>\n          <Input type=\"email\" placeholder=\"jane@example.com\" />\n        </Field.Control>\n        <Field.Error match=\"typeMismatch\">Enter a valid email address</Field.Error>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"password\">\n        <Field.Label>Password</Field.Label>\n        <Field.Control>\n          <Input type=\"password\" placeholder=\"At least 8 characters\" />\n        </Field.Control>\n        <Field.Description>Must be at least 8 characters</Field.Description>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"terms\">\n        <Field.Control>\n          <Checkbox label=\"I agree to the terms and conditions\" />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Button type=\"submit\" variant=\"primary\">Create Account</Button>\n    </Grid.Item>\n  </Grid>\n</Form>"
+    },
+    {
+      "name": "Profile settings",
+      "description": "Multi-section form with Fieldsets, switches, and radio group",
+      "code": "<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Fieldset>\n    <Fieldset.Legend>Profile</Fieldset.Legend>\n    <Grid columns={2} gap=\"md\">\n      <Field name=\"displayName\">\n        <Field.Label>Display Name</Field.Label>\n        <Field.Control>\n          <Input placeholder=\"How others see you\" />\n        </Field.Control>\n      </Field>\n      <Field name=\"timezone\">\n        <Field.Label>Timezone</Field.Label>\n        <Field.Control>\n          <Select placeholder=\"Select timezone\">\n            <Select.Trigger />\n            <Select.Content>\n              <Select.Item value=\"utc\">UTC</Select.Item>\n              <Select.Item value=\"est\">Eastern (EST)</Select.Item>\n              <Select.Item value=\"pst\">Pacific (PST)</Select.Item>\n              <Select.Item value=\"gmt\">GMT</Select.Item>\n            </Select.Content>\n          </Select>\n        </Field.Control>\n      </Field>\n      <Grid.Item colSpan=\"full\">\n        <Field name=\"bio\">\n          <Field.Label>Bio</Field.Label>\n          <Field.Control>\n            <Textarea placeholder=\"Tell us about yourself\" rows={3} maxLength={280} />\n          </Field.Control>\n          <Field.Description>Max 280 characters</Field.Description>\n        </Field>\n      </Grid.Item>\n    </Grid>\n  </Fieldset>\n  <Fieldset>\n    <Fieldset.Legend>Notifications</Fieldset.Legend>\n    <Field name=\"emailNotifs\">\n      <Field.Control>\n        <Switch label=\"Email notifications\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"marketingEmails\">\n      <Field.Control>\n        <Switch label=\"Marketing emails\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"frequency\">\n      <Field.Label>Digest frequency</Field.Label>\n      <Field.Control>\n        <RadioGroup name=\"frequency\" orientation=\"vertical\">\n          <RadioGroup.Item value=\"daily\" label=\"Daily\" />\n          <RadioGroup.Item value=\"weekly\" label=\"Weekly\" />\n          <RadioGroup.Item value=\"monthly\" label=\"Monthly\" />\n        </RadioGroup>\n      </Field.Control>\n    </Field>\n  </Fieldset>\n  <Button type=\"submit\" variant=\"primary\">Save Changes</Button>\n</Form>"
+    },
+    {
+      "name": "Contact form",
+      "description": "Contact form with select, textarea, and checkbox",
+      "code": "<Form onSubmit={(e) => { e.preventDefault(); }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"name\">\n      <Field.Label>Name</Field.Label>\n      <Field.Control>\n        <Input placeholder=\"Your name\" />\n      </Field.Control>\n    </Field>\n    <Field name=\"email\">\n      <Field.Label>Email</Field.Label>\n      <Field.Control>\n        <Input type=\"email\" placeholder=\"you@example.com\" />\n      </Field.Control>\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"subject\">\n        <Field.Label>Subject</Field.Label>\n        <Field.Control>\n          <Select placeholder=\"What is this about?\">\n            <Select.Trigger />\n            <Select.Content>\n              <Select.Item value=\"general\">General Inquiry</Select.Item>\n              <Select.Item value=\"support\">Technical Support</Select.Item>\n              <Select.Item value=\"billing\">Billing</Select.Item>\n              <Select.Item value=\"feedback\">Feedback</Select.Item>\n            </Select.Content>\n          </Select>\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"message\">\n        <Field.Label>Message</Field.Label>\n        <Field.Control>\n          <Textarea placeholder=\"How can we help?\" rows={5} />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Field name=\"copy\">\n        <Field.Control>\n          <Checkbox label=\"Send me a copy\" />\n        </Field.Control>\n      </Field>\n    </Grid.Item>\n    <Grid.Item colSpan=\"full\">\n      <Button type=\"submit\" variant=\"primary\">Send Message</Button>\n    </Grid.Item>\n  </Grid>\n</Form>"
+    },
+    {
+      "name": "With server errors",
+      "description": "Form displaying server-side validation errors",
+      "code": "<Form errors={{ username: 'Username is already taken', email: 'Email is already registered' }}>\n  <Grid columns={2} gap=\"md\">\n    <Field name=\"username\">\n      <Field.Label>Username</Field.Label>\n      <Field.Control>\n        <Input defaultValue=\"janedoe\" />\n      </Field.Control>\n      <Field.Error match=\"customError\" />\n    </Field>\n    <Field name=\"email\">\n      <Field.Label>Email</Field.Label>\n      <Field.Control>\n        <Input type=\"email\" defaultValue=\"jane@example.com\" />\n      </Field.Control>\n      <Field.Error match=\"customError\" />\n    </Field>\n    <Grid.Item colSpan=\"full\">\n      <Button type=\"submit\" variant=\"primary\">Submit</Button>\n    </Grid.Item>\n  </Grid>\n</Form>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Field",
+      "relationship": "sibling",
+      "note": "Contains Field components for error distribution"
+    },
+    {
+      "component": "Fieldset",
+      "relationship": "sibling",
+      "note": "Use Fieldset to group fields within a Form"
+    },
+    {
+      "component": "Button",
+      "relationship": "sibling",
+      "note": "Use Button type=\"submit\" for form submission"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "errors: Record<string, string | string[]> - server errors by field name",
+      "onSubmit: (event) => void - submission handler (preferred)",
+      "onFormSubmit: (event) => void - deprecated alias for onSubmit",
+      "onClearErrors: (name) => void - clear errors callback"
+    ],
+    "a11yRules": [
+      "A11Y_FORM_LABEL"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Root"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:18:57.100Z"
+  }
+}