feat: container variant props, 11-component registry, rich dashboard
Parser:
- column/row/stack now parse trailing { props } after ]
- Enables: column [...] { variant: "card" }
Codegen:
- Container props dispatch: variant, class, click, style, layout
- variant_to_css() maps (tag, variant) → CSS class
- variant_map_js() for dynamic variants via inline JS map
- 230+ lines design system CSS (button/badge/card/dialog/toast/
progress/alert/separator/toggle/avatar/stat)
Registry (11 components):
- button, input, card, badge, dialog, toast
- NEW: progress, alert, separator, toggle, avatar
- All embedded via include_str! for offline use
Examples:
- showcase.ds: component gallery with variant prop
- dashboard.ds: admin dashboard with glassmorphism cards
2026-02-26 13:58:33 -08:00
|
|
|
-- DreamStack Avatar Component
|
feat: enhanced 14 registry components + component gallery
Registry components enhanced with proper DreamStack patterns:
- Card: conditional title/subtitle/footer via when guards, slot for children
- Button: variant as string prop, disabled support
- Dialog: when-guarded overlay, slot for content, close button
- Progress: conditional label, variant support
- Input: conditional label, error state, helper text
- Alert: variant prop, slot for custom content
- Toggle: when-guarded label display
- Toast: when-guarded visibility
- Avatar: initials with variant
- Badge: label with variant prop
- Separator: optional centered label
New components:
- Stat: dashboard metric card (label, value, change delta)
- Tabs: tab switcher supporting 2-3 tabs
- Select: button-based option selector
New example:
- component-gallery.ds (89KB): imports 12 components, uses Card+Button,
Input+Alert, Progress, Badge+when/else, match expressions,
Stat metrics, Toggle, Avatar, Toast, Separator, every timer
All 10 examples pass. Browser-tested with zero errors.
2026-02-26 18:25:49 -08:00
|
|
|
-- User avatar with initials and size variant
|
feat: container variant props, 11-component registry, rich dashboard
Parser:
- column/row/stack now parse trailing { props } after ]
- Enables: column [...] { variant: "card" }
Codegen:
- Container props dispatch: variant, class, click, style, layout
- variant_to_css() maps (tag, variant) → CSS class
- variant_map_js() for dynamic variants via inline JS map
- 230+ lines design system CSS (button/badge/card/dialog/toast/
progress/alert/separator/toggle/avatar/stat)
Registry (11 components):
- button, input, card, badge, dialog, toast
- NEW: progress, alert, separator, toggle, avatar
- All embedded via include_str! for offline use
Examples:
- showcase.ds: component gallery with variant prop
- dashboard.ds: admin dashboard with glassmorphism cards
2026-02-26 13:58:33 -08:00
|
|
|
|
feat: enhanced 14 registry components + component gallery
Registry components enhanced with proper DreamStack patterns:
- Card: conditional title/subtitle/footer via when guards, slot for children
- Button: variant as string prop, disabled support
- Dialog: when-guarded overlay, slot for content, close button
- Progress: conditional label, variant support
- Input: conditional label, error state, helper text
- Alert: variant prop, slot for custom content
- Toggle: when-guarded label display
- Toast: when-guarded visibility
- Avatar: initials with variant
- Badge: label with variant prop
- Separator: optional centered label
New components:
- Stat: dashboard metric card (label, value, change delta)
- Tabs: tab switcher supporting 2-3 tabs
- Select: button-based option selector
New example:
- component-gallery.ds (89KB): imports 12 components, uses Card+Button,
Input+Alert, Progress, Badge+when/else, match expressions,
Stat metrics, Toggle, Avatar, Toast, Separator, every timer
All 10 examples pass. Browser-tested with zero errors.
2026-02-26 18:25:49 -08:00
|
|
|
export component Avatar(initials, size) =
|
|
|
|
|
text initials { variant: "avatar" }
|