gd-design-library 0.6.0 → 0.7.0

package/ai/codegen.d.ts

@@ -0,0 +1,10 @@
+export type AIIntent = 'login';
+export interface GenerateOptions {
+    componentName?: string;
+}
+/**
+ * Returns a TSX string for a classic Login page composed with gd-design-library components.
+ * The output is intentionally framework-agnostic TSX that can be pasted into a React project.
+ */
+export declare function generateLoginPageTSX(options?: GenerateOptions): string;
+export declare function generateUIFromIntent(intent: AIIntent, options?: GenerateOptions): string;

package/ai/codegen.js

@@ -0,0 +1,51 @@
+function n(e = {}) {
+  return `import React, { useState } from 'react';
+import { Form, Input, Button, Typography, FlexContainer, Column, Card, Link } from 'gd-design-library';
+
+export default function ${e.componentName || "LoginPage"}() {
+  const [form, setForm] = useState({ email: '', password: '', remember: false });
+
+  const handleSubmit = ({ formData }: any) => {
+    console.log('Login submit', formData);
+  };
+
+  return (
+    <FlexContainer alignItems="center" justifyContent="center" minHeight="100vh" padding="24px">
+      <Card width="360px" padding="24px">
+        <Column gap="16px">
+          <Typography as="h1" variant="h2">Sign in</Typography>
+          <Form onSubmit={handleSubmit}>
+            <Column gap="12px">
+              <Input variant="email" label="Email" name="email" placeholder="you@example.com" value={form.email} onChange={(e: any) => setForm({ ...form, email: e.target.value })} />
+              <Input variant="password" label="Password" name="password" placeholder="••••••••" value={form.password} onChange={(e: any) => setForm({ ...form, password: e.target.value })} />
+              <FlexContainer alignItems="center" justifyContent="space-between">
+                <FlexContainer alignItems="center" gap="8px">
+                  <Input variant="checkbox" name="remember" aria-label="Remember me" onChange={(e: any) => setForm({ ...form, remember: !!e.target?.checked })} />
+                  <Typography variant="small">Remember me</Typography>
+                </FlexContainer>
+                <Link href="#">Forgot password?</Link>
+              </FlexContainer>
+              <Button type="submit" fullWidth>Sign in</Button>
+            </Column>
+          </Form>
+          <Typography variant="small">
+            Don’t have an account? <Link href="#">Sign up</Link>
+          </Typography>
+        </Column>
+      </Card>
+    </FlexContainer>
+  );
+}
+`;
+}
+function t(e, a) {
+  switch (e) {
+    case "login":
+    default:
+      return n(a);
+  }
+}
+export {
+  n as generateLoginPageTSX,
+  t as generateUIFromIntent
+};

package/ai/index.d.ts

@@ -0,0 +1,3 @@
+export * from './prompts';
+export * from './codegen';
+export * from './schemas/components';

package/ai/prompts.d.ts

@@ -0,0 +1,14 @@
+/**
+ * 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): string;
+/**
+ * Legacy/basic builder retained for compatibility.
+ */
+export declare function buildGDLibraryPrompt(userRequest: string): string;
+export declare const defaultAIPromptIntro: string;

package/ai/prompts.js

