gd-design-library 1.8.2 → 1.8.3

package/ai/schemas/index.cjs

@@ -1 +1 @@
-const e=require(`./components.cjs`);var t={byCategory:{"Actions & Controls":e.aiComponentsSchema.components.filter(e=>e.category===`Actions & Controls`).map(e=>e.name),"Layout & Structure":e.aiComponentsSchema.components.filter(e=>e.category===`Layout & Structure`).map(e=>e.name),"Forms & Inputs":e.aiComponentsSchema.components.filter(e=>e.category===`Forms & Input`||e.category===`Forms & Inputs`).map(e=>e.name),"Feedback & Overlays":e.aiComponentsSchema.components.filter(e=>e.category===`Feedback & Overlays`).map(e=>e.name),Navigation:e.aiComponentsSchema.components.filter(e=>e.category===`Navigation`).map(e=>e.name),"Display & Content":e.aiComponentsSchema.components.filter(e=>e.category===`Display & Content`||e.category===`Content & Media`).map(e=>e.name)},byComplexity:{Low:e.aiComponentsSchema.components.filter(e=>e.complexity===`Low`).map(e=>e.name),Medium:e.aiComponentsSchema.components.filter(e=>e.complexity===`Medium`).map(e=>e.name),High:e.aiComponentsSchema.components.filter(e=>e.complexity===`High`).map(e=>e.name)},byFeature:{"Form Controls":[`Input`,`Select`,`Textarea`,`Switch`,`Toggle`,`RadioGroup`,`Slider`,`InputFile`,`DragAndDropFiles`,`Form`,`Label`],Layout:[`Box`,`FlexContainer`,`Column`,`Row`,`Wrapper`,`Scroll`,`Separator`],Navigation:[`Breadcrumbs`,`Tabs`,`Stepper`,`List`,`Accordion`,`Link`,`Menu`],Feedback:[`InlineNotification`,`Loader`,`Skeleton`,`Snackbar`,`SnackbarManager`,`Tooltip`,`Modal`,`Portal`],Display:[`Typography`,`Button`,`Icon`,`Image`,`Card`,`Avatar`,`Badge`,`Truncate`],Media:[`Carousel`,`ContentCarousel`,`Image`],"Data Display":[`Table`,`Chart`,`Counter`,`Price`,`ProgressBar`,`Rating`],Chat:[`ChatContainer`,`ChatBubble`]}};exports.componentIndex=t;
+const e=require("./components.cjs");var t={byCategory:{"Actions & Controls":e.aiComponentsSchema.components.filter(e=>e.category===`Actions & Controls`).map(e=>e.name),"Layout & Structure":e.aiComponentsSchema.components.filter(e=>e.category===`Layout & Structure`).map(e=>e.name),"Forms & Inputs":e.aiComponentsSchema.components.filter(e=>e.category===`Forms & Input`||e.category===`Forms & Inputs`).map(e=>e.name),"Feedback & Overlays":e.aiComponentsSchema.components.filter(e=>e.category===`Feedback & Overlays`).map(e=>e.name),Navigation:e.aiComponentsSchema.components.filter(e=>e.category===`Navigation`).map(e=>e.name),"Display & Content":e.aiComponentsSchema.components.filter(e=>e.category===`Display & Content`||e.category===`Content & Media`).map(e=>e.name)},byComplexity:{Low:e.aiComponentsSchema.components.filter(e=>e.complexity===`Low`).map(e=>e.name),Medium:e.aiComponentsSchema.components.filter(e=>e.complexity===`Medium`).map(e=>e.name),High:e.aiComponentsSchema.components.filter(e=>e.complexity===`High`).map(e=>e.name)},byFeature:{"Form Controls":[`Input`,`Select`,`Textarea`,`Switch`,`Toggle`,`RadioGroup`,`Slider`,`InputFile`,`DragAndDropFiles`,`Form`,`Label`],Layout:[`Box`,`FlexContainer`,`Column`,`Row`,`Wrapper`,`Scroll`,`Separator`],Navigation:[`Breadcrumbs`,`Tabs`,`Stepper`,`List`,`Accordion`,`Link`,`Menu`],Feedback:[`InlineNotification`,`Loader`,`Skeleton`,`Snackbar`,`SnackbarManager`,`Tooltip`,`Modal`,`Portal`],Display:[`Typography`,`Button`,`Icon`,`Image`,`Card`,`Avatar`,`Badge`,`Truncate`],Media:[`Carousel`,`ContentCarousel`,`Image`],"Data Display":[`Table`,`Chart`,`Counter`,`Price`,`ProgressBar`,`Rating`],Chat:[`ChatContainer`,`ChatBubble`]}};exports.componentIndex=t;

