gd-design-library 1.8.2 → 1.8.3

package/ai/testing_prompts/layouts_template_prompts.md

@@ -6,63 +6,67 @@
 
 ## PROMPT FOR CHATCONTAINER
 
-Generate a complete, fully populated ChatContainer component. The layout should be naturally shaped by its content. Please populate all available slots as follows:
+Generate 3 different ChatContainer layouts so every ChatContainer property is covered in realistic chat UI scenarios:
 
-1. State: Set isOpen = true so the expanded sidebar is visible by default. Ensure showSidebarAsideControl and showSidebarHeaderControl are left to their default true values to render the toggle icons.
-2. sidebarMinifiedContent: Provide a Column containing 3 icon-only buttons (use 'plus' for new chat, 'chat' for response, and 'edit').
-3. sidebarHeaderContent: Provide a Row containing a 'chat' icon and a Typography component with the text 'Chat History'.
-4. sidebarContent: Provide a Column containing 3 clickable text blocks representing history (e.g., 'Recent conversation 1', 'Recent conversation 2').
-5. headerContent: Provide a Row containing an icon and Typography with the text 'AI Assistant' to serve as the top navigation bar.
-6. children (Main Content): Provide a few ChatBubble components (e.g., one user message and one 'answer' variant message with action buttons) to simulate an active conversation area.
+1. Fully populated default state: Set `isOpen` = true and provide all slots (`sidebarMinifiedContent`, `sidebarHeaderContent`, `sidebarContent`, `headerContent`, and `children`). Use a natural chat example: history list in the sidebar, compact icon rail (plus/chat/edit), top header with title "AI Assistant", and several `ChatBubble` messages in the main area.
+2. Collapsed-first state: Set `isOpen` = false, keep all slots populated, and make the minified sidebar content clearly usable (icon-only quick actions). Keep header visible so the reopen behavior can be validated visually.
+3. Hidden controls state: Set both `showSidebarAsideControl` = false and `showSidebarHeaderControl` = false while still rendering sidebar and header content.
 
 ---
 
 ## PROMPT FOR COLUMN
 
-Generate 2 different columns:
+Generate 4 different columns:
 
-1. Default column with gutter = 24, containing 3 text items: 'Block A', 'Block B', and 'Block C'
-2. Reversed column (isReversed = true) with gutter = 16, containing 3 text items: 'Step 1', 'Step 2', and 'Step 3'
+1. Default content stack for a settings panel: `gutter` = 24, 3 text blocks (`Block A`, `Block B`, `Block C`), and simple `padding` so spacing is easy to validate.
+2. Reversed timeline-style stack: `isReversed` = true, `gutter` = 16, and 3 text items (`Step 1`, `Step 2`, `Step 3`).
+3. Tight card column with explicit alignment behavior: use `align` = 'center', `justify` = 'space-between', fixed `height`, and `isWrap` = false so content distribution is clearly visible.
+4. Semantic + styling case: render as `as` = 'section', set `flex` (for example `1 1 auto`), and apply root `styling` (background, border, borderRadius). Use `gap` instead of `gutter` in this case to confirm alias parsing.
 
 ---
 
 ## PROMPT FOR FLEXCONTAINER
 
-Generate 4 different flex containers without any explicit width or height constraints:
+Generate 5 different flex containers without hardcoded fixed width/height constraints:
 
-1. Horizontal container (flexDirection = 'row') with gap = '16px', containing 3 explicit text items: 'Item A', 'Item B', and 'Item C'
-2. Vertical container (flexDirection = 'column') with alignItems = 'center', containing 3 text items of varying lengths: 'Short', 'A significantly longer text sentence to test visual centering', and 'Tiny'
-3. Container with spaced distribution (flexDirection = 'row', justifyContent = 'space-between'), containing 2 text items: 'Start edge' and 'End edge'
-4. Wrapping container (flexDirection = 'row', styling = { flexWrap: 'wrap' }, gap = '8px'), containing 6 text items to verify wrap behavior: 'Tag 1', 'Tag 2', 'Tag 3', 'Tag 4', 'Tag 5', and 'Tag 6'
+1. Basic horizontal toolbar: `flexDirection` = 'row', `gap` = '16px', with 3 short items (`Item A`, `Item B`, `Item C`).
+2. Vertical alignment check: `flexDirection` = 'column', `alignItems` = 'center', and 3 text items with very different lengths (`Short`, long sentence, `Tiny`) to confirm centering behavior.
+3. Space distribution case: `flexDirection` = 'row', `justifyContent` = 'space-between', with 2 edge items (`Start edge`, `End edge`).
+4. Wrapped tag list: `flexDirection` = 'row', `styling` = { `flexWrap`: 'wrap' }, `gap` = '8px', and at least 6 tag-like items (`Tag 1` ... `Tag 6`).
+5. Reverse-flow action group: use `flexDirection` = 'row-reverse', keep `alignItems` + `justifyContent` explicitly set, add a custom `className`, and include root `styling` (for example subtle border/background).
 
 ---
 
-## PROMPT FOR PORTAL
+## PROMPT FOR ROW
 
-Generate a wrapper component with 3 distinct buttons. Each button should toggle the rendering of a different Portal configuration using local state. Ensure every portal content includes a button to close/hide itself.
+Generate 4 different rows:
 
-1. Default Global Portal triggered by an 'Open Global Portal' button. Do not pass a container prop (so it defaults to document.body). Provide children with text 'Global portal content injected into body' and a 'Close' button.
-2. Targeted Portal: render a standard div with id="custom-portal-target", some padding, and a distinct background color to serve as an anchor. Next to it, render an 'Open Targeted Portal' button. The Portal should use container = '#custom-portal-target' and withWrapper = false.
-3. Semantic Wrapper Portal: Triggered by an 'Open Semantic Portal' button. Pass WrapperView="main" and a specific wrapperVariant (e.g., WrapperVariant.Section or "section"). Include explicit text to verify the semantic wrapper render.
+1. Default horizontal row for small info chips: `gutter` = 16 with 3 explicit text items (`Block 1`, `Block 2`, `Block 3`).
+2. Reversed row: `isReversed` = true and `gutter` = 8 with 3 items (`Start`, `Middle`, `End`).
+3. Navigation-style row with alignment rules: set `align` = 'center', `justify` = 'space-between', and `isWrap` = false, with two edge labels (`Left action`, `Right action`).
+4. Semantic + styling row: render as `as` = 'nav', set `flex` (for example `1 1 auto`), apply root `styling` (background/border/padding), and use `gap` instead of `gutter`.
 
 ---
 