@@ -0,0 +1,23 @@
+import { aiComponentsSchema as n, aiPromptGuidelines as i } from "./schemas/components.js";
+const a = (() => {
+  const o = n.components.map((e) => `- ${e.name}: ${e.description}`).join(`
+`), r = n.compositionTips.map((e) => `- ${e}`).join(`
+`), t = i.map((e) => `- ${e}`).join(`
+`);
+  return ['You are Claude Code acting as a senior React UI engineer. Your job is to output production-grade TSX using the GridKit UI package named "gd-design-library".', "", "Hard requirements:", "- Output ONLY valid TSX/TypeScript React code. Do NOT include markdown fences or extra commentary.", "- Import UI primitives exclusively from 'gd-design-library' (e.g., import { Form, Input, Button, Typography, FlexContainer, Column, Card, Link } from 'gd-design-library').", "- Prefer composition using ALL 46 available components over custom CSS or HTML elements.", "- Always use the appropriate component from the library: FlexContainer, Column, Row, Search, Select, ChatContainer, ChatBubble, Typography, Input, Button, Link, Card, Icon, Image, Breadcrumbs, InlineNotification, InputFile, Form, Label, List, Loader, Modal, Portal, Scroll, Separator, Skeleton, Slider, Snackbar, SnackbarManager, Switch, Toggle, Textarea, Tooltip, Wrapper, Accordion, Avatar, Carousel, ContentCarousel, Counter, Tabs, Stepper, Price, ProgressBar, Rating, DragAndDropFiles, RadioGroup.", "- Ensure accessibility: use Label components for all form controls, aria attributes, keyboard focus order, and sensible defaults.", "- Keep code self-contained as a single React component file where feasible.", "", "Available components (all 46 must be considered for composition):", o, "", "Composition tips:", r, "", "General guidelines:", t, "", "Output rules:", "- No markdown backticks.", "- No external CSS files unless strictly necessary; prefer component props and layout primitives.", "- Keep imports minimal and from one source: gd-design-library.", "- If state is needed, use React useState inside the component.", "- Handle forms with <Form> and Input variants (email, password, checkbox, etc.).", "- Add basic error placeholders and comments where integration points are expected (e.g., TODO: submit handler)."].join(`
+`);
+})();
+function s(o) {
+  return [a, "", "Task:", o].join(`
+`);
+}
+function p(o) {
+  return s(o);
+}
+const c = "Use gd-design-library for all UI components. Utilize the full range of 46 components including layout primitives (FlexContainer, Column, Grid, Stack), form controls (Form, Input, Select, Checkbox, Radio, Toggle, Label), feedback components (Alert, InlineNotification, Toast, Tooltip), navigation (Link, Tabs, Breadcrumb, Pagination), display components (Card, Table, List, Avatar, Badge, Icon), interactive elements (Button, ButtonGroup, Dropdown, Modal, Drawer, Popover), data visualization (ProgressBar, Spinner, Skeleton), and typography (Typography, Heading). Prefer composition using these primitives over custom CSS. Always ensure proper accessibility with Label components for form controls.";
+export {
+  a as CLAUDE_GRIDKIT_SYSTEM_PROMPT,
+  s as buildClaudeSystemPrompt,
+  p as buildGDLibraryPrompt,
+  c as defaultAIPromptIntro
+};

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

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

package/ai/schemas/components/Accordion.js

