gd-design-library 0.7.0 → 0.7.2

package/ai/schemas/components/ProgressBar.js

@@ -1,53 +0,0 @@
-const e = {
-  name: "ProgressBar",
-  import: "import { ProgressBar } from 'gd-design-library'",
-  description: "Visual progress indicator component that displays task completion status with determinate or indeterminate states, customizable colors, and optional percentage display for tracking operations, uploads, or multi-step processes.",
-  props: [{
-    name: "value",
-    type: "number",
-    description: "Progress value from 0 to 100 representing completion percentage",
-    default: 0
-  }, {
-    name: "indeterminate",
-    type: "boolean",
-    description: "Shows animated indeterminate state when true, used for unknown duration operations",
-    default: !1
-  }, {
-    name: "showPercentage",
-    type: "boolean",
-    description: "Displays the percentage value as text label when true",
-    default: !1
-  }, {
-    name: "fillColor",
-    type: "string",
-    description: "Color of the progress fill bar, accepts any CSS color value",
-    default: "#0066FF"
-  }, {
-    name: "backgroundColor",
-    type: "string",
-    description: "Color of the track background behind the progress fill",
-    default: "#E5E5E5"
-  }, {
-    name: "aria-label",
-    type: "string",
-    description: "ARIA label for accessibility, describes the progress bar purpose",
-    default: "Progress bar"
-  }, {
-    name: "className",
-    type: "string",
-    description: "Custom CSS class for additional styling",
-    default: ""
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom inline styles object for the progress bar container",
-    default: {}
-  }],
-  examples: ["<ProgressBar value={75} showPercentage />", '<ProgressBar indeterminate aria-label="Loading content" />', '<ProgressBar value={50} fillColor="#10B981" backgroundColor="#F3F4F6" />', '<ProgressBar value={100} showPercentage fillColor="#059669" aria-label="Upload complete" />', '<ProgressBar value={25} styles={{width: "100%"}} className="upload-progress" />']
-}, r = ["Use indeterminate for unknown durations; switch to determinate when progress is known.", "Announce progress updates for screen readers via aria-live when appropriate.", "Avoid showing percentage when space is tight; use tooltip or label nearby.", "Pick contrasting fill/background colors for sufficient visual contrast.", "Use ProgressBar with value prop for determinate progress tracking when duration or steps are known.", "Apply ProgressBar indeterminate={true} for operations with unknown duration like initial data fetching.", "Set ProgressBar showPercentage={true} to display numeric progress for user clarity in uploads or downloads.", "Use ProgressBar fillColor with semantic colors: green for success, blue for in-progress, red for errors.", "Apply ProgressBar in file upload interfaces updating value based on upload percentage.", "Combine ProgressBar with InlineNotification above or below for status messages during operations.", "Use ProgressBar value={0} initially and update to 100 on completion for clear start/end states.", "Apply ProgressBar backgroundColor to match container background for seamless integration.", "Set ProgressBar with consistent height via styles for uniform appearance across the app.", "Use ProgressBar in multi-step forms showing overall completion across all steps.", "Apply ProgressBar indeterminate in Button or Card during async operations.", 'Combine ProgressBar with Typography showing step labels like "Step 2 of 5" for context.', "Use ProgressBar aria-label with descriptive text for screen reader accessibility.", "Apply ProgressBar with animation transitions for smooth value changes.", 'Set ProgressBar width="100%" via styles for responsive full-width progress indicators.', "Use ProgressBar in Modal headers or footers for operation progress within dialogs.", "Apply ProgressBar with custom fillColor matching brand colors for consistent theming.", "Combine ProgressBar with Cancel button for interruptible long-running operations.", "Use ProgressBar value calculated from array.filter().length for item processing progress.", "Apply ProgressBar showPercentage={false} for clean minimal progress indicators.", "Set ProgressBar in Table rows for individual item processing status.", "Use ProgressBar with WebSocket updates for real-time operation progress.", "Apply ProgressBar indeterminate with reduced opacity for subtle loading states.", "Combine ProgressBar with estimated time remaining text for better user expectations.", "Use ProgressBar in dashboard widgets for goal completion or quota tracking.", "Apply ProgressBar with stepped increments (25%, 50%, 75%) for chunked operations.", "Set ProgressBar fillColor conditionally based on value thresholds for status indication.", "Use ProgressBar in onboarding flows showing profile completion percentage.", "Apply ProgressBar with icon indicators at milestones (checkmarks at 25%, 50%, 75%, 100%).", "Combine ProgressBar with Loader component switching based on operation phase.", "Use ProgressBar for media playback progress with value from currentTime/duration.", "Apply ProgressBar in Card components for project or task completion status.", "Set ProgressBar with gradient fillColor via CSS for modern visual effects.", "Use ProgressBar value from API polling for server-side operation tracking.", "Apply ProgressBar with tooltip showing detailed progress information on hover.", "Combine ProgressBar with pause/resume controls for manageable long operations.", "Use ProgressBar in survey or quiz interfaces showing question progress.", "Apply ProgressBar with segmented appearance for discrete step visualization.", "Set ProgressBar in sidebars for storage usage or quota consumption display.", "Use ProgressBar indeterminate during connection establishment or handshake phases.", "Apply ProgressBar with error state styling when operations fail mid-progress.", "Combine ProgressBar with retry button appearing on failure for recovery options.", "Use ProgressBar for scroll progress indicators in long articles or documents.", "Apply ProgressBar with micro-animations at 100% completion for success feedback.", "Set ProgressBar with reduced motion preferences for accessibility compliance.", "Use ProgressBar in batch operations showing overall progress across multiple items.", "Apply ProgressBar with stacked bars for multi-category progress tracking.", "Combine ProgressBar with sound notifications at completion for background tasks.", "Use ProgressBar value with localStorage to persist progress across page refreshes."], s = {
-  component: e,
-  compositionTips: r
-};
-export {
-  s as default
-};

package/ai/schemas/components/RadioGroup.js

