gd-design-library 1.8.2 → 1.8.3

package/ai/figma-maps/index.js

@@ -0,0 +1,17 @@
+import e from "./figma-color-map.js";
+import t from "./figma-spacing-map.js";
+import n from "./figma-radius-map.js";
+import r from "./figma-font-map.js";
+import i from "./figma-shadow-map.js";
+import a from "./figma-icon-map.js";
+//#region src/ai/figma-maps/index.ts
+var o = e, s = t, c = n, l = r, u = i, d = a, f = {
+	color: e,
+	spacing: t,
+	radius: n,
+	font: r,
+	shadow: i,
+	icon: a
+};
+//#endregion
+export { o as FIGMA_COLOR_MAP, l as FIGMA_FONT_MAP, d as FIGMA_ICON_MAP, c as FIGMA_RADIUS_MAP, u as FIGMA_SHADOW_MAP, s as FIGMA_SPACING_MAP, f as FIGMA_TOKEN_MAPS };

package/ai/index.cjs

@@ -1 +1 @@
-Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require(`./a2ui/image-policy.cjs`),t=require(`./schemas/components.cjs`),n=require(`./discovery.cjs`),r=require(`./prompts.cjs`),i=require(`./schemas/index.cjs`),a=require(`./a2ui/component-map.cjs`),o=require(`./a2ui/spec-schema.cjs`),s=require(`./validation.cjs`),c=require(`./a2ui/system-prompt.cjs`);exports.A2UI_AVAILABLE_ICONS=a.A2UI_AVAILABLE_ICONS,exports.A2UI_BUTTON_VARIANTS=a.A2UI_BUTTON_VARIANTS,exports.A2UI_COMPONENT_MAP=a.A2UI_COMPONENT_MAP,exports.A2UI_COMPONENT_TYPES=a.A2UI_COMPONENT_TYPES,exports.A2UI_ICON_CATALOG=a.A2UI_ICON_CATALOG,exports.A2UI_SPEC_SCHEMA=o.A2UI_SPEC_SCHEMA,exports.A2UI_SPEC_SCHEMA_SIMPLE=o.A2UI_SPEC_SCHEMA_SIMPLE,exports.CLAUDE_GRIDKIT_SYSTEM_PROMPT=r.CLAUDE_GRIDKIT_SYSTEM_PROMPT,exports.aiComponentsSchema=t.aiComponentsSchema,exports.aiPromptGuidelines=t.aiPromptGuidelines,exports.buildA2UIGeminiRequest=c.buildA2UIGeminiRequest,exports.buildA2UISystemPrompt=c.buildA2UISystemPrompt,exports.buildClaudeGridkitSystemPrompt=r.buildClaudeGridkitSystemPrompt,exports.buildClaudeSystemPrompt=r.buildClaudeSystemPrompt,exports.buildContextualPrompt=r.buildContextualPrompt,exports.buildGDLibraryPrompt=r.buildGDLibraryPrompt,exports.buildGPT4Prompt=r.buildGPT4Prompt,exports.buildGeminiPrompt=r.buildGeminiPrompt,exports.componentIndex=i.componentIndex,exports.componentModulesByName=t.componentModulesByName,exports.defaultAIPromptIntro=r.defaultAIPromptIntro,exports.discovery=n.discovery,exports.extendA2UISpecSchema=o.extendA2UISpecSchema,exports.extractComponents=s.extractComponents,exports.extractImports=s.extractImports,exports.findPatterns=n.findPatterns,exports.getA2UIPropEnum=a.getA2UIPropEnum,exports.getComponentSchema=n.getComponentSchema,exports.getComponentsByCategory=n.getComponentsByCategory,exports.getComponentsByFeature=n.getComponentsByFeature,exports.getComponentsByUseCase=n.getComponentsByUseCase,exports.getGridKitComponent=a.getGridKitComponent,exports.normalizeImageSources=e.normalizeImageSources,exports.validateAllSchemas=s.validateAllSchemas,exports.validateGeneratedCode=s.validateGeneratedCode,exports.validateSchema=s.validateSchema;
+Object.defineProperty(exports,Symbol.toStringTag,{value:`Module`});const e=require("./a2ui/image-policy.cjs"),t=require("./schemas/components.cjs"),n=require("./discovery.cjs"),r=require("./prompts.cjs"),i=require("./schemas/index.cjs"),a=require("./a2ui/component-map.cjs"),o=require("./a2ui/spec-schema.cjs"),s=require("./validation.cjs"),c=require("./figma-maps/index.cjs"),l=require("./a2ui/system-prompt.cjs");exports.A2UI_AVAILABLE_ICONS=a.A2UI_AVAILABLE_ICONS,exports.A2UI_BUTTON_VARIANTS=a.A2UI_BUTTON_VARIANTS,exports.A2UI_COMPONENT_MAP=a.A2UI_COMPONENT_MAP,exports.A2UI_COMPONENT_TYPES=a.A2UI_COMPONENT_TYPES,exports.A2UI_ICON_CATALOG=a.A2UI_ICON_CATALOG,exports.A2UI_SPEC_SCHEMA=o.A2UI_SPEC_SCHEMA,exports.A2UI_SPEC_SCHEMA_SIMPLE=o.A2UI_SPEC_SCHEMA_SIMPLE,exports.CLAUDE_GRIDKIT_SYSTEM_PROMPT=r.CLAUDE_GRIDKIT_SYSTEM_PROMPT,exports.FIGMA_COLOR_MAP=c.FIGMA_COLOR_MAP,exports.FIGMA_FONT_MAP=c.FIGMA_FONT_MAP,exports.FIGMA_ICON_MAP=c.FIGMA_ICON_MAP,exports.FIGMA_RADIUS_MAP=c.FIGMA_RADIUS_MAP,exports.FIGMA_SHADOW_MAP=c.FIGMA_SHADOW_MAP,exports.FIGMA_SPACING_MAP=c.FIGMA_SPACING_MAP,exports.FIGMA_TOKEN_MAPS=c.FIGMA_TOKEN_MAPS,exports.aiComponentsSchema=t.aiComponentsSchema,exports.aiPromptGuidelines=t.aiPromptGuidelines,exports.buildA2UIGeminiRequest=l.buildA2UIGeminiRequest,exports.buildA2UISystemPrompt=l.buildA2UISystemPrompt,exports.buildClaudeGridkitSystemPrompt=r.buildClaudeGridkitSystemPrompt,exports.buildClaudeSystemPrompt=r.buildClaudeSystemPrompt,exports.buildContextualPrompt=r.buildContextualPrompt,exports.buildGDLibraryPrompt=r.buildGDLibraryPrompt,exports.buildGPT4Prompt=r.buildGPT4Prompt,exports.buildGeminiPrompt=r.buildGeminiPrompt,exports.componentIndex=i.componentIndex,exports.componentModulesByName=t.componentModulesByName,exports.defaultAIPromptIntro=r.defaultAIPromptIntro,exports.discovery=n.discovery,exports.extendA2UISpecSchema=o.extendA2UISpecSchema,exports.extractComponents=s.extractComponents,exports.extractImports=s.extractImports,exports.findPatterns=n.findPatterns,exports.getA2UIPropEnum=a.getA2UIPropEnum,exports.getComponentSchema=n.getComponentSchema,exports.getComponentsByCategory=n.getComponentsByCategory,exports.getComponentsByFeature=n.getComponentsByFeature,exports.getComponentsByUseCase=n.getComponentsByUseCase,exports.getGridKitComponent=a.getGridKitComponent,exports.normalizeImageSources=e.normalizeImageSources,exports.validateAllSchemas=s.validateAllSchemas,exports.validateGeneratedCode=s.validateGeneratedCode,exports.validateSchema=s.validateSchema;

