@mohasinac/appkit 2.2.0 → 2.3.0

package/dist/tokens/index.d.ts

@@ -1,733 +0,0 @@
-/**
- * @mohasinac/tokens — TypeScript constants
- *
- * Mirrors the CSS custom properties in tokens.css as typed TS values.
- * Use these when you need token values in JS (e.g. canvas drawing, charting,
- * or building the tailwind.config.js color palette from a single source).
- *
- * In CSS/Tailwind prefer `var(--appkit-*)` references over these constants.
- */
-export declare const COLORS: {
-    readonly primary: {
-        readonly DEFAULT: "#84e122";
-        readonly 50: "#f3ffe3";
-        readonly 100: "#e4ffc5";
-        readonly 200: "#c8ff90";
-        readonly 300: "#a3f550";
-        readonly 400: "#84e122";
-        readonly 500: "#65c408";
-        readonly 600: "#509c02";
-        readonly 700: "#3e7708";
-        readonly 800: "#345e0d";
-        readonly 900: "#2c5011";
-        readonly 950: "#142d03";
-    };
-    readonly secondary: {
-        readonly DEFAULT: "#e91e8c";
-        readonly 50: "#fdf0f8";
-        readonly 100: "#fce2f2";
-        readonly 200: "#fac6e6";
-        readonly 300: "#f79dd2";
-        readonly 400: "#f063b9";
-        readonly 500: "#e91e8c";
-        readonly 600: "#d4107a";
-        readonly 700: "#b00d66";
-        readonly 800: "#900f56";
-        readonly 900: "#771249";
-        readonly 950: "#480525";
-    };
-    readonly cobalt: {
-        readonly DEFAULT: "#3570fc";
-        readonly 50: "#eef5ff";
-        readonly 100: "#d9e8ff";
-        readonly 200: "#bcd4ff";
-        readonly 300: "#8eb9ff";
-        readonly 400: "#5992ff";
-        readonly 500: "#3570fc";
-        readonly 600: "#1a55f2";
-        readonly 700: "#1343de";
-        readonly 800: "#1536b4";
-        readonly 900: "#18318e";
-        readonly 950: "#111e58";
-    };
-    readonly accent: {
-        readonly DEFAULT: "#8393b2";
-        readonly 50: "#f5f7fa";
-        readonly 100: "#eaeef4";
-        readonly 200: "#d1dae6";
-        readonly 300: "#adb9cf";
-        readonly 400: "#8393b2";
-        readonly 500: "#657599";
-        readonly 600: "#505f7f";
-        readonly 700: "#424d67";
-        readonly 800: "#394257";
-        readonly 900: "#333b4b";
-        readonly 950: "#222730";
-    };
-    readonly semantic: {
-        readonly success: "#059669";
-        readonly warning: "#d97706";
-        readonly error: "#dc2626";
-        readonly info: "#0284c7";
-    };
-};
-export declare const RADIUS: {
-    readonly sm: "0.25rem";
-    readonly md: "0.375rem";
-    readonly lg: "0.5rem";
-    readonly xl: "0.75rem";
-    readonly "2xl": "1rem";
-    readonly "3xl": "1.5rem";
-    readonly card: "1rem";
-    readonly btn: "0.75rem";
-    readonly full: "9999px";
-};
-export declare const SHADOWS: {
-    readonly sm: "0 1px 2px 0 rgba(0,0,0,0.05)";
-    readonly md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)";
-    readonly lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)";
-    readonly xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
-    readonly soft: "0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)";
-    readonly glow: "0 0 20px rgba(80, 156, 2, 0.45)";
-    readonly glowPink: "0 0 20px rgba(233, 30, 140, 0.5)";
-};
-export declare const Z_INDEX: {
-    readonly dropdown: 30;
-    readonly searchBackdrop: 35;
-    readonly navbar: 40;
-    readonly bottomNav: 40;
-    readonly overlay: 45;
-    readonly sidebar: 50;
-    readonly titleBar: 50;
-    readonly modal: 60;
-    readonly toast: 70;
-};
-/**
- * Returns a CSS custom property reference for the given token name.
- *
- * @example
- *   token("color-primary")       // "var(--appkit-color-primary)"
- *   token("radius-card")         // "var(--appkit-radius-card)"
- *   token("shadow-glow")         // "var(--appkit-shadow-glow)"
- */
-export declare function token(name: string): string;
-export declare const TOKENS: {
-    readonly colors: {
-        readonly primary: {
-            readonly DEFAULT: "#84e122";
-            readonly 50: "#f3ffe3";
-            readonly 100: "#e4ffc5";
-            readonly 200: "#c8ff90";
-            readonly 300: "#a3f550";
-            readonly 400: "#84e122";
-            readonly 500: "#65c408";
-            readonly 600: "#509c02";
-            readonly 700: "#3e7708";
-            readonly 800: "#345e0d";
-            readonly 900: "#2c5011";
-            readonly 950: "#142d03";
-        };
-        readonly secondary: {
-            readonly DEFAULT: "#e91e8c";
-            readonly 50: "#fdf0f8";
-            readonly 100: "#fce2f2";
-            readonly 200: "#fac6e6";
-            readonly 300: "#f79dd2";
-            readonly 400: "#f063b9";
-            readonly 500: "#e91e8c";
-            readonly 600: "#d4107a";
-            readonly 700: "#b00d66";
-            readonly 800: "#900f56";
-            readonly 900: "#771249";
-            readonly 950: "#480525";
-        };
-        readonly cobalt: {
-            readonly DEFAULT: "#3570fc";
-            readonly 50: "#eef5ff";
-            readonly 100: "#d9e8ff";
-            readonly 200: "#bcd4ff";
-            readonly 300: "#8eb9ff";
-            readonly 400: "#5992ff";
-            readonly 500: "#3570fc";
-            readonly 600: "#1a55f2";
-            readonly 700: "#1343de";
-            readonly 800: "#1536b4";
-            readonly 900: "#18318e";
-            readonly 950: "#111e58";
-        };
-        readonly accent: {
-            readonly DEFAULT: "#8393b2";
-            readonly 50: "#f5f7fa";
-            readonly 100: "#eaeef4";
-            readonly 200: "#d1dae6";
-            readonly 300: "#adb9cf";
-            readonly 400: "#8393b2";
-            readonly 500: "#657599";
-            readonly 600: "#505f7f";
-            readonly 700: "#424d67";
-            readonly 800: "#394257";
-            readonly 900: "#333b4b";
-            readonly 950: "#222730";
-        };
-        readonly semantic: {
-            readonly success: "#059669";
-            readonly warning: "#d97706";
-            readonly error: "#dc2626";
-            readonly info: "#0284c7";
-        };
-    };
-    readonly radius: {
-        readonly sm: "0.25rem";
-        readonly md: "0.375rem";
-        readonly lg: "0.5rem";
-        readonly xl: "0.75rem";
-        readonly "2xl": "1rem";
-        readonly "3xl": "1.5rem";
-        readonly card: "1rem";
-        readonly btn: "0.75rem";
-        readonly full: "9999px";
-    };
-    readonly shadows: {
-        readonly sm: "0 1px 2px 0 rgba(0,0,0,0.05)";
-        readonly md: "0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -2px rgba(0,0,0,0.1)";
-        readonly lg: "0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -4px rgba(0,0,0,0.1)";
-        readonly xl: "0 20px 25px -5px rgba(0,0,0,0.1), 0 8px 10px -6px rgba(0,0,0,0.1)";
-        readonly soft: "0 2px 15px -3px rgba(0,0,0,0.07), 0 10px 20px -2px rgba(0,0,0,0.04)";
-        readonly glow: "0 0 20px rgba(80, 156, 2, 0.45)";
-        readonly glowPink: "0 0 20px rgba(233, 30, 140, 0.5)";
-    };
-    readonly zIndex: {
-        readonly dropdown: 30;
-        readonly searchBackdrop: 35;
-        readonly navbar: 40;
-        readonly bottomNav: 40;
-        readonly overlay: 45;
-        readonly sidebar: 50;
-        readonly titleBar: 50;
-        readonly modal: 60;
-        readonly toast: 70;
-    };
-    readonly token: typeof token;
-};
-/**
- * Locale and currency defaults.
- * Scalar defaults are resolved at call-time via the baseline resolver so that
- * consumer overrides (via `configureMarketDefaults()`) take effect everywhere.
- *
- * @example
- * ```ts
- * import { LOCALE_CONFIG } from "@mohasinac/appkit/tokens";
- *
- * const price = new Intl.NumberFormat(LOCALE_CONFIG.defaultLocale, {
- *   style: "currency",
- *   currency: LOCALE_CONFIG.defaultCurrency,
- * }).format(1299);
- * // => "\u20b91,299.00"
- * ```
- */
-export declare const LOCALE_CONFIG: {
-    /** IETF language tag used for Intl formatters. Resolved via baseline resolver. */
-    readonly defaultLocale: string;
-    /** ISO 4217 currency code. Resolved via baseline resolver. */
-    readonly defaultCurrency: string;
-    /** IANA timezone for server-side date rendering. Resolved via baseline resolver. */
-    readonly defaultTimezone: string;
-    /** ISO 3166-1 alpha-2 country code. Resolved via baseline resolver. */
-    readonly defaultCountry: string;
-    /** Phone number prefix. Resolved via baseline resolver. */
-    readonly defaultPhonePrefix: string;
-    /** Locales available for the i18n router. */
-    readonly supportedLocales: readonly ["en-IN", "en-US", "en-GB"];
-    /** Currencies the platform accepts. */
-    readonly supportedCurrencies: readonly ["INR", "USD", "GBP", "EUR", "AED", "SGD"];
-    /** Currency symbol map for quick display use. */
-    readonly currencySymbols: {
-        readonly INR: "₹";
-        readonly USD: "$";
-        readonly GBP: "£";
-        readonly EUR: "€";
-        readonly AED: "د.إ";
-        readonly SGD: "S$";
-    };
-    /** Postal code pattern for India (6 digits). */
-    readonly postalPattern: RegExp;
-};
-/**
- * Minimum item widths for auto-fill fluid grids matching the four
- * `fluid-grid-*` CSS utilities (defined in tailwind.config.js plugin).
- *
- * Usage: `useContainerGrid({ minItemWidth: FLUID_GRID_MIN_WIDTHS.card })`
- */
-export declare const FLUID_GRID_MIN_WIDTHS: {
-    /** Product cards, store cards */
-    readonly card: 220;
-    /** Admin stat cards, user cards */
-    readonly admin: 260;
-    /** Blog cards, event cards */
-    readonly wide: 300;
-    /** Gallery thumbnails */
-    readonly thumb: 160;
-    /** Form fields — two-column threshold */
-    readonly form: 280;
-    /** Tab strip items */
-    readonly tabItem: 100;
-    /** Filter chips */
-    readonly chip: 80;
-};
-/**
- * THEME_CONSTANTS
- *
- * The complete, responsive-first design system constant map.
- * Import in your project's `constants/theme.ts` and extend with
- * brand-specific values (accentBanner gradients, badge role variants, etc.).
- *
- * @example
- * ```ts
- * // In your project constants/theme.ts:
- * import { THEME_CONSTANTS } from "./";
- *
- * export { THEME_CONSTANTS };        // re-export as-is
- *
- * // or merge with project-specific extensions:
- * export const THEME_CONSTANTS = {
- *   ...baseTheme,
- *   accentBanner: { ... },           // project-specific
- * };
- * ```
- */
-export declare const THEME_CONSTANTS: {
-    readonly themed: {
-        readonly bgPrimary: "bg-zinc-50 dark:bg-slate-950";
-        readonly bgSecondary: "bg-zinc-100 dark:bg-slate-900";
-        readonly bgTertiary: "bg-zinc-200 dark:bg-slate-800";
-        readonly bgElevated: "bg-white dark:bg-slate-900/90";
-        readonly bgInput: "bg-white dark:bg-slate-800/60";
-        readonly textPrimary: "text-zinc-900 dark:text-zinc-50";
-        readonly textSecondary: "text-zinc-500 dark:text-zinc-400";
-        readonly textMuted: "text-zinc-400 dark:text-zinc-500";
-        readonly textError: "text-red-600 dark:text-red-400";
-        readonly textSuccess: "text-emerald-600 dark:text-emerald-400";
-        readonly textOnPrimary: "text-white";
-        readonly textOnDark: "text-white";
-        readonly border: "border-zinc-200 dark:border-slate-700";
-        readonly borderSubtle: "border-zinc-100 dark:border-slate-800/60";
-        readonly borderLight: "border-zinc-100 dark:border-slate-700/60";
-        readonly borderError: "border-red-500";
-        readonly borderColor: "border-zinc-200 dark:border-slate-700";
-        readonly hover: "hover:bg-zinc-100 dark:hover:bg-slate-800";
-        readonly hoverCard: "hover:bg-zinc-50 dark:hover:bg-slate-800/60";
-        readonly hoverBorder: "hover:border-zinc-300 dark:hover:border-slate-600";
-        readonly hoverText: "hover:text-zinc-800 dark:hover:text-zinc-100";
-        readonly activeRow: "bg-primary-50 dark:bg-secondary-950/30";
-        readonly focusRing: "focus:ring-primary-500 dark:focus:ring-secondary-400";
-        readonly divider: "divide-zinc-200 dark:divide-slate-700";
-        readonly placeholder: "placeholder-zinc-400 dark:placeholder-zinc-500";
-    };
-    readonly layout: {
-        readonly titleBarHeight: "h-12";
-        readonly navbarHeight: "h-10 md:h-12";
-        readonly sidebarWidth: "w-80";
-        readonly bottomNavHeight: "h-14";
-        readonly maxContentWidth: "max-w-[1920px]";
-        readonly containerWidth: "max-w-[1920px]";
-        readonly contentPadding: "px-4 md:px-6 lg:px-8";
-        readonly navPadding: "px-4 sm:px-6 lg:px-8";
-        readonly titleBarBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80";
-        readonly navbarBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-b border-zinc-200/80 dark:border-slate-800/80";
-        readonly sidebarBg: "bg-white dark:bg-slate-900 border-l border-zinc-200 dark:border-slate-800";
-        readonly bottomNavBg: "bg-white/90 dark:bg-slate-950/90 backdrop-blur-md border-t border-zinc-200/80 dark:border-slate-800/80";
-        readonly footerBg: "bg-zinc-50 dark:bg-slate-900 border-t border-zinc-200 dark:border-slate-800";
-        readonly fullScreen: "min-h-screen";
-        readonly flexCenter: "flex items-center justify-center";
-        readonly centerText: "text-center";
-        /** Full-width content zone: max screen-xl, centred, responsive px */
-        readonly content: "w-full max-w-screen-xl mx-auto px-4 sm:px-6 xl:px-8";
-        /** Narrow zone for forms, articles, policy pages */
-        readonly tight: "w-full max-w-3xl mx-auto px-4 sm:px-6";
-        /** Vertical rhythm padding for sections */
-        readonly section: "py-10 sm:py-14 xl:py-20";
-        /** Compact sections (filters, related products) */
-        readonly sectionSm: "py-6 sm:py-10";
-        /** Responsive gap for flex/grid children */
-        readonly gap: "gap-4 sm:gap-6 xl:gap-8";
-        /** Responsive vertical stack spacing */
-        readonly stack: "space-y-4 sm:space-y-6";
-        /** Kill trailing space from last child in a zone */
-        readonly noBleed: "pb-0 mb-0";
-        /** Kill top margin from first element in a zone */
-        readonly firstChild: "mt-0 pt-0";
-        /** Kill bottom margin from last element in a zone */
-        readonly lastChild: "mb-0 pb-0";
-        /** Combined bottom-nav bar (hidden on lg+, iPhone safe-area aware) */
-        readonly bottomNav: "fixed bottom-0 inset-x-0 z-50 flex justify-around items-center h-16 bg-white dark:bg-zinc-900 border-t border-zinc-200 dark:border-zinc-800 lg:hidden pb-[env(safe-area-inset-bottom)]";
-        /** Main content bottom padding to clear the bottom nav on mobile */
-        readonly mainPadBottomNav: "pb-20 lg:pb-0";
-    };
-    readonly typography: {
-        readonly pageTitle: "text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight leading-tight";
-        readonly pageSubtitle: "text-base md:text-lg text-zinc-500 dark:text-zinc-400 leading-relaxed mt-1";
-        readonly sectionTitle: "text-xl md:text-2xl lg:text-3xl font-semibold tracking-tight";
-        readonly sectionSubtitle: "text-sm md:text-base lg:text-lg text-zinc-500 dark:text-zinc-400";
-        readonly cardTitle: "text-base md:text-lg font-semibold leading-snug";
-        readonly cardBody: "text-sm md:text-base leading-relaxed";
-        readonly label: "text-sm font-medium text-zinc-700 dark:text-zinc-300";
-        readonly caption: "text-xs text-zinc-500 dark:text-zinc-400";
-        readonly overline: "text-xs font-semibold uppercase tracking-wider text-zinc-500 dark:text-zinc-400";
-        readonly h1: "text-3xl md:text-4xl lg:text-5xl font-bold tracking-tight font-display";
-        readonly h2: "text-2xl md:text-3xl lg:text-4xl font-bold tracking-tight font-display";
-        readonly h3: "text-xl md:text-2xl lg:text-3xl font-bold tracking-tight font-display";
-        readonly h4: "text-lg md:text-xl lg:text-2xl font-bold font-display";
-        readonly h5: "text-base md:text-lg lg:text-xl font-medium";
-        readonly h6: "text-sm md:text-base lg:text-lg font-medium";
-        readonly body: "text-base lg:text-lg";
-        readonly small: "text-sm lg:text-base";
-        readonly xs: "text-xs lg:text-sm";
-        readonly display: "text-8xl md:text-9xl font-bold font-display";
-    };
-    readonly spacing: {
-        readonly section: "space-y-8 md:space-y-12 lg:space-y-16";
-        readonly formGroup: "space-y-6 lg:space-y-8";
-        readonly stack: "space-y-4";
-        readonly stackSmall: "space-y-2";
-        readonly inline: "space-x-4";
-        readonly inlineSmall: "gap-2 lg:gap-3";
-        readonly inlineLarge: "gap-4 lg:gap-6";
-        readonly pageY: "py-6 sm:py-8 lg:py-10";
-        readonly sectionGap: "mt-8 md:mt-12";
-        readonly cardPadding: "p-5 sm:p-6 lg:p-8";
-        readonly padding: {
-            readonly xs: "p-2";
-            readonly sm: "p-3";
-            readonly md: "p-4";
-            readonly lg: "p-6";
-            readonly xl: "p-8";
-        };
-        readonly gap: {
-            readonly none: "";
-            readonly px: "gap-px";
-            readonly xs: "gap-1";
-            readonly sm: "gap-2";
-            readonly "2.5": "gap-2.5";
-            readonly "3": "gap-3";
-            readonly md: "gap-4";
-            readonly lg: "gap-6";
-            readonly xl: "gap-8";
-            readonly "2xl": "gap-12";
-        };
-    };
-    readonly grid: {
-        /** Single column */
-        readonly cols1: "grid grid-cols-1";
-        /** 1 → 2 */
-        readonly cols2: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2";
-        /** 1 → 2 → 3 → 4 on widescreen */
-        readonly cols3: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-3 2xl:grid-cols-4";
-        /** 1 → 2 → 3 → 4 → 5 on widescreen */
-        readonly cols4: "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-3 xl:grid-cols-4 2xl:grid-cols-5";
-        /** 1 → 2 → 3 → 4 → 5 */
-        readonly cols5: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5";
-        /** 2 → 3 → 4 → 5 → 6 */
-        readonly cols6: "grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 xl:grid-cols-5 2xl:grid-cols-6";
-        /**
-         * Generic card grid — 1 col on portrait mobile → 5 on ultrawide.
-         * Starts at 1 (not 2) so product cards with title+image+price are readable
-         * even on 320 px handsets in portrait orientation.
-         */
-        readonly cards: "grid grid-cols-1 sm:grid-cols-2 md:grid-cols-3 lg:grid-cols-4 xl:grid-cols-4 2xl:grid-cols-5";
-        /** Auto-fill product cards — min 200 px */
-        readonly productCards: "grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))] gap-6";
-        /** Auto-fill store cards — min 220 px */
-        readonly storeCards: "grid grid-cols-[repeat(auto-fill,minmax(220px,1fr))] gap-6";
-        /** Auto-fill category icon+label tiles — min 130 px */
-        readonly categoryCards: "grid grid-cols-[repeat(auto-fill,minmax(130px,1fr))] gap-4";
-        /** Auto-fill coupon/promo cards — min 264 px */
-        readonly couponCards: "grid grid-cols-[repeat(auto-fill,minmax(264px,1fr))] gap-6";
-        /** Auto-fill address / wide cards — min 300 px */
-        readonly addressCards: "grid grid-cols-[repeat(auto-fill,minmax(300px,1fr))] gap-4";
-        /** Auto-fill KPI/stat tiles — min 180 px */
-        readonly statTiles: "grid grid-cols-[repeat(auto-fill,minmax(180px,1fr))] gap-4";
-        /** Auto-fill account nav tiles — min 160 px */
-        readonly navTiles: "grid grid-cols-[repeat(auto-fill,minmax(160px,1fr))] gap-4";
-        /** Auto-fill, min 200 px */
-        readonly autoFillSm: "grid grid-cols-[repeat(auto-fill,minmax(200px,1fr))]";
-        /** Auto-fill, min 280 px */
-        readonly autoFillMd: "grid grid-cols-[repeat(auto-fill,minmax(280px,1fr))]";
-        /** Auto-fill, min 360 px */
-        readonly autoFillLg: "grid grid-cols-[repeat(auto-fill,minmax(360px,1fr))]";
-        /** Fixed 280 px left sidebar + 1fr */
-        readonly sidebar: "grid grid-cols-1 lg:grid-cols-[280px_1fr]";
-        /** 1fr + fixed 280 px right sidebar */
-        readonly sidebarRight: "grid grid-cols-1 lg:grid-cols-[1fr_280px]";
-        /** Fixed 320 px left sidebar + 1fr (admin) */
-        readonly sidebarWide: "grid grid-cols-1 lg:grid-cols-[320px_1fr]";
-        /** Equal halves on md+ */
-        readonly halves: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-2 2xl:grid-cols-2";
-        /** 2fr / 1fr */
-        readonly twoThird: "grid grid-cols-1 md:grid-cols-[2fr_1fr]";
-        /** 1fr / 2fr */
-        readonly oneThird: "grid grid-cols-1 md:grid-cols-[1fr_2fr]";
-        /** Product grid — 2 cols on mobile, scales to 5 on ultrawide */
-        readonly products: "grid grid-cols-2 sm:grid-cols-3 lg:grid-cols-4 xl:grid-cols-5 gap-3 sm:gap-4 xl:gap-6";
-        /** Wide card grid — 1 col on mobile → 3 on xl */
-        readonly wide: "grid grid-cols-1 md:grid-cols-2 xl:grid-cols-3 gap-6 xl:gap-8";
-        /** Admin stats grid — 1 col → 4 KPI tiles on xl */
-        readonly admin: "grid grid-cols-1 sm:grid-cols-2 xl:grid-cols-4 gap-4";
-        /** Filter sidebar + main content + optional right aside */
-        readonly withFilter: "grid grid-cols-1 lg:grid-cols-[220px_1fr] xl:grid-cols-[260px_1fr_200px] gap-4 xl:gap-6";
-    };
-    readonly page: {
-        readonly px: "px-4 sm:px-6 lg:px-8";
-        readonly container: {
-            /** max-w-3xl — blog / policy */
-            readonly sm: "max-w-3xl mx-auto px-4 sm:px-6 lg:px-8";
-            /** max-w-4xl — contact / about */
-            readonly md: "max-w-4xl mx-auto px-4 sm:px-6 lg:px-8";
-            /** max-w-5xl — checkout / help */
-            readonly lg: "max-w-5xl mx-auto px-4 sm:px-6 lg:px-8";
-            /** max-w-6xl — product detail / cart */
-            readonly xl: "max-w-6xl mx-auto px-4 sm:px-6 lg:px-8";
-            /** max-w-7xl — main content grids (default) */
-            readonly "2xl": "max-w-7xl mx-auto px-4 sm:px-6 lg:px-8";
-            /** max-w-screen-2xl — full-bleed content */
-            readonly full: "max-w-screen-2xl mx-auto px-4 sm:px-6 lg:px-8";
-            /** max-w-screen-2xl — wide store/seller layouts (compact px) */
-            readonly wide: "max-w-screen-2xl mx-auto px-4 sm:px-6";
-            /** max-w-[1920px] — ultra-wide / 4K displays */
-            readonly ultra: "max-w-[1920px] mx-auto px-4 sm:px-6 lg:px-8";
-        };
-    };
-    readonly input: {
-        readonly base: "rounded-lg border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-800/60 px-3.5 py-2.5 text-base sm:text-sm text-zinc-900 dark:text-zinc-100 focus:ring-2 focus:ring-primary-500/40 dark:focus:ring-secondary-400/40 focus:border-primary-500 dark:focus:border-secondary-400 focus:outline-none transition-colors duration-150 placeholder:text-zinc-400 dark:placeholder:text-zinc-500";
-        readonly error: "border-red-400 dark:border-red-500 focus:ring-red-500/20 focus:border-red-500 bg-red-50/30 dark:bg-red-950/10";
-        readonly success: "border-emerald-400 dark:border-emerald-500 focus:ring-emerald-500/20 focus:border-emerald-500";
-        readonly disabled: "bg-zinc-50 dark:bg-slate-800/30 text-zinc-400 dark:text-zinc-500 cursor-not-allowed opacity-60";
-        readonly withIcon: "pl-10";
-    };
-    readonly card: {
-        readonly base: "rounded-2xl overflow-hidden transition-all";
-        readonly shadow: "shadow-sm";
-        readonly shadowElevated: "shadow-lg";
-        readonly hover: "hover:shadow-md dark:hover:shadow-xl cursor-pointer transition-shadow duration-200";
-        readonly standard: "rounded-2xl border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm hover:shadow-md transition-all duration-200";
-        readonly elevated: "rounded-2xl bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 shadow-md hover:shadow-lg transition-shadow duration-200";
-        readonly interactive: "rounded-2xl border border-zinc-200 dark:border-slate-700 bg-white dark:bg-slate-900 shadow-sm hover:shadow-md hover:border-primary-300/60 dark:hover:border-secondary-500/60 transition-all duration-200 cursor-pointer";
-        readonly glass: "rounded-2xl backdrop-blur-md bg-white/85 dark:bg-slate-900/85 border border-zinc-200/60 dark:border-slate-700/40 shadow-lg";
-        /** Product card image wrapper — portrait aspect ratio */
-        readonly image: "relative aspect-[3/4] overflow-hidden bg-zinc-100 dark:bg-zinc-800";
-        /** Wide image wrapper — video/landscape ratio */
-        readonly imageWide: "relative aspect-video overflow-hidden bg-zinc-100 dark:bg-zinc-800";
-        /** Square image wrapper */
-        readonly imageSquare: "relative aspect-square overflow-hidden bg-zinc-100 dark:bg-zinc-800";
-        /** Card body — flex-column, responsive padding */
-        readonly body: "flex flex-col flex-1 gap-1 p-3 sm:p-4";
-        /** Card footer — responsive padding */
-        readonly footer: "px-3 pb-3 sm:px-4 sm:pb-4";
-        /** Badge overlay (top-left) */
-        readonly badge: "absolute top-2 left-2 z-10";
-        /** Action overlay, e.g. wishlist button (top-right) */
-        readonly action: "absolute top-2 right-2 z-10";
-    };
-    readonly flex: {
-        readonly row: "flex flex-row";
-        readonly col: "flex flex-col";
-        readonly rowWrap: "flex flex-row flex-wrap";
-        readonly colWrap: "flex flex-col flex-wrap";
-        readonly inline: "inline-flex";
-        readonly center: "flex items-center justify-center";
-        readonly between: "flex items-center justify-between";
-        readonly betweenStart: "flex items-start justify-between";
-        readonly betweenEnd: "flex items-end justify-between";
-        readonly start: "flex items-center justify-start";
-        readonly end: "flex items-center justify-end";
-        readonly rowCenter: "flex flex-row items-center";
-        readonly rowStart: "flex flex-row items-start";
-        readonly rowEnd: "flex flex-row items-end";
-        readonly centerCol: "flex flex-col items-center justify-center";
-        readonly colStart: "flex flex-col items-start";
-        readonly colCenter: "flex flex-col items-center";
-        readonly colEnd: "flex flex-col items-end";
-        readonly colBetween: "flex flex-col justify-between";
-        readonly inlineCenter: "inline-flex items-center";
-        readonly inlineFull: "inline-flex items-center justify-center";
-        readonly grow: "flex-1";
-        readonly growMin: "flex-1 min-w-0";
-        readonly growMinH: "flex-1 min-h-0";
-        readonly noShrink: "flex-shrink-0";
-        readonly none: "flex-none";
-        readonly hCenter: "flex justify-center";
-    };
-    readonly position: {
-        readonly relative: "relative";
-        readonly absolute: "absolute";
-        readonly fixed: "fixed";
-        readonly sticky: "sticky";
-        readonly static: "static";
-        readonly fill: "absolute inset-0";
-        readonly absoluteCenter: "absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2";
-        readonly absoluteTop: "absolute top-0 inset-x-0";
-        readonly absoluteBottom: "absolute bottom-0 inset-x-0";
-        readonly absoluteTopRight: "absolute top-0 right-0";
-        readonly absoluteTopLeft: "absolute top-0 left-0";
-        readonly absoluteBottomRight: "absolute bottom-0 right-0";
-        readonly absoluteBottomLeft: "absolute bottom-0 left-0";
-    };
-    readonly states: {
-        readonly disabled: "opacity-50 cursor-not-allowed pointer-events-none";
-        readonly loading: "opacity-75 cursor-wait";
-        readonly readonly: "bg-zinc-100 dark:bg-slate-800 cursor-default";
-        readonly error: "border-red-500 dark:border-red-500";
-        readonly success: "border-green-500 dark:border-green-500";
-        readonly focus: "focus:outline-none focus:ring-2 focus:ring-primary-500 focus:ring-offset-2 dark:focus:ring-secondary-400 dark:focus:ring-offset-slate-950";
-    };
-    readonly transitions: {
-        readonly default: "transition-all duration-200 ease-in-out";
-        readonly fast: "transition-all duration-150 ease-in-out";
-        readonly slow: "transition-all duration-500 ease-in-out";
-        readonly colors: "transition-colors duration-200 ease-in-out";
-        readonly transform: "transition-transform duration-200 ease-in-out";
-        readonly opacity: "transition-opacity duration-200 ease-in-out";
-    };
-    readonly skeleton: {
-        readonly base: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60";
-        readonly text: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60 h-4";
-        readonly heading: "animate-pulse rounded bg-zinc-200 dark:bg-slate-700/60 h-7";
-        readonly image: "animate-pulse rounded-xl bg-zinc-200 dark:bg-slate-700/60";
-        readonly card: "animate-pulse rounded-2xl bg-zinc-200 dark:bg-slate-700/60";
-        readonly shimmer: "animate-shimmer bg-[length:400%_100%] rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800";
-        readonly shimmerText: "animate-shimmer bg-[length:400%_100%] h-4 rounded bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800";
-        readonly shimmerCard: "animate-shimmer bg-[length:400%_100%] rounded-2xl bg-gradient-to-r from-zinc-200 via-zinc-100 to-zinc-200 dark:from-slate-800 dark:via-slate-700/60 dark:to-slate-800";
-    };
-    readonly motion: {
-        readonly fadeIn: "motion-safe:animate-fade-in";
-        readonly slideUp: "motion-safe:animate-slide-up";
-        readonly scaleIn: "motion-safe:animate-scale-in";
-        readonly skeleton: "motion-safe:animate-pulse";
-        readonly transition: "motion-safe:transition-all motion-safe:duration-200";
-        readonly transitionSlow: "motion-safe:transition-all motion-safe:duration-500 motion-safe:ease-in-out";
-    };
-    readonly text: {
-        readonly h1: "text-2xl sm:text-3xl xl:text-4xl font-bold tracking-tight leading-tight";
-        readonly h2: "text-xl sm:text-2xl xl:text-3xl font-semibold tracking-tight";
-        readonly h3: "text-lg sm:text-xl xl:text-2xl font-semibold";
-        readonly h4: "text-base sm:text-lg font-semibold";
-        readonly body: "text-sm sm:text-base leading-relaxed";
-        readonly bodyLg: "text-base sm:text-lg leading-relaxed";
-        readonly small: "text-xs sm:text-sm";
-        readonly label: "text-xs font-medium uppercase tracking-wide";
-        readonly price: "text-lg sm:text-xl font-bold tabular-nums";
-        readonly priceLg: "text-2xl sm:text-3xl font-bold tabular-nums";
-        readonly muted: "text-zinc-500 dark:text-zinc-400";
-        readonly error: "text-red-600 dark:text-red-400";
-        readonly success: "text-green-600 dark:text-green-400";
-    };
-    readonly touch: {
-        readonly target: "min-h-[44px] min-w-[44px]";
-        readonly targetSm: "min-h-[36px] min-w-[36px]";
-        readonly targetH: "min-h-[44px]";
-        readonly targetW: "min-w-[44px]";
-        /** 44 px height primary button */
-        readonly button: "h-11 px-5 py-2.5";
-        /** 44×44 icon button */
-        readonly icon: "h-11 w-11 flex items-center justify-center";
-        /** 44 px height input */
-        readonly input: "h-11 px-3 py-2";
-        /** 48 px height tab */
-        readonly tab: "h-12 px-4";
-        /** Secondary chip (smaller but acceptable) */
-        readonly chip: "h-9 px-3";
-    };
-    readonly fluidGrid: {
-        /** Product / store cards — min 220 px */
-        readonly card: "fluid-grid-card";
-        /** Admin stat / user cards — min 260 px */
-        readonly admin: "fluid-grid-admin";
-        /** Blog / event cards — min 300 px */
-        readonly wide: "fluid-grid-wide";
-        /** Gallery thumbnails — min 160 px */
-        readonly thumb: "fluid-grid-thumb";
-    };
-    /** Form layout tokens — pair with FormGrid / FormField components */
-    readonly form: {
-        readonly grid: "flex flex-wrap gap-4";
-        readonly field: "flex-1 min-w-[280px] flex flex-col gap-1.5";
-        readonly fieldWide: "w-full flex flex-col gap-1.5";
-        readonly fieldHalf: "w-1/2 min-w-[280px] flex flex-col gap-1.5";
-        readonly label: "text-sm font-medium text-zinc-700 dark:text-zinc-300";
-        readonly hint: "text-xs text-zinc-500 dark:text-zinc-400";
-        readonly error: "text-xs text-red-600 dark:text-red-400";
-        readonly section: "space-y-6";
-        readonly sectionHead: "text-base font-semibold text-zinc-900 dark:text-zinc-100 border-b pb-2 mb-2 border-zinc-200 dark:border-zinc-700";
-    };
-    /** Tooltip bubble styles — used by the <Tooltip> component. */
-    readonly tooltip: {
-        readonly content: "z-50 px-2 py-1 text-xs font-medium rounded bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 shadow-sm";
-        readonly arrow: "fill-zinc-900 dark:fill-zinc-100";
-    };
-    readonly utilities: {
-        readonly scrollbarHide: "scrollbar-hide [&::-webkit-scrollbar]:hidden [-ms-overflow-style:none] [scrollbar-width:none]";
-        readonly scrollbarThin: "scrollbar-thin [&::-webkit-scrollbar]:w-1.5 [&::-webkit-scrollbar-track]:bg-zinc-100 dark:[&::-webkit-scrollbar-track]:bg-slate-800/60 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-thumb]:bg-zinc-300 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-zinc-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-slate-500";
-        readonly scrollbarThinX: "[&::-webkit-scrollbar]:h-1.5 [&::-webkit-scrollbar-track]:rounded-full [&::-webkit-scrollbar-track]:bg-zinc-100 dark:[&::-webkit-scrollbar-track]:bg-slate-800/60 [&::-webkit-scrollbar-thumb]:bg-zinc-300 dark:[&::-webkit-scrollbar-thumb]:bg-slate-600 [&::-webkit-scrollbar-thumb]:rounded-full [&::-webkit-scrollbar-thumb:hover]:bg-zinc-400 dark:[&::-webkit-scrollbar-thumb:hover]:bg-slate-500";
-        readonly safeAreaBottom: "pb-[env(safe-area-inset-bottom)]";
-        readonly safeAreaTop: "pt-[env(safe-area-inset-top)]";
-        readonly safeAreaInline: "px-[env(safe-area-inset-left)] px-[env(safe-area-inset-right)]";
-        readonly gradientText: "bg-gradient-to-r from-primary-600 to-primary-800 bg-clip-text text-transparent";
-    };
-    readonly patterns: {
-        readonly pageContainer: "min-h-screen bg-white dark:bg-slate-950";
-        readonly sectionContainer: "max-w-7xl mx-auto px-4 md:px-6 lg:px-8 py-8 lg:py-12";
-        readonly formContainer: "bg-white dark:bg-slate-900 rounded-2xl border border-zinc-200 dark:border-slate-700 shadow-sm p-6 lg:p-8 space-y-6";
-        readonly listItem: "bg-white dark:bg-slate-900 border border-zinc-200 dark:border-slate-700 rounded-xl p-4 hover:border-zinc-300 dark:hover:border-slate-600 transition-colors";
-        readonly linkDefault: "text-primary-600 dark:text-secondary-400 hover:text-primary-500 dark:hover:text-secondary-300 transition-colors underline-offset-2 hover:underline";
-        readonly iconButton: "p-2 rounded-lg transition-colors hover:bg-zinc-100 dark:hover:bg-slate-800 active:bg-zinc-200 dark:active:bg-slate-700 min-h-[44px] min-w-[44px] flex items-center justify-center";
-        readonly modalOverlay: "fixed inset-0 bg-black/60 backdrop-blur-sm flex items-center justify-center z-50";
-        readonly modalContent: "bg-white dark:bg-slate-900 rounded-2xl border border-zinc-200 dark:border-slate-700 shadow-xl max-w-lg w-full mx-4 overflow-hidden";
-        readonly divider: "border-t border-zinc-200 dark:border-slate-700";
-        readonly emptyState: "flex flex-col items-center justify-center py-12 text-center text-zinc-500 dark:text-zinc-400";
-    };
-    readonly icon: {
-        readonly muted: "text-zinc-400 dark:text-zinc-500";
-        readonly primary: "text-primary-600 dark:text-secondary-400";
-        readonly success: "text-emerald-500 dark:text-emerald-400";
-        readonly danger: "text-red-500 dark:text-red-400";
-        readonly warning: "text-amber-500 dark:text-amber-400";
-        readonly size: {
-            readonly sm: "w-4 h-4";
-            readonly md: "w-6 h-6";
-            readonly lg: "w-8 h-8";
-            readonly xl: "w-16 h-16";
-        };
-    };
-    readonly tab: {
-        readonly active: "border-b-2 border-primary-600 dark:border-secondary-400 text-primary-600 dark:text-secondary-400 font-semibold";
-        readonly inactive: "border-transparent text-zinc-500 dark:text-zinc-400 hover:text-zinc-700 dark:hover:text-zinc-300";
-    };
-    readonly rating: {
-        readonly filled: "text-yellow-400";
-        readonly empty: "text-zinc-300 dark:text-zinc-600";
-    };
-    /** Breakpoints for reference (matches Tailwind defaults). */
-    readonly breakpoints: {
-        readonly sm: "640px";
-        readonly md: "768px";
-        readonly lg: "1024px";
-        readonly xl: "1280px";
-        readonly "2xl": "1536px";
-        readonly "3xl": "1920px";
-    };
-    /** Global body/html base classes. */
-    readonly base: {
-        readonly body: "bg-white dark:bg-slate-950 text-zinc-900 dark:text-zinc-100 antialiased font-[Inter,ui-sans-serif,system-ui,-apple-system,\"Segoe_UI\",Roboto,\"Helvetica_Neue\",Arial,sans-serif]";
-        readonly html: "scroll-smooth";
-    };
-    /** Hero / homepage section layout tokens. */
-    readonly homepage: {
-        readonly heroMinH: "min-h-[clamp(420px,72vh,680px)]";
-        readonly heroMinHMobile: "min-h-[clamp(120px,14vh,200px)]";
-    };
-    /** Carousel navigation tokens — shared by HeroCarousel and SectionCarousel. */
-    readonly carousel: {
-        readonly arrow: "w-10 h-10 rounded-2xl bg-white/85 dark:bg-slate-800/90 backdrop-blur-sm shadow-lg border border-zinc-300/70 dark:border-slate-600 text-zinc-800 dark:text-zinc-200 hover:-translate-y-0.5 hover:bg-white hover:shadow-xl hover:border-zinc-400 dark:hover:border-slate-500 active:scale-95 transition-all duration-200 flex items-center justify-center";
-        readonly dotActive: "w-8 h-2 !min-h-0 rounded-full bg-white shadow-sm transition-all duration-500";
-        readonly dotInactive: "w-2 h-2 !min-h-0 rounded-full bg-white/55 shadow-sm transition-all duration-500";
-    };
-};