@@ -0,0 +1,37 @@
+const e = {
+  name: "Accordion",
+  import: "import { Accordion } from 'gd-design-library'",
+  description: "Expandable/collapsible content panels component for organizing and displaying hierarchical information with support for single or multiple expanded items, controlled and uncontrolled modes.",
+  props: [{
+    name: "value",
+    type: "string[]",
+    description: "Controls which accordion items are expanded (controlled mode)",
+    default: []
+  }, {
+    name: "defaultValue",
+    type: "string[]",
+    description: "Sets initially expanded items (uncontrolled mode)",
+    default: []
+  }, {
+    name: "onChange",
+    type: "(value: string[]) => void",
+    description: "Callback when expanded items change"
+  }, {
+    name: "allowMultipleExpand",
+    type: "boolean",
+    description: "Allows multiple items to be expanded simultaneously",
+    default: !1
+  }, {
+    name: "children",
+    type: "ReactNode",
+    description: "Accordion items to be rendered, typically AccordionItem components",
+    required: !0
+  }],
+  examples: ['<Accordion defaultValue={["item1"]} allowMultipleExpand={false}><AccordionItem value="item1" title="Section 1">Content 1</AccordionItem></Accordion>', "<Accordion value={expandedItems} onChange={setExpandedItems} allowMultipleExpand={true}>{accordionItems}</Accordion>", '<Accordion><AccordionItem value="faq1" title="Question 1">Answer 1</AccordionItem><AccordionItem value="faq2" title="Question 2">Answer 2</AccordionItem></Accordion>']
+}, o = ["Use controlled value for syncing expanded state with URL or external state.", "Enable allowMultipleExpand for settings panels where multiple sections can be open.", "Keep titles concise and descriptive; use custom views for rich headers.", "Defer heavy content rendering until expanded for performance.", 'Use Accordion for FAQ sections with defaultValue={["first-question"]} to show the most important question expanded.', "Apply Accordion allowMultipleExpand={true} for content where users might want to compare multiple sections.", "Set Accordion value with controlled mode when expansion state needs to be managed externally or synced with URL.", "Use Accordion onChange to track analytics events for which sections users are most interested in.", "Apply Accordion with single expanded item (allowMultipleExpand={false}) for step-by-step guides or wizards.", "Combine Accordion with Icon components in item titles for visual category indicators.", "Use Accordion defaultValue with multiple items for showing important sections expanded on page load.", "Apply Accordion within Card components for organized settings or preference sections.", "Set Accordion with consistent spacing between items using Column or gap styles.", "Use Accordion for progressive disclosure of complex forms or detailed information.", "Apply Accordion onChange with localStorage to persist user expansion preferences.", "Combine Accordion with InlineNotification inside items for contextual alerts or warnings.", "Use Accordion for nested categorization with Accordion components inside AccordionItem content.", "Apply Accordion with keyboard navigation support (arrow keys) for accessibility.", "Set Accordion value={[]} to programmatically collapse all items when needed.", "Use Accordion with loading skeletons inside items while fetching content.", "Apply Accordion allowMultipleExpand={false} for mobile interfaces to save screen space.", "Combine Accordion with search/filter to highlight and expand matching sections.", "Use Accordion for documentation sections with code examples in expandable items.", "Apply Accordion with smooth height animations for polished expand/collapse transitions.", "Set Accordion with aria-expanded attributes on items for screen reader compatibility.", "Use Accordion in sidebars for collapsible navigation menu categories.", "Apply Accordion with consistent chevron or plus/minus icons for expand indicators.", "Combine Accordion with Badge components in titles to show item counts or status.", "Use Accordion defaultValue based on user role or permissions for personalized experience.", "Apply Accordion with max-height and scroll inside items for very long content.", "Set Accordion onChange to update URL hash for deep-linkable expanded sections.", "Use Accordion for comparison tables where each item contains detailed specifications.", "Apply Accordion with disabled items for locked or premium content sections.", "Combine Accordion with Form components inside items for multi-step form workflows.", "Use Accordion value with useEffect to expand specific items based on route or query params.", "Apply Accordion with consistent title styling using Typography components.", "Set Accordion with print styles to show all content expanded when printing.", "Use Accordion for changelog or release notes with versions as expandable items.", "Apply Accordion allowMultipleExpand based on viewport size (true on desktop, false on mobile).", "Combine Accordion with Tooltip on item titles for additional context without expanding.", "Use Accordion for product features list with detailed descriptions in expandable content.", "Apply Accordion with focus management to move focus to content when item expands.", "Set Accordion with custom expand/collapse icons via AccordionItem props.", "Use Accordion in help centers with categories and subcategories as nested accordions.", "Apply Accordion onChange to trigger animations or lazy-load content when items expand.", "Combine Accordion with tabs for multi-dimensional content organization.", "Use Accordion for terms and conditions with sections as expandable items.", "Apply Accordion with highlighting or scrollIntoView when expanding items programmatically.", "Set Accordion with responsive layout adjusting item padding and font size on mobile.", "Use Accordion for data tables with expandable rows showing detailed information.", "Apply Accordion with consistent animation duration across all expanding/collapsing items.", "Combine Accordion with router integration to maintain expansion state during navigation.", "Use Accordion for configuration panels with grouped settings in expandable sections."], n = {
+  component: e,
+  compositionTips: o
+};
+export {
+  n as default
+};

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

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

package/ai/schemas/components/Avatar.js

