{ "$schema": "https://design.chaozcode.com/manifest.schema.json", "generated": "2026-05-10T09:41:48.313Z", "name": "@chaozcode/mads", "version": "1.7.0", "description": "Chaoz-MADS Design System v1.7.0 — 1,598+ CSS classes · 218 React components · 12 themes · 50+ motion primitives · 10 layout primitives", "cdn": { "css": "https://design.chaozcode.com/mads.css", "designSystem": "https://design.chaozcode.com/dist/design-system.mjs", "patterns": "https://design.chaozcode.com/dist/patterns.mjs", "components": "https://design.chaozcode.com/dist/components.mjs", "autoUpdate": "https://design.chaozcode.com/auto-update.js", "manifest": "https://design.chaozcode.com/manifest.json", "examples": "https://design.chaozcode.com/examples", "cdnDemo": "https://design.chaozcode.com/cdn-demo.html" }, "tokens": { "colors": { "accent": "var(--cx-accent, #7c3aed)", "accentHover": "var(--cx-accent-hover, #8b5cf6)", "brand": "var(--cx-brand-primary, oklch(50% 0.17 265))", "success": "var(--cx-color-success, #10b981)", "danger": "var(--cx-color-danger, #ef4444)", "warning": "var(--cx-color-warning, #f59e0b)", "info": "var(--cx-color-info, #3b82f6)", "bgBase": "var(--cx-bg-base, oklch(13% 0.015 280))", "bgSurface": "var(--cx-bg-surface, oklch(18% 0.01 280))", "bgRaised": "var(--cx-bg-raised, oklch(22% 0.015 280))", "textPrimary": "var(--cx-text-primary, oklch(95% 0.01 280))", "textSecondary": "var(--cx-text-secondary, oklch(75% 0.02 280))", "textMuted": "var(--cx-text-muted, oklch(55% 0.02 280))", "border": "var(--cx-border, oklch(30% 0.02 280 / 0.3))", "borderActive": "var(--cx-border-active, oklch(50% 0.15 280 / 0.5))" }, "spacing": { "0": "0", "1": "0.25rem", "2": "0.5rem", "3": "0.75rem", "4": "1rem", "5": "1.25rem", "6": "1.5rem", "8": "2rem", "10": "2.5rem", "12": "3rem", "1.5": "0.375rem", "2.5": "0.625rem", "3.5": "0.875rem" }, "radius": { "sm": "0.375rem", "md": "0.5rem", "lg": "0.625rem", "xl": "0.75rem", "2xl": "1rem", "3xl": "1.5rem", "full": "9999px" }, "shadow": { "sm": "var(--cx-shadow-sm, 0 1px 2px rgba(0,0,0,0.18))", "md": "var(--cx-shadow-md, 0 4px 12px rgba(0,0,0,0.28))", "lg": "var(--cx-shadow-lg, 0 8px 24px rgba(0,0,0,0.38))", "xl": "var(--cx-shadow-xl, 0 16px 48px rgba(0,0,0,0.48))", "glow": "var(--cx-glow-sm, 0 0 24px -8px var(--cx-accent))" }, "z": { "base": 0, "raised": 10, "dropdown": 50, "sticky": 100, "overlay": 1000, "modal": 1500, "toast": 2000, "tooltip": 3000 }, "duration": { "instant": "80ms", "fast": "120ms", "base": "180ms", "slow": "320ms", "slower": "480ms" }, "easing": { "out": "cubic-bezier(0.22, 1, 0.36, 1)", "inOut": "cubic-bezier(0.65, 0, 0.35, 1)", "spring": "cubic-bezier(0.34, 1.56, 0.64, 1)", "springSoft": "cubic-bezier(0.16, 1.18, 0.5, 1)", "bounce": "cubic-bezier(0.68, -0.6, 0.32, 1.6)" } }, "variants": { "button": [ "primary", "secondary", "ghost", "outline", "danger", "success" ], "card": [ "default", "hover", "glass", "glassUltra", "frosted", "stat" ], "input": [ "default", "success", "error" ], "badge": [ "purple", "cyan", "green", "amber", "red", "blue", "gray", "pink", "teal" ] }, "sizes": { "button": [ "xs", "sm", "md", "lg" ], "input": [ "sm", "md", "lg" ], "badge": [ "xs", "sm", "md" ] }, "breakpoints": { "xs": "320px", "sm": "640px", "md": "768px", "lg": "1024px", "xl": "1280px", "2xl": "1536px" }, "designSystem": { "entry": "@chaozcode/mads/design-system", "components": [ { "name": "CxButton", "props": [ "variant", "size", "disabled", "loading", "icon", "iconPosition", "fullWidth", "onClick", "className" ] }, { "name": "CxCard", "props": [ "variant", "glow", "shine", "interactive", "className" ] }, { "name": "CxCardHeader", "props": [ "className" ] }, { "name": "CxCardContent", "props": [ "className" ] }, { "name": "CxCardFooter", "props": [ "className" ] }, { "name": "CxInput", "props": [ "type", "state", "size", "fullWidth", "className" ] }, { "name": "CxTextarea", "props": [ "state", "rows", "fullWidth", "className" ] }, { "name": "CxInputGroup", "props": [ "label", "hint", "error", "className" ] }, { "name": "SettingsPanel", "kind": "widget", "intent": "user preferences UI", "import": "import { SettingsPanel } from '@chaozcode/mads'", "props": [ "sections", "themes", "themeHeading", "onChange", "compact", "className" ] }, { "name": "ThemeCustomizer", "kind": "widget", "intent": "CSS token editor + export", "import": "import { ThemeCustomizer } from '@chaozcode/mads'", "props": [ "tokens", "onSave", "hidePresets", "hideExports", "className" ] } ], "hooks": [ { "name": "useTrackComponent", "signature": "(name: string, opts?: { ctx?: string }) => void" } ] }, "patterns": { "entry": "@chaozcode/mads/patterns", "components": [ { "name": "CxHero", "desc": "Full landing/hero section with badge, title, subtitle, CTAs" }, { "name": "CxStatGrid", "desc": "Auto-flow grid of metric tiles with stagger entry + hover glow" }, { "name": "CxLoginCard", "desc": "Sign-in form with social providers, remember-me, forgot/register links" }, { "name": "CxPricingTable", "desc": "1..N pricing tiers with \"popular\" highlight" }, { "name": "CxAppShell", "desc": "Topbar + sidebar + main app layout" }, { "name": "CxToastStack", "desc": "Stack of dismissible toasts (success/info/warning/error)" }, { "name": "CxToast", "desc": "Single toast notification" }, { "name": "CxSettingsPanel", "desc": "Sidebar nav + content sections for settings pages" }, { "name": "CxDashboardLayout", "desc": "Opinionated dashboard skeleton (stats + activity feed)" } ] }, "showcaseComponents": { "entry": "@chaozcode/mads/components", "count": 211, "list": [ "APIEndpoint", "Accordion", "ActivityFeed", "Alert", "AlertRule", "Alive", "AnimatedContainer", "AnimatedCounter", "AnimatedList", "AnimatedNumber", "Avatar", "AvatarGroup", "Badge", "BottomBar", "Breadcrumbs", "Button", "ButtonGroup", "Callout", "Card", "ChatBubble", "Checkbox", "Chip", "ChipGroup", "CircularProgress", "CodeBlock", "Collapsible", "ColorDot", "ColorPicker", "ComboCounter", "CommandHistory", "CommandPalette", "CompactStat", "ComponentSchema", "Confetti", "ConfidenceMeter", "ConfirmDialog", "ConnectionMap", "ContainerCard", "ContextMenu", "CopyButton", "CostTracker", "CountBadge", "CountUp", "CountdownTimer", "CronSchedule", "DataGrid", "DataStream", "DeployPipeline", "DepthPanel", "DescriptionList", "DiffView", "Divider", "Drawer", "DropdownMenu", "DynamicComponent", "DynamicText", "EmojiReaction", "EmptyPanel", "EmptyState", "EnvSwitcher", "FeatureCard", "FeedComposer", "FeedLoadMore", "FeedNav", "FeedPost", "FeedPostActions", "FeedPostHeader", "FeedPostMedia", "FeedPostReactions", "FeedPostSkeleton", "FeedProfileHero", "FileTree", "FileUpload", "FlipClock", "FloatingActionButton", "FloatingActionMenu", "FormField", "FormGroup", "Gauge", "GitGraph", "GlassCard", "GlassPanel", "GlitchText", "GlowButton", "GradientDivider", "GradientMaker", "GradientOrb", "GradientText", "Header", "Heatmap", "HeatmapCalendar", "HolographicCard", "HoverReveal", "IconButton", "Icons", "IncidentTimeline", "InfiniteScroll", "InfoBar", "InlineEdit", "Input", "InputGroup", "KPICard", "Kanban", "KeyValue", "LatencyHistogram", "LazyRender", "List", "ListItem", "LiveCounter", "LiveIndicator", "LiveLog", "LogEntry", "LogStream", "MagneticButton", "Marquee", "MatrixColumn", "MediaCard", "Meter", "MetricRing", "MetricSparkline", "MetricTile", "MicroCard", "MiniChart", "MiniTag", "Modal", "ModelCard", "ModelSelector", "MorphingShape", "NeonBadge", "NeonText", "NotificationBell", "NotificationStack", "NumberInput", "OrbitDots", "PageShell", "Pagination", "Panel", "ParallaxCard", "ParticleField", "Pill", "PluginSystem", "Popover", "PortScanner", "ProgressBar", "PromptBox", "PulseRing", "QuickAction", "RadioGroup", "RangeSlider", "RateLimitGauge", "Rating", "ResizablePanel", "ResponseBubble", "RevealOnScroll", "SPRING_PRESETS", "SSLCertCard", "SearchInput", "SecretVault", "SegmentedControl", "Select", "Separator", "ServerCard", "Sheet", "ShimmerCard", "SidebarLayout", "SidebarNav", "SignalBars", "Skeleton", "SkeletonCard", "SkeletonGroup", "Slider", "SocialFeed", "Sparkline", "Spinner", "SplitButton", "SplitCard", "SplitPane", "Spotlight", "SpringCard", "Stat", "StatCard", "StatusBanner", "StatusDot", "StatusPulse", "StepWizard", "Stepper", "StreamProgress", "StreamText", "StripedProgress", "SystemTopology", "Table", "Tabs", "TagInput", "Terminal", "Textarea", "ThinkingIndicator", "Tilt3D", "Timeline", "Toast", "Toggle", "TokenCounter", "Toolbar", "ToolbarDivider", "Tooltip", "TypeWriter", "TypewriterText", "UptimeCalendar", "VirtualList", "WaveformVisualizer", "WebhookCard", "_internals" ] }, "cssClasses": { "total": 411, "families": { "act": [ "cx-act" ], "action": [ "cx-action-compact" ], "active": [ "cx-active" ], "alert": [ "cx-alert", "cx-alert-danger", "cx-alert-info", "cx-alert-rule", "cx-alert-success", "cx-alert-warning" ], "alive": [ "cx-alive-button", "cx-alive-card" ], "ambient": [ "cx-ambient-dots", "cx-ambient-grid" ], "animate": [ "cx-animate-bounce-in", "cx-animate-fade-in", "cx-animate-fade-up", "cx-animate-float", "cx-animate-heartbeat", "cx-animate-reveal", "cx-animate-scale-in", "cx-animate-shake", "cx-animate-slide-left", "cx-animate-slide-right", "cx-animate-slide-up", "cx-animate-spring", "cx-animate-wobble", "cx-animate-zoom-in" ], "badge": [ "cx-badge", "cx-badge-amber", "cx-badge-blue", "cx-badge-cyan", "cx-badge-green", "cx-badge-muted", "cx-badge-primary", "cx-badge-purple", "cx-badge-red", "cx-badge-teal", "cx-badge-yellow" ], "bg": [ "cx-bg-base", "cx-bg-deep", "cx-bg-gradient-animated", "cx-bg-mesh", "cx-bg-noise", "cx-bg-overlay", "cx-bg-raised", "cx-bg-surface", "cx-bg-void" ], "black": [ "cx-black" ], "bold": [ "cx-bold" ], "border": [ "cx-border", "cx-border-danger", "cx-border-flow", "cx-border-gradient", "cx-border-gradient-cyber", "cx-border-gradient-purple", "cx-border-gradient-spin", "cx-border-hover" ], "bounce": [ "cx-bounce" ], "breathe": [ "cx-breathe", "cx-breathe-soft" ], "btn": [ "cx-btn", "cx-btn-block", "cx-btn-danger", "cx-btn-ghost", "cx-btn-group", "cx-btn-icon", "cx-btn-lg", "cx-btn-md", "cx-btn-outline", "cx-btn-primary", "cx-btn-secondary", "cx-btn-sm", "cx-btn-success", "cx-btn-xs" ], "button": [ "cx-button" ], "card": [ "cx-card", "cx-card-base", "cx-card-content", "cx-card-footer", "cx-card-frosted", "cx-card-header", "cx-card-hover", "cx-card-info", "cx-card-interactive", "cx-card-success", "cx-card-warning" ], "checkbox": [ "cx-checkbox" ], "click": [ "cx-click-ripple", "cx-click-shrink" ], "clip": [ "cx-clip-blob", "cx-clip-diamond", "cx-clip-hexagon", "cx-clip-star" ], "code": [ "cx-code" ], "color": [ "cx-color-swatch" ], "command": [ "cx-command-history" ], "conic": [ "cx-conic-cyber", "cx-conic-purple", "cx-conic-rainbow" ], "contain": [ "cx-contain-content", "cx-contain-layout", "cx-contain-paint", "cx-contain-strict" ], "container": [ "cx-container", "cx-container-card" ], "content": [ "cx-content" ], "cron": [ "cx-cron-schedule" ], "danger": [ "cx-danger" ], "data": [ "cx-data-ticker", "cx-data-ticker-inner" ], "depth": [ "cx-depth-1", "cx-depth-2" ], "divider": [ "cx-divider", "cx-divider-glow" ], "dot": [ "cx-dot", "cx-dot-connected", "cx-dot-error", "cx-dot-idle", "cx-dot-pulse", "cx-dot-synced", "cx-dot-warning" ], "drag": [ "cx-drag-over" ], "drawer": [ "cx-drawer", "cx-drawer-backdrop" ], "duration": [ "cx-duration-slow" ], "elevation": [ "cx-elevation-0", "cx-elevation-1", "cx-elevation-2", "cx-elevation-3", "cx-elevation-4" ], "enter": [ "cx-enter-blur", "cx-enter-bounce", "cx-enter-down", "cx-enter-drop", "cx-enter-fade", "cx-enter-flip-x", "cx-enter-flip-y", "cx-enter-left", "cx-enter-right", "cx-enter-scale", "cx-enter-up", "cx-enter-zoom-rotate" ], "extrabold": [ "cx-extrabold" ], "fade": [ "cx-fade-in" ], "feature": [ "cx-feature-card", "cx-feature-icon" ], "file": [ "cx-file-drop", "cx-file-drop-hint", "cx-file-drop-icon", "cx-file-drop-text" ], "flicker": [ "cx-flicker" ], "flip": [ "cx-flip-card" ], "float": [ "cx-float" ], "font": [ "cx-font-mono" ], "form": [ "cx-form-error", "cx-form-group", "cx-form-group-horizontal", "cx-form-help", "cx-form-label" ], "glass": [ "cx-glass", "cx-glass-1", "cx-glass-2", "cx-glass-3", "cx-glass-heavy", "cx-glass-ultra" ], "glitch": [ "cx-glitch" ], "glow": [ "cx-glow", "cx-glow-accent", "cx-glow-amber", "cx-glow-blue", "cx-glow-cyan", "cx-glow-green", "cx-glow-lg", "cx-glow-md", "cx-glow-pulse", "cx-glow-purple", "cx-glow-red", "cx-glow-text" ], "gpu": [ "cx-gpu" ], "gradient": [ "cx-gradient-aurora", "cx-gradient-border", "cx-gradient-cyber", "cx-gradient-emerald", "cx-gradient-gold", "cx-gradient-mesh", "cx-gradient-midnight", "cx-gradient-ocean", "cx-gradient-purple", "cx-gradient-shift", "cx-gradient-sunset", "cx-gradient-text" ], "header": [ "cx-header" ], "heartbeat": [ "cx-heartbeat" ], "holographic": [ "cx-holographic" ], "hover": [ "cx-hover-bg-shift", "cx-hover-border", "cx-hover-border-glow", "cx-hover-glow", "cx-hover-glow-ring", "cx-hover-holo", "cx-hover-lift", "cx-hover-reveal", "cx-hover-rise", "cx-hover-scale", "cx-hover-shine", "cx-hover-tilt" ], "hscroll": [ "cx-hscroll-shell" ], "icon": [ "cx-icon-btn", "cx-icon-btn-active" ], "incident": [ "cx-incident-timeline" ], "info": [ "cx-info" ], "input": [ "cx-input", "cx-input-block", "cx-input-error", "cx-input-group", "cx-input-label", "cx-input-lg", "cx-input-message", "cx-input-message-error", "cx-input-sm", "cx-input-success" ], "iridescent": [ "cx-iridescent" ], "kanban": [ "cx-kanban" ], "light": [ "cx-light" ], "list": [ "cx-list", "cx-list-item" ], "live": [ "cx-live-dot", "cx-live-dot--error", "cx-live-dot--purple", "cx-live-dot--warning" ], "log": [ "cx-log", "cx-log-stream" ], "medium": [ "cx-medium" ], "metric": [ "cx-metric-sparkline" ], "micro": [ "cx-micro-card" ], "modal": [ "cx-modal", "cx-modal-backdrop" ], "model": [ "cx-model-card" ], "morph": [ "cx-morph" ], "nav": [ "cx-nav-active" ], "navbar": [ "cx-navbar" ], "neon": [ "cx-neon-blue", "cx-neon-border", "cx-neon-cyan", "cx-neon-flicker", "cx-neon-gold", "cx-neon-green", "cx-neon-purple", "cx-neon-red" ], "neu": [ "cx-neu", "cx-neu-btn", "cx-neu-flat", "cx-neu-inset" ], "no": [ "cx-no-transition" ], "noise": [ "cx-noise" ], "normal": [ "cx-normal" ], "orb": [ "cx-orb" ], "orbit": [ "cx-orbit" ], "overlay": [ "cx-overlay" ], "pagination": [ "cx-pagination", "cx-pagination-item" ], "panel": [ "cx-panel" ], "pattern": [ "cx-pattern-circuit", "cx-pattern-cross", "cx-pattern-diagonal", "cx-pattern-dots", "cx-pattern-grid" ], "perspective": [ "cx-perspective" ], "pill": [ "cx-pill" ], "progress": [ "cx-progress" ], "prompt": [ "cx-prompt-box" ], "pulse": [ "cx-pulse-ring" ], "quick": [ "cx-quick-action" ], "radio": [ "cx-radio" ], "range": [ "cx-range" ], "rate": [ "cx-rate-limit-gauge" ], "repo": [ "cx-repo-compact" ], "reveal": [ "cx-reveal" ], "revealed": [ "cx-revealed" ], "ripple": [ "cx-ripple-out" ], "rubber": [ "cx-rubber-band" ], "scroll": [ "cx-scroll", "cx-scroll-x", "cx-scroll-y" ], "scrollbar": [ "cx-scrollbar", "cx-scrollbar-hidden" ], "section": [ "cx-section-label" ], "semibold": [ "cx-semibold" ], "shadow": [ "cx-shadow-glow", "cx-shadow-glow-cyan", "cx-shadow-glow-green", "cx-shadow-inner", "cx-shadow-lg", "cx-shadow-md", "cx-shadow-ring", "cx-shadow-ring-lg", "cx-shadow-sm", "cx-shadow-xl" ], "shake": [ "cx-shake" ], "shimmer": [ "cx-shimmer", "cx-shimmer-scan" ], "shine": [ "cx-shine" ], "sidebar": [ "cx-sidebar", "cx-sidebar-browser", "cx-sidebar-overlay", "cx-sidebar-toggle" ], "signal": [ "cx-signal-bar", "cx-signal-bar--active", "cx-signal-bar--error", "cx-signal-bar--warning", "cx-signal-bars" ], "skeleton": [ "cx-skeleton", "cx-skeleton-card", "cx-skeleton-pulse", "cx-skeleton-wave" ], "space": [ "cx-space-1", "cx-space-2", "cx-space-3", "cx-space-4", "cx-space-6", "cx-space-8" ], "spin": [ "cx-spin" ], "spinner": [ "cx-spinner" ], "spring": [ "cx-spring-press" ], "stagger": [ "cx-stagger", "cx-stagger-dramatic", "cx-stagger-fast", "cx-stagger-item", "cx-stagger-slow" ], "stat": [ "cx-stat", "cx-stat-card", "cx-stat-card-label", "cx-stat-card-value", "cx-stat-compact", "cx-stat-compact-icon", "cx-stat-compact-info", "cx-stat-compact-label", "cx-stat-compact-trend", "cx-stat-compact-value" ], "state": [ "cx-state-error", "cx-state-loading", "cx-state-success" ], "stream": [ "cx-stream-cursor", "cx-stream-cursor--block", "cx-stream-progress" ], "success": [ "cx-success" ], "surface": [ "cx-surface-0", "cx-surface-1", "cx-surface-2", "cx-surface-3", "cx-surface-4" ], "sway": [ "cx-sway" ], "tab": [ "cx-tab", "cx-tab-content", "cx-tab-content-enter", "cx-tab-strip" ], "table": [ "cx-table-wrap" ], "tabular": [ "cx-tabular" ], "text": [ "cx-text-2xl", "cx-text-2xs", "cx-text-3xl", "cx-text-3xs", "cx-text-4xl", "cx-text-5xl", "cx-text-accent", "cx-text-balance", "cx-text-base", "cx-text-caption", "cx-text-danger", "cx-text-dim", "cx-text-dim-50", "cx-text-display", "cx-text-ghost", "cx-text-glow", "cx-text-glow-cyan", "cx-text-gradient", "cx-text-gradient-cyan", "cx-text-gradient-cyber", "cx-text-gradient-gold", "cx-text-gradient-green", "cx-text-gradient-purple", "cx-text-info", "cx-text-lg", "cx-text-mono", "cx-text-muted", "cx-text-pretty", "cx-text-primary", "cx-text-secondary", "cx-text-shimmer", "cx-text-sm", "cx-text-stroke", "cx-text-success", "cx-text-warning", "cx-text-xl", "cx-text-xs" ], "textarea": [ "cx-textarea" ], "theme": [ "cx-theme-transition" ], "thin": [ "cx-thin" ], "toast": [ "cx-toast-container" ], "toggle": [ "cx-toggle" ], "tooltip": [ "cx-tooltip" ], "track": [ "cx-track-tight" ], "transition": [ "cx-transition", "cx-transition-bouncy", "cx-transition-fast", "cx-transition-slow", "cx-transition-spring" ], "typewriter": [ "cx-typewriter", "cx-typewriter-blink" ], "warning": [ "cx-warning" ], "wiggle": [ "cx-wiggle" ] }, "flat": [ "cx-act", "cx-action-compact", "cx-active", "cx-alert", "cx-alert-danger", "cx-alert-info", "cx-alert-rule", "cx-alert-success", "cx-alert-warning", "cx-alive-button", "cx-alive-card", "cx-ambient-dots", "cx-ambient-grid", "cx-animate-bounce-in", "cx-animate-fade-in", "cx-animate-fade-up", "cx-animate-float", "cx-animate-heartbeat", "cx-animate-reveal", "cx-animate-scale-in", "cx-animate-shake", "cx-animate-slide-left", "cx-animate-slide-right", "cx-animate-slide-up", "cx-animate-spring", "cx-animate-wobble", "cx-animate-zoom-in", "cx-badge", "cx-badge-amber", "cx-badge-blue", "cx-badge-cyan", "cx-badge-green", "cx-badge-muted", "cx-badge-primary", "cx-badge-purple", "cx-badge-red", "cx-badge-teal", "cx-badge-yellow", "cx-bg-base", "cx-bg-deep", "cx-bg-gradient-animated", "cx-bg-mesh", "cx-bg-noise", "cx-bg-overlay", "cx-bg-raised", "cx-bg-surface", "cx-bg-void", "cx-black", "cx-bold", "cx-border", "cx-border-danger", "cx-border-flow", "cx-border-gradient", "cx-border-gradient-cyber", "cx-border-gradient-purple", "cx-border-gradient-spin", "cx-border-hover", "cx-bounce", "cx-breathe", "cx-breathe-soft", "cx-btn", "cx-btn-block", "cx-btn-danger", "cx-btn-ghost", "cx-btn-group", "cx-btn-icon", "cx-btn-lg", "cx-btn-md", "cx-btn-outline", "cx-btn-primary", "cx-btn-secondary", "cx-btn-sm", "cx-btn-success", "cx-btn-xs", "cx-button", "cx-card", "cx-card-base", "cx-card-content", "cx-card-footer", "cx-card-frosted", "cx-card-header", "cx-card-hover", "cx-card-info", "cx-card-interactive", "cx-card-success", "cx-card-warning", "cx-checkbox", "cx-click-ripple", "cx-click-shrink", "cx-clip-blob", "cx-clip-diamond", "cx-clip-hexagon", "cx-clip-star", "cx-code", "cx-color-swatch", "cx-command-history", "cx-conic-cyber", "cx-conic-purple", "cx-conic-rainbow", "cx-contain-content", "cx-contain-layout", "cx-contain-paint", "cx-contain-strict", "cx-container", "cx-container-card", "cx-content", "cx-cron-schedule", "cx-danger", "cx-data-ticker", "cx-data-ticker-inner", "cx-depth-1", "cx-depth-2", "cx-divider", "cx-divider-glow", "cx-dot", "cx-dot-connected", "cx-dot-error", "cx-dot-idle", "cx-dot-pulse", "cx-dot-synced", "cx-dot-warning", "cx-drag-over", "cx-drawer", "cx-drawer-backdrop", "cx-duration-slow", "cx-elevation-0", "cx-elevation-1", "cx-elevation-2", "cx-elevation-3", "cx-elevation-4", "cx-enter-blur", "cx-enter-bounce", "cx-enter-down", "cx-enter-drop", "cx-enter-fade", "cx-enter-flip-x", "cx-enter-flip-y", "cx-enter-left", "cx-enter-right", "cx-enter-scale", "cx-enter-up", "cx-enter-zoom-rotate", "cx-extrabold", "cx-fade-in", "cx-feature-card", "cx-feature-icon", "cx-file-drop", "cx-file-drop-hint", "cx-file-drop-icon", "cx-file-drop-text", "cx-flicker", "cx-flip-card", "cx-float", "cx-font-mono", "cx-form-error", "cx-form-group", "cx-form-group-horizontal", "cx-form-help", "cx-form-label", "cx-glass", "cx-glass-1", "cx-glass-2", "cx-glass-3", "cx-glass-heavy", "cx-glass-ultra", "cx-glitch", "cx-glow", "cx-glow-accent", "cx-glow-amber", "cx-glow-blue", "cx-glow-cyan", "cx-glow-green", "cx-glow-lg", "cx-glow-md", "cx-glow-pulse", "cx-glow-purple", "cx-glow-red", "cx-glow-text", "cx-gpu", "cx-gradient-aurora", "cx-gradient-border", "cx-gradient-cyber", "cx-gradient-emerald", "cx-gradient-gold", "cx-gradient-mesh", "cx-gradient-midnight", "cx-gradient-ocean", "cx-gradient-purple", "cx-gradient-shift", "cx-gradient-sunset", "cx-gradient-text", "cx-header", "cx-heartbeat", "cx-holographic", "cx-hover-bg-shift", "cx-hover-border", "cx-hover-border-glow", "cx-hover-glow", "cx-hover-glow-ring", "cx-hover-holo", "cx-hover-lift", "cx-hover-reveal", "cx-hover-rise", "cx-hover-scale", "cx-hover-shine", "cx-hover-tilt", "cx-hscroll-shell", "cx-icon-btn", "cx-icon-btn-active", "cx-incident-timeline", "cx-info", "cx-input", "cx-input-block", "cx-input-error", "cx-input-group", "cx-input-label", "cx-input-lg", "cx-input-message", "cx-input-message-error", "cx-input-sm", "cx-input-success", "cx-iridescent", "cx-kanban", "cx-light", "cx-list", "cx-list-item", "cx-live-dot", "cx-live-dot--error", "cx-live-dot--purple", "cx-live-dot--warning", "cx-log", "cx-log-stream", "cx-medium", "cx-metric-sparkline", "cx-micro-card", "cx-modal", "cx-modal-backdrop", "cx-model-card", "cx-morph", "cx-nav-active", "cx-navbar", "cx-neon-blue", "cx-neon-border", "cx-neon-cyan", "cx-neon-flicker", "cx-neon-gold", "cx-neon-green", "cx-neon-purple", "cx-neon-red", "cx-neu", "cx-neu-btn", "cx-neu-flat", "cx-neu-inset", "cx-no-transition", "cx-noise", "cx-normal", "cx-orb", "cx-orbit", "cx-overlay", "cx-pagination", "cx-pagination-item", "cx-panel", "cx-pattern-circuit", "cx-pattern-cross", "cx-pattern-diagonal", "cx-pattern-dots", "cx-pattern-grid", "cx-perspective", "cx-pill", "cx-progress", "cx-prompt-box", "cx-pulse-ring", "cx-quick-action", "cx-radio", "cx-range", "cx-rate-limit-gauge", "cx-repo-compact", "cx-reveal", "cx-revealed", "cx-ripple-out", "cx-rubber-band", "cx-scroll", "cx-scroll-x", "cx-scroll-y", "cx-scrollbar", "cx-scrollbar-hidden", "cx-section-label", "cx-semibold", "cx-shadow-glow", "cx-shadow-glow-cyan", "cx-shadow-glow-green", "cx-shadow-inner", "cx-shadow-lg", "cx-shadow-md", "cx-shadow-ring", "cx-shadow-ring-lg", "cx-shadow-sm", "cx-shadow-xl", "cx-shake", "cx-shimmer", "cx-shimmer-scan", "cx-shine", "cx-sidebar", "cx-sidebar-browser", "cx-sidebar-overlay", "cx-sidebar-toggle", "cx-signal-bar", "cx-signal-bar--active", "cx-signal-bar--error", "cx-signal-bar--warning", "cx-signal-bars", "cx-skeleton", "cx-skeleton-card", "cx-skeleton-pulse", "cx-skeleton-wave", "cx-space-1", "cx-space-2", "cx-space-3", "cx-space-4", "cx-space-6", "cx-space-8", "cx-spin", "cx-spinner", "cx-spring-press", "cx-stagger", "cx-stagger-dramatic", "cx-stagger-fast", "cx-stagger-item", "cx-stagger-slow", "cx-stat", "cx-stat-card", "cx-stat-card-label", "cx-stat-card-value", "cx-stat-compact", "cx-stat-compact-icon", "cx-stat-compact-info", "cx-stat-compact-label", "cx-stat-compact-trend", "cx-stat-compact-value", "cx-state-error", "cx-state-loading", "cx-state-success", "cx-stream-cursor", "cx-stream-cursor--block", "cx-stream-progress", "cx-success", "cx-surface-0", "cx-surface-1", "cx-surface-2", "cx-surface-3", "cx-surface-4", "cx-sway", "cx-tab", "cx-tab-content", "cx-tab-content-enter", "cx-tab-strip", "cx-table-wrap", "cx-tabular", "cx-text-2xl", "cx-text-2xs", "cx-text-3xl", "cx-text-3xs", "cx-text-4xl", "cx-text-5xl", "cx-text-accent", "cx-text-balance", "cx-text-base", "cx-text-caption", "cx-text-danger", "cx-text-dim", "cx-text-dim-50", "cx-text-display", "cx-text-ghost", "cx-text-glow", "cx-text-glow-cyan", "cx-text-gradient", "cx-text-gradient-cyan", "cx-text-gradient-cyber", "cx-text-gradient-gold", "cx-text-gradient-green", "cx-text-gradient-purple", "cx-text-info", "cx-text-lg", "cx-text-mono", "cx-text-muted", "cx-text-pretty", "cx-text-primary", "cx-text-secondary", "cx-text-shimmer", "cx-text-sm", "cx-text-stroke", "cx-text-success", "cx-text-warning", "cx-text-xl", "cx-text-xs", "cx-textarea", "cx-theme-transition", "cx-thin", "cx-toast-container", "cx-toggle", "cx-tooltip", "cx-track-tight", "cx-transition", "cx-transition-bouncy", "cx-transition-fast", "cx-transition-slow", "cx-transition-spring", "cx-typewriter", "cx-typewriter-blink", "cx-warning", "cx-wiggle" ] }, "intents": { "primary action": { "class": "cx-btn cx-btn-primary cx-btn-md cx-shine", "component": "CxButton", "props": { "variant": "primary", "size": "md" } }, "secondary action": { "class": "cx-btn cx-btn-secondary cx-btn-md", "component": "CxButton", "props": { "variant": "secondary", "size": "md" } }, "destructive action": { "class": "cx-btn cx-btn-danger cx-btn-md", "component": "CxButton", "props": { "variant": "danger", "size": "md" } }, "cancel button": { "class": "cx-btn cx-btn-ghost cx-btn-sm", "component": "CxButton", "props": { "variant": "ghost", "size": "sm" } }, "confirmation button": { "class": "cx-btn cx-btn-success cx-btn-md", "component": "CxButton", "props": { "variant": "success", "size": "md" } }, "content container": { "class": "cx-card", "component": "CxCard" }, "glassmorphic container": { "class": "cx-card-frosted", "component": "CxCard", "props": { "variant": "frosted" } }, "metric tile": { "class": "cx-stat-card", "component": "CxCard", "props": { "variant": "stat" } }, "live status indicator": { "class": "cx-dot cx-dot-connected cx-dot-pulse", "component": null }, "static label": { "class": "cx-badge cx-badge-purple", "component": null }, "text input": { "class": "cx-input", "component": "CxInput" }, "multi-line input": { "class": "cx-input cx-textarea", "component": "CxTextarea" }, "gradient heading": { "class": "cx-text-gradient cx-text-gradient-purple", "component": null }, "loading skeleton": { "class": "cx-skeleton", "component": null }, "horizontal scroll list": { "class": "cx-tab-strip", "component": null }, "hero landing section": { "class": "cx-glass-ultra", "component": "CxHero" }, "app shell layout": { "class": null, "component": "CxAppShell" }, "sign-in form": { "class": null, "component": "CxLoginCard" }, "pricing comparison": { "class": null, "component": "CxPricingTable" }, "dashboard layout": { "class": null, "component": "CxDashboardLayout" }, "toast notifications": { "class": null, "component": "CxToastStack" } }, "mobileSafeguards": [ "Touch targets \u2265 44\u00d744px (WCAG 2.5.5)", "No horizontal scroll at 375px (overflow-x: hidden on html, body)", "iOS no-zoom on input focus (font-size: 16px on mobile)", "GPU compositor: translate3d(0,0,0) + backface-visibility on all animated elements", "iOS Safari preserve-3d for layer stability through state changes", "Tap-only devices skip hover transforms (@media (hover: none))", "prefers-reduced-motion honored (1ms durations)", "Glassmorphism blur reduced 12px \u2192 10px on mobile for fillrate" ], "versionTag": "v1.4.0", "motion": { "policy": "always_on_by_default", "osQueryHonored": false, "reason": "OS prefers-reduced-motion auto-fires in iOS Low Power Mode, killing UI motion when users have not asked for it.", "optInAttribute": "data-reduce-motion", "optInTarget": "html", "jsApi": { "set": "window.MADS.setReducedMotion(boolean)", "get": "window.MADS.getReducedMotion(): boolean", "storageKey": "cx-reduce-motion" }, "primitives": { "[data-stagger]": "auto-cascading children, no manual indexing. Variants: fast | normal | slow.", "[data-reveal]": "scroll-into-view fade-up via global IntersectionObserver", ".cx-page-enter": "200ms route/tab fade-up", ".cx-tap-feedback": "mobile tactile press (scale 0.97, 80ms)", ".cx-animate-*": "fade-in, fade-up, slide-up/-left/-right, scale-in, bounce-in, zoom-in", ".cx-stagger": "manual stagger with .cx-stagger-item children", ".cx-hover-*": "lift, scale, rise, tilt, glow, shine, holo (gated to (hover: hover) \u2014 no sticky :hover on touch)", ".cx-magnetic": "subtle hover lift + scale (gated to hover-capable devices)", ".cx-tilt-3d": "perspective-based 3D tilt on hover", ".cx-text-reveal": "character-by-character fade-up via stagger", ".cx-scroll-snap-x": "horizontal scroll-snap utility", ".cx-scroll-snap-y": "vertical scroll-snap utility", ".cx-spring-soft": "spring easing (overshoot 1.18)", ".cx-spring-bounce": "spring easing (overshoot 1.56)", ".cx-spring-elastic": "spring easing (extreme overshoot)", ".cx-ripple": "click ripple effect from cursor position", ".cx-shake-error": "horizontal shake for invalid form submit", ".cx-pulse-soft": "gentle attention pulse (1.04 scale)", ".cx-pulse-focus": "opt-in pulsing focus ring (use on hero CTAs)" }, "mobileBehaviour": { "hoverEffectsGated": "(hover: hover) only \u2014 touch devices skip hover transforms", "tapFeedback": "@media (hover: none) and (pointer: coarse) \u2014 :active scale 0.97", "durations": "<767px shaves entrance animations to 280ms, stagger steps to 32ms" } }, "endpoints": { "examples": "/examples", "llmManifest": "script#mads-examples-jsonld in /examples DOM (24 patterns)" }, "themes": { "count": 12, "list": [ { "id": "midnight", "name": "Midnight (default)", "palette": "purple/cyan" }, { "id": "light", "name": "Light", "palette": "high-contrast on white" }, { "id": "contrast", "name": "Contrast (WCAG AAA)", "palette": "B&W with neon accents" }, { "id": "amber", "name": "Amber", "palette": "warm orange/yellow" }, { "id": "emerald", "name": "Emerald", "palette": "green/teal" }, { "id": "crimson", "name": "Crimson", "palette": "red/coral" }, { "id": "rose", "name": "Rose", "palette": "pink/coral" }, { "id": "cyber", "name": "Cyber (NEW)", "palette": "cyan + magenta on black" }, { "id": "terra", "name": "Terra (NEW)", "palette": "warm earth tones" }, { "id": "aurora", "name": "Aurora (NEW)", "palette": "pink-violet-blue gradient" }, { "id": "mono", "name": "Mono (NEW)", "palette": "pure greyscale" }, { "id": "candy", "name": "Candy (NEW)", "palette": "pastel pink + cyan" } ], "howToApply": "" }, "examples": { "url": "/examples", "count": 40, "groups": [ "marketing", "auth", "app", "commerce", "feedback", "data", "forms" ], "jsonLdLocation": "script#mads-examples-jsonld in /examples DOM", "attributes": [ "data-mads-example", "data-mads-group", "data-mads-components", "data-mads-intent", "data-mads-imports", "data-mads-when-to-use", "data-mads-when-not-to-use" ] }, "bundle": { "mainGzip": "~150KB", "cssGzip": "~24KB", "lazyChunks": "Routes + categories code-split via React.lazy", "initialPaint": "Home + AppShell only (~80KB JS gzip)" }, "theme": { "module": { "import": "import { useTheme, THEMES, setTheme, ... } from '@chaozcode/mads'", "hooks": { "useTheme()": "[ThemeId, (id: ThemeId | \"auto\") => void]", "useReducedMotion()": "[boolean, (enabled: boolean) => void]", "useDirection()": "[\"ltr\"|\"rtl\", (dir) => void]", "useDensity()": "[\"compact\"|\"normal\"|\"comfortable\", (d) => void]", "useThemeOverrides()": "[overrides, setOverrides, clear]" }, "imperative": { "setTheme/getTheme": "theme id (12 themes)", "setReducedMotion/getReducedMotion": "opt-in motion toggle", "setDirection/getDirection": "ltr | rtl", "setDensity/getDensity": "compact | normal | comfortable", "setThemeOverrides/clearThemeOverrides": "runtime token customization", "exportThemeCss": "returns CSS string for upload to CDN" }, "registry": "THEMES (array of 12 ThemeMeta) \u00b7 THEME_IDS (string[])" } } }