gd-design-library 0.7.0 → 0.7.2

package/ai/schemas/components/Avatar.js

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

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

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

@@ -1,74 +0,0 @@
-const e = {
-  name: "Card",
-  import: "import { Card } from 'gd-design-library'",
-  description: "Container component for grouping related content with optional border and highlight styling. Supports vertical and horizontal layouts.",
-  props: [{
-    name: "variant",
-    type: "CardVariant",
-    description: "Layout variant of the card - vertical stacks content, horizontal arranges side-by-side",
-    default: "vertical",
-    enum: ["vertical", "horizontal"]
-  }, {
-    name: "isBordered",
-    type: "boolean",
-    description: "Adds border styling to visually separate the card from surrounding content",
-    default: !1
-  }, {
-    name: "gutter",
-    type: "string",
-    description: "Space between child elements inside the card",
-    default: "0"
-  }, {
-    name: "tabIndex",
-    type: "number",
-    description: "Tab index for keyboard navigation when card is interactive"
-  }, {
-    name: "isHighlighted",
-    type: "boolean",
-    description: "Applies highlight styling to draw attention or indicate selection",
-    default: !1
-  }, {
-    name: "width",
-    type: "string",
-    description: "Fixed width of the card",
-    default: "auto"
-  }, {
-    name: "height",
-    type: "string",
-    description: "Fixed height of the card",
-    default: "auto"
-  }, {
-    name: "maxWidth",
-    type: "string",
-    description: "Maximum width constraint for responsive card sizing",
-    default: "none"
-  }, {
-    name: "maxHeight",
-    type: "string",
-    description: "Maximum height constraint to limit card expansion",
-    default: "none"
-  }, {
-    name: "overflow",
-    type: "string",
-    description: "Controls how content overflow is handled (visible, hidden, scroll, auto)",
-    default: "visible",
-    enum: ["visible", "hidden", "scroll", "auto"]
-  }, {
-    name: "padding",
-    type: "string",
-    description: "Internal padding around card content",
-    default: "0"
-  }, {
-    name: "children",
-    type: "ReactNode",
-    description: "Content elements to be rendered inside the card",
-    required: !0
-  }],
-  examples: ['<Card variant="vertical" isBordered padding="20px" gutter="16px">{formFields}</Card>', '<Card variant="horizontal" isHighlighted maxWidth="600px"><Image /><Content /></Card>', '<Card isBordered overflow="auto" maxHeight="400px">{longContent}</Card>']
-}, t = ['Use Card with padding="16px" or "20px" for comfortable content spacing in forms and content groups.', "Apply Card isBordered={true} to visually separate different content sections on a page.", 'Set Card variant="horizontal" for media cards with image on one side and content on the other.', 'Use Card variant="vertical" (default) for form containers and stacked content layouts.', 'Apply Card gutter="16px" to maintain consistent spacing between child elements.', "Use Card isHighlighted={true} to indicate active, selected, or important content sections.", 'Set Card maxWidth="600px" or similar to maintain readable content width on large screens.', 'Apply Card overflow="auto" with maxHeight for scrollable content areas within fixed layouts.', "Combine Card with Column inside for vertical content organization with proper spacing.", "Use Card padding consistently across similar content types for visual coherence.", 'Apply Card width="100%" with maxWidth for responsive cards that adapt to container.', "Set Card tabIndex={0} when card is clickable or interactive for keyboard accessibility.", "Use nested Cards with different isBordered states for hierarchical content organization.", "Apply Card with consistent padding values across the app for unified content presentation.", "Combine Card isHighlighted with hover states for interactive card selection patterns.", 'Use Card overflow="hidden" to clip content and maintain clean edges with images.', 'Set Card height with overflow="scroll" for fixed-height scrollable content panels.', 'Apply Card variant="horizontal" with FlexContainer children for complex layouts.', "Use Card as container for related Input fields in multi-step forms.", "Combine multiple Cards with consistent gutter in Column for card list layouts.", "Apply Card isBordered={false} for subtle content grouping without visual boundaries.", "Use Card with elevation/shadow styles in styles prop for depth and hierarchy.", "Set Card minHeight to maintain consistent card sizes in grid layouts.", "Apply Card with background color in styles for themed content sections.", "Wrap form content into Card and vertical stack (Column) with comfortable gap (12-20px)."], i = {
-  component: e,
-  compositionTips: t
-};
-export {
-  i as default
-};