package/ai/schemas/index.d.cts

@@ -0,0 +1,28 @@
+/**
+ * Component index for easy discovery by category, complexity, and feature
+ */
+export declare const componentIndex: {
+    byCategory: {
+        'Actions & Controls': string[];
+        'Layout & Structure': string[];
+        'Forms & Inputs': string[];
+        'Feedback & Overlays': string[];
+        Navigation: string[];
+        'Display & Content': string[];
+    };
+    byComplexity: {
+        Low: string[];
+        Medium: string[];
+        High: string[];
+    };
+    byFeature: {
+        'Form Controls': string[];
+        Layout: string[];
+        Navigation: string[];
+        Feedback: string[];
+        Display: string[];
+        Media: string[];
+        'Data Display': string[];
+        Chat: string[];
+    };
+};

package/ai/testing_prompts/atomic_prompts.md

@@ -2,142 +2,155 @@
 
 ## PROMPT FOR AVATAR
 
-Generate 4 different avatars:
+Generate 5 different avatars:
 
 1. Default Avatar with random picture, size s
 2. Avatar with badge and custom color: #99322b, size m
 3. Avatar with initials : TJ and custom background color : #cfaaa7, size l
 4. Avatar with icon of star, size xl
+5. Two Avatar.User variants side by side: a card variant with name = 'Jane Doe', subtitle = 'Engineer', and a badge; and a profile variant with name = 'John Smith', subtitle = 'Admin', and an action button labeled 'Edit'
 
 ---
 
 ## PROMPT FOR BADGE
 
-Generate 4 different badges:
+Generate 5 different badges:
 
 1. Small badge with primary color
 2. Medium badge with secondary light background
 3. Large badge with tertiary outline and with start icon
-4. Large Quaternary Outline Filled Light disabled badge
+4. Large Quaternary Outline Filled Light disabled badge and with icon on the end
+5. Medium quinary badge with filled appearance and text label = 'Beta'
 
 ---
 
 ## PROMPT FOR BOX
 
-Generate 3 different types of boxes:
+Generate 4 different types of boxes:
 
-1. Default vertical box with centered content
-2. Horizontal box, which have border
-3. Box with shadow hover
+1. Default vertical box with centered content (use flex alignment so children are centered)
+2. Highlighted horizontal box with a border
+3. Box with hover shadow effect
+4. Vertical box with content 'Skip region' and tabIndex set so the box is removed from the tab order (not keyboard-focusable)
 
 ---
 
 ## PROMPT FOR BUTTON
 
-Generate 5 different buttons
+Generate 6 different buttons:
 
-1. Default button with 'Click me' name, size small
-2. Button with check icon on the start, 'Don't Click' name and arrow right in the end, size medium
-3. Button with cross icon only (NO TEXT ON THE BUTTON)
-4. Disabled button with name 'Disabled', size large
-5. Submit rounded button
+1. Default primary button with text 'Click me' and small size
+2. Secondary button with check icon on the start, text 'Don't Click' and arrow-right icon on the end, size medium
+3. Tertiary Icon-only button using `isIcon`, cross icon, NO visible label text, with `ariaLabel` = 'Close'
+4. Disabled outlined button with text 'Disabled', size large
+5. `type` submit with rounded styling
+6. Button in loading state
 
 ---
 
 ## PROMPT FOR CHECKBOX
 
-Generate 3 different checkboxes:
+Generate 3 different checkboxes using `input` with `variant=”checkbox”`:
 
-1. Default checkbox with 'Accept terms' label
-2. Checkbox with indeterminate state and 'Select all' label
-3. Checkbox with disabled state with already checked status
+1. Default unchecked checkbox input with label “Accept terms”, name=”terms”, value=”yes”, and an action that toggles its checked state.
+2. Checkbox input with indeterminate state and label 'Select all'
+3. Small checkbox input with disabled state, checked true, label 'Unavailable option'
 
 ---
 
 ## PROMPT FOR ICON
 
-Generate 2 different icons:
+Generate 3 different icons:
 
-1. Cross icon with red color
-2. thumbUp icon with xl size
+1. Cross icon with error color
+2. thumbUp icon with `size` = xl
+3. Check icon with explicit `width` = 24 and `height` = 24 (no `size` prop)
 
 ---
 
 ## PROMPT FOR IMAGE
 
-Generate 3 different image:
+Generate 4 different images:
 
-1. Default image with 'This is image' caption
+1. Default image where set as = 'figure' and captionAs = 'figcaption' with explicit caption text = 'This is a semantic image caption'.
 2. Image with placeholder: loading image
