gd-design-library 0.7.0 → 0.7.2

package/ai/schemas/components/Slider.js

@@ -1,42 +0,0 @@
-const e = {
-  name: "Slider",
-  import: "import { Slider } from 'gd-design-library'",
-  description: "Range input component for selecting numeric values within a defined range with visual feedback and accessibility support.",
-  props: [{
-    name: "min",
-    type: "number",
-    description: "Minimum value of the slider range",
-    default: 1
-  }, {
-    name: "max",
-    type: "number",
-    description: "Maximum value of the slider range",
-    default: 100
-  }, {
-    name: "value",
-    type: "number",
-    description: "Current value of the slider",
-    default: 1
-  }, {
-    name: "disabled",
-    type: "boolean",
-    description: "Whether the slider is disabled",
-    default: !1
-  }, {
-    name: "onChange",
-    type: "(value: number) => void",
-    description: "Callback function triggered when slider value changes"
-  }, {
-    name: "styles",
-    type: "React.CSSProperties",
-    description: "Custom styles to apply to the slider component",
-    default: {}
-  }],
-  examples: ["<Slider min={0} max={100} value={50} onChange={handleChange} />", "<Slider min={1} max={10} value={5} disabled={isLoading} />", '<Slider min={0} max={255} value={brightness} onChange={setBrightness} styles={{width: "300px"}} />', "<Slider min={18} max={65} value={age} onChange={handleAgeChange} />"]
-}, i = ["Use Slider for small numeric ranges where direct manipulation is intuitive.", "Debounce onChange if updating heavy UI to avoid performance issues.", "Disable Slider while async operations are in progress to prevent changes.", "Constrain min/max to valid domain and reflect value externally for controlled usage.", "Use Slider for numeric input ranges where visual feedback improves user experience over text input.", "Apply Slider min and max props to define the valid range for user selection.", "Set Slider value with controlled component pattern using state management for form integration.", "Use Slider onChange handler to update state and trigger side effects like live preview updates.", "Apply Slider disabled={true} during form submission or when dependent on other field values.", "Combine Slider with Typography displaying current value for precise feedback.", 'Use Slider styles={{width: "100%"}} for responsive full-width sliders in forms.', "Apply Slider in Card components with padding for comfortable touch targets on mobile.", "Set Slider with small ranges (min={1} max={5}) for rating or scale selections.", "Use Slider for volume, brightness, or opacity controls in media and design applications.", "Apply Slider with debounced onChange for performance when updating expensive operations.", 'Combine Slider with Input type="number" for dual input methods catering to different users.', "Use Slider min={0} max={100} for percentage-based inputs like progress or completion.", "Apply Slider in filter interfaces for price ranges, distances, or date ranges.", "Set Slider with step values via HTML attributes for discrete value selections.", "Use Slider with visual indicators showing min/max labels for better context.", "Apply Slider disabled state based on user permissions or feature availability.", "Combine Slider with FlexContainer for labeled sliders with icons or text.", "Use Slider in responsive layouts adjusting width based on container size.", "Apply Slider with custom thumb and track styling via CSS for branded appearance.", "Set Slider value programmatically for preset options or quick selections.", "Use Slider with multiple instances for RGB/HSL color selection interfaces.", "Apply Slider in Column layout with consistent spacing for multi-slider forms.", "Combine Slider with real-time validation showing warnings when approaching limits.", "Use Slider for time-based inputs like hours, minutes, or timeline scrubbing.", "Apply Slider with tooltip showing current value on hover or during drag.", "Set Slider with logarithmic scale for non-linear value distributions.", "Use Slider in settings panels for user preference adjustments.", "Apply Slider with keyboard support ensuring accessibility for all users.", "Combine Slider with localStorage to persist user preferences across sessions.", "Use Slider min with negative values for ranges that include negative numbers.", "Apply Slider in comparison tools for side-by-side value adjustments.", "Set Slider with marks or ticks for specific value points along the range.", "Use Slider onChange with throttling for smooth performance during dragging.", "Apply Slider with aria-label for screen reader accessibility.", "Combine Slider with animation libraries for smooth value transitions.", "Use Slider in data visualization for interactive chart filtering.", "Apply Slider with custom value formatting for currency or unit display.", "Set Slider with snapping behavior for preferred value intervals."], r = {
-  component: e,
-  compositionTips: i
-};
-export {
-  r as default
-};

package/ai/schemas/components/Snackbar.js