package/ai/schemas/components/Carousel.js

@@ -1,108 +0,0 @@
-const e = {
-  name: "Carousel",
-  import: "import { Carousel } from 'gd-design-library'",
-  description: "Container component for displaying a series of content in a scrollable format with navigation controls. Supports horizontal and vertical layouts with touch/swipe, keyboard navigation, and customizable slide dimensions.",
-  props: [{
-    name: "layout",
-    type: "LayoutType",
-    description: "Determines the scroll direction of the carousel (horizontal or vertical)",
-    default: "LayoutType.Horizontal",
-    enum: ["Horizontal", "Vertical"]
-  }, {
-    name: "showArrows",
-    type: "boolean",
-    description: "Controls the visibility of navigation arrow buttons for previous/next slide",
-    default: !0
-  }, {
-    name: "showDots",
-    type: "boolean",
-    description: "Controls the visibility of dot indicators for slide position and direct navigation",
-    default: !1
-  }, {
-    name: "width",
-    type: "string",
-    description: "Width of the carousel container",
-    default: "100%"
-  }, {
-    name: "height",
-    type: "string",
-    description: "Height of the carousel container",
-    default: "auto"
-  }, {
-    name: "slideWidth",
-    type: "string",
-    description: "Width of individual slides within the carousel",
-    default: "100%"
-  }, {
-    name: "slideHeight",
-    type: "string",
-    description: "Height of individual slides within the carousel",
-    default: "auto"
-  }, {
-    name: "gap",
-    type: "string",
-    description: "Space between carousel slides",
-    default: "0"
-  }, {
-    name: "padding",
-    type: "string",
-    description: "Internal padding of the carousel container",
-    default: "0"
-  }, {
-    name: "margin",
-    type: "string",
-    description: "External margin around the carousel container",
-    default: "0"
-  }, {
-    name: "overflow",
-    type: "string",
-    description: "Controls how slide content overflow is handled",
-    default: "hidden",
-    enum: ["visible", "hidden", "scroll", "auto"]
-  }, {
-    name: "autoPlay",
-    type: "boolean",
-    description: "Enables automatic slide progression",
-    default: !1
-  }, {
-    name: "autoPlayInterval",
-    type: "number",
-    description: "Time in milliseconds between automatic slide transitions",
-    default: 3e3
-  }, {
-    name: "loop",
-    type: "boolean",
-    description: "Enables infinite loop scrolling from last to first slide",
-    default: !1
-  }, {
-    name: "children",
-    type: "ReactNode[]",
-    description: "Array of content to be displayed as carousel slides, typically Carousel.Slide components",
-    required: !0
-  }, {
-    name: "onSlideChange",
-    type: "(index: number) => void",
-    description: "Callback fired when the active slide changes"
-  }, {
-    name: "defaultSlide",
-    type: "number",
-    description: "Index of the initially active slide",
-    default: 0
-  }, {
-    name: "className",
-    type: "string",
-    description: "Additional CSS classes to apply to the carousel container"
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom inline styles for the carousel container",
-    default: {}
-  }],
-  examples: ['<Carousel showDots={true}><Carousel.Slide><Image src="/slide1.jpg" /></Carousel.Slide><Carousel.Slide><Image src="/slide2.jpg" /></Carousel.Slide></Carousel>', '<Carousel layout="Vertical" height="400px" autoPlay autoPlayInterval={5000}>{slides}</Carousel>', "<Carousel showArrows={false} showDots={true} loop={true}>{productImages.map(img => <Carousel.Slide key={img.id}><Carousel.Image src={img.url} /></Carousel.Slide>)}</Carousel>", '<Carousel slideWidth="300px" gap="20px" overflow="visible">{cards}</Carousel>']
-}, o = ["Use showDots for quick navigation on mobile; showArrows for desktop-sized carousels.", "Set explicit slideWidth/slideHeight when mixing different content sizes.", "Enable loop for galleries; disable for step-based content walkthroughs.", "Use onSlideChange for analytics or syncing external state.", "Use Carousel with showDots={true} for mobile interfaces where arrow buttons might be too small for touch targets.", 'Apply Carousel layout="Horizontal" (default) for image galleries and product showcases.', 'Set Carousel layout="Vertical" for testimonials or feature lists that benefit from vertical scrolling.', "Use Carousel.Slide wrapper for each slide to ensure proper slide behavior and styling.", "Apply Carousel.Image for optimized image slides with proper aspect ratio handling.", "Combine Carousel with autoPlay and autoPlayInterval for hero banners and promotional content.", "Use Carousel loop={true} for continuous browsing experience in image galleries.", "Set Carousel slideWidth less than 100% to show multiple slides simultaneously for product carousels.", "Apply Carousel gap prop to create visual separation between slides in multi-item carousels.", "Use Carousel showArrows={false} on mobile to rely on touch gestures for navigation.", "Combine Carousel with Card components inside slides for structured content presentation.", "Apply Carousel height with fixed value to prevent layout shifts during slide transitions.", "Use Carousel onSlideChange to update external UI elements like slide counters or descriptions.", "Set Carousel defaultSlide to start from a specific slide based on user context or preferences.", 'Apply Carousel with overflow="visible" and negative margins for edge-bleeding slide effects.', "Use Carousel with responsive slideWidth values for adaptive layouts across screen sizes.", "Combine Carousel with lazy loading for performance optimization with many image slides.", "Apply Carousel padding to create space around the visible slide area for peek effects.", "Use Carousel with keyboard navigation support for accessibility compliance.", "Set Carousel with touch and swipe gestures enabled by default for mobile usability.", "Apply Carousel inside Modal for image lightbox and gallery viewing experiences.", "Use Carousel with thumbnail navigation below main carousel for image galleries.", "Combine Carousel with video content using proper pause/play on slide change.", "Apply Carousel with consistent aspect ratios across slides to prevent jarring transitions.", "Use Carousel showDots with custom dot styling for brand-aligned indicators.", "Set Carousel with aria-labels for screen reader navigation announcements.", "Apply Carousel with fade transitions instead of slide for smoother visual effects.", "Use Carousel in hero sections with full-width layout and background images.", "Combine Carousel with progressive loading for better perceived performance.", "Apply Carousel with pause on hover for autoPlay to improve user control.", "Use Carousel with dynamic children array for data-driven slide generation.", "Set Carousel with responsive showArrows hiding arrows on small screens.", "Apply Carousel with infinite scroll pattern using loop and dynamic content loading.", "Use Carousel for step-by-step tutorials with navigation controls for user pacing.", "Combine Carousel with form steps for multi-step form wizards.", "Apply Carousel with synchronized controls for multiple related carousels.", 'Use Carousel slideHeight="auto" for content-driven height with variable slide content.', "Set Carousel with preload strategies for adjacent slides to ensure smooth transitions.", "Apply Carousel with custom navigation using external buttons via ref methods.", "Use Carousel for comparison views with side-by-side product features.", "Combine Carousel with zoom functionality for detailed product image inspection.", 'Apply Carousel with slide counters showing "1 of 5" style position indicators.', "Use Carousel in testimonial sections with automatic rotation for social proof.", "Set Carousel with reduced motion preferences for accessibility considerations.", "Apply Carousel with analytics tracking on slide views and interactions.", "Use Carousel for date/time pickers with vertical or horizontal scrolling.", "Combine Carousel with filters to dynamically update displayed slides.", "Apply Carousel with skeleton loaders while slide content is being fetched.", "Use Carousel for onboarding flows with clear progression through steps.", "Set Carousel with custom slide animations for branded experiences."], i = {
-  component: e,
-  compositionTips: o
-};
-export {
-  i as default
-};