-3. Fallback image
+3. Image with valid src. Set objectFit = 'cover' and an explicit caption text = 'Cropped Cover Test'
+4. Image where src points to a totally broken/invalid URL (e.g., '<http://invalid.url/image.jpg>'). The fallbackComponent must be a Row containing an explicit text = 'Image failed to load'
 
 ---
 
 ## PROMPT FOR INPUT
 
-Generate 6 different inputs:
+Generate 9 different inputs:
 
-1. Success color input with label = 'Simple Label' and helper text = 'Need some help'
-2. Disabled input with placeholder = 'Disabled'
-3. Input that is used to fill in the password with button to mask characters
-4. Input with rounded corners
-5. Checkbox input with label = 'This is checkbox'
-6. Radio input with label = 'This is radio'
+1. Success color input with label 'Simple Label', helper text 'Need some help', and `required` (or `ariaRequired`) true
+2. Disabled input with placeholder 'Disabled'
+3. Password input (`variant` password) with an `adornmentEnd` control that toggles between masked and visible text
+4. Text input with rounded corners
+5. Checkbox input (`variant` checkbox) with label 'This is checkbox', `name`, `value`, and `onChange` handler
+6. Radio input (`variant` radio) with label 'This is radio', `name` (group name), `value`, and either controlled `checked` or `onChange`
+7. Error color input with label, helper text as the error message
+8. Read-only text input with `readOnly` true and `value` 'Cannot edit';
+9. Separate text input that shows `adornmentStart` currency € with a short label
 
 ---
 
 ## PROMPT FOR INPUTFILE
 
-Generate 4 different input files:
+Generate 5 different input files:
 
-1. Input file with custom label = 'Pick a file'
+1. Input file with custom text: 'Pick a file'.
 2. Disabled input file
-3. Input file as an icon
-4. Input file with ability to upload multiple files
+3. Input file as an icon ONLY (no text) include `buttonProps` `ariaLabel` for accessibility
+4. Input file with `multiple` true so several files can be selected, with `onChange`
+5. Input file with `accept` restricting types (e.g. `.pdf` / PDF MIME types, or `image/*`)
 
 ---
 
 ## PROMPT FOR LABEL
 
-Generate 2 different labels:
+Generate 4 different labels:
 
-1. Label with name = 'Lable with star icon' with child icon of star
-2. Custom style of error background and white text = 'Hello'
+1. Label with text 'Label with star icon' and a child star icon beside the text
+2. Label with custom `styles` error background and white text and text 'Hello'
+3. Form label: set `htmlFor` to match a paired field's `id` (e.g. input `id` = 'user-email', label text 'Email address')
+4. Label with an `onClick` handler and text 'More details' (interactive label pattern)
 
 ---
 
 ## PROMPT FOR LINK
 
-Generate 5 different links:
+Generate 6 different links:
 
-1. Primary link with text = 'Go to Dashboard' which is highlighted when hovered
-2. External link to '[https://react.dev](https://react.dev)' that opens in a new tab
-3. Disabled link with text = 'Coming Soon' and custom light red style
-4. Inline link used to jump to a section with large size
-5. Link with 'mailto:[support@example.com](mailto:support@example.com)' using the button type of link (via role)
+1. Primary link with text 'Go to Dashboard', `variant` primary, and `underline` = 'highlight' (underline appears on hover)
+2. External link: `href` '<https://react.dev>', text 'React documentation', `target` '\_blank', and `rel` = 'noopener noreferrer'
+3. Disabled link with text 'Coming Soon', `disabled` true, and custom error color styling
+4. Inline link with `href` '#setup' (or another fragment), text 'Jump to setup', `size` 'lg', used inside a paragraph; target section has matching `id`
+5. Link with `href` 'mailto:support@example.com', text 'Email support', and `role` = 'button' for a toolbar-style control (still navigates via mailto when not disabled)
+6. Secondary variant link with text 'Learn more', and a separate inverted variant link suitable on a dark background with text 'Privacy'
 
 ---
 
 ## PROMPT FOR LOADER
 
-Generate 4 different loaders:
+Generate 3 different loaders:
 
 1. Default loader with circle animation
 2. Loader with dots animation size = large
 3. Loader with dots animation , which are rounded
-4. Loader for section variant. Box → click button → loader appears
 
 ---
 
 ## PROMPT FOR SELECT
 
-Generate 5 different selects:
+Generate 6 different selects:
 