package/ai/index.d.cts

@@ -0,0 +1,8 @@
+export * from './prompts.js';
+export * from './schemas/components.js';
+export * from './schemas/index.js';
+export * from './discovery.js';
+export * from './validation.js';
+export * from './a2ui/index.js';
+export * from './figma-maps/index.js';
+export type { A2UICustomComponentDefinition } from '../utils/a2ui/types.js';

package/ai/index.d.ts

@@ -1,7 +1,8 @@
-export * from './prompts';
-export * from './schemas/components';
-export * from './schemas/index';
-export * from './discovery';
-export * from './validation';
-export * from './a2ui';
-export type { A2UICustomComponentDefinition } from '../utils/a2ui/types';
+export * from './prompts.js';
+export * from './schemas/components.js';
+export * from './schemas/index.js';
+export * from './discovery.js';
+export * from './validation.js';
+export * from './a2ui/index.js';
+export * from './figma-maps/index.js';
+export type { A2UICustomComponentDefinition } from '../utils/a2ui/types.js';

package/ai/index.js

@@ -6,5 +6,6 @@ import { componentIndex as v } from "./schemas/index.js";
 import { A2UI_AVAILABLE_ICONS as y, A2UI_BUTTON_VARIANTS as b, A2UI_COMPONENT_MAP as x, A2UI_COMPONENT_TYPES as S, A2UI_ICON_CATALOG as C, getA2UIPropEnum as w, getGridKitComponent as T } from "./a2ui/component-map.js";
 import { A2UI_SPEC_SCHEMA as E, A2UI_SPEC_SCHEMA_SIMPLE as D, extendA2UISpecSchema as O } from "./a2ui/spec-schema.js";
 import { extractComponents as k, extractImports as A, validateAllSchemas as j, validateGeneratedCode as M, validateSchema as N } from "./validation.js";
-import { buildA2UIGeminiRequest as P, buildA2UISystemPrompt as F } from "./a2ui/system-prompt.js";
-export { y as A2UI_AVAILABLE_ICONS, b as A2UI_BUTTON_VARIANTS, x as A2UI_COMPONENT_MAP, S as A2UI_COMPONENT_TYPES, C as A2UI_ICON_CATALOG, E as A2UI_SPEC_SCHEMA, D as A2UI_SPEC_SCHEMA_SIMPLE, u as CLAUDE_GRIDKIT_SYSTEM_PROMPT, t as aiComponentsSchema, n as aiPromptGuidelines, P as buildA2UIGeminiRequest, F as buildA2UISystemPrompt, d as buildClaudeGridkitSystemPrompt, f as buildClaudeSystemPrompt, p as buildContextualPrompt, m as buildGDLibraryPrompt, h as buildGPT4Prompt, g as buildGeminiPrompt, v as componentIndex, r as componentModulesByName, _ as defaultAIPromptIntro, i as discovery, O as extendA2UISpecSchema, k as extractComponents, A as extractImports, a as findPatterns, w as getA2UIPropEnum, o as getComponentSchema, s as getComponentsByCategory, c as getComponentsByFeature, l as getComponentsByUseCase, T as getGridKitComponent, e as normalizeImageSources, j as validateAllSchemas, M as validateGeneratedCode, N as validateSchema };
+import { FIGMA_COLOR_MAP as P, FIGMA_FONT_MAP as F, FIGMA_ICON_MAP as I, FIGMA_RADIUS_MAP as L, FIGMA_SHADOW_MAP as R, FIGMA_SPACING_MAP as z, FIGMA_TOKEN_MAPS as B } from "./figma-maps/index.js";
+import { buildA2UIGeminiRequest as V, buildA2UISystemPrompt as H } from "./a2ui/system-prompt.js";
+export { y as A2UI_AVAILABLE_ICONS, b as A2UI_BUTTON_VARIANTS, x as A2UI_COMPONENT_MAP, S as A2UI_COMPONENT_TYPES, C as A2UI_ICON_CATALOG, E as A2UI_SPEC_SCHEMA, D as A2UI_SPEC_SCHEMA_SIMPLE, u as CLAUDE_GRIDKIT_SYSTEM_PROMPT, P as FIGMA_COLOR_MAP, F as FIGMA_FONT_MAP, I as FIGMA_ICON_MAP, L as FIGMA_RADIUS_MAP, R as FIGMA_SHADOW_MAP, z as FIGMA_SPACING_MAP, B as FIGMA_TOKEN_MAPS, t as aiComponentsSchema, n as aiPromptGuidelines, V as buildA2UIGeminiRequest, H as buildA2UISystemPrompt, d as buildClaudeGridkitSystemPrompt, f as buildClaudeSystemPrompt, p as buildContextualPrompt, m as buildGDLibraryPrompt, h as buildGPT4Prompt, g as buildGeminiPrompt, v as componentIndex, r as componentModulesByName, _ as defaultAIPromptIntro, i as discovery, O as extendA2UISpecSchema, k as extractComponents, A as extractImports, a as findPatterns, w as getA2UIPropEnum, o as getComponentSchema, s as getComponentsByCategory, c as getComponentsByFeature, l as getComponentsByUseCase, T as getGridKitComponent, e as normalizeImageSources, j as validateAllSchemas, M as validateGeneratedCode, N as validateSchema };