@@ -1,80 +0,0 @@
-const o = {
-  name: "RadioGroup",
-  import: "import { RadioGroup } from 'gd-design-library'",
-  description: "Radio button group component for single selection from multiple options with flexible layout variants (row, column, grid) and customization options including images, colors, tooltips, and custom rendering.",
-  props: [{
-    name: "options",
-    type: "RadioOption[]",
-    description: "Array of radio options where each must have label (string) and value (string). Optional properties: disabled (boolean), hex (string) for background color, image (string) for background image URL, tooltip (string) for hover text, payload (T) for additional data",
-    required: !0,
-    default: []
-  }, {
-    name: "variant",
-    type: "RadioGroupVariant",
-    description: "Layout variant controlling how radio items are arranged",
-    default: "RadioGroupVariant.Row",
-    enum: ["Row", "Column", "Grid"]
-  }, {
-    name: "value",
-    type: "string",
-    description: "Currently selected value for controlled component. Must be used with onChange handler"
-  }, {
-    name: "defaultValue",
-    type: "string",
-    description: "Initially selected value for uncontrolled component"
-  }, {
-    name: "onChange",
-    type: "(value: string) => void",
-    description: "Callback function triggered when the selected value changes"
-  }, {
-    name: "name",
-    type: "string",
-    description: "Name attribute for all radio inputs in the group. Auto-generated if not provided",
-    default: "auto-generated"
-  }, {
-    name: "itemHeight",
-    type: "string | number",
-    description: "Fixed height for each radio item"
-  }, {
-    name: "itemWidth",
-    type: "string | number",
-    description: "Fixed width for each radio item"
-  }, {
-    name: "gutter",
-    type: "string",
-    description: "Spacing between radio items when variant is Row or Column",
-    default: "spacing.sm"
-  }, {
-    name: "gridColumns",
-    type: "number",
-    description: "Number of columns for Grid variant layout"
-  }, {
-    name: "gridRows",
-    type: "number",
-    description: "Number of rows for Grid variant layout"
-  }, {
-    name: "gridColumnGutter",
-    type: "string",
-    description: "Gutter spacing between columns for Grid variant"
-  }, {
-    name: "gridRowGutter",
-    type: "string",
-    description: "Gutter spacing between rows for Grid variant"
-  }, {
-    name: "renderOption",
-    type: "(args: RenderOptionProps) => ReactNode",
-    description: "Custom render function for each radio option. Receives option, isSelected, isDisabled, and selectedValue as arguments"
-  }, {
-    name: "styles",
-    type: "CSSObject",
-    description: "Custom CSS-in-JS styles for the RadioGroup container",
-    default: {}
-  }],
-  examples: ['<RadioGroup options={[{label: "Option 1", value: "1"}, {label: "Option 2", value: "2"}]} value={selected} onChange={setSelected} />', '<RadioGroup variant="Column" options={sizeOptions} defaultValue="medium" name="size-selection" />', '<RadioGroup variant="Grid" gridColumns={3} options={colorOptions.map(c => ({...c, hex: c.color}))} onChange={handleColorChange} />', "<RadioGroup options={plans} renderOption={({option, isSelected}) => <Card isHighlighted={isSelected}>{option.label}</Card>} />", '<RadioGroup options={themes.map(t => ({label: t.name, value: t.id, image: t.preview, tooltip: t.description}))} itemWidth="150px" itemHeight="100px" />']
-}, i = ["Use Row for short option sets; Column for longer labels or many items; Grid for visual selections.", "Keep one option selected at all times when value is required; provide defaultValue for uncontrolled use.", "Use renderOption to enrich options with icons, images, or badges.", "Ensure keyboard navigation (arrow keys) and focus styles for accessibility.", "Use RadioGroup for mutually exclusive selections like payment methods, shipping options, or plan tiers.", 'Apply RadioGroup variant="Row" (default) for horizontal layouts with few options (2-4 items).', 'Set RadioGroup variant="Column" for vertical lists with many options or when labels are long.', 'Use RadioGroup variant="Grid" with gridColumns for visual selection interfaces like color or theme pickers.', "Apply RadioGroup value with controlled components and onChange for state management integration.", "Combine RadioGroup with Card components in renderOption for rich option displays with descriptions.", "Use RadioGroup defaultValue for uncontrolled components with initial selection.", "Apply RadioGroup options with disabled property for temporarily unavailable choices.", "Set RadioGroup itemWidth and itemHeight for uniform option sizes in visual selectors.", "Use RadioGroup options with hex property for color-coded selections like theme or priority levels.", "Apply RadioGroup options with image property for visual selection interfaces like avatars or patterns.", "Combine RadioGroup with Tooltip via options.tooltip for additional context on hover.", "Use RadioGroup renderOption to create custom layouts with icons, badges, or nested content.", "Apply RadioGroup gutter with consistent spacing tokens for aligned form layouts.", "Set RadioGroup gridColumns={2} or gridColumns={3} for responsive grid layouts on different viewports.", "Use RadioGroup name attribute for proper form submission with unique group identification.", "Apply RadioGroup with payload in options for rich data handling in renderOption function.", "Combine RadioGroup with InlineNotification for validation messages or selection confirmations.", "Use RadioGroup onChange with analytics tracking for user preference monitoring.", 'Apply RadioGroup variant="Grid" with equal itemWidth/itemHeight for tile-based selections.', "Set RadioGroup gridColumnGutter and gridRowGutter for precise grid spacing control.", "Use RadioGroup with conditional option rendering based on user permissions or feature flags.", "Apply RadioGroup renderOption with Typography for consistent text styling across options.", "Combine RadioGroup with Form component for integrated form validation and submission.", "Use RadioGroup options array built dynamically from API responses or configuration.", "Apply RadioGroup with keyboard navigation support (arrow keys) for accessibility.", "Set RadioGroup styles for custom container styling matching design requirements.", "Use RadioGroup with icons in renderOption for visual enhancement of text options.", 'Apply RadioGroup variant="Column" inside Card components for organized settings sections.', "Combine RadioGroup with disabled state during form submission to prevent changes.", "Use RadioGroup defaultValue with localStorage for persisting user preferences.", "Apply RadioGroup with responsive variant switching based on viewport size.", "Set RadioGroup options with consistent naming patterns for maintainable code.", "Use RadioGroup renderOption with conditional styling based on isSelected state.", "Apply RadioGroup with error state styling when selection is required but missing.", "Combine RadioGroup with Select as alternative UI for many options (>10 items).", 'Use RadioGroup itemWidth="100%" for full-width options in mobile layouts.', "Apply RadioGroup with visual feedback animations on selection change.", "Set RadioGroup with aria-label for screen reader context when label is not visible.", "Use RadioGroup options with rich content in renderOption including prices or descriptions.", 'Apply RadioGroup variant="Grid" for image galleries or visual option matrices.', "Combine RadioGroup with Counter or Input fields that update based on selection.", "Use RadioGroup with consistent option ordering (alphabetical, by price, by popularity).", "Apply RadioGroup gridRows with gridColumns for fixed grid dimensions.", "Set RadioGroup with custom focus styles for keyboard navigation visibility.", "Use RadioGroup renderOption with Badge components for status or count indicators.", "Apply RadioGroup with section headers using Typography above option groups.", "Combine RadioGroup with real-time validation showing selection requirements.", "Use RadioGroup options with tooltips for complex options needing explanation.", "Apply RadioGroup with consistent patterns across similar selection contexts for familiar UX."], e = {
-  component: o,
-  compositionTips: i
-};
-export {
-  e as default
-};