package/ai/schemas/components/ChatBubble.js

@@ -1,34 +0,0 @@
-const e = {
-  name: "ChatBubble",
-  import: "import { ChatBubble } from 'gd-design-library'",
-  description: "Chat message bubble component for displaying conversation messages with distinct styling for questions and answers, optional action buttons, and status indicators for message states.",
-  props: [{
-    name: "variant",
-    type: "ChatBubbleVariant",
-    description: "Determines the visual style and behavior of the chat bubble",
-    default: "question",
-    enum: ["question", "answer"]
-  }, {
-    name: "children",
-    type: "ReactNode",
-    description: "Content to be displayed within the chat bubble",
-    required: !0
-  }, {
-    name: "actions",
-    type: "ReactNode[]",
-    description: "Array of action buttons to be displayed below the message",
-    default: []
-  }, {
-    name: "status",
-    type: "ChatBubbleStatus",
-    description: "Indicates the current state of the message",
-    enum: ["pending", "fulfilled", "undefined"]
-  }],
-  examples: ['<ChatBubble variant="question">How can I help you today?</ChatBubble>', '<ChatBubble variant="answer" status="pending">Typing response...</ChatBubble>', '<ChatBubble variant="answer" status="fulfilled" actions={[<Button variant="text">Copy</Button>, <Button variant="text">Share</Button>]}>Here is the answer to your question.</ChatBubble>', '<ChatBubble variant="question" actions={[<Button variant="text" size="sm">Edit</Button>]}>What is the weather like?</ChatBubble>']
-}, t = ['Use ChatBubble variant="question" for user messages and variant="answer" for AI/agent responses in chat interfaces.', 'Apply ChatBubble status="pending" with loading indicator or typing animation while generating responses.', 'Set ChatBubble status="fulfilled" when message is fully loaded and ready for interaction.', "Use ChatBubble actions prop with copy, share, or feedback buttons for message interactions.", "Apply ChatBubble within ChatContainer children wrapped in Column for proper message spacing.", "Combine ChatBubble with Avatar component to show sender identity in multi-user chats.", 'Use ChatBubble with timestamp using Typography variant="caption" for message metadata.', "Apply ChatBubble variant styling consistently to distinguish between sender and receiver messages.", "Set ChatBubble actions with icon-only Button components for compact action bars.", "Use ChatBubble with conditional rendering of actions based on message type or user permissions.", "Apply ChatBubble with markdown or rich text rendering in children for formatted messages.", "Combine multiple ChatBubble components with Separator for date or session breaks.", 'Use ChatBubble status="pending" with Skeleton or dots loader for realistic typing indicators.', "Apply ChatBubble with error state styling when message fails to send or load.", "Set ChatBubble with max-width constraints for better readability on wide screens.", 'Use ChatBubble variant="question" aligned to right and variant="answer" to left for visual flow.', "Apply ChatBubble with smooth scroll-to-bottom behavior when new messages appear.", "Combine ChatBubble with InlineNotification for system messages or alerts within chat.", "Use ChatBubble actions with tooltips for action button descriptions on hover.", "Apply ChatBubble with code syntax highlighting when displaying code snippets in messages.", "Set ChatBubble with responsive padding and font sizes for mobile chat interfaces.", "Use ChatBubble with message editing capability by replacing children content on edit action.", "Apply ChatBubble with message threading support using indentation or visual connectors.", "Combine ChatBubble with file attachments using Card or Image components within children.", "Use ChatBubble variant colors from theme for consistent brand appearance.", "Apply ChatBubble with keyboard navigation support for accessible message interactions.", "Set ChatBubble with auto-retry mechanism for failed messages with status tracking.", "Use ChatBubble with real-time status updates via WebSocket for live chat experiences.", "Apply ChatBubble with message reactions using emoji buttons in actions array.", "Combine ChatBubble with voice message playback controls when displaying audio messages.", "Use ChatBubble with link preview cards when URLs are detected in message content.", "Apply ChatBubble with message grouping for consecutive messages from same sender.", "Set ChatBubble with delivery receipts using status indicators below messages.", "Use ChatBubble with translation actions for multi-language chat support.", "Apply ChatBubble with context menu on right-click for additional message options.", "Combine ChatBubble with typing indicators showing multiple users typing simultaneously.", "Use ChatBubble with message search highlighting for finding specific content.", 'Apply ChatBubble with collapsible long messages using "Show more" buttons.', "Set ChatBubble with consistent border-radius matching overall app design language.", 'Use ChatBubble variant="answer" with streaming text effect for AI responses.', "Apply ChatBubble with message pinning capability for important messages.", "Combine ChatBubble with user mentions using @ symbols with autocomplete.", "Use ChatBubble with message forwarding actions to share across conversations.", "Apply ChatBubble with read receipts showing user avatars who have read the message.", "Set ChatBubble with animated entrance effects for smooth message appearance.", "Use ChatBubble with quick reply suggestions as clickable chips below messages.", "Apply ChatBubble with message encryption indicators for secure conversations.", "Combine ChatBubble with location sharing displaying maps within message content.", "Use ChatBubble with message scheduling showing future send times."], a = {
-  component: e,
-  compositionTips: t
-};
-export {
-  a as default
-};