-## PROMPT FOR ROW
+## PROMPT FOR PORTAL
 
-Generate 2 different rows:
+Generate a wrapper component with 4 distinct buttons. Each button should toggle the rendering of a different Portal configuration using local state. Ensure every portal content includes a button to close/hide itself.
 
-1. Default row with gutter = 16, containing 3 explicit text items: 'Block 1', 'Block 2', and 'Block 3'
-2. Reversed row (isReversed = true) with gutter = 8, containing 3 text items: 'Start', 'Middle', and 'End'
+1. Default Global Portal triggered by an 'Open Global Portal' button. Do not pass a container prop (so it defaults to document.body). Provide children with text 'Global portal content injected into body' and a 'Close' button.
+2. Targeted Portal: render a standard div with id="custom-portal-target", some padding, and a distinct background color to serve as an anchor. Next to it, render an 'Open Targeted Portal' button. The Portal should use container = '#custom-portal-target' and withWrapper = false.
+3. Semantic Wrapper Portal: Triggered by an 'Open Semantic Portal' button. Pass WrapperView="main" and a specific wrapperVariant (e.g., WrapperVariant.Section or "section"). Include explicit text .
+4. Scroll-lock Portal: Triggered by an 'Open Blocking Portal' button. Render a modal-like portal with `blocksScroll` = true, keep `withWrapper` = true, and include root `styling` overrides (for example z-index and padding) .
 
 ---
 
 ## PROMPT FOR SCROLL
 
-Generate 3 different scroll containers:
+Generate 4 different scroll containers:
 
-1. Vertical scroll only, containing a Column with 5 explicit text items: 'Row 1', 'Row 2', 'Row 3', 'Row 4', and 'Row 5'
-2. Horizontal scroll only, containing a Row with isWrap = false and 4 explicit text items: 'Column A', 'Column B', 'Column C', and 'Column D'
-3. Scroll container with vertical and horizontal scrollbars visible, containing text = 'Corner intersection test' containing a Row with isWrap = false
+1. Vertical-first content region: set `vertical` = 'auto' and `horizontal` = 'hidden', then place a `Column` with at least 5 text rows (`Row 1` ... `Row 5`) and enough height pressure to require vertical scrolling.
+2. Horizontal-only lane: set `vertical` = 'hidden' and `horizontal` = 'auto', then place a `Row` with `isWrap` = false and at least 4 wide items (`Column A` ... `Column D`) so horizontal overflow is obvious.
+3. Always-visible bars case: set both `vertical` = 'visible' and `horizontal` = 'visible', and include a short "Corner intersection test" label plus overflowing row content.
+4. Auto-hide behavior case: set `autoHide` = true with `vertical` = 'auto', include long scrollable content, and apply root `styling` (for example fixed `height`, border, and padding) .
 
 ---
 
@@ -70,9 +74,11 @@ Generate 3 different scroll containers:
 
 ## PROMPT FOR DRAG AND DROP
 
-Generate 4 different types of drag and drop templates:
+Generate 6 different drag and drop templates:
 
-1. Default Drag and Drop area, with title = 'Drop some files here', maxFileSize = 20000000 (20 MB in bytes), and acceptedFileTypes = ['application/pdf', 'application/msword'].
-2. Disabled Drag and Drop area
-3. Drag and drop area in loading
-4. Drag and drop area with error, where the file was too large.
+1. Default document upload area with `title` = 'Drop some files here', `description` that explains allowed uploads, `inputFileButtonLabel` = 'Choose files', `maxFileSize` = 20000000 (20 MB), and `acceptedFileTypes` = ['application/pdf', 'application/msword'].
+2. Single-file strict upload variant with `maxFiles` = 1 (for example avatar or contract upload), clear helper text in `description`, and realistic label text for the button.
+3. Disabled drag and drop area where interaction is blocked but title/description remain visible.
+4. Loading state with `isLoading` = true and a custom `loadingOverlay` (for example loader + text "Uploading files...").
+5. Error-focused state using `errors` with at least one explicit message such as 'File is too large (max 20 MB)' and another like 'Unsupported file type'.
+6. Custom idle content state: provide `children` to replace the default internal layout (for example icon + short instructions), plus `actions` so file selection/drop can dispatch upload-related events.

package/ai/testing_prompts/molecular_prompts.md

@@ -2,13 +2,32 @@
 
 ## PROMPT FOR ACCORDION
 
-Generate default Accordion with 2 titles: one already opened with title = 'Cappuccino', the second closed with title = 'Latte' containing 1–2 sentences about coffee.
+Generate 2 different accordions:
+
+1. Single-expand accordion with icons. Wrap two `AccordionItem` components (with `id` values `'cappuccino'` and `'latte'`). Each item must include an `AccordionHeader` (with titles **Cappuccino** and **Latte**) and an `AccordionContent` containing 1–2 sentences about coffee. Set `defaultValue={['cappuccino']}` on the root `Accordion` component so the first section starts open.
+2. Multiple-expand accordion without icons. Wrap two `AccordionItem` components (with `id` values `'cappuccino'` and `'latte'`). Each item must include an `AccordionHeader` (with titles **Cappuccino** and **Latte**) and an `AccordionContent` containing 1–2 sentences about coffee. Set `allowMultipleExpand={true}`, include an `onChange` prop, and configure the accordion to display inline without a separator.
+
+---
+
+## PROMPT FOR ATTACHMENT FILE
+
+Generate 6 different attachment files:
+
+1. Default attachment with full metadata and remove action: `fileName` = 'report.pdf', `fileType` = 'PDF', `fileSize` = '1.2 MB', and `onRemove`.
+2. Attachment without metadata: `fileName` = 'notes.txt'.
+3. Attachment with metadata and without remove button: `fileName` = 'diagram.png', `fileType` = 'PNG', `fileSize` = '450 KB'.
+4. Disabled removable attachment: `fileName` = 'contract.docx', `fileType` = 'docx', `fileSize` = '2.4 MB'.
+5. Loading removable attachment: `fileName` = 'uploading.zip', `fileType` = 'ZIP', `fileSize` = '8.0 MB', `onRemove`.
+6. Attachment with custom visual/accessibility props: `fileName` = 'error-log.json', `fileType` = 'Upload failed', custom `fileIcon` (error icon), custom `separator` = '|', `onRemove`, and `removeButtonLabel` = 'Delete attachment'.
 
 ---
 
 ## PROMPT FOR BREADCRUMBS
 