@@ -1,57 +0,0 @@
-const e = {
-  name: "Snackbar",
-  import: "import { showSnackbar, SnackbarVariant, SnackbarPosition } from 'gd-design-library'",
-  description: "Toast notification system for displaying temporary messages, alerts, and feedback with configurable positioning, duration, and styling. Use showSnackbar() function to trigger notifications.",
-  props: [{
-    name: "title",
-    type: "string",
-    description: "The title text displayed at the top of the snackbar notification",
-    required: !0
-  }, {
-    name: "message",
-    type: "string",
-    description: "The main content message of the snackbar notification",
-    required: !0
-  }, {
-    name: "variant",
-    type: "SnackbarVariant",
-    description: "Visual style variant determining color and icon of the snackbar",
-    default: "SnackbarVariant.Info",
-    enum: ["Info", "Success", "Warning", "Error"]
-  }, {
-    name: "position",
-    type: "SnackbarPosition",
-    description: "Position on screen where the snackbar appears",
-    default: "SnackbarPosition.TopRight",
-    enum: ["TopLeft", "TopCenter", "TopRight", "BottomLeft", "BottomCenter", "BottomRight"]
-  }, {
-    name: "duration",
-    type: "number",
-    description: "Time in milliseconds before the snackbar automatically dismisses",
-    default: 5e3
-  }, {
-    name: "dismissOnClick",
-    type: "boolean",
-    description: "Whether clicking on the snackbar dismisses it",
-    default: !0
-  }, {
-    name: "actionLabel",
-    type: "string",
-    description: "Text for an optional action button within the snackbar"
-  }, {
-    name: "onAction",
-    type: "() => void",
-    description: "Callback function triggered when action button is clicked"
-  }, {
-    name: "onDismiss",
-    type: "() => void",
-    description: "Callback function triggered when snackbar is dismissed"
-  }],
-  examples: ['const SnackbarExample = () => { const onClick = () => { showSnackbar({ title: "Info", message: "This is an example of snackbar message.", variant: SnackbarVariant.Info, position: SnackbarPosition.TopRight, duration: 3000, dismissOnClick: true }); }; return ( <div> <SnackbarManager /> <Button onClick={onClick}>Show Snackbar</Button> </div> ); };', 'showSnackbar({ title: "Success", message: "Your changes have been saved.", variant: SnackbarVariant.Success, position: SnackbarPosition.TopCenter });', 'showSnackbar({ title: "Error", message: "Failed to save changes.", variant: SnackbarVariant.Error, actionLabel: "Retry", onAction: handleRetry });', 'showSnackbar({ title: "Warning", message: "You have unsaved changes.", variant: SnackbarVariant.Warning, duration: 0, dismissOnClick: false });']
-}, a = ["Use variant to convey message severity (info, success, warning, error).", "Prefer TopRight or BottomRight positions to avoid overlapping core content.", "Set duration=0 for persistent messages that require explicit dismissal.", "Provide actionLabel and onAction for undo/redo or retry flows.", "Apply SnackbarVariant.Success for positive confirmations like save, create, or delete operations.", "Use SnackbarVariant.Error for API failures, validation errors, or system issues.", "Set SnackbarVariant.Warning for cautionary messages or potentially destructive actions.", "Apply SnackbarVariant.Info for neutral informational messages or tips.", "Use SnackbarPosition.TopRight or TopCenter for important notifications that need immediate attention.", "Apply SnackbarPosition.BottomRight or BottomCenter for less intrusive notifications.", "Set duration: 0 with dismissOnClick: false for critical messages that require user acknowledgment.", "Use shorter duration (2000-3000ms) for simple success messages, longer (5000-7000ms) for error details.", 'Include actionLabel and onAction for snackbars that offer user actions like "Undo" or "Retry".', "Call showSnackbar() in response to async operations completion or failure.", "Use onDismiss callback to track user interaction with notifications for analytics.", "Avoid showing multiple snackbars rapidly; batch or queue messages when appropriate.", "Keep snackbar messages concise; use title for category and message for details.", "Use consistent positioning throughout the app for predictable user experience.", "Show snackbars for background operations that complete while user is on different screen.", "Use snackbars instead of modals for non-blocking feedback that doesn't require immediate action.", "Combine snackbars with form validation to show submission results.", "Apply dismissOnClick: true for informational messages that users can quickly dismiss.", "Set dismissOnClick: false for important messages that should remain until duration expires.", 'Use snackbars for real-time updates like "New message received" or "File uploaded".', 'Show progress in snackbar message for operations like "Uploading... 60%".', "Apply consistent variant usage across similar operations for user familiarity.", 'Use snackbar action buttons for quick fixes like "Refresh" or "Try Again".', "Avoid overwhelming users with too many snackbars; prioritize important messages.", "Test snackbar positioning on mobile devices to ensure they don't obstruct important UI.", 'Use snackbars for connection status changes like "Connection lost" or "Reconnected".', "Apply animation classes via className for custom entrance/exit effects."], i = {
-  component: e,
-  compositionTips: a
-};
-export {
-  i as default
-};

package/ai/schemas/components/SnackbarManager.js

@@ -1,13 +0,0 @@
-const a = {
-  name: "SnackbarManager",
-  import: "import { SnackbarManager } from 'gd-design-library'",
-  description: "Global snackbar container component that manages and displays all snackbar notifications. Must be included once at the app root level to enable showSnackbar() functionality.",
-  props: [],
-  examples: ["<SnackbarManager />"]
-}, n = ["Render a single SnackbarManager at the application root to handle all snackbars.", "Do not mount multiple managers; use showSnackbar() API to enqueue messages.", "Mount a single <SnackbarManager /> at the root of your app to enable snackbar rendering.", "Place SnackbarManager at the root of your app, typically in App.tsx or index.tsx, to enable global snackbar functionality.", "Use showSnackbar() function anywhere in the app after SnackbarManager is mounted.", "Apply SnackbarManager maxSnackbars limit to prevent notification overflow."], e = {
-  component: a,
-  compositionTips: n
-};
-export {
-  e as default
-};

package/ai/schemas/components/Stepper.js

