@fragments-sdk/ui 0.17.1 → 0.18.0

package/src/components/Message/Message.contract.json

@@ -0,0 +1,183 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "Message",
+  "description": "Individual chat message display with role-based styling",
+  "category": "ai",
+  "tags": [
+    "message",
+    "chat",
+    "ai",
+    "conversation",
+    "bubble"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/Message/index.tsx",
+  "exportName": "Message",
+  "propsSummary": [
+    "role: user|assistant|system (required)",
+    "children: node (required)",
+    "status: sending|streaming|complete|error (default: complete)",
+    "timestamp: object",
+    "avatar: node",
+    "actions: node"
+  ],
+  "props": {
+    "role": {
+      "type": "enum",
+      "description": "Message role determines styling and alignment",
+      "required": true,
+      "values": [
+        "user",
+        "assistant",
+        "system"
+      ]
+    },
+    "children": {
+      "type": "node",
+      "description": "Message content",
+      "required": true
+    },
+    "status": {
+      "type": "enum",
+      "description": "Message state",
+      "default": "complete",
+      "required": false,
+      "values": [
+        "sending",
+        "streaming",
+        "complete",
+        "error"
+      ]
+    },
+    "timestamp": {
+      "type": "object",
+      "description": "When the message was sent",
+      "required": false
+    },
+    "avatar": {
+      "type": "node",
+      "description": "Custom avatar override (null to hide)",
+      "required": false
+    },
+    "actions": {
+      "type": "node",
+      "description": "Hover actions (copy, regenerate)",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "Displaying individual messages in a chat interface",
+      "Building AI assistant or chatbot UIs",
+      "Need role-based message styling (user vs assistant)",
+      "Messages need actions like copy, regenerate, or feedback"
+    ],
+    "whenNot": [
+      "Simple text display without chat context (use Text)",
+      "Notification-style messages (use Alert or Toast)",
+      "Comment threads with nested replies (use Card with custom layout)"
+    ],
+    "guidelines": [
+      "Always provide a role prop to determine styling",
+      "Use status prop to show message state (sending, streaming, error)",
+      "Consider showing timestamps for longer conversations",
+      "Provide hover actions for assistant messages (copy, regenerate)"
+    ],
+    "accessibility": [
+      "Uses semantic HTML for message structure",
+      "Role-based styling has sufficient color contrast",
+      "Actions are keyboard accessible",
+      "Streaming indicator respects reduced motion preferences"
+    ]
+  },
+  "examples": [
+    {
+      "name": "User Message",
+      "description": "Message from the user (right-aligned)",
+      "code": "<Message role=\"user\">\n  <Message.Content>\n    Hello! Can you help me with a coding question?\n  </Message.Content>\n</Message>"
+    },
+    {
+      "name": "Assistant Message",
+      "description": "Response from the AI assistant",
+      "code": "<Message role=\"assistant\">\n  <Message.Content>\n    Of course! I'd be happy to help. What would you like to know?\n  </Message.Content>\n</Message>"
+    },
+    {
+      "name": "System Message",
+      "description": "System notification or context",
+      "code": "<Message role=\"system\">\n  <Message.Content>\n    Conversation started. Model: GPT-4\n  </Message.Content>\n</Message>"
+    },
+    {
+      "name": "Streaming",
+      "description": "Message being streamed (with cursor)",
+      "code": "<Message role=\"assistant\" status=\"streaming\">\n  <Message.Content>\n    I'm currently generating a response for you\n  </Message.Content>\n</Message>"
+    },
+    {
+      "name": "With Timestamp",
+      "description": "Message with timestamp display",
+      "code": "<Message role=\"assistant\" timestamp={new Date(Date.now() - 300000)}>\n  <Message.Content>\n    This message was sent 5 minutes ago.\n  </Message.Content>\n  <Message.Timestamp />\n</Message>"
+    },
+    {
+      "name": "Error State",
+      "description": "Message that failed to send",
+      "code": "<Message role=\"user\" status=\"error\">\n  <Message.Content>\n    This message failed to send.\n  </Message.Content>\n</Message>"
+    },
+    {
+      "name": "Custom Avatars",
+      "description": "Messages with image-based avatars",
+      "code": "<>\n  <Message\n    role=\"user\"\n    avatar={<Message.Avatar src=\"https://i.pravatar.cc/64?u=user\" alt=\"Jane\" />}\n  >\n    <Message.Content>\n      Can you help me understand this error?\n    </Message.Content>\n  </Message>\n  <Message\n    role=\"assistant\"\n    avatar={<Message.Avatar src=\"https://i.pravatar.cc/64?u=bot\" alt=\"AI Assistant\" />}\n  >\n    <Message.Content>\n      Sure! Let me take a look at that for you.\n    </Message.Content>\n  </Message>\n</>"
+    },
+    {
+      "name": "With Actions",
+      "description": "Message with hover actions",
+      "code": "<Message\n  role=\"assistant\"\n  actions={\n    <>\n      <button style={{ padding: '4px 8px', fontSize: '12px' }}>Copy</button>\n      <button style={{ padding: '4px 8px', fontSize: '12px' }}>Regenerate</button>\n    </>\n  }\n>\n  <Message.Content>\n    Hover over this message to see the actions.\n  </Message.Content>\n</Message>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "ConversationList",
+      "relationship": "parent",
+      "note": "Messages are typically used within ConversationList"
+    },
+    {
+      "component": "Avatar",
+      "relationship": "child",
+      "note": "Use Avatar component for custom avatar content"
+    },
+    {
+      "component": "ThinkingIndicator",
+      "relationship": "sibling",
+      "note": "Show ThinkingIndicator while awaiting assistant response"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "role: \"user\" | \"assistant\" | \"system\" - determines styling",
+      "children: ReactNode - message content",
+      "status: \"sending\" | \"streaming\" | \"complete\" | \"error\" - message state",
+      "timestamp: Date - when message was sent",
+      "avatar: ReactNode - custom avatar (null to hide)",
+      "actions: ReactNode - hover actions",
+      "Avatar.src: string - image URL for avatar",
+      "Avatar.alt: string - alt text for image avatar"
+    ],
+    "a11yRules": [
+      "A11Y_COLOR_CONTRAST",
+      "A11Y_MOTION_PREFERENCE"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Content",
+      "Actions",
+      "Timestamp",
+      "Avatar"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:19:00.333Z"
+  }
+}

package/src/components/NavigationMenu/NavigationMenu.contract.json

@@ -0,0 +1,203 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "NavigationMenu",
+  "description": "Rich navigation menu for site headers with dropdown content panels, animated viewport transitions, and automatic mobile drawer. Supports structured links with titles, descriptions, and icons.",
+  "category": "navigation",
+  "tags": [
+    "navigation",
+    "menu",
+    "header",
+    "dropdown",
+    "navbar",
+    "mobile",
+    "responsive",
+    "drawer"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/NavigationMenu/index.tsx",
+  "exportName": "NavigationMenu",
+  "propsSummary": [
+    "children: node (required)",
+    "value: string",
+    "defaultValue: string",
+    "onValueChange: function",
+    "orientation: horizontal|vertical (default: horizontal)",
+    "delayDuration: number (default: 200)",
+    "skipDelayDuration: number (default: 300)",
+    "icons: object"
+  ],
+  "props": {
+    "children": {
+      "type": "node",
+      "description": "NavigationMenu.List, NavigationMenu.Viewport, and optionally NavigationMenu.MobileContent",
+      "required": true
+    },
+    "value": {
+      "type": "string",
+      "description": "Controlled open item value",
+      "required": false
+    },
+    "defaultValue": {
+      "type": "string",
+      "description": "Default open item value",
+      "default": "''",
+      "required": false
+    },
+    "onValueChange": {
+      "type": "function",
+      "description": "Callback when open item changes",
+      "required": false
+    },
+    "orientation": {
+      "type": "enum",
+      "description": "'horizontal' | 'vertical'",
+      "default": "horizontal",
+      "required": false,
+      "values": [
+        "horizontal",
+        "vertical"
+      ]
+    },
+    "delayDuration": {
+      "type": "number",
+      "description": "Hover delay before opening (ms)",
+      "default": "200",
+      "required": false
+    },
+    "skipDelayDuration": {
+      "type": "number",
+      "description": "Duration after close during which moving to another trigger opens instantly (ms)",
+      "default": "300",
+      "required": false
+    },
+    "icons": {
+      "type": "object",
+      "description": "Optional icon overrides for triggerChevron, mobileMenu, mobileClose, and drawerClose controls",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "Site-level header navigation with rich dropdown content",
+      "Navigation with titles, descriptions, and icons in dropdowns",
+      "Responsive navigation that converts to a mobile drawer automatically",
+      "Multi-section navigation requiring animated viewport transitions"
+    ],
+    "whenNot": [
+      "Simple flat navigation without dropdowns (use Header.Nav)",
+      "Application menus with actions like cut/paste (use Menu)",
+      "Sidebar navigation (use Sidebar)",
+      "Breadcrumb trail navigation (use Breadcrumbs)"
+    ],
+    "guidelines": [
+      "Place inside Header component for site-level navigation",
+      "Use NavigationMenu.Viewport for animated content panel transitions",
+      "Use NavigationMenu.MobileContent to add extra sections to the mobile drawer",
+      "Use structured links (title + description) for rich dropdown content",
+      "Use simple NavigationMenu.Link for items without dropdown content",
+      "NavigationMenu.Link asChild composes click handlers and respects event.preventDefault()",
+      "Triggers open on hover (desktop) with configurable delay",
+      "Use the icons prop to replace trigger chevrons and mobile drawer controls with icons from any package"
+    ],
+    "accessibility": [
+      "Uses disclosure pattern (not menu role) per W3C guidance",
+      "Keyboard: Arrow keys navigate between triggers, Enter/Space toggles, Escape closes",
+      "Content panels have role=\"region\" with aria-labelledby pointing to trigger",
+      "Mobile drawer has focus trap, Escape to close, and aria-modal",
+      "Supports prefers-reduced-motion for all animations"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Default",
+      "description": "Two trigger items with dropdown content and one direct link",
+      "code": "<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"products\">\n      <NavigationMenu.Trigger>Products</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <NavigationMenu.Link href=\"/analytics\" title=\"Analytics\" description=\"Track your metrics and KPIs.\" />\n        <NavigationMenu.Link href=\"/automation\" title=\"Automation\" description=\"Automate your workflows.\" />\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item value=\"resources\">\n      <NavigationMenu.Trigger>Resources</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <NavigationMenu.Link href=\"/docs\" title=\"Documentation\" description=\"Comprehensive API reference.\" />\n        <NavigationMenu.Link href=\"/blog\" title=\"Blog\" description=\"Latest news and updates.\" />\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item>\n      <NavigationMenu.Link href=\"/pricing\">Pricing</NavigationMenu.Link>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"
+    },
+    {
+      "name": "With Rich Content",
+      "description": "Grid layout with icons, titles, and descriptions",
+      "code": "<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"platform\">\n      <NavigationMenu.Trigger>Platform</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '4px', padding: '8px', minWidth: '400px' }}>\n          <NavigationMenu.Link\n            href=\"/dashboard\"\n            title=\"Dashboard\"\n            description=\"Overview of your project metrics.\"\n          />\n          <NavigationMenu.Link\n            href=\"/analytics\"\n            title=\"Analytics\"\n            description=\"Deep dive into your data.\"\n          />\n          <NavigationMenu.Link\n            href=\"/reports\"\n            title=\"Reports\"\n            description=\"Generate custom reports.\"\n          />\n          <NavigationMenu.Link\n            href=\"/settings\"\n            title=\"Settings\"\n            description=\"Configure your workspace.\"\n          />\n        </div>\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"
+    },
+    {
+      "name": "With Simple Links",
+      "description": "Mix of triggers with simple link lists and plain links",
+      "code": "<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"company\">\n      <NavigationMenu.Trigger>Company</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <div style={{ display: 'flex', flexDirection: 'column', padding: '4px', minWidth: '160px' }}>\n          <NavigationMenu.Link href=\"/about\">About</NavigationMenu.Link>\n          <NavigationMenu.Link href=\"/careers\">Careers</NavigationMenu.Link>\n          <NavigationMenu.Link href=\"/contact\">Contact</NavigationMenu.Link>\n        </div>\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item>\n      <NavigationMenu.Link href=\"/blog\">Blog</NavigationMenu.Link>\n    </NavigationMenu.Item>\n    <NavigationMenu.Item>\n      <NavigationMenu.Link href=\"/docs\">Docs</NavigationMenu.Link>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"
+    },
+    {
+      "name": "With Featured Card",
+      "description": "Highlighted featured item alongside regular links",
+      "code": "<NavigationMenu>\n  <NavigationMenu.List>\n    <NavigationMenu.Item value=\"learn\">\n      <NavigationMenu.Trigger>Learn</NavigationMenu.Trigger>\n      <NavigationMenu.Content>\n        <div style={{ display: 'grid', gridTemplateColumns: '1fr 1fr', gap: '8px', padding: '8px', minWidth: '420px' }}>\n          <NavigationMenu.Link\n            href=\"/quickstart\"\n            title=\"Quick Start\"\n            description=\"Get up and running in 5 minutes with our getting started guide.\"\n            featured\n          />\n          <div style={{ display: 'flex', flexDirection: 'column', gap: '4px' }}>\n            <NavigationMenu.Link href=\"/docs\" title=\"Documentation\" description=\"API reference and guides.\" />\n            <NavigationMenu.Link href=\"/examples\" title=\"Examples\" description=\"Browse example projects.\" />\n          </div>\n        </div>\n      </NavigationMenu.Content>\n    </NavigationMenu.Item>\n  </NavigationMenu.List>\n  <NavigationMenu.Viewport />\n</NavigationMenu>"
+    },
+    {
+      "name": "Vertical",
+      "description": "Vertical orientation with content panels to the right",
+      "code": "<div style={{ display: 'flex' }}>\n  <NavigationMenu orientation=\"vertical\">\n    <NavigationMenu.List>\n      <NavigationMenu.Item value=\"overview\">\n        <NavigationMenu.Trigger>Overview</NavigationMenu.Trigger>\n        <NavigationMenu.Content>\n          <div style={{ padding: '8px', minWidth: '200px' }}>\n            <NavigationMenu.Link href=\"/intro\" title=\"Introduction\" description=\"Learn the basics.\" />\n          </div>\n        </NavigationMenu.Content>\n      </NavigationMenu.Item>\n      <NavigationMenu.Item value=\"guides\">\n        <NavigationMenu.Trigger>Guides</NavigationMenu.Trigger>\n        <NavigationMenu.Content>\n          <div style={{ padding: '8px', minWidth: '200px' }}>\n            <NavigationMenu.Link href=\"/install\" title=\"Installation\" description=\"Get started quickly.\" />\n            <NavigationMenu.Link href=\"/config\" title=\"Configuration\" description=\"Customize your setup.\" />\n          </div>\n        </NavigationMenu.Content>\n      </NavigationMenu.Item>\n    </NavigationMenu.List>\n    <NavigationMenu.Viewport />\n  </NavigationMenu>\n</div>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Header",
+      "relationship": "sibling",
+      "note": "Place NavigationMenu inside Header for site navigation"
+    },
+    {
+      "component": "Sidebar",
+      "relationship": "alternative",
+      "note": "Use Sidebar for persistent side navigation, NavigationMenu for header dropdowns"
+    },
+    {
+      "component": "Menu",
+      "relationship": "alternative",
+      "note": "Use Menu for action menus (role=menu), NavigationMenu for site navigation (disclosure pattern)"
+    },
+    {
+      "component": "Breadcrumbs",
+      "relationship": "sibling",
+      "note": "Use Breadcrumbs for hierarchical page trail, NavigationMenu for site-level navigation"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "value: string — controlled open item",
+      "onValueChange: (value) => void — open state handler",
+      "orientation: horizontal | vertical — layout direction",
+      "delayDuration: number — hover open delay (default: 200ms)",
+      "icons: { triggerChevron?, mobileMenu?, mobileClose?, drawerClose? } — custom internal control icons",
+      "NavigationMenu.Link: title + description + icon for structured links, or children for simple links",
+      "NavigationMenu.Link asChild: composes child and menu click handlers (preventDefault keeps menu open)",
+      "NavigationMenu.MobileContent: slot for extra mobile-only sections"
+    ],
+    "a11yRules": [
+      "A11Y_DISCLOSURE_PATTERN",
+      "A11Y_KEYBOARD_NAV",
+      "A11Y_FOCUS_TRAP"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "List",
+      "Item",
+      "Trigger",
+      "Content",
+      "Link",
+      "Indicator",
+      "Viewport",
+      "MobileBrand",
+      "MobileContent",
+      "MobileSection"
+    ],
+    "requiredChildren": [
+      "List"
+    ],
+    "commonPatterns": [
+      "<NavigationMenu><NavigationMenu.List><NavigationMenu.Item value=\"docs\"><NavigationMenu.Trigger>Docs</NavigationMenu.Trigger><NavigationMenu.Content><NavigationMenu.Link href=\"/guides\" title=\"Guides\" description=\"Learn the basics\" /></NavigationMenu.Content></NavigationMenu.Item></NavigationMenu.List><NavigationMenu.Viewport /></NavigationMenu>"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:19:01.458Z"
+  }
+}

package/src/components/Pagination/Pagination.contract.json

@@ -0,0 +1,163 @@
+{
+  "$schema": "https://usefragments.com/schemas/contract.v1.json",
+  "name": "Pagination",
+  "description": "Page navigation for paginated data. Supports controlled/uncontrolled, page counts, and edge/sibling customization.",
+  "category": "navigation",
+  "tags": [
+    "pagination",
+    "paging",
+    "pages",
+    "navigation"
+  ],
+  "status": "stable",
+  "sourcePath": "src/components/Pagination/index.tsx",
+  "exportName": "Pagination",
+  "propsSummary": [
+    "children: node (required)",
+    "totalPages: number (required)",
+    "page: number",
+    "defaultPage: number (default: 1)",
+    "onPageChange: function",
+    "edgeCount: number (default: 1)",
+    "siblingCount: number (default: 1)"
+  ],
+  "props": {
+    "children": {
+      "type": "node",
+      "description": "",
+      "required": true
+    },
+    "totalPages": {
+      "type": "number",
+      "description": "Total number of pages",
+      "required": true
+    },
+    "page": {
+      "type": "number",
+      "description": "Controlled current page (1-indexed)",
+      "required": false
+    },
+    "defaultPage": {
+      "type": "number",
+      "description": "Default page (uncontrolled)",
+      "default": "1",
+      "required": false
+    },
+    "onPageChange": {
+      "type": "function",
+      "description": "Called when page changes",
+      "required": false
+    },
+    "edgeCount": {
+      "type": "number",
+      "description": "Number of pages shown at edges",
+      "default": "1",
+      "required": false
+    },
+    "siblingCount": {
+      "type": "number",
+      "description": "Number of pages shown around current",
+      "default": "1",
+      "required": false
+    }
+  },
+  "usage": {
+    "when": [
+      "Navigating through paginated data sets",
+      "Table or list pagination controls",
+      "Search results with multiple pages",
+      "Any content split across multiple pages"
+    ],
+    "whenNot": [
+      "Small lists that fit on one page",
+      "Infinite scroll patterns (use IntersectionObserver)",
+      "Tab-based navigation (use Tabs)",
+      "Step-by-step wizards (use Stepper)"
+    ],
+    "guidelines": [
+      "Place below the content being paginated",
+      "Use edgeCount to always show first/last pages",
+      "Use siblingCount to control how many pages surround the current page",
+      "Pair with Table component for data table pagination",
+      "Pagination forwards standard nav props (id, aria-*, data-*, event handlers) to the root <nav>",
+      "Previous/Next/Item buttons compose your onClick handlers; call event.preventDefault() to stop the page change"
+    ],
+    "accessibility": [
+      "Uses nav element with aria-label=\"Pagination\"",
+      "aria-current=\"page\" marks the active page",
+      "Previous/Next buttons have descriptive aria-labels",
+      "Disabled buttons at boundaries prevent invalid navigation"
+    ]
+  },
+  "examples": [
+    {
+      "name": "Default",
+      "description": "Basic pagination with 10 pages",
+      "code": "<Pagination totalPages={10} defaultPage={1}>\n  <Pagination.Previous />\n  <Pagination.Items />\n  <Pagination.Next />\n</Pagination>"
+    },
+    {
+      "name": "With Edge Pages",
+      "description": "Shows 2 pages at each edge",
+      "code": "<Pagination totalPages={20} defaultPage={10} edgeCount={2} siblingCount={1}>\n  <Pagination.Previous />\n  <Pagination.Items />\n  <Pagination.Next />\n</Pagination>"
+    },
+    {
+      "name": "Compact",
+      "description": "No siblings, minimal display",
+      "code": "<Pagination totalPages={20} defaultPage={10} siblingCount={0}>\n  <Pagination.Previous />\n  <Pagination.Items />\n  <Pagination.Next />\n</Pagination>"
+    },
+    {
+      "name": "Controlled",
+      "description": "Controlled pagination at page 3",
+      "code": "<Pagination totalPages={5} page={3}>\n  <Pagination.Previous />\n  <Pagination.Items />\n  <Pagination.Next />\n</Pagination>"
+    }
+  ],
+  "relations": [
+    {
+      "component": "Table",
+      "relationship": "sibling",
+      "note": "Commonly paired for table pagination"
+    },
+    {
+      "component": "Listbox",
+      "relationship": "alternative",
+      "note": "Use Listbox for small sets of options"
+    }
+  ],
+  "contract": {
+    "propsSummary": [
+      "totalPages: number - total page count (required)",
+      "page: number - controlled current page (1-indexed)",
+      "defaultPage: number - initial page (default: 1)",
+      "onPageChange: (page) => void - page change handler",
+      "edgeCount: number - pages at edges (default: 1)",
+      "siblingCount: number - pages around current (default: 1)",
+      "Forwards standard HTML nav attributes to the root element"
+    ],
+    "a11yRules": [
+      "A11Y_NAV_LABEL",
+      "A11Y_CURRENT_PAGE"
+    ]
+  },
+  "ai": {
+    "compositionPattern": "compound",
+    "subComponents": [
+      "Previous",
+      "Next",
+      "Items",
+      "Item",
+      "Ellipsis"
+    ],
+    "requiredChildren": [
+      "Items"
+    ],
+    "commonPatterns": [
+      "<Pagination totalPages={totalPages} page={currentPage} onPageChange={setPage}><Pagination.Previous /><Pagination.Items /><Pagination.Next /></Pagination>"
+    ]
+  },
+  "provenance": {
+    "source": "migrated",
+    "verified": false,
+    "frameworkSupport": "native",
+    "extractedAt": "2026-03-13T23:19:01.648Z"
+  }
+}