-Generate breadcrumbs with string separator = `|`, content = 'product', 'home', 'category', and with an information icon at the end, colored with border. The first one content should be disabled.
+Generate 2 different breadcrumbs:
+
+1. Breadcrumbs with string separator = `|`, content = 'product', 'home', 'category', and with an information icon at the end, colored with border. The first one content should be disabled.
+2. Breadcrumbs with icon separator (arrow-right icon), `itemStart` as a clickable home icon link, `separatorAfterLastItem` = true, and custom `ariaLabel` = 'product-breadcrumb-trail'. Use content = 'Home', 'Products', 'Category', where the last item is disabled.
 
 ---
 
@@ -16,17 +35,18 @@ Generate breadcrumbs with string separator = `|`, content = 'product', 'home', '
 
 Generate 2 different counters:
 
-1. Simple counter with initial value = 5, min = 0, and max = 20
+1. Counter with initial value = 5, min = 0, and max = 20
 2. Disabled counter with initial value = 25
 
 ---
 
 ## PROMPT FOR DROPDOWN
 
-Generate 2 different dropdowns:
+Generate 3 different dropdowns:
 
 1. Simple dropdown with 2 options: 'drop' and 'down'
 2. Dropdown with checkboxes: 'drop' and 'up'
+3. Accessible dropdown with `role` = 'listbox', `aria-label` = 'sorting-options', and `aria-expanded` = true.
 
 ---
 
@@ -44,96 +64,116 @@ Generate a complete form containing the following components:
 
 ## PROMPT FOR INLINE NOTIFICATION
 
-Generate 2 types of inline notifications:
+Generate 6 types of inline notifications:
 
 1. Default inline notification with text: 'Default InlineNotification'
-2. Warning inline notification
+2. Warning inline notification with text: 'Warning InlineNotification'
+3. Success inline notification with text: 'Success InlineNotification'
+4. Error inline notification with text: 'Error InlineNotification'
+5. Info inline notification with text: 'Info InlineNotification'
+6. Inline notification with custom non-primitive content (to cover `isPrimitive = false`): title 'Actions Required!' and unordered bullet list with 3 short action items.
 
 ---
 
 ## PROMPT FOR LIST
 
-Generate 2 types of lists:
+Generate 3 types of lists:
 
-1. List component with 3 list items: 'Item1', 'Item2', 'Item3'.
-2. List component with 2 items: 'Item1', 'Item2', and numbered (numerical) ordering.
+1. Unordered component with 3 list items: 'Item1', 'Item2', 'Item3', size = md
+2. List component with 2 items: 'Item1', 'Item2', and numbered (numerical) ordering, size = sm
+3. Unordered list with check markers using 3 items: 'Fast setup', 'Reusable components', 'Theme support'
 
 ---
 
 ## PROMPT FOR MENU
 
-Generate menu component with 3 items inside it: 'Open', 'Close', 'Profile'.
+Generate 3 different menu components:
+
+1. Default menu with 3 items: 'Open', 'Close', 'Profile', and `onSelect` handler.
+2. Menu with `closeOnSelect` = false so the menu stays open after item selection.
+3. Menu with custom positioning: `placement` = 'top-left', `offsetX` = 12, and `offsetY` = 8.
 
 ---
 
 ## PROMPT FOR PRICE
 
-Generate 3 different types of price:
+Generate 5 different types of price:
 
 1. Default price = 50 with decimals, size small
 2. With old price: new = 120, old = 300, European convention, size medium
 3. Free price, old one is 300, size large
+4. Price without old value: `currentValue` = '99.99', `currencySymbol` = '$', and `size` = 'md'.
+5. Large European formatted price: `currentValue` = '1 299,99', `oldValue` = '1 499,99', `currencySymbol` = '€', `currencySymbolPosition` = 'after', and `size` = 'lg'.
 
 ---
 
 ## PROMPT FOR PROGRESSBAR
 
-Generate 2 different types of progress bar:
+Generate 4 different types of progress bar:
 
 1. Default progress bar with value = 20 and percentage text displayed on it
 2. Progress bar with value = 50, no percentage displayed on it
+3. Indeterminate progress bar with `indeterminate` = true and `aria-label` = 'Loading progress'.
+4. Custom styled progress bar with value = 75, `showPercentage` = true, `fillColor` = '#ff4500', and `backgroundColor` = '#E5E5E5'.
 
 ---
 
 ## PROMPT FOR RADIOGROUP
 
-Generate 3 different radio groups:
+Generate 5 different radio groups:
 
 1. Default radio group with 5 basic options: 'xs', 's', 'm', 'l', 'xl', where the second option is disabled and with a pre-selected `defaultValue` = 3
 2. Color picker using the 'grid' variant with `gridColumns` = 3 and `gridColumnGutter`
 3. Visual image picker where options contain an `image` URL and `tooltip`
+4. Controlled radio group with `value` and `onChange` handler, `variant` = 'row', and custom `name` = 'size-selector'.
+5. Radio group using `renderOption` to render custom card-like option content with payload fields (`title`, `subtitle`, `description`, `price`).
 
 ---
 
 ## PROMPT FOR RATING
 