@@ -1,38 +0,0 @@
-const e = {
-  name: "Stepper",
-  import: "import { Stepper } from 'gd-design-library'",
-  description: "Progress indicator component that displays multi-step processes or workflows with visual feedback for completed, current, and upcoming steps. Supports custom step content, validation states, and interactive navigation between steps.",
-  props: [{
-    name: "steps",
-    type: "Array<StepProps>",
-    description: "Array of step objects containing step information. Each step has validationStatus (error/success), customView (ReactNode), and label (ReactNode)",
-    required: !0,
-    default: []
-  }, {
-    name: "activeStep",
-    type: "number",
-    description: "Index of the currently active step (zero-based)",
-    default: 0
-  }, {
-    name: "isIconsView",
-    type: "boolean",
-    description: "Display steps with icons instead of numbers",
-    default: !1
-  }, {
-    name: "onStepClick",
-    type: '(index: number, status: "error" | "success" | undefined, event: MouseEvent) => void',
-    description: "Callback function triggered when a step is clicked"
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom styles for the stepper component",
-    default: {}
-  }],
-  examples: ['<Stepper steps={[{label: "Details"}, {label: "Payment"}, {label: "Review"}]} activeStep={1} />', "<Stepper steps={wizardSteps} activeStep={currentStep} onStepClick={handleStepClick} />", '<Stepper steps={[{label: "Step 1", validationStatus: "success"}, {label: "Step 2", validationStatus: "error"}]} activeStep={1} />', "<Stepper steps={stepsWithIcons} isIconsView={true} activeStep={2} />", '<Stepper steps={[{label: "Upload", customView: <Icon name="upload" />}, {label: "Process"}, {label: "Complete"}]} activeStep={0} />']
-}, t = ["Use Stepper for multi-step wizards and checkout flows with clear progress.", "Keep step labels concise; add customView for icons or additional context.", "Allow clicking previous steps for quick navigation when business rules permit.", "Reflect validationStatus on steps to signal completion or errors.", "Persist activeStep in state or URL to keep progress across reloads.", "Use Stepper for multi-step forms or wizards with clear progression indicators showing completed, current, and upcoming steps.", "Apply Stepper activeStep with state management to track user progress through multi-page workflows.", 'Set Stepper steps with validationStatus="success" for completed steps and "error" for steps requiring correction.', "Use Stepper onStepClick to enable navigation between steps for non-linear workflows where users can jump between sections.", "Apply Stepper isIconsView={true} for visual processes where icons better represent step content than numbers.", "Combine Stepper with Form validation setting validationStatus based on form field validity in each step.", "Use Stepper customView prop in steps for rich step indicators like avatars, icons, or progress percentages.", "Apply Stepper with disabled onStepClick for linear workflows requiring sequential step completion.", "Set Stepper activeStep={0} initially and increment after successful validation of current step content.", "Use Stepper in Modal for guided setup processes or configuration wizards with contained step navigation.", "Apply Stepper with consistent step labels keeping them short and action-oriented for clarity.", "Combine Stepper with InlineNotification to show step-specific instructions or validation messages.", "Use Stepper steps array built dynamically based on conditional logic for adaptive workflows.", "Apply Stepper with Card components wrapping step content for visually organized multi-step interfaces.", "Set Stepper with responsive design hiding step labels on mobile, showing only icons or numbers.", 'Use Stepper validationStatus="error" with Tooltip on hover explaining what needs correction.', 'Apply Stepper in checkout flows with steps like "Cart", "Shipping", "Payment", "Confirmation".', "Combine Stepper with router integration syncing activeStep with URL for deep-linkable wizard states.", "Use Stepper customView with Loader component for steps that are currently processing.", "Apply Stepper with aria-label describing the overall process for screen reader context.", "Set Stepper with transition animations between activeStep changes for smooth visual feedback.", "Use Stepper in onboarding flows with clear step count showing users their progress.", "Apply Stepper styles prop for custom colors matching brand guidelines for step indicators.", 'Combine Stepper with Button navigation controls for "Previous" and "Next" step actions.', "Use Stepper with localStorage to persist wizard progress across browser sessions.", "Apply Stepper isIconsView with meaningful icons that clearly represent each step's purpose.", "Set Stepper with skip functionality using onStepClick for optional steps in the workflow.", "Use Stepper in user registration with steps for account info, profile setup, and confirmation.", 'Apply Stepper with time estimates in step labels like "Step 1 (2 min)" for user expectations.', "Combine Stepper with progress percentage calculation based on activeStep for additional feedback.", "Use Stepper validationStatus updates in real-time as users complete step requirements.", "Apply Stepper with consistent height to prevent layout shifts when switching between steps.", "Set Stepper with breadcrumb-style navigation for alternative step visualization in compact spaces.", "Use Stepper in survey or questionnaire interfaces showing question groups as steps.", "Apply Stepper with keyboard navigation support using arrow keys for accessibility.", "Combine Stepper with analytics tracking to identify where users drop off in multi-step processes.", "Use Stepper customView with checkmarks for completed steps and X marks for failed validation.", "Apply Stepper with contextual help links or tooltips for each step providing additional guidance.", "Set Stepper with auto-advance functionality moving to next step after successful completion.", "Use Stepper in file upload workflows with steps for selection, validation, and processing.", "Apply Stepper with mobile-optimized layout stacking steps vertically on small screens.", "Combine Stepper with conditional step visibility based on user selections in previous steps.", "Use Stepper with error recovery allowing users to correct issues without losing progress.", "Apply Stepper styles with custom animations for step transitions and status changes.", "Set Stepper with summary view on final step showing all collected information for review.", "Use Stepper in tutorial or learning paths with steps representing lessons or modules.", "Apply Stepper with estimated completion time updated based on remaining steps.", "Combine Stepper with Modal or Drawer for space-efficient multi-step processes.", "Use Stepper validationStatus with async validation checking backend requirements."], s = {
-  component: e,
-  compositionTips: t
-};
-export {
-  s as default
-};

package/ai/schemas/components/Switch.js