package/ai/schemas/components/Rating.js

@@ -1,64 +0,0 @@
-const i = {
-  name: "Rating",
-  import: "import { Rating } from 'gd-design-library'",
-  description: "Interactive star rating component for collecting user feedback, displaying ratings, or showing quality indicators with customizable maximum value, read-only mode, and various size options.",
-  props: [{
-    name: "max",
-    type: "number",
-    description: "Maximum rating value that can be selected",
-    default: 5
-  }, {
-    name: "value",
-    type: "number",
-    description: "Current rating value",
-    default: 0
-  }, {
-    name: "readOnly",
-    type: "boolean",
-    description: "When true, rating becomes non-interactive",
-    default: !1
-  }, {
-    name: "onChange",
-    type: "(value: number) => void",
-    description: "Callback function triggered when rating changes"
-  }, {
-    name: "styles",
-    type: "React.CSSProperties",
-    description: "CSS properties applied to the rating container",
-    default: {}
-  }, {
-    name: "size",
-    type: "string",
-    description: "Size variant of the rating component",
-    default: "md",
-    enum: ["sm", "md", "lg"]
-  }, {
-    name: "alignItems",
-    type: "string",
-    description: "Alignment of rating items within container",
-    default: "center",
-    enum: ["start", "center", "end"]
-  }, {
-    name: "gap",
-    type: "string | number",
-    description: "Space between rating items",
-    default: 8
-  }, {
-    name: "color",
-    type: "string",
-    description: "Color scheme for rating items",
-    default: "primary"
-  }, {
-    name: "className",
-    type: "string",
-    description: "Additional CSS class names",
-    default: ""
-  }],
-  examples: ["<Rating value={4} max={5} onChange={handleRatingChange} />", '<Rating value={3.5} readOnly size="lg" />', '<Rating max={10} value={7} color="#FFD700" />', '<Rating value={5} max={5} readOnly className="product-rating" />', '<Rating value={0} max={5} onChange={setUserRating} size="sm" />']
-}, e = ["Use readOnly for display-only ratings; enable onChange for interactive feedback.", "Allow half or fractional values only if visually supported; otherwise stick to integers.", "Choose size based on context; smaller in dense lists, larger on product details.", "Provide sufficient color contrast; use theme colors for consistency.", "Use Rating with value prop for displaying existing ratings in product cards, reviews, or feedback sections.", "Apply Rating readOnly={true} for display-only ratings where user interaction is not needed.", "Set Rating max={10} for more granular rating scales in detailed evaluation forms.", "Use Rating onChange handler to update state and trigger side effects like saving to database.", 'Apply Rating size="sm" in compact UI elements like table cells or inline with text.', 'Combine Rating with Typography to show numeric value alongside stars like "4.5 out of 5".', "Use Rating color prop with brand colors or semantic colors (gold for premium, etc.).", "Apply Rating in Card components for product reviews with consistent spacing.", "Set Rating gap prop to adjust spacing between stars for visual balance.", "Use Rating with conditional rendering to show only after user interaction or purchase.", 'Apply Rating alignItems="start" in forms where left alignment is preferred.', "Combine Rating with InlineNotification to show feedback after rating submission.", "Use Rating value with decimal values for accurate average rating display.", 'Apply Rating size="lg" for prominent rating collection in feedback modals.', "Set Rating className for applying custom hover effects or animations.", "Use Rating with disabled state during form submission to prevent changes.", "Apply Rating in review sections with count display showing number of ratings.", "Combine Rating with Button for submit action after rating selection.", "Use Rating readOnly with value from API for displaying aggregate ratings.", "Apply Rating with tooltip showing rating descriptions on hover.", "Set Rating max={3} for simple satisfaction ratings (poor, average, excellent).", "Use Rating in comparison tables for feature or quality ratings.", "Apply Rating with localStorage to persist user ratings across sessions.", "Combine Rating with filter functionality to filter items by rating ranges.", "Use Rating onChange with debouncing for auto-save functionality.", "Apply Rating in surveys with multiple rating questions in Column layout.", "Set Rating with aria-label for accessibility describing what is being rated.", "Use Rating with animation on value change for visual feedback.", "Apply Rating size based on viewport for responsive design.", "Combine Rating with review text in Card for complete review display.", "Use Rating with half-star values for more precise rating display.", "Apply Rating in sortable lists as a sorting criterion.", "Set Rating with custom star icons via CSS for unique visual style.", "Use Rating readOnly={false} in forms requiring user rating input.", "Apply Rating with validation ensuring rating is provided before submission.", "Combine Rating with date/time stamps for historical rating tracking.", "Use Rating in dashboards showing average ratings with trend indicators.", "Apply Rating with different max values for different rating contexts.", "Set Rating with consistent color scheme across all rating instances.", "Use Rating onChange to trigger analytics events for user feedback tracking.", "Apply Rating in modal dialogs for post-interaction feedback collection.", "Combine Rating with user Avatar for personalized review displays.", "Use Rating with loading state while fetching rating data from API.", "Apply Rating in ContentCarousel for testimonials with ratings.", "Set Rating with keyboard navigation support for accessibility.", "Use Rating with visual indicators for rating thresholds (poor/fair/good/excellent).", "Apply Rating in product comparisons showing ratings side by side.", "Combine Rating with percentage display showing distribution of ratings.", "Use Rating with responsive gap adjustment for mobile optimization."], t = {
-  component: i,
-  compositionTips: e
-};
-export {
-  t as default
-};

