gd-design-library 0.7.0 → 0.7.2

package/llms.txt

@@ -0,0 +1,309 @@
+# GridKit Design System (gd-design-library) - AI Integration Documentation
+
+> 📖 **Quick Start**: For detailed usage instructions, see the [AI README](./ai/README.md)
+
+## Overview
+This document provides comprehensive information about the AI integration system for the GridKit Design System (gd-design-library). The AI system enables reliable generation of React/TSX components using only the design system's components, ensuring consistency, accessibility, and maintainability.
+
+## Core Philosophy
+- **Single Source of Truth**: Use ONLY components exported by `gd-design-library`
+- **Consistency**: Single design system source makes UI consistent and themable
+- **Accessibility**: Components provide sensible defaults and ARIA support
+- **Maintainability**: No ad-hoc CSS/HTML or third-party UI imports
+
+## AI System Architecture
+
+### Main Files
+- `./ai/index.ts` - Main export file
+- `./ai/prompts.ts` - Prompt building and system instructions
+- `./ai/codegen.ts` - Code generation utilities
+- `./ai/README.md` - Comprehensive usage documentation ([View AI README](./ai/README.md))
+- `./ai/schemas/` - Component schemas and composition tips
+
+### Key Components
+
+#### 1. System Prompt (`CLAUDE_GRIDKIT_SYSTEM_PROMPT`)
+The core system instruction for LLMs that includes:
+- Hard requirements for TSX output
+- Single-source import enforcement
+- API constraints and guardrails
+- Complete component catalog (46 components)
+- Composition tips and guidelines
+
+#### 2. Component Schema System
+Located in `./ai/schemas/components/`, each component has:
+- **Component Definition**: Name, import, description, props, examples
+- **Composition Tips**: Best practices for using the component
+- **Type Safety**: TypeScript definitions for all props
+
+#### 3. Available Components (46 total)
+
+**Theme & Context:**
+- ThemeProvider - Context provider for theme support
+- useTheme - Hook for accessing and managing themes
+
+**Layout Components:**
+- FlexContainer - Flexible container with CSS flexbox
+- Column - Vertical layout container
+- Row - Horizontal layout container
+- Wrapper - Generic wrapper component
+- Scroll - Scrollable container
+- Separator - Visual separator element
+
+**Form Components:**
+- Form - Semantic form wrapper with event handling
+- Input - Text input with multiple variants (email, password, checkbox, etc.)
+- Select - Dropdown selection component
+- Search - Search input with suggestions
+- Label - Form label component
+- Textarea - Multi-line text input
+- Switch - Toggle switch component
+- Toggle - Alternative toggle component
+- RadioGroup - Radio button group
+- Slider - Range slider input
+- InputFile - File upload input
+- DragAndDropFiles - Drag and drop file upload
+
+**Feedback & Overlays:**
+- InlineNotification - Inline status messages
+- Loader - Loading indicator
+- Skeleton - Content placeholder
+- Snackbar - Toast notifications
+- SnackbarManager - Snackbar management
+- Tooltip - Hover tooltip
+- Modal - Modal dialog
+- Portal - Portal for rendering outside DOM tree
+
+**Navigation & Structure:**
+- Breadcrumbs - Navigation breadcrumb trail
+- Tabs - Tab navigation component
+- Stepper - Step-by-step navigation
+- List - List container component
+- Accordion - Collapsible content sections
+- Link - Navigation link component
+
+**Display & Content:**
+- Typography - Text component with multiple variants
+- Button - Interactive button with multiple styles
+- Icon - Icon component
+- Image - Image component with optimization
+- Card - Content container with subcomponents
+- Avatar - User avatar component
+- Carousel - Image/content carousel
+- ContentCarousel - Content carousel variant
+- Counter - Numeric counter component
+- Price - Price display component
+- ProgressBar - Progress indicator
+- Rating - Star rating component
+- ChatContainer - Chat interface container
+- ChatBubble - Individual chat message
+
+## API Constraints & Guardrails
+
+### Critical Rules (Must Follow)
+1. **Import Source**: Only import from `gd-design-library`
+2. **Row/Column Wrapping**: Use `isWrap` (boolean), NOT `wrap`
+3. **Image Dimensions**: `width` and `height` props are numbers only (e.g., `width={96}`)
+4. **Card Subcomponents**: `sizeVariant` only accepts `CardSizeVariant.Default` or `CardSizeVariant.Sm`
+5. **Counter Components**: Use `initial` (not `value`) for starting quantity; use `onCounterChange` as handler
+6. **Button Variants**: Must be one of `ButtonVariant.Contained | Outlined | Text | Inherit`
+7. **Button Colors**: Must be one of `ButtonColorVariant.Primary | Secondary`
+
+### Typography System
+- **Variants**: h1, h2, h3, h4, h5, h6, body1, body2, caption, overline, display, subtitle1, subtitle2
+- **Style Variants**: italic, bold, underline, strikethrough, uppercase, lowercase, capitalize
+- **Sizes**: xs, sm, md, lg, xl, xxl (for Display variant)
+- **Alignment**: start, center, end, justify
+
+### Form System
+- Always use `Form` component as semantic wrapper
+- Provide visible labels via `label` prop or separate `<Label htmlFor>`
+- Handle submission with `onSubmit` handler
+- Use appropriate Input variants (email, password, checkbox, etc.)
+
+## Usage Patterns
+
+### 1. Programmatic Prompt Builder (Recommended)
+```typescript
+import { buildClaudeSystemPrompt } from 'gd-design-library/ai';
+
+const prompt = buildClaudeSystemPrompt('Create a sign-in form with email and password');
+```
+
+### 2. Legacy Builder
+```typescript
+import { buildGDLibraryPrompt } from 'gd-design-library/ai';
+
+const prompt = buildGDLibraryPrompt('Create a user profile card');
+```
+
+### 3. Direct System Prompt
+```typescript
+import { CLAUDE_GRIDKIT_SYSTEM_PROMPT } from 'gd-design-library/ai';
+
+const fullPrompt = `${CLAUDE_GRIDKIT_SYSTEM_PROMPT}\n\nTask: Create a dashboard layout`;
+```
+
+## Code Generation Examples
+
+
+
+## Composition Best Practices
+
+### Layout Composition
+- Use `FlexContainer` with `Column`/`Row` and `gap` for spacing
+- Avoid raw CSS margins except where necessary
+- Prefer component props for spacing, alignment, sizing
+
+### Form Composition
+- Wrap form content in `Card` with appropriate padding
+- Use `Column` for vertical field organization
+- Apply consistent spacing with `gap` prop
+- Handle validation with `InlineNotification` components
+
+### Accessibility
+- Label all form controls with `Label` component or `label` prop
+- Use appropriate `aria-*` attributes
+- Maintain sensible keyboard navigation order
+- Provide focus indicators and screen reader support
+
+### Theme Integration
+- Wrap app with `ThemeProvider` at root level
+- Access theme via `useTheme` hook
+- Use theme values for consistent styling
+- Support theme switching with `setTheme`
+
+## Component-Specific Guidelines
+
+### Button Usage
+- Use `variant="contained"` for primary actions
+- Use `variant="outlined"` for secondary actions
+- Use `variant="text"` for tertiary actions
+- Apply `fullWidth` in forms on mobile
+- Set `disabled={true}` during validation or async operations
+
+### Card Usage
+- Use `padding="16px"` or `"20px"` for comfortable spacing
+- Apply `isBordered={true}` for visual separation
+- Use `variant="horizontal"` for media cards
+- Set `maxWidth` for readable content width
+- Use `overflow="auto"` with `maxHeight` for scrollable content
+
+### Typography Usage
+- Use hierarchical variants (h1-h6) for content structure
+- Apply `variant="display"` with size prop for hero text
+- Use `variant="body1"` for primary content
+- Use `variant="caption"` for helper text and metadata
+- Combine with `styleVariant` for emphasis
+
+## Output Requirements
+
+### Code Output Rules
+- Output ONLY valid React TSX code
+- No markdown fences or extra commentary
+- Import exclusively from `gd-design-library`
+- Use React `useState` for component state
+- Handle forms with `<Form>` and appropriate Input variants
+- Add basic error placeholders and TODO comments for integration points
+
+### Styling Guidelines
+- No external CSS files unless strictly necessary
+- Prefer component props and layout primitives
+- Keep imports minimal and from one source
+- Use theme values for consistent styling
+- Apply responsive design with component props
+
+## Integration Points
+
+### Form Handling
+- Use `Form` component with `onSubmit` handler
+- Collect form data with `FormData` or controlled inputs
+- Handle validation with `InlineNotification` components
+- Provide loading states during submission
+
+### State Management
+- Use React `useState` for component state
+- Handle async operations with loading indicators
+- Provide optimistic UI updates where appropriate
+- Manage form validation state
+
+### Theme Management
+- Initialize with `ThemeProvider` at app root
+- Access theme values via `useTheme` hook
+- Support theme switching with `setTheme`
+- Store theme preferences in localStorage
+
+## Performance Considerations
+
+### Component Optimization
+- Use React.memo for performance optimization
+- Combine with context providers for nested scoping
+- Apply theme values with CSS custom properties
+- Use lazy loading for theme switching
+
+### Bundle Optimization
+- Import only needed components
+- Use tree-shaking for unused themes
+- Apply build tools for optimization
+- Monitor bundle size impact
+
+## Testing & Quality Assurance
+
+### Component Testing
+- Test with different theme configurations
+- Verify accessibility compliance
+- Test responsive behavior
+- Validate form interactions
+
+### Theme Testing
+- Test theme switching functionality
+- Verify theme inheritance
+- Test with different user preferences
+- Validate theme structure consistency
+
+## Future Enhancements
+
+### Planned Features
+- Additional component schemas
+- Enhanced composition tips
+- More code generation templates
+- Improved theme management
+- Better accessibility guidelines
+
+### Extension Points
+- Custom component schemas
+- Additional prompt builders
+- Theme validation tools
+- Component usage analytics
+- Integration with design tools
+
+## Troubleshooting
+
+### Common Issues
+1. **Import Errors**: Ensure importing only from `gd-design-library`
+2. **Prop Mismatches**: Check component schemas for correct prop types
+3. **Theme Issues**: Verify `ThemeProvider` is properly configured
+4. **Accessibility**: Ensure proper labeling and ARIA attributes
+
+### Debugging Tips
+- Use React DevTools for component inspection
+- Check theme context with `useTheme` hook
+- Validate component props against schemas
+- Test with different theme configurations
+
+## Resources
+
+### Documentation
+- [AI README](./ai/README.md) - Comprehensive usage instructions and examples
+- Component Storybook: Available in the UI library
+- API Documentation: Generated from component schemas
+- Theme Documentation: Available in theme configuration
+- Accessibility Guidelines: Built into component schemas
+
+### Support
+- Component schemas provide comprehensive prop documentation
+- Composition tips offer usage best practices
+- System prompts ensure consistent code generation
+- AI README provides detailed usage instructions and practical examples
+
+This AI integration system ensures that all generated code follows the design system's principles, maintains consistency, and provides excellent user experience through proper accessibility and theming support.

