gd-design-library 1.8.2 → 1.8.3

package/ai/schemas/components/Avatar.js

@@ -19,7 +19,12 @@ var e = {
 			{
 				name: "label",
 				type: "string",
-				description: "A2UI: initials text shown as fallback (e.g. \"JD\"). Use label OR value — do NOT use \"fallbackComponent\"."
+				description: "A2UI: initials text shown as fallback (e.g. \"JD\"). Use label OR value — do NOT use \"fallbackComponent\". Renderer checks label first, then value."
+			},
+			{
+				name: "value",
+				type: "string",
+				description: "Alias for label: initials text shown as avatar fallback when label is absent (e.g. \"JD\"). The renderer promotes value to the fallback slot automatically. Prefer label in new A2UI specs."
 			},
 			{
 				name: "src",
@@ -34,7 +39,19 @@ var e = {
 			{
 				name: "size",
 				type: "string",
-				description: "A2UI size field (preferred). Alias: \"sizeVariant\" also accepted.",
+				description: "Avatar size. Preferred A2UI field — use this over sizeVariant.",
+				enum: [
+					"xs",
+					"sm",
+					"md",
+					"lg",
+					"xl"
+				]
+			},
+			{
+				name: "sizeVariant",
+				type: "string",
+				description: "Avatar size variant. Alias for size — both are accepted; size is preferred in A2UI specs.",
 				enum: [
 					"xs",
 					"sm",
@@ -86,9 +103,9 @@ var e = {
 		],
 		quickStart: {
 			basic: "<Avatar src=\"/user-photo.jpg\" alt=\"John Doe\" />",
-			initials: "<Avatar fallbackComponent=\"JD\" backgroundColor=\"bg.fill.info.primary.default\" />",
+			initials: "<Avatar label=\"JD\" backgroundColor=\"bg.fill.info.primary.default\" />",
 			withBadge: "<Avatar src={userImage} alt={userName} withBadge badgeColor=\"bg.fill.success.primary.default\" />",
-			icon: "<Avatar fallbackComponent={<Icon name=\"star\" width={40} height={40} fill=\"#646464\" />} backgroundColor=\"#E0E0E0\" />",
+			icon: "<Avatar icon=\"star\" fill=\"#646464\" backgroundColor=\"#E0E0E0\" />",
 			online: "<Avatar src=\"/avatar.png\" alt=\"User\" withBadge={isOnline} badgeColor={isOnline ? \"bg.fill.success.primary.default\" : \"bg.fill.error.primary.default\"} />"
 		},
 		commonPatterns: {
@@ -105,20 +122,20 @@ var e = {
 				useCase: "Chat interfaces and user lists with online status"
 			},
 			"Icon Fallback": {
-				code: "<Avatar fallbackComponent={<Icon name=\"star\" width={40} height={40} fill=\"#646464\" />} backgroundColor=\"#E0E0E0\" sizeVariant=\"xl\" />",
+				code: "<Avatar icon=\"star\" fill=\"#646464\" backgroundColor=\"#E0E0E0\" size=\"xl\" />",
 				useCase: "Profile placeholders or branded avatars that use an icon inside the avatar itself"
 			},
 			"Team Member": {
-				code: "<Avatar fallbackComponent={user.initials} backgroundColor={user.color} sizeVariant=\"md\" />",
+				code: "<Avatar label={user.initials} backgroundColor={user.color} size=\"md\" />",
 				useCase: "Team directories and member listings"
 			}
 		},
 		examples: [
 			"<Avatar src=\"/user-photo.jpg\" alt=\"John Doe\" sizeVariant=\"lg\" />",
-			"<Avatar fallbackComponent=\"JD\" backgroundColor=\"bg.fill.info.primary.default\" sizeVariant=\"md\" onClick={handleProfileClick} />",
+			"<Avatar label=\"JD\" backgroundColor=\"bg.fill.info.primary.default\" size=\"md\" />",
 			"<Avatar src={userImage} alt={userName} withBadge badgeColor=\"bg.fill.success.primary.default\" sizeVariant=\"sm\" />",
-			"<Avatar fallbackComponent={<Icon name=\"star\" width={40} height={40} fill=\"#646464\" />} backgroundColor=\"#E0E0E0\" sizeVariant=\"xl\" />",
-			"<Avatar fallbackComponent={<Icon name=\"user\" />} backgroundColor=\"primary.default\" sizeVariant=\"xl\" />",
+			"<Avatar icon=\"star\" fill=\"#646464\" backgroundColor=\"#E0E0E0\" size=\"xl\" />",
+			"<Avatar icon=\"user\" backgroundColor=\"primary.default\" size=\"xl\" />",
 			"<Avatar src=\"/avatar.png\" alt=\"User\" withBadge={isOnline} badgeColor={isOnline ? \"bg.fill.success.primary.default\" : \"bg.fill.error.primary.default\"} />"
 		],
 		troubleshooting: {

package/ai/schemas/components/AvatarUser.cjs

@@ -1 +1 @@
-var e={component:{name:`AvatarUser`,import:`import { AvatarUser } from 'gd-design-library'`,description:`Composite avatar component that displays a user with avatar image, name, optional subtitle, and optional badge. Supports card and profile layout variants.`,a2uiName:`avatar-user`,category:`Display & Content`,complexity:`Low`,accessibility:`WCAG 2.1 AA Compliant`,performance:`Lightweight`,dependencies:[`@emotion/react`,`@emotion/styled`],peerDependencies:[`react`,`react-dom`],bundleSize:`~2KB gzipped`,browserSupport:`All modern browsers`,touchSupport:!0,keyboardSupport:!0,screenReaderSupport:!0,props:[{name:`name`,type:`string`,description:`Primary user display name shown next to or below the avatar. When src is omitted, the A2UI renderer derives initials from this name.`,required:!0},{name:`variant`,type:`string`,description:`Layout variant of the component`,enum:[`card`,`profile`],default:`card`},{name:`subtitle`,type:`string`,description:`Secondary line of text beneath the name, such as a role, team, or email address`},{name:`src`,type:`string`,description:`URL of the avatar image`},{name:`alt`,type:`string`,description:`Alt text for the avatar image`},{name:`sizeVariant`,type:`string`,description:`Avatar size variant. A2UI also accepts the shared top-level "size" alias.`,enum:[`xs`,`sm`,`md`,`lg`,`xl`]},{name:`withBadge`,type:`boolean`,description:`Whether to show a presence/status badge dot`},{name:`badgeColor`,type:`string`,description:`Badge dot color. Prefer theme color token paths (for example "bg.fill.success.primary.default") before raw CSS/hex colors.`},{name:`icon`,type:`string`,description:`Optional icon name used as avatar fallback content when src is omitted. If not provided, the renderer falls back to initials derived from name.`},{name:`fill`,type:`string`,description:`Fill color for the fallback icon when icon is provided`},{name:`fillSvg`,type:`string`,description:`Optional uniform SVG fill color for the fallback icon. Overrides fill when both are set.`},{name:`actionChildren`,type:`A2UIComponent[]`,description:`Nested components rendered in the trailing action area. Only visible in the "profile" variant.`},{name:`actions`,type:`string[]`,description:`Action IDs from ui.actions to trigger when the avatar-user wrapper is clicked.`},{name:`styling`,type:`object`,description:`CSS style overrides for the avatar-user wrapper`}],examples:[`<AvatarUser name="John Doe" />`,`<AvatarUser name="Jane Smith" subtitle="Product Manager" src="/avatar.jpg" alt="Jane Smith" variant="card" />`,`<AvatarUser name="Alice" subtitle="Online" withBadge badgeColor="bg.fill.success.primary.default" sizeVariant="lg" variant="profile" />`]},compositionTips:[`Use AvatarUser for displaying user identity in cards, headers, lists, or profile sections.`,`Use variant="card" (default) for compact horizontal layouts in cards or list items.`,`Use variant="profile" for larger profile sections with more prominent name display.`,`Provide subtitle for secondary user info like role, email, or status text.`,`Set withBadge and badgeColor to show online/offline or presence indicators, preferring theme tokens for badgeColor.`,`When src is not provided, the avatar falls back to initials derived from name.`,`Use sizeVariant to scale the avatar to match the surrounding layout context.`,`Wrap AvatarUser in a Row with align="center" for horizontal user list entries.`,`Combine AvatarUser with Card for user profile cards in grids or sidebars.`]};exports.default=e;
+var e={component:{name:`AvatarUser`,import:`import { AvatarUser } from 'gd-design-library'`,description:`Composite avatar component that displays a user with avatar image, name, optional subtitle, and optional badge. Supports card and profile layout variants.`,a2uiName:`avatar-user`,category:`Display & Content`,complexity:`Low`,accessibility:`WCAG 2.1 AA Compliant`,performance:`Lightweight`,dependencies:[`@emotion/react`,`@emotion/styled`],peerDependencies:[`react`,`react-dom`],bundleSize:`~2KB gzipped`,browserSupport:`All modern browsers`,touchSupport:!0,keyboardSupport:!0,screenReaderSupport:!0,props:[{name:`name`,type:`string`,description:`Primary user display name shown next to or below the avatar. When src is omitted, the A2UI renderer derives initials from this name.`,required:!0},{name:`variant`,type:`string`,description:`Layout variant of the component`,enum:[`card`,`profile`],default:`card`},{name:`subtitle`,type:`string`,description:`Secondary line of text beneath the name, such as a role, team, or email address`},{name:`description`,type:`string`,description:`Fallback subtitle text. Used when subtitle is absent — the renderer promotes description to the subtitle slot automatically.`},{name:`src`,type:`string`,description:`URL of the avatar image`},{name:`alt`,type:`string`,description:`Alt text for the avatar image`},{name:`size`,type:`string`,description:`Avatar size. Preferred A2UI field — use this over sizeVariant for consistency with the Avatar component.`,enum:[`xs`,`sm`,`md`,`lg`,`xl`]},{name:`sizeVariant`,type:`string`,description:`Avatar size variant. Alias for size — both are accepted; size is preferred in A2UI specs.`,enum:[`xs`,`sm`,`md`,`lg`,`xl`]},{name:`withBadge`,type:`boolean`,description:`Whether to show a presence/status badge dot`},{name:`badgeColor`,type:`string`,description:`Badge dot color. Prefer theme color token paths (for example "bg.fill.success.primary.default") before raw CSS/hex colors.`},{name:`backgroundColor`,type:`string`,description:`Background color for the avatar's initials/icon fallback area. Accepts theme color token paths (e.g. "primary.default", "bg.fill.secondary", "bg.fill.info.primary.default") or raw CSS/hex. Token paths — including Material-style aliases such as "theme.primary.main" or "primary.main" — are resolved through the theme at render time.`},{name:`icon`,type:`string`,description:`Optional icon name used as avatar fallback content when src is omitted. If not provided, the renderer falls back to initials derived from name.`},{name:`fill`,type:`string`,description:`Fill color for the fallback icon when icon is provided`},{name:`fillSvg`,type:`string`,description:`Optional uniform SVG fill color for the fallback icon. Overrides fill when both are set.`},{name:`actionChildren`,type:`A2UIComponent[]`,description:`Nested components rendered in the trailing action area. Only visible in the "profile" variant.`},{name:`actions`,type:`string[]`,description:`Action IDs from ui.actions to trigger when the avatar-user wrapper is clicked.`},{name:`styling`,type:`object`,description:`CSS style overrides for the avatar-user wrapper`}],examples:[`<AvatarUser name="John Doe" />`,`<AvatarUser name="Jane Smith" subtitle="Product Manager" src="/avatar.jpg" alt="Jane Smith" variant="card" />`,`<AvatarUser name="Alice" subtitle="Online" withBadge badgeColor="bg.fill.success.primary.default" sizeVariant="lg" variant="profile" />`]},compositionTips:[`Use AvatarUser for displaying user identity in cards, headers, lists, or profile sections.`,`Use variant="card" (default) for compact horizontal layouts in cards or list items.`,`Use variant="profile" for larger profile sections with more prominent name display.`,`Provide subtitle for secondary user info like role, email, or status text.`,`Set withBadge and badgeColor to show online/offline or presence indicators, preferring theme tokens for badgeColor.`,`When src is not provided, the avatar falls back to initials derived from name.`,`Use sizeVariant to scale the avatar to match the surrounding layout context.`,`Wrap AvatarUser in a Row with align="center" for horizontal user list entries.`,`Combine AvatarUser with Card for user profile cards in grids or sidebars.`,`Use backgroundColor to tint the avatar fallback area — pass any theme token path (e.g. "primary.default", "bg.fill.secondary", "theme.primary.main") or a raw hex; token paths including Material-style aliases are resolved to actual colors at render time.`]};exports.default=e;

package/ai/schemas/components/AvatarUser.d.cts

@@ -0,0 +1,51 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        description: string;
+        a2uiName: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
+        props: ({
+            name: string;
+            type: string;
+            description: string;
+            required: boolean;
+            enum?: undefined;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            enum: readonly ["card", "profile"];
+            default: string;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required?: undefined;
+            enum?: undefined;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            enum: readonly ["xs", "sm", "md", "lg", "xl"];
+            required?: undefined;
+            default?: undefined;
+        })[];
+        examples: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

package/ai/schemas/components/AvatarUser.js

@@ -34,6 +34,11 @@ var e = {
 				type: "string",
 				description: "Secondary line of text beneath the name, such as a role, team, or email address"
 			},
+			{
+				name: "description",
+				type: "string",
+				description: "Fallback subtitle text. Used when subtitle is absent — the renderer promotes description to the subtitle slot automatically."
+			},
 			{
 				name: "src",
 				type: "string",
@@ -44,10 +49,22 @@ var e = {
 				type: "string",
 				description: "Alt text for the avatar image"
 			},
+			{
+				name: "size",
+				type: "string",
+				description: "Avatar size. Preferred A2UI field — use this over sizeVariant for consistency with the Avatar component.",
+				enum: [
+					"xs",
+					"sm",
+					"md",
+					"lg",
+					"xl"
+				]
+			},
 			{
 				name: "sizeVariant",
 				type: "string",
-				description: "Avatar size variant. A2UI also accepts the shared top-level \"size\" alias.",
+				description: "Avatar size variant. Alias for size — both are accepted; size is preferred in A2UI specs.",
 				enum: [
 					"xs",
 					"sm",
@@ -66,6 +83,11 @@ var e = {
 				type: "string",
 				description: "Badge dot color. Prefer theme color token paths (for example \"bg.fill.success.primary.default\") before raw CSS/hex colors."
 			},
+			{
+				name: "backgroundColor",
+				type: "string",
+				description: "Background color for the avatar's initials/icon fallback area. Accepts theme color token paths (e.g. \"primary.default\", \"bg.fill.secondary\", \"bg.fill.info.primary.default\") or raw CSS/hex. Token paths — including Material-style aliases such as \"theme.primary.main\" or \"primary.main\" — are resolved through the theme at render time."
+			},
 			{
 				name: "icon",
 				type: "string",
@@ -112,7 +134,8 @@ var e = {
 		"When src is not provided, the avatar falls back to initials derived from name.",
 		"Use sizeVariant to scale the avatar to match the surrounding layout context.",
 		"Wrap AvatarUser in a Row with align=\"center\" for horizontal user list entries.",
-		"Combine AvatarUser with Card for user profile cards in grids or sidebars."
+		"Combine AvatarUser with Card for user profile cards in grids or sidebars.",
+		"Use backgroundColor to tint the avatar fallback area — pass any theme token path (e.g. \"primary.default\", \"bg.fill.secondary\", \"theme.primary.main\") or a raw hex; token paths including Material-style aliases are resolved to actual colors at render time."
 	]
 };
 //#endregion

package/ai/schemas/components/Badge.d.cts

@@ -0,0 +1,53 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        description: string;
+        a2uiName: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
+        props: ({
+            name: string;
+            type: string;
+            description: string;
+            required: boolean;
+            enum?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            enum: readonly ["primary", "secondary", "tertiary", "quaternary", "quinary"];
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            enum: readonly ["sm", "md", "lg"];
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            enum: readonly ["filled", "filledLight", "outline", "outlineFilledLight"];
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required?: undefined;
+            enum?: undefined;
+        })[];
+        examples: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

package/ai/schemas/components/Box.d.cts

@@ -0,0 +1,95 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        a2uiName: string;
+        description: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
+        props: ({
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+            enum: string[];
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: boolean;
+            enum?: undefined;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required: boolean;
+            default?: undefined;
+            enum?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: number;
+            enum?: undefined;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default?: undefined;
+            enum?: undefined;
+            required?: undefined;
+        })[];
+        quickStart: {
+            basic: string;
+            horizontal: string;
+            bordered: string;
+            interactive: string;
+            centered: string;
+        };
+        commonPatterns: {
+            'Card Container': {
+                code: string;
+                useCase: string;
+            };
+            'Horizontal Layout': {
+                code: string;
+                useCase: string;
+            };
+            'Vertical Stack': {
+                code: string;
+                useCase: string;
+            };
+            'Centered Content': {
+                code: string;
+                useCase: string;
+            };
+            'Dashboard Section': {
+                code: string;
+                useCase: string;
+            };
+        };
+        examples: string[];
+        troubleshooting: {
+            'Children not aligning correctly': string;
+            'Hover effects not working': string;
+            'Border not showing': string;
+            'Gap not working': string;
+            'Focus ring not visible': string;
+        };
+        bestPractices: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

package/ai/schemas/components/Breadcrumbs.d.cts

@@ -0,0 +1,69 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        description: string;
+        a2uiName: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
+        props: ({
+            name: string;
+            type: string;
+            description: string;
+            required: boolean;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required?: undefined;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: boolean;
+            required?: undefined;
+        })[];
+        quickStart: {
+            basic: string;
+            withIcon: string;
+            bordered: string;
+            custom: string;
+        };
+        commonPatterns: {
+            'E-commerce': {
+                code: string;
+                useCase: string;
+            };
+            Documentation: {
+                code: string;
+                useCase: string;
+            };
+            'Admin Panel': {
+                code: string;
+                useCase: string;
+            };
+        };
+        examples: string[];
+        troubleshooting: {
+            'Links not working': string;
+            'Separator not showing': string;
+            'Accessibility issues': string;
+            'Items not displaying': string;
+            'Styling issues': string;
+        };
+        bestPractices: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

package/ai/schemas/components/Button.cjs

@@ -1 +1 @@
-var e={component:{name:`Button`,import:`import { Button } from 'gd-design-library'`,description:`Clickable button with multiple style variants (primary, secondary, tertiary, outlined, text). Use actions[] to wire up A2UI interactions.`,a2uiName:`button`,category:`Actions & Controls`,complexity:`Low`,accessibility:`WCAG 2.1 AA Compliant`,performance:`Lightweight`,dependencies:[`@emotion/react`,`@emotion/styled`],peerDependencies:[`react`,`react-dom`],bundleSize:`~2KB gzipped`,browserSupport:`All modern browsers`,touchSupport:!0,keyboardSupport:!0,screenReaderSupport:!0,props:[{name:`label`,type:`string`,description:`Button text content (maps to children)`},{name:`variant`,type:`string`,description:`Visual style variant of the button`,enum:[`primary`,`secondary`,`tertiary`,`outlined`,`text`,`inherit`]},{name:`disabled`,type:`boolean`,description:`Disables the button preventing interaction`},{name:`isLoading`,type:`boolean`,description:`Shows a loading spinner inside the button and disables it`},{name:`fullWidth`,type:`boolean`,description:`Makes the button fill the full width of its container`},{name:`isIcon`,type:`boolean`,description:`Renders the button as a square icon-only button (no text)`},{name:`icon`,type:`string`,description:`Leading icon name from the shared A2UI icon catalog.`},{name:`iconEnd`,type:`string`,description:`Trailing icon name from the shared A2UI icon catalog.`},{name:`rounded`,type:`string`,description:`Border radius of the button`,enum:[`none`,`default`,`round`,`xs`,`sm`,`md`,`lg`,`xl`]},{name:`buttonType`,type:`string`,description:`HTML button type attribute. Use this instead of top-level type, which is reserved for the component kind.`,enum:[`button`,`submit`,`reset`],default:`button`},{name:`ariaLabel`,type:`string`,description:`Accessible label for icon-only buttons`},{name:`actions`,type:`string[]`,description:`Action IDs from ui.actions to trigger on click`},{name:`styling`,type:`object`,description:`CSS style overrides for the button`}],quickStart:{basic:`<Button onClick={handleClick}>Click me</Button>`,primary:`<Button variant="primary" onClick={handleSubmit}>Submit</Button>`,secondary:`<Button variant="secondary" onClick={handleCancel}>Cancel</Button>`,rounded:`<Button variant="primary" rounded="md" onClick={handleClick}>Rounded Button</Button>`,icon:`<Button isIcon rounded="round" aria-label="Settings" iconStart={<Icon name="settings" />} />`,withIcon:`<Button iconStart={<Icon name="plus" />}>Add Item</Button>`},commonPatterns:{"Primary Action":{code:`<Button variant="primary" onClick={handleSubmit}>Submit</Button>`,useCase:`Main call-to-action buttons for forms and important actions`},"Secondary Action":{code:`<Button variant="secondary" onClick={handleCancel}>Cancel</Button>`,useCase:`Secondary actions like cancel, back, or alternative options`},"Icon Button":{code:`<Button isIcon aria-label="Settings" iconStart={<Icon name="settings" />} />`,useCase:`Compact icon-only buttons for toolbars and navigation`},"Form Submit":{code:`<Button type="submit" fullWidth disabled={isSubmitting}>Save Changes</Button>`,useCase:`Form submission buttons with loading states`},"State Control via className":{code:`<Button variant="primary" justifyContent="start" className="active">Press Me</Button>`,useCase:`Control button states using className prop with values like "active", "hover", or combine with disabled prop`},"Custom Styled with Box Props":{code:`<Button padding="8px" width="300px" justifyContent="start" iconStart={<Icon name="folder" />}>Custom Styled</Button>`,useCase:`Buttons with Box layout props (padding, width, justifyContent) and iconStart for flexible layouts`},"Disabled with Box Props":{code:`<Button variant="primary" disabled justifyContent="start">Disabled</Button>`,useCase:`Disabled buttons with Box layout props for consistent alignment`}},examples:[`<Button variant="primary" onClick={handleSubmit}>Submit</Button>`,`<Button variant="secondary" onClick={handleCancel}>Cancel</Button>`,`<Button variant="tertiary" onClick={handleBack}>Back</Button>`,`<Button variant="outlined" rounded="md" iconStart={<Icon name="plus" />}>Add Item</Button>`,`<Button variant="text" onClick={handleSkip}>Skip</Button>`,`<Button isIcon rounded="round" aria-label="Settings" iconStart={<Icon name="settings" />} />`,`<Button type="submit" fullWidth disabled={isSubmitting}>Save Changes</Button>`,`<Button variant="primary" justifyContent="start" className="active">Press Me</Button>`,`<Button variant="primary" disabled justifyContent="start">Disabled</Button>`,`<Button padding="8px" width="300px" justifyContent="start" iconStart={<Icon name="folder" />}>Custom Styled</Button>`],troubleshooting:{"Button not clickable":`Check if disabled prop is set to true or if onClick handler is missing`,"Accessibility issues":`Add aria-label for icon buttons and ensure proper focus management`,"Styling not applied":`Verify variant prop is set correctly`,"Form submission not working":`Use type="submit" for form buttons and ensure form has onSubmit handler`,"Icon not displaying":`Check if Icon component is imported and name prop is correct`,"size prop has no effect":`Button does NOT have a size prop — it is silently ignored. Use padding="4px 8px" and height="28px" (Box props) to create compact buttons, or height="36px" for standard size.`},compositionTips:[`Use variant="primary" for main actions, "secondary" for important alternatives, and "tertiary" for less prominent actions`,`Always provide aria-label for icon-only buttons`,`When using isIcon, provide the icon via iconStart and do not pass children`,`Use rounded="round" for icon buttons to create circular shapes`,`Apply rounded="md" or "lg" for modern, friendly button designs`,`Use fullWidth for mobile forms and important actions`,`Set disabled state during async operations to prevent double-clicks`,`Use type="submit" for form submission and type="button" for other actions`,`Include loading states for buttons that trigger async operations`,`Use consistent button variants and rounded styles across your application`,`Provide clear, actionable button text`,`Use iconStart and iconEnd for better visual hierarchy — pass <Icon size="sm" name="..." /> to iconStart/iconEnd rather than embedding a raw Icon as a child alongside text`,`Test keyboard navigation with Tab and Enter keys`,`Active/pressed states are built-in with scale animation for better tactile feedback`,`Button has NO size prop — never use size="sm"/"md"/"lg". To create a compact button use padding="4px 8px" and/or height="28px". For standard size use height="36px".`,`Use Box props like justifyContent="start" to align button content, and combine with alignItems, gap, margin, padding, width, height for flexible layouts`,`Use className for custom CSS classes to control states: "active", "hover", or combine with disabled prop for disabled state`,'Use styles prop for inline styles when needed. Example: `<Button padding="8px" width="300px" justifyContent="start" iconStart={<Icon name="folder" />}>Custom Styled</Button>`',`Buttons have built-in hover, active (press), and disabled states with smooth transitions. Control states via className prop with values like "active", "hover"`]},compositionTips:[`Use button label for visible text and ariaLabel for icon-only buttons.`,`Wire button interactions through actions[] instead of raw onClick callbacks.`,`Use iconStart and iconEnd with icon catalog name strings for leading and trailing icons — never embed an icon as a raw child alongside label text.`,`Use buttonType="submit" only for form submission buttons; top-level type stays reserved for the component kind.`,`Use styling for compact sizing, alignment, or custom spacing when the default button size is not enough.`,`For buttons with visible text and a directional or action icon (e.g. undo/redo, next/back, send), use iconStart for leading icons and iconEnd for trailing icons. WRONG: label="← Undo". RIGHT: label="Undo", iconStart="arrowLeft".`,`Icon-only buttons MUST set isIcon: true and provide the icon via iconStart — never pass a bare icon as children without isIcon.`]};exports.default=e;
+var e={component:{name:`Button`,import:`import { Button } from 'gd-design-library'`,description:`Clickable button with multiple style variants (primary, secondary, tertiary, outlined, text). Use actions[] to wire up A2UI interactions.`,a2uiName:`button`,category:`Actions & Controls`,complexity:`Low`,accessibility:`WCAG 2.1 AA Compliant`,performance:`Lightweight`,dependencies:[`@emotion/react`,`@emotion/styled`],peerDependencies:[`react`,`react-dom`],bundleSize:`~2KB gzipped`,browserSupport:`All modern browsers`,touchSupport:!0,keyboardSupport:!0,screenReaderSupport:!0,props:[{name:`label`,type:`string`,description:`Button text content (maps to children)`},{name:`variant`,type:`string`,description:`Visual style variant of the button. Valid ButtonVariant values (always lowercase): primary|secondary|tertiary|outlined|text|inherit. NEVER use capitalized forms (Primary, Secondary…) or non-existent variants (danger, contained, default).`,enum:[`primary`,`secondary`,`tertiary`,`outlined`,`text`,`inherit`]},{name:`disabled`,type:`boolean`,description:`Disables the button preventing interaction`},{name:`isLoading`,type:`boolean`,description:`Shows a loading spinner inside the button and disables it`},{name:`fullWidth`,type:`boolean`,description:`Makes the button fill the full width of its container`},{name:`isIcon`,type:`boolean`,description:`Renders the button as a square icon-only button (no text)`},{name:`icon`,type:`string`,description:`Leading icon name from the shared A2UI icon catalog.`},{name:`iconEnd`,type:`string`,description:`Trailing icon name from the shared A2UI icon catalog.`},{name:`rounded`,type:`string`,description:`Border radius style. Token values: "none"=0px (sharp), "xs"=2px, "sm"=4px, "md"=8px, "lg"=16px, "xl"=32px, "default"=6px, "round"=9999px (CSS clamps to half the smallest dimension → perfect pill on wide text buttons, perfect circle on square icon buttons). Use "round" for pill or circle shapes. Use "xl" for prominent-but-not-full-pill shapes.`,enum:[`none`,`default`,`round`,`xs`,`sm`,`md`,`lg`,`xl`]},{name:`iconStart`,type:`string`,description:`Alias for icon: leading icon name from the shared A2UI icon catalog. The renderer checks iconStart first, then falls back to icon. Prefer icon in new A2UI specs.`},{name:`buttonType`,type:`string`,description:`HTML button type attribute. Use this instead of top-level type, which is reserved for the component kind.`,enum:[`button`,`submit`,`reset`],default:`button`},{name:`ariaLabel`,type:`string`,description:`Accessible label for icon-only buttons`},{name:`tabIndex`,type:`number`,description:`Keyboard navigation order for the button.`},{name:`actions`,type:`string[]`,description:`Action IDs from ui.actions to trigger on click`},{name:`styling`,type:`object`,description:`CSS style overrides for the button`}],quickStart:{basic:`<Button onClick={handleClick}>Click me</Button>`,primary:`<Button variant="primary" onClick={handleSubmit}>Submit</Button>`,secondary:`<Button variant="secondary" onClick={handleCancel}>Cancel</Button>`,rounded:`<Button variant="primary" rounded="md" onClick={handleClick}>Rounded Button</Button>`,icon:`<Button isIcon rounded="round" aria-label="Settings" iconStart={<Icon name="settings" />} />`,withIcon:`<Button iconStart={<Icon name="plus" />}>Add Item</Button>`},commonPatterns:{"Primary Action":{code:`<Button variant="primary" onClick={handleSubmit}>Submit</Button>`,useCase:`Main call-to-action buttons for forms and important actions`},"Secondary Action":{code:`<Button variant="secondary" onClick={handleCancel}>Cancel</Button>`,useCase:`Secondary actions like cancel, back, or alternative options`},"Icon Button":{code:`<Button isIcon aria-label="Settings" iconStart={<Icon name="settings" />} />`,useCase:`Compact icon-only buttons for toolbars and navigation`},"Form Submit":{code:`<Button type="submit" fullWidth disabled={isSubmitting}>Save Changes</Button>`,useCase:`Form submission buttons with loading states`},"State Control via className":{code:`<Button variant="primary" justifyContent="start" className="active">Press Me</Button>`,useCase:`Control button states using className prop with values like "active", "hover", or combine with disabled prop`},"Custom Styled with Box Props":{code:`<Button padding="8px" width="300px" justifyContent="start" iconStart={<Icon name="folder" />}>Custom Styled</Button>`,useCase:`Buttons with Box layout props (padding, width, justifyContent) and iconStart for flexible layouts`},"Disabled with Box Props":{code:`<Button variant="primary" disabled justifyContent="start">Disabled</Button>`,useCase:`Disabled buttons with Box layout props for consistent alignment`}},examples:[`<Button variant="primary" onClick={handleSubmit}>Submit</Button>`,`<Button variant="secondary" onClick={handleCancel}>Cancel</Button>`,`<Button variant="tertiary" onClick={handleBack}>Back</Button>`,`<Button variant="outlined" rounded="md" iconStart={<Icon name="plus" />}>Add Item</Button>`,`<Button variant="text" onClick={handleSkip}>Skip</Button>`,`<Button isIcon rounded="round" aria-label="Settings" iconStart={<Icon name="settings" />} />`,`<Button type="submit" fullWidth disabled={isSubmitting}>Save Changes</Button>`,`<Button variant="primary" justifyContent="start" className="active">Press Me</Button>`,`<Button variant="primary" disabled justifyContent="start">Disabled</Button>`,`<Button padding="8px" width="300px" justifyContent="start" iconStart={<Icon name="folder" />}>Custom Styled</Button>`],troubleshooting:{"Button not clickable":`Check if disabled prop is set to true or if onClick handler is missing`,"Accessibility issues":`Add aria-label for icon buttons and ensure proper focus management`,"Styling not applied":`Verify variant prop is set correctly`,"Form submission not working":`Use type="submit" for form buttons and ensure form has onSubmit handler`,"Icon not displaying":`Check if Icon component is imported and name prop is correct`,"size prop has no effect":`Button does NOT have a size prop — it is silently ignored. Use padding="4px 8px" and height="28px" (Box props) to create compact buttons, or height="36px" for standard size.`},compositionTips:[`Use variant="primary" for main actions, "secondary" for important alternatives, and "tertiary" for less prominent actions`,`Always provide aria-label for icon-only buttons`,`When using isIcon, provide the icon via iconStart and do not pass children`,`Use rounded="round" for icon buttons to create circular shapes`,`Apply rounded="md" or "lg" for modern, friendly button designs`,`Use fullWidth for mobile forms and important actions`,`Set disabled state during async operations to prevent double-clicks`,`Use type="submit" for form submission and type="button" for other actions`,`Include loading states for buttons that trigger async operations`,`Use consistent button variants and rounded styles across your application`,`Provide clear, actionable button text`,`Use iconStart and iconEnd for better visual hierarchy — pass <Icon size="sm" name="..." /> to iconStart/iconEnd rather than embedding a raw Icon as a child alongside text`,`Test keyboard navigation with Tab and Enter keys`,`Active/pressed states are built-in with scale animation for better tactile feedback`,`Button has NO size prop — never use size="sm"/"md"/"lg". To create a compact button use padding="4px 8px" and/or height="28px". For standard size use height="36px".`,`Use Box props like justifyContent="start" to align button content, and combine with alignItems, gap, margin, padding, width, height for flexible layouts`,`Use className for custom CSS classes to control states: "active", "hover", or combine with disabled prop for disabled state`,'Use styles prop for inline styles when needed. Example: `<Button padding="8px" width="300px" justifyContent="start" iconStart={<Icon name="folder" />}>Custom Styled</Button>`',`Buttons have built-in hover, active (press), and disabled states with smooth transitions. Control states via className prop with values like "active", "hover"`]},compositionTips:[`Use button label for visible text and ariaLabel for icon-only buttons.`,`Wire button interactions through actions[] instead of raw onClick callbacks.`,`Use iconStart and iconEnd with icon catalog name strings for leading and trailing icons — never embed an icon as a raw child alongside label text.`,`Use buttonType="submit" only for form submission buttons; top-level type stays reserved for the component kind.`,`Use styling for compact sizing, alignment, or custom spacing when the default button size is not enough.`,`For buttons with visible text and a directional or action icon (e.g. undo/redo, next/back, send), use iconStart for leading icons and iconEnd for trailing icons. WRONG: label="← Undo". RIGHT: label="Undo", iconStart="arrowLeft".`,`Icon-only buttons MUST set isIcon: true and provide the icon via iconStart — never pass a bare icon as children without isIcon.`]};exports.default=e;

package/ai/schemas/components/Button.d.cts

@@ -0,0 +1,94 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        description: string;
+        a2uiName: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
+        props: ({
+            name: string;
+            type: string;
+            description: string;
+            enum?: undefined;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            enum: readonly ["primary", "secondary", "tertiary", "outlined", "text", "inherit"];
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            enum: readonly ["none", "default", "round", "xs", "sm", "md", "lg", "xl"];
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            enum: readonly ["button", "submit", "reset"];
+            default: string;
+        })[];
+        quickStart: {
+            basic: string;
+            primary: string;
+            secondary: string;
+            rounded: string;
+            icon: string;
+            withIcon: string;
+        };
+        commonPatterns: {
+            'Primary Action': {
+                code: string;
+                useCase: string;
+            };
+            'Secondary Action': {
+                code: string;
+                useCase: string;
+            };
+            'Icon Button': {
+                code: string;
+                useCase: string;
+            };
+            'Form Submit': {
+                code: string;
+                useCase: string;
+            };
+            'State Control via className': {
+                code: string;
+                useCase: string;
+            };
+            'Custom Styled with Box Props': {
+                code: string;
+                useCase: string;
+            };
+            'Disabled with Box Props': {
+                code: string;
+                useCase: string;
+            };
+        };
+        examples: string[];
+        troubleshooting: {
+            'Button not clickable': string;
+            'Accessibility issues': string;
+            'Styling not applied': string;
+            'Form submission not working': string;
+            'Icon not displaying': string;
+            'size prop has no effect': string;
+        };
+        compositionTips: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

package/ai/schemas/components/Button.js

@@ -24,7 +24,7 @@ var e = {
 			{
 				name: "variant",
 				type: "string",
-				description: "Visual style variant of the button",
+				description: "Visual style variant of the button. Valid ButtonVariant values (always lowercase): primary|secondary|tertiary|outlined|text|inherit. NEVER use capitalized forms (Primary, Secondary…) or non-existent variants (danger, contained, default).",
 				enum: [
 					"primary",
 					"secondary",
@@ -67,7 +67,7 @@ var e = {
 			{
 				name: "rounded",
 				type: "string",
-				description: "Border radius of the button",
+				description: "Border radius style. Token values: \"none\"=0px (sharp), \"xs\"=2px, \"sm\"=4px, \"md\"=8px, \"lg\"=16px, \"xl\"=32px, \"default\"=6px, \"round\"=9999px (CSS clamps to half the smallest dimension → perfect pill on wide text buttons, perfect circle on square icon buttons). Use \"round\" for pill or circle shapes. Use \"xl\" for prominent-but-not-full-pill shapes.",
 				enum: [
 					"none",
 					"default",
@@ -79,6 +79,11 @@ var e = {
 					"xl"
 				]
 			},
+			{
+				name: "iconStart",
+				type: "string",
+				description: "Alias for icon: leading icon name from the shared A2UI icon catalog. The renderer checks iconStart first, then falls back to icon. Prefer icon in new A2UI specs."
+			},
 			{
 				name: "buttonType",
 				type: "string",
@@ -95,6 +100,11 @@ var e = {
 				type: "string",
 				description: "Accessible label for icon-only buttons"
 			},
+			{
+				name: "tabIndex",
+				type: "number",
+				description: "Keyboard navigation order for the button."
+			},
 			{
 				name: "actions",
 				type: "string[]",