package/ai/schemas/components/Row.js

@@ -1,61 +0,0 @@
-const t = {
-  name: "Row",
-  import: "import { Row } from 'gd-design-library'",
-  description: "Horizontal layout container with flexible spacing and alignment options.",
-  props: [{
-    name: "width",
-    type: "string",
-    description: "Sets the width of the row container",
-    default: "auto"
-  }, {
-    name: "height",
-    type: "string",
-    description: "Sets the height of the row container",
-    default: "auto"
-  }, {
-    name: "minWidth",
-    type: "string",
-    description: "Sets the minimum width constraint"
-  }, {
-    name: "minHeight",
-    type: "string",
-    description: "Sets the minimum height constraint"
-  }, {
-    name: "maxWidth",
-    type: "string",
-    description: "Sets the maximum width constraint"
-  }, {
-    name: "maxHeight",
-    type: "string",
-    description: "Sets the maximum height constraint"
-  }, {
-    name: "margin",
-    type: "string",
-    description: "Sets the margin spacing for all sides"
-  }, {
-    name: "padding",
-    type: "string",
-    description: "Sets the padding spacing for all sides"
-  }, {
-    name: "position",
-    type: "string",
-    description: "Sets the CSS position property",
-    default: "relative"
-  }, {
-    name: "overflow",
-    type: "string",
-    description: "Controls content overflow behavior",
-    default: "visible"
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom styles for the row container"
-  }],
-  examples: ['<Row width="100%" padding="16px" position="relative">...</Row>']
-}, e = ["Use Row for horizontal layouts where items should be placed side by side.", 'Set Row width="100%" to create full-width horizontal containers that span the parent.', "Apply Row padding for consistent internal spacing without affecting child alignment.", 'Use Row with overflow="auto" and maxWidth for horizontally scrollable content areas.', 'Combine Row position="relative" as a positioning context for absolutely positioned children.', "Set Row minHeight to ensure consistent height even with varying content.", "Use nested Row components within Column for complex grid-like layouts.", "Apply Row margin for external spacing between row containers and other elements.", 'Use Row maxHeight with overflow="scroll" for fixed-height scrollable horizontal lists.', "Combine Row with FlexContainer children for precise control over item distribution.", "Set Row height to create uniform height containers across different content sections.", 'Use Row position="sticky" for horizontal navigation bars that stick during scroll.', "Apply Row minWidth to prevent content from collapsing below a certain width.", "Combine multiple Row components with consistent padding for aligned multi-row layouts.", "Use Row styles prop for one-off custom styling without creating new CSS classes."], i = {
-  component: t,
-  compositionTips: e
-};
-export {
-  i as default
-};

package/ai/schemas/components/Scroll.js