@@ -1,64 +0,0 @@
-const e = {
-  name: "Switch",
-  import: "import { Switch } from 'gd-design-library'",
-  description: "Toggle switch component for binary on/off states with accessible label positioning and keyboard support. Ideal for settings, preferences, and feature toggles.",
-  props: [{
-    name: "checked",
-    type: "boolean",
-    description: "Controls the checked state of the switch",
-    default: !1
-  }, {
-    name: "disabled",
-    type: "boolean",
-    description: "Disables the switch interaction preventing user toggling",
-    default: !1
-  }, {
-    name: "label",
-    type: "LabelPosition",
-    description: "Position of the label text relative to the switch control",
-    default: "right",
-    enum: ["left", "right"]
-  }, {
-    name: "children",
-    type: "ReactNode",
-    description: "Label content displayed next to the switch, typically descriptive text"
-  }, {
-    name: "name",
-    type: "string",
-    description: "Name attribute of the underlying input element for form submission",
-    default: "switch"
-  }, {
-    name: "onValueChange",
-    type: "(checked: boolean) => void",
-    description: "Callback function triggered when the switch value changes, receives new checked state"
-  }, {
-    name: "className",
-    type: "string",
-    description: "Additional CSS classes to apply to the switch wrapper"
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom inline styles for the switch container",
-    default: {}
-  }, {
-    name: "ariaLabel",
-    type: "string",
-    description: "Accessibility label for screen readers when no visible label is provided"
-  }, {
-    name: "ariaDescribedBy",
-    type: "string",
-    description: "ID of element that describes the switch for additional context"
-  }, {
-    name: "tabIndex",
-    type: "number",
-    description: "Tab order for keyboard navigation",
-    default: 0
-  }],
-  examples: ["<Switch checked={isEnabled} onValueChange={setIsEnabled}>Enable notifications</Switch>", '<Switch label="left" checked={darkMode} onValueChange={toggleDarkMode}>Dark mode</Switch>', "<Switch disabled={isLoading} checked={autoSave}>Auto-save</Switch>", '<Switch name="newsletter" onValueChange={handleNewsletterToggle}>Subscribe to newsletter</Switch>']
-}, t = ["Use Switch for binary settings where immediate feedback is desired.", 'Place the label on the right by default; use label="left" for compact settings lists.', "Disable Switch during async updates to prevent rapid toggling.", "Provide ariaLabel when the visual label is not present for accessibility.", "Use Switch for binary settings like on/off, enabled/disabled, or yes/no choices instead of checkboxes.", 'Apply Switch label="right" (default) for most cases as it follows common UI patterns.', 'Set Switch label="left" when the label describes what the switch controls rather than its state.', "Use Switch checked with controlled components and state management for form integration.", "Apply Switch onValueChange instead of onChange for cleaner boolean state handling.", "Combine Switch with Typography in children for styled label text with consistent formatting.", "Use Switch disabled during async operations or based on user permissions.", "Apply Switch in Card components with padding for organized settings sections.", "Set Switch name attribute when using within Form for proper form data submission.", "Use Switch with descriptive children text that clearly indicates what the toggle controls.", "Apply Switch ariaLabel when the visual label might not provide enough context for screen readers.", "Combine multiple Switch components in Column with consistent spacing for settings lists.", "Use Switch for preference toggles that take effect immediately without save buttons.", "Apply Switch with InlineNotification to show confirmation when toggle changes critical settings.", "Set Switch tabIndex to control keyboard navigation order in complex forms.", "Use Switch checked={false} by default for opt-in features to respect user privacy.", "Apply Switch with consistent positioning across similar settings for predictable UX.", "Combine Switch with conditional rendering to show/hide related options based on toggle state.", "Use Switch onValueChange with debouncing for settings that trigger expensive operations.", "Apply Switch with visual feedback like color changes or icons to reinforce state.", "Set Switch with label positioning based on layout constraints and visual balance.", "Use Switch in responsive layouts adjusting label position on mobile for better touch targets.", "Apply Switch with localStorage or API calls in onValueChange for persistent settings.", "Combine Switch with Loader or loading state when toggle triggers async operations.", "Use Switch for feature flags allowing users to opt into beta or experimental features.", "Apply Switch disabled={true} with Tooltip explaining why the option is unavailable.", "Set Switch with consistent label styles using Typography for uniform appearance.", "Use Switch instead of Radio buttons when only two mutually exclusive options exist.", "Apply Switch with animation transitions for smooth visual state changes.", "Combine Switch with confirmation Modal for toggles that have significant consequences.", "Use Switch in Table rows for bulk actions or row-specific settings.", "Apply Switch with keyboard shortcuts for power users to toggle without mouse.", "Set Switch with group labels using Separator or Typography headers for organized sections.", "Use Switch for filters that instantly update displayed content without apply buttons.", "Apply Switch with count badges showing how many items are affected by the toggle.", "Combine Switch with help icons or tooltips for settings that need explanation.", "Use Switch checked state to control other form field visibility or requirement status.", "Apply Switch with consistent margins/padding for aligned form layouts.", "Set Switch with semantic HTML using proper ARIA attributes for accessibility.", "Use Switch onValueChange to trigger analytics events for feature usage tracking.", "Apply Switch with visual indicators like checkmarks or X marks for clear state communication.", "Combine Switch with Select or Input fields that are enabled/disabled based on toggle.", "Use Switch for dark/light theme toggles with immediate visual feedback.", "Apply Switch with custom styling via className for branded toggle appearances.", "Set Switch with error states when toggle is in invalid configuration.", "Use Switch in Modal forms for settings that need explicit save confirmation.", "Apply Switch with responsive text that changes based on checked state for clarity.", "Combine Switch with badges or icons in children for enhanced visual communication.", "Use Switch for privacy settings with clear implications of what data is shared."], i = {
-  component: e,
-  compositionTips: t
-};
-export {
-  i as default
-};

package/ai/schemas/components/Tabs.js

@@ -1,37 +0,0 @@
-const e = {
-  name: "Tabs",
-  import: "import { Tabs } from 'gd-design-library'",
-  description: "Navigation component that organizes content into separate views accessed through tabbed interfaces. Supports disabled states, notice counters, and keyboard navigation for accessible multi-section content organization.",
-  props: [{
-    name: "tabs",
-    type: "Array<TabProps>",
-    description: "Array of tab objects defining the content and behavior of each tab. Each object contains id, label, content, isDisabled, and noticeCounter properties",
-    required: !0,
-    default: []
-  }, {
-    name: "ariaLabel",
-    type: "string",
-    description: "Accessibility label for the tabs component navigation, used by screen readers to announce the tab list"
-  }, {
-    name: "activeTab",
-    type: "number",
-    description: "Zero-based index of the initially active tab",
-    default: 0
-  }, {
-    name: "onTabChange",
-    type: "(index: number) => void",
-    description: "Callback function triggered when a tab is selected, receiving the new tab index"
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom CSS properties to override default tab styling",
-    default: {}
-  }],
-  examples: ['<Tabs tabs={[{label: "Overview", content: <Overview />}, {label: "Details", content: <Details />}]} />', "<Tabs tabs={tabData} activeTab={1} onTabChange={handleTabChange} />", '<Tabs tabs={[{label: "Messages", content: <Messages />, noticeCounter: 5}, {label: "Settings", content: <Settings />}]} />', '<Tabs tabs={productTabs} ariaLabel="Product information tabs" styles={{borderBottom: "2px solid #ccc"}} />', '<Tabs tabs={[{label: "Active", content: <ActiveItems />}, {label: "Archived", content: <ArchivedItems />, isDisabled: true}]} />']
-}, t = ["Use Tabs to separate logically distinct content areas within the same page.", "Maintain keyboard accessibility: left/right arrows to navigate, Enter/Space to select.", "Show noticeCounter for tabs with updates (e.g., unread messages).", "Keep labels short; use Tooltip for longer descriptions if needed.", "Preserve active tab state across navigation when appropriate (e.g., via URL or context).", "Use Tabs for organizing related content into logical sections without page navigation.", "Apply Tabs with activeTab prop for controlled tab state management synced with URL or app state.", "Set Tabs with no more than 6 tabs to prevent overwhelming users with too many options.", "Use Tabs onTabChange to track analytics for most viewed sections and user navigation patterns.", "Apply Tabs with noticeCounter on specific tabs to indicate new or updated content requiring attention.", "Combine Tabs with Card components in content prop for visually structured tab panels.", "Use Tabs with meaningful labels that clearly describe the content within each tab section.", "Apply Tabs isDisabled prop for tabs that are conditionally available based on user permissions or data.", "Set Tabs activeTab={0} to always start with the most important or overview content visible.", "Use Tabs with consistent content structure across all tabs for predictable user experience.", "Apply Tabs ariaLabel for screen reader users to understand the purpose of the tab navigation.", "Combine Tabs with Form components in content for multi-step forms or categorized settings.", "Use Tabs with lazy loading in content prop to defer rendering of inactive tab content.", "Apply Tabs styles prop to customize border, padding, or background to match design requirements.", "Set Tabs with responsive design hiding tabs into dropdown menu on mobile devices.", "Use Tabs for filtering data views like Active/Completed/All in task management interfaces.", "Apply Tabs with icons in label prop using FlexContainer for visual tab identification.", "Combine Tabs with loading states in content while fetching tab-specific data.", "Use Tabs activeTab with useEffect to perform actions when specific tabs become active.", "Apply Tabs with keyboard navigation support using Space/Enter for accessibility compliance.", "Set Tabs with URL hash synchronization for deep-linkable tab states.", "Use Tabs for product information sections like Description/Specifications/Reviews.", "Apply Tabs with consistent height in content panels to prevent layout jumps.", "Combine Tabs with InlineNotification in content for tab-specific alerts or messages.", "Use Tabs noticeCounter with real-time updates for dynamic content indicators.", "Apply Tabs with overflow scrolling for many tabs using horizontal scroll on mobile.", "Set Tabs with animation transitions between tab panels for smooth content switching.", "Use Tabs for dashboard views organizing metrics into categories like Sales/Traffic/Conversions.", "Apply Tabs with nested Tabs in content for multi-level content organization.", "Combine Tabs with Select dropdown as alternative navigation for many options.", "Use Tabs isDisabled dynamically based on form validation or data availability.", "Apply Tabs with consistent tab order placing most-used tabs on the left.", "Set Tabs with vertical orientation via custom styles for sidebar navigation patterns.", "Use Tabs for comparison views showing different data sets or time periods.", "Apply Tabs with breadcrumbs above for hierarchical navigation context.", "Combine Tabs with charts or data visualizations in content for analytics interfaces.", "Use Tabs activeTab controlled by external navigation or search results.", "Apply Tabs with tooltips on disabled tabs explaining why they are unavailable.", "Set Tabs with consistent naming conventions for tab IDs for easier maintenance.", "Use Tabs for user profile sections like Account/Security/Preferences/Billing.", "Apply Tabs with responsive content adapting layout based on viewport size.", "Combine Tabs with router integration for tab navigation via browser back/forward.", "Use Tabs noticeCounter={0} to hide counter when no new content exists.", "Apply Tabs with print styles showing all tab content when printing.", "Set Tabs with focus management moving focus to content when tab activates.", "Use Tabs for documentation sections organizing API/Guides/Examples/FAQ.", "Apply Tabs with search functionality filtering or highlighting relevant tabs.", "Combine Tabs with localStorage to remember user's last active tab preference.", "Use Tabs styles with custom active tab indicators for branded experiences."], a = {
-  component: e,
-  compositionTips: t
-};
-export {
-  a as default
-};