package/ai/schemas/components/ChatContainer.js

@@ -1,48 +0,0 @@
-const e = {
-  name: "ChatContainer",
-  import: "import { ChatContainer } from 'gd-design-library'",
-  description: "Container component for chat interfaces with sidebar support and responsive layout variants.",
-  props: [{
-    name: "ref",
-    type: "RefObject<ChatContainerRef>",
-    description: "Forwarded ref that provides access to container methods: isOpen, open(), close(), and toggle()"
-  }, {
-    name: "variant",
-    type: "ChatLayoutVariant",
-    description: 'Layout variant: "auto" adapts based on screen size, "desktop" maintains sidebar, "drawer" shows sidebar as overlay',
-    default: "auto",
-    enum: ["auto", "desktop", "drawer"]
-  }, {
-    name: "isOpen",
-    type: "boolean",
-    description: "Controls the visibility of the sidebar",
-    default: !0
-  }, {
-    name: "onToggleSidebar",
-    type: "(isOpen: boolean) => void",
-    description: "Callback fired when sidebar is toggled, receives new isOpen state"
-  }, {
-    name: "headerContent",
-    type: "ReactNode",
-    description: "Content to be rendered in the main header area"
-  }, {
-    name: "sidebarHeaderContent",
-    type: "ReactNode",
-    description: "Content to be rendered in the sidebar header"
-  }, {
-    name: "sidebarContent",
-    type: "ReactNode",
-    description: "Content to be rendered in the sidebar main area"
-  }, {
-    name: "children",
-    type: "ReactNode",
-    description: "Main chat content, typically a series of chat bubbles"
-  }],
-  examples: ['<ChatContainer variant="auto" isOpen={true} onToggleSidebar={handleToggle} headerContent={<Header />} sidebarContent={<ConversationList />}>{chatMessages}</ChatContainer>']
-}, t = ["Use ChatContainer as the root layout component for chat interfaces with sidebar navigation.", 'Set ChatContainer variant="auto" for responsive behavior that adapts between desktop and mobile layouts.', 'Use ChatContainer variant="desktop" to always show sidebar alongside chat content on larger screens.', 'Apply ChatContainer variant="drawer" for overlay sidebar behavior regardless of screen size.', "Control ChatContainer sidebar visibility with isOpen prop and onToggleSidebar callback for state management.", "Place navigation controls in ChatContainer headerContent for consistent header across all views.", "Use ChatContainer sidebarHeaderContent for search bars or filters above conversation list.", "Put conversation list or channel navigation in ChatContainer sidebarContent prop.", "Wrap chat messages and input controls as ChatContainer children for the main chat area.", "Access ChatContainer imperative methods via ref for programmatic open(), close(), and toggle() control.", "Combine ChatContainer with FlexContainer or Column inside children for structured message layout.", "Use ChatContainer ref.isOpen to check current sidebar state before performing actions.", "Implement ChatContainer onToggleSidebar to sync sidebar state with application state management.", 'Consider ChatContainer variant="drawer" on tablets for better touch interaction with swipe gestures.', "Place user profile or settings in ChatContainer sidebarHeaderContent for quick access.", "Use ChatContainer with nested Card components in sidebarContent for organized conversation groups.", "Apply ChatContainer ref methods in keyboard shortcuts for power user sidebar control.", "Combine ChatContainer with Select in headerContent for channel or contact switching.", "Structure ChatContainer children with Column for vertical message flow with proper spacing.", 'Use ChatContainer sidebarContent with overflow="auto" child for scrollable conversation lists.'], a = {
-  component: e,
-  compositionTips: t
-};
-export {
-  a as default
-};