@@ -1,35 +0,0 @@
-const o = {
-  name: "Scroll",
-  import: "import { Scroll } from 'gd-design-library'",
-  description: "Scrollable container component that provides fine-grained control over scrollbar visibility and behavior for content that exceeds its container dimensions.",
-  props: [{
-    name: "vertical",
-    type: "string",
-    description: "Controls the visibility of the vertical scrollbar",
-    default: "auto",
-    enum: ["auto", "hidden", "visible"]
-  }, {
-    name: "horizontal",
-    type: "string",
-    description: "Controls the visibility of the horizontal scrollbar",
-    default: "auto",
-    enum: ["auto", "hidden", "visible"]
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom CSS styles to apply to the scroll container",
-    default: {}
-  }, {
-    name: "children",
-    type: "ReactNode",
-    description: "The content to be rendered within the scroll container",
-    required: !0
-  }],
-  examples: ['<Scroll vertical="auto" horizontal="hidden"><LongContent /></Scroll>', '<Scroll vertical="visible" styles={{maxHeight: "400px"}}>{tableData}</Scroll>', '<Scroll horizontal="auto" vertical="hidden"><WideTable /></Scroll>', '<Scroll styles={{height: "300px", border: "1px solid #ccc"}}>{messages}</Scroll>']
-}, l = ["Use Scroll with maxHeight to create constrained scrollable regions.", "Hide horizontal scrolling for text content to prevent sideways scroll.", "Combine Scroll with Card to keep long content within visual boundaries.", "Adjust vertical/horizontal props to match desired overflow behavior.", 'Use Scroll with vertical="auto" for content that may exceed container height naturally.', 'Apply Scroll horizontal="hidden" to prevent horizontal scrolling in fixed-width layouts.', 'Set Scroll vertical="visible" to always show scrollbar for consistent layout width.', 'Use Scroll with styles={{maxHeight: "400px"}} to create fixed-height scrollable areas.', 'Apply Scroll horizontal="auto" for tables or content that may be wider than viewport.', "Combine Scroll with Card for scrollable content sections with defined boundaries.", 'Use Scroll vertical="hidden" horizontal="auto" for horizontal scrolling galleries.', "Apply Scroll with height in styles for chat message containers or logs.", 'Set Scroll with overflow-y: auto equivalent using vertical="auto" for responsive content.', "Use Scroll inside Modal children for long form content or terms and conditions.", "Apply Scroll with minHeight and maxHeight for flexible yet bounded content areas.", "Combine Scroll with List for long scrollable lists with proper overflow handling.", 'Use Scroll vertical="visible" in data tables to indicate more content availability.', "Apply Scroll with padding in styles to create scrollable area with inner spacing.", 'Set Scroll horizontal="hidden" with word-wrap for text content to prevent horizontal overflow.', "Use Scroll with dynamic height based on viewport for responsive scrollable areas.", "Apply Scroll in ChatContainer children for scrollable message history.", "Combine Scroll with sticky headers using position fixed for table headers.", "Use Scroll with scroll-behavior: smooth in styles for smooth scrolling animations.", 'Apply Scroll vertical="auto" in Select dropdown for long option lists.', "Set Scroll with custom scrollbar styling via CSS for branded appearance.", 'Use Scroll horizontal="visible" for code blocks or preformatted text.', "Apply Scroll with flex: 1 in styles within FlexContainer for flexible scrollable area.", "Combine Scroll with virtualization libraries for performance with large datasets.", "Use Scroll in sidebar navigation for long menu lists with preserved header/footer.", "Apply Scroll with scroll-snap in styles for paginated or carousel-like scrolling.", 'Set Scroll vertical="hidden" with programmatic scrolling for controlled navigation.', "Use Scroll with intersection observer for infinite scrolling implementations.", "Apply Scroll in Form for long forms while keeping submit button visible.", "Combine Scroll with Column inside for vertically scrollable content with spacing.", 'Use Scroll horizontal="auto" for responsive tables on mobile devices.', "Apply Scroll with border in styles to visually indicate scrollable area boundaries.", "Set Scroll with scrollbar-width: thin via CSS for minimal scrollbar appearance.", 'Use Scroll vertical="visible" horizontal="visible" for spreadsheet-like interfaces.', "Apply Scroll with keyboard navigation support for accessibility.", "Combine Scroll with anchor links for jump-to-section navigation within scrollable content.", "Use Scroll in Tab panels for scrollable tab content with fixed tab headers.", "Apply Scroll with resize observer to adjust scroll behavior on container resize.", "Set Scroll with will-change: scroll-position in styles for performance optimization.", 'Use Scroll horizontal="hidden" with text-overflow: ellipsis for truncated text.', "Apply Scroll with custom scroll indicators for mobile-friendly scroll feedback.", "Combine Scroll with pull-to-refresh patterns for mobile applications.", 'Use Scroll vertical="auto" as default for most scrollable content containers.', "Apply Scroll with consistent max-height values across similar UI components.", "Set Scroll with overflow-x and overflow-y control via horizontal and vertical props.", 'Use Scroll in Image galleries with horizontal="auto" for horizontal browsing.', "Apply Scroll with scroll position restoration for maintaining position on navigation.", "Combine Scroll with loading indicators at scroll boundaries for paginated content.", "Use Scroll with ARIA attributes for screen reader scroll region announcements."], e = {
-  component: o,
-  compositionTips: l
-};
-export {
-  e as default
-};

package/ai/schemas/components/Search.js