package/package.json

@@ -1,10 +1,19 @@
 {
   "name": "gd-design-library",
-  "version": "0.7.0",
+  "version": "0.7.2",
   "license": "MIT",
   "type": "module",
   "main": "./index.js",
   "types": "./index.d.ts",
+  "files": [
+    "index.js",
+    "index.d.ts",
+    "llms.txt",
+    "ai/",
+    "assets/",
+    "chunks/",
+    "*.d.ts"
+  ],
   "sideEffects": [
     "**/*.css",
     "**/*.scss"
@@ -15,6 +24,15 @@
       "types": "./index.d.ts"
     },
     "./styles.css": "./assets/styles.css",
+    "./llms.txt": "./llms.txt",
+    "./ai": {
+      "import": "./ai/index.js",
+      "types": "./ai/index.d.ts"
+    },
+    "./ai/*": {
+      "import": "./ai/*.js",
+      "types": "./ai/*.d.ts"
+    },
     "./*": {
       "import": "./*.js",
       "types": "./*.d.ts"

package/CHANGELOG.md

@@ -1,177 +0,0 @@
-# [Versions](https://www.npmjs.com/package/gd-design-library?activeTab=versions)
-
-# Changelog
-
-## [0.1.0] - 2025-05-15
-
-### Features
-
-- **Icon Stories**: Enhanced Icon stories with custom icons registration (#138)
-- **Custom Icons**: Added support for custom icons (#137)
-- **Header**: Simplified Header component and registered custom icons (#110)
-- **Card Components**: Refactored Card components and improved styles (#135)
-- **Progress Bar**: Added base functionality for progress bar (#199)
-- **Accordion**: Implemented accordion base functionality (#185)
-- **Typography**: Improved Typography component formatting and added "Small" style (#195)
-- **Select**: Added keyboard events and improved select state handling (#113)
-- **Rating**: Added rating view and component (#50)
-- **Theme**: Improved theme switching and custom theme support (#71)
-- **Loader**: Added base Loader component with multiple sizes (#42)
-- **Modal**: Added base modal window functionality (#39)
-- **Tooltip**: Added tooltip component (#35)
-- **Layout**: Created layout container components (Row/Column) (#20)
-
-### Refactor
-
-- **Theme Handling**: Updated typing for theme change handler
-- **Imports**: Removed unused imports from Header component (multiple commits)
-- **Typography**: Refactored typography style handling (#156)
-- **Button**: Enhanced Button component with improved styling support
-- **Components**: Simplified components and aligned imports (#124)
-- **Tokens**: Updated color, radius, and spacing tokens (#65)
-
-### Fixes
-
-- **Console Warnings**: Fixed console warnings in App.tsx (#194)
-- **Snapshot Tests**: Updated snapshots across multiple components
-- **Focus Styles**: Implemented focus styles for checkbox and radio inputs (#186)
-- **Select**: Fixed styles and theme integration (#188)
-- **Textarea**: Skipped snapshot test in textarea (#82)
-
-### CI/CD
-
-- **NPM Publishing**: Added release pipeline for publishing to NPM (#111)
-- **Slack Notifications**: Added Slack notifications to CI (#75)
-- **Playwright**: Added initial Playwright test setup (#69)
-
-### Documentation
-
-- **README**: Updated README with component creation script (#99)
-- **Storybook**: Enhanced Storybook docs for multiple components
-
----
-
-## [0.2.0] - 2025-06-12
-
-### Added
-
-- New `Stepper` component with horizontal/vertical orientation
-- `Button` now supports `loading` prop
-
-### Changed
-
-- `Input` now accepts `size="small" | "medium" | "large"`
-- Improved `Modal` focus trap behavior
-
-### Fixed
-
-- Fixed `Tooltip` not displaying on keyboard focus
-- `Checkbox` label alignment issue in Safari
-
-### Removed
-
-- Deprecated `LegacyBanner` component (removed in v1.2.0)
-
-## [0.3.0] - 2025-07-14
-
-### Features
-
-- Integrated Google Generative AI with markdown support and file uploads in ChatDemo.
-- Added multi-chat session support with search functionality and chat caching.
-- Introduced ChatBubble component with status-based styling (pending, fulfilled, rejected).
-- Implemented AI feedback loop for iterative improvements in chat interactions.
-- Added DragAndDrop widget with file validation and upload progress indicators.
-- New Separator component for visual content division.
-- Enhanced Loader with customizable name prop for targeted styling.
-- Added use client directive for Next.js compatibility.
-- Dynamic theme support in ChatBubble using commonHeader tokens.
-
-### Refactor
-
-- Full migration from styled-components to @emotion/styled across all components.
-- Restructured Storybook stories and updated meta titles for consistency.
-- Replaced static styles with array-based computed styles (e.g., Avatar, Carousel).
-- Standardized prop names (e.g., wrap → isWrap in Row/Column).
-- Library imports are optimized for tree-shaking and performance.
-
-### Fixes
-
-- Fixed OptionPicker accessibility by adding explicit type="radio".
-- Resolved textarea dynamic height reset and added minHeight/maxHeight support.
-- Addressed chat container overflow, snackbar shadow clipping, and file card rendering issues.
-- Patched type errors, linter warnings, and CI/CD pipeline failures.
-- Restored automation step in Jenkins workflow.
-- Fixed ChatDemo image handling and scroll behavior.
-
-### Documentation
-
-- Updated Storybook documentation for all components post-Emotion migration.
-- Revised theming guide to use @emotion/styled and gd-design-library.
-- Added .env.example for ChatDemo API key setup.
-- Enhanced component docs with JSDoc examples and usage guidelines.
-
-### Summary
-
-This release delivers major enhancements to the chat system, full Emotion adoption for styling, critical UX fixes, and
-comprehensive documentation updates. The refactor improves maintainability, while new features like AI integration and
-drag-and-drop elevate component capabilities.
-
-## [0.4.0] - 2025-08-18
-
-### New Features
-
-- Added responsiveness documentation for layout composition techniques
-- Implemented TokenViewer for visual theme token representation in Storybook
-- Added styleVariant prop to Typography for combined styles (bold/italic/underline)
-- Introduced theme export script with downloadable defaultTheme.json in documentation
-
-### Improvements
-
-- Enhanced theme styles, fixed typos, and improved documentation across components
-- Updated mobile responsiveness and documentation for ChatBubble, ChatContainer, and Breadcrumbs
-- Refined Storybook controls and documentation for Button, Modal, and Card
-- Improved Textarea usability (removed deprecated props, added rows, updated docs)
-- Optimized build with tree shaking, dependency updates, and external library dependencies
-
-### Bug Fixes
-
-- Fixed Carousel SSR type errors and Dropdown linting issues
-- Adjusted Snackbar documentation and fixed style inconsistencies
-- Fixed Image styles, Carousel token styles, and RadioGroupItem behavior
-- Resolved avatar and chat page responsiveness issues
-- Eliminated console warnings in app.tsx and removed unused code
-- Fixed hardcoded Google API key by adding environment variable support
-- Patched entry point configuration and Portal import errors
-
-## [0.5.0] - 2025-09-01
-
-### Features
-
-- **Input**: Added wrapperAs prop for custom wrapper elements and improved styling customization
-- **Form**: Introduced core form configuration system with state management and field dependencies
-- **Loader**: Added customizable WrapperView prop and enhanced theme integration
-- **ChatContainer**: New component for chat-based interfaces
-- **Theme**: Added detailed theme previews in Storybook for colors, fonts, and spacing tokens
-- **Snackbar**: Added animated close functionality and improved customization options
-- **Icons**: Introduced standardized size variants (Xs, Sm, Md, Lg, Xl) for consistent scaling
-
-### Improvements
-
-- **Tooltip**: Enhanced type handling, prop interfaces, and theme usage
-- **Counter**: Improved type handling and theme configuration
-- **Stepper**: Refactored layout using FlexContainer for better mobile experience
-- **Tabs**: Enhanced styling with overflow handling and improved documentation
-- **Selector**: Replaced div elements with span for better accessibility
-- **Textarea**: Added dynamic height adjustment based on content
-- **Documentation**: Enhanced Storybook docs with detailed prop descriptions
-- **Theme**: Updated default colors and improved token structure
-- **Carousel**: Refactored styles and improved content navigation flexibility
-
-### Fixes
-
-- **Button**: Fixed border styling issues in disabled state
-- **Textarea**: Fixed dynamic height adjustment behavior
-- **Selector**: Corrected semantic HTML usage and import paths
-- **Build**: Fixed dist output paths and dependency isolation
-- **Types**: Resolved various TypeScript compatibility issues
-- **Storybook**: Corrected TokenViewer import paths and theme consistency

package/ai/codegen.js

@@ -1,51 +0,0 @@
-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/prompts.js

@@ -1,23 +0,0 @@
-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.js

@@ -1,37 +0,0 @@
-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
-};