-Generate 3 different ratings:
+Generate 4 different ratings:
 
 1. Default interactive rating with a pre-selected `defaultValue` = 3
 2. Read-only rating with a fractional value = 4.5 and size = 'lg'
 3. Rating with max = 10, value = 7, size = 'sm', with custom color = #FF0000
+4. Rating with custom `groupName` = 'product-feedback' and initial value = 0
 
 ---
 
 ## PROMPT FOR SNACKBAR
 
-Generate a component with 4 buttons that trigger different snackbars using the `showSnackbar` function:
+Generate a component with 6 buttons that trigger different snackbars using the `showSnackbar` function:
 
 1. Success snackbar with title = 'Saved' and a short duration of 3000ms
 2. Persistent error snackbar (duration = 0, dismissOnClick = false) containing an 'action' button 'Retry'
 3. Warning snackbar with the 'colored' property enabled (filled background)
 4. Info snackbar that overrides the default icon with a custom icon
+5. Top-left positioned info snackbar with `position` = 'top-left' and `dismissOnClick` = true.
+6. Non-animated snackbar with `isAnimated` = false, title = 'Instant close', and `onClose` callback to verify immediate closing behavior.
 
 ---
 
 ## PROMPT FOR STEPPER
 
-Generate 3 different steppers:
+Generate 4 different steppers:
 
 1. Default checkout stepper with 4 steps ('Cart', 'Shipping', 'Payment', 'Review') where activeStep = 1
 2. Stepper displaying validation states: first step has validationStatus = 'success', second step has validationStatus = 'error', and activeStep = 2
 3. Icons view stepper (`isIconsView` = true) with 3 steps
+4. Icons view stepper with custom `customView` icons per step (for example success/info/home/star) and one step marked with `validationStatus` = 'error'.
 
 ---
 
 ## PROMPT FOR TABLE
 
-Generate 4 different tables:
+Generate 5 different tables:
 
 1. Basic table where the first column has a fixed width of '200px' and the second has a width of '15%', using a small dataset
 2. Table with expandable rows (`expandableRows` = true) that renders a custom Box with text inside `renderExpandedContent`
 3. Table with stickyHeader and sticky footer including a generated large dataset of 30 items
 4. Table in a loading state (`loading` = true) that displays a custom `loadingState` using Skeleton components instead of data
+5. Table with pagination enabled (`pagination` = true) using 50 rows, `pageSize` = 10, and `onPageChange` + `onPageSizeChange` handlers.
 
 ---
 
@@ -142,15 +182,17 @@ Generate 4 different tables:
 Generate 2 different tabs:
 
 1. Default tabs with 3 items ('Overview', 'Details', 'Reviews') where activeTab = 1
-2. Tabs with a noticeCounter, where the last tab is disabled.
+2. 3 tabs (Main, Home, Dashboard) with a noticeCounter (from 1 to 3), where the last tab is disabled.
 
 ---
 
 ## PROMPT FOR TOOLTIP
 
-Generate 2 different tooltips:
+Generate 4 different tooltips:
 
-1. Default tooltip with content = 'Save your changes' wrapping a standard Button
-2. Tooltip with rich content (using a Typography component inside the content prop)
+1. Default tooltip with content = 'Save your changes' wrapping a basic typography text = 'Hello'
+2. Tooltip with rich content (very long text for the tooltip)
+3. Tooltip with custom behavior: `position` = 'bottom', `delay` = 1000, and `gap` = 20.
+4. Accessible tooltip with `ariaLabel` = 'Additional information tooltip' and concise content for keyboard/focus usage.
 
 ---

package/ai/testing_prompts/organisms_prompts.md

@@ -4,136 +4,138 @@
 
 ## PROMPT FOR CARD
 
-Generate a card.
-The card must follow these specifications:
-Layout & Style:
-
-- Vertical layout
-- Successful color border
-  Content:
-- Card title = 'My card'
-- Random image
-- New price displayed as "$Free", the old one is displayed as "$300.99"
-  Interactive Elements:
-- Two buttons:
-  - "More info"
-    - Rounded style
-    - Clickable (enabled)
-  - "Buy now"
-    - Includes an arrow icon
-    - Disabled state
-      Additional Components:
-- Counter (quantity selector):
-  - Default value: 5
-  - Minimum value: 3
-  - Maximum value: 10
-- Rating:
-  - Read-only
-  - Preselected value: 3.5
+Generate 7 different cards:
+
+1. Default vertical product card with `isBordered` = true, root `padding` + `gutter`, image (`src`, `alt`), title, description, price (`currentValue` + `oldValue`), rating (`value` + `label`), and outlined CTA button
+2. Horizontal card with `variant` = 'horizontal', explicit image `width` + `height` (numbers), and a `Card.Row` for price + button using `align`, `justify`, `gutter` = '16px', and `isWrap` = false
+3. Compact card using `size` = 'sm' across title, description, price, rating, and button, with `isHighlighted` = true and `withShadowHover` = true
+4. Counter card with `initial` = 5, `min` = 3, `max` = 10, and counter `actions`; include a second counter in the same card with `disabled` = true and `size` = 'sm'
+5. Button-variant card containing 5 CTAs: `primary`, `secondary`, `tertiary`, `text`, and `outlined`; one button must be `disabled`, and enabled ones should include `actions`
+6. Scrollable content card with explicit root `styling` for overflow behavior (fixed-height area), enough description text to overflow, and required root `padding` + `gutter`
+7. Subcomponent styling stress-test card: apply `styling` overrides to image, title, description, price, button, and rating to verify each style object is parsed
 
 ---
 
 ## PROMPT FOR CAROUSEL
 
-Generate 3 types of carousel:
+Generate 5 types of carousel:
 
 1. Default horizontal carousel with 3 random images, navigation arrows (showArrows = true), and navigation dots (showDots = true)
 2. Carousel with custom content inside the first slide (using Carousel.Slide with a Column/Row containing Typography and a Button), followed by standard image slides. Navigation arrows (showArrows = false) and navigation dots (showDots = false)