@@ -1,72 +0,0 @@
-const e = {
-  name: "Search",
-  import: "import { Search } from 'gd-design-library'",
-  description: "Search input component with dropdown results list for real-time filtering and selection of items with customizable rendering and keyboard navigation support.",
-  props: [{
-    name: "items",
-    type: "Array<{name: string, value: unknown}>",
-    description: "Array of items to be searched and displayed in the dropdown results",
-    default: []
-  }, {
-    name: "value",
-    type: "string",
-    description: "Current value of the search input field"
-  }, {
-    name: "placeholder",
-    type: "string",
-    description: "Placeholder text shown when search input is empty",
-    default: "Search"
-  }, {
-    name: "emptyItemsResult",
-    type: "string | ReactNode",
-    description: "Text or component displayed when no items match the search query",
-    default: "No results found"
-  }, {
-    name: "width",
-    type: "string | number",
-    description: "Width of the search component",
-    default: "306px"
-  }, {
-    name: "onType",
-    type: "(value: string) => void",
-    description: "Callback function triggered on input change for custom search logic"
-  }, {
-    name: "onChange",
-    type: "(event: ChangeEvent<HTMLInputElement>) => void",
-    description: "Standard onChange handler for the search input field"
-  }, {
-    name: "onSelect",
-    type: "(props: {event: Event, data?: Option, index?: number}) => void",
-    description: "Callback fired when an item is selected from the dropdown results"
-  }, {
-    name: "renderOption",
-    type: "(option: SearchResultOption) => ReactNode",
-    description: "Custom render function for dropdown option items"
-  }, {
-    name: "aria-controls",
-    type: "string",
-    description: "ID of the element controlled by the search input for accessibility"
-  }, {
-    name: "disabled",
-    type: "boolean",
-    description: "Whether the search input is disabled",
-    default: !1
-  }, {
-    name: "autoFocus",
-    type: "boolean",
-    description: "Whether the search input should auto-focus on mount",
-    default: !1
-  }, {
-    name: "maxHeight",
-    type: "string",
-    description: "Maximum height of the dropdown results list",
-    default: "240px"
-  }],
-  examples: ['<Search items={products} value={query} onChange={handleSearch} onSelect={handleSelect} placeholder="Search products..." />', "<Search items={users} renderOption={(user) => <FlexContainer><Avatar src={user.avatar} />{user.name}</FlexContainer>} />", '<Search items={filteredItems} emptyItemsResult="No matching items found" onType={handleRealTimeSearch} />']
-}, t = ["Use Search with items array for searchable dropdown selection combining text input with item selection.", "Apply Search onType callback for custom search logic implementation like fuzzy search or API calls.", "Set Search renderOption to customize result display with icons, badges, or rich content layouts.", "Use Search value with controlled component pattern and onChange for state management.", "Apply Search emptyItemsResult with helpful message or suggestions when no matches are found.", "Combine Search with debounced onType for performance optimization with large datasets or API calls.", 'Use Search placeholder with clear instructions like "Search by name, email, or ID" for user guidance.', "Apply Search width to match form field widths for consistent form layouts.", "Set Search maxHeight for dropdown to limit result list height with scrolling for many results.", "Use Search with Avatar in renderOption for user search with profile pictures.", "Apply Search disabled during data loading or based on user permissions.", "Combine Search with InlineNotification to show search tips or validation messages.", "Use Search aria-controls with results container ID for screen reader accessibility.", "Apply Search autoFocus for search-focused interfaces like search pages or modals.", "Set Search items with filtered array based on user input for client-side search.", "Use Search onSelect to navigate to selected item or update application state.", "Apply Search with Icon in renderOption for category or type indicators.", "Combine Search with keyboard navigation (arrow keys, Enter, Escape) for power users.", "Use Search in ChatContainer header for conversation or contact search.", "Apply Search with real-time filtering updating items array as user types.", "Set Search renderOption with Typography for consistent text styling in results.", "Use Search with empty state component in emptyItemsResult showing suggestions or help.", "Apply Search in Modal for focused search experiences without page navigation.", "Combine Search with Badge in renderOption to show counts or status indicators.", "Use Search items with async data fetching triggered by onType callback.", "Apply Search with highlight matching text in renderOption for better visibility.", "Set Search with minimum character requirement before showing results.", "Use Search in navigation bars for global site search functionality.", "Apply Search with recent searches or popular items when input is empty.", "Combine Search with category filtering to scope search to specific item types.", "Use Search renderOption with conditional rendering for different item types.", "Apply Search with loading state in emptyItemsResult while fetching results.", "Set Search with fuzzy matching algorithm for typo-tolerant search.", "Use Search in tables or lists for filtering displayed data.", "Apply Search with voice input integration for accessibility.", "Combine Search with Select for advanced search with multiple criteria.", "Use Search items with weighted results showing most relevant first.", "Apply Search with search history stored in localStorage for quick access.", "Set Search with auto-complete suggestions based on partial matches.", "Use Search in e-commerce for product search with image previews in renderOption.", "Apply Search with clear button in input for quick search reset.", "Combine Search with Router navigation on item selection for page routing.", "Use Search renderOption with Price component for product search results.", "Apply Search with keyboard shortcuts (Cmd/Ctrl+K) for quick access.", "Set Search with analytics tracking on searches and selections.", "Use Search in documentation sites for content search and navigation.", "Apply Search with synonyms or alternative terms for better matching.", "Combine Search with filters UI for refined search experiences.", "Use Search items with pagination for large result sets.", "Apply Search with responsive design adjusting width and layout on mobile."], r = {
-  component: e,
-  compositionTips: t
-};
-export {
-  r as default
-};

package/ai/schemas/components/Select.js

@@ -1,84 +0,0 @@
-const e = {
-  name: "Select",
-  import: "import { Select } from 'gd-design-library'",
-  description: "Dropdown selection component with customizable options and behavior.",
-  props: [{
-    name: "items",
-    type: "Array<{name: string, value: unknown}>",
-    required: !0,
-    description: "Array of items to be displayed in the select dropdown",
-    default: []
-  }, {
-    name: "value",
-    type: "unknown",
-    description: "Currently selected value"
-  }, {
-    name: "placeholder",
-    type: "string",
-    description: "Text to display when no value is selected",
-    default: "Select"
-  }, {
-    name: "onSelect",
-    type: "(props: {event: Event, data?: Option, index?: number}) => void",
-    description: "Callback when item is selected"
-  }, {
-    name: "onChange",
-    type: "(data: {name: string, value: unknown}) => void",
-    description: "Callback fired when value changes"
-  }, {
-    name: "width",
-    type: "string",
-    description: "Width of the select component"
-  }, {
-    name: "minWidth",
-    type: "string",
-    description: "Minimum width of the select component",
-    default: "306px"
-  }, {
-    name: "maxWidth",
-    type: "string",
-    description: "Maximum width of the select component",
-    default: "initial"
-  }, {
-    name: "dropdownMaxHeight",
-    type: "string",
-    description: "Maximum height of the dropdown list",
-    default: "240px"
-  }, {
-    name: "adornmentStart",
-    type: "ReactNode",
-    description: "Element to be rendered at the start of the select"
-  }, {
-    name: "adornmentEnd",
-    type: "ReactNode",
-    description: "Element to be rendered at the end of the select"
-  }, {
-    name: "disabled",
-    type: "boolean",
-    description: "Whether the select is disabled",
-    default: !1
-  }, {
-    name: "autoOpen",
-    type: "boolean",
-    description: "Whether to automatically open the dropdown"
-  }, {
-    name: "renderOption",
-    type: "(value: {item: Option, index: number, isActiveItem: boolean, className: string}) => ReactNode",
-    description: "Custom renderer for option items"
-  }, {
-    name: "itemStringifier",
-    type: "(data: {name: string, value: unknown}) => string",
-    description: "Function to convert item value to display string"
-  }, {
-    name: "emptyItemsResult",
-    type: "ReactNode",
-    description: "Text or Component to display when no items are available"
-  }],
-  examples: ['<Select items={[{name: "Option 1", value: "1"}]} value={selectedValue} onChange={handleChange} placeholder="Choose an option" />']
-}, t = ["Use Select for dropdown choices with items array containing {name, value} objects.", "Set Select placeholder prop to provide clear instruction text when no value is selected.", "Use Select onChange handler to update state when user selects an option.", "For Select with many options, leverage dropdownMaxHeight to limit dropdown size and enable scrolling.", "Consider using Select renderOption for custom option display with icons or additional info.", "Use Select adornmentStart/End for icons or badges to enhance visual context.", "Set Select width or minWidth/maxWidth for consistent form field alignment.", "Provide emptyItemsResult in Select when items array might be empty to guide users.", "Use Select itemStringifier when item values need custom string formatting for display.", "Disable Select component when form is submitting or based on other field dependencies."], n = {
-  component: e,
-  compositionTips: t
-};
-export {
-  n as default
-};