package/ai/schemas/components/Textarea.js

@@ -1,88 +0,0 @@
-const e = {
-  name: "Textarea",
-  import: "import { Textarea } from 'gd-design-library'",
-  description: "Multi-line text input component for capturing longer form text content with automatic height adjustment, resize controls, and comprehensive accessibility support.",
-  props: [{
-    name: "name",
-    type: "string",
-    description: "Input field name attribute for form submission",
-    default: "textarea"
-  }, {
-    name: "placeholder",
-    type: "string",
-    description: "Placeholder text shown when textarea is empty"
-  }, {
-    name: "ariaDescribedBy",
-    type: "string",
-    description: "ID of element that describes this textarea for accessibility"
-  }, {
-    name: "value",
-    type: "string",
-    description: "Controlled value of the textarea"
-  }, {
-    name: "minHeight",
-    type: "string",
-    description: "Minimum height of textarea"
-  }, {
-    name: "maxHeight",
-    type: "string",
-    description: "Maximum height of textarea for dynamic adjustment or scrolling"
-  }, {
-    name: "disabled",
-    type: "boolean",
-    description: "Whether the textarea is disabled",
-    default: !1
-  }, {
-    name: "readOnly",
-    type: "boolean",
-    description: "Whether the textarea is read only",
-    default: !1
-  }, {
-    name: "autoFocus",
-    type: "boolean",
-    description: "Whether the textarea should auto focus on mount",
-    default: !1
-  }, {
-    name: "resize",
-    type: "TextareaResize",
-    description: "Controls how the textarea can be resized by user",
-    default: "TextareaResize.None",
-    enum: ["none", "both", "horizontal", "vertical"]
-  }, {
-    name: "rows",
-    type: "number",
-    description: "Number of visible text rows"
-  }, {
-    name: "dynamicHeightAdjustment",
-    type: "boolean",
-    description: "Enable/disable automatic height adjustment based on content",
-    default: !1
-  }, {
-    name: "maxLength",
-    type: "number",
-    description: "Maximum character limit for input"
-  }, {
-    name: "defaultValue",
-    type: "string",
-    description: "Initial textarea content for uncontrolled component"
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom CSS styles to override default styling"
-  }, {
-    name: "onChange",
-    type: "(event: ChangeEvent<HTMLTextAreaElement>) => void",
-    description: "Callback when textarea content changes"
-  }, {
-    name: "onCustomResize",
-    type: "(newSize: { height: number; width: number }) => void",
-    description: "Callback triggered when textarea is manually resized by user"
-  }],
-  examples: ['<Textarea name="description" placeholder="Enter description..." rows={4} maxLength={500} />', "<Textarea value={comment} onChange={handleCommentChange} dynamicHeightAdjustment />", '<Textarea resize="vertical" minHeight="100px" maxHeight="400px" placeholder="Your message" />', '<Textarea readOnly defaultValue={logContent} rows={10} styles={{fontFamily: "monospace"}} />']
-}, t = ["Use Textarea for multi-line text input where users need to provide detailed information like comments, descriptions, or messages.", "Apply Textarea with dynamicHeightAdjustment={true} for auto-growing text areas that expand with content.", "Set Textarea maxLength with character counter display to show remaining characters.", 'Use Textarea resize="vertical" to allow users to manually adjust height while preventing horizontal resize.', "Apply Textarea minHeight and maxHeight to constrain size while maintaining flexibility.", "Combine Textarea with Label component using htmlFor for proper accessibility.", "Use Textarea rows prop to set initial visible height without CSS.", "Apply Textarea placeholder with example format or helpful instructions for user guidance.", 'Set Textarea readOnly with styles={{backgroundColor: "#f5f5f5"}} for display-only text.', "Use Textarea with Form component and validation for required long-form text fields.", "Apply Textarea onChange with debouncing for auto-save features in draft content.", "Combine Textarea with InlineNotification below for validation messages or hints.", 'Use Textarea resize="none" (default) for consistent layout that prevents user resizing.', "Apply Textarea autoFocus for forms where textarea is the primary input field.", "Set Textarea with monospace font via styles for code or structured text input.", "Use Textarea maxHeight with overflow scrolling for bounded but flexible input areas.", "Apply Textarea dynamicHeightAdjustment with maxHeight for auto-grow with limits.", 'Combine Textarea with word count display using value.split(" ").length for word limits.', "Use Textarea disabled during form submission to prevent content changes.", "Apply Textarea with consistent width or full-width for form alignment.", "Set Textarea onCustomResize to track user resize preferences for persistent UI.", "Use Textarea defaultValue for uncontrolled components with initial content.", "Apply Textarea value with onChange for controlled components with state management.", "Combine Textarea with real-time preview for markdown or rich text editing.", "Use Textarea ariaDescribedBy linking to helper text or error messages for screen readers.", "Apply Textarea with border color changes based on validation state.", 'Set Textarea resize="both" for full user control in resizable panels or widgets.', "Use Textarea with minimum rows={3} for better visual presence in forms.", "Apply Textarea with tab key handling for code editors needing tab insertion.", "Combine Textarea with floating label pattern for modern form designs.", "Use Textarea maxLength with preventOverflow logic to stop input at limit.", "Apply Textarea with line number display for code or script editing interfaces.", "Set Textarea with spell check control via spellCheck attribute for different content types.", "Use Textarea in Modal for feedback forms or detailed input collection.", "Apply Textarea with paste event handling for content formatting or validation.", "Combine Textarea with emoji picker or formatting toolbar for rich text input.", "Use Textarea rows with dynamicHeightAdjustment for initial size with growth capability.", "Apply Textarea with consistent padding and font size matching other form inputs.", "Set Textarea with wrap attribute control for handling long lines without spaces.", "Use Textarea with keyboard shortcuts for power users (Ctrl+Enter to submit).", "Apply Textarea in Card components with proper spacing for comment sections.", "Combine Textarea with mention/autocomplete functionality for social features.", "Use Textarea with draft saving to localStorage to prevent data loss.", 'Apply Textarea resize="horizontal" rarely, only when width adjustment is specifically needed.', "Set Textarea with custom scrollbar styling for branded appearance.", "Use Textarea with focus and blur events for field-level validation timing.", "Apply Textarea with consistent error state styling matching other form inputs.", "Combine Textarea with file drop support for drag-and-drop text file content.", "Use dynamicHeightAdjustment for chat inputs and comments to auto-grow with content.", "Constrain maxHeight to avoid the textarea overtaking the screen.", 'Prefer resize="vertical" for longer text areas to keep layout intact.', "Provide ariaDescribedBy linking to helper text or character counters."], a = {
-  component: e,
-  compositionTips: t
-};
-export {
-  a as default
-};