@@ -0,0 +1,67 @@
+const e = {
+  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. Ideal for user profiles, comment sections, and navigation headers.",
+  props: [{
+    name: "src",
+    type: "string",
+    description: "The URL of the image to display in the avatar. If no src is provided or the image fails to load, the fallback content will be rendered"
+  }, {
+    name: "alt",
+    type: "string",
+    description: "Alternative text for the avatar image, important for accessibility. This will be used as the aria-label for the avatar",
+    default: ""
+  }, {
+    name: "sizeVariant",
+    type: "SizeVariant",
+    description: "Defines the predefined size of the avatar",
+    default: "md",
+    enum: ["xs", "sm", "md", "lg", "xl", "xxl"]
+  }, {
+    name: "withBadge",
+    type: "boolean",
+    description: "If true, a small badge will be displayed at the top-right corner of the avatar, often indicating online status or notifications",
+    default: !1
+  }, {
+    name: "badgeColor",
+    type: "string",
+    description: "The color of the badge when withBadge is true. Accepts CSS color values (e.g., hex, named colors). Also supports theme colors (e.g. primary.default)",
+    default: "#34A853"
+  }, {
+    name: "backgroundColor",
+    type: "string",
+    description: "The background color of the avatar when no image is loaded, or when the image fails. Also used for the fallback content container. Accepts CSS color values (e.g., hex, named colors) and supports theme colors (e.g. primary.default)"
+  }, {
+    name: "fallbackComponent",
+    type: "ReactNode",
+    description: "Content to display when src is not provided or the image fails to load. Can be a string, number, or any ReactNode (e.g., an icon, initials, or a custom component)"
+  }, {
+    name: "onClick",
+    type: "() => void",
+    description: "Callback function triggered when the avatar is clicked"
+  }, {
+    name: "id",
+    type: "string",
+    description: "A unique identifier for the avatar element"
+  }, {
+    name: "className",
+    type: "string",
+    description: "Additional CSS class names to apply to the avatar component"
+  }, {
+    name: "placeholder",
+    type: "string",
+    description: "Passed to the internal Image component"
+  }, {
+    name: "styles",
+    type: "CSSObject",
+    description: "Custom CSS-in-JS styles to apply to the top-level container of the Avatar",
+    default: {}
+  }],
+  examples: ['<Avatar src="/user-photo.jpg" alt="John Doe" sizeVariant="lg" />', '<Avatar fallbackComponent="JD" backgroundColor="#6366F1" sizeVariant="md" onClick={handleProfileClick} />', '<Avatar src={userImage} alt={userName} withBadge badgeColor="#34A853" sizeVariant="sm" />', '<Avatar fallbackComponent={<Icon name="user" />} backgroundColor="primary.default" sizeVariant="xl" />', '<Avatar src="/avatar.png" alt="User" withBadge={isOnline} badgeColor={isOnline ? "#34A853" : "#EA4335"} />']
+}, a = ["Use meaningful alt text or aria-labels for accessibility when using avatars as buttons.", "Show withBadge to indicate online status; customize badgeColor for different states.", "Provide fallbackComponent with initials or an icon when images fail to load.", "Use size variants consistently across lists, headers, and cards for uniformity.", "Use Avatar with src prop for user profile pictures ensuring proper alt text for accessibility.", 'Apply Avatar sizeVariant="xs" or "sm" for compact UI elements like comment threads or user lists.', 'Set Avatar sizeVariant="lg" or "xl" for profile pages and user detail views.', "Use Avatar fallbackComponent with user initials when profile image is unavailable.", 'Apply Avatar withBadge={true} and badgeColor="#34A853" to indicate online status.', "Combine Avatar with Typography for user name display in consistent layouts.", "Use Avatar backgroundColor with theme colors for consistent fallback appearance.", 'Apply Avatar fallbackComponent with Icon name="user" for anonymous or guest users.', "Set Avatar onClick handler for navigating to user profiles or opening user menus.", "Use Avatar in ChatContainer headers or message lists for conversation participants.", "Apply Avatar with consistent sizeVariant across similar UI contexts for visual harmony.", "Combine multiple Avatar components with negative margins for overlapping group avatars.", "Use Avatar withBadge and different badgeColor values for various status indicators (online, away, busy).", "Apply Avatar in Card components for user cards or team member displays.", "Set Avatar with Tooltip showing user name or role on hover for additional context.", "Use Avatar fallbackComponent with first letters of first and last name for professional appearance.", "Apply Avatar in navigation headers with dropdown menus for user account access.", "Combine Avatar with Badge component nearby for notification counts or user levels.", 'Use Avatar sizeVariant="md" as default for most UI contexts for optimal visibility.', "Apply Avatar with border styles via className for highlighted or selected users.", "Set Avatar with loading skeleton while user data is being fetched.", "Use Avatar in Select options with renderOption for user selection dropdowns.", "Apply Avatar placeholder prop for loading state text while image loads.", "Combine Avatar with presence indicators using withBadge for real-time collaboration.", "Use Avatar with consistent aspect ratio (1:1) maintained across all size variants.", "Apply Avatar in List items for user directories or contact lists.", "Set Avatar with error handling to gracefully show fallback when image fails.", "Use Avatar backgroundColor with user-specific colors for unique identification.", "Apply Avatar with responsive sizeVariant adjusting based on viewport size.", "Combine Avatar with user role badges or verification checkmarks for status display.", 'Use Avatar in comment sections with sizeVariant="sm" for space-efficient layouts.', "Apply Avatar with animation classes for smooth entrance effects in user lists.", "Set Avatar with high-contrast backgroundColor for better visibility of fallback content.", "Use Avatar in Table rows for user management interfaces or team rosters.", "Apply Avatar with consistent margins/padding for aligned layouts in forms.", "Combine Avatar with FlexContainer for user info cards with proper spacing.", "Use Avatar fallbackComponent with generated avatars or identicons for unique visuals.", "Apply Avatar in search results with user name and role information.", "Set Avatar with keyboard navigation support when onClick is provided.", "Use Avatar with lazy loading for performance in user-heavy interfaces.", "Apply Avatar withBadge={false} for static displays where status is not relevant.", "Combine Avatar with hover effects via styles or className for interactive feedback.", "Use Avatar in dropdown headers showing current logged-in user information.", "Apply Avatar with data attributes for analytics tracking of profile interactions.", "Set Avatar with proper ARIA labels for screen reader accessibility.", "Use Avatar in testimonials or review sections with customer photos.", "Apply Avatar with CDN image URLs for optimized delivery and caching.", "Combine Avatar with Modal for full-size profile photo viewing on click.", "Use Avatar consistently in all user-related UI elements for familiar user experience."], t = {
+  component: e,
+  compositionTips: a
+};
+export {
+  t as default
+};

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

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