-3. Carousel with vertical layout and 4 random images
+3. Vertical carousel with 4 random images, `layout` = 'vertical', fixed height in `styling`, and `thumbs` = 'start'
+4. Single-focus carousel with `variant` = 'single', `showArrows` = true, `showDots` = false, and `isFocusable` = true
 
 ---
 
 ## PROMPT FOR CHART
 
-Generate 5 different charts:
+Generate 8 different charts:
 
-1. Line Chart: variant = 'line' with sequential data 4 months. Use xKey = 'month' and an array of 2 series 'Revenue' and 'Profit'.
-2. Bar Chart: variant = 'bar' with category data. Use xKey = 'quarter' and provide 2 items in the series array to verify that the bars render correctly side-by-side.
-3. Area Chart: variant = 'area' with cumulative/volume data (e.g., user growth). Use xKey = 'week' and 1 item in the series array to verify the area rendering and its gradient fill.
-4. Pie Chart: variant = 'pie' with proportional data (e.g., market share). Do not use xKey or series. Instead, provide pieConfig with nameKey, dataKey, and showLabels: true to verify solid radial rendering.
-5. Donut Chart: variant = 'donut' with proportional data (e.g., budget distribution). Use pieConfig with nameKey, dataKey, and showLabels: true to verify the hollow radial rendering.
+1. Line chart with `variant` = 'line', 4 months of data, `xKey` = 'month', and 2 series (`Revenue`, `Profit`) with custom labels
+2. Bar chart with `variant` = 'bar', category data, `xKey` = 'quarter', and 2 series rendered side-by-side; enable legend with `interactive` = true and place it at the top
+3. Stacked bar chart with `variant` = 'bar', 3 series sharing the same `stackId` so bars stack in each category
+4. Area chart with `variant` = 'area', cumulative data, `xKey` = 'week', and series-level visual tuning (`curveType` + `fillOpacity`)
+5. Pie chart with `variant` = 'pie' using `pieConfig` (`nameKey`, `dataKey`, `showLabels` = true), plus custom `colors` palette
+6. Donut chart with `variant` = 'donut' using `pieConfig` (`nameKey`, `dataKey`, `showLabels` = true, `innerRadius`, `outerRadius`, `paddingAngle`, `startAngle`, `endAngle`)
+7. Fully configured cartesian chart that includes `xAxis`, `yAxis`, `grid`, `tooltip` (`enabled` = true), `chartHeight`, `chartMargin`, `animate` = false, and accessibility text (`title`, `label`, `description`)
+8. State coverage chart set: one `loading` chart with custom `loadingText`, one empty-data chart with custom `emptyText`, and one `error` chart with custom `errorText`; include `styling` overrides on the chart container
 
 ---
 
 ## PROMPT FOR CHATBUBBLE
 
-Generate 4 types of chat bubble:
+Generate 7 types of chat bubble:
 
-1. Default chat bubble element with icon buttons in actionChildren for volume, copy, like, dislike and text inside: 'Here is chatbubble element that is visible on the screen'
-2. Chat bubble element with image gallery containing 2 random images
-3. Chat bubble with variant = 'answer' and status = 'pending'
-4. Chat bubble element with link preview
+1. Default question bubble with message text = 'Hello my friend!!' in children
+2. Answer bubble with `status` = 'fulfilled' and 4 icon buttons in `actionChildren` (volume, copy, like, dislike)
+3. Pending answer bubble with `status` = 'pending' and short streaming-style message text
+4. Rejected answer bubble with `status` = 'rejected', retry-style `actionChildren`, and subtle error-oriented `styling`
+5. Size coverage set: render 3 bubbles side by side using `size` = 'sm', `size` = 'md', and `size` = 'lg' (same content, answer variant)
+6. Chat bubble with `ChatBubble.ImageGallery` containing 4 images
+7. Chat bubble with rich child content: message text plus a link-preview style block inside children, custom root `styling`, and `variant` = 'answer'
 
 ---
 
 ## PROMPT FOR CONTENTCAROUSEL
 
-Generate 2 different content carousel:
+Generate 4 different content carousels:
 
-1. Content carousel with 3 slides, that have text on it: 'Slide "number"' with showArrows = true and showDots = true
-2. Content carousel with 6 slides, that have text on it: 'Slide "number"' with showArrows = true, showDots = true, and visibleItems = 2
+1. Default content carousel with 3 text slides (`Slide 1`, `Slide 2`, `Slide 3`), `showArrows` = true, `showDots` = true, and `isFocusable` = true
+2. Content carousel with 6 slides, `visibleItems` = 2, `scrollStep` = 1, and `scrollAlignment` = 'left'
+3. Content carousel with 6 slides, `visibleItems` = 3, `scrollStep` = 2, and `scrollAlignment` = 'centered'
+4. Minimal navigation mode carousel with 4 slides, `showArrows` = false, `showDots` = true, and custom root `styling` for spacing/width
 
 ---
 
 ## PROMPT FOR HEADER
 
-Generate a complete header that includes a search bar, sign-in and cart actions, and a simple menu with items such as "Home," "Products," "Contact," and "About," using a dark-themed design.
+Generate 3 different headers:
+
+1. Complete dark-themed header with `logoChildren`, `menuChildren`, and `actionChildren` (Sign in + Cart), `showSearch` = true, and menu items: Home, Products, Contact, About
+2. Header with top announcement banner: `showTopBanner` = true and `bannerChildren` containing promo text (for example, free shipping message), plus basic logo + menu
+3. Search-first header where `showSearch` = true, minimal menu, and custom `bgColor` using error color theme token
 
 ---
 
 ## PROMPT FOR IMAGEPREVIEW
 
-Generate 2 different types of preview:
+Generate 2 different image previews:
 
