gd-design-library 0.8.0 → 0.8.1

package/ai/README.md

@@ -84,6 +84,76 @@ Patterns from stories (grounded tips)
   - 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 `FlexContainer` with `Column`/`Row` and `gap` to manage spacing. Avoid raw CSS margins except where necessary.
+- 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
+  - Set with wrap attribute control for long lines
+  - 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.Title` uses `sizeVariant={CardSizeVariant.Default | CardSizeVariant.Sm}` only. `Card.Image` and `Image` require numeric `width`/`height` props.
 

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/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;
@@ -53,7 +64,40 @@ declare const _default: {
             enum?: undefined;
             required?: undefined;
         })[];
+        quickStart: {
+            basic: string;
+            primary: string;
+            secondary: 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,40 @@ declare const _default: {
             default?: undefined;
             enum?: undefined;
         })[];
+        quickStart: {
+            basic: string;
+            bordered: string;
+            horizontal: string;
+            highlighted: string;
+            scrollable: string;
+        };
+        commonPatterns: {
+            'Content Card': {
+                code: string;
+                useCase: string;
+            };
+            'Media Card': {
+                code: string;
+                useCase: string;
+            };
+            'Form Card': {
+                code: string;
+                useCase: string;
+            };
+            'Product 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;
+        };
+        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;

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

@@ -3,44 +3,117 @@ 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;
             description: string;
             required: boolean;
-            default: never[];
+            default: string;
+            examples: string[];
+            recommended?: undefined;
+            accessibility?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
             required: boolean;
+            examples: string[];
             default?: undefined;
+            recommended?: undefined;
+            accessibility?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
+            default: string;
+            recommended: string;
             required?: undefined;
-            default?: undefined;
+            examples?: undefined;
+            accessibility?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
-            default: number;
+            default: string;
+            accessibility: string;
             required?: undefined;
+            examples?: undefined;
+            recommended?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
-            default: string;
+            examples: string[];
             required?: undefined;
+            default?: undefined;
+            recommended?: undefined;
+            accessibility?: undefined;
         } | {
             name: string;
             type: string;
             description: string;
-            default: {};
+            default: string;
+            examples: string[];
             required?: undefined;
+            recommended?: undefined;
+            accessibility?: undefined;
         })[];
+        quickStart: {
+            basic: string;
+            withNavigation: string;
+            itemByItem: string;
+            accessible: string;
+        };
+        commonPatterns: {
+            'Product Gallery': {
+                code: string;
+                useCase: string;
+            };
+            Testimonials: {
+                code: string;
+                useCase: string;
+            };
+            'Team Members': {
+                code: string;
+                useCase: string;
+            };
+            'Image Gallery': {
+                code: string;
+                useCase: string;
+            };
+        };
         examples: string[];
+        troubleshooting: {
+            'Items not rendering': string;
+            'Navigation not working': string;
+            'Accessibility issues': string;
+            'Performance issues': string;
+            'Touch gestures not working': string;
+        };
+        bestPractices: string[];
+        capabilities: {
+            'Navigation & Controls': string[];
+            'Content & Rendering': string[];
+            'Accessibility & UX': string[];
+            'Customization & Theming': string[];
+        };
+        useCases: {
+            'E-commerce & Shopping': string[];
+            'Content & Media': string[];
+            'Business & Professional': string[];
+            'Data & Analytics': string[];
+        };
     };
     compositionTips: string[];
 };

package/ai/schemas/components/Counter.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/DragAndDropFiles.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/FlexContainer.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/Form.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;