package/ai/schemas/components/Breadcrumbs.js

@@ -0,0 +1,51 @@
+const e = {
+  name: "Breadcrumbs",
+  import: "import { Breadcrumbs } from 'gd-design-library'",
+  description: "Navigation component that displays the current page location within a hierarchical structure, providing users with a trail of links to navigate back to parent pages.",
+  props: [{
+    name: "items",
+    type: "Array<{label: string, href?: string, onClick?: () => void}>",
+    description: "Array of breadcrumb items to be displayed",
+    required: !0,
+    default: []
+  }, {
+    name: "separator",
+    type: "string | ReactNode",
+    description: "Custom separator between breadcrumb items",
+    default: "/"
+  }, {
+    name: "itemStart",
+    type: "ReactNode",
+    description: "Custom component to be displayed before the first item"
+  }, {
+    name: "itemEnd",
+    type: "ReactNode",
+    description: "Custom component to be displayed after the last item"
+  }, {
+    name: "separatorAfterLastItem",
+    type: "boolean",
+    description: "Controls whether to show separator after the last item",
+    default: !1
+  }, {
+    name: "bordered",
+    type: "boolean",
+    description: "Adds border styling to the breadcrumbs",
+    default: !1
+  }, {
+    name: "className",
+    type: "string",
+    description: "Additional CSS class name"
+  }, {
+    name: "ariaLabel",
+    type: "string",
+    description: "Accessibility label for the breadcrumbs navigation",
+    default: "breadcrumb"
+  }],
+  examples: ['<Breadcrumbs items={[{label: "Home", href: "/"}, {label: "Products", href: "/products"}, {label: "Detail"}]} />', '<Breadcrumbs items={breadcrumbItems} separator={<Icon name="chevron-right" />} bordered />', '<Breadcrumbs items={paths} itemStart={<Icon name="home" />} ariaLabel="Page navigation" />']
+}, t = ["Use Breadcrumbs at the top of content pages to show hierarchical navigation path.", "Set Breadcrumbs items with href for all parent pages and no href for current page.", "Apply Breadcrumbs separator with Icon component for visual separators like chevron-right.", "Use Breadcrumbs itemStart with home icon for clear navigation starting point.", "Set Breadcrumbs bordered={true} to visually separate from page content.", "Apply Breadcrumbs with consistent positioning across all pages for user orientation.", "Use Breadcrumbs items onClick instead of href for client-side routing in SPAs.", 'Combine Breadcrumbs with Typography variant="caption" for items in compact layouts.', "Apply Breadcrumbs ariaLabel with descriptive text for screen reader context.", "Use Breadcrumbs at the top of content pages to show hierarchical navigation path.", "Set Breadcrumbs items with href for all parent pages and no href for current page.", "Apply Breadcrumbs separator with Icon component for visual separators like chevron-right.", "Use Breadcrumbs itemStart with home icon for clear navigation starting point.", "Set Breadcrumbs bordered={true} to visually separate from page content.", "Apply Breadcrumbs with consistent positioning across all pages for user orientation.", "Use Breadcrumbs items onClick instead of href for client-side routing in SPAs.", 'Combine Breadcrumbs with Typography variant="caption" for items in compact layouts.', "Set Breadcrumbs separatorAfterLastItem={false} (default) for clean ending.", "Apply Breadcrumbs ariaLabel with descriptive text for screen reader context.", "Use Breadcrumbs itemEnd with status icons or badges for additional context.", "Keep Breadcrumbs items concise with truncation for long labels in deep hierarchies.", "Apply Breadcrumbs className for consistent styling across the application.", "Use Breadcrumbs with responsive design hiding middle items on mobile with ellipsis.", "Set Breadcrumbs items dynamically based on route parameters and page hierarchy.", "Apply Breadcrumbs with Link component styling for consistent link appearance.", 'Use Breadcrumbs separator=">" for simple text separators without icons.', "Combine Breadcrumbs with page title Typography for complete page context.", "Apply Breadcrumbs with schema.org structured data for SEO benefits.", "Use Breadcrumbs items with conditional rendering based on user permissions.", "Set Breadcrumbs with max-width and overflow for very long paths.", "Apply Breadcrumbs consistently below header and above main content.", "Use Breadcrumbs with tooltip on truncated items to show full path.", "Combine Breadcrumbs with router hooks to automatically generate items.", "Apply Breadcrumbs with keyboard navigation support for accessibility.", "Use Breadcrumbs items with icons for visual category identification.", "Set Breadcrumbs with appropriate font size using Typography for readability.", "Apply Breadcrumbs with home link as first item for consistent navigation.", "Use Breadcrumbs separator with custom spacing for better visual rhythm.", "Combine Breadcrumbs with loading state while fetching dynamic path data.", "Apply Breadcrumbs with proper contrast ratios for accessibility compliance.", "Use Breadcrumbs items array built from URL path segments for automation.", "Set Breadcrumbs with sticky positioning for long scrolling pages.", "Apply Breadcrumbs with breadcrumb microdata for search engine rich snippets.", "Use Breadcrumbs with last item as plain text (no href) to indicate current page.", "Combine Breadcrumbs with animation for smooth transitions between pages.", "Apply Breadcrumbs with consistent separator style throughout the application.", "Use Breadcrumbs with collapsible middle items for mobile-friendly navigation.", "Set Breadcrumbs items with proper capitalization for professional appearance.", "Apply Breadcrumbs with hover states on clickable items for better UX."], r = {
+  component: e,
+  compositionTips: t
+};
+export {
+  r as default
+};

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