package/ai/schemas/components/Separator.js

@@ -1,62 +0,0 @@
-const e = {
-  name: "Separator",
-  import: "import { Separator } from 'gd-design-library'",
-  description: "Visual divider component for separating content sections with customizable orientation, styling, and optional text labels for enhanced visual hierarchy and content organization.",
-  props: [{
-    name: "orientation",
-    type: "Orientation",
-    description: "The orientation of the separator line (horizontal or vertical)",
-    default: "horizontal",
-    enum: ["horizontal", "vertical"]
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom styles for the separator including backgroundColor, border, margin, and padding",
-    default: {}
-  }, {
-    name: "length",
-    type: "string",
-    description: 'The length of the separator in the primary direction (e.g., "100px", "50%", "100%")'
-  }, {
-    name: "color",
-    type: "string",
-    description: "The color of the separator line"
-  }, {
-    name: "size",
-    type: "SizeVariant",
-    description: "The thickness/size of the separator line",
-    enum: ["xs", "sm", "md", "lg", "xl", "xxl"]
-  }, {
-    name: "variant",
-    type: "SeparatorVariant",
-    description: "The visual style variant of the separator (solid, dashed, or dotted)",
-    enum: ["solid", "dash", "dot"]
-  }, {
-    name: "as",
-    type: "string",
-    description: "The HTML element to render the separator as",
-    default: "div",
-    enum: ["div", "hr", "span"]
-  }, {
-    name: "label",
-    type: "string",
-    description: "Text to display within the separator for context or labeling sections"
-  }, {
-    name: "labelPosition",
-    type: "SeparatorLabelPosition",
-    description: "The position of the label within the separator when present",
-    default: "center",
-    enum: ["start", "center", "end"]
-  }, {
-    name: "labelColor",
-    type: "string",
-    description: "The color of the label text when present"
-  }],
-  examples: ["<Separator />", '<Separator variant="dash" color="#ccc" />', '<Separator orientation="vertical" length="200px" />', '<Separator label="OR" labelPosition="center" />', '<Separator variant="dot" size="sm" color="primary" />', '<Separator as="hr" styles={{margin: "20px 0"}} />']
-}, t = ["Use Separator to visually divide related content blocks.", 'Prefer orientation="horizontal" for stacked layouts; "vertical" for toolbars and side-by-side layouts.', 'Add a label like "OR" to communicate branching actions.', "Match color and size to theme for consistent visual rhythm.", "Use Separator between content sections to create visual hierarchy and improve readability.", 'Apply Separator orientation="horizontal" (default) for dividing vertical content stacks.', 'Set Separator orientation="vertical" for dividing horizontal layouts like sidebars or columns.', 'Use Separator variant="solid" for strong visual divisions between major sections.', 'Apply Separator variant="dash" or "dot" for softer, less prominent content divisions.', "Set Separator color to match theme colors for consistent visual language across the app.", 'Use Separator with label prop for contextual dividers like "OR" in login forms or "AND" in filters.', 'Apply Separator labelPosition="center" (default) for balanced label placement in dividers.', 'Set Separator labelPosition="start" or "end" for asymmetric designs or directional flow.', 'Use Separator size="sm" or "xs" for subtle divisions in dense content areas.', 'Apply Separator size="lg" or "xl" for prominent section breaks in landing pages.', "Combine Separator with Card components to divide content within cards without additional borders.", 'Use Separator as="hr" for semantic HTML when dividing main content sections.', 'Apply Separator as="span" when using inline or within text content.', 'Set Separator length="100%" for full-width dividers or specific values for partial dividers.', "Use Separator with margin in styles prop for consistent spacing above and below dividers.", "Apply Separator between Form field groups to organize complex forms into logical sections.", "Combine Separator with Column or Row layouts for properly spaced content divisions.", 'Use Separator variant="solid" with label for login forms showing "OR" between auth methods.', 'Apply Separator orientation="vertical" between navigation items in horizontal menus.', "Set Separator with consistent color and size across similar UI contexts for coherence.", "Use Separator with labelColor matching Typography colors for consistent text styling.", "Apply Separator in List components between grouped items for visual organization.", "Combine Separator with FlexContainer for responsive dividers that adapt to layout changes.", 'Use Separator as="hr" with no label for semantic content breaks in articles or blog posts.', "Apply Separator with padding styles to create breathing room around the divider line.", 'Set Separator variant="dot" for decorative divisions in marketing or landing pages.', "Use Separator between ChatContainer messages for conversation threading or date breaks.", "Apply Separator in Modal footer above action buttons to separate content from actions.", "Combine Separator with conditional rendering to show dividers based on content availability.", "Use Separator with custom backgroundColor in styles for branded or themed dividers.", "Apply Separator between Select option groups for categorized dropdown menus.", "Set Separator with border styles for double-line or custom divider effects.", "Use Separator in Card layouts between header, body, and footer sections.", 'Apply Separator orientation="vertical" with fixed height in toolbars between tool groups.', "Combine Separator with Icon components in label for icon-enhanced dividers.", 'Use Separator variant="dash" in printable content for better print rendering.', "Apply Separator with responsive orientation changing from vertical to horizontal on mobile.", "Set Separator with opacity styles for subtle, watermark-like divisions.", "Use Separator between Breadcrumbs and page content for clear navigation separation.", "Apply Separator in Table components between thead and tbody for visual structure.", "Combine Separator with animation classes for animated divider appearances.", 'Use Separator with aria-hidden="true" for purely decorative dividers.', "Apply Separator between Tab panels content for clear section boundaries.", "Set Separator with gradient backgrounds via styles for modern divider effects.", "Use Separator in dropdown menus between menu item groups for logical grouping.", "Apply Separator with consistent spacing patterns using margin for rhythm in layouts.", "Combine Separator with theme-aware styling for dark/light mode compatibility.", "Use Separator label with Typography component for rich text divider labels."], o = {
-  component: e,
-  compositionTips: t
-};
-export {
-  o as default
-};

