@fragments-sdk/ui 0.17.1 → 0.19.0

package/src/components/RadioGroup/RadioGroup.contract.json

@@ -0,0 +1,226 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "RadioGroup",
+  "description": "Single selection from a list of mutually exclusive options",
+  "category": "forms",
+  "tags": [
+    "form",
+    "radio",
+    "selection",
+    "options"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/RadioGroup/index.tsx",
+  "exportName": "RadioGroup",
+  "propsSummary": [
+    "value: string",
+    "defaultValue: string",
+    "onValueChange: function",
+    "onChange: function",
+    "orientation: horizontal|vertical (default: vertical)",
+    "disabled: boolean (default: false)",
+    "name: string",
+    "label: string",
+    "helperText: string",
+    "error: union",
+    "size: sm|md|lg (default: md)",
+    "wrapperClassName: string",
+    "groupClassName: string",
+    "children: node (required)"
+  ],
+  "props": {
+    "value": {
+      "type": "string",
+      "description": "Controlled selected value",
+      "required": false
+    },
+    "defaultValue": {
+      "type": "string",
+      "description": "Default value (uncontrolled)",
+      "required": false
+    },
+    "onValueChange": {
+      "type": "function",
+      "description": "Callback when selection changes",
+      "required": false
+    },
+    "onChange": {
+      "type": "function",
+      "description": "Alias for onValueChange",
+      "required": false
+    },
+    "orientation": {
+      "type": "enum",
+      "description": "Layout orientation",
+      "default": "vertical",
+      "required": false,
+      "values": [
+        "horizontal",
+        "vertical"
+      ]
+    },
+    "disabled": {
+      "type": "boolean",
+      "description": "Disable all options",
+      "default": "false",
+      "required": false
+    },
+    "name": {
+      "type": "string",
+      "description": "Form field name",
+      "required": false
+    },
+    "label": {
+      "type": "string",
+      "description": "Group label",
+      "required": false
+    },
+    "helperText": {
+      "type": "string",
+      "description": "Helper text shown below the group",
+      "required": false
+    },
+    "error": {
+      "type": "union",
+      "description": "Show error styling. When a string is provided, it is displayed as an error message.",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "description": "Size variant",
+      "default": "md",
+      "required": false,
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    "wrapperClassName": {
+      "type": "string",
+      "description": "Class name for the outer wrapper element",
+      "required": false
+    },
+    "groupClassName": {
+      "type": "string",
+      "description": "Class name for the inner radio group element",
+      "required": false
+    },
+    "children": {
+      "type": "node",
+      "description": "RadioGroup.Item elements",
+      "required": true
+    }
+  },
+  "usage": {
+    "when": [
+      "User must select exactly one option from a small set",
+      "Options are mutually exclusive",
+      "All options should be visible at once",
+      "2-5 options available"
+    ],
+    "whenNot": [
+      "Multiple selections allowed (use Checkbox group)",
+      "Many options (use Select)",
+      "Binary on/off choice (use Switch)",
+      "Options need to be searchable (use Combobox)"
+    ],
+    "guidelines": [
+      "Always have one option pre-selected when possible",
+      "Order options logically (alphabetical, frequency, etc.)",
+      "Keep option labels concise",
+      "Use helperText on RadioGroup.Item for complex options"
+    ],
+    "accessibility": [
+      "Group must have an accessible label",
+      "Use arrow keys to navigate between options",
+      "Selected option should be clearly indicated"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Default",
+      "description": "Basic radio group with labels",
+      "code": "<RadioGroup defaultValue=\"option1\" label=\"Select an option\">\n  <RadioGroup.Item value=\"option1\" label=\"Option 1\" />\n  <RadioGroup.Item value=\"option2\" label=\"Option 2\" />\n  <RadioGroup.Item value=\"option3\" label=\"Option 3\" />\n</RadioGroup>"
+    },
+    {
+      "name": "With Helper Text",
+      "description": "Radio items with additional context",
+      "code": "<RadioGroup defaultValue=\"standard\" label=\"Shipping Method\">\n  <RadioGroup.Item\n    value=\"standard\"\n    label=\"Standard\"\n    helperText=\"5-7 business days\"\n  />\n  <RadioGroup.Item\n    value=\"express\"\n    label=\"Express\"\n    helperText=\"2-3 business days\"\n  />\n  <RadioGroup.Item\n    value=\"overnight\"\n    label=\"Overnight\"\n    helperText=\"Next business day\"\n  />\n</RadioGroup>"
+    },
+    {
+      "name": "Horizontal",
+      "description": "Side-by-side layout",
+      "code": "<RadioGroup orientation=\"horizontal\" defaultValue=\"small\" label=\"Size\">\n  <RadioGroup.Item value=\"small\" label=\"S\" />\n  <RadioGroup.Item value=\"medium\" label=\"M\" />\n  <RadioGroup.Item value=\"large\" label=\"L\" />\n  <RadioGroup.Item value=\"xlarge\" label=\"XL\" />\n</RadioGroup>"
+    },
+    {
+      "name": "With Group Helper Text",
+      "description": "Group-level helper text",
+      "code": "<RadioGroup defaultValue=\"standard\" label=\"Plan\" helperText=\"You can change your plan at any time\">\n  <RadioGroup.Item value=\"free\" label=\"Free\" />\n  <RadioGroup.Item value=\"standard\" label=\"Standard\" />\n  <RadioGroup.Item value=\"pro\" label=\"Pro\" />\n</RadioGroup>"
+    },
+    {
+      "name": "With Error",
+      "description": "Validation error state (string shows error message)",
+      "code": "<RadioGroup label=\"Required selection\" error=\"Please select an option\">\n  <RadioGroup.Item value=\"a\" label=\"Option A\" />\n  <RadioGroup.Item value=\"b\" label=\"Option B\" />\n</RadioGroup>"
+    },
+    {
+      "name": "Disabled",
+      "description": "Non-interactive state",
+      "code": "<RadioGroup disabled defaultValue=\"locked\" label=\"Locked selection\">\n  <RadioGroup.Item value=\"locked\" label=\"This is locked\" />\n  <RadioGroup.Item value=\"other\" label=\"Cannot select\" />\n</RadioGroup>"
+    },
+    {
+      "name": "Styling Targets",
+      "description": "Use explicit class names for wrapper/group/item styling hooks",
+      "code": "<RadioGroup\n  defaultValue=\"a\"\n  label=\"Display mode\"\n  wrapperClassName=\"demo-radio-wrapper\"\n  groupClassName=\"demo-radio-group\"\n>\n  <RadioGroup.Item value=\"a\" label=\"Compact\" controlClassName=\"demo-radio-control\" contentClassName=\"demo-radio-content\" />\n  <RadioGroup.Item value=\"b\" label=\"Comfortable\" />\n</RadioGroup>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Checkbox",
+      "relationship": "alternative",
+      "note": "Use Checkbox for multiple selections"
+    },
+    {
+      "component": "Select",
+      "relationship": "alternative",
+      "note": "Use Select for many options or limited space"
+    },
+    {
+      "component": "Switch",
+      "relationship": "alternative",
+      "note": "Use Switch for binary on/off choices"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "value: string - selected value",
+      "onValueChange: (value: string) => void",
+      "onChange: (value: string) => void - alias for onValueChange",
+      "orientation: horizontal|vertical (default: vertical)",
+      "size: sm|md|lg (default: md)",
+      "label: string - group label",
+      "helperText: string - helper text below the group",
+      "error: boolean | string - error styling and message",
+      "disabled: boolean - disable all options",
+      "wrapperClassName/groupClassName - explicit styling targets for wrapper and group",
+      "RadioGroup.Item supports helperText (preferred) and description (legacy alias) plus controlClassName/contentClassName for item-level styling"
+    ],
+    "a11yRules": [
+      "A11Y_RADIO_GROUP",
+      "A11Y_LABEL_REQUIRED",
+      "A11Y_TARGET_SIZE_MIN"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Item"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:19:02.692Z"
+  }
+}

package/src/components/ScrollArea/ScrollArea.contract.json

@@ -0,0 +1,131 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "ScrollArea",
+  "description": "A styled scrollable container with thin scrollbars and optional fade indicators.",
+  "category": "layout",
+  "tags": [
+    "scroll",
+    "overflow",
+    "scrollbar",
+    "container",
+    "layout"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/ScrollArea/index.tsx",
+  "exportName": "ScrollArea",
+  "propsSummary": [
+    "children: node (required)",
+    "orientation: horizontal|vertical|both (default: vertical)",
+    "scrollbarVisibility: auto|always|hover (default: auto)",
+    "showFades: boolean (default: false)",
+    "className: string"
+  ],
+  "props": {
+    "children": {
+      "type": "node",
+      "description": "Scrollable content",
+      "required": true
+    },
+    "orientation": {
+      "type": "enum",
+      "description": "Scroll direction",
+      "default": "vertical",
+      "required": false,
+      "values": [
+        "horizontal",
+        "vertical",
+        "both"
+      ]
+    },
+    "scrollbarVisibility": {
+      "type": "enum",
+      "description": "When to show the scrollbar",
+      "default": "auto",
+      "required": false,
+      "values": [
+        "auto",
+        "always",
+        "hover"
+      ]
+    },
+    "showFades": {
+      "type": "boolean",
+      "description": "Show gradient fade indicators at scroll edges",
+      "default": "false",
+      "required": false
+    },
+    "className": {
+      "type": "string",
+      "description": "Additional class name",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "Content overflows its container and needs scrolling",
+      "Horizontal tab bars or chip lists that may overflow",
+      "Scrollable panels, sidebars, or dropdown content",
+      "Any area where native scrollbars look too heavy"
+    ],
+    "whenNot": [
+      "Page-level scrolling (use native body scroll)",
+      "Very short content that never overflows"
+    ],
+    "guidelines": [
+      "Use `orientation` to constrain scroll direction",
+      "Use `showFades` to hint at hidden content beyond the viewport",
+      "The `hover` scrollbar visibility keeps the UI clean until the user interacts",
+      "Combine with `orientation=\"horizontal\"` for tab bars and chip rows"
+    ],
+    "accessibility": [
+      "Preserves native scroll behavior and keyboard support",
+      "Scrollbar is visible on focus for keyboard users",
+      "Respects prefers-reduced-motion for fade transitions"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Vertical",
+      "description": "Vertical scrollable area with thin scrollbar.",
+      "code": "<ScrollArea style={{ height: '200px' }}>\n  {/* Long content */}\n</ScrollArea>"
+    },
+    {
+      "name": "Horizontal",
+      "description": "Horizontal scrollable area for overflowing inline content like tabs or chips.",
+      "code": "<ScrollArea orientation=\"horizontal\">\n  <div style={{ display: 'flex', gap: '8px' }}>\n    {tags.map(tag => <Chip key={tag}>{tag}</Chip>)}\n  </div>\n</ScrollArea>"
+    },
+    {
+      "name": "With Fades",
+      "description": "Fade indicators show when content is scrollable in either direction.",
+      "code": "<ScrollArea orientation=\"horizontal\" showFades>\n  {/* Overflowing content */}\n</ScrollArea>"
+    },
+    {
+      "name": "Hover Scrollbar",
+      "description": "Scrollbar is hidden until the user hovers over the scroll area.",
+      "code": "<ScrollArea scrollbarVisibility=\"hover\" style={{ height: '200px' }}>\n  {/* Content */}\n</ScrollArea>"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "orientation: horizontal|vertical|both - scroll direction",
+      "scrollbarVisibility: auto|always|hover - scrollbar display mode",
+      "showFades: boolean - gradient edge indicators"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Root"
+    ],
+    "commonPatterns": [
+      "<ScrollArea orientation=\"horizontal\"><div style={{ display: \"flex\", gap: 8 }}>{items}</div></ScrollArea>",
+      "<ScrollArea style={{ height: 300 }}>{longContent}</ScrollArea>"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:19:02.867Z"
+  }
+}

package/src/components/Select/Select.contract.json

@@ -0,0 +1,269 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "Select",
+  "description": "Dropdown for choosing from a list of options. Use when there are more than 4-5 choices that would clutter the UI.",
+  "category": "forms",
+  "tags": [
+    "select",
+    "dropdown",
+    "form",
+    "options",
+    "picker"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/Select/index.tsx",
+  "exportName": "Select",
+  "propsSummary": [
+    "children: node",
+    "value: string",
+    "defaultValue: string",
+    "onValueChange: function",
+    "onChange: function",
+    "open: boolean",
+    "defaultOpen: boolean",
+    "onOpenChange: function",
+    "required: boolean",
+    "name: string",
+    "placeholder: string",
+    "options: array",
+    "size: sm|md|lg (default: md)",
+    "className: string",
+    "label: string",
+    "helperText: string",
+    "error: union",
+    "disabled: boolean"
+  ],
+  "props": {
+    "children": {
+      "type": "node",
+      "description": "Select trigger and content",
+      "required": false
+    },
+    "value": {
+      "type": "string",
+      "description": "Controlled selected value",
+      "required": false
+    },
+    "defaultValue": {
+      "type": "string",
+      "description": "Default selected value (uncontrolled)",
+      "required": false
+    },
+    "onValueChange": {
+      "type": "function",
+      "description": "Called when selection changes",
+      "required": false
+    },
+    "onChange": {
+      "type": "function",
+      "description": "Alias for onValueChange",
+      "required": false
+    },
+    "open": {
+      "type": "boolean",
+      "description": "Controlled open state of the dropdown",
+      "required": false
+    },
+    "defaultOpen": {
+      "type": "boolean",
+      "description": "Initial open state for uncontrolled usage",
+      "default": "false",
+      "required": false
+    },
+    "onOpenChange": {
+      "type": "function",
+      "description": "Called when dropdown open state changes",
+      "required": false
+    },
+    "required": {
+      "type": "boolean",
+      "description": "Whether a selection is required",
+      "required": false
+    },
+    "name": {
+      "type": "string",
+      "description": "Form field name",
+      "required": false
+    },
+    "placeholder": {
+      "type": "string",
+      "description": "Placeholder text when no value selected",
+      "required": false
+    },
+    "options": {
+      "type": "array",
+      "description": "Convenience options array for simple selects (alternative to compound Select.Item children)",
+      "required": false
+    },
+    "size": {
+      "type": "enum",
+      "description": "Size variant",
+      "default": "md",
+      "required": false,
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    "className": {
+      "type": "string",
+      "description": "Wrapper class name",
+      "required": false
+    },
+    "label": {
+      "type": "string",
+      "description": "Visible label text above the select",
+      "required": false
+    },
+    "helperText": {
+      "type": "string",
+      "description": "Helper text shown below the select",
+      "required": false
+    },
+    "error": {
+      "type": "union",
+      "description": "Show error styling. When a string is provided, it is displayed as an error message.",
+      "required": false
+    },
+    "disabled": {
+      "type": "boolean",
+      "description": "Disable the select",
+      "default": "false",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "Choosing from a predefined list of options",
+      "More than 4-5 options that would clutter UI as radio buttons",
+      "Space-constrained forms",
+      "When users need to see all options at once"
+    ],
+    "whenNot": [
+      "Very few options (2-3) - use radio buttons",
+      "Users might type custom values - use Combobox",
+      "Multiple selections needed - use Checkbox group or MultiSelect",
+      "Actions, not selection - use Menu"
+    ],
+    "guidelines": [
+      "Include a placeholder that explains what to select",
+      "Use label prop for accessible field labeling",
+      "Use helperText for guidance and error for validation messages",
+      "Group related options with SelectGroup",
+      "Keep option text concise",
+      "Order options logically (alphabetical, by frequency, or by category)"
+    ],
+    "accessibility": [
+      "Full keyboard navigation support",
+      "Type-ahead search within options",
+      "Proper ARIA roles and attributes"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Default",
+      "description": "Basic select dropdown",
+      "code": "<StatefulSelect placeholder=\"Select a fruit\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"apple\">Apple</Select.Item>\n    <Select.Item value=\"banana\">Banana</Select.Item>\n    <Select.Item value=\"orange\">Orange</Select.Item>\n    <Select.Item value=\"grape\">Grape</Select.Item>\n  </Select.Content>\n</StatefulSelect>"
+    },
+    {
+      "name": "With Groups",
+      "description": "Options organized into groups",
+      "code": "<StatefulSelect placeholder=\"Select a country\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Group>\n      <Select.GroupLabel>North America</Select.GroupLabel>\n      <Select.Item value=\"us\">United States</Select.Item>\n      <Select.Item value=\"ca\">Canada</Select.Item>\n      <Select.Item value=\"mx\">Mexico</Select.Item>\n    </Select.Group>\n    <Select.Group>\n      <Select.GroupLabel>Europe</Select.GroupLabel>\n      <Select.Item value=\"uk\">United Kingdom</Select.Item>\n      <Select.Item value=\"de\">Germany</Select.Item>\n      <Select.Item value=\"fr\">France</Select.Item>\n    </Select.Group>\n  </Select.Content>\n</StatefulSelect>"
+    },
+    {
+      "name": "With Label and Helper Text",
+      "description": "Select with built-in label and helper text",
+      "code": "<StatefulSelect\n  label=\"Timezone\"\n  placeholder=\"Select a timezone\"\n  helperText=\"Used for reminders and calendar notifications.\"\n>\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"pt\">Pacific Time</Select.Item>\n    <Select.Item value=\"mt\">Mountain Time</Select.Item>\n    <Select.Item value=\"ct\">Central Time</Select.Item>\n    <Select.Item value=\"et\">Eastern Time</Select.Item>\n  </Select.Content>\n</StatefulSelect>"
+    },
+    {
+      "name": "Error State",
+      "description": "Validation error with message",
+      "code": "<Select\n  label=\"Country\"\n  placeholder=\"Select a country\"\n  error=\"Please select a country\"\n>\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"us\">United States</Select.Item>\n    <Select.Item value=\"uk\">United Kingdom</Select.Item>\n  </Select.Content>\n</Select>"
+    },
+    {
+      "name": "With Disabled Options",
+      "description": "Some options are disabled",
+      "code": "<StatefulSelect placeholder=\"Select a plan\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"free\">Free</Select.Item>\n    <Select.Item value=\"pro\">Pro</Select.Item>\n    <Select.Item value=\"enterprise\" disabled>Enterprise (Contact Sales)</Select.Item>\n  </Select.Content>\n</StatefulSelect>"
+    },
+    {
+      "name": "Scrollable List",
+      "description": "Long list with scroll hint — shows 4 items with half-peek of the 5th to indicate more",
+      "code": "<StatefulSelect placeholder=\"Select a timezone\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"utc-8\">Pacific Time (UTC-8)</Select.Item>\n    <Select.Item value=\"utc-7\">Mountain Time (UTC-7)</Select.Item>\n    <Select.Item value=\"utc-6\">Central Time (UTC-6)</Select.Item>\n    <Select.Item value=\"utc-5\">Eastern Time (UTC-5)</Select.Item>\n    <Select.Item value=\"utc-4\">Atlantic Time (UTC-4)</Select.Item>\n    <Select.Item value=\"utc+0\">GMT (UTC+0)</Select.Item>\n    <Select.Item value=\"utc+1\">Central European (UTC+1)</Select.Item>\n    <Select.Item value=\"utc+5.5\">India Standard (UTC+5:30)</Select.Item>\n    <Select.Item value=\"utc+8\">China Standard (UTC+8)</Select.Item>\n    <Select.Item value=\"utc+9\">Japan Standard (UTC+9)</Select.Item>\n  </Select.Content>\n</StatefulSelect>"
+    },
+    {
+      "name": "Custom Max Visible Items",
+      "description": "Show 6 items before scrolling with half-peek scroll hint",
+      "code": "<StatefulSelect placeholder=\"Select a color\">\n  <Select.Trigger />\n  <Select.Content maxVisibleItems={6}>\n    <Select.Item value=\"red\">Red</Select.Item>\n    <Select.Item value=\"orange\">Orange</Select.Item>\n    <Select.Item value=\"yellow\">Yellow</Select.Item>\n    <Select.Item value=\"green\">Green</Select.Item>\n    <Select.Item value=\"blue\">Blue</Select.Item>\n    <Select.Item value=\"indigo\">Indigo</Select.Item>\n    <Select.Item value=\"violet\">Violet</Select.Item>\n    <Select.Item value=\"pink\">Pink</Select.Item>\n    <Select.Item value=\"teal\">Teal</Select.Item>\n    <Select.Item value=\"cyan\">Cyan</Select.Item>\n  </Select.Content>\n</StatefulSelect>"
+    },
+    {
+      "name": "Disabled",
+      "description": "Disabled select",
+      "code": "<Select disabled placeholder=\"Select an option\">\n  <Select.Trigger />\n  <Select.Content>\n    <Select.Item value=\"1\">Option 1</Select.Item>\n  </Select.Content>\n</Select>"
+    },
+    {
+      "name": "Options Prop",
+      "description": "Convenience API for simple lists without manual Select.Item composition",
+      "code": "<StatefulSelect\n  placeholder=\"Select a team\"\n  options={[\n    { value: 'eng', label: 'Engineering' },\n    { value: 'design', label: 'Design' },\n    { value: 'pm', label: 'Product' },\n  ]}\n>\n  <Select.Trigger />\n  <Select.Content />\n</StatefulSelect>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Menu",
+      "relationship": "alternative",
+      "note": "Use Menu for action-based dropdowns"
+    },
+    {
+      "component": "Input",
+      "relationship": "sibling",
+      "note": "Use Input for free-form text entry"
+    },
+    {
+      "component": "Checkbox",
+      "relationship": "alternative",
+      "note": "Use Checkbox group for multiple selections"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "value: string | null - controlled selected value",
+      "onValueChange: (value: string | null) => void - selection handler",
+      "onChange: (value: string | null) => void - alias for onValueChange",
+      "label: string - visible label text",
+      "helperText: string - helper text below field",
+      "error: boolean | string - error styling and message",
+      "placeholder: string - placeholder text",
+      "disabled: boolean - disable select",
+      "size: sm|md|lg (default: md)",
+      "options: SelectOption[] - convenience API for simple option lists",
+      "maxVisibleItems: number - max visible options before scrolling (default 4)"
+    ],
+    "a11yRules": [
+      "A11Y_SELECT_KEYBOARD",
+      "A11Y_SELECT_LABEL"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Trigger",
+      "Content",
+      "Item",
+      "Group",
+      "GroupLabel"
+    ],
+    "requiredChildren": [
+      "Trigger",
+      "Content"
+    ],
+    "commonPatterns": [
+      "<Select placeholder=\"Select option\"><Select.Trigger /><Select.Content><Select.Item value=\"opt1\">{label1}</Select.Item><Select.Item value=\"opt2\">{label2}</Select.Item></Select.Content></Select>"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:19:03.116Z"
+  }
+}