@fragments-sdk/ui 0.17.0 → 0.18.0

package/src/components/Button/Button.contract.json

@@ -0,0 +1,205 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "Button",
+  "description": "Interactive element for user actions and form submissions",
+  "category": "forms",
+  "tags": [
+    "action",
+    "button",
+    "form",
+    "interactive"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/Button/index.tsx",
+  "exportName": "Button",
+  "propsSummary": [
+    "as: button|a",
+    "children: node (required)",
+    "variant: primary|secondary|ghost|danger|outlined|outline|icon (default: \"primary\")",
+    "size: sm|md|lg (default: \"md\")",
+    "icon: boolean",
+    "fullWidth: boolean",
+    "asChild: boolean"
+  ],
+  "props": {
+    "as": {
+      "type": "enum",
+      "description": "Render as a native button or anchor element",
+      "default": "button",
+      "required": false,
+      "values": [
+        "button",
+        "a"
+      ]
+    },
+    "children": {
+      "type": "node",
+      "description": "Button label content",
+      "required": true
+    },
+    "variant": {
+      "type": "enum",
+      "description": "Visual style variant (\"icon\" is a convenience alias for outlined + icon-only layout)",
+      "default": "\"primary\"",
+      "required": false,
+      "values": [
+        "primary",
+        "secondary",
+        "ghost",
+        "danger",
+        "outlined",
+        "outline",
+        "icon"
+      ],
+      "constraints": [
+        "Only one primary button per context"
+      ]
+    },
+    "size": {
+      "type": "enum",
+      "description": "Button size",
+      "default": "\"md\"",
+      "required": false,
+      "values": [
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    "icon": {
+      "type": "boolean",
+      "description": "Render as icon-only button (square aspect ratio). Useful with any visual variant; variant=\"icon\" is the default outlined icon-only shortcut.",
+      "default": "false",
+      "required": false
+    },
+    "fullWidth": {
+      "type": "boolean",
+      "description": "Make button full width of container",
+      "default": "false",
+      "required": false
+    },
+    "asChild": {
+      "type": "boolean",
+      "description": "Merge button styling onto child element (e.g. Next.js Link)",
+      "default": "false",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "Triggering an action (save, submit, delete, etc.)",
+      "Form submission",
+      "Opening dialogs or menus",
+      "Navigation when action context is needed"
+    ],
+    "whenNot": [
+      "Simple navigation (use Link)",
+      "Toggling state (use Switch or Checkbox)",
+      "Selecting from options (use Select or RadioGroup)"
+    ],
+    "guidelines": [
+      "Use Primary for the main action in a context",
+      "Only one Primary button per section/form",
+      "Use Danger variant for destructive actions",
+      "Loading state should disable the button",
+      "When using asChild, pass interaction and accessibility props directly on Button (they are forwarded to the child element)",
+      "Use variant=\"icon\" for the default icon-only action button, or combine icon={true} with another visual variant when needed"
+    ],
+    "accessibility": [
+      "Button text should describe the action",
+      "Avoid generic labels like \"Click here\"",
+      "Icon-only buttons need aria-label"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Primary",
+      "description": "Default action button for primary actions",
+      "code": "<Button variant=\"primary\">Save Changes</Button>"
+    },
+    {
+      "name": "Secondary",
+      "description": "Less prominent action button",
+      "code": "<Button variant=\"secondary\">Cancel</Button>"
+    },
+    {
+      "name": "Ghost",
+      "description": "Minimal visual weight for subtle actions",
+      "code": "<Button variant=\"ghost\">Learn More</Button>"
+    },
+    {
+      "name": "Danger",
+      "description": "Destructive action requiring attention",
+      "code": "<Button variant=\"danger\">Delete Item</Button>"
+    },
+    {
+      "name": "Outline",
+      "description": "Bordered button with transparent background",
+      "code": "<Button variant=\"outline\">View Details</Button>"
+    },
+    {
+      "name": "Icon",
+      "description": "Convenience icon-only button alias (ghost + square icon sizing)",
+      "code": "<Button variant=\"icon\" aria-label=\"Add item\">\n  <span aria-hidden>+</span>\n</Button>"
+    },
+    {
+      "name": "Sizes",
+      "description": "Available size options",
+      "code": "<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>\n  <Button size=\"sm\">Small</Button>\n  <Button size=\"md\">Medium</Button>\n  <Button size=\"lg\">Large</Button>\n</div>"
+    },
+    {
+      "name": "Disabled",
+      "description": "Non-interactive state",
+      "code": "<Button disabled>Cannot Click</Button>"
+    },
+    {
+      "name": "As Child",
+      "description": "Compose button styles onto another interactive element while preserving forwarded props",
+      "code": "<Button asChild variant=\"outlined\" aria-label=\"Open billing settings\">\n  <a href=\"#billing-settings\">Billing Settings</a>\n</Button>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Link",
+      "relationship": "alternative",
+      "note": "Use Link for navigation without action context"
+    },
+    {
+      "component": "Icon",
+      "relationship": "complementary",
+      "note": "Use Icon inside Button for icon-leading/trailing or icon-only actions"
+    },
+    {
+      "component": "ButtonGroup",
+      "relationship": "parent",
+      "note": "Use ButtonGroup for related action sets"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "variant: primary|secondary|ghost|danger|outlined|outline|icon (default: primary, icon = outlined + icon-only)",
+      "size: sm|md|lg (default: md)",
+      "disabled: boolean - disables interaction",
+      "type: button|submit|reset (default: button)",
+      "onClick: (event) => void - action handler",
+      "asChild: boolean - composes styles/props onto a child element (links/router links)",
+      "icon: boolean - icon-only square layout (can be combined with visual variants)"
+    ],
+    "a11yRules": [
+      "A11Y_BTN_LABEL",
+      "A11Y_BTN_FOCUS"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Root"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:18:51.517Z"
+  }
+}

package/src/components/ButtonGroup/ButtonGroup.contract.json

@@ -0,0 +1,140 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "ButtonGroup",
+  "description": "Groups related buttons together with consistent spacing and alignment. Useful for action bars, toolbars, and related button sets.",
+  "category": "forms",
+  "tags": [
+    "button",
+    "group",
+    "toolbar",
+    "actions",
+    "layout"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/ButtonGroup/index.tsx",
+  "exportName": "ButtonGroup",
+  "propsSummary": [
+    "children: node (required)",
+    "gap: none|xs|sm|md (default: sm)",
+    "wrap: boolean (default: false)",
+    "align: start|center|end"
+  ],
+  "props": {
+    "children": {
+      "type": "node",
+      "description": "Button elements to group together",
+      "required": true
+    },
+    "gap": {
+      "type": "enum",
+      "description": "Spacing between buttons",
+      "default": "sm",
+      "required": false,
+      "values": [
+        "none",
+        "xs",
+        "sm",
+        "md"
+      ]
+    },
+    "wrap": {
+      "type": "boolean",
+      "description": "Allow buttons to wrap to next line",
+      "default": "false",
+      "required": false
+    },
+    "align": {
+      "type": "enum",
+      "description": "Alignment of buttons",
+      "required": false,
+      "values": [
+        "start",
+        "center",
+        "end"
+      ]
+    }
+  },
+  "usage": {
+    "when": [
+      "Grouping related actions together",
+      "Creating toolbars or action bars",
+      "Form submit/cancel button pairs",
+      "Pagination controls"
+    ],
+    "whenNot": [
+      "Unrelated buttons (use Stack instead)",
+      "Navigation links (use nav element)",
+      "Single button (no grouping needed)"
+    ],
+    "guidelines": [
+      "Keep button groups focused on related actions",
+      "Use consistent button variants within a group",
+      "Consider visual hierarchy - primary action should stand out",
+      "Limit to 2-4 buttons per group for clarity",
+      "Pass role/aria-label/id/data-* directly to ButtonGroup when you need semantic grouping hooks"
+    ],
+    "accessibility": [
+      "Group provides semantic relationship between buttons",
+      "Each button remains individually focusable",
+      "Consider using role=\"group\" with aria-label for screen readers"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Default",
+      "description": "Basic button group with default spacing",
+      "code": "<ButtonGroup>\n  <Button variant=\"secondary\">Cancel</Button>\n  <Button variant=\"primary\">Save</Button>\n</ButtonGroup>"
+    },
+    {
+      "name": "Gap Variants",
+      "description": "Different spacing options",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>\n  <ButtonGroup gap=\"none\">\n    <Button variant=\"secondary\" size=\"sm\">None</Button>\n    <Button variant=\"secondary\" size=\"sm\">Gap</Button>\n  </ButtonGroup>\n  <ButtonGroup gap=\"xs\">\n    <Button variant=\"secondary\" size=\"sm\">XS</Button>\n    <Button variant=\"secondary\" size=\"sm\">Gap</Button>\n  </ButtonGroup>\n  <ButtonGroup gap=\"sm\">\n    <Button variant=\"secondary\" size=\"sm\">SM</Button>\n    <Button variant=\"secondary\" size=\"sm\">Gap</Button>\n  </ButtonGroup>\n  <ButtonGroup gap=\"md\">\n    <Button variant=\"secondary\" size=\"sm\">MD</Button>\n    <Button variant=\"secondary\" size=\"sm\">Gap</Button>\n  </ButtonGroup>\n</div>"
+    },
+    {
+      "name": "Alignment",
+      "description": "Different alignment options",
+      "code": "<div style={{ display: 'flex', flexDirection: 'column', gap: '16px', width: '300px' }}>\n  <ButtonGroup align=\"start\">\n    <Button variant=\"secondary\" size=\"sm\">Start</Button>\n    <Button variant=\"secondary\" size=\"sm\">Aligned</Button>\n  </ButtonGroup>\n  <ButtonGroup align=\"center\">\n    <Button variant=\"secondary\" size=\"sm\">Center</Button>\n    <Button variant=\"secondary\" size=\"sm\">Aligned</Button>\n  </ButtonGroup>\n  <ButtonGroup align=\"end\">\n    <Button variant=\"secondary\" size=\"sm\">End</Button>\n    <Button variant=\"secondary\" size=\"sm\">Aligned</Button>\n  </ButtonGroup>\n</div>"
+    },
+    {
+      "name": "Form Actions",
+      "description": "Common pattern for form submit/cancel",
+      "code": "<ButtonGroup align=\"end\" role=\"group\" aria-label=\"Form actions\">\n  <Button variant=\"ghost\">Cancel</Button>\n  <Button variant=\"primary\">Submit</Button>\n</ButtonGroup>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Button",
+      "relationship": "child",
+      "note": "ButtonGroup contains Button components"
+    },
+    {
+      "component": "Stack",
+      "relationship": "alternative",
+      "note": "Use Stack for more general layout needs"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "children: ReactNode - buttons to group",
+      "gap: none|xs|sm|md - spacing between buttons",
+      "wrap: boolean - allow wrapping",
+      "align: start|center|end - alignment",
+      "Pass-through DOM props supported on root (id, role, aria-*, data-*, handlers)"
+    ],
+    "a11yRules": [
+      "A11Y_GROUP_LABEL"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Root"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:18:51.693Z"
+  }
+}

package/src/components/Card/Card.contract.json

@@ -0,0 +1,185 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "Card",
+  "description": "Container for grouping related content",
+  "category": "layout",
+  "tags": [
+    "container",
+    "layout",
+    "surface"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/Card/index.tsx",
+  "exportName": "Card",
+  "propsSummary": [
+    "children: node (required)",
+    "variant: default|outlined|outline|elevated (default: default)",
+    "padding: none|sm|md|lg (default: md)",
+    "as: article|div|section (default: article)",
+    "style: object"
+  ],
+  "props": {
+    "children": {
+      "type": "node",
+      "description": "Card content - use Card.Header, Card.Body, Card.Footer sub-components",
+      "required": true
+    },
+    "variant": {
+      "type": "enum",
+      "description": "Visual style of the card surface",
+      "default": "default",
+      "required": false,
+      "values": [
+        "default",
+        "outlined",
+        "outline",
+        "elevated"
+      ],
+      "constraints": [
+        "Use \"elevated\" sparingly to maintain visual hierarchy"
+      ]
+    },
+    "padding": {
+      "type": "enum",
+      "description": "Internal padding size",
+      "default": "md",
+      "required": false,
+      "values": [
+        "none",
+        "sm",
+        "md",
+        "lg"
+      ]
+    },
+    "as": {
+      "type": "enum",
+      "description": "Semantic HTML element for the card root",
+      "default": "article",
+      "required": false,
+      "values": [
+        "article",
+        "div",
+        "section"
+      ]
+    },
+    "style": {
+      "type": "object",
+      "description": "",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "Grouping related pieces of content together",
+      "Creating visual separation between content sections",
+      "Displaying a preview or summary of an item",
+      "Building dashboard widgets or tiles"
+    ],
+    "whenNot": [
+      "Simple text content that does not need grouping",
+      "Modal or dialog content (use Dialog component)",
+      "Navigation items (use List or Sidebar patterns)"
+    ],
+    "guidelines": [
+      "Use consistent card variants within the same context",
+      "Cards in a grid should have uniform sizing",
+      "Use elevated variant sparingly for emphasis",
+      "If a card is clickable, provide clear hover/focus affordances and prefer explicit buttons/links inside the card"
+    ],
+    "accessibility": [
+      "Card is a semantic container (article/div/section); onClick does not automatically add button semantics",
+      "Card titles should be appropriate heading levels"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Default",
+      "description": "Standard card with subtle shadow",
+      "code": "<Card>\n  <Card.Header>\n    <Card.Title>Card Title</Card.Title>\n    <Card.Description>A brief description</Card.Description>\n  </Card.Header>\n  <Card.Body>Card content goes here.</Card.Body>\n</Card>"
+    },
+    {
+      "name": "Outlined",
+      "description": "Card with border instead of shadow",
+      "code": "<Card variant=\"outlined\">\n  <Card.Header>\n    <Card.Title>Outlined Card</Card.Title>\n  </Card.Header>\n  <Card.Body>Content with border.</Card.Body>\n</Card>"
+    },
+    {
+      "name": "Outline",
+      "description": "Card with border, using the \"outline\" alias for \"outlined\"",
+      "code": "<Card variant=\"outline\">\n  <Card.Header>\n    <Card.Title>Outline Card</Card.Title>\n  </Card.Header>\n  <Card.Body>Uses the Radix/Shadcn-style alias.</Card.Body>\n</Card>"
+    },
+    {
+      "name": "Elevated",
+      "description": "Card with prominent shadow for emphasis",
+      "code": "<Card variant=\"elevated\">\n  <Card.Header>\n    <Card.Title>Featured Item</Card.Title>\n  </Card.Header>\n  <Card.Body>Important content.</Card.Body>\n</Card>"
+    },
+    {
+      "name": "Interactive",
+      "description": "Clickable card surface (root stays a semantic container)",
+      "code": "<Card as=\"section\" onClick={() => alert('Card clicked!')}>\n  <Card.Header>\n    <Card.Title>Click Me</Card.Title>\n    <Card.Description>This card is interactive</Card.Description>\n  </Card.Header>\n  <Card.Body>Click anywhere on this card.</Card.Body>\n</Card>"
+    },
+    {
+      "name": "Section Root",
+      "description": "Use the as prop to match the surrounding document semantics",
+      "code": "<Card as=\"section\" aria-labelledby=\"billing-card-title\">\n  <Card.Header>\n    <Card.Title id=\"billing-card-title\">Billing Summary</Card.Title>\n  </Card.Header>\n  <Card.Body>Section semantics can improve document structure for grouped content.</Card.Body>\n</Card>"
+    },
+    {
+      "name": "With Footer",
+      "description": "Card with header, body, and footer",
+      "code": "<Card>\n  <Card.Header>\n    <Card.Title>Card with Footer</Card.Title>\n    <Card.Description>Complete card layout</Card.Description>\n  </Card.Header>\n  <Card.Body>Main content area.</Card.Body>\n  <Card.Footer>Footer actions go here</Card.Footer>\n</Card>"
+    },
+    {
+      "name": "Content Only",
+      "description": "Card with just body content",
+      "code": "<Card>\n  <Card.Body>Just content, no header or footer.</Card.Body>\n</Card>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Grid",
+      "relationship": "parent",
+      "note": "Use Grid + Card for responsive card layouts"
+    },
+    {
+      "component": "List",
+      "relationship": "alternative",
+      "note": "Use List for linear, text-first layouts"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "variant: default|outlined|outline|elevated (default: default)",
+      "padding: none|sm|md|lg (default: md)",
+      "as: article|div|section (default: article) - card root element",
+      "onClick: (event) => void - click handler on root (semantics unchanged)",
+      "Sub-components: Card.Header, Card.Title, Card.Description, Card.Body, Card.Footer"
+    ],
+    "a11yRules": [
+      "A11Y_CARD_HEADING",
+      "A11Y_CARD_INTERACTIVE"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Header",
+      "Title",
+      "Description",
+      "Body",
+      "Footer"
+    ],
+    "requiredChildren": [
+      "Body"
+    ],
+    "commonPatterns": [
+      "<Card><Card.Body>{content}</Card.Body></Card>",
+      "<Card><Card.Header><Card.Title>{title}</Card.Title></Card.Header><Card.Body>{content}</Card.Body></Card>",
+      "<Card><Card.Header><Card.Title>{title}</Card.Title><Card.Description>{desc}</Card.Description></Card.Header><Card.Body>{content}</Card.Body><Card.Footer>{actions}</Card.Footer></Card>"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:18:51.869Z"
+  }
+}

package/src/components/Chart/Chart.contract.json

@@ -0,0 +1,129 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "Chart",
+  "description": "Composable chart wrapper for recharts with theme-aware tooltips, legends, and color integration.",
+  "category": "display",
+  "tags": [
+    "chart",
+    "graph",
+    "data-visualization",
+    "recharts"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/Chart/index.tsx",
+  "exportName": "ChartContainer",
+  "propsSummary": [
+    "config: object (required)",
+    "children: element (required)",
+    "summary: string",
+    "dataTable: node",
+    "style: object"
+  ],
+  "props": {
+    "config": {
+      "type": "object",
+      "description": "ChartConfig mapping data keys to labels/colors (optional icon per series)",
+      "required": true
+    },
+    "children": {
+      "type": "element",
+      "description": "A recharts chart component (LineChart, BarChart, etc.)",
+      "required": true
+    },
+    "summary": {
+      "type": "string",
+      "description": "Non-visual summary announced to assistive technology users",
+      "required": false
+    },
+    "dataTable": {
+      "type": "node",
+      "description": "Optional accessible data table or textual fallback",
+      "required": false
+    },
+    "style": {
+      "type": "object",
+      "description": "",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "Displaying data trends over time",
+      "Comparing categorical data",
+      "Showing distribution or composition",
+      "Dashboard data visualizations"
+    ],
+    "whenNot": [
+      "Simple numeric values (use Text or Badge)",
+      "Progress toward a goal (use Progress)",
+      "Tabular data without visualization (use Table)"
+    ],
+    "guidelines": [
+      "Use ChartContainer to wrap recharts chart components",
+      "Define a ChartConfig to map data keys to labels and colors (and optionally icons for custom legend/tooltip UIs)",
+      "Use FUI CSS variables for colors so charts adapt to theme changes",
+      "Use ChartTooltip and ChartLegend for consistent themed overlays",
+      "ChartTooltip and ChartLegend accept custom content renderers for advanced formatting"
+    ],
+    "accessibility": [
+      "Charts include recharts accessibilityLayer by default",
+      "Provide meaningful labels in ChartConfig for screen readers",
+      "Consider providing a data table alternative for complex charts"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Line Chart",
+      "description": "Multi-series line chart showing trends over time",
+      "code": "<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },\n      users: { label: 'Users', color: 'var(--fui-color-info)' },\n    }}\n  >\n    <LineChart data={monthlyData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n      <CartesianGrid strokeDasharray=\"3 3\" />\n      <XAxis dataKey=\"month\" />\n      <YAxis />\n      <ChartTooltip />\n      <ChartLegend />\n      <Line type=\"monotone\" dataKey=\"revenue\" stroke=\"var(--fui-color-accent)\" strokeWidth={2} dot={false} />\n      <Line type=\"monotone\" dataKey=\"users\" stroke=\"var(--fui-color-info)\" strokeWidth={2} dot={false} />\n    </LineChart>\n  </ChartContainer>\n</div>"
+    },
+    {
+      "name": "Bar Chart",
+      "description": "Categorical bar chart comparing device sessions",
+      "code": "<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      sessions: { label: 'Sessions', color: 'var(--fui-color-accent)' },\n    }}\n  >\n    <BarChart data={deviceData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n      <CartesianGrid strokeDasharray=\"3 3\" />\n      <XAxis dataKey=\"device\" />\n      <YAxis />\n      <ChartTooltip />\n      <Bar dataKey=\"sessions\" fill=\"var(--fui-color-accent)\" radius={[4, 4, 0, 0]} />\n    </BarChart>\n  </ChartContainer>\n</div>"
+    },
+    {
+      "name": "Area Chart",
+      "description": "Filled area chart showing revenue trend",
+      "code": "<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      revenue: { label: 'Revenue', color: 'var(--fui-color-accent)' },\n    }}\n  >\n    <AreaChart data={monthlyData} margin={{ top: 5, right: 20, bottom: 5, left: 0 }}>\n      <CartesianGrid strokeDasharray=\"3 3\" />\n      <XAxis dataKey=\"month\" />\n      <YAxis />\n      <ChartTooltip />\n      <Area type=\"monotone\" dataKey=\"revenue\" stroke=\"var(--fui-color-accent)\" fill=\"var(--fui-color-accent)\" fillOpacity={0.15} strokeWidth={2} />\n    </AreaChart>\n  </ChartContainer>\n</div>"
+    },
+    {
+      "name": "Pie Chart",
+      "description": "Donut chart showing browser share distribution",
+      "code": "<div style={{ width: '100%', height: 300 }}>\n  <ChartContainer\n    config={{\n      Chrome: { label: 'Chrome', color: 'var(--fui-color-accent)' },\n      Firefox: { label: 'Firefox', color: 'var(--fui-color-info)' },\n      Safari: { label: 'Safari', color: 'var(--fui-color-success)' },\n      Edge: { label: 'Edge', color: 'var(--fui-color-warning)' },\n    }}\n  >\n    <PieChart>\n      <ChartTooltip />\n      <ChartLegend />\n      <Pie\n        data={browserData}\n        dataKey=\"value\"\n        nameKey=\"name\"\n        cx=\"50%\"\n        cy=\"50%\"\n        innerRadius={60}\n        outerRadius={90}\n        strokeWidth={2}\n      >\n        {browserData.map((entry) => (\n          <Cell key={entry.name} fill={entry.color} />\n        ))}\n      </Pie>\n    </PieChart>\n  </ChartContainer>\n</div>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Card",
+      "relationship": "parent",
+      "note": "Charts are typically placed inside Cards"
+    },
+    {
+      "component": "Progress",
+      "relationship": "alternative",
+      "note": "Use Progress for single-value completion"
+    },
+    {
+      "component": "Table",
+      "relationship": "sibling",
+      "note": "Combine with Table for full data views"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "config: ChartConfig - maps data keys to labels and theme colors",
+      "children: ReactElement - recharts chart component",
+      "Chart.Tooltip / Chart.Legend support custom content renderers for advanced overlays"
+    ],
+    "a11yRules": [
+      "A11Y_CHART_LABEL"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:18:52.043Z"
+  }
+}