package/ai/schemas/components/Skeleton.js

@@ -1,48 +0,0 @@
-const e = {
-  name: "Skeleton",
-  import: "import { Skeleton } from 'gd-design-library'",
-  description: "Loading placeholder component that displays animated shapes to indicate content is being loaded, improving perceived performance by showing the structure of upcoming content.",
-  props: [{
-    name: "variant",
-    type: "SkeletonVariant",
-    description: "Controls the shape of the skeleton element",
-    default: "SkeletonVariant.Rounded",
-    enum: ["rounded", "circular", "rectangular"]
-  }, {
-    name: "width",
-    type: "string",
-    description: "Sets the width of the skeleton. Accepts any valid CSS width value",
-    default: "auto"
-  }, {
-    name: "height",
-    type: "string",
-    description: "Sets the height of the skeleton. Accepts any valid CSS height value",
-    default: "auto"
-  }, {
-    name: "animationName",
-    type: "string",
-    description: "Allows for custom animation by overriding the default CSS animation name",
-    default: "pulse"
-  }, {
-    name: "className",
-    type: "string",
-    description: "Provides a way to apply custom CSS classes, such as Tailwind utility classes for animations",
-    default: ""
-  }, {
-    name: "children",
-    type: "ReactNode",
-    description: "Content to be rendered inside the skeleton wrapper for complex skeleton layouts"
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom CSS properties to apply to the skeleton including backgroundColor, borderRadius, and opacity",
-    default: {}
-  }],
-  examples: ['<Skeleton variant="rectangular" width="100%" height="200px" />', '<Skeleton variant="circular" width="40px" height="40px" />', '<Skeleton variant="rounded" width="250px" height="20px" animationName="shimmer" />', '<Skeleton styles={{backgroundColor: "#f0f0f0", borderRadius: "8px"}}><Column gap="8px"><Skeleton height="20px" /><Skeleton height="20px" width="80%" /></Column></Skeleton>']
-}, t = ["Use Skeleton to hint layout while content loads, then replace with actual UI.", "Prefer lightweight shapes instead of detailed placeholders to avoid layout shift.", "Match Skeleton sizes to final content to reduce reflow.", "Use animationName to align with your design system (pulse or shimmer).", 'Use Skeleton variant="rectangular" for image placeholders with matching dimensions to prevent layout shift.', 'Apply Skeleton variant="circular" for avatar loading states with equal width and height.', 'Set Skeleton variant="rounded" for text content placeholders like headings and paragraphs.', 'Use Skeleton with width="100%" for full-width content blocks during loading.', "Apply Skeleton height matching expected content height to maintain layout stability.", "Combine multiple Skeleton components in Column for structured content loading states.", 'Use Skeleton animationName="pulse" (default) for subtle loading animation.', 'Apply Skeleton animationName="shimmer" or custom animation for enhanced loading effects.', "Set Skeleton with consistent spacing between elements using Column gutter for realistic layouts.", "Use Skeleton in Card components to show loading state for card content.", 'Apply Skeleton variant="rectangular" with borderRadius in styles for rounded image placeholders.', "Combine Skeleton with conditional rendering to show when data is loading.", "Use Skeleton width with percentage values for responsive loading placeholders.", "Apply Skeleton in List items to show loading state for list content.", "Set Skeleton with different widths to simulate varying text lengths in paragraphs.", "Use Skeleton children prop to nest multiple skeletons for complex layouts.", "Apply Skeleton in Table cells for loading state in data tables.", "Combine Skeleton with FlexContainer for horizontal loading layouts.", 'Use Skeleton height="1em" for inline text loading within Typography components.', "Apply Skeleton styles={{opacity: 0.7}} for subtle loading appearance.", "Set Skeleton backgroundColor via styles to match your theme colors.", "Use Skeleton in Form fields as placeholder while fetching field data.", 'Apply Skeleton variant="circular" for icon or badge loading states.', "Combine Skeleton with fade-out transition when content loads for smooth UX.", "Use Skeleton in ChatContainer for message loading indicators.", "Apply Skeleton with consistent animation speed across all loading states.", 'Set Skeleton with aria-label="Loading" for accessibility in screen readers.', "Use Skeleton in Select dropdown while options are being fetched.", 'Apply Skeleton variant="rounded" with small height for button loading states.', "Combine Skeleton with error boundaries to show fallback loading states.", "Use Skeleton in Modal content while async data is being loaded.", "Apply Skeleton with minHeight to prevent collapsing during loading.", "Set Skeleton count pattern for repeating elements like list items or grid cards.", "Use Skeleton in navigation menus while menu items are being fetched.", "Apply Skeleton with responsive heights based on viewport for mobile optimization.", "Combine Skeleton with data fetching libraries for automatic loading states.", 'Use Skeleton variant="rectangular" for chart or graph placeholders.', "Apply Skeleton in Image components as placeholder prop for loading state.", "Set Skeleton with delay to prevent flash for fast-loading content.", "Use Skeleton in Breadcrumbs while path is being determined.", "Apply Skeleton with custom className for third-party animation libraries.", "Combine Skeleton with suspense boundaries for React Suspense integration.", "Use Skeleton in search results while data is being fetched.", "Apply Skeleton with grid layout for card grid loading states.", "Set Skeleton with consistent aspect ratios for media content placeholders.", "Use Skeleton in user profiles for avatar and bio loading states.", "Apply Skeleton with staggered animations for sequential loading effect.", "Combine Skeleton with intersection observer for lazy-loaded content.", "Use Skeleton in dashboards for widget loading states.", "Apply Skeleton with theme-aware colors for dark/light mode compatibility."], o = {
-  component: e,
-  compositionTips: t
-};
-export {
-  o as default
-};