-1. Searchable select with a custom searchPlaceholder = 'Search fruits...'
-2. Multiple select that formats selected items using a custom itemStringifier
-3. Select with a start adornment icon of euro and success color
-4. Select with an empty items array that displays a custom 'No data available' text using emptyItemsResult
-5. Disabled select with placeholder = 'Disabled option'
+1. Searchable select with `searchPlaceholder` = 'Search fruits...', several fruit options, and an `onChange` (or `onSelect`) handler when the user picks an item
+2. Multiple select with `itemStringifier` formatting chips/labels from options (e.g. uppercase names), several options, and `onChange` reflecting the multi-value updates
+3. Single select with `adornmentStart` (e.g. euro symbol or Icon), `color` = 'success', placeholder, and a short list of options
+4. Single select with `items` = `[]` (or undefined) and `emptyItemsResult` text 'No data available' when the menu opens
+5. Disabled select with `disabled` true, `placeholder` = 'Disabled option', and sample items that cannot be chosen
+6. Single select with `color` 'error' or 'warning' (whichever contrasts in the theme), default items, and optional `dropdownMaxHeight` constrained (e.g. '120px') to show scrolling behavior with many items
 
 ---
 
@@ -163,10 +176,12 @@ Generate 3 different skeletons:
 
 ## PROMPT FOR SLIDER
 
-Generate 2 different sliders:
+Generate 4 different sliders:
 
-1. Default slider with initial value = 50 (min = 0 , max = 100)
-2. Disabled slider
+1. Default slider with `value` = 30, `min` = 0, `max` = 100, and an `onChange` handler that updates or logs the numeric value
+2. Disabled slider (same range as 1 or any range), `disabled` true
+3. Slider with `step` = 10, `min` = 0, `max` = 50, initial `value` = 25, so the thumb jumps in steps of 5
+4. Slider with a non-zero range: `min` = 10, `max` = 90, `value` = 40 (or controlled `value` + `onChange`)
 
 ---
 
@@ -182,29 +197,33 @@ Generate slider dots:
 
 Generate 4 different switches:
 
-1. Default controlled switch with text = 'Enable notifications'
-2. Disabled switch with the label positioned to the left and text = 'Dark mode'
-3. Switch in a loading state (using isLoading prop) with text = 'Auto-save'
-4. Checked switch without visible text, but with an ariaLabel = 'Toggle sound' for accessibility
+1. Controlled switch with `checked` and `onValueChange`, label on the right = 'Enable notifications'
+2. Disabled switch with `label` = 'left', children text 'Dark mode'
+3. Switch with `isLoading` true and children text 'Auto-save'
+4. Checked switch (`checked` true) with no visible label children; set an accessible name with `aria-label` = 'Toggle sound' on the component (or equivalent on the focusable control)
 
 ---
 
 ## PROMPT FOR TEXTAREA
 
-Generate 3 different textarea:
+Generate 5 different textareas.
 
-1. Default textarea with placeholder = 'Hello' and char limit = 20 and borders with success color
-2. Disabled textarea with placeholder = 'Disabled '
-3. Textarea with ability to be resizable and displaying the max character = 10
+1. Default `variant` with `placeholder` 'Hello', `char limit` 10, `color` 'success'
+2. Textarea with `resize` 'vertical' or 'both', `maxCharacters` 20, and visible character counter (wrapper with count), `placeholder` ‘Resizable input’
+3. `variant` 'inline' with `placeholder` 'Inline notes' and `color` 'primary’, `placeholder` ‘Inline input’
+4. Textarea with `dynamicHeightAdjustment` true, multiline content = 'This is some initial content that will expand the textarea as you type more text into it. The height will adjust automatically to fit the content, making it a dynamic input experience.' height, `placeholder` ‘Dynamic input’
+5. Disabled textarea with `disabled` true and `placeholder` 'Disabled'
 
 ---
 
 ## PROMPT FOR TOGGLE
 
-Generate 2 different toggle:
+Generate 4 different toggles:
 
-1. Default toggle with 2 options 'Hello' and 'Bye'
-2. Disabled toggle with 3 icons as an options : icon of home, icon of user, icon of info
+1. Toggle with `items` as string array ['Hello', 'Bye'], controlled `value` (e.g. 'Hello'), and `onValueChange` updating or logging the selected value
+2. Toggle with three `ToggleItem` objects where `label` is text but `value` is an id (e.g. `{ label: 'Day', value: 'day' }`, `{ label: 'Week', value: 'week' }`, `{ label: 'Month', value: 'month' }`), `value` set to one id, and `onValueChange`
+3. Disabled toggle with `disabled` true, same or similar `items`, and `value` frozen on one option (clicks should not change selection)
+4. Toggle with three options using `renderItemContent` to render home, user, and info Icons; use `ToggleItem` entries with stable `value` per option and readable names (e.g. text beside icons or visually hidden labels) since each control is a `Button` child
 
 ---