gd-design-library 0.7.0 → 0.7.2

package/ai/schemas/components/ContentCarousel.js

@@ -1,72 +0,0 @@
-const e = {
-  name: "ContentCarousel",
-  import: "import { ContentCarousel } from 'gd-design-library'",
-  description: "Generic carousel component for displaying arrays of custom content with flexible rendering. Ideal for product cards, testimonials, feature showcases, or any repeated content that benefits from carousel navigation.",
-  props: [{
-    name: "items",
-    type: "T[]",
-    description: "Array of items to be displayed in the carousel. Can be any data type (objects, strings, numbers, etc.)",
-    required: !0,
-    default: []
-  }, {
-    name: "renderItem",
-    type: "(item: T, index: number) => ReactNode",
-    description: "Function to render each item in the carousel. Receives the item and its index, returns the JSX to display",
-    required: !0
-  }, {
-    name: "showArrows",
-    type: "boolean",
-    description: "Controls the visibility of navigation arrow buttons for previous/next navigation"
-  }, {
-    name: "showDots",
-    type: "boolean",
-    description: "Controls the visibility of dot indicators for slide position and direct navigation"
-  }, {
-    name: "isFocusable",
-    type: "boolean",
-    description: "Enables keyboard navigation using arrow keys and focus management for accessibility"
-  }, {
-    name: "autoPlay",
-    type: "boolean",
-    description: "Enables automatic slide progression"
-  }, {
-    name: "autoPlayInterval",
-    type: "number",
-    description: "Time in milliseconds between automatic slide transitions when autoPlay is enabled",
-    default: 3e3
-  }, {
-    name: "loop",
-    type: "boolean",
-    description: "Enables infinite loop scrolling from last item back to first"
-  }, {
-    name: "slidesPerView",
-    type: "number",
-    description: "Number of items visible at once in the carousel viewport",
-    default: 1
-  }, {
-    name: "gap",
-    type: "string",
-    description: "Space between carousel items",
-    default: "0"
-  }, {
-    name: "onSlideChange",
-    type: "(index: number) => void",
-    description: "Callback fired when the active slide changes, receives the new slide index"
-  }, {
-    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: ["<ContentCarousel items={products} renderItem={(product) => <ProductCard {...product} />} showArrows showDots />", "<ContentCarousel items={testimonials} renderItem={(t, i) => <TestimonialCard key={i} quote={t.quote} author={t.author} />} autoPlay autoPlayInterval={5000} />", '<ContentCarousel items={features} renderItem={(feature) => <FlexContainer gap="16px"><Icon name={feature.icon} /><Typography>{feature.title}</Typography></FlexContainer>} slidesPerView={3} gap="20px" />', "<ContentCarousel items={images} renderItem={(src, index) => <Image src={src} alt={`Slide ${index + 1}`} />} showDots loop isFocusable />", '<ContentCarousel items={teamMembers} renderItem={(m) => <Card padding="16px"><Avatar src={m.avatar} /><Typography>{m.name}</Typography></Card>} slidesPerView={4} showArrows />']
-}, t = ["Use renderItem to keep rendering logic colocated and reusable across pages.", "Set slidesPerView > 1 for galleries of small items; 1 for hero content.", "Enable autoPlay for passive showcases; keep it off for interactive content.", "Use onSlideChange to sync external state, e.g., captions or counters.", "Use ContentCarousel with items array and renderItem function for complete control over slide content rendering.", "Apply ContentCarousel for product showcases with renderItem returning Card components with product details.", "Set ContentCarousel slidesPerView greater than 1 for multi-item carousels showing several items at once.", "Use ContentCarousel with showArrows and showDots based on device type - dots for mobile, arrows for desktop.", "Apply ContentCarousel isFocusable={true} for keyboard navigation support improving accessibility.", "Combine ContentCarousel with Card components in renderItem for structured content presentation.", "Use ContentCarousel autoPlay with autoPlayInterval for testimonials or featured content rotation.", "Set ContentCarousel gap prop to create visual separation between items in multi-item views.", "Apply ContentCarousel loop={true} for continuous browsing without hard stops at ends.", "Use ContentCarousel renderItem with conditional rendering for different item types in mixed content.", "Combine ContentCarousel with responsive slidesPerView adjusting item count based on viewport.", "Apply ContentCarousel onSlideChange to update external UI like item descriptions or counters.", "Use ContentCarousel with Avatar components in renderItem for team member or user carousels.", "Set ContentCarousel with fixed height items in renderItem to prevent layout shifts.", "Apply ContentCarousel for image galleries with renderItem returning Image components.", "Use ContentCarousel items with filtered arrays for dynamic content based on user selections.", "Combine ContentCarousel with InlineNotification in renderItem for items with status messages.", "Apply ContentCarousel showArrows={false} on touch devices relying on swipe gestures.", "Use ContentCarousel with Typography components in renderItem for text-based content slides.", "Set ContentCarousel slidesPerView={1} for full-width hero banners or feature highlights.", "Apply ContentCarousel with loading skeletons in renderItem while data is being fetched.", "Use ContentCarousel for testimonial sections with renderItem showing quotes and authors.", "Combine ContentCarousel with Icon components in renderItem for feature or benefit lists.", "Apply ContentCarousel gap with consistent values matching your design system spacing.", "Use ContentCarousel with Button components in renderItem for actionable slide content.", "Set ContentCarousel className for applying custom carousel styling via CSS.", "Apply ContentCarousel with FlexContainer in renderItem for complex slide layouts.", "Use ContentCarousel items.map() with unique keys in renderItem for React optimization.", "Combine ContentCarousel with Select component for filtering displayed carousel items.", "Apply ContentCarousel autoPlay={false} for user-controlled navigation in product views.", "Use ContentCarousel with consistent aspect ratios in renderItem for smooth transitions.", "Set ContentCarousel with responsive gap values for mobile vs desktop spacing.", "Apply ContentCarousel for blog post previews with renderItem showing post cards.", "Use ContentCarousel with Badge components in renderItem for items with status indicators.", "Combine ContentCarousel with lazy loading in renderItem for performance optimization.", "Apply ContentCarousel showDots with custom styling for branded dot indicators.", "Use ContentCarousel for category showcases with renderItem displaying category cards.", "Set ContentCarousel with aria-labels in renderItem for screen reader accessibility.", "Apply ContentCarousel for timeline events with renderItem showing chronological items.", "Use ContentCarousel with Separator in renderItem for visually divided content.", "Combine ContentCarousel with hover effects in renderItem for interactive slides.", 'Apply ContentCarousel slidesPerView="auto" for variable width items fitting naturally.', "Use ContentCarousel for pricing plans with renderItem showing plan cards.", "Set ContentCarousel with onClick handlers in renderItem for clickable slides.", "Apply ContentCarousel for portfolio items with renderItem displaying project cards.", "Use ContentCarousel with video content in renderItem pausing on slide change.", "Combine ContentCarousel with Modal triggers in renderItem for detailed views.", "Apply ContentCarousel for social media feeds with renderItem showing posts.", "Use ContentCarousel with progress indicators when items represent steps or stages.", "Use ContentCarousel with items array and renderItem function for complete control over slide content rendering.", "Apply ContentCarousel for product showcases with renderItem returning Card components with product details.", "Set ContentCarousel slidesPerView greater than 1 for multi-item carousels showing several items at once.", "Use ContentCarousel with showArrows and showDots based on device type - dots for mobile, arrows for desktop.", "Apply ContentCarousel isFocusable={true} for keyboard navigation support improving accessibility.", "Combine ContentCarousel with Card components in renderItem for structured content presentation.", "Use ContentCarousel autoPlay with autoPlayInterval for testimonials or featured content rotation.", "Set ContentCarousel gap prop to create visual separation between items in multi-item views.", "Apply ContentCarousel loop={true} for continuous browsing without hard stops at ends.", "Use ContentCarousel renderItem with conditional rendering for different item types in mixed content.", "Combine ContentCarousel with responsive slidesPerView adjusting item count based on viewport.", "Apply ContentCarousel onSlideChange to update external UI like item descriptions or counters.", "Use ContentCarousel with Avatar components in renderItem for team member or user carousels.", "Set ContentCarousel with fixed height items in renderItem to prevent layout shifts.", "Apply ContentCarousel for image galleries with renderItem returning Image components.", "Use ContentCarousel items with filtered arrays for dynamic content based on user selections.", "Combine ContentCarousel with InlineNotification in renderItem for items with status messages.", "Apply ContentCarousel showArrows={false} on touch devices relying on swipe gestures.", "Use ContentCarousel with Typography components in renderItem for text-based content slides.", "Set ContentCarousel slidesPerView={1} for full-width hero banners or feature highlights.", "Apply ContentCarousel with loading skeletons in renderItem while data is being fetched.", "Use ContentCarousel for testimonial sections with renderItem showing quotes and authors.", "Combine ContentCarousel with Icon components in renderItem for feature or benefit lists.", "Apply ContentCarousel gap with consistent values matching your design system spacing.", "Use ContentCarousel with Button components in renderItem for actionable slide content.", "Set ContentCarousel className for applying custom carousel styling via CSS.", "Apply ContentCarousel with FlexContainer in renderItem for complex slide layouts.", "Use ContentCarousel items.map() with unique keys in renderItem for React optimization.", "Combine ContentCarousel with Select component for filtering displayed carousel items.", "Apply ContentCarousel autoPlay={false} for user-controlled navigation in product views.", "Use ContentCarousel with consistent aspect ratios in renderItem for smooth transitions.", "Set ContentCarousel with responsive gap values for mobile vs desktop spacing.", "Apply ContentCarousel for blog post previews with renderItem showing post cards.", "Use ContentCarousel with Badge components in renderItem for items with status indicators.", "Combine ContentCarousel with lazy loading in renderItem for performance optimization.", "Apply ContentCarousel showDots with custom styling for branded dot indicators.", "Use ContentCarousel for category showcases with renderItem displaying category cards.", "Set ContentCarousel with aria-labels in renderItem for screen reader accessibility.", "Apply ContentCarousel for timeline events with renderItem showing chronological items.", "Use ContentCarousel with Separator in renderItem for visually divided content.", "Combine ContentCarousel with hover effects in renderItem for interactive slides.", 'Apply ContentCarousel slidesPerView="auto" for variable width items fitting naturally.', "Use ContentCarousel for pricing plans with renderItem showing plan cards.", "Set ContentCarousel with onClick handlers in renderItem for clickable slides.", "Apply ContentCarousel for portfolio items with renderItem displaying project cards.", "Use ContentCarousel with video content in renderItem pausing on slide change.", "Combine ContentCarousel with Modal triggers in renderItem for detailed views.", "Apply ContentCarousel for social media feeds with renderItem showing posts.", "Use ContentCarousel with progress indicators when items represent steps or stages."], o = {
-  component: e,
-  compositionTips: t
-};
-export {
-  o as default
-};

package/ai/schemas/components/Counter.js

@@ -1,37 +0,0 @@
-const e = {
-  name: "Counter",
-  import: "import { Counter } from 'gd-design-library'",
-  description: "Numeric input component with increment/decrement controls for selecting values within a defined range. Provides accessible controls for quantity selection, settings adjustment, or any numeric value input.",
-  props: [{
-    name: "initial",
-    type: "number",
-    description: "Initial value of the counter",
-    default: 1
-  }, {
-    name: "min",
-    type: "number",
-    description: "Minimum allowed value",
-    default: 1
-  }, {
-    name: "max",
-    type: "number",
-    description: "Maximum allowed value",
-    default: 999
-  }, {
-    name: "onCounterChange",
-    type: "(value: number) => void",
-    description: "Callback function triggered when counter value changes"
-  }, {
-    name: "style",
-    type: "React.CSSProperties",
-    description: "CSS properties applied to the counter container",
-    default: {}
-  }],
-  examples: ["<Counter initial={1} min={1} max={10} onCounterChange={handleQuantityChange} />", '<Counter initial={5} min={0} max={100} style={{width: "150px"}} />', "<Counter min={0} max={999} onCounterChange={(value) => updateCartQuantity(itemId, value)} />", '<Counter initial={25} min={10} max={50} style={{fontSize: "18px"}} />']
-}, t = ["Use Counter for quantity selectors; enforce min to avoid zero/negative values.", "Clamp the value within [min, max] and disable decrement/increment at bounds.", "Debounce onCounterChange when updates trigger heavy recalculations or API calls.", "Place Counter next to Price to reflect total cost updates dynamically.", "Use keyboard support (arrow keys) and proper aria-labels for accessibility.", "Use Counter for quantity selectors in shopping carts with min={1} to prevent zero quantities.", "Apply Counter in settings panels for numeric preferences like font size or timeout values.", "Set Counter min={0} for optional quantities where zero is a valid selection.", "Use Counter onCounterChange to update state and trigger calculations like price totals.", "Apply Counter with max value based on inventory or availability for e-commerce.", "Combine Counter with Typography labels for clear context about what is being counted.", "Use Counter initial prop to set default values based on user preferences or previous selections.", "Apply Counter style prop to adjust width for different numeric ranges (narrow for 1-10, wider for 1-999).", "Set Counter in Card components with product information for organized product listings.", "Use Counter with disabled state based on product availability or user permissions.", "Apply Counter with FlexContainer for inline layouts with labels and units.", "Combine Counter with real-time validation showing warnings when approaching limits.", "Use Counter min and max dynamically based on business rules or user tier.", "Apply Counter in forms for numeric field input with better UX than text inputs.", "Set Counter with consistent styling across similar contexts for familiar interactions.", "Use Counter onCounterChange with debouncing for expensive operations like API calls.", "Apply Counter with localStorage to persist quantities across sessions.", "Combine Counter with InlineNotification for stock warnings or limit messages.", "Use Counter for pagination controls with min={1} and max={totalPages}.", "Apply Counter style with larger touch targets on mobile for better usability.", "Set Counter with keyboard support allowing arrow keys for increment/decrement.", "Use Counter in comparison tables for selecting quantities of different items.", "Apply Counter with animation for smooth value transitions.", "Combine Counter with price display updating in real-time as quantity changes.", "Use Counter for time inputs like hours or minutes with appropriate min/max.", "Apply Counter with visual feedback when reaching min or max limits.", "Set Counter in Modal dialogs for quantity selection before adding to cart.", "Use Counter with batch update support for multiple items simultaneously.", "Apply Counter with undo functionality for accidental value changes.", "Combine Counter with tooltips showing bulk discount tiers."], n = {
-  component: e,
-  compositionTips: t
-};
-export {
-  n as default
-};

package/ai/schemas/components/DragAndDropFiles.js

@@ -1,50 +0,0 @@
-const e = {
-  name: "DragAndDropFiles",
-  import: "import { DragAndDropFiles } from 'gd-design-library'",
-  description: "File upload component with drag-and-drop functionality, providing visual feedback during drag operations and customizable drop zones for intuitive file uploading experiences.",
-  props: [{
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom CSS properties for styling the drag and drop container",
-    default: {}
-  }, {
-    name: "triggerRef",
-    type: "RefObject<HTMLElement>",
-    description: "Reference to the element that initiates the drag operation, typically a button or clickable area"
-  }, {
-    name: "targetRef",
-    type: "RefObject<HTMLElement>",
-    description: "Reference to the drop zone element where files can be dropped"
-  }, {
-    name: "dragOverContent",
-    type: "ReactNode",
-    description: "Content to display when files are being dragged over the drop zone, such as instructions or visual indicators"
-  }, {
-    name: "onDragEnter",
-    type: "(event: DragEvent) => void",
-    description: "Callback fired when a drag operation enters the drop zone area"
-  }, {
-    name: "onDragOver",
-    type: "(event: DragEvent) => void",
-    description: "Callback fired continuously while dragging over the drop zone"
-  }, {
-    name: "onDragLeave",
-    type: "(event: DragEvent) => void",
-    description: "Callback fired when a drag operation leaves the drop zone area"
-  }, {
-    name: "onDrop",
-    type: "(files: FileList, event: DragEvent) => void",
-    description: "Callback fired when files are dropped in the zone, receives the FileList and drag event"
-  }, {
-    name: "children",
-    type: "ReactNode",
-    description: "Content to render within the drop zone when not in drag-over state"
-  }],
-  examples: ["<DragAndDropFiles onDrop={handleFileUpload} dragOverContent={<Typography>Drop files here</Typography>}>{uploadButton}</DragAndDropFiles>", '<DragAndDropFiles targetRef={dropZoneRef} onDrop={(files) => processFiles(files)} styles={{border: "2px dashed #ccc"}}><Icon name="upload" /><Typography>Drag files here or click to browse</Typography></DragAndDropFiles>', "<DragAndDropFiles onDragEnter={() => setIsDragging(true)} onDragLeave={() => setIsDragging(false)} onDrop={handleDrop}>{isDragging ? <Loader /> : <InputFile />}</DragAndDropFiles>", "<DragAndDropFiles triggerRef={buttonRef} targetRef={containerRef} dragOverContent={<Card isHighlighted><Typography>Release to upload</Typography></Card>}>{children}</DragAndDropFiles>"]
-}, r = ["Visually highlight the drop zone on drag over to guide the user.", "Validate file types and sizes in onDrop before uploading.", "Provide keyboard-accessible alternatives to drag-and-drop for accessibility.", "Show progress indicators and error messages for upload status.", "Use DragAndDropFiles with targetRef pointing to a visually distinct drop zone container for clear interaction boundaries.", "Apply DragAndDropFiles dragOverContent with clear visual feedback like highlighted borders or overlay to indicate active drop zone.", "Set DragAndDropFiles onDrop handler with file validation logic checking file types, sizes, and counts before processing.", "Use DragAndDropFiles with Card component as wrapper providing bordered drop zone with padding for comfortable interaction area.", "Apply DragAndDropFiles styles with dashed border and subtle background color to indicate droppable area in default state.", "Combine DragAndDropFiles with InputFile as fallback for browsers that do not support drag and drop or for user preference.", "Use DragAndDropFiles onDragEnter and onDragLeave to manage visual state changes like border color or background highlights.", 'Apply DragAndDropFiles dragOverContent with Icon and Typography showing "Drop files here" message for clear user guidance.', "Set DragAndDropFiles with InlineNotification after onDrop to show upload success, errors, or file validation messages.", "Use DragAndDropFiles targetRef with useRef hook to properly reference the drop zone DOM element for event handling.", "Apply DragAndDropFiles with multiple file support showing file count and list in dragOverContent for batch uploads.", "Combine DragAndDropFiles with ProgressBar component to show upload progress after files are dropped.", "Use DragAndDropFiles onDragOver with preventDefault() to enable drop functionality and prevent default browser behavior.", "Apply DragAndDropFiles with file type restrictions in onDrop handler matching accept attribute patterns from InputFile.", "Set DragAndDropFiles children with upload instructions, supported file types, and maximum file size information.", "Use DragAndDropFiles with triggerRef pointing to a button that opens file dialog as alternative to drag and drop.", "Apply DragAndDropFiles with visual transitions using CSS classes toggled by drag state for smooth user experience.", "Combine DragAndDropFiles with image preview generation showing thumbnails of dropped images before upload.", "Use DragAndDropFiles onDrop with FileReader API to read file contents for client-side processing or validation.", "Apply DragAndDropFiles with disabled state styling when uploads are in progress or quota is exceeded.", "Set DragAndDropFiles dragOverContent with Loader component when processing dropped files for immediate feedback.", "Use DragAndDropFiles with error boundary to gracefully handle drag and drop API failures in older browsers.", "Apply DragAndDropFiles styles with min-height to ensure adequate drop zone size even with minimal content.", "Combine DragAndDropFiles with file chunking logic in onDrop for large file upload optimization.", "Use DragAndDropFiles with keyboard accessibility providing alternative upload method via Space or Enter key.", "Apply DragAndDropFiles with mobile touch event fallbacks since drag and drop may not work on all mobile devices.", "Set DragAndDropFiles with clear visual distinction between drag-over and default states using contrasting colors.", "Use DragAndDropFiles onDrop with async/await pattern for sequential file processing with error handling.", "Apply DragAndDropFiles with maximum file count validation providing user feedback when limits are exceeded.", "Combine DragAndDropFiles with Modal for file upload confirmation or additional metadata input after drop.", "Use DragAndDropFiles dragOverContent with animation effects like pulse or glow to draw user attention.", "Apply DragAndDropFiles with consistent drop zone styling across the application for familiar interaction patterns.", "Set DragAndDropFiles with data transfer effectAllowed and dropEffect for proper drag operation feedback.", "Use DragAndDropFiles children with FlexContainer layout organizing upload icon, text, and button vertically.", "Apply DragAndDropFiles with file deduplication logic in onDrop preventing duplicate file uploads.", "Combine DragAndDropFiles with cloud storage service integration for direct-to-cloud uploads.", "Use DragAndDropFiles onDragEnter with file type checking to show early validation feedback during drag.", "Apply DragAndDropFiles with responsive design adjusting drop zone size and content based on viewport.", "Set DragAndDropFiles with ARIA attributes for screen reader announcements of drag and drop operations.", "Use DragAndDropFiles dragOverContent with percentage-based upload progress when processing multiple files.", "Apply DragAndDropFiles with cancel upload functionality allowing users to stop in-progress transfers.", "Combine DragAndDropFiles with compression utilities for automatic image optimization before upload.", "Use DragAndDropFiles styles with hover effects on desktop to indicate interactive drop zone area.", "Apply DragAndDropFiles with virus scanning integration for security validation of uploaded files.", "Set DragAndDropFiles with localStorage to persist upload history or resume interrupted uploads.", "Use DragAndDropFiles onDrop with metadata extraction reading EXIF data from images or document properties.", "Apply DragAndDropFiles with retry mechanism for failed uploads with exponential backoff strategy.", "Combine DragAndDropFiles with real-time collaboration features showing who is uploading files.", "Use DragAndDropFiles dragOverContent with file type icons indicating accepted formats visually."], o = {
-  component: e,
-  compositionTips: r
-};
-export {
-  o as default
-};

package/ai/schemas/components/FlexContainer.js

@@ -1,133 +0,0 @@
-const e = {
-  name: "FlexContainer",
-  import: "import { FlexContainer } from 'gd-design-library'",
-  description: "Flexbox-based layout container with gap, alignItems, justifyContent and flexDirection props.",
-  props: [{
-    name: "gap",
-    type: "string",
-    description: "Space between flex items, e.g., 8px, 1rem"
-  }, {
-    name: "alignItems",
-    type: "string",
-    description: "align-items value"
-  }, {
-    name: "justifyContent",
-    type: "string",
-    description: "justify-content value"
-  }, {
-    name: "flexDirection",
-    type: "string",
-    description: "Direction of the flex container layout",
-    default: "Column",
-    enum: ["row", "row-reverse", "column", "column-reverse"]
-  }, {
-    name: "className",
-    type: "string",
-    description: "Additional CSS classes to apply",
-    default: ""
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom inline styles for the container",
-    default: {}
-  }, {
-    name: "width",
-    type: "string",
-    description: "Width of the container",
-    default: "auto"
-  }, {
-    name: "height",
-    type: "string",
-    description: "Height of the container",
-    default: "auto"
-  }, {
-    name: "minWidth",
-    type: "string",
-    description: "Minimum width of the container",
-    default: "none"
-  }, {
-    name: "minHeight",
-    type: "string",
-    description: "Minimum height of the container",
-    default: "none"
-  }, {
-    name: "maxWidth",
-    type: "string",
-    description: "Maximum width of the container",
-    default: "none"
-  }, {
-    name: "maxHeight",
-    type: "string",
-    description: "Maximum height of the container",
-    default: "none"
-  }, {
-    name: "margin",
-    type: "string",
-    description: "Margin around the container",
-    default: "0"
-  }, {
-    name: "marginTop",
-    type: "string",
-    description: "Top margin of the container",
-    default: "0"
-  }, {
-    name: "marginRight",
-    type: "string",
-    description: "Right margin of the container",
-    default: "0"
-  }, {
-    name: "marginBottom",
-    type: "string",
-    description: "Bottom margin of the container",
-    default: "0"
-  }, {
-    name: "marginLeft",
-    type: "string",
-    description: "Left margin of the container",
-    default: "0"
-  }, {
-    name: "padding",
-    type: "string",
-    description: "Padding inside the container",
-    default: "0"
-  }, {
-    name: "paddingTop",
-    type: "string",
-    description: "Top padding of the container",
-    default: "0"
-  }, {
-    name: "paddingRight",
-    type: "string",
-    description: "Right padding of the container",
-    default: "0"
-  }, {
-    name: "paddingBottom",
-    type: "string",
-    description: "Bottom padding of the container",
-    default: "0"
-  }, {
-    name: "paddingLeft",
-    type: "string",
-    description: "Left padding of the container",
-    default: "0"
-  }, {
-    name: "position",
-    type: "string",
-    description: "CSS position property",
-    default: "static",
-    enum: ["static", "relative", "absolute", "fixed", "sticky"]
-  }, {
-    name: "overflow",
-    type: "string",
-    description: "Content overflow behavior",
-    default: "visible",
-    enum: ["visible", "hidden", "scroll", "auto"]
-  }],
-  examples: ['<FlexContainer gap="12px" flexDirection="column" alignItems="center">...</FlexContainer>']
-}, t = ['Use FlexContainer with flexDirection="row" for horizontal layouts and "column" for vertical stacks.', "Apply gap prop in FlexContainer to maintain consistent spacing between child elements.", "Combine FlexContainer alignItems and justifyContent for precise content alignment.", 'Set FlexContainer overflow="auto" for scrollable areas with fixed dimensions.', 'Use FlexContainer position="relative" as a positioning context for absolute children.', "Apply padding to FlexContainer for internal spacing, margin for external spacing.", "Leverage FlexContainer minWidth/maxWidth for responsive layouts that adapt to screen size.", 'Use FlexContainer with width="100%" and maxWidth for full-width responsive containers.', "Nest FlexContainers with different flexDirection values for complex grid-like layouts.", "Apply FlexContainer className for reusable styling patterns across the application.", 'Use Column for vertical layouts instead of FlexContainer with flexDirection="column" for cleaner code.'], n = {
-  component: e,
-  compositionTips: t
-};
-export {
-  n as default
-};

package/ai/schemas/components/Form.js

@@ -1,36 +0,0 @@
-const e = {
-  name: "Form",
-  import: "import { Form } from 'gd-design-library'",
-  description: "Semantic form wrapper component that handles form submission, field changes, and provides a structured container for form elements with built-in event handling.",
-  props: [{
-    name: "onSubmit",
-    type: "(formData: FormSubmitEventData) => void",
-    description: "Handler function called when the form is submitted, receives form data and event"
-  }, {
-    name: "onChange",
-    type: "(formData: FormChangeEventData) => void",
-    description: "Handler function called when any form field value changes, receives change event data"
-  }, {
-    name: "children",
-    type: "ReactNode",
-    description: "Form content elements including inputs, buttons, and other form controls",
-    required: !0
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom CSS styles to apply to the form element",
-    default: {}
-  }, {
-    name: "className",
-    type: "string",
-    description: "Additional CSS class names for styling the form container",
-    default: ""
-  }],
-  examples: ['<Form onSubmit={handleSubmit}><Input name="email" type="email" required /><Button type="submit">Submit</Button></Form>', '<Form onChange={handleFieldChange} className="login-form"><Column gutter={16}>{formFields}</Column></Form>', '<Form onSubmit={handleFormSubmit} styles={{maxWidth: "400px"}}><Card padding="20px">{inputs}</Card></Form>']
-}, o = ["Use Form component as the semantic wrapper for all form elements instead of generic containers.", "Apply Form onSubmit handler with preventDefault to control submission programmatically.", "Set Form onChange handler to track field changes for real-time validation and auto-save.", "Combine Form with Column or FlexContainer inside for organized field layout.", "Use Form with InlineNotification at the top for submission success or error messages.", "Apply Form with sticky submit button on mobile for always-accessible submission.", "Use Form component as the semantic wrapper for all form elements instead of div or FlexContainer.", "Apply Form onSubmit handler with preventDefault to control form submission behavior programmatically.", "Set Form onChange handler to track field changes for real-time validation and auto-save features.", "Use Form with Card component wrapped inside for visually grouped form sections with borders.", 'Apply Form styles={{maxWidth: "600px"}} to limit form width for better readability on large screens.', "Combine Form with Column or FlexContainer inside for organized field layout with proper spacing.", "Use Form className for applying consistent form styling across the application.", "Apply Form onSubmit with async handling for API calls, showing loading states during submission.", "Set Form onChange to enable/disable submit Button based on form validity.", "Use Form with nested Card components for multi-section forms like user profiles or settings.", "Apply Form with InlineNotification at the top for submission success or error messages.", "Combine Form with Input components using consistent naming for easy form data extraction.", "Use Form onSubmit to collect FormData and serialize for API submission.", "Apply Form with conditional rendering of fields based on other field values for dynamic forms.", "Set Form noValidate attribute via props to handle validation manually in JavaScript.", "Use Form with fieldset and legend elements inside for grouped related fields.", "Apply Form with disabled state on all child inputs during submission to prevent changes.", "Combine Form onChange with debouncing for performance optimization in large forms.", "Use Form with progressive disclosure pattern, showing additional fields as needed.", "Apply Form styles for responsive layout adjustments on mobile devices.", "Set Form with aria-label or aria-labelledby for accessibility when form purpose is not obvious.", "Use Form onSubmit validation with focus on first invalid field for better UX.", 'Apply Form with Button type="submit" for proper form submission via Enter key.', 'Combine Form with Button type="reset" for clearing all fields to defaults.', "Use Form onChange to update preview sections in real-time for WYSIWYG experiences.", "Apply Form with scroll to first error after validation failure for long forms.", "Set Form autocomplete attributes on child inputs for better browser integration.", "Use Form with step indicators or progress bars for multi-step form processes.", "Apply Form onSubmit with confirmation dialog for destructive or important actions.", "Combine Form with localStorage to persist draft data preventing data loss.", "Use Form with Input required props for HTML5 validation as fallback.", "Apply Form className with CSS Grid for complex multi-column layouts.", "Set Form with consistent spacing between field groups using Column gutter.", "Use Form onChange to calculate and display computed fields like totals or summaries.", "Apply Form with tooltip hints on complex fields for additional user guidance.", "Combine Form with keyboard navigation optimization using proper tabIndex ordering.", "Use Form onSubmit with redirect after successful submission to success page.", "Apply Form with error boundary to gracefully handle rendering errors.", "Set Form with print styles for forms that need to be printed or saved as PDF.", "Use Form onChange with field dependencies to enable/disable related fields.", "Apply Form with consistent error display pattern using InlineNotification below fields.", "Combine Form with Select, Input, and InputFile for comprehensive data collection.", 'Use Form styles={{padding: "20px"}} for comfortable spacing around form content.', "Apply Form with sticky submit button on mobile for always-accessible submission.", "Set Form with data attributes for analytics tracking of form interactions.", "Use Form onSubmit with optimistic UI updates for better perceived performance.", "Apply Form with skeleton loading states while fetching initial form data.", "Combine Form with dirty state tracking to warn users about unsaved changes.", "Use Form className with theme-specific styling for dark/light mode support."], t = {
-  component: e,
-  compositionTips: o
-};
-export {
-  t as default
-};

package/ai/schemas/components/Icon.js

@@ -1,41 +0,0 @@
-const o = {
-  name: "Icon",
-  import: "import { Icon } from 'gd-design-library'",
-  description: "SVG icon component that renders icons from a registered list with customizable size and color options.",
-  props: [{
-    name: "name",
-    type: "string",
-    description: "The name of the icon to display from the registered list",
-    required: !0
-  }, {
-    name: "width",
-    type: "number",
-    description: "Sets the width of the icon in pixels"
-  }, {
-    name: "height",
-    type: "number",
-    description: "Sets the height of the icon in pixels"
-  }, {
-    name: "fillSvg",
-    type: "string",
-    description: "Sets the fill color of the SVG element itself. Useful for single-color icons",
-    default: "currentColor"
-  }, {
-    name: "fill",
-    type: "string",
-    description: "Sets the fill color for specific paths within the SVG that are designed to inherit it",
-    default: "currentColor"
-  }, {
-    name: "size",
-    type: "SizeVariant",
-    description: "Predefined size variants that set both width and height according to the theme configuration",
-    enum: ["xs", "sm", "md", "lg", "xl", "xxl"]
-  }],
-  examples: ['<Icon name="search" size="md" />', '<Icon name="close" width={24} height={24} fill="#666" />', '<Icon name="chevron-right" fillSvg="currentColor" />', '<Icon name="settings" size="lg" fill="primary" />']
-}, i = ["Use Icon size variants for consistent sizing across the app.", "Apply fill or fillSvg to match brand colors or context.", "Combine Icon with Button or Link for actionable icons.", "Use aria-label on parent elements when icon-only for accessibility.", "Use Icon size prop with predefined variants (xs, sm, md, lg, xl, xxl) for consistent sizing across the app.", "Apply Icon fillSvg for single-color icons where the entire SVG should be one color.", "Use Icon fill for multi-path icons where specific paths need different colors.", "Set Icon width and height explicitly in pixels when custom sizing is needed beyond size variants.", 'Use Icon with fillSvg="currentColor" (default) to inherit text color from parent Typography or Button.', "Combine Icon with Button iconStart or iconEnd props for buttons with icon indicators.", "Use Icon within Input adornmentStart or adornmentEnd for input field decorations.", 'Apply Icon size="sm" for inline text icons and size="lg" for standalone action icons.', "Use Icon name prop with consistent naming convention matching your icon library.", "Combine Icon with Typography for inline icons within text content.", "Set Icon fill with theme colors for consistent brand-aligned icon coloring.", 'Use Icon size="xs" for dense UI elements like table cells or compact lists.', 'Apply Icon size="xl" or "xxl" for hero sections and empty states.', "Wrap Icon in Button isIcon={true} for clickable icon-only buttons with proper touch targets.", 'Use Icon with aria-hidden="true" when decorative and paired with text labels.', 'Apply Icon with role="img" and aria-label when icon conveys meaning without text.', "Combine multiple Icon components with consistent size for icon groups or toolbars.", 'Use Icon fill="#000" or specific colors for icons that should not change with theme.', "Set Icon size consistently within same UI context (all navigation icons same size).", "Apply Icon with Link component for clickable icons that navigate.", "Use Icon in Select adornmentStart for category indicators in dropdown options.", "Combine Icon with Card for visual indicators of card content type.", "Apply Icon fillSvg with opacity for disabled or inactive icon states.", "Use Icon with animation classes in className for loading or status indicators.", "Set Icon width without height (or vice versa) to maintain aspect ratio with one dimension.", "Apply Icon with consistent spacing using margin in FlexContainer or Column.", 'Use Icon name="arrow-down" or similar in Select adornmentEnd for dropdown indicators.', "Combine Icon with Badge components for notification icons with counts.", 'Apply Icon size="md" as default for most UI contexts for optimal visibility.', "Use Icon with Tooltip wrapper for icons that need explanation on hover.", "Set Icon fill with conditional logic for state-based icon colors (error, success, warning).", "Apply Icon in ChatContainer headerContent for action buttons like settings or info.", "Use Icon with transform styles for rotated or flipped icon variations.", "Combine Icon size with Button size for proportional icon-to-button sizing.", 'Apply Icon in empty states with size="xxl" for prominent visual communication.', "Use Icon name with dynamic values for data-driven icon selection.", 'Set Icon fillSvg="transparent" with stroke styles for outline-only icons.', "Apply Icon with position absolute for overlay indicators on images or cards.", "Use Icon in loading states with CSS animation for spinner effects.", 'Combine Icon with text in FlexContainer gap="8px" for labeled icons.', "Apply Icon consistently in navigation items for visual consistency.", 'Use Icon size="sm" in dense forms and size="lg" in marketing sections.', "Set Icon with currentColor to automatically match surrounding text color.", "Apply Icon in status indicators with semantic colors (green for success, red for error).", "Use Icon with consistent naming patterns for easier maintenance (noun-verb format).", "Combine Icon with keyboard shortcuts for accessible icon button actions.", 'Apply Icon in breadcrumbs with size="xs" for compact navigation.', "Use Icon fill with CSS variables for theme-aware icon coloring.", "Set Icon in table headers with sort indicators using directional icons.", "Apply Icon with aria-describedby for complex icons needing description.", "Use Icon in tabs with consistent size for visual rhythm.", "Combine Icon with number badges for notification counts.", "Apply Icon in form validation with color-coded status indicators.", "Use Icon size relative to font size in mixed text-icon layouts.", "Set Icon with hover states using CSS for interactive feedback.", "Apply Icon in menu items with consistent left/right positioning.", "Use Icon with SVG sprite sheets for optimized icon delivery.", "Combine Icon with lazy loading for performance in icon-heavy interfaces.", "Apply Icon with semantic HTML for better accessibility.", "Use Icon in custom components with forwarded props for flexibility."], n = {
-  component: o,
-  compositionTips: i
-};
-export {
-  n as default
-};

package/ai/schemas/components/Image.js

@@ -1,55 +0,0 @@
-const e = {
-  name: "Image",
-  import: "import { Image } from 'gd-design-library'",
-  description: "Responsive image component with loading states, fallback support, and optional caption for displaying visual content.",
-  props: [{
-    name: "src",
-    type: "string",
-    description: "Source URL of the image",
-    required: !0
-  }, {
-    name: "alt",
-    type: "string",
-    description: "Alternative text for the image for accessibility and when image fails to load",
-    required: !0
-  }, {
-    name: "width",
-    type: "number",
-    description: "Width of the image in pixels"
-  }, {
-    name: "height",
-    type: "number",
-    description: "Height of the image in pixels"
-  }, {
-    name: "id",
-    type: "string",
-    description: "Unique identifier for the image element"
-  }, {
-    name: "className",
-    type: "string",
-    description: "Additional CSS classes to apply to the image"
-  }, {
-    name: "placeholder",
-    type: "string",
-    description: "Text to display while image is loading"
-  }, {
-    name: "caption",
-    type: "string",
-    description: "Caption text to display below the image"
-  }, {
-    name: "fallbackComponent",
-    type: "ReactNode",
-    description: "Component to display when image fails to load"
-  }, {
-    name: "onClick",
-    type: "(event: React.MouseEvent) => void",
-    description: "Click event handler for the image"
-  }],
-  examples: ['<Image src="/photo.jpg" alt="Product photo" width={400} height={300} />', '<Image src={imageUrl} alt="User avatar" caption="Profile picture" onClick={handleImageClick} />', '<Image src="/hero.jpg" alt="Hero image" placeholder="Loading..." fallbackComponent={<Icon name="image" />} />']
-}, i = ['Set Image loading="lazy" via props or attributes for below-fold images.', "Use Image placeholder with blur or skeleton UI for better loading experience.", "Combine Image with Link wrapper for clickable images that navigate.", "Apply Image in avatars with fallbackComponent showing user initials.", 'Use Image caption with Typography variant="caption" for consistent text styling.', "Combine Image with overlay text using absolute positioning for hero banners.", "Apply Image in lists with consistent thumbnail sizes for visual rhythm.", "Use Image with max dimensions to fit viewport when placed in modals.", "Use Image with explicit width and height props to prevent layout shift during loading.", "Apply Image alt text that describes the image content for accessibility and SEO.", "Set Image fallbackComponent with Icon or placeholder for graceful error handling.", "Use Image placeholder text for better perceived performance during slow connections.", "Apply Image caption for providing context or attribution below images.", "Combine Image with Card component for media cards with structured layouts.", "Use Image onClick handler for lightbox or full-screen image viewing features.", "Set Image className for responsive sizing with CSS (e.g., max-width: 100%).", "Apply Image with lazy loading attributes for performance in image-heavy pages.", "Use Image id for targeting specific images with JavaScript or CSS.", "Combine Image with aspect ratio containers to maintain proportions.", "Set Image width without height to maintain aspect ratio with single dimension.", "Apply Image in product galleries with consistent dimensions for visual harmony.", "Use Image fallbackComponent={<Typography>Image unavailable</Typography>} for text fallbacks.", "Combine multiple Image components in FlexContainer for gallery layouts.", "Apply Image with object-fit CSS via className for cover/contain behavior.", "Use Image in hero sections with full width and responsive height.", 'Set Image loading="lazy" via props or attributes for below-fold images.', "Apply Image with srcset for responsive images across different screen sizes.", "Use Image placeholder with blur or skeleton UI for better loading experience.", "Combine Image with Link wrapper for clickable images that navigate.", "Apply Image in avatars with fallbackComponent showing user initials.", "Use Image with consistent alt text patterns for similar image types.", "Set Image in carousel components with uniform dimensions for smooth transitions.", "Apply Image with error boundaries to prevent broken image layout issues.", 'Use Image caption with Typography variant="caption" for consistent text styling.', "Combine Image with overlay text using absolute positioning for hero banners.", "Apply Image in lists with consistent thumbnail sizes for visual rhythm.", "Use Image with CDN URLs for optimized delivery and caching.", "Set Image dimensions based on container size for responsive designs.", "Apply Image with loading states showing skeleton or shimmer effects.", "Use Image in modals with max dimensions to fit viewport.", "Combine Image with zoom functionality using transform on hover or click.", "Apply Image with proper CORS headers for cross-origin image loading.", 'Use Image alt="" (empty) for purely decorative images that add no information.', "Set Image with webp format with jpg/png fallbacks for better compression.", "Apply Image in background with CSS for decorative background images.", "Use Image with intersection observer for viewport-based lazy loading.", "Combine Image with figure and figcaption HTML elements for semantic markup.", "Apply Image with consistent naming conventions for easier asset management.", "Use Image in responsive grids with CSS Grid or Flexbox for galleries.", "Set Image with priority loading for above-fold critical images.", "Apply Image with blur-up technique using low-quality placeholder.", "Use Image fallbackComponent with retry button for network error recovery.", "Combine Image with Image component for before/after comparisons.", "Apply Image with consistent border-radius for rounded corners across app.", "Use Image with data attributes for analytics tracking.", "Set Image with appropriate compression based on content type (photos vs graphics).", "Apply Image in print styles with high-resolution versions.", "Use Image with social media meta tags for proper sharing previews."], t = {
-  component: e,
-  compositionTips: i
-};
-export {
-  t as default
-};

package/ai/schemas/components/InlineNotification.js

@@ -1,23 +0,0 @@
-const i = {
-  name: "InlineNotification",
-  import: "import { InlineNotification } from 'gd-design-library'",
-  description: "Inline notification component for displaying contextual messages, alerts, and feedback with different severity levels.",
-  props: [{
-    name: "variant",
-    type: "NotificationVariant",
-    description: "The visual style variant of the notification",
-    default: "info",
-    enum: ["info", "success", "warning", "error"]
-  }, {
-    name: "children",
-    type: "ReactNode",
-    description: "The content to be displayed within the notification"
-  }],
-  examples: ['<InlineNotification variant="success">Your changes have been saved successfully.</InlineNotification>', '<InlineNotification variant="error">Failed to process request. Please try again.</InlineNotification>', '<InlineNotification variant="warning">This action cannot be undone.</InlineNotification>', '<InlineNotification variant="info">New features are available in settings.</InlineNotification>']
-}, n = ['Use InlineNotification variant="error" for form validation errors and critical alerts.', 'Apply InlineNotification variant="success" after successful form submissions or actions.', 'Use InlineNotification variant="warning" for cautionary messages before destructive actions.', 'Apply InlineNotification variant="info" for neutral informational messages and tips.', "Place InlineNotification above or below form fields for contextual validation messages.", "Combine InlineNotification with Icon components in children for enhanced visual communication.", 'Use InlineNotification variant="error" for form validation errors and critical alerts.', 'Apply InlineNotification variant="success" after successful form submissions or actions.', 'Use InlineNotification variant="warning" for cautionary messages before destructive actions.', 'Apply InlineNotification variant="info" for neutral informational messages and tips.', "Place InlineNotification above form fields for field-specific validation messages.", "Use InlineNotification at the top of forms for general submission feedback.", "Combine InlineNotification with Icon components in children for enhanced visual communication.", "Apply InlineNotification with dismissible button using children prop for closeable alerts.", 'Use InlineNotification variant="error" with detailed error messages from API responses.', "Position InlineNotification below Input fields for inline validation feedback.", "Apply InlineNotification with consistent spacing using margin/padding in containers.", "Use InlineNotification with fade-in animations for smooth appearance on state changes.", "Combine InlineNotification with conditional rendering based on form validation state.", 'Apply InlineNotification variant="info" for helper text that appears on user interaction.', "Use InlineNotification in Card components for section-specific alerts and messages.", "Set InlineNotification with Typography children for rich text formatting in messages.", "Apply InlineNotification with auto-dismiss timer for temporary success messages.", 'Use InlineNotification variant="warning" before form submission for incomplete fields.', "Combine InlineNotification with Link components in children for actionable messages.", "Apply InlineNotification consistently across similar UI contexts for unified experience.", 'Use InlineNotification with role="alert" for important messages requiring immediate attention.', "Position InlineNotification at viewport top for global application messages.", "Apply InlineNotification with list formatting in children for multiple error messages.", "Use InlineNotification variant transitions when severity changes based on user actions.", "Combine InlineNotification with form field highlighting for better error visibility.", "Apply InlineNotification with compact styling in dense UI layouts.", "Use InlineNotification for real-time validation feedback as users type.", "Set InlineNotification with appropriate contrast ratios for accessibility.", "Apply InlineNotification with consistent icon usage per variant for quick recognition.", "Use InlineNotification in modal dialogs for action confirmations and warnings.", "Combine InlineNotification with progress indicators for long-running operations.", 'Apply InlineNotification variant="success" with next-step guidance after actions.', "Use InlineNotification for connection status and network error messages.", "Position InlineNotification strategically to avoid covering important UI elements.", "Apply InlineNotification with responsive design adapting message length on mobile.", "Use InlineNotification children with Button components for inline actions.", "Combine InlineNotification with data attributes for analytics tracking.", "Apply InlineNotification with consistent timing for auto-dismiss across the app.", 'Use InlineNotification variant="error" with retry actions for failed operations.', "Set InlineNotification with clear, actionable language avoiding technical jargon.", "Apply InlineNotification sparingly to avoid notification fatigue.", "Use InlineNotification with keyboard accessibility for screen reader users.", "Combine InlineNotification with sound/vibration for critical alerts on mobile.", "Apply InlineNotification with print styles for important messages in printed documents."], t = {
-  component: i,
-  compositionTips: n
-};
-export {
-  t as default
-};