package/ai/schemas/components/Toggle.js

@@ -1,41 +0,0 @@
-const e = {
-  name: "Toggle",
-  import: "import { Toggle } from 'gd-design-library'",
-  description: "Multi-option toggle component for selecting between multiple values with customizable rendering and keyboard support. Ideal for view switchers, filters, and mode selectors.",
-  props: [{
-    name: "items",
-    type: "Array<string | { label: string; value: string }>",
-    description: "List of items to toggle between, can be strings or objects with label and value",
-    required: !0,
-    default: []
-  }, {
-    name: "value",
-    type: "string | unknown",
-    description: "Currently selected value from the items list"
-  }, {
-    name: "onValueChange",
-    type: "(value: unknown) => void",
-    description: "Function triggered when the value changes, receives the new selected value"
-  }, {
-    name: "disabled",
-    type: "boolean",
-    description: "Disables interaction with the component preventing selection changes",
-    default: !1
-  }, {
-    name: "renderItemContent",
-    type: "(item: unknown) => ReactNode",
-    description: "Custom render function for each item, allowing custom content like icons or styled text"
-  }, {
-    name: "styles",
-    type: "InlineBoxStyles",
-    description: "Custom styles for the component container and appearance",
-    default: {}
-  }],
-  examples: ['<Toggle items={["List", "Grid", "Gallery"]} value={viewMode} onValueChange={setViewMode} />', '<Toggle items={[{label: "Day", value: "day"}, {label: "Week", value: "week"}, {label: "Month", value: "month"}]} value={period} onValueChange={setPeriod} />', '<Toggle items={options} renderItemContent={(item) => <FlexContainer gap="4px"><Icon name={item.icon} />{item.label}</FlexContainer>} value={selected} onValueChange={handleChange} />', '<Toggle items={["Light", "Dark", "Auto"]} value={theme} onValueChange={setTheme} disabled={isLoading} />']
-}, o = ["Use Toggle for quick switching between a small number of options (2–4).", "Provide a clear onValueChange to keep it controlled when needed.", "Render icons with renderItemContent to make options more scannable.", "Disable Toggle while content updates to prevent accidental switches.", "Use Toggle for selecting between 2-5 mutually exclusive options like view modes, time periods, or display settings.", "Apply Toggle items as simple strings for basic text options or objects with label/value for complex data.", "Set Toggle value to control the selected state and onValueChange to handle selection changes.", "Use Toggle renderItemContent to customize item display with icons, badges, or styled text.", "Apply Toggle disabled={true} during loading states or based on user permissions.", "Combine Toggle with FlexContainer or Row for horizontal layout integration.", "Use Toggle instead of Radio buttons when options should be visually compact and immediately visible.", "Apply Toggle for view switchers like List/Grid/Gallery or Day/Week/Month selectors.", "Set Toggle with consistent width across all items for uniform appearance.", "Use Toggle renderItemContent with Icon components for icon-only or icon-text combinations.", "Apply Toggle styles for custom colors, borders, or active state highlighting.", "Combine Toggle with state management to control displayed content based on selection.", "Use Toggle for filter options that are mutually exclusive like sort order or date ranges.", "Apply Toggle with keyboard navigation support using arrow keys for accessibility.", "Set Toggle items dynamically based on available options or user permissions.", "Use Toggle in toolbars or headers for quick view or mode switching.", "Apply Toggle with Typography in renderItemContent for consistent text styling.", "Combine Toggle with Card or Column for organized settings sections.", "Use Toggle value with useEffect to trigger side effects on selection change.", "Apply Toggle for responsive design mode switchers like Desktop/Tablet/Mobile views.", "Set Toggle with aria-label for screen reader context when purpose is not obvious.", "Use Toggle instead of Select when all options should be immediately visible.", "Apply Toggle with animation transitions for smooth state changes.", "Combine Toggle with localStorage to persist user view preferences.", "Use Toggle items with consistent naming patterns for better UX.", "Apply Toggle disabled selectively for unavailable options while showing them.", "Set Toggle with tooltips on items for additional context or descriptions.", "Use Toggle for language or locale switchers with country flags or codes.", "Apply Toggle with visual feedback like color changes or borders for active state.", "Combine Toggle with data fetching to reload content based on selection.", "Use Toggle renderItemContent to show item counts or badges.", "Apply Toggle for theme switchers like Light/Dark/System preferences.", "Set Toggle with minimum width to prevent layout shifts on selection.", "Use Toggle in forms for selecting between predefined option sets.", "Apply Toggle with consistent spacing from surrounding elements.", "Combine Toggle with InlineNotification for selection confirmations.", "Use Toggle items order strategically with most common option first.", "Apply Toggle with custom active indicator styles for brand consistency.", 'Set Toggle with role="tablist" for semantic tab-like interfaces.', "Use Toggle for currency or unit selectors in e-commerce or data apps.", "Apply Toggle with responsive item count, showing fewer options on mobile.", "Combine Toggle with conditional rendering to show/hide UI sections.", "Use Toggle renderItemContent with abbreviations on mobile, full text on desktop.", "Apply Toggle for sorting options like Newest/Oldest or Price Low/High.", "Set Toggle with visual hierarchy using size or color for primary option.", "Use Toggle in dashboards for metric period selection or chart type switching.", "Apply Toggle with loading indicator when selection triggers async operations.", "Combine Toggle with URL parameters for shareable view states.", "Use Toggle disabled during form submission to prevent option changes.", "Apply Toggle with consistent patterns across similar selection contexts."], t = {
-  component: e,
-  compositionTips: o
-};
-export {
-  t as default
-};

