gd-design-library 0.8.0 → 1.0.0

package/ai/README.md

@@ -14,7 +14,7 @@ Core rule (must follow):
 
 Single-source import (enforced):
 
-- Correct: `import { Form, Input, Button, Typography, FlexContainer, Column, Card, Link } from 'gd-design-library';`
+- Correct: `import { Form, Input, Button, Typography, Box, FlexContainer, Column, Card, Link } from 'gd-design-library';`
 - Incorrect: `import Button from 'some-ui-lib';`, `import { Box } from '@mui/material';`, or using `./styles.css` for layout spacing.
 
 How to use the AI helpers
@@ -48,12 +48,12 @@ Practical generation tips (what the model should output)
 
 API guardrails from the schema/prompt (must-follow)
 
-- Row/Column/Card.Row/Card.Column: use `isWrap` (boolean), NOT `wrap`.
+- Row/Column/Card.Row/Card.Column: use `isWrap` (boolean), NOT `wrap`. **IMPORTANT: `isWrap` defaults to `true`**, use `isWrap={false}` to prevent wrapping.
+- Icon: **ONLY use icon names from the available list**: cross, success, error, warning, info, dot, check, arrowDown, arrowRight, arrowLeft, arrowForward, keyboardArrowDown, keyboardArrowUp, mobileMenu, home, slash, localShipping, favorite, favoriteOutlined, shoppingBag, paymentCard, accountCircle, portrait, deleteOutlined, minus, plus, edit, search, filter, ruler, attachment, upload, folder, folderOpen, contentCopy, fileCopy, eye, volumeUp, send, chat, chatBubble, phone, processing, wifiTethering, star, starOutlined, thumbUp, thumbDown, thumbUpFilled, thumbDownFilled, errorOutline. Do NOT use icons not in this list (e.g., no "settings", "close", "add", "info" icons).
 - Image and Card.Image: `width` and `height` props are numbers only (e.g., `width={96}`), not strings like `"96px"`.
 - Card.Title and other Card subcomponents: `sizeVariant` only accepts `CardSizeVariant.Default` or `CardSizeVariant.Sm`.
 - Counter and Card.Counter: use `initial` (not `value`) for the starting quantity; use `onCounterChange` as the change handler.
-- Button `variant` must be one of `ButtonVariant.Contained | ButtonVariant.Outlined | ButtonVariant.Text | ButtonVariant.Inherit`.
-- Button `color` must be one of `ButtonColorVariant.Primary | ButtonColorVariant.Secondary`.
+- Button `variant` must be one of `ButtonVariant.Primary | ButtonVariant.Secondary | ButtonVariant.Tertiary | ButtonVariant.Outlined | ButtonVariant.Text | ButtonVariant.Inherit`.
 
 Component catalog
 
@@ -63,7 +63,7 @@ Component catalog
 - The list includes layout, forms, feedback, display, navigation, and theme provider/hook entries. Always consult these when unsure.
 - Quick categories (from schema v1.0.0):
   - Theme: useTheme.provider (ThemeProvider), useTheme.hook (useTheme)
-  - Layout: FlexContainer, Column, Row, Wrapper, Scroll, Separator
+  - Layout: Box, FlexContainer, Column, Row, Wrapper, Scroll, Separator
   - Forms: Form, Input, Select, Search, Label, Textarea, Switch, Toggle, RadioGroup, Slider, InputFile, DragAndDropFiles
   - Feedback & overlays: InlineNotification, Loader, Skeleton, Snackbar, SnackbarManager, Tooltip, Modal, Portal
   - Navigation & structure: Breadcrumbs, Tabs, Stepper, List, Accordion, Link
@@ -79,18 +79,92 @@ Patterns from stories (grounded tips)
   - Accessibility: use `ariaDescribedBy` to connect helper/error text; set `readOnly`/`disabled` as needed; `autoFocus` is available.
   - Limits and events: `maxLength` to constrain length; `onCustomResize` receives `{ height, width }` when user resizes.
 - Buttons:
-  - Variants: `ButtonVariant.Contained | Outlined | Text | Inherit`; Colors: `ButtonColorVariant.Primary | Secondary`. For icon-only buttons, set `isIcon`.
+  - Variants: `ButtonVariant.Primary | Secondary | Tertiary | Outlined | Text | Inherit`. For icon-only buttons, set `isIcon`.
+  - Rounded: Use `rounded` prop with values: `none | xs | sm | md | lg | xl | round`. Use `round` for circular icon buttons.
 - Forms and labels:
   - Always provide a visible label via the `label` prop or a separate `<Label htmlFor>` paired with the input `name/id`. Wrap controls with `<Form>` and handle submit via `onSubmit`.
 - Layout composition:
+  - Use `Box` as the foundational layout primitive with built-in flexbox support and interaction states. Box provides `variant` (horizontal/vertical), `isBordered`, `isHighlighted`, and `withShadowHover` props.
   - Use `FlexContainer` with `Column`/`Row` and `gap` to manage spacing. Avoid raw CSS margins except where necessary.
+  - Prefer `Box` over raw divs for all container needs to maintain design system consistency and leverage built-in theming.
+- Communication icons:
+  - Use `Icon name="chat"` for general chat or messaging functionality indicators
+  - Apply `Icon name="chatBubble"` for individual message bubbles or conversation threads
+  - Use `Icon name="phone"` for contact, calling, or communication features
+  - Combine with `ChatContainer` and `ChatBubble` components for complete chat interfaces
+
+- Complete icon catalog (50+ icons organized by category):
+  - Status & Feedback: `cross`, `success`, `error`, `warning`, `info`, `dot`, `check`, `errorOutline`
+  - Navigation & Direction: `arrowDown`, `arrowRight`, `arrowLeft`, `arrowForward`, `keyboardArrowDown`, `keyboardArrowUp`
+  - UI & Interface: `mobileMenu`, `home`, `slash`
+  - E-commerce & Shopping: `localShipping`, `favorite`, `favoriteOutlined`, `shoppingBag`, `paymentCard`
+  - User & Account: `accountCircle`, `portrait`
+  - Actions & Operations: `deleteOutlined`, `minus`, `plus`, `edit`, `search`, `filter`, `ruler`
+  - File & Document: `attachment`, `upload`, `folder`, `folderOpen`, `contentCopy`, `fileCopy`
+  - Media & Communication: `eye`, `volumeUp`, `send`, `chat`, `chatBubble`, `phone`
+  - System & Technical: `processing`, `wifiTethering`
+  - Rating & Feedback: `star`, `starOutlined`, `thumbUp`, `thumbDown`, `thumbUpFilled`, `thumbDownFilled`
+- TextArea component for multi-line text input:
+  - Use `Textarea` for detailed information like comments, descriptions, or messages
+  - Apply `dynamicHeightAdjustment={true}` for auto-growing text areas
+  - Set `maxLength` with character counter display for constrained input
+  - Use `resize="vertical"` for height adjustment while preventing horizontal resize
+  - Apply `minHeight` and `maxHeight` for size constraints with flexibility
+  - Combine with `Label` component using `htmlFor` for accessibility
+  - Use `rows` prop for initial visible height without CSS
+  - Apply `placeholder` with helpful instructions for user guidance
+  - Set `readOnly` with custom styles for display-only text
+  - Use with `Form` component and validation for required long-form fields
+  - Apply `onChange` with debouncing for auto-save features
+  - Combine with `InlineNotification` for validation messages
+  - Use `resize="none"` (default) for consistent layout
+  - Apply `autoFocus` for primary input fields
+  - Set with monospace font via `styles` for code or structured text
+  - Use `maxHeight` with overflow scrolling for bounded input areas
+  - Apply `dynamicHeightAdjustment` with `maxHeight` for auto-grow with limits
+  - Combine with word count display for word limits
+  - Use `disabled` during form submission
+  - Apply with consistent width or full-width for form alignment
+  - Set `onCustomResize` to track user resize preferences
+  - Use `defaultValue` for uncontrolled components
+  - Apply `value` with `onChange` for controlled components
+  - Combine with real-time preview for markdown or rich text editing
+  - Use `ariaDescribedBy` for screen reader accessibility
+  - Apply with border color changes based on validation state
+  - Set `resize="both"` for full user control in resizable panels
+  - Use with minimum `rows={3}` for better visual presence
+  - Apply with tab key handling for code editors
+  - Combine with floating label pattern for modern designs
+  - Use `maxLength` with preventOverflow logic
+  - Apply with line number display for code editing
+  - Set with spell check control for different content types
+  - Use in `Modal` for feedback forms
+  - Apply with paste event handling for content formatting
+  - Combine with emoji picker or formatting toolbar
+  - Use `rows` with `dynamicHeightAdjustment` for initial size with growth
+  - Apply with consistent padding and font size
+  - Use with keyboard shortcuts for power users
+  - Apply in `Card` components for comment sections
+  - Combine with mention/autocomplete functionality
+  - Use with draft saving to localStorage
+  - Apply `resize="horizontal"` rarely, only when width adjustment needed
+  - Set with custom scrollbar styling
+  - Use with focus and blur events for validation timing
+  - Apply with consistent error state styling
+  - Combine with file drop support
+  - Use `dynamicHeightAdjustment` for chat inputs and comments
+  - Constrain `maxHeight` to avoid screen takeover
+  - Prefer `resize="vertical"` for longer text areas
+  - Provide `ariaDescribedBy` for helper text or character counters
 - Cards and images:
+  - `Card` now accepts all `Box` props including `variant`, `isBordered`, `isHighlighted`, and `withShadowHover`.
+  - Use `Card withShadowHover` for interactive/clickable cards with elevation effect on hover. Combine with `backgroundColor="#fff"` and `cursor: "pointer"` for better visibility.
   - `Card.Title` uses `sizeVariant={CardSizeVariant.Default | CardSizeVariant.Sm}` only. `Card.Image` and `Image` require numeric `width`/`height` props.
 
 Example: Correct usage
 
 ```
-import { Form, Input, Button, Typography, FlexContainer, Column, Card, Link } from 'gd-design-library';
+import { Form, Input, Button, Typography, Box, FlexContainer, Column, Card, Link } from 'gd-design-library';
 
 export function LoginCard() {
   return (

package/ai/codegen.d.ts

@@ -1,10 +0,0 @@
-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/index.d.ts

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

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

@@ -3,6 +3,17 @@ declare const _default: {
         name: string;
         import: string;
         description: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
         props: ({
             name: string;
             type: string;
@@ -28,7 +39,35 @@ declare const _default: {
             required: boolean;
             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;
+            };
+        };
         examples: string[];
+        troubleshooting: {
+            'Items not expanding': string;
+            'Multiple items not expanding': string;
+            'State not updating': string;
+            'Accessibility issues': string;
+            'Performance issues': string;
+        };
+        bestPractices: string[];
     };
     compositionTips: string[];
 };

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

@@ -3,6 +3,17 @@ declare const _default: {
         name: string;
         import: string;
         description: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
         props: ({
             name: string;
             type: string;
@@ -34,7 +45,40 @@ declare const _default: {
             default: {};
             enum?: undefined;
         })[];
+        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;
+            };
+            'Team Member': {
+                code: string;
+                useCase: string;
+            };
+        };
         examples: string[];
+        troubleshooting: {
+            'Image not loading': string;
+            'Badge not showing': string;
+            'Size not applying': string;
+            'Accessibility issues': string;
+            'Fallback not working': string;
+        };
+        bestPractices: string[];
     };
     compositionTips: string[];
 };

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

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

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

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

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

@@ -3,6 +3,17 @@ declare const _default: {
         name: string;
         import: string;
         description: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
         props: ({
             name: string;
             type: string;
@@ -10,13 +21,6 @@ declare const _default: {
             default: string;
             enum: string[];
             required?: undefined;
-        } | {
-            name: string;
-            type: string;
-            description: string;
-            default: string;
-            enum?: undefined;
-            required?: undefined;
         } | {
             name: string;
             type: string;
@@ -53,7 +57,41 @@ declare const _default: {
             enum?: undefined;
             required?: undefined;
         })[];
+        quickStart: {
+            basic: string;
+            primary: string;
+            secondary: string;
+            rounded: string;
+            icon: string;
+            withIcon: string;
+        };
+        commonPatterns: {
+            'Primary Action': {
+                code: string;
+                useCase: string;
+            };
+            'Secondary Action': {
+                code: string;
+                useCase: string;
+            };
+            'Icon Button': {
+                code: string;
+                useCase: string;
+            };
+            'Form Submit': {
+                code: string;
+                useCase: string;
+            };
+        };
         examples: string[];
+        troubleshooting: {
+            'Button not clickable': string;
+            'Accessibility issues': string;
+            'Styling not applied': string;
+            'Form submission not working': string;
+            'Icon not displaying': string;
+        };
+        bestPractices: string[];
     };
     compositionTips: string[];
 };

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

@@ -3,6 +3,17 @@ declare const _default: {
         name: string;
         import: string;
         description: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
         props: ({
             name: string;
             type: string;
@@ -39,7 +50,52 @@ declare const _default: {
             default?: undefined;
             enum?: undefined;
         })[];
+        quickStart: {
+            basic: string;
+            bordered: string;
+            horizontal: string;
+            highlighted: string;
+            interactive: string;
+            combined: string;
+            scrollable: string;
+        };
+        commonPatterns: {
+            'E-commerce Product Card (Vertical)': {
+                code: string;
+                useCase: string;
+            };
+            'Horizontal Media Card': {
+                code: string;
+                useCase: string;
+            };
+            'Compact Interactive Card': {
+                code: string;
+                useCase: string;
+            };
+            'Simple Content Card': {
+                code: string;
+                useCase: string;
+            };
+            'Clickable Card with Shadow': {
+                code: string;
+                useCase: string;
+            };
+            'Combined Effects Card': {
+                code: string;
+                useCase: string;
+            };
+        };
         examples: string[];
+        troubleshooting: {
+            'Content overflowing': string;
+            'Card too wide on large screens': string;
+            'Inconsistent spacing': string;
+            'Horizontal layout not working': string;
+            'Border not showing': string;
+            'Shadow hover not visible': string;
+            'Hover effects not working': string;
+        };
+        bestPractices: string[];
     };
     compositionTips: string[];
 };

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

@@ -3,6 +3,17 @@ declare const _default: {
         name: string;
         import: string;
         description: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
         props: ({
             name: string;
             type: string;
@@ -32,7 +43,39 @@ declare const _default: {
             default?: undefined;
             required?: undefined;
         })[];
+        quickStart: {
+            question: string;
+            answer: string;
+            pending: string;
+            withActions: string;
+        };
+        commonPatterns: {
+            'User Question': {
+                code: string;
+                useCase: string;
+            };
+            'AI Response': {
+                code: string;
+                useCase: string;
+            };
+            'Typing Indicator': {
+                code: string;
+                useCase: string;
+            };
+            'System Message': {
+                code: string;
+                useCase: string;
+            };
+        };
         examples: string[];
+        troubleshooting: {
+            'Actions not showing': string;
+            'Status not updating': string;
+            'Styling issues': string;
+            'Accessibility issues': string;
+            'Content not displaying': string;
+        };
+        bestPractices: string[];
     };
     compositionTips: string[];
 };

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

@@ -3,6 +3,17 @@ declare const _default: {
         name: string;
         import: string;
         description: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
         props: ({
             name: string;
             type: string;

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

@@ -3,6 +3,17 @@ declare const _default: {
         name: string;
         import: string;
         description: string;
+        category: string;
+        complexity: string;
+        accessibility: string;
+        performance: string;
+        dependencies: string[];
+        peerDependencies: string[];
+        bundleSize: string;
+        browserSupport: string;
+        touchSupport: boolean;
+        keyboardSupport: boolean;
+        screenReaderSupport: boolean;
         props: ({
             name: string;
             type: string;