package/ai/schemas/components/Column.js

@@ -1,69 +0,0 @@
-const e = {
-  name: "Column",
-  import: "import { Column } from 'gd-design-library'",
-  description: "Vertical stack with spacing utilities.",
-  props: [{
-    name: "align",
-    type: "string",
-    description: "Vertical alignment of items within the column",
-    default: "stretch",
-    enum: ["start", "center", "end", "stretch"]
-  }, {
-    name: "justify",
-    type: "string",
-    description: "Horizontal distribution of items",
-    default: "start",
-    enum: ["start", "center", "end", "space-between", "space-around"]
-  }, {
-    name: "gutter",
-    type: "number",
-    description: "Space between items in pixels",
-    default: 16
-  }, {
-    name: "isWrap",
-    type: "boolean",
-    description: "Enable content wrapping",
-    default: !0
-  }, {
-    name: "flex",
-    type: "string",
-    description: "CSS flex property value",
-    default: "1 1 auto"
-  }, {
-    name: "minWidth",
-    type: "string",
-    description: "Minimum width of the column"
-  }, {
-    name: "isReversed",
-    type: "boolean",
-    description: "Reverse the order of items",
-    default: !1
-  }, {
-    name: "width",
-    type: "string",
-    description: "Width of the column"
-  }, {
-    name: "height",
-    type: "string",
-    description: "Height of the column"
-  }, {
-    name: "padding",
-    type: "string",
-    description: "Padding around the column content"
-  }, {
-    name: "margin",
-    type: "string",
-    description: "Margin around the column"
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom CSS styles"
-  }],
-  examples: ['<Column gutter={16} align="center" justify="start">...</Column>']
-}, t = ["Set Column gutter prop for consistent vertical spacing between child elements (default 16px).", 'Use Column align="center" to center content vertically within each row of the column.', 'Apply Column justify="space-between" to distribute items evenly with space between them.', "Set Column isReversed={true} to reverse the visual order of items without changing DOM structure.", 'Use Column with fixed height and justify="center" to vertically center content in a container.', "Combine Column isWrap={false} with overflow styles for non-wrapping scrollable content.", 'Apply Column flex="1 1 auto" to make it fill available space in a flex parent container.', "Use nested Columns with different gutter values for hierarchical content organization.", "Set Column minWidth to prevent content from becoming too narrow on small screens.", 'Use Column align="stretch" (default) to make all children take full width of the container.', "Apply Column padding for internal spacing without affecting the gutter between items.", "Combine Column with Card component for well-organized form layouts with proper spacing.", 'Use Column justify="end" to push content to the bottom of a fixed-height container.', 'Set Column width="100%" with maxWidth for responsive full-width layouts with constraints.'], n = {
-  component: e,
-  compositionTips: t
-};
-export {
-  n as default
-};