package/ai/prompts.cjs

@@ -1,4 +1,4 @@
-const e=require(`./a2ui/image-policy.cjs`),t=require(`./schemas/components.cjs`),n=require(`./discovery.cjs`);function r(t){let n=e.normalizeImageSources(t);return n?.length?[`- Image/Card.Image: use only direct asset URLs from these hosts: ${n.join(`, `)}.`,`- Image/Card.Image: use direct browser-loadable image asset URLs, not webpage URLs, product pages, search results, or hotlink-protected links.`,`- Image/Card.Image: if you cannot provide a high-confidence public image asset URL from an allowed host, omit the image instead of guessing.`]:[`- Image/Card.Image: use only direct browser-loadable image asset URLs from any public CDN.`,`- Image/Card.Image: do not use webpage URLs, product pages, search results, or hotlink-protected links.`,`- Image/Card.Image: if you cannot provide a high-confidence public image asset URL, omit the image instead of guessing.`]}function i(e){let n=[];return t.aiComponentsSchema.components.forEach(e=>{let t=e;e.name===`Icon`&&t.availableIcons&&n.push(`- Icon: ONLY use these icon names: ${t.availableIcons.join(`, `)}. Do NOT use: "add" (use plus), "chevronRight" (use arrowRight), "settings", etc.`),t.bestPractices&&t.bestPractices.forEach(t=>{(t.startsWith(`CRITICAL:`)||t.startsWith(`IMPORTANT:`))&&n.push(`- ${e.name}: ${t.replace(/^(CRITICAL:|IMPORTANT:)\s*/i,``)}`)})}),n.push(`- Row/Column/Card.Row/Card.Column: use isWrap (boolean), NOT wrap. IMPORTANT: isWrap defaults to true, use isWrap={false} to prevent wrapping.`,`- Image and Card.Image: width and height props are numbers only (e.g., width={96}, not width="96px").`,`- Card: supports withShadowHover for elevation effect on hover. Combine with backgroundColor="#fff" and cursor: "pointer" for interactive cards.`,`- Card.Title and other Card subcomponents sizeVariant only accepts CardSizeVariant.Default or CardSizeVariant.Sm.`,`- Counter and Card.Counter use initial (not value) for starting quantity; onCounterChange is the change handler.`,`- Button variant must be one of: Primary, Secondary, Tertiary, Outlined, Text, Inherit. Do NOT use any other than that.`,`- Box: use variant="horizontal" or variant="vertical" (defaults to "vertical"). Supports isBordered, isHighlighted, withShadowHover props. Prefer Box over raw divs for all container needs.`,`- Typography: variant="caption" renders a real <caption> element. Outside actual table captions, always set as="div" for block metadata or as="span" for inline metadata to avoid invalid DOM nesting.`,`- For any free-form component color props (for example Icon.fill/fillSvg, Typography.color, Avatar backgroundColor/badgeColor, Separator color/labelColor, Header.bgColor, ProgressBar fillColor/backgroundColor, Chart colors and series[].color, RadioGroup options[].hex, and AvatarUser.badgeColor), prefer theme color token paths such as "icon.primary", "text.secondary", or "bg.fill.secondary" before raw CSS or hex colors.`),n.push(...r(e)),n.join(`
+const e=require("./a2ui/image-policy.cjs"),t=require("./schemas/components.cjs"),n=require("./discovery.cjs");function r(t){let n=e.normalizeImageSources(t);return n?.length?[`- Image/Card.Image: use only direct asset URLs from these hosts: ${n.join(`, `)}.`,`- Image/Card.Image: use direct browser-loadable image asset URLs, not webpage URLs, product pages, search results, or hotlink-protected links.`,`- Image/Card.Image: if you cannot provide a high-confidence public image asset URL from an allowed host, omit the image instead of guessing.`]:[`- Image/Card.Image: use only direct browser-loadable image asset URLs from any public CDN.`,`- Image/Card.Image: do not use webpage URLs, product pages, search results, or hotlink-protected links.`,`- Image/Card.Image: if you cannot provide a high-confidence public image asset URL, omit the image instead of guessing.`]}function i(e){let n=[];return t.aiComponentsSchema.components.forEach(e=>{let t=e;e.name===`Icon`&&t.availableIcons&&n.push(`- Icon: ONLY use these icon names: ${t.availableIcons.join(`, `)}. Do NOT use: "add" (use plus), "chevronRight" (use arrowRight), "settings", etc.`),t.bestPractices&&t.bestPractices.forEach(t=>{(t.startsWith(`CRITICAL:`)||t.startsWith(`IMPORTANT:`))&&n.push(`- ${e.name}: ${t.replace(/^(CRITICAL:|IMPORTANT:)\s*/i,``)}`)})}),n.push(`- Row/Column/Card.Row/Card.Column: use isWrap (boolean), NOT wrap. IMPORTANT: isWrap defaults to true, use isWrap={false} to prevent wrapping.`,`- Image and Card.Image: width and height props are numbers only (e.g., width={96}, not width="96px").`,`- Card: supports withShadowHover for elevation effect on hover. Combine with backgroundColor="#fff" and cursor: "pointer" for interactive cards.`,`- Card.Title and other Card subcomponents sizeVariant only accepts CardSizeVariant.Default or CardSizeVariant.Sm.`,`- Counter and Card.Counter use initial (not value) for starting quantity; onCounterChange is the change handler.`,`- Button variant must be one of: Primary, Secondary, Tertiary, Outlined, Text, Inherit. Do NOT use any other than that.`,`- Box: use variant="horizontal" or variant="vertical" (defaults to "vertical"). Supports isBordered, isHighlighted, withShadowHover props. Prefer Box over raw divs for all container needs.`,`- Typography: variant="caption" renders a real <caption> element. Outside actual table captions, always set as="div" for block metadata or as="span" for inline metadata to avoid invalid DOM nesting.`,`- For any free-form component color props (for example Icon.fill/fillSvg, Typography.color, Avatar backgroundColor/badgeColor, Separator color/labelColor, Header.bgColor, ProgressBar fillColor/backgroundColor, Chart colors and series[].color, RadioGroup options[].hex, and AvatarUser.badgeColor), prefer theme color token paths such as "icon.primary", "text.secondary", or "bg.fill.secondary" before raw CSS or hex colors.`),n.push(...r(e)),n.join(`
 `)}function a(e){let n=t.aiComponentsSchema.components.map(e=>`- ${e.name}: ${e.description}`).join(`
 `),r=t.aiComponentsSchema.compositionTips.map(e=>`- ${e}`).join(`
 `),a=t.aiPromptGuidelines.map(e=>`- ${e}`).join(`

package/ai/prompts.d.cts

@@ -0,0 +1,49 @@
+import { A2UIImageSources } from './a2ui/image-policy.js';
+export type ClaudePromptOptions = {
+    imageSources?: A2UIImageSources;
+};
+export declare function buildClaudeGridkitSystemPrompt(options?: ClaudePromptOptions): string;
+/**
+ * Claude Code – System Prompt for generating React/TSX with gd-design-library (GridKit)
+ * This constant is intended as the "system" instruction for the LLM.
+ */
+export declare const CLAUDE_GRIDKIT_SYSTEM_PROMPT: string;
+/**
+ * Builds a task-specific instruction for Claude Code appended after the system prompt.
+ */
+export declare function buildClaudeSystemPrompt(userRequest: string, options?: ClaudePromptOptions): string;
+/**
+ * Build contextual prompt with specific component details
+ */
+export declare function buildContextualPrompt(userRequest: string, context?: {
+    components?: string[];
+    patterns?: string[];
+    constraints?: string[];
+}, options?: ClaudePromptOptions): string;
+/**
+ * Legacy/basic builder retained for compatibility.
+ */
+export declare function buildGDLibraryPrompt(userRequest: string): string;
+/**
+ * Build prompt optimized for GPT-4 (OpenAI)
+ */
+export declare function buildGPT4Prompt(userRequest: string, options?: ClaudePromptOptions): Array<{
+    role: string;
+    content: string;
+}>;
+/**
+ * Build prompt optimized for Gemini (Google)
+ */
+export declare function buildGeminiPrompt(userRequest: string, options?: ClaudePromptOptions): {
+    contents: Array<{
+        parts: Array<{
+            text: string;
+        }>;
+    }>;
+    generationConfig: {
+        temperature: number;
+        topK: number;
+        topP: number;
+    };
+};
+export declare const defaultAIPromptIntro: string;

package/ai/prompts.d.ts

@@ -1,4 +1,4 @@
-import { A2UIImageSources } from './a2ui/image-policy';
+import { A2UIImageSources } from './a2ui/image-policy.js';
 export type ClaudePromptOptions = {
     imageSources?: A2UIImageSources;
 };

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

@@ -0,0 +1,191 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        description: string;
+        a2uiName: string;
+        a2uiSubcomponents: {
+            'accordion-item': {
+                component: string;
+                props: ({
+                    name: string;
+                    type: string;
+                    description: string;
+                    required: boolean;
+                } | {
+                    name: string;
+                    type: string;
+                    description: string;
+                    required?: undefined;
+                })[];
+            };
+            'accordion-header': {
+                component: string;
+                props: ({
+                    name: string;
+                    type: string;
+                    description: string;
+                    required: boolean;
+                } | {
+                    name: string;
+                    type: string;
+                    description: string;
+                    required?: undefined;
+                })[];
+            };
+            'accordion-content': {
+                component: string;
+                props: {
+                    name: string;
+                    type: 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;
+        subcomponents: {
+            AccordionItem: {
+                description: string;
+                props: ({
+                    name: string;
+                    type: string;
+                    description: string;
+                    required: boolean;
+                    default?: undefined;
+                } | {
+                    name: string;
+                    type: string;
+                    description: string;
+                    default: string;
+                    required?: undefined;
+                } | {
+                    name: string;
+                    type: string;
+                    description: string;
+                    required?: undefined;
+                    default?: undefined;
+                })[];
+            };
+            AccordionHeader: {
+                description: string;
+                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: string;
+                    required?: undefined;
+                })[];
+            };
+            AccordionContent: {
+                description: string;
+                props: ({
+                    name: string;
+                    type: string;
+                    description: string;
+                    required: boolean;
+                    default?: undefined;
+                } | {
+                    name: string;
+                    type: string;
+                    description: string;
+                    default: string;
+                    required?: undefined;
+                })[];
+            };
+        };
+        props: ({
+            name: string;
+            type: string;
+            description: string;
+            required: boolean;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: boolean;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required?: undefined;
+            default?: undefined;
+        })[];
+        quickStart: {
+            basic: string;
+            controlled: string;
+            multiple: string;
+            faq: string;
+        };
+        commonPatterns: {
+            'FAQ Section': {
+                code: string;
+                useCase: string;
+            };
+            'Settings Panel': {
+                code: string;
+                useCase: string;
+            };
+            'Step-by-Step Guide': {
+                code: string;
+                useCase: string;
+            };
+            'Rich Header Content': {
+                code: string;
+                useCase: string;
+            };
+            'Nested Accordions': {
+                code: string;
+                useCase: string;
+            };
+            'Custom Styled Items': {
+                code: string;
+                useCase: string;
+            };
+            'AccordionItem with Box Layout Props': {
+                code: string;
+                useCase: string;
+            };
+            'Flex Layout Accordion Items': {
+                code: string;
+                useCase: string;
+            };
+        };
+        examples: string[];
+        troubleshooting: {
+            'Items not expanding': string;
+            'Multiple items not expanding': string;
+            'State not updating': string;
+            'Accessibility issues': string;
+            'Performance issues': string;
+            'Icon not rotating': string;
+            'Missing id error': string;
+        };
+        bestPractices: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

package/ai/schemas/components/AttachmentFile.cjs

@@ -1 +1 @@
-var e={component:{name:`AttachmentFile`,import:`import { AttachmentFile } from 'gd-design-library'`,description:`File attachment chip that displays a selected file with its name, optional type and size metadata, and a remove action. Long file names truncate with ellipsis and show a tooltip on hover; long fileType values truncate with ellipsis. The separator between fileType and fileSize defaults to "·" and is configurable. Designed to render as a child of InputArea above the textarea, or standalone in any file-selection context.`,a2uiName:`attachment-file`,category:`Forms & Input`,complexity:`Low`,accessibility:`WCAG 2.1 AA Compliant`,props:[{name:`fileName`,type:`string`,required:!0,description:`Name of the attached file displayed in the chip`},{name:`fileType`,type:`string`,description:`File type label shown below the file name (e.g. "PDF", "doc")`},{name:`fileSize`,type:`string`,description:`File size label shown below the file name (e.g. "1.2 MB")`},{name:`separator`,type:`string`,description:`Character rendered between fileType and fileSize in the meta row`,default:`·`},{name:`fileIcon`,type:`ReactNode`,description:`Custom icon replacing the default fileCopy icon. Use an Icon component sized xl (32px).`},{name:`onRemove`,type:`() => void`,description:`Callback fired when the remove button is clicked. The remove button is only rendered when this prop is provided.`},{name:`removeButtonLabel`,type:`string`,description:`Accessible aria-label for the remove button`,default:`Remove file`},{name:`disabled`,type:`boolean`,description:`Disables the remove button`,default:!1},{name:`isLoading`,type:`boolean`,description:`Shows a Loader spinner in place of the remove button while the file is uploading. Only takes effect when onRemove is also provided.`,default:!1},{name:`styling`,type:`object`,description:`Custom styles for the chip container`,default:{}}],examples:[`<AttachmentFile fileName="report.pdf" fileType="PDF" fileSize="1.2 MB" onRemove={() => removeFile(id)} />`,`<AttachmentFile fileName="image.png" />`,`<AttachmentFile fileName="data.xlsx" fileType="xlsx" fileSize="3.8 MB" onRemove={handleRemove} disabled={isUploading} />`,`<AttachmentFile fileName="photo.jpg" fileIcon={<Icon name="image" size="xl" />} onRemove={handleRemove} />`,`<AttachmentFile fileName="report.pdf" isLoading onRemove={handleRemove} />`]},compositionTips:[`Pass AttachmentFile as a child of InputArea to show selected files above the textarea.`,`Always provide onRemove so users can deselect files; omit it only for read-only display.`,`Set disabled during upload or processing to prevent premature removal.`,`Use fileType and fileSize together for full file metadata — either can be omitted independently.`,`Map an array of selected files to AttachmentFile chips inside a FlexContainer with flexDirection="column" and gap for a file list.`,`Use fileIcon with an image-specific Icon (e.g. name="image") to visually distinguish image attachments from documents.`,`Use isLoading during upload instead of passing fileIcon={<Loader>} externally — it natively swaps the remove button for a spinner and disables removal until the upload completes.`,`Long file names truncate automatically and reveal the full text via a tooltip on hover; long fileType values truncate but do not show a tooltip.`,`Override the separator prop when the design uses a different delimiter between fileType and fileSize (e.g. separator="/" or separator="|").`]};exports.default=e;
+var e={component:{name:`AttachmentFile`,import:`import { AttachmentFile } from 'gd-design-library'`,description:`File attachment chip: file-copy icon on the left, bold file name (truncates with tooltip on hover), optional small metadata row (fileType · fileSize, both truncate), and a close/remove (×) button on the right. Horizontal inline chip, typically 40–48 px tall with rounded corners. Renders above the InputArea textarea or standalone. Use actions[] to wire the remove button in A2UI; in TSX use onRemove. Figma component set names: "AttachmentFile", "Attachment File", "File Chip", "File Tag", "attachment-chip". Also matches any chip/pill node that contains a file name + a remove/close affordance.`,a2uiName:`attachment-file`,category:`Forms & Input`,complexity:`Low`,accessibility:`WCAG 2.1 AA Compliant`,props:[{name:`fileName`,type:`string`,required:!0,description:`Name of the attached file displayed in the chip. Truncates with a tooltip on hover when long. Required.`},{name:`fileType`,type:`string`,description:`File type label shown below the file name (e.g. "PDF", "doc"). Truncates with ellipsis when long.`},{name:`fileSize`,type:`string`,description:`File size label shown below the file name (e.g. "1.2 MB").`},{name:`separator`,type:`string`,description:`Character rendered between fileType and fileSize in the metadata row. Defaults to "·". Override for designs that use "/" or "|".`,default:`·`},{name:`actions`,type:`string[]`,description:`Action IDs from ui.actions to trigger when the remove (×) button is clicked. The remove button is only rendered when this array is non-empty. In TSX this maps to onRemove. Example: set actions: ["remove_notes_txt"] and define { id: "remove_notes_txt", type: "remove-file" } in ui.actions.`},{name:`removeButtonLabel`,type:`string`,description:`Accessible aria-label for the remove button.`,default:`Remove file`},{name:`disabled`,type:`boolean`,description:`Disables the remove button, preventing file removal.`,default:!1},{name:`isLoading`,type:`boolean`,description:`Shows a spinner in place of the remove button while the file is uploading. Only takes effect when actions[] is also provided (TSX: when onRemove is set).`,default:!1},{name:`styling`,type:`object`,description:`CSS style overrides for the chip container (e.g. { margin: "4px 0" }).`,default:{}}],examples:[`<AttachmentFile fileName="report.pdf" fileType="PDF" fileSize="1.2 MB" onRemove={() => removeFile(id)} />`,`<AttachmentFile fileName="image.png" />`,`<AttachmentFile fileName="data.xlsx" fileType="xlsx" fileSize="3.8 MB" onRemove={handleRemove} disabled={isUploading} />`,`<AttachmentFile fileName="photo.jpg" fileIcon={<Icon name="image" size="xl" />} onRemove={handleRemove} />`,`<AttachmentFile fileName="report.pdf" isLoading onRemove={handleRemove} />`]},compositionTips:[`A2UI — wire the remove button via actions[], NOT onRemove: { "id": "attachment_file_1", "type": "attachment-file", "fileName": "notes.txt", "actions": ["remove_notes_txt"] } and { "id": "remove_notes_txt", "type": "remove-file" } in ui.actions. Never set onRemove or fileIcon directly in A2UI JSON.`,`A2UI — omit actions[] entirely for read-only display (no remove button is rendered).`,`A2UI — isLoading, disabled, separator, removeButtonLabel, fileType, fileSize all work in A2UI JSON exactly as in TSX.`,`Pass AttachmentFile as a child of InputArea to show selected files above the textarea.`,`Always provide onRemove (TSX) / actions[] (A2UI) so users can deselect files; omit only for read-only display.`,`Set disabled during upload or processing to prevent premature removal.`,`Use fileType and fileSize together for full file metadata — either can be omitted independently.`,`Map an array of selected files to AttachmentFile chips inside a Box variant="vertical" with gap for a file list.`,`Use isLoading during upload — it natively swaps the remove button for a spinner and disables removal until complete.`,`Long file names truncate automatically and reveal the full text via a tooltip on hover; long fileType values truncate but do not show a tooltip.`,`Override separator when the design uses a different delimiter between fileType and fileSize (e.g. separator="/" or separator="|").`,`Visual signature for design intake: horizontal chip ~40-48 px tall, file-copy icon on the left, bold filename (possibly truncated), optional 12-13 px metadata text below, × close button on the right.`,`Figma INSTANCE resolution: component set name "AttachmentFile" or "Attachment File" → A2UI type "attachment-file". Map Figma component properties: fileName caption → fileName, type badge → fileType, size text → fileSize.`]};exports.default=e;

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

@@ -0,0 +1,45 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        description: string;
+        a2uiName: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        props: ({
+            name: string;
+            type: string;
+            required: boolean;
+            description: string;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required?: undefined;
+            default?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: boolean;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: {};
+            required?: undefined;
+        })[];
+        examples: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

package/ai/schemas/components/AttachmentFile.js

@@ -2,7 +2,7 @@ var e = {
 	component: {
 		name: "AttachmentFile",
 		import: "import { AttachmentFile } from 'gd-design-library'",
-		description: "File attachment chip that displays a selected file with its name, optional type and size metadata, and a remove action. Long file names truncate with ellipsis and show a tooltip on hover; long fileType values truncate with ellipsis. The separator between fileType and fileSize defaults to \"·\" and is configurable. Designed to render as a child of InputArea above the textarea, or standalone in any file-selection context.",
+		description: "File attachment chip: file-copy icon on the left, bold file name (truncates with tooltip on hover), optional small metadata row (fileType · fileSize, both truncate), and a close/remove (×) button on the right. Horizontal inline chip, typically 40–48 px tall with rounded corners. Renders above the InputArea textarea or standalone. Use actions[] to wire the remove button in A2UI; in TSX use onRemove. Figma component set names: \"AttachmentFile\", \"Attachment File\", \"File Chip\", \"File Tag\", \"attachment-chip\". Also matches any chip/pill node that contains a file name + a remove/close affordance.",
 		a2uiName: "attachment-file",
 		category: "Forms & Input",
 		complexity: "Low",
@@ -12,56 +12,51 @@ var e = {
 				name: "fileName",
 				type: "string",
 				required: !0,
-				description: "Name of the attached file displayed in the chip"
+				description: "Name of the attached file displayed in the chip. Truncates with a tooltip on hover when long. Required."
 			},
 			{
 				name: "fileType",
 				type: "string",
-				description: "File type label shown below the file name (e.g. \"PDF\", \"doc\")"
+				description: "File type label shown below the file name (e.g. \"PDF\", \"doc\"). Truncates with ellipsis when long."
 			},
 			{
 				name: "fileSize",
 				type: "string",
-				description: "File size label shown below the file name (e.g. \"1.2 MB\")"
+				description: "File size label shown below the file name (e.g. \"1.2 MB\")."
 			},
 			{
 				name: "separator",
 				type: "string",
-				description: "Character rendered between fileType and fileSize in the meta row",
+				description: "Character rendered between fileType and fileSize in the metadata row. Defaults to \"·\". Override for designs that use \"/\" or \"|\".",
 				default: "·"
 			},
 			{
-				name: "fileIcon",
-				type: "ReactNode",
-				description: "Custom icon replacing the default fileCopy icon. Use an Icon component sized xl (32px)."
-			},
-			{
-				name: "onRemove",
-				type: "() => void",
-				description: "Callback fired when the remove button is clicked. The remove button is only rendered when this prop is provided."
+				name: "actions",
+				type: "string[]",
+				description: "Action IDs from ui.actions to trigger when the remove (×) button is clicked. The remove button is only rendered when this array is non-empty. In TSX this maps to onRemove. Example: set actions: [\"remove_notes_txt\"] and define { id: \"remove_notes_txt\", type: \"remove-file\" } in ui.actions."
 			},
 			{
 				name: "removeButtonLabel",
 				type: "string",
-				description: "Accessible aria-label for the remove button",
+				description: "Accessible aria-label for the remove button.",
 				default: "Remove file"
 			},
 			{
 				name: "disabled",
 				type: "boolean",
-				description: "Disables the remove button",
+				description: "Disables the remove button, preventing file removal.",
 				default: !1
 			},
 			{
 				name: "isLoading",
 				type: "boolean",
-				description: "Shows a Loader spinner in place of the remove button while the file is uploading. Only takes effect when onRemove is also provided.",
+				description: "Shows a spinner in place of the remove button while the file is uploading. Only takes effect when actions[] is also provided (TSX: when onRemove is set).",
 				default: !1
 			},
 			{
 				name: "styling",
 				type: "object",
-				description: "Custom styles for the chip container",
+				description: "CSS style overrides for the chip container (e.g. { margin: \"4px 0\" }).",
 				default: {}
 			}
 		],
@@ -74,15 +69,19 @@ var e = {
 		]
 	},
 	compositionTips: [
+		"A2UI — wire the remove button via actions[], NOT onRemove: { \"id\": \"attachment_file_1\", \"type\": \"attachment-file\", \"fileName\": \"notes.txt\", \"actions\": [\"remove_notes_txt\"] } and { \"id\": \"remove_notes_txt\", \"type\": \"remove-file\" } in ui.actions. Never set onRemove or fileIcon directly in A2UI JSON.",
+		"A2UI — omit actions[] entirely for read-only display (no remove button is rendered).",
+		"A2UI — isLoading, disabled, separator, removeButtonLabel, fileType, fileSize all work in A2UI JSON exactly as in TSX.",
 		"Pass AttachmentFile as a child of InputArea to show selected files above the textarea.",
-		"Always provide onRemove so users can deselect files; omit it only for read-only display.",
+		"Always provide onRemove (TSX) / actions[] (A2UI) so users can deselect files; omit only for read-only display.",
 		"Set disabled during upload or processing to prevent premature removal.",
 		"Use fileType and fileSize together for full file metadata — either can be omitted independently.",
-		"Map an array of selected files to AttachmentFile chips inside a FlexContainer with flexDirection=\"column\" and gap for a file list.",
-		"Use fileIcon with an image-specific Icon (e.g. name=\"image\") to visually distinguish image attachments from documents.",
-		"Use isLoading during upload instead of passing fileIcon={<Loader>} externally — it natively swaps the remove button for a spinner and disables removal until the upload completes.",
+		"Map an array of selected files to AttachmentFile chips inside a Box variant=\"vertical\" with gap for a file list.",
+		"Use isLoading during upload — it natively swaps the remove button for a spinner and disables removal until complete.",
 		"Long file names truncate automatically and reveal the full text via a tooltip on hover; long fileType values truncate but do not show a tooltip.",
-		"Override the separator prop when the design uses a different delimiter between fileType and fileSize (e.g. separator=\"/\" or separator=\"|\")."
+		"Override separator when the design uses a different delimiter between fileType and fileSize (e.g. separator=\"/\" or separator=\"|\").",
+		"Visual signature for design intake: horizontal chip ~40-48 px tall, file-copy icon on the left, bold filename (possibly truncated), optional 12-13 px metadata text below, × close button on the right.",
+		"Figma INSTANCE resolution: component set name \"AttachmentFile\" or \"Attachment File\" → A2UI type \"attachment-file\". Map Figma component properties: fileName caption → fileName, type badge → fileType, size text → fileSize."
 	]
 };
 //#endregion

package/ai/schemas/components/Avatar.cjs

@@ -1 +1 @@
-var e={component:{name:`Avatar`,import:`import { Avatar } from 'gd-design-library'`,description:`User avatar component for displaying profile pictures, initials, or icons with support for badges, fallback content, and various size options. A2UI SPEC: all props are top-level fields — do NOT use "attributes" or "fallbackComponent". Use "label" or "value" for initials text. Use "size" or "sizeVariant" for size. For an icon inside the avatar, set top-level "icon" plus optional "fill" or "fillSvg"; the renderer maps that to Avatar fallback content internally. For a status badge ON the avatar use withBadge + badgeColor directly on this component — do NOT place a separate "badge" or sibling "icon" next to the avatar. Prefer theme color tokens before raw CSS/hex. Example: {"type":"avatar","icon":"star","size":"xl","backgroundColor":"#cfaaa7","fill":"#646464"}.`,a2uiName:`avatar`,category:`Content & Media`,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:`A2UI: initials text shown as fallback (e.g. "JD"). Use label OR value — do NOT use "fallbackComponent".`},{name:`src`,type:`string`,description:`Image URL. Top-level field in A2UI spec.`},{name:`alt`,type:`string`,description:`Image alt text. Top-level field in A2UI spec.`},{name:`size`,type:`string`,description:`A2UI size field (preferred). Alias: "sizeVariant" also accepted.`,enum:[`xs`,`sm`,`md`,`lg`,`xl`]},{name:`withBadge`,type:`boolean`,description:`Show status dot badge ON the avatar. Top-level field.`},{name:`badgeColor`,type:`string`,description:`Badge background color. Top-level field. Prefer theme color token paths (e.g. "bg.fill.success.primary.default", "bg.fill.error.primary.default"). Use raw CSS/hex only when no theme token fits.`},{name:`icon`,type:`string`,description:`A2UI-only avatar fallback icon name (for example "star" or "user"). This renders inside the avatar itself via the existing fallbackComponent behavior.`},{name:`fill`,type:`string`,description:`Avatar fallback icon fill color. Prefer theme icon token paths (e.g. "icon.default", "icon.warning"). Use raw CSS/hex only when no theme token fits.`},{name:`fillSvg`,type:`string`,description:`Optional uniform SVG fill for the avatar fallback icon. Overrides fill when both are set.`},{name:`backgroundColor`,type:`string`,description:`Background color for initials fallback. Top-level field. Prefer theme color token paths (e.g. "bg.fill.secondary", "bg.fill.info.primary.default"). Use raw CSS/hex only when no theme token fits.`},{name:`actions`,type:`string[]`,description:`Action IDs from ui.actions to trigger when the avatar is clicked.`},{name:`styling`,type:`object`,description:`CSS style overrides for the avatar`}],quickStart:{basic:`<Avatar src="/user-photo.jpg" alt="John Doe" />`,initials:`<Avatar fallbackComponent="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" />`,online:`<Avatar src="/avatar.png" alt="User" withBadge={isOnline} badgeColor={isOnline ? "bg.fill.success.primary.default" : "bg.fill.error.primary.default"} />`},commonPatterns:{"User Profile":{code:`<Avatar src={user.photo} alt={user.name} sizeVariant="lg" onClick={handleProfileClick} />`,useCase:`User profile pages and account settings`},"Comment Author":{code:`<Avatar src={comment.author.photo} alt={comment.author.name} sizeVariant="sm" />`,useCase:`Comment sections and discussion threads`},"Online Status":{code:`<Avatar src={user.photo} alt={user.name} withBadge badgeColor={user.isOnline ? "bg.fill.success.primary.default" : "bg.fill.error.primary.default"} />`,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" />`,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" />`,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 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 src="/avatar.png" alt="User" withBadge={isOnline} badgeColor={isOnline ? "bg.fill.success.primary.default" : "bg.fill.error.primary.default"} />`],troubleshooting:{"Image not loading":`Check src URL and provide fallbackComponent for graceful degradation`,"Badge not showing":`Ensure withBadge prop is set to true and badgeColor is provided`,"Icon fallback not showing":`Set icon to a valid name in A2UI, or provide fallbackComponent directly when using Avatar in React code`,"Size not applying":`Use sizeVariant prop instead of width/height for consistent sizing`,"Accessibility issues":`Always provide meaningful alt text for screen readers`,"Fallback not working":`Check fallbackComponent prop and backgroundColor for visibility`},bestPractices:[`Always provide meaningful alt text for accessibility`,`Use sizeVariant for consistent sizing across your application`,`Provide fallbackComponent with initials or icon when image fails to load`,`Use withBadge to indicate online status or notifications`,`Set backgroundColor for fallback content visibility`,`Use onClick handler for interactive avatars that navigate to profiles`,`Combine with Typography for user name display in consistent layouts`,`Use consistent sizeVariant across similar UI contexts`,`Apply proper ARIA labels for screen reader accessibility`,`Use high-contrast backgroundColor for better visibility of fallback content`]},compositionTips:[`Use avatar for identities such as profile chips, assignees, authors, and participants.`,`Use label for initials fallback text when src is unavailable.`,`Use icon, fill, and fillSvg when the avatar should fall back to an icon instead of initials.`,`Use withBadge and badgeColor for presence or status indicators.`,`Wire interactive avatars through actions[] instead of raw onClick handlers.`]};exports.default=e;
+var e={component:{name:`Avatar`,import:`import { Avatar } from 'gd-design-library'`,description:`User avatar component for displaying profile pictures, initials, or icons with support for badges, fallback content, and various size options. A2UI SPEC: all props are top-level fields — do NOT use "attributes" or "fallbackComponent". Use "label" or "value" for initials text. Use "size" or "sizeVariant" for size. For an icon inside the avatar, set top-level "icon" plus optional "fill" or "fillSvg"; the renderer maps that to Avatar fallback content internally. For a status badge ON the avatar use withBadge + badgeColor directly on this component — do NOT place a separate "badge" or sibling "icon" next to the avatar. Prefer theme color tokens before raw CSS/hex. Example: {"type":"avatar","icon":"star","size":"xl","backgroundColor":"#cfaaa7","fill":"#646464"}.`,a2uiName:`avatar`,category:`Content & Media`,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:`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`,type:`string`,description:`Image URL. Top-level field in A2UI spec.`},{name:`alt`,type:`string`,description:`Image alt text. Top-level field in A2UI spec.`},{name:`size`,type:`string`,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`,`md`,`lg`,`xl`]},{name:`withBadge`,type:`boolean`,description:`Show status dot badge ON the avatar. Top-level field.`},{name:`badgeColor`,type:`string`,description:`Badge background color. Top-level field. Prefer theme color token paths (e.g. "bg.fill.success.primary.default", "bg.fill.error.primary.default"). Use raw CSS/hex only when no theme token fits.`},{name:`icon`,type:`string`,description:`A2UI-only avatar fallback icon name (for example "star" or "user"). This renders inside the avatar itself via the existing fallbackComponent behavior.`},{name:`fill`,type:`string`,description:`Avatar fallback icon fill color. Prefer theme icon token paths (e.g. "icon.default", "icon.warning"). Use raw CSS/hex only when no theme token fits.`},{name:`fillSvg`,type:`string`,description:`Optional uniform SVG fill for the avatar fallback icon. Overrides fill when both are set.`},{name:`backgroundColor`,type:`string`,description:`Background color for initials fallback. Top-level field. Prefer theme color token paths (e.g. "bg.fill.secondary", "bg.fill.info.primary.default"). Use raw CSS/hex only when no theme token fits.`},{name:`actions`,type:`string[]`,description:`Action IDs from ui.actions to trigger when the avatar is clicked.`},{name:`styling`,type:`object`,description:`CSS style overrides for the avatar`}],quickStart:{basic:`<Avatar src="/user-photo.jpg" alt="John Doe" />`,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 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:{"User Profile":{code:`<Avatar src={user.photo} alt={user.name} sizeVariant="lg" onClick={handleProfileClick} />`,useCase:`User profile pages and account settings`},"Comment Author":{code:`<Avatar src={comment.author.photo} alt={comment.author.name} sizeVariant="sm" />`,useCase:`Comment sections and discussion threads`},"Online Status":{code:`<Avatar src={user.photo} alt={user.name} withBadge badgeColor={user.isOnline ? "bg.fill.success.primary.default" : "bg.fill.error.primary.default"} />`,useCase:`Chat interfaces and user lists with online status`},"Icon Fallback":{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 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 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 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:{"Image not loading":`Check src URL and provide fallbackComponent for graceful degradation`,"Badge not showing":`Ensure withBadge prop is set to true and badgeColor is provided`,"Icon fallback not showing":`Set icon to a valid name in A2UI, or provide fallbackComponent directly when using Avatar in React code`,"Size not applying":`Use sizeVariant prop instead of width/height for consistent sizing`,"Accessibility issues":`Always provide meaningful alt text for screen readers`,"Fallback not working":`Check fallbackComponent prop and backgroundColor for visibility`},bestPractices:[`Always provide meaningful alt text for accessibility`,`Use sizeVariant for consistent sizing across your application`,`Provide fallbackComponent with initials or icon when image fails to load`,`Use withBadge to indicate online status or notifications`,`Set backgroundColor for fallback content visibility`,`Use onClick handler for interactive avatars that navigate to profiles`,`Combine with Typography for user name display in consistent layouts`,`Use consistent sizeVariant across similar UI contexts`,`Apply proper ARIA labels for screen reader accessibility`,`Use high-contrast backgroundColor for better visibility of fallback content`]},compositionTips:[`Use avatar for identities such as profile chips, assignees, authors, and participants.`,`Use label for initials fallback text when src is unavailable.`,`Use icon, fill, and fillSvg when the avatar should fall back to an icon instead of initials.`,`Use withBadge and badgeColor for presence or status indicators.`,`Wire interactive avatars through actions[] instead of raw onClick handlers.`]};exports.default=e;

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

@@ -0,0 +1,71 @@
+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;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            enum: readonly ["xs", "sm", "md", "lg", "xl"];
+        })[];
+        quickStart: {
+            basic: string;
+            initials: string;
+            withBadge: string;
+            icon: string;
+            online: string;
+        };
+        commonPatterns: {
+            'User Profile': {
+                code: string;
+                useCase: string;
+            };
+            'Comment Author': {
+                code: string;
+                useCase: string;
+            };
+            'Online Status': {
+                code: string;
+                useCase: string;
+            };
+            'Icon Fallback': {
+                code: string;
+                useCase: string;
+            };
+            'Team Member': {
+                code: string;
+                useCase: string;
+            };
+        };
+        examples: string[];
+        troubleshooting: {
+            'Image not loading': string;
+            'Badge not showing': string;
+            'Icon fallback not showing': string;
+            'Size not applying': string;
+            'Accessibility issues': string;
+            'Fallback not working': string;
+        };
+        bestPractices: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;