diff --git a/src/components/AtomicLibraryShowcase.tsx b/src/components/AtomicLibraryShowcase.tsx index 69c13db..4b7f344 100644 --- a/src/components/AtomicLibraryShowcase.tsx +++ b/src/components/AtomicLibraryShowcase.tsx @@ -1,70 +1,18 @@ import { useState } from 'react' -import { - Button, - Badge, - Switch, - Separator, - HoverCard, - Calendar, - ButtonGroup, - DatePicker, - RangeSlider, - InfoPanel, - ResponsiveGrid, - Flex, - CircularProgress, - AvatarGroup, - Heading, - Text, - Stack, - Card, - Chip, - Dot, - Tooltip, - Alert, - ProgressBar, - Skeleton, - Code, - Kbd, - Avatar, - Link, - Container, - Section, - Spacer, - Rating, - ColorSwatch, - MetricCard, - CountBadge, - FilterInput, - BasicPageHeader, - IconButton, - ActionButton, - StatusBadge, - NumberInput, - TextGradient, - Pulse, - QuickActionButton, - PanelHeader, - LiveIndicator, - Sparkle, - GlowCard, -} from '@/components/atoms' -import { - Heart, - Star, - Plus, - Trash, - Download, - ShoppingCart, - User, - Bell, - CheckCircle, - Info, - WarningCircle, - XCircle, - Rocket, - Code as CodeIcon, -} from '@phosphor-icons/react' +import { BasicPageHeader, Container, Stack } from '@/components/atoms' +import data from '@/data/atomic-library-showcase.json' +import { AvatarsUserElementsSection } from '@/components/atomic-library/AvatarsUserElementsSection' +import { BadgesIndicatorsSection } from '@/components/atomic-library/BadgesIndicatorsSection' +import { ButtonsActionsSection } from '@/components/atomic-library/ButtonsActionsSection' +import { CardsMetricsSection } from '@/components/atomic-library/CardsMetricsSection' +import { EnhancedComponentsSection } from '@/components/atomic-library/EnhancedComponentsSection' +import { FeedbackSection } from '@/components/atomic-library/FeedbackSection' +import { FormControlsSection } from '@/components/atomic-library/FormControlsSection' +import { InteractiveElementsSection } from '@/components/atomic-library/InteractiveElementsSection' +import { LayoutComponentsSection } from '@/components/atomic-library/LayoutComponentsSection' +import { ProgressLoadingSection } from '@/components/atomic-library/ProgressLoadingSection' +import { SummarySection } from '@/components/atomic-library/SummarySection' +import { TypographySection } from '@/components/atomic-library/TypographySection' export function AtomicLibraryShowcase() { const [switchChecked, setSwitchChecked] = useState(false) @@ -74,553 +22,41 @@ export function AtomicLibraryShowcase() { const [rating, setRating] = useState(3) const [numberValue, setNumberValue] = useState(10) + const { pageHeader, sections } = data + return ( - + -
- Buttons & Actions - - -
- Button Variants - - - - - - - - - - -
- -
- Button Group - - - - - -
- -
- Icon Buttons - - } variant="default" /> - } variant="secondary" /> - } variant="outline" /> - } variant="destructive" /> - -
- -
- Action Buttons - - } - label="Like" - onClick={() => {}} - tooltip="Like this item" - /> - } - label="Favorite" - onClick={() => {}} - variant="outline" - /> - -
- -
- -
- Badges & Indicators - - -
- Badges - - Default - Secondary - Destructive - Outline - }>With Icon - Small - Large - -
- -
- Status Badges - - - - - - - - -
- -
- Chips - - React - TypeScript - Tailwind - {}}>Removable - -
- -
- Dots - - - - - - - - -
- -
- Count Badge - -
- Notifications - -
-
- Messages - -
- -
- -
- -
- Typography - - -
- Headings - - Heading 1 - Heading 2 - Heading 3 - Heading 4 - Heading 5 - Heading 6 - -
- -
- Text Variants - - Body text - regular content - Caption text - smaller descriptive text - Muted text - less important information - Small text - compact information - -
- -
- Inline Elements - - Press Ctrl + K to search - Run npm install to get started - Visit our documentation to learn more - -
- -
- -
- Form Controls - - -
- Switch - -
- -
- Date Picker - -
- -
- Filter Input - -
- -
- Rating - -
- - - - -
- Range Slider - -
-
- -
- Progress & Loading - - -
- Progress Bar - - - -
- -
- Circular Progress - - - - - -
- -
- Skeleton Loading - - - - - -
- -
- -
- Feedback - - - - This is an informational alert message. - - - Your changes have been saved successfully. - - - Please review your input before submitting. - - - Something went wrong. Please try again. - - - - - - }> - This is an informational panel with helpful content. - - }> - Operation completed successfully! - - }> - Please proceed with caution. - - }> - An error has occurred. - - - -
- -
- Avatars & User Elements - - -
- Avatar Sizes - - - - - - - -
- -
- Avatar Group - -
- -
- -
- Cards & Metrics - - - } - trend={{ value: 12, direction: 'up' }} - /> - } - trend={{ value: 5, direction: 'up' }} - /> - } - /> - -
- -
- Interactive Elements - - -
- Hover Card - Hover over me - } - > - - Additional Information - - This is extra content shown in a hover card. - - - -
- -
- Tooltip - - - -
- -
- Color Swatches - - - - - - -
- -
- -
- Layout Components - - -
- Responsive Grid - - {[1, 2, 3, 4, 5, 6, 7, 8].map((i) => ( - - Item {i} - - ))} - -
- -
- Flex Layout - - Left Content - Center - - -
- -
- Stack Layout - - Stacked Item 1 - Stacked Item 2 - Stacked Item 3 - -
- -
- -
- Enhanced Components - - -
- } - actions={ - - } - /> -
- -
- Number Input - -
- -
- Text Gradient - - - Beautiful Gradient Text - - -
- -
- Status Indicators - - - - Active - - - - - Featured - - -
- -
- Quick Action Buttons - - } - label="Code" - description="Edit files" - variant="primary" - onClick={() => alert('Code clicked')} - /> - } - label="Deploy" - description="Launch app" - variant="accent" - onClick={() => alert('Deploy clicked')} - /> - } - label="Favorite" - description="Save for later" - variant="default" - onClick={() => alert('Favorite clicked')} - /> - } - label="Shop" - description="Browse items" - variant="muted" - onClick={() => alert('Shop clicked')} - /> - -
- -
- Glow Cards - - -
- Primary Glow - - Card with primary glow effect - -
- - -
- Accent Glow - - Card with accent glow effect - -
- - -
- Success Glow - - Card with success glow effect - -
- - -
- -
- -
- Summary - - }> - Atomic Component Library Complete! - - The atomic component library includes 60+ production-ready components covering buttons, - badges, typography, forms, progress indicators, feedback, avatars, cards, enhanced inputs, - gradient effects, and layout utilities. All components are fully typed, accessible, and follow the design system. - - -
+ + + + + + + + + + + + ) diff --git a/src/components/atomic-library/AvatarsUserElementsSection.tsx b/src/components/atomic-library/AvatarsUserElementsSection.tsx new file mode 100644 index 0000000..dfa1736 --- /dev/null +++ b/src/components/atomic-library/AvatarsUserElementsSection.tsx @@ -0,0 +1,38 @@ +import { Avatar, AvatarGroup, Flex, Heading, Section, Separator, Stack, Text } from '@/components/atoms' + +type AvatarsUserElementsSectionContent = + (typeof import('@/data/atomic-library-showcase.json'))['sections']['avatarsUserElements'] + +interface AvatarsUserElementsSectionProps { + content: AvatarsUserElementsSectionContent +} + +const avatarSizes: Array<'xs' | 'sm' | 'md' | 'lg' | 'xl'> = ['xs', 'sm', 'md', 'lg', 'xl'] + +export function AvatarsUserElementsSection({ content }: AvatarsUserElementsSectionProps) { + return ( +
+ {content.title} + + +
+ + {content.avatarSizesLabel} + + + {content.avatarFallbacks.map((fallback, index) => ( + + ))} + +
+ +
+ + {content.avatarGroupLabel} + + +
+ +
+ ) +} diff --git a/src/components/atomic-library/BadgesIndicatorsSection.tsx b/src/components/atomic-library/BadgesIndicatorsSection.tsx new file mode 100644 index 0000000..d67ba28 --- /dev/null +++ b/src/components/atomic-library/BadgesIndicatorsSection.tsx @@ -0,0 +1,91 @@ +import { Badge, Chip, CountBadge, Dot, Flex, Heading, Section, Separator, Stack, StatusBadge, Text } from '@/components/atoms' +import { Star } from '@phosphor-icons/react' + +type BadgesIndicatorsSectionContent = + (typeof import('@/data/atomic-library-showcase.json'))['sections']['badgesIndicators'] + +interface BadgesIndicatorsSectionProps { + content: BadgesIndicatorsSectionContent +} + +export function BadgesIndicatorsSection({ content }: BadgesIndicatorsSectionProps) { + return ( +
+ {content.title} + + +
+ + {content.badgesLabel} + + + {content.badges.map((badge) => ( + : undefined}> + {badge.label} + + ))} + +
+ +
+ + {content.statusBadgesLabel} + + + + + + + + + +
+ +
+ + {content.chipsLabel} + + + {content.chips.map((chip) => ( + {} : undefined} + > + {chip.label} + + ))} + +
+ +
+ + {content.dotsLabel} + + + + + + + + + +
+ +
+ + {content.countBadgeLabel} + + + {content.countItems.map((item) => ( +
+ {item.label} + +
+ ))} + +
+ +
+ ) +} diff --git a/src/components/atomic-library/ButtonsActionsSection.tsx b/src/components/atomic-library/ButtonsActionsSection.tsx new file mode 100644 index 0000000..27d12d4 --- /dev/null +++ b/src/components/atomic-library/ButtonsActionsSection.tsx @@ -0,0 +1,89 @@ +import { ActionButton, Button, ButtonGroup, Flex, Heading, IconButton, Section, Separator, Stack, Text } from '@/components/atoms' +import { Download, Heart, Plus, Star, Trash } from '@phosphor-icons/react' + +const iconMap = { + download: , + plus: , + star: , + heart: , + trash: , +} + +type ButtonsActionsSectionContent = + (typeof import('@/data/atomic-library-showcase.json'))['sections']['buttonsActions'] + +interface ButtonsActionsSectionProps { + content: ButtonsActionsSectionContent +} + +export function ButtonsActionsSection({ content }: ButtonsActionsSectionProps) { + return ( +
+ {content.title} + + +
+ + {content.buttonVariantsLabel} + + + {content.buttonVariants.map((variant) => ( + + ))} + +
+ +
+ + {content.buttonGroupLabel} + + + {content.buttonGroupButtons.map((label) => ( + + ))} + +
+ +
+ + {content.iconButtonsLabel} + + + } variant="default" /> + } variant="secondary" /> + } variant="outline" /> + } variant="destructive" /> + +
+ +
+ + {content.actionButtonsLabel} + + + {content.actionButtons.map((action) => ( + {}} + tooltip={action.tooltip} + variant={action.variant} + /> + ))} + +
+ +
+ ) +} diff --git a/src/components/atomic-library/CardsMetricsSection.tsx b/src/components/atomic-library/CardsMetricsSection.tsx new file mode 100644 index 0000000..d8153cf --- /dev/null +++ b/src/components/atomic-library/CardsMetricsSection.tsx @@ -0,0 +1,35 @@ +import { Heading, MetricCard, ResponsiveGrid, Section, Separator } from '@/components/atoms' +import { Bell, ShoppingCart, User } from '@phosphor-icons/react' + +type CardsMetricsSectionContent = + (typeof import('@/data/atomic-library-showcase.json'))['sections']['cardsMetrics'] + +interface CardsMetricsSectionProps { + content: CardsMetricsSectionContent +} + +const metricIcons = { + user: , + cart: , + bell: , +} + +export function CardsMetricsSection({ content }: CardsMetricsSectionProps) { + return ( +
+ {content.title} + + + {content.metrics.map((metric) => ( + + ))} + +
+ ) +} diff --git a/src/components/atomic-library/EnhancedComponentsSection.tsx b/src/components/atomic-library/EnhancedComponentsSection.tsx new file mode 100644 index 0000000..f47ab39 --- /dev/null +++ b/src/components/atomic-library/EnhancedComponentsSection.tsx @@ -0,0 +1,140 @@ +import { + Button, + Flex, + GlowCard, + Heading, + LiveIndicator, + NumberInput, + PanelHeader, + Pulse, + QuickActionButton, + ResponsiveGrid, + Section, + Separator, + Sparkle, + Stack, + Text, + TextGradient, +} from '@/components/atoms' +import { Code as CodeIcon, Rocket, ShoppingCart, Star } from '@phosphor-icons/react' + +type EnhancedComponentsSectionContent = + (typeof import('@/data/atomic-library-showcase.json'))['sections']['enhancedComponents'] + +interface EnhancedComponentsSectionProps { + content: EnhancedComponentsSectionContent + numberValue: number + onNumberChange: (value: number) => void +} + +const quickActionIcons = [ + , + , + , + , +] + +export function EnhancedComponentsSection({ + content, + numberValue, + onNumberChange, +}: EnhancedComponentsSectionProps) { + return ( +
+ {content.title} + + +
+ } + actions={ + + } + /> +
+ +
+ + {content.numberInputLabel} + + +
+ +
+ + {content.textGradientLabel} + + + + {content.textGradientText} + + +
+ +
+ + {content.statusIndicatorsLabel} + + + + + {content.statusActiveLabel} + + + + + {content.statusFeaturedLabel} + + +
+ +
+ + {content.quickActionButtonsLabel} + + + {content.quickActionButtons.map((button, index) => ( + alert(button.alertMessage)} + /> + ))} + +
+ +
+ + {content.glowCardsLabel} + + + {content.glowCards.map((card) => ( + +
+ {card.title} + + {card.description} + +
+ + ))} + +
+ +
+ ) +} diff --git a/src/components/atomic-library/FeedbackSection.tsx b/src/components/atomic-library/FeedbackSection.tsx new file mode 100644 index 0000000..05172e1 --- /dev/null +++ b/src/components/atomic-library/FeedbackSection.tsx @@ -0,0 +1,47 @@ +import { Alert, Heading, InfoPanel, ResponsiveGrid, Section, Separator, Spacer, Stack } from '@/components/atoms' +import { CheckCircle, Info, WarningCircle, XCircle } from '@phosphor-icons/react' + +type FeedbackSectionContent = + (typeof import('@/data/atomic-library-showcase.json'))['sections']['feedback'] + +interface FeedbackSectionProps { + content: FeedbackSectionContent +} + +const infoPanelIcons = { + info: , + success: , + warning: , + error: , +} + +export function FeedbackSection({ content }: FeedbackSectionProps) { + return ( +
+ {content.title} + + + {content.alerts.map((alert) => ( + + {alert.message} + + ))} + + + + + {content.infoPanels.map((panel) => ( + + {panel.message} + + ))} + + +
+ ) +} diff --git a/src/components/atomic-library/FormControlsSection.tsx b/src/components/atomic-library/FormControlsSection.tsx new file mode 100644 index 0000000..07362b5 --- /dev/null +++ b/src/components/atomic-library/FormControlsSection.tsx @@ -0,0 +1,94 @@ +import { + DatePicker, + FilterInput, + Heading, + RangeSlider, + Rating, + ResponsiveGrid, + Section, + Separator, + Spacer, + Switch, + Text, +} from '@/components/atoms' + +type FormControlsSectionContent = + (typeof import('@/data/atomic-library-showcase.json'))['sections']['formControls'] + +interface FormControlsSectionProps { + content: FormControlsSectionContent + switchChecked: boolean + onSwitchChange: (value: boolean) => void + selectedDate: Date | undefined + onDateChange: (value: Date | undefined) => void + filterValue: string + onFilterChange: (value: string) => void + rating: number + onRatingChange: (value: number) => void + rangeValue: [number, number] + onRangeChange: (value: [number, number]) => void +} + +export function FormControlsSection({ + content, + switchChecked, + onSwitchChange, + selectedDate, + onDateChange, + filterValue, + onFilterChange, + rating, + onRatingChange, + rangeValue, + onRangeChange, +}: FormControlsSectionProps) { + return ( +
+ {content.title} + + +
+ + {content.switchLabel} + + +
+ +
+ + {content.datePickerLabel} + + +
+ +
+ + {content.filterInputLabel} + + +
+ +
+ + {content.ratingLabel} + + +
+ + + + +
+ + {content.rangeSliderLabel} + + +
+
+ ) +} diff --git a/src/components/atomic-library/InteractiveElementsSection.tsx b/src/components/atomic-library/InteractiveElementsSection.tsx new file mode 100644 index 0000000..16e276f --- /dev/null +++ b/src/components/atomic-library/InteractiveElementsSection.tsx @@ -0,0 +1,61 @@ +import { + Button, + ColorSwatch, + Flex, + Heading, + HoverCard, + Section, + Separator, + Stack, + Text, + Tooltip, +} from '@/components/atoms' + +type InteractiveElementsSectionContent = + (typeof import('@/data/atomic-library-showcase.json'))['sections']['interactiveElements'] + +interface InteractiveElementsSectionProps { + content: InteractiveElementsSectionContent +} + +export function InteractiveElementsSection({ content }: InteractiveElementsSectionProps) { + return ( +
+ {content.title} + + +
+ + {content.hoverCardLabel} + + {content.hoverCardTrigger}}> + + {content.hoverCardTitle} + {content.hoverCardDescription} + + +
+ +
+ + {content.tooltipLabel} + + + + +
+ +
+ + {content.colorSwatchesLabel} + + + {content.colorSwatches.map((swatch) => ( + + ))} + +
+ +
+ ) +} diff --git a/src/components/atomic-library/LayoutComponentsSection.tsx b/src/components/atomic-library/LayoutComponentsSection.tsx new file mode 100644 index 0000000..159e59c --- /dev/null +++ b/src/components/atomic-library/LayoutComponentsSection.tsx @@ -0,0 +1,57 @@ +import { Badge, Button, Card, Flex, Heading, ResponsiveGrid, Section, Separator, Stack, Text } from '@/components/atoms' + +type LayoutComponentsSectionContent = + (typeof import('@/data/atomic-library-showcase.json'))['sections']['layoutComponents'] + +interface LayoutComponentsSectionProps { + content: LayoutComponentsSectionContent +} + +const gridItems = [1, 2, 3, 4, 5, 6, 7, 8] + +export function LayoutComponentsSection({ content }: LayoutComponentsSectionProps) { + return ( +
+ {content.title} + + +
+ + {content.responsiveGridLabel} + + + {gridItems.map((item) => ( + + + {content.gridItemLabel} {item} + + + ))} + +
+ +
+ + {content.flexLayoutLabel} + + + {content.flexLeft} + {content.flexCenter} + + +
+ +
+ + {content.stackLayoutLabel} + + + {content.stackItems.map((item) => ( + {item} + ))} + +
+ +
+ ) +} diff --git a/src/components/atomic-library/ProgressLoadingSection.tsx b/src/components/atomic-library/ProgressLoadingSection.tsx new file mode 100644 index 0000000..78f422f --- /dev/null +++ b/src/components/atomic-library/ProgressLoadingSection.tsx @@ -0,0 +1,60 @@ +import { + CircularProgress, + Heading, + ProgressBar, + Section, + Separator, + Spacer, + Stack, + Text, + Flex, + Skeleton, +} from '@/components/atoms' + +type ProgressLoadingSectionContent = + (typeof import('@/data/atomic-library-showcase.json'))['sections']['progressLoading'] + +interface ProgressLoadingSectionProps { + content: ProgressLoadingSectionContent +} + +export function ProgressLoadingSection({ content }: ProgressLoadingSectionProps) { + return ( +
+ {content.title} + + +
+ + {content.progressBarLabel} + + + + +
+ +
+ + {content.circularProgressLabel} + + + + + + +
+ +
+ + {content.skeletonLabel} + + + + + + +
+ +
+ ) +} diff --git a/src/components/atomic-library/SummarySection.tsx b/src/components/atomic-library/SummarySection.tsx new file mode 100644 index 0000000..85b4a22 --- /dev/null +++ b/src/components/atomic-library/SummarySection.tsx @@ -0,0 +1,23 @@ +import { Heading, InfoPanel, Section, Separator, Text } from '@/components/atoms' +import { CheckCircle } from '@phosphor-icons/react' + +type SummarySectionContent = (typeof import('@/data/atomic-library-showcase.json'))['sections']['summary'] + +interface SummarySectionProps { + content: SummarySectionContent +} + +export function SummarySection({ content }: SummarySectionProps) { + return ( +
+ {content.title} + + }> + + {content.panelHeading} + + {content.panelText} + +
+ ) +} diff --git a/src/components/atomic-library/TypographySection.tsx b/src/components/atomic-library/TypographySection.tsx new file mode 100644 index 0000000..21ad85b --- /dev/null +++ b/src/components/atomic-library/TypographySection.tsx @@ -0,0 +1,64 @@ +import { Code, Heading, Kbd, Link, Section, Separator, Stack, Text } from '@/components/atoms' + +type TypographySectionContent = + (typeof import('@/data/atomic-library-showcase.json'))['sections']['typography'] + +interface TypographySectionProps { + content: TypographySectionContent +} + +export function TypographySection({ content }: TypographySectionProps) { + return ( +
+ {content.title} + + +
+ + {content.headingsLabel} + + + {content.headings.map((label, index) => ( + + {label} + + ))} + +
+ +
+ + {content.textVariantsLabel} + + + {content.textVariants[0]} + {content.textVariants[1]} + {content.textVariants[2]} + {content.textVariants[3]} + +
+ +
+ + {content.inlineElementsLabel} + + + + {content.inlineElements.kbd.before} {content.inlineElements.kbd.keys[0]} + + {content.inlineElements.kbd.keys[1]} {content.inlineElements.kbd.after} + + + {content.inlineElements.code.before} {content.inlineElements.code.content}{' '} + {content.inlineElements.code.after} + + + {content.inlineElements.link.before}{' '} + {content.inlineElements.link.content}{' '} + {content.inlineElements.link.after} + + +
+ +
+ ) +} diff --git a/src/data/atomic-library-showcase.json b/src/data/atomic-library-showcase.json new file mode 100644 index 0000000..6718b9c --- /dev/null +++ b/src/data/atomic-library-showcase.json @@ -0,0 +1,246 @@ +{ + "pageHeader": { + "title": "Atomic Component Library", + "description": "Comprehensive collection of reusable atomic components" + }, + "sections": { + "buttonsActions": { + "title": "Buttons & Actions", + "buttonVariantsLabel": "Button Variants", + "buttonVariants": [ + { "label": "Default", "variant": "default" }, + { "label": "Secondary", "variant": "secondary" }, + { "label": "Outline", "variant": "outline" }, + { "label": "Ghost", "variant": "ghost" }, + { "label": "Destructive", "variant": "destructive" }, + { "label": "Loading", "variant": "default", "loading": true }, + { "label": "With Icon", "variant": "default", "icon": "plus", "iconPosition": "left" }, + { "label": "Download", "variant": "default", "icon": "download", "iconPosition": "right" } + ], + "buttonGroupLabel": "Button Group", + "buttonGroupButtons": ["Left", "Middle", "Right"], + "iconButtonsLabel": "Icon Buttons", + "actionButtonsLabel": "Action Buttons", + "actionButtons": [ + { "label": "Like", "tooltip": "Like this item", "variant": "default", "icon": "heart" }, + { "label": "Favorite", "variant": "outline", "icon": "star" } + ] + }, + "badgesIndicators": { + "title": "Badges & Indicators", + "badgesLabel": "Badges", + "badges": [ + { "label": "Default", "variant": "default" }, + { "label": "Secondary", "variant": "secondary" }, + { "label": "Destructive", "variant": "destructive" }, + { "label": "Outline", "variant": "outline" }, + { "label": "With Icon", "variant": "default", "icon": "star" }, + { "label": "Small", "variant": "default", "size": "sm" }, + { "label": "Large", "variant": "default", "size": "lg" } + ], + "statusBadgesLabel": "Status Badges", + "chipsLabel": "Chips", + "chips": [ + { "label": "React", "variant": "primary" }, + { "label": "TypeScript", "variant": "accent" }, + { "label": "Tailwind", "variant": "muted" }, + { "label": "Removable", "variant": "default", "removable": true } + ], + "dotsLabel": "Dots", + "countBadgeLabel": "Count Badge", + "countItems": [ + { "label": "Notifications", "count": 5 }, + { "label": "Messages", "count": 99, "max": 99, "variant": "destructive" } + ] + }, + "typography": { + "title": "Typography", + "headingsLabel": "Headings", + "headings": ["Heading 1", "Heading 2", "Heading 3", "Heading 4", "Heading 5", "Heading 6"], + "textVariantsLabel": "Text Variants", + "textVariants": [ + "Body text - regular content", + "Caption text - smaller descriptive text", + "Muted text - less important information", + "Small text - compact information" + ], + "inlineElementsLabel": "Inline Elements", + "inlineElements": { + "kbd": { + "before": "Press", + "after": "to search", + "keys": ["Ctrl", "K"] + }, + "code": { + "before": "Run", + "content": "npm install", + "after": "to get started" + }, + "link": { + "before": "Visit", + "content": "our documentation", + "after": "to learn more" + } + } + }, + "formControls": { + "title": "Form Controls", + "switchLabel": "Switch", + "switch": { + "label": "Enable notifications", + "description": "Receive updates about your account" + }, + "datePickerLabel": "Date Picker", + "datePlaceholder": "Select a date", + "filterInputLabel": "Filter Input", + "filterPlaceholder": "Filter items...", + "ratingLabel": "Rating", + "rangeSliderLabel": "Range Slider", + "rangeSlider": { + "label": "Price Range" + } + }, + "progressLoading": { + "title": "Progress & Loading", + "progressBarLabel": "Progress Bar", + "circularProgressLabel": "Circular Progress", + "skeletonLabel": "Skeleton Loading" + }, + "feedback": { + "title": "Feedback", + "alerts": [ + { "variant": "info", "title": "Information", "message": "This is an informational alert message." }, + { "variant": "success", "title": "Success", "message": "Your changes have been saved successfully." }, + { "variant": "warning", "title": "Warning", "message": "Please review your input before submitting." }, + { "variant": "error", "title": "Error", "message": "Something went wrong. Please try again." } + ], + "infoPanels": [ + { "variant": "info", "title": "Info Panel", "message": "This is an informational panel with helpful content." }, + { "variant": "success", "title": "Success Panel", "message": "Operation completed successfully!" }, + { "variant": "warning", "title": "Warning Panel", "message": "Please proceed with caution." }, + { "variant": "error", "title": "Error Panel", "message": "An error has occurred." } + ] + }, + "avatarsUserElements": { + "title": "Avatars & User Elements", + "avatarSizesLabel": "Avatar Sizes", + "avatarFallbacks": ["XS", "SM", "MD", "LG", "XL"], + "avatarGroupLabel": "Avatar Group", + "avatarGroup": [ + { "fallback": "JD", "alt": "John Doe" }, + { "fallback": "AS", "alt": "Alice Smith" }, + { "fallback": "BJ", "alt": "Bob Jones" }, + { "fallback": "MK", "alt": "Mary Kay" }, + { "fallback": "TW", "alt": "Tom Wilson" }, + { "fallback": "SB", "alt": "Sarah Brown" }, + { "fallback": "PG", "alt": "Paul Green" } + ] + }, + "cardsMetrics": { + "title": "Cards & Metrics", + "metrics": [ + { "label": "Total Users", "value": "12,345", "icon": "user", "trend": { "value": 12, "direction": "up" } }, + { "label": "Orders", "value": "1,234", "icon": "cart", "trend": { "value": 5, "direction": "up" } }, + { "label": "Notifications", "value": "45", "icon": "bell" } + ] + }, + "interactiveElements": { + "title": "Interactive Elements", + "hoverCardLabel": "Hover Card", + "hoverCardTrigger": "Hover over me", + "hoverCardTitle": "Additional Information", + "hoverCardDescription": "This is extra content shown in a hover card.", + "tooltipLabel": "Tooltip", + "tooltipContent": "This is a helpful tooltip", + "tooltipTrigger": "Hover for tooltip", + "colorSwatchesLabel": "Color Swatches", + "colorSwatches": [ + { "label": "Primary", "color": "#8b5cf6" }, + { "label": "Success", "color": "#10b981" }, + { "label": "Error", "color": "#ef4444" }, + { "label": "Warning", "color": "#f59e0b" } + ] + }, + "layoutComponents": { + "title": "Layout Components", + "responsiveGridLabel": "Responsive Grid", + "gridItemLabel": "Item", + "flexLayoutLabel": "Flex Layout", + "flexLeft": "Left Content", + "flexCenter": "Center", + "flexRightAction": "Right Action", + "stackLayoutLabel": "Stack Layout", + "stackItems": ["Stacked Item 1", "Stacked Item 2", "Stacked Item 3"] + }, + "enhancedComponents": { + "title": "Enhanced Components", + "panelHeader": { + "title": "Panel Header Component", + "subtitle": "A reusable header with optional icon and actions", + "actionLabel": "Action" + }, + "numberInputLabel": "Number Input", + "numberInput": { + "label": "Quantity" + }, + "textGradientLabel": "Text Gradient", + "textGradientText": "Beautiful Gradient Text", + "statusIndicatorsLabel": "Status Indicators", + "statusActiveLabel": "Active", + "statusFeaturedLabel": "Featured", + "quickActionButtonsLabel": "Quick Action Buttons", + "quickActionButtons": [ + { + "label": "Code", + "description": "Edit files", + "variant": "primary", + "alertMessage": "Code clicked" + }, + { + "label": "Deploy", + "description": "Launch app", + "variant": "accent", + "alertMessage": "Deploy clicked" + }, + { + "label": "Favorite", + "description": "Save for later", + "variant": "default", + "alertMessage": "Favorite clicked" + }, + { + "label": "Shop", + "description": "Browse items", + "variant": "muted", + "alertMessage": "Shop clicked" + } + ], + "glowCardsLabel": "Glow Cards", + "glowCards": [ + { + "title": "Primary Glow", + "description": "Card with primary glow effect", + "glowColor": "primary", + "intensity": "medium" + }, + { + "title": "Accent Glow", + "description": "Card with accent glow effect", + "glowColor": "accent", + "intensity": "high" + }, + { + "title": "Success Glow", + "description": "Card with success glow effect", + "glowColor": "success", + "intensity": "medium" + } + ] + }, + "summary": { + "title": "Summary", + "panelHeading": "Atomic Component Library Complete!", + "panelText": "The atomic component library includes 60+ production-ready components covering buttons, badges, typography, forms, progress indicators, feedback, avatars, cards, enhanced inputs, gradient effects, and layout utilities. All components are fully typed, accessible, and follow the design system." + } + } +}