@@ -0,0 +1,60 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        description: string;
+        props: ({
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+            enum: string[];
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: string;
+            enum?: undefined;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default?: undefined;
+            enum?: undefined;
+            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: {};
+            enum?: undefined;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default: number;
+            enum?: undefined;
+            required?: undefined;
+        })[];
+        examples: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;

package/ai/schemas/components/Button.js

@@ -0,0 +1,92 @@
+const t = {
+  name: "Button",
+  import: "import { Button } from 'gd-design-library'",
+  description: "Interactive button component with multiple style variants, colors, and icon support for triggering actions.",
+  props: [{
+    name: "type",
+    type: "ButtonTypes",
+    description: "HTML button type attribute (submit, button, reset)",
+    default: "ButtonTypes.Button",
+    enum: ["submit", "button", "reset"]
+  }, {
+    name: "color",
+    type: "ButtonColorVariant",
+    description: "Color variant of the button",
+    default: "ButtonColorVariant.Primary",
+    enum: ["primary", "secondary", "success", "warning", "error", "info"]
+  }, {
+    name: "variant",
+    type: "ButtonVariant",
+    description: "Visual style variant of the button",
+    default: "ButtonVariant.Contained",
+    enum: ["contained", "outlined", "text"]
+  }, {
+    name: "role",
+    type: "ButtonRole",
+    description: "ARIA role for the button element",
+    default: "ButtonRole.Button",
+    enum: ["button", "link", "menuitem", "tab"]
+  }, {
+    name: "ariaLabel",
+    type: "ButtonAriaLabel",
+    description: "Accessibility label for screen readers",
+    default: "ButtonAriaLabel.Button"
+  }, {
+    name: "onClick",
+    type: "(event: MouseEvent<HTMLButtonElement>) => void",
+    description: "Click event handler triggered when button is clicked"
+  }, {
+    name: "disabled",
+    type: "boolean",
+    description: "Disables the button preventing interaction",
+    default: !1
+  }, {
+    name: "isIcon",
+    type: "boolean",
+    description: "Renders button in icon-only mode with equal width and height",
+    default: !1
+  }, {
+    name: "iconStart",
+    type: "ReactNode",
+    description: "Icon element to display at the start of the button content"
+  }, {
+    name: "iconEnd",
+    type: "ReactNode",
+    description: "Icon element to display at the end of the button content"
+  }, {
+    name: "children",
+    type: "ReactNode",
+    description: "Button content, typically text or elements",
+    required: !0
+  }, {
+    name: "styles",
+    type: "BoxCssComponentProps<HTMLButtonElement>",
+    description: "Custom styles object for the button",
+    default: {}
+  }, {
+    name: "className",
+    type: "string | string[]",
+    description: "Custom CSS class names to apply to the button"
+  }, {
+    name: "fullWidth",
+    type: "boolean",
+    description: "Makes button take full width of its container",
+    default: !1
+  }, {
+    name: "tabIndex",
+    type: "number",
+    description: "Tab index for keyboard navigation order",
+    default: 0
+  }, {
+    name: "ariaPressed",
+    type: "boolean",
+    description: "Indicates the pressed state for toggle buttons"
+  }],
+  examples: ['<Button variant="contained" color="primary" onClick={handleSubmit}>Submit</Button>', '<Button variant="outlined" iconStart={<Icon name="add" />}>Add Item</Button>', '<Button variant="text" color="error" onClick={handleCancel}>Cancel</Button>', '<Button isIcon aria-label="Settings"><Icon name="settings" /></Button>', '<Button type="submit" fullWidth disabled={isSubmitting}>Save Changes</Button>']
+}, n = ['Use Button variant="contained" for primary actions and variant="outlined" for secondary actions.', "Apply Button fullWidth in forms on mobile views for better touch targets.", "Set Button disabled={true} during Input validation or async form submission.", "Use Button iconStart with Input adornmentEnd for inline actions like password visibility toggle.", 'Apply Button color="error" for destructive actions paired with confirmation Input fields.', 'Use Button variant="text" for tertiary actions like "Cancel" or "Skip" in forms.', "Group Input fields with Button using FlexContainer for inline form layouts.", 'Set Button type="submit" for forms and type="button" for non-submitting actions.', "Use Button isIcon for compact icon-only actions within Input adornmentEnd.", "Apply consistent Button color variants matching Input validation states (error, success).", "Use Button with loading state indicator when processing Input form data.", "Pair Input required fields with Button disabled until all validations pass.", "Apply Button ariaPressed for toggle buttons controlling Input field visibility or state.", "Use Button iconEnd for dropdown indicators in custom Input select implementations.", "Set Button tabIndex to control focus flow from Input fields to action buttons.", 'Apply Button variant="outlined" for reset actions clearing Input field values.', "Use multiple Button components with different variants for primary/secondary form actions.", "Combine Input onChange validation with Button disabled state for real-time form validation.", "Apply Button fullWidth={false} with specific width for consistent form button sizing.", 'Use Button role="link" styled as button for navigation after Input form completion.', "Set Button ariaLabel for icon-only buttons used with Input fields for accessibility.", "Apply Button styles prop to match custom Input field styling in themed forms.", "Use Button with preventDefault in onClick when handling Input form submission manually."], e = {
+  component: t,
+  compositionTips: n
+};
+export {
+  e as default
+};

package/ai/schemas/components/Card.d.ts

@@ -0,0 +1,46 @@
+declare const _default: {
+    component: {
+        name: string;
+        import: string;
+        description: string;
+        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;
+            default: string;
+            enum?: undefined;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            default?: undefined;
+            enum?: undefined;
+            required?: undefined;
+        } | {
+            name: string;
+            type: string;
+            description: string;
+            required: boolean;
+            default?: undefined;
+            enum?: undefined;
+        })[];
+        examples: string[];
+    };
+    compositionTips: string[];
+};
+export default _default;