package/ai/schemas/components/Tooltip.js

@@ -1,61 +0,0 @@
-const t = {
-  name: "Tooltip",
-  import: "import { Tooltip } from 'gd-design-library'",
-  description: "Contextual information overlay component that displays helpful text on hover or focus, with smart positioning, configurable delays, and full accessibility support through portal rendering.",
-  props: [{
-    name: "content",
-    type: "ReactNode",
-    description: "The content to display inside the tooltip overlay, can be text or any React element",
-    required: !0
-  }, {
-    name: "children",
-    type: "ReactNode",
-    description: "The trigger element that shows tooltip on hover or focus, typically a button or text",
-    required: !0
-  }, {
-    name: "position",
-    type: "TooltipPosition",
-    description: "Position of the tooltip relative to the trigger element",
-    default: "top",
-    enum: ["top", "right", "bottom", "left"]
-  }, {
-    name: "delay",
-    type: "number",
-    description: "Delay in milliseconds before showing/hiding the tooltip",
-    default: 200
-  }, {
-    name: "gap",
-    type: "number",
-    description: "Space in pixels between the tooltip and trigger element",
-    default: 10
-  }, {
-    name: "ariaLabel",
-    type: "string",
-    description: "Accessible label for the tooltip trigger element for screen readers"
-  }, {
-    name: "ariaDescribedBy",
-    type: "string",
-    description: "ID of an element that provides additional description for the tooltip"
-  }, {
-    name: "className",
-    type: "string",
-    description: "Additional CSS class name to apply to the tooltip overlay"
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Custom inline styles to apply to the tooltip overlay",
-    default: {}
-  }, {
-    name: "as",
-    type: "keyof HTMLElementTagNameMap | ElementType",
-    description: "HTML element or component to render the tooltip wrapper as",
-    default: "div"
-  }],
-  examples: ['<Tooltip content="Save your changes" position="top"><Button>Save</Button></Tooltip>', '<Tooltip content="This field is required" position="right" delay={500}><Icon name="info" /></Tooltip>', '<Tooltip content={<Typography variant="caption">Click to copy</Typography>} position="bottom"><Typography>Copy text</Typography></Tooltip>', '<Tooltip content="Delete this item permanently" position="left" gap={15}><Button color="error" isIcon><Icon name="delete" /></Button></Tooltip>']
-}, o = ["Use Tooltip for short, helpful hints; avoid long instructional text.", "Prefer top or bottom positions to reduce overlap with the trigger.", "Increase delay slightly for touch devices to prevent accidental popups.", "Ensure ariaLabel/ariaDescribedBy provide accessible context.", "Use Tooltip content prop with concise, helpful text that adds value without stating the obvious.", 'Apply Tooltip position="top" (default) for most cases, use other positions to avoid viewport edges.', "Set Tooltip delay with shorter times (100-200ms) for frequently used actions, longer (500ms+) for occasional hints.", "Use Tooltip gap to ensure proper spacing from trigger element, adjust for visual balance.", "Apply Tooltip on icon-only buttons to clarify their purpose with descriptive content text.", "Combine Tooltip with disabled elements to explain why an action is unavailable.", "Use Tooltip ariaLabel for trigger elements that need additional accessibility context.", 'Apply Tooltip as="span" when wrapping inline elements within text content.', "Set Tooltip content with Typography components for rich formatted tooltip text.", "Use Tooltip on truncated text (text-overflow: ellipsis) to show full content on hover.", 'Apply Tooltip position="right" or "left" for vertical lists to avoid covering adjacent items.', "Combine Tooltip with keyboard navigation support for accessibility compliance.", "Use Tooltip delay={0} for instant display in tutorial or onboarding flows.", "Apply Tooltip consistently across similar UI elements for predictable user experience.", "Set Tooltip with high contrast colors via styles for better readability.", "Use Tooltip on form field labels to provide format examples or requirements.", "Apply Tooltip position based on element location to prevent viewport overflow.", "Combine Tooltip with Icon components for info icons that reveal explanations.", "Use Tooltip content sparingly, avoid redundant information already visible in UI.", "Apply Tooltip on abbreviated text or acronyms to show full meanings.", "Set Tooltip gap larger for touch interfaces to prevent accidental triggers.", "Use Tooltip with conditional content based on application state or user permissions.", "Apply Tooltip in data tables for cell values that might be truncated or need context.", "Combine Tooltip with status indicators to explain what each status means.", "Use Tooltip delay consistently across the app for uniform interaction timing.", "Apply Tooltip on interactive elements only, avoid on decorative or disabled items.", "Set Tooltip content with line breaks or lists for structured information.", 'Use Tooltip position="bottom" for elements at the top of viewport to ensure visibility.', "Apply Tooltip with Portal rendering to escape overflow hidden containers.", "Combine Tooltip with loading states to show progress or status information.", "Use Tooltip on navigation items to show full page names or descriptions.", "Apply Tooltip styles to match theme colors and maintain visual consistency.", "Set Tooltip with responsive content that adapts to mobile vs desktop contexts.", "Use Tooltip on badges or chips to provide additional context about counts or labels.", "Apply Tooltip ariaDescribedBy to link with detailed help text elements.", "Combine Tooltip with error states to show validation messages on hover.", "Use Tooltip on chart elements to display detailed data values.", "Apply Tooltip with z-index management via styles when inside modals or overlays.", "Set Tooltip content updates dynamically based on trigger element state.", "Use Tooltip on toolbar buttons to describe tool functions and shortcuts.", "Apply Tooltip with consistent max-width via styles to prevent overly wide tooltips.", "Combine Tooltip with internationalization for localized help text.", 'Use Tooltip position="left" for RTL layouts or right-aligned elements.', "Apply Tooltip on links to show destination URLs or page descriptions.", "Set Tooltip with animation classes via className for custom enter/exit effects.", "Use Tooltip on image thumbnails to show larger preview or metadata.", "Apply Tooltip delay longer for decorative hints, shorter for functional guidance.", "Combine Tooltip with keyboard shortcuts display for power user features.", "Use Tooltip on save indicators to show last save time or status.", "Apply Tooltip with proper ARIA attributes for screen reader compatibility."], e = {
-  component: t,
-  compositionTips: o
-};
-export {
-  e as default
-};

package/ai/schemas/components/Typography.js

@@ -1,56 +0,0 @@
-const t = {
-  name: "Typography",
-  import: "import { Typography } from 'gd-design-library'",
-  description: "Text component with flexible typography system supporting various text styles, sizes, and alignments.",
-  props: [{
-    name: "variant",
-    type: "TypographyVariant",
-    description: "Specifies the typographic variant to use (e.g., h1-h6, body1, body2, display, etc.)",
-    default: "body1",
-    enum: ["h1", "h2", "h3", "h4", "h5", "h6", "body1", "body2", "caption", "overline", "display", "subtitle1", "subtitle2"]
-  }, {
-    name: "color",
-    type: "string",
-    description: "Sets the text color using CSS color value",
-    default: "inherit"
-  }, {
-    name: "styles",
-    type: "CSSProperties",
-    description: "Additional CSS styles to apply to the typography component",
-    default: {}
-  }, {
-    name: "size",
-    type: "SizeVariant",
-    description: "Sets the size of the text (xs, sm, md, lg, xl). Only applicable for Display variant",
-    default: "md",
-    enum: ["xs", "sm", "md", "lg", "xl", "xxl"]
-  }, {
-    name: "align",
-    type: "TextAlign",
-    description: "Controls the text alignment (start, center, end, justify)",
-    default: "start",
-    enum: ["start", "center", "end", "justify"]
-  }, {
-    name: "styleVariant",
-    type: "TypographyStyleVariant[]",
-    description: "Applies additional styling variants (italic, bold, underline, etc.). Multiple can be selected",
-    default: [],
-    enum: ["italic", "bold", "underline", "strikethrough", "uppercase", "lowercase", "capitalize"]
-  }, {
-    name: "as",
-    type: "string | Component",
-    description: "Renders the typography as a different HTML element or component while maintaining styles"
-  }, {
-    name: "children",
-    type: "ReactNode",
-    description: "The content to be displayed within the typography component",
-    required: !0
-  }],
-  examples: ['<Typography variant="h1" align="center">Main Heading</Typography>', '<Typography variant="body1" color="#666" styleVariant={["italic"]}>Emphasized text</Typography>', '<Typography variant="display" size="lg" as="h2">Large Display Text</Typography>']
-}, e = ['Use Typography variant="h1" through "h6" for hierarchical headings to establish content structure.', 'Apply Typography variant="display" with size prop for hero text and marketing headlines.', 'Use Typography variant="body1" for primary content text and variant="body2" for secondary content.', 'Set Typography variant="caption" for helper text, timestamps, and metadata information.', 'Apply Typography variant="overline" for small labels above headings or section markers.', 'Use Typography styleVariant={["bold"]} to emphasize important text within paragraphs.', 'Combine Typography styleVariant={["italic", "bold"]} for multiple text styles simultaneously.', 'Set Typography align="center" for centered headings and call-to-action text.', 'Use Typography align="justify" for newspaper-style paragraph text in reading-heavy interfaces.', "Apply Typography color prop with theme colors for consistent brand-aligned text coloring.", 'Use Typography as="span" to inline styled text within other Typography components.', 'Set Typography as="label" when using it as a form label for semantic HTML structure.', 'Apply Typography variant="subtitle1" for section subheadings and variant="subtitle2" for subsection titles.', 'Use Typography styleVariant={["uppercase"]} for button text and navigation labels.', "Combine Typography with Column component for well-spaced text blocks with consistent vertical rhythm.", 'Set Typography color="inherit" (default) to inherit color from parent components.', 'Use Typography variant="display" size="xl" for landing page hero text that needs impact.', 'Apply Typography styleVariant={["strikethrough"]} for showing deleted or outdated content.', 'Use Typography variant="caption" styleVariant={["italic"]} for photo credits and attributions.', 'Set Typography align="end" for right-aligned text in RTL layouts or price displays.', "Apply Typography styles prop for one-off custom styling without creating new CSS classes.", "Use multiple Typography components with different variants to create rich text layouts.", 'Combine Typography variant="overline" with variant="h4" for labeled section headers.', 'Apply Typography styleVariant={["capitalize"]} for proper noun formatting in dynamic content.', 'Use Typography variant="body2" color="#666" for secondary information like descriptions.', 'Set Typography as="div" when wrapping block-level content that needs typography styling.', 'Use Typography variant="h1" only once per page for SEO and accessibility best practices.', "Apply consistent Typography variants across similar UI elements for visual coherence.", "Combine Typography with Link component using as prop for styled navigation links."], a = {
-  component: t,
-  compositionTips: e
-};
-export {
-  a as default
-};