@jonmatum/react-mfe-shell

import * as React$1 from 'react'; import React__default, { ComponentType, ReactNode } from 'react'; import * as react_jsx_runtime from 'react/jsx-runtime'; /** * Design Token System * Single source of truth for all design values * Supports theming, accessibility, and Tailwind CSS integration */ /** * Base color palette - semantic color definitions * All colors meet WCAG AA contrast requirements */ declare const baseColors: { readonly white: "#ffffff"; readonly black: "#000000"; readonly gray: { readonly 50: "#f9fafb"; readonly 100: "#f3f4f6"; readonly 200: "#e5e7eb"; readonly 300: "#d1d5db"; readonly 400: "#9ca3af"; readonly 500: "#6b7280"; readonly 600: "#4b5563"; readonly 700: "#374151"; readonly 800: "#1f2937"; readonly 900: "#111827"; readonly 950: "#030712"; }; readonly blue: { readonly 50: "#eff6ff"; readonly 100: "#dbeafe"; readonly 200: "#bfdbfe"; readonly 300: "#93c5fd"; readonly 400: "#60a5fa"; readonly 500: "#3b82f6"; readonly 600: "#2563eb"; readonly 700: "#1d4ed8"; readonly 800: "#1e40af"; readonly 900: "#1e3a8a"; readonly 950: "#172554"; }; readonly green: { readonly 50: "#f0fdf4"; readonly 100: "#dcfce7"; readonly 200: "#bbf7d0"; readonly 300: "#86efac"; readonly 400: "#4ade80"; readonly 500: "#22c55e"; readonly 600: "#16a34a"; readonly 700: "#15803d"; readonly 800: "#166534"; readonly 900: "#14532d"; readonly 950: "#052e16"; }; readonly yellow: { readonly 50: "#fefce8"; readonly 100: "#fef3c7"; readonly 200: "#fde68a"; readonly 300: "#fcd34d"; readonly 400: "#fbbf24"; readonly 500: "#f59e0b"; readonly 600: "#d97706"; readonly 700: "#b45309"; readonly 800: "#92400e"; readonly 900: "#78350f"; readonly 950: "#451a03"; }; readonly red: { readonly 50: "#fef2f2"; readonly 100: "#fee2e2"; readonly 200: "#fecaca"; readonly 300: "#fca5a5"; readonly 400: "#f87171"; readonly 500: "#ef4444"; readonly 600: "#dc2626"; readonly 700: "#b91c1c"; readonly 800: "#991b1b"; readonly 900: "#7f1d1d"; readonly 950: "#450a0a"; }; readonly cyan: { readonly 50: "#ecfeff"; readonly 100: "#cffafe"; readonly 200: "#a5f3fc"; readonly 300: "#67e8f9"; readonly 400: "#22d3ee"; readonly 500: "#06b6d4"; readonly 600: "#0891b2"; readonly 700: "#0e7490"; readonly 800: "#155e75"; readonly 900: "#164e63"; readonly 950: "#083344"; }; }; /** * Semantic color tokens - mapped to base colors * These provide meaning and context to colors */ declare const semanticColors: { readonly primary: { readonly 50: "#eff6ff"; readonly 100: "#dbeafe"; readonly 200: "#bfdbfe"; readonly 300: "#93c5fd"; readonly 400: "#60a5fa"; readonly 500: "#3b82f6"; readonly 600: "#2563eb"; readonly 700: "#1d4ed8"; readonly 800: "#1e40af"; readonly 900: "#1e3a8a"; readonly 950: "#172554"; }; readonly secondary: { readonly 50: "#f9fafb"; readonly 100: "#f3f4f6"; readonly 200: "#e5e7eb"; readonly 300: "#d1d5db"; readonly 400: "#9ca3af"; readonly 500: "#6b7280"; readonly 600: "#4b5563"; readonly 700: "#374151"; readonly 800: "#1f2937"; readonly 900: "#111827"; readonly 950: "#030712"; }; readonly success: { readonly 50: "#f0fdf4"; readonly 100: "#dcfce7"; readonly 200: "#bbf7d0"; readonly 300: "#86efac"; readonly 400: "#4ade80"; readonly 500: "#22c55e"; readonly 600: "#16a34a"; readonly 700: "#15803d"; readonly 800: "#166534"; readonly 900: "#14532d"; readonly 950: "#052e16"; }; readonly warning: { readonly 50: "#fefce8"; readonly 100: "#fef3c7"; readonly 200: "#fde68a"; readonly 300: "#fcd34d"; readonly 400: "#fbbf24"; readonly 500: "#f59e0b"; readonly 600: "#d97706"; readonly 700: "#b45309"; readonly 800: "#92400e"; readonly 900: "#78350f"; readonly 950: "#451a03"; }; readonly error: { readonly 50: "#fef2f2"; readonly 100: "#fee2e2"; readonly 200: "#fecaca"; readonly 300: "#fca5a5"; readonly 400: "#f87171"; readonly 500: "#ef4444"; readonly 600: "#dc2626"; readonly 700: "#b91c1c"; readonly 800: "#991b1b"; readonly 900: "#7f1d1d"; readonly 950: "#450a0a"; }; readonly info: { readonly 50: "#ecfeff"; readonly 100: "#cffafe"; readonly 200: "#a5f3fc"; readonly 300: "#67e8f9"; readonly 400: "#22d3ee"; readonly 500: "#06b6d4"; readonly 600: "#0891b2"; readonly 700: "#0e7490"; readonly 800: "#155e75"; readonly 900: "#164e63"; readonly 950: "#083344"; }; }; /** * Theme-aware color system * Defines colors for light and dark themes */ declare const themeColors: { readonly light: { readonly background: { readonly primary: "#ffffff"; readonly secondary: "#f9fafb"; readonly tertiary: "#f3f4f6"; }; readonly surface: { readonly primary: "#ffffff"; readonly secondary: "#f9fafb"; readonly tertiary: "#f3f4f6"; readonly elevated: "#ffffff"; }; readonly text: { readonly primary: "#111827"; readonly secondary: "#4b5563"; readonly tertiary: "#6b7280"; readonly inverse: "#ffffff"; readonly disabled: "#9ca3af"; }; readonly border: { readonly primary: "#e5e7eb"; readonly secondary: "#d1d5db"; readonly tertiary: "#9ca3af"; readonly focus: "#3b82f6"; }; readonly interactive: { readonly primary: "#2563eb"; readonly 'primary-hover': "#1d4ed8"; readonly 'primary-active': "#1e40af"; readonly secondary: "#f3f4f6"; readonly 'secondary-hover': "#e5e7eb"; readonly 'secondary-active': "#d1d5db"; }; readonly status: { readonly success: "#16a34a"; readonly warning: "#d97706"; readonly error: "#dc2626"; readonly info: "#0891b2"; }; }; readonly dark: { readonly background: { readonly primary: "#111827"; readonly secondary: "#1f2937"; readonly tertiary: "#374151"; }; readonly surface: { readonly primary: "#1f2937"; readonly secondary: "#374151"; readonly tertiary: "#4b5563"; readonly elevated: "#374151"; }; readonly text: { readonly primary: "#f3f4f6"; readonly secondary: "#d1d5db"; readonly tertiary: "#9ca3af"; readonly inverse: "#111827"; readonly disabled: "#6b7280"; }; readonly border: { readonly primary: "#374151"; readonly secondary: "#4b5563"; readonly tertiary: "#6b7280"; readonly focus: "#60a5fa"; }; readonly interactive: { readonly primary: "#3b82f6"; readonly 'primary-hover': "#60a5fa"; readonly 'primary-active': "#93c5fd"; readonly secondary: "#374151"; readonly 'secondary-hover': "#4b5563"; readonly 'secondary-active': "#6b7280"; }; readonly status: { readonly success: "#22c55e"; readonly warning: "#f59e0b"; readonly error: "#ef4444"; readonly info: "#06b6d4"; }; }; }; /** * Font family tokens */ declare const fontFamily: { readonly sans: readonly ["Inter", "-apple-system", "BlinkMacSystemFont", "\"Segoe UI\"", "Roboto", "\"Helvetica Neue\"", "Arial", "sans-serif"]; readonly mono: readonly ["\"JetBrains Mono\"", "Menlo", "Monaco", "Consolas", "\"Liberation Mono\"", "\"Courier New\"", "monospace"]; }; /** * Font size tokens with line heights * Following a modular scale for consistency */ declare const fontSize: { readonly xs: readonly ["0.75rem", { readonly lineHeight: "1rem"; }]; readonly sm: readonly ["0.875rem", { readonly lineHeight: "1.25rem"; }]; readonly base: readonly ["1rem", { readonly lineHeight: "1.5rem"; }]; readonly lg: readonly ["1.125rem", { readonly lineHeight: "1.75rem"; }]; readonly xl: readonly ["1.25rem", { readonly lineHeight: "1.75rem"; }]; readonly '2xl': readonly ["1.5rem", { readonly lineHeight: "2rem"; }]; readonly '3xl': readonly ["1.875rem", { readonly lineHeight: "2.25rem"; }]; readonly '4xl': readonly ["2.25rem", { readonly lineHeight: "2.5rem"; }]; readonly '5xl': readonly ["3rem", { readonly lineHeight: "1"; }]; readonly '6xl': readonly ["3.75rem", { readonly lineHeight: "1"; }]; readonly '7xl': readonly ["4.5rem", { readonly lineHeight: "1"; }]; readonly '8xl': readonly ["6rem", { readonly lineHeight: "1"; }]; readonly '9xl': readonly ["8rem", { readonly lineHeight: "1"; }]; }; /** * Font weight tokens */ declare const fontWeight: { readonly thin: "100"; readonly extralight: "200"; readonly light: "300"; readonly normal: "400"; readonly medium: "500"; readonly semibold: "600"; readonly bold: "700"; readonly extrabold: "800"; readonly black: "900"; }; /** * Letter spacing tokens */ declare const letterSpacing: { readonly tighter: "-0.05em"; readonly tight: "-0.025em"; readonly normal: "0em"; readonly wide: "0.025em"; readonly wider: "0.05em"; readonly widest: "0.1em"; }; /** * Spacing scale based on 0.25rem (4px) increments * Provides consistent spacing throughout the design system */ declare const spacing: { readonly 0: "0px"; readonly px: "1px"; readonly 0.5: "0.125rem"; readonly 1: "0.25rem"; readonly 1.5: "0.375rem"; readonly 2: "0.5rem"; readonly 2.5: "0.625rem"; readonly 3: "0.75rem"; readonly 3.5: "0.875rem"; readonly 4: "1rem"; readonly 5: "1.25rem"; readonly 6: "1.5rem"; readonly 7: "1.75rem"; readonly 8: "2rem"; readonly 9: "2.25rem"; readonly 10: "2.5rem"; readonly 11: "2.75rem"; readonly 12: "3rem"; readonly 14: "3.5rem"; readonly 16: "4rem"; readonly 20: "5rem"; readonly 24: "6rem"; readonly 28: "7rem"; readonly 32: "8rem"; readonly 36: "9rem"; readonly 40: "10rem"; readonly 44: "11rem"; readonly 48: "12rem"; readonly 52: "13rem"; readonly 56: "14rem"; readonly 60: "15rem"; readonly 64: "16rem"; readonly 72: "18rem"; readonly 80: "20rem"; readonly 96: "24rem"; }; /** * Box shadow tokens for elevation * Provides depth and hierarchy to components */ declare const boxShadow: { readonly none: "none"; readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)"; readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"; readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"; readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"; readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"; readonly '2xl': "0 25px 50px -12px rgb(0 0 0 / 0.25)"; readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"; }; /** * Drop shadow tokens for filters */ declare const dropShadow: { readonly none: "none"; readonly sm: "0 1px 1px rgb(0 0 0 / 0.05)"; readonly base: "0 1px 2px rgb(0 0 0 / 0.1)"; readonly md: "0 4px 3px rgb(0 0 0 / 0.07)"; readonly lg: "0 10px 8px rgb(0 0 0 / 0.04)"; readonly xl: "0 20px 13px rgb(0 0 0 / 0.03)"; readonly '2xl': "0 25px 25px rgb(0 0 0 / 0.15)"; }; /** * Border radius tokens for consistent rounded corners */ declare const borderRadius: { readonly none: "0px"; readonly sm: "0.125rem"; readonly base: "0.25rem"; readonly md: "0.375rem"; readonly lg: "0.5rem"; readonly xl: "0.75rem"; readonly '2xl': "1rem"; readonly '3xl': "1.5rem"; readonly full: "9999px"; }; /** * Responsive breakpoints for mobile-first design */ declare const breakpoints: { readonly xs: "475px"; readonly sm: "640px"; readonly md: "768px"; readonly lg: "1024px"; readonly xl: "1280px"; readonly '2xl': "1536px"; }; /** * Animation duration tokens */ declare const animationDuration: { readonly 75: "75ms"; readonly 100: "100ms"; readonly 150: "150ms"; readonly 200: "200ms"; readonly 300: "300ms"; readonly 500: "500ms"; readonly 700: "700ms"; readonly 1000: "1000ms"; }; /** * Animation timing function tokens */ declare const animationTimingFunction: { readonly linear: "linear"; readonly in: "cubic-bezier(0.4, 0, 1, 1)"; readonly out: "cubic-bezier(0, 0, 0.2, 1)"; readonly 'in-out': "cubic-bezier(0.4, 0, 0.2, 1)"; }; /** * Z-index tokens for layering */ declare const zIndex: { readonly auto: "auto"; readonly 0: "0"; readonly 10: "10"; readonly 20: "20"; readonly 30: "30"; readonly 40: "40"; readonly 50: "50"; readonly dropdown: "1000"; readonly sticky: "1020"; readonly fixed: "1030"; readonly modal: "1040"; readonly popover: "1050"; readonly tooltip: "1060"; readonly toast: "1070"; }; /** * Component size tokens */ declare const componentSizes: { readonly xs: { readonly height: "1.5rem"; readonly padding: "0.25rem 0.5rem"; readonly fontSize: "0.75rem"; }; readonly sm: { readonly height: "2rem"; readonly padding: "0.375rem 0.75rem"; readonly fontSize: "0.875rem"; }; readonly md: { readonly height: "2.5rem"; readonly padding: "0.5rem 1rem"; readonly fontSize: "1rem"; }; readonly lg: { readonly height: "3rem"; readonly padding: "0.625rem 1.5rem"; readonly fontSize: "1.125rem"; }; readonly xl: { readonly height: "3.5rem"; readonly padding: "0.75rem 2rem"; readonly fontSize: "1.25rem"; }; }; /** * Complete design token system */ declare const tokens: { readonly colors: { readonly base: { readonly white: "#ffffff"; readonly black: "#000000"; readonly gray: { readonly 50: "#f9fafb"; readonly 100: "#f3f4f6"; readonly 200: "#e5e7eb"; readonly 300: "#d1d5db"; readonly 400: "#9ca3af"; readonly 500: "#6b7280"; readonly 600: "#4b5563"; readonly 700: "#374151"; readonly 800: "#1f2937"; readonly 900: "#111827"; readonly 950: "#030712"; }; readonly blue: { readonly 50: "#eff6ff"; readonly 100: "#dbeafe"; readonly 200: "#bfdbfe"; readonly 300: "#93c5fd"; readonly 400: "#60a5fa"; readonly 500: "#3b82f6"; readonly 600: "#2563eb"; readonly 700: "#1d4ed8"; readonly 800: "#1e40af"; readonly 900: "#1e3a8a"; readonly 950: "#172554"; }; readonly green: { readonly 50: "#f0fdf4"; readonly 100: "#dcfce7"; readonly 200: "#bbf7d0"; readonly 300: "#86efac"; readonly 400: "#4ade80"; readonly 500: "#22c55e"; readonly 600: "#16a34a"; readonly 700: "#15803d"; readonly 800: "#166534"; readonly 900: "#14532d"; readonly 950: "#052e16"; }; readonly yellow: { readonly 50: "#fefce8"; readonly 100: "#fef3c7"; readonly 200: "#fde68a"; readonly 300: "#fcd34d"; readonly 400: "#fbbf24"; readonly 500: "#f59e0b"; readonly 600: "#d97706"; readonly 700: "#b45309"; readonly 800: "#92400e"; readonly 900: "#78350f"; readonly 950: "#451a03"; }; readonly red: { readonly 50: "#fef2f2"; readonly 100: "#fee2e2"; readonly 200: "#fecaca"; readonly 300: "#fca5a5"; readonly 400: "#f87171"; readonly 500: "#ef4444"; readonly 600: "#dc2626"; readonly 700: "#b91c1c"; readonly 800: "#991b1b"; readonly 900: "#7f1d1d"; readonly 950: "#450a0a"; }; readonly cyan: { readonly 50: "#ecfeff"; readonly 100: "#cffafe"; readonly 200: "#a5f3fc"; readonly 300: "#67e8f9"; readonly 400: "#22d3ee"; readonly 500: "#06b6d4"; readonly 600: "#0891b2"; readonly 700: "#0e7490"; readonly 800: "#155e75"; readonly 900: "#164e63"; readonly 950: "#083344"; }; }; readonly semantic: { readonly primary: { readonly 50: "#eff6ff"; readonly 100: "#dbeafe"; readonly 200: "#bfdbfe"; readonly 300: "#93c5fd"; readonly 400: "#60a5fa"; readonly 500: "#3b82f6"; readonly 600: "#2563eb"; readonly 700: "#1d4ed8"; readonly 800: "#1e40af"; readonly 900: "#1e3a8a"; readonly 950: "#172554"; }; readonly secondary: { readonly 50: "#f9fafb"; readonly 100: "#f3f4f6"; readonly 200: "#e5e7eb"; readonly 300: "#d1d5db"; readonly 400: "#9ca3af"; readonly 500: "#6b7280"; readonly 600: "#4b5563"; readonly 700: "#374151"; readonly 800: "#1f2937"; readonly 900: "#111827"; readonly 950: "#030712"; }; readonly success: { readonly 50: "#f0fdf4"; readonly 100: "#dcfce7"; readonly 200: "#bbf7d0"; readonly 300: "#86efac"; readonly 400: "#4ade80"; readonly 500: "#22c55e"; readonly 600: "#16a34a"; readonly 700: "#15803d"; readonly 800: "#166534"; readonly 900: "#14532d"; readonly 950: "#052e16"; }; readonly warning: { readonly 50: "#fefce8"; readonly 100: "#fef3c7"; readonly 200: "#fde68a"; readonly 300: "#fcd34d"; readonly 400: "#fbbf24"; readonly 500: "#f59e0b"; readonly 600: "#d97706"; readonly 700: "#b45309"; readonly 800: "#92400e"; readonly 900: "#78350f"; readonly 950: "#451a03"; }; readonly error: { readonly 50: "#fef2f2"; readonly 100: "#fee2e2"; readonly 200: "#fecaca"; readonly 300: "#fca5a5"; readonly 400: "#f87171"; readonly 500: "#ef4444"; readonly 600: "#dc2626"; readonly 700: "#b91c1c"; readonly 800: "#991b1b"; readonly 900: "#7f1d1d"; readonly 950: "#450a0a"; }; readonly info: { readonly 50: "#ecfeff"; readonly 100: "#cffafe"; readonly 200: "#a5f3fc"; readonly 300: "#67e8f9"; readonly 400: "#22d3ee"; readonly 500: "#06b6d4"; readonly 600: "#0891b2"; readonly 700: "#0e7490"; readonly 800: "#155e75"; readonly 900: "#164e63"; readonly 950: "#083344"; }; }; readonly theme: { readonly light: { readonly background: { readonly primary: "#ffffff"; readonly secondary: "#f9fafb"; readonly tertiary: "#f3f4f6"; }; readonly surface: { readonly primary: "#ffffff"; readonly secondary: "#f9fafb"; readonly tertiary: "#f3f4f6"; readonly elevated: "#ffffff"; }; readonly text: { readonly primary: "#111827"; readonly secondary: "#4b5563"; readonly tertiary: "#6b7280"; readonly inverse: "#ffffff"; readonly disabled: "#9ca3af"; }; readonly border: { readonly primary: "#e5e7eb"; readonly secondary: "#d1d5db"; readonly tertiary: "#9ca3af"; readonly focus: "#3b82f6"; }; readonly interactive: { readonly primary: "#2563eb"; readonly 'primary-hover': "#1d4ed8"; readonly 'primary-active': "#1e40af"; readonly secondary: "#f3f4f6"; readonly 'secondary-hover': "#e5e7eb"; readonly 'secondary-active': "#d1d5db"; }; readonly status: { readonly success: "#16a34a"; readonly warning: "#d97706"; readonly error: "#dc2626"; readonly info: "#0891b2"; }; }; readonly dark: { readonly background: { readonly primary: "#111827"; readonly secondary: "#1f2937"; readonly tertiary: "#374151"; }; readonly surface: { readonly primary: "#1f2937"; readonly secondary: "#374151"; readonly tertiary: "#4b5563"; readonly elevated: "#374151"; }; readonly text: { readonly primary: "#f3f4f6"; readonly secondary: "#d1d5db"; readonly tertiary: "#9ca3af"; readonly inverse: "#111827"; readonly disabled: "#6b7280"; }; readonly border: { readonly primary: "#374151"; readonly secondary: "#4b5563"; readonly tertiary: "#6b7280"; readonly focus: "#60a5fa"; }; readonly interactive: { readonly primary: "#3b82f6"; readonly 'primary-hover': "#60a5fa"; readonly 'primary-active': "#93c5fd"; readonly secondary: "#374151"; readonly 'secondary-hover': "#4b5563"; readonly 'secondary-active': "#6b7280"; }; readonly status: { readonly success: "#22c55e"; readonly warning: "#f59e0b"; readonly error: "#ef4444"; readonly info: "#06b6d4"; }; }; }; }; readonly typography: { readonly fontFamily: { readonly sans: readonly ["Inter", "-apple-system", "BlinkMacSystemFont", "\"Segoe UI\"", "Roboto", "\"Helvetica Neue\"", "Arial", "sans-serif"]; readonly mono: readonly ["\"JetBrains Mono\"", "Menlo", "Monaco", "Consolas", "\"Liberation Mono\"", "\"Courier New\"", "monospace"]; }; readonly fontSize: { readonly xs: readonly ["0.75rem", { readonly lineHeight: "1rem"; }]; readonly sm: readonly ["0.875rem", { readonly lineHeight: "1.25rem"; }]; readonly base: readonly ["1rem", { readonly lineHeight: "1.5rem"; }]; readonly lg: readonly ["1.125rem", { readonly lineHeight: "1.75rem"; }]; readonly xl: readonly ["1.25rem", { readonly lineHeight: "1.75rem"; }]; readonly '2xl': readonly ["1.5rem", { readonly lineHeight: "2rem"; }]; readonly '3xl': readonly ["1.875rem", { readonly lineHeight: "2.25rem"; }]; readonly '4xl': readonly ["2.25rem", { readonly lineHeight: "2.5rem"; }]; readonly '5xl': readonly ["3rem", { readonly lineHeight: "1"; }]; readonly '6xl': readonly ["3.75rem", { readonly lineHeight: "1"; }]; readonly '7xl': readonly ["4.5rem", { readonly lineHeight: "1"; }]; readonly '8xl': readonly ["6rem", { readonly lineHeight: "1"; }]; readonly '9xl': readonly ["8rem", { readonly lineHeight: "1"; }]; }; readonly fontWeight: { readonly thin: "100"; readonly extralight: "200"; readonly light: "300"; readonly normal: "400"; readonly medium: "500"; readonly semibold: "600"; readonly bold: "700"; readonly extrabold: "800"; readonly black: "900"; }; readonly letterSpacing: { readonly tighter: "-0.05em"; readonly tight: "-0.025em"; readonly normal: "0em"; readonly wide: "0.025em"; readonly wider: "0.05em"; readonly widest: "0.1em"; }; }; readonly spacing: { readonly 0: "0px"; readonly px: "1px"; readonly 0.5: "0.125rem"; readonly 1: "0.25rem"; readonly 1.5: "0.375rem"; readonly 2: "0.5rem"; readonly 2.5: "0.625rem"; readonly 3: "0.75rem"; readonly 3.5: "0.875rem"; readonly 4: "1rem"; readonly 5: "1.25rem"; readonly 6: "1.5rem"; readonly 7: "1.75rem"; readonly 8: "2rem"; readonly 9: "2.25rem"; readonly 10: "2.5rem"; readonly 11: "2.75rem"; readonly 12: "3rem"; readonly 14: "3.5rem"; readonly 16: "4rem"; readonly 20: "5rem"; readonly 24: "6rem"; readonly 28: "7rem"; readonly 32: "8rem"; readonly 36: "9rem"; readonly 40: "10rem"; readonly 44: "11rem"; readonly 48: "12rem"; readonly 52: "13rem"; readonly 56: "14rem"; readonly 60: "15rem"; readonly 64: "16rem"; readonly 72: "18rem"; readonly 80: "20rem"; readonly 96: "24rem"; }; readonly shadows: { readonly box: { readonly none: "none"; readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)"; readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"; readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"; readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"; readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"; readonly '2xl': "0 25px 50px -12px rgb(0 0 0 / 0.25)"; readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"; }; readonly drop: { readonly none: "none"; readonly sm: "0 1px 1px rgb(0 0 0 / 0.05)"; readonly base: "0 1px 2px rgb(0 0 0 / 0.1)"; readonly md: "0 4px 3px rgb(0 0 0 / 0.07)"; readonly lg: "0 10px 8px rgb(0 0 0 / 0.04)"; readonly xl: "0 20px 13px rgb(0 0 0 / 0.03)"; readonly '2xl': "0 25px 25px rgb(0 0 0 / 0.15)"; }; }; readonly borderRadius: { readonly none: "0px"; readonly sm: "0.125rem"; readonly base: "0.25rem"; readonly md: "0.375rem"; readonly lg: "0.5rem"; readonly xl: "0.75rem"; readonly '2xl': "1rem"; readonly '3xl': "1.5rem"; readonly full: "9999px"; }; readonly breakpoints: { readonly xs: "475px"; readonly sm: "640px"; readonly md: "768px"; readonly lg: "1024px"; readonly xl: "1280px"; readonly '2xl': "1536px"; }; readonly animation: { readonly duration: { readonly 75: "75ms"; readonly 100: "100ms"; readonly 150: "150ms"; readonly 200: "200ms"; readonly 300: "300ms"; readonly 500: "500ms"; readonly 700: "700ms"; readonly 1000: "1000ms"; }; readonly timingFunction: { readonly linear: "linear"; readonly in: "cubic-bezier(0.4, 0, 1, 1)"; readonly out: "cubic-bezier(0, 0, 0.2, 1)"; readonly 'in-out': "cubic-bezier(0.4, 0, 0.2, 1)"; }; }; readonly zIndex: { readonly auto: "auto"; readonly 0: "0"; readonly 10: "10"; readonly 20: "20"; readonly 30: "30"; readonly 40: "40"; readonly 50: "50"; readonly dropdown: "1000"; readonly sticky: "1020"; readonly fixed: "1030"; readonly modal: "1040"; readonly popover: "1050"; readonly tooltip: "1060"; readonly toast: "1070"; }; readonly components: { readonly sizes: { readonly xs: { readonly height: "1.5rem"; readonly padding: "0.25rem 0.5rem"; readonly fontSize: "0.75rem"; }; readonly sm: { readonly height: "2rem"; readonly padding: "0.375rem 0.75rem"; readonly fontSize: "0.875rem"; }; readonly md: { readonly height: "2.5rem"; readonly padding: "0.5rem 1rem"; readonly fontSize: "1rem"; }; readonly lg: { readonly height: "3rem"; readonly padding: "0.625rem 1.5rem"; readonly fontSize: "1.125rem"; }; readonly xl: { readonly height: "3.5rem"; readonly padding: "0.75rem 2rem"; readonly fontSize: "1.25rem"; }; }; }; }; declare const colors: { readonly white: "#ffffff"; readonly black: "#000000"; readonly gray: { readonly 50: "#f9fafb"; readonly 100: "#f3f4f6"; readonly 200: "#e5e7eb"; readonly 300: "#d1d5db"; readonly 400: "#9ca3af"; readonly 500: "#6b7280"; readonly 600: "#4b5563"; readonly 700: "#374151"; readonly 800: "#1f2937"; readonly 900: "#111827"; readonly 950: "#030712"; }; readonly blue: { readonly 50: "#eff6ff"; readonly 100: "#dbeafe"; readonly 200: "#bfdbfe"; readonly 300: "#93c5fd"; readonly 400: "#60a5fa"; readonly 500: "#3b82f6"; readonly 600: "#2563eb"; readonly 700: "#1d4ed8"; readonly 800: "#1e40af"; readonly 900: "#1e3a8a"; readonly 950: "#172554"; }; readonly green: { readonly 50: "#f0fdf4"; readonly 100: "#dcfce7"; readonly 200: "#bbf7d0"; readonly 300: "#86efac"; readonly 400: "#4ade80"; readonly 500: "#22c55e"; readonly 600: "#16a34a"; readonly 700: "#15803d"; readonly 800: "#166534"; readonly 900: "#14532d"; readonly 950: "#052e16"; }; readonly yellow: { readonly 50: "#fefce8"; readonly 100: "#fef3c7"; readonly 200: "#fde68a"; readonly 300: "#fcd34d"; readonly 400: "#fbbf24"; readonly 500: "#f59e0b"; readonly 600: "#d97706"; readonly 700: "#b45309"; readonly 800: "#92400e"; readonly 900: "#78350f"; readonly 950: "#451a03"; }; readonly red: { readonly 50: "#fef2f2"; readonly 100: "#fee2e2"; readonly 200: "#fecaca"; readonly 300: "#fca5a5"; readonly 400: "#f87171"; readonly 500: "#ef4444"; readonly 600: "#dc2626"; readonly 700: "#b91c1c"; readonly 800: "#991b1b"; readonly 900: "#7f1d1d"; readonly 950: "#450a0a"; }; readonly cyan: { readonly 50: "#ecfeff"; readonly 100: "#cffafe"; readonly 200: "#a5f3fc"; readonly 300: "#67e8f9"; readonly 400: "#22d3ee"; readonly 500: "#06b6d4"; readonly 600: "#0891b2"; readonly 700: "#0e7490"; readonly 800: "#155e75"; readonly 900: "#164e63"; readonly 950: "#083344"; }; }; declare const typography: { fontFamily: { readonly sans: readonly ["Inter", "-apple-system", "BlinkMacSystemFont", "\"Segoe UI\"", "Roboto", "\"Helvetica Neue\"", "Arial", "sans-serif"]; readonly mono: readonly ["\"JetBrains Mono\"", "Menlo", "Monaco", "Consolas", "\"Liberation Mono\"", "\"Courier New\"", "monospace"]; }; fontSize: { readonly xs: readonly ["0.75rem", { readonly lineHeight: "1rem"; }]; readonly sm: readonly ["0.875rem", { readonly lineHeight: "1.25rem"; }]; readonly base: readonly ["1rem", { readonly lineHeight: "1.5rem"; }]; readonly lg: readonly ["1.125rem", { readonly lineHeight: "1.75rem"; }]; readonly xl: readonly ["1.25rem", { readonly lineHeight: "1.75rem"; }]; readonly '2xl': readonly ["1.5rem", { readonly lineHeight: "2rem"; }]; readonly '3xl': readonly ["1.875rem", { readonly lineHeight: "2.25rem"; }]; readonly '4xl': readonly ["2.25rem", { readonly lineHeight: "2.5rem"; }]; readonly '5xl': readonly ["3rem", { readonly lineHeight: "1"; }]; readonly '6xl': readonly ["3.75rem", { readonly lineHeight: "1"; }]; readonly '7xl': readonly ["4.5rem", { readonly lineHeight: "1"; }]; readonly '8xl': readonly ["6rem", { readonly lineHeight: "1"; }]; readonly '9xl': readonly ["8rem", { readonly lineHeight: "1"; }]; }; fontWeight: { readonly thin: "100"; readonly extralight: "200"; readonly light: "300"; readonly normal: "400"; readonly medium: "500"; readonly semibold: "600"; readonly bold: "700"; readonly extrabold: "800"; readonly black: "900"; }; letterSpacing: { readonly tighter: "-0.05em"; readonly tight: "-0.025em"; readonly normal: "0em"; readonly wide: "0.025em"; readonly wider: "0.05em"; readonly widest: "0.1em"; }; }; declare const shadows: { readonly none: "none"; readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)"; readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)"; readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)"; readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)"; readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)"; readonly '2xl': "0 25px 50px -12px rgb(0 0 0 / 0.25)"; readonly inner: "inset 0 2px 4px 0 rgb(0 0 0 / 0.05)"; }; declare const transitions: { readonly linear: "linear"; readonly in: "cubic-bezier(0.4, 0, 1, 1)"; readonly out: "cubic-bezier(0, 0, 0.2, 1)"; readonly 'in-out': "cubic-bezier(0.4, 0, 0.2, 1)"; }; /** * TypeScript interfaces for design tokens * Provides type safety and IntelliSense for all design tokens */ /** * Color scale interface for consistent color definitions */ interface ColorScale { 50: string; 100: string; 200: string; 300: string; 400: string; 500: string; 600: string; 700: string; 800: string; 900: string; 950: string; } /** * Base colors interface */ interface BaseColors { white: string; black: string; gray: ColorScale; blue: ColorScale; green: ColorScale; yellow: ColorScale; red: ColorScale; cyan: ColorScale; } /** * Semantic colors interface */ interface SemanticColors { primary: ColorScale; secondary: ColorScale; success: ColorScale; warning: ColorScale; error: ColorScale; info: ColorScale; } /** * Theme color categories */ interface ThemeColorCategory { primary: string; secondary: string; tertiary: string; elevated?: string; } /** * Theme text colors */ interface ThemeTextColors { primary: string; secondary: string; tertiary: string; inverse: string; disabled: string; } /** * Theme border colors */ interface ThemeBorderColors { primary: string; secondary: string; tertiary: string; focus: string; } /** * Theme interactive colors */ interface ThemeInteractiveColors { primary: string; 'primary-hover': string; 'primary-active': string; secondary: string; 'secondary-hover': string; 'secondary-active': string; } /** * Theme status colors */ interface ThemeStatusColors { success: string; warning: string; error: string; info: string; } /** * Complete theme colors interface */ interface ThemeColors { background: ThemeColorCategory; surface: ThemeColorCategory; text: ThemeTextColors; border: ThemeBorderColors; interactive: ThemeInteractiveColors; status: ThemeStatusColors; } /** * Theme-aware color system */ interface ThemeColorSystem { light: ThemeColors; dark: ThemeColors; } /** * Font family interface */ interface FontFamily { sans: string[]; mono: string[]; } /** * Font size with line height */ type FontSizeValue = [string, { lineHeight: string; }]; /** * Font size scale interface */ interface FontSize { xs: FontSizeValue; sm: FontSizeValue; base: FontSizeValue; lg: FontSizeValue; xl: FontSizeValue; '2xl': FontSizeValue; '3xl': FontSizeValue; '4xl': FontSizeValue; '5xl': FontSizeValue; '6xl': FontSizeValue; '7xl': FontSizeValue; '8xl': FontSizeValue; '9xl': FontSizeValue; } /** * Font weight interface */ interface FontWeight { thin: string; extralight: string; light: string; normal: string; medium: string; semibold: string; bold: string; extrabold: string; black: string; } /** * Letter spacing interface */ interface LetterSpacing { tighter: string; tight: string; normal: string; wide: string; wider: string; widest: string; } /** * Typography tokens interface */ interface Typography { fontFamily: FontFamily; fontSize: FontSize; fontWeight: FontWeight; letterSpacing: LetterSpacing; } /** * Spacing scale interface */ interface Spacing { 0: string; px: string; 0.5: string; 1: string; 1.5: string; 2: string; 2.5: string; 3: string; 3.5: string; 4: string; 5: string; 6: string; 7: string; 8: string; 9: string; 10: string; 11: string; 12: string; 14: string; 16: string; 20: string; 24: string; 28: string; 32: string; 36: string; 40: string; 44: string; 48: string; 52: string; 56: string; 60: string; 64: string; 72: string; 80: string; 96: string; } /** * Box shadow interface */ interface BoxShadow { none: string; sm: string; base: string; md: string; lg: string; xl: string; '2xl': string; inner: string; } /** * Drop shadow interface */ interface DropShadow { none: string; sm: string; base: string; md: string; lg: string; xl: string; '2xl': string; } /** * Shadow tokens interface */ interface Shadows { box: BoxShadow; drop: DropShadow; } /** * Border radius interface */ interface BorderRadius { none: string; sm: string; base: string; md: string; lg: string; xl: string; '2xl': string; '3xl': string; full: string; } /** * Breakpoints interface */ interface Breakpoints { xs: string; sm: string; md: string; lg: string; xl: string; '2xl': string; } /** * Animation duration interface */ interface AnimationDuration { 75: string; 100: string; 150: string; 200: string; 300: string; 500: string; 700: string; 1000: string; } /** * Animation timing function interface */ interface AnimationTimingFunction { linear: string; in: string; out: string; 'in-out': string; } /** * Animation tokens interface */ interface Animation { duration: AnimationDuration; timingFunction: AnimationTimingFunction; } /** * Z-index interface */ interface ZIndex { auto: string; 0: string; 10: string; 20: string; 30: string; 40: string; 50: string; dropdown: string; sticky: string; fixed: string; modal: string; popover: string; tooltip: string; toast: string; } /** * Component size configuration */ interface ComponentSize { height: string; padding: string; fontSize: string; } /** * Component sizes interface */ interface ComponentSizes { xs: ComponentSize; sm: ComponentSize; md: ComponentSize; lg: ComponentSize; xl: ComponentSize; } /** * Component tokens interface */ interface Components { sizes: ComponentSizes; } /** * Color tokens interface */ interface ColorTokens { base: BaseColors; semantic: SemanticColors; theme: ThemeColorSystem; } /** * Complete design token system interface */ interface DesignTokens { colors: ColorTokens; typography: Typography; spacing: Spacing; shadows: Shadows; borderRadius: BorderRadius; breakpoints: Breakpoints; animation: Animation; zIndex: ZIndex; components: Components; } /** * Available theme modes */ type ThemeMode = 'light' | 'dark' | 'system'; /** * Theme configuration */ interface ThemeConfig { mode: ThemeMode; colors: ThemeColors; } /** * Extract keys from token objects for type safety */ type ColorScaleKey = keyof ColorScale; type SpacingKey = keyof Spacing; type FontSizeKey = keyof FontSize; type FontWeightKey = keyof FontWeight; type BorderRadiusKey = keyof BorderRadius; type BoxShadowKey = keyof BoxShadow; type BreakpointKey = keyof Breakpoints; type ComponentSizeKey = keyof ComponentSizes; /** * Token value types for runtime validation */ type TokenValue = string | number | string[] | Record<string, unknown>; /** * Token path for nested access */ type TokenPath = string[]; /** * Token resolver function type */ type TokenResolver<T = TokenValue> = (path: TokenPath) => T | undefined; /** * Theme Management Utilities * Provides comprehensive theme switching and management functionality */ /** * Available theme modes */ declare const THEME_MODES: ThemeMode[]; /** * Storage key for theme preference */ declare const THEME_STORAGE_KEY: "mfe-shell-theme"; /** * CSS class names for themes */ declare const THEME_CLASS_NAMES: { readonly light: ""; readonly dark: "dark"; }; /** * Media query for system dark mode preference */ declare const DARK_MODE_MEDIA_QUERY: "(prefers-color-scheme: dark)"; /** * Detects the system's preferred color scheme */ declare function getSystemTheme(): 'light' | 'dark'; /** * Resolves the actual theme based on the theme mode */ declare function resolveTheme(mode: ThemeMode): 'light' | 'dark'; /** * Saves theme preference to localStorage */ declare function saveThemePreference(mode: ThemeMode): void; /** * Loads theme preference from localStorage */ declare function loadThemePreference(): ThemeMode; /** * Clears theme preference from localStorage */ declare function clearThemePreference(): void; /** * Applies theme classes to the document element */ declare function applyThemeToDOM(mode: ThemeMode): void; /** * Gets the current theme from the DOM */ declare function getCurrentThemeFromDOM(): 'light' | 'dark'; /** * Generates CSS custom properties for a theme */ declare function generateThemeCustomProperties(theme: ThemeColors): Record<string, string>; /** * Applies CSS custom properties to the document root */ declare function applyThemeCustomProperties(theme: ThemeColors): void; /** * Creates a media query listener for system theme changes */ declare function createSystemThemeListener(callback: (isDark: boolean) => void): (() => void) | null; /** * Creates a complete theme configuration */ declare function createThemeConfig(mode: ThemeMode): ThemeConfig; /** * Validates if a theme mode is valid */ declare function isValidThemeMode(mode: string): mode is ThemeMode; /** * Gets the opposite theme */ declare function getOppositeTheme(theme: 'light' | 'dark'): 'light' | 'dark'; /** * Checks if the current theme is dark */ declare function isDarkTheme(mode: ThemeMode): boolean; /** * Checks if the current theme is light */ declare function isLightTheme(mode: ThemeMode): boolean; /** * Gets theme-appropriate color value */ declare function getThemeColor(colorPath: string, mode?: ThemeMode): string; /** * Initializes the theme system */ declare function initializeTheme(): ThemeMode; /** * Sets up complete theme management */ declare function setupThemeManagement(onThemeChange?: (mode: ThemeMode, resolvedTheme: 'light' | 'dark') => void): { currentMode: ThemeMode; setTheme: (mode: ThemeMode) => void; cleanup: () => void; }; interface ValidationRule<T = unknown> { required?: boolean | string; minLength?: number | { value: number; message: string; }; maxLength?: number | { value: number; message: string; }; pattern?: RegExp | { value: RegExp; message: string; }; custom?: (value: T) => string | undefined; } interface FormFieldState<T = unknown> { value: T; error?: string; touched: boolean; dirty: boolean; } interface UseFormFieldOptions<T = unknown> { initialValue?: T; validation?: ValidationRule<T>; validateOnChange?: boolean; validateOnBlur?: boolean; } declare const validateField: <T = unknown>(value: T, rules?: ValidationRule<T>) => string | undefined; declare const useFormField: <T = string>({ initialValue, validation, validateOnChange, validateOnBlur, }?: UseFormFieldOptions<T>) => { setValue: (newValue: T) => void; setTouched: () => void; setError: (error?: string) => void; reset: () => void; validate: () => boolean; isValid: boolean; value: T; error?: string; touched: boolean; dirty: boolean; }; declare const validationPatterns: { email: { value: RegExp; message: string; }; phone: { value: RegExp; message: string; }; url: { value: RegExp; message: string; }; alphanumeric: { value: RegExp; message: string; }; noSpecialChars: { value: RegExp; message: string; }; }; declare const useFormFieldId: (prefix?: string) => string; declare const getFieldErrorProps: (error?: string, fieldId?: string) => { 'aria-invalid': "true" | "false"; 'aria-describedby': string | undefined; }; declare const getFormFieldAccessibility: (fieldId: string, error?: string, description?: string, required?: boolean) => { id: string; 'aria-invalid': "true" | "false"; 'aria-describedby': string | undefined; 'aria-required': "true" | undefined; }; declare const FORM_FIELD_SIZES: readonly ["sm", "md", "lg"]; declare const FORM_FIELD_VARIANTS: readonly ["default", "error", "success"]; type FormFieldSize = (typeof FORM_FIELD_SIZES)[number]; type FormFieldVariant = (typeof FORM_FIELD_VARIANTS)[number]; interface BaseFormFieldProps extends BaseComponentProps { id?: string; name?: string; label?: string; description?: string; error?: string; required?: boolean; disabled?: boolean; size?: FormFieldSize; validation?: ValidationRule; } interface FormFieldProps extends BaseFormFieldProps { children: React__default.ReactElement; htmlFor?: string; } interface SearchBoxProps extends Omit<BaseFormFieldProps, 'children'> { value?: string; onChange?: (value: string) => void; onClear?: () => void; placeh