-1. Default Image Preview with 3 images, displaying counter on it
-2. Image Preview with no arrows displaying thumbnails on the left
+1. Default image preview with 3 images (`src` + `alt` + optional `caption`), `showArrows` = true, `showThumbnails` = true, and `showCounter` = true.
+2. Image preview with `thumbnailPosition` = 'left', `showArrows` = false, `showCounter` = false and thumbnails used as the primary navigation.
 
 ---
 
 ## PROMPT FOR INPUTAREA
 
-Generate 4 different input areas:
+Generate 5 different input areas:
 
-1. Default empty input area with placeholder = 'Write a message, please...' and showAttachmentButton = true
-2. Disabled input area with a pre-filled value = 'This message cannot be edited'
-3. Multi-line input area with minRows = 3, maxLength = 200, showCharacterCount = true, and a long pre-filled value = 'A significantly longer message that spans multiple lines to visually test the auto-resizing behavior and the character counting feature of this text area component.'
-4. (Code mode only) Input area in recording state (recordingState = 'recording')
+1. Default empty input area with `placeholder` = 'Write a message, please...', `showAttachmentButton` = true, and `showSendButton` = true
+2. Create a disabled input area with a pre-filled value: 'This message cannot be edited'. The action buttons should remain visible but be in a disabled state.
+3. Multi-line input area with `minRows` = 3, `maxRows` = 8, `maxLength` = 200, `maxHeight` = 112, and `showCharacterCount` = true
+4. Input area with custom action labels: `sendButtonLabel` = 'Send now', `attachmentButtonLabel` = 'Attach files', and `showSendButtonTooltip` = true.
+5. Input area with `showSendButton` = false but `showAttachmentButton` = true
 
 ---
 
 ## PROMPT FOR MODAL
 
-Generate a modal component with 3 distinct buttons. Each button should open a different type of Modal (use local state to manage isOpen for each). Every modal must include a working close mechanism calling the close handler via a button in the footer.
+Generate a modal component with 5 distinct buttons. Each button should open a different type of Modal (use local state to manage isOpen for each). Every modal must include a working close mechanism calling the close handler via a button in the footer.
 
-1. Standard modal triggered by an 'Open Standard Modal' button. It should have label = 'Confirm Action', children containing the text 'Default modal', and a footer containing two buttons ('Confirm' and 'Cancel') which close the modal.
-2. Overflow modal triggered by an 'Open Scrollable Modal' button. It should have label = 'Terms and Conditions', children containing a significantly long text repeating a paragraph 10 times containing internal scroll behavior without hardcoding heights, and a footer with an 'Accept' button to close it.
-3. Custom view modal triggered by an 'Open Custom View Modal' button. It must use isCustomView = true. The children should contain a custom UI layout div with padding and text bypassing the standard structure, plus a Button to close it.
+1. Standard modal with `label` = 'Confirm Action', short body `children`, and `footer` with two buttons ('Confirm' and 'Cancel') that both close the modal.
+2. Long-content modal with `title` = 'Terms and Conditions', very long body `children` that naturally overflows, and `footer` with one 'Accept' button.
+3. Strict modal for critical actions with `showCloseButton` = false, `closeOnEscape` = false, and `closeOnClickOutside` = false, plus explicit close action in `footer`.
+4. Custom-layout modal with `isCustomView` = true and fully custom `children` structure (custom header/body/actions inside the content area).
+5. Styled modal with custom `styling` (for width/spacing), a small info body, and a simple one-button `footer` close action.
 
 ---
 
 ## PROMPT FOR SEARCH
 
-Generate 3 different search:
+Generate 3 different search components:
 
-1. Default search with placeholder = 'Search products...' and options array with 3 items: { label: 'Red' }, { label: 'Green' }, and { label: 'Blue' }
-2. Search with an empty options array and emptyItemsResult = 'Loading results...'
-3. Search with no results (empty options array) and emptyItemsResult = 'No products found. Try a different search term.'
+1. Default search with `placeholder` = 'Search products...', `value` = '', and `options` with 3 selectable items (`Red`, `Green`, `Blue`)
+2. Search with an empty `options` array and `emptyItemsResult` = 'Loading results...' to simulate async loading state.
+3. Search with no results (`options` = []) and `emptyItemsResult` = 'No products found. Try a different search term.' plus a non-empty `value`.
 
 ---
 
 ## PROMPT FOR SEARCHMODAL
 
-Generate a wrapper component with 2 distinct buttons. Each button should open a different type of SearchModal (use local state to manage isOpen for each via modalProps={{ isOpen, onClose }}).
+Generate a wrapper component with 4 distinct buttons. Each button should open a different type of SearchModal (use local state to manage isOpen for each via modalProps={{ isOpen, onClose }}).Every modal must include a working close mechanism calling the close handler via a button in the footer.
 
-1. Default History & Sections modal triggered by an 'Open History Search' button. Leave searchValue empty. Provide a small historyResults array (e.g., grouped by 'Today'), and include the popularItems prop with title = 'Popular' and content containing a few React nodes (like text or buttons) to verify the sections render correctly.
-2. Active Search Results modal triggered by an 'Open Active Search' button. Set searchValue = 'Dashboard'. Provide a results array with 2–3 explicit items (including title, description, and icon) to verify the active search list rendering.
+1. History-first modal with empty `searchValue`, grouped `historyResults` (for example 'Today' and 'Yesterday'), and `placeholder` for the search input.
+2. Active-results modal with `searchValue` = 'Dashboard', non-empty `results` (title/description/icon/date), and click `actions` wired for result selection.
+3. Loading modal with `isLoading` = true, custom `loaderItemsCount`, and realistic `placeholder` while results are being fetched.
+4. Empty-state + sections modal with empty `results` and `historyResults`, custom `noResultsLabel`, custom `noHistoryResultsLabel`, custom `newSearchCta`, plus `popularItems`, `aiSuggestions`, `articles`, extra `children`, and root `styling`.
 
 ---
 
 ## PROMPT FOR SIDEBAR
 
-Generate 3 different sidebars:
+Generate 4 different sidebars:
 
-1. Default sidebar with a flat list of items: Dashboard, Projects, Tasks where activeItemId = 'dashboard' and footerChildren containing text = 'John Doe Profile'
-2. Collapsed sidebar (collapsed = true) with a basic list of items (dashboard, tasks, user)
-3. Sidebar with hierarchical items, where one of the items 'Projects' contains nested sub-items 'Web App' and 'Mobile App'
+1. Default sidebar with a flat `items` list (Dashboard, Projects, Tasks), `activeItemId` = 'dashboard', and simple `footerChildren` with user text.
+2. Collapsed sidebar with `collapsed` = true, `collapsedWidth` = '64px'
+3. Hierarchical sidebar where `items` includes nested `children` under 'Projects' (`Web App`, `Mobile App`), with one nested item set as `activeItemId`.
+4. Sidebar with mixed item states: one `disabled` item, one item using `href`, plus extra `children` content after nav items and root `styling` overrides.

package/ai/validation.cjs

@@ -1 +1 @@
-const e=require(`./schemas/components.cjs`),t=require(`./a2ui/spec-schema.cjs`);var n=new Set(Object.keys(t.A2UI_SPEC_SCHEMA.properties.ui.properties.components.items.properties)),r=new Set(`align.justify.isWrap.gap.flexDirection.alignItems.justifyContent.maxHeight.title.description.max.min.isLoading.searchValue.noHistoryResultsLabel.noResultsLabel.showSearch.showTopBanner.display.overflow.minWidth.maxWidth.margin.marginTop.marginRight.marginBottom.marginLeft.paddingTop.paddingRight.paddingBottom.paddingLeft.zIndex.position.top.right.bottom.left.flex.flexWrap.flexGrow.flexShrink.flexBasis.alignContent.justifySelf.alignSelf.order`.split(`.`)),i=new Set([`type`]),a=[/ReactNode/i,/MouseEvent/i,/KeyboardEvent/i,/ChangeEvent/i,/ElementType/i,/=>/];function o(e,t){let o=[],s=[];return e.forEach(e=>{i.has(e.name)&&o.push(`${t} prop "${e.name}" is reserved. Use a dedicated field name instead.`),!n.has(e.name)&&!r.has(e.name)&&s.push(`${t} prop "${e.name}" is not declared in the shared A2UI component schema.`),a.some(t=>t.test(e.type))&&s.push(`${t} prop "${e.name}" uses non-JSON-safe type "${e.type}".`)}),{errors:o,warnings:s}}function s(e){if(!e.a2uiName)return{errors:[],warnings:[]};let t=[],n=[],r=o(e.props,`A2UI`);return t.push(...r.errors),n.push(...r.warnings),e.a2uiSubcomponents&&Object.entries(e.a2uiSubcomponents).forEach(([e,r])=>{let i=o(r.props,`A2UI subcomponent "${e}"`);t.push(...i.errors),n.push(...i.warnings)}),{errors:t,warnings:n}}function c(e){let t=[],n=[];e.name||t.push(`Missing name`),e.import||t.push(`Missing import`),e.description||t.push(`Missing description`);let r=e;r.category||n.push(`Missing category`),r.complexity||n.push(`Missing complexity`),r.accessibility||n.push(`Missing accessibility info`),!e.props||!Array.isArray(e.props)?t.push(`Props must be an array`):e.props.forEach((e,r)=>{e.name||t.push(`Prop ${r}: Missing name`),e.type||t.push(`Prop ${e.name||r}: Missing type`),e.description||n.push(`Prop ${e.name}: Missing description`)}),(!r.examples||r.examples.length<3)&&n.push(`Should have at least 3 examples`),(!r.bestPractices||r.bestPractices.length<5)&&n.push(`Should have at least 5 best practices`),(!r.quickStart||Object.keys(r.quickStart).length<3)&&n.push(`Should have at least 3 quick start examples`),(!r.commonPatterns||Object.keys(r.commonPatterns).length<3)&&n.push(`Should have at least 3 common patterns`);let i=s(e);return t.push(...i.errors),n.push(...i.warnings),{errors:t,warnings:n,valid:t.length===0}}function l(){let t=new Map;return e.aiComponentsSchema.components.forEach(e=>{let n=c(e);t.set(e.name,n)}),{results:t,summary:{total:e.aiComponentsSchema.components.length,valid:Array.from(t.values()).filter(e=>e.valid).length,invalid:Array.from(t.values()).filter(e=>!e.valid).length,totalErrors:Array.from(t.values()).reduce((e,t)=>e+t.errors.length,0),totalWarnings:Array.from(t.values()).reduce((e,t)=>e+t.warnings.length,0)}}}function u(e){let t=/import\s+.*?\s+from\s+['"](.*?)['"]/g,n=new Set,r;for(;(r=t.exec(e))!==null;)n.add(r[1]);return Array.from(n)}function d(e){let t=/<(\w+)[\s>]/g,n=new Set,r;for(;(r=t.exec(e))!==null;){let e=r[1];e[0]===e[0].toUpperCase()&&n.add(e)}return Array.from(n)}function f(t){let n=[],r=[],i=u(t).filter(e=>!e.includes(`gd-design-library`)&&!e.includes(`react`)&&!e.includes(`react-dom`));i.length>0&&n.push(`Invalid imports detected: ${i.join(`, `)}`);let a=d(t);if(!a.every(t=>e.aiComponentsSchema.components.some(e=>e.name===t))){let t=a.filter(t=>!e.aiComponentsSchema.components.some(e=>e.name===t));t.length>0&&r.push(`Using components not in library: ${t.join(`, `)}`)}let o=[`div`,`span`,`button`,`input`,`form`].filter(e=>t.includes(`<${e}`));return o.length>0&&r.push(`Consider using library components instead of raw HTML: ${o.join(`, `)}`),{errors:n,warnings:r,valid:n.length===0}}exports.extractComponents=d,exports.extractImports=u,exports.validateAllSchemas=l,exports.validateGeneratedCode=f,exports.validateSchema=c;
+const e=require("./schemas/components.cjs"),t=require("./a2ui/spec-schema.cjs");var n=new Set(Object.keys(t.A2UI_SPEC_SCHEMA.properties.ui.properties.components.items.properties)),r=new Set(`align.justify.isWrap.gap.flexDirection.alignItems.justifyContent.maxHeight.title.description.max.min.isLoading.searchValue.noHistoryResultsLabel.noResultsLabel.showSearch.showTopBanner.display.overflow.minWidth.maxWidth.margin.marginTop.marginRight.marginBottom.marginLeft.paddingTop.paddingRight.paddingBottom.paddingLeft.zIndex.position.top.right.bottom.left.flex.flexWrap.flexGrow.flexShrink.flexBasis.alignContent.justifySelf.alignSelf.order.cursor.role`.split(`.`)),i=new Set([`type`]),a=[/ReactNode/i,/MouseEvent/i,/KeyboardEvent/i,/ChangeEvent/i,/ElementType/i,/=>/];function o(e,t){let o=[],s=[];return e.forEach(e=>{i.has(e.name)&&o.push(`${t} prop "${e.name}" is reserved. Use a dedicated field name instead.`),!n.has(e.name)&&!r.has(e.name)&&s.push(`${t} prop "${e.name}" is not declared in the shared A2UI component schema.`),a.some(t=>t.test(e.type))&&s.push(`${t} prop "${e.name}" uses non-JSON-safe type "${e.type}".`)}),{errors:o,warnings:s}}function s(e){if(!e.a2uiName)return{errors:[],warnings:[]};let t=[],n=[],r=o(e.props,`A2UI`);return t.push(...r.errors),n.push(...r.warnings),e.a2uiSubcomponents&&Object.entries(e.a2uiSubcomponents).forEach(([e,r])=>{let i=o(r.props,`A2UI subcomponent "${e}"`);t.push(...i.errors),n.push(...i.warnings)}),{errors:t,warnings:n}}function c(e){let t=[],n=[];e.name||t.push(`Missing name`),e.import||t.push(`Missing import`),e.description||t.push(`Missing description`);let r=e;r.category||n.push(`Missing category`),r.complexity||n.push(`Missing complexity`),r.accessibility||n.push(`Missing accessibility info`),!e.props||!Array.isArray(e.props)?t.push(`Props must be an array`):e.props.forEach((e,r)=>{e.name||t.push(`Prop ${r}: Missing name`),e.type||t.push(`Prop ${e.name||r}: Missing type`),e.description||n.push(`Prop ${e.name}: Missing description`)}),(!r.examples||r.examples.length<3)&&n.push(`Should have at least 3 examples`),(!r.bestPractices||r.bestPractices.length<5)&&n.push(`Should have at least 5 best practices`),(!r.quickStart||Object.keys(r.quickStart).length<3)&&n.push(`Should have at least 3 quick start examples`),(!r.commonPatterns||Object.keys(r.commonPatterns).length<3)&&n.push(`Should have at least 3 common patterns`);let i=s(e);return t.push(...i.errors),n.push(...i.warnings),{errors:t,warnings:n,valid:t.length===0}}function l(){let t=new Map;return e.aiComponentsSchema.components.forEach(e=>{let n=c(e);t.set(e.name,n)}),{results:t,summary:{total:e.aiComponentsSchema.components.length,valid:Array.from(t.values()).filter(e=>e.valid).length,invalid:Array.from(t.values()).filter(e=>!e.valid).length,totalErrors:Array.from(t.values()).reduce((e,t)=>e+t.errors.length,0),totalWarnings:Array.from(t.values()).reduce((e,t)=>e+t.warnings.length,0)}}}function u(e){let t=/import\s+.*?\s+from\s+['"](.*?)['"]/g,n=new Set,r;for(;(r=t.exec(e))!==null;)n.add(r[1]);return Array.from(n)}function d(e){let t=/<(\w+)[\s>]/g,n=new Set,r;for(;(r=t.exec(e))!==null;){let e=r[1];e[0]===e[0].toUpperCase()&&n.add(e)}return Array.from(n)}function f(t){let n=[],r=[],i=u(t).filter(e=>!e.includes(`gd-design-library`)&&!e.includes(`react`)&&!e.includes(`react-dom`));i.length>0&&n.push(`Invalid imports detected: ${i.join(`, `)}`);let a=d(t);if(!a.every(t=>e.aiComponentsSchema.components.some(e=>e.name===t))){let t=a.filter(t=>!e.aiComponentsSchema.components.some(e=>e.name===t));t.length>0&&r.push(`Using components not in library: ${t.join(`, `)}`)}let o=[`div`,`span`,`button`,`input`,`form`].filter(e=>t.includes(`<${e}`));return o.length>0&&r.push(`Consider using library components instead of raw HTML: ${o.join(`, `)}`),{errors:n,warnings:r,valid:n.length===0}}exports.extractComponents=d,exports.extractImports=u,exports.validateAllSchemas=l,exports.validateGeneratedCode=f,exports.validateSchema=c;

package/ai/validation.d.cts

@@ -0,0 +1,35 @@
+import { ComponentSchema } from './schemas/components.js';
+export interface ValidationResult {
+    errors: string[];
+    warnings: string[];
+    valid: boolean;
+}
+/**
+ * Validate a component schema
+ */
+export declare function validateSchema(schema: ComponentSchema): ValidationResult;
+/**
+ * Validate all component schemas
+ */
+export declare function validateAllSchemas(): {
+    results: Map<string, ValidationResult>;
+    summary: {
+        total: number;
+        valid: number;
+        invalid: number;
+        totalErrors: number;
+        totalWarnings: number;
+    };
+};
+/**
+ * Extract imports from code string
+ */
+export declare function extractImports(code: string): string[];
+/**
+ * Extract component names from code string
+ */
+export declare function extractComponents(code: string): string[];
+/**
+ * Validate generated code
+ */
+export declare function validateGeneratedCode(code: string): ValidationResult;