@pacer-ui/tokens 1.0.1

package/dist/index.d.mts

@@ -0,0 +1,741 @@
+/**
+ * Design Tokens - PACER (Pertamina Patra Niaga Components & Experience Resources)
+ *
+ * Single source of truth untuk semua nilai design.
+ * Token ini framework-agnostic dan dapat digunakan di React, Vue, dan Blazor.
+ *
+ * Token structure mengikuti prinsip:
+ * - Semantic naming (bukan value-based)
+ * - Hierarchical organization
+ * - Theme-able (support light/dark)
+ */
+declare const colors: {
+    readonly brand: {
+        readonly 50: "#E6F0FE";
+        readonly 100: "#D9E9FE";
+        readonly 200: "#B0D1FD";
+        readonly 300: "#016BF8";
+        readonly 400: "#0160DF";
+        readonly 500: "#0156C6";
+        readonly 600: "#0150BA";
+        readonly 700: "#014095";
+        readonly 800: "#003070";
+        readonly 900: "#002557";
+    };
+    readonly base: {
+        readonly black: "#000000";
+        readonly white: "#FFFFFF";
+    };
+    readonly slate: {
+        readonly 50: "#F8FAFC";
+        readonly 100: "#F1F5F9";
+        readonly 200: "#E2E8F0";
+        readonly 300: "#CBD5E1";
+        readonly 400: "#94A3B8";
+        readonly 500: "#64748B";
+        readonly 600: "#475569";
+        readonly 700: "#334155";
+        readonly 800: "#1E293B";
+        readonly 900: "#0F172A";
+        readonly 950: "#020617";
+    };
+    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 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: "#FEF9C3";
+        readonly 200: "#FEF08A";
+        readonly 300: "#FDE047";
+        readonly 400: "#FACC15";
+        readonly 500: "#EAB308";
+        readonly 600: "#CA8A04";
+        readonly 700: "#A16207";
+        readonly 800: "#854D0E";
+        readonly 900: "#713F12";
+        readonly 950: "#422006";
+    };
+    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 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 zinc: {
+        readonly 50: "#FAFAFA";
+        readonly 100: "#F4F4F5";
+        readonly 200: "#E4E4E7";
+        readonly 300: "#D4D4D8";
+        readonly 400: "#A1A1AA";
+        readonly 500: "#71717A";
+        readonly 600: "#52525B";
+        readonly 700: "#3F3F46";
+        readonly 800: "#27272A";
+        readonly 900: "#18181B";
+        readonly 950: "#09090B";
+    };
+    readonly neutral: {
+        readonly 50: "#FAFAFA";
+        readonly 100: "#F5F5F5";
+        readonly 200: "#E5E5E5";
+        readonly 300: "#D4D4D4";
+        readonly 400: "#A3A3A3";
+        readonly 500: "#737373";
+        readonly 600: "#525252";
+        readonly 700: "#404040";
+        readonly 800: "#262626";
+        readonly 900: "#171717";
+        readonly 950: "#0A0A0A";
+    };
+    readonly stone: {
+        readonly 50: "#FAFAF9";
+        readonly 100: "#F5F5F4";
+        readonly 200: "#E7E5E4";
+        readonly 300: "#D6D3D1";
+        readonly 400: "#A8A29E";
+        readonly 500: "#78716C";
+        readonly 600: "#57534E";
+        readonly 700: "#44403C";
+        readonly 800: "#292524";
+        readonly 900: "#1C1917";
+        readonly 950: "#0C0A09";
+    };
+    readonly pertamina: {
+        readonly red: "#ED1B2F";
+        readonly blue: "#006CB8";
+        readonly green: "#ACC42A";
+    };
+    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 warning: {
+        readonly 50: "#FEFCE8";
+        readonly 100: "#FEF9C3";
+        readonly 200: "#FEF08A";
+        readonly 300: "#FDE047";
+        readonly 400: "#FACC15";
+        readonly 500: "#EAB308";
+        readonly 600: "#CA8A04";
+        readonly 700: "#A16207";
+        readonly 800: "#854D0E";
+        readonly 900: "#713F12";
+    };
+    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 info: {
+        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";
+    };
+};
+declare const typography: {
+    readonly fontFamily: {
+        readonly sans: "\"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
+        readonly serif: "\"Inter\", Georgia, \"Times New Roman\", serif";
+        readonly mono: "\"Manrope\", \"Fira Code\", Consolas, Monaco, monospace";
+    };
+    readonly fontSize: {
+        readonly xs: "0.75rem";
+        readonly sm: "0.875rem";
+        readonly base: "1rem";
+        readonly lg: "1.125rem";
+        readonly xl: "1.25rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "1.875rem";
+        readonly '4xl': "2.25rem";
+        readonly '5xl': "3rem";
+        readonly '6xl': "3.75rem";
+        readonly '7xl': "4.5rem";
+        readonly '8xl': "6rem";
+        readonly '9xl': "8rem";
+    };
+    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 lineHeight: {
+        readonly 3: "0.75rem";
+        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 none: "1";
+        readonly tight: "1.25";
+        readonly snug: "1.375";
+        readonly normal: "1.5";
+        readonly relaxed: "1.625";
+        readonly loose: "2";
+    };
+    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";
+    };
+};
+declare const spacing: {
+    readonly 0: "0px";
+    readonly px: "1px";
+    readonly 0.5: "2px";
+    readonly 1: "4px";
+    readonly 1.5: "6px";
+    readonly 2: "8px";
+    readonly 2.5: "10px";
+    readonly 3: "12px";
+    readonly 3.5: "14px";
+    readonly 4: "16px";
+    readonly 5: "20px";
+    readonly 6: "24px";
+    readonly 7: "28px";
+    readonly 8: "32px";
+    readonly 9: "36px";
+    readonly 10: "40px";
+    readonly 11: "44px";
+    readonly 12: "48px";
+    readonly 14: "56px";
+    readonly 16: "64px";
+    readonly 18: "72px";
+    readonly 20: "80px";
+    readonly 24: "96px";
+    readonly 28: "112px";
+    readonly 32: "128px";
+    readonly 64: "256px";
+};
+declare const borderRadius: {
+    readonly none: "0px";
+    readonly sm: "2px";
+    readonly DEFAULT: "4px";
+    readonly md: "6px";
+    readonly lg: "8px";
+    readonly xl: "12px";
+    readonly '2xl': "16px";
+    readonly '3xl': "24px";
+    readonly full: "9999px";
+};
+declare const opacity: {
+    readonly 0: "0";
+    readonly 5: "0.05";
+    readonly 10: "0.1";
+    readonly 20: "0.2";
+    readonly 25: "0.25";
+    readonly 30: "0.3";
+    readonly 40: "0.4";
+    readonly 50: "0.5";
+    readonly 60: "0.6";
+    readonly 70: "0.7";
+    readonly 80: "0.8";
+    readonly 90: "0.9";
+    readonly 95: "0.95";
+    readonly 100: "1";
+};
+declare const maxWidth: {
+    readonly xs: "320px";
+    readonly sm: "384px";
+    readonly md: "448px";
+    readonly lg: "512px";
+    readonly xl: "576px";
+    readonly '2xl': "672px";
+    readonly '3xl': "768px";
+    readonly '4xl': "896px";
+    readonly '5xl': "1024px";
+    readonly '6xl': "1152px";
+    readonly '7xl': "1280px";
+    readonly 'screen-sm': "640px";
+    readonly 'screen-md': "768px";
+    readonly 'screen-lg': "1024px";
+    readonly 'screen-xl': "1280px";
+    readonly 'screen-2xl': "1536px";
+};
+declare const shadows: {
+    readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+    readonly DEFAULT: "0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10)";
+    readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10)";
+    readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10)";
+    readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10)";
+    readonly '2xl': "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+    readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)";
+    readonly none: "0 0 #0000";
+};
+declare const motion: {
+    readonly duration: {
+        readonly instant: "0ms";
+        readonly fast: "150ms";
+        readonly normal: "250ms";
+        readonly slow: "350ms";
+        readonly slower: "500ms";
+    };
+    readonly easing: {
+        readonly linear: "linear";
+        readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+        readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+        readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+        readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    };
+};
+declare const breakpoints: {
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly '2xl': "1536px";
+};
+declare const zIndex: {
+    readonly hide: "-1";
+    readonly base: "0";
+    readonly dropdown: "1000";
+    readonly sticky: "1020";
+    readonly fixed: "1030";
+    readonly modalBackdrop: "1040";
+    readonly modal: "1050";
+    readonly popover: "1060";
+    readonly tooltip: "1070";
+    readonly toast: "1080";
+};
+declare const tokens: {
+    readonly colors: {
+        readonly brand: {
+            readonly 50: "#E6F0FE";
+            readonly 100: "#D9E9FE";
+            readonly 200: "#B0D1FD";
+            readonly 300: "#016BF8";
+            readonly 400: "#0160DF";
+            readonly 500: "#0156C6";
+            readonly 600: "#0150BA";
+            readonly 700: "#014095";
+            readonly 800: "#003070";
+            readonly 900: "#002557";
+        };
+        readonly base: {
+            readonly black: "#000000";
+            readonly white: "#FFFFFF";
+        };
+        readonly slate: {
+            readonly 50: "#F8FAFC";
+            readonly 100: "#F1F5F9";
+            readonly 200: "#E2E8F0";
+            readonly 300: "#CBD5E1";
+            readonly 400: "#94A3B8";
+            readonly 500: "#64748B";
+            readonly 600: "#475569";
+            readonly 700: "#334155";
+            readonly 800: "#1E293B";
+            readonly 900: "#0F172A";
+            readonly 950: "#020617";
+        };
+        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 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: "#FEF9C3";
+            readonly 200: "#FEF08A";
+            readonly 300: "#FDE047";
+            readonly 400: "#FACC15";
+            readonly 500: "#EAB308";
+            readonly 600: "#CA8A04";
+            readonly 700: "#A16207";
+            readonly 800: "#854D0E";
+            readonly 900: "#713F12";
+            readonly 950: "#422006";
+        };
+        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 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 zinc: {
+            readonly 50: "#FAFAFA";
+            readonly 100: "#F4F4F5";
+            readonly 200: "#E4E4E7";
+            readonly 300: "#D4D4D8";
+            readonly 400: "#A1A1AA";
+            readonly 500: "#71717A";
+            readonly 600: "#52525B";
+            readonly 700: "#3F3F46";
+            readonly 800: "#27272A";
+            readonly 900: "#18181B";
+            readonly 950: "#09090B";
+        };
+        readonly neutral: {
+            readonly 50: "#FAFAFA";
+            readonly 100: "#F5F5F5";
+            readonly 200: "#E5E5E5";
+            readonly 300: "#D4D4D4";
+            readonly 400: "#A3A3A3";
+            readonly 500: "#737373";
+            readonly 600: "#525252";
+            readonly 700: "#404040";
+            readonly 800: "#262626";
+            readonly 900: "#171717";
+            readonly 950: "#0A0A0A";
+        };
+        readonly stone: {
+            readonly 50: "#FAFAF9";
+            readonly 100: "#F5F5F4";
+            readonly 200: "#E7E5E4";
+            readonly 300: "#D6D3D1";
+            readonly 400: "#A8A29E";
+            readonly 500: "#78716C";
+            readonly 600: "#57534E";
+            readonly 700: "#44403C";
+            readonly 800: "#292524";
+            readonly 900: "#1C1917";
+            readonly 950: "#0C0A09";
+        };
+        readonly pertamina: {
+            readonly red: "#ED1B2F";
+            readonly blue: "#006CB8";
+            readonly green: "#ACC42A";
+        };
+        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 warning: {
+            readonly 50: "#FEFCE8";
+            readonly 100: "#FEF9C3";
+            readonly 200: "#FEF08A";
+            readonly 300: "#FDE047";
+            readonly 400: "#FACC15";
+            readonly 500: "#EAB308";
+            readonly 600: "#CA8A04";
+            readonly 700: "#A16207";
+            readonly 800: "#854D0E";
+            readonly 900: "#713F12";
+        };
+        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 info: {
+            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 typography: {
+        readonly fontFamily: {
+            readonly sans: "\"Geist\", -apple-system, BlinkMacSystemFont, \"Segoe UI\", sans-serif";
+            readonly serif: "\"Inter\", Georgia, \"Times New Roman\", serif";
+            readonly mono: "\"Manrope\", \"Fira Code\", Consolas, Monaco, monospace";
+        };
+        readonly fontSize: {
+            readonly xs: "0.75rem";
+            readonly sm: "0.875rem";
+            readonly base: "1rem";
+            readonly lg: "1.125rem";
+            readonly xl: "1.25rem";
+            readonly '2xl': "1.5rem";
+            readonly '3xl': "1.875rem";
+            readonly '4xl': "2.25rem";
+            readonly '5xl': "3rem";
+            readonly '6xl': "3.75rem";
+            readonly '7xl': "4.5rem";
+            readonly '8xl': "6rem";
+            readonly '9xl': "8rem";
+        };
+        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 lineHeight: {
+            readonly 3: "0.75rem";
+            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 none: "1";
+            readonly tight: "1.25";
+            readonly snug: "1.375";
+            readonly normal: "1.5";
+            readonly relaxed: "1.625";
+            readonly loose: "2";
+        };
+        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: "2px";
+        readonly 1: "4px";
+        readonly 1.5: "6px";
+        readonly 2: "8px";
+        readonly 2.5: "10px";
+        readonly 3: "12px";
+        readonly 3.5: "14px";
+        readonly 4: "16px";
+        readonly 5: "20px";
+        readonly 6: "24px";
+        readonly 7: "28px";
+        readonly 8: "32px";
+        readonly 9: "36px";
+        readonly 10: "40px";
+        readonly 11: "44px";
+        readonly 12: "48px";
+        readonly 14: "56px";
+        readonly 16: "64px";
+        readonly 18: "72px";
+        readonly 20: "80px";
+        readonly 24: "96px";
+        readonly 28: "112px";
+        readonly 32: "128px";
+        readonly 64: "256px";
+    };
+    readonly borderRadius: {
+        readonly none: "0px";
+        readonly sm: "2px";
+        readonly DEFAULT: "4px";
+        readonly md: "6px";
+        readonly lg: "8px";
+        readonly xl: "12px";
+        readonly '2xl': "16px";
+        readonly '3xl': "24px";
+        readonly full: "9999px";
+    };
+    readonly opacity: {
+        readonly 0: "0";
+        readonly 5: "0.05";
+        readonly 10: "0.1";
+        readonly 20: "0.2";
+        readonly 25: "0.25";
+        readonly 30: "0.3";
+        readonly 40: "0.4";
+        readonly 50: "0.5";
+        readonly 60: "0.6";
+        readonly 70: "0.7";
+        readonly 80: "0.8";
+        readonly 90: "0.9";
+        readonly 95: "0.95";
+        readonly 100: "1";
+    };
+    readonly maxWidth: {
+        readonly xs: "320px";
+        readonly sm: "384px";
+        readonly md: "448px";
+        readonly lg: "512px";
+        readonly xl: "576px";
+        readonly '2xl': "672px";
+        readonly '3xl': "768px";
+        readonly '4xl': "896px";
+        readonly '5xl': "1024px";
+        readonly '6xl': "1152px";
+        readonly '7xl': "1280px";
+        readonly 'screen-sm': "640px";
+        readonly 'screen-md': "768px";
+        readonly 'screen-lg': "1024px";
+        readonly 'screen-xl': "1280px";
+        readonly 'screen-2xl': "1536px";
+    };
+    readonly shadows: {
+        readonly sm: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+        readonly DEFAULT: "0 1px 3px 0 rgba(0, 0, 0, 0.10), 0 1px 2px -1px rgba(0, 0, 0, 0.10)";
+        readonly md: "0 4px 6px -1px rgba(0, 0, 0, 0.10), 0 2px 4px -2px rgba(0, 0, 0, 0.10)";
+        readonly lg: "0 10px 15px -3px rgba(0, 0, 0, 0.10), 0 4px 6px -4px rgba(0, 0, 0, 0.10)";
+        readonly xl: "0 20px 25px -5px rgba(0, 0, 0, 0.10), 0 8px 10px -6px rgba(0, 0, 0, 0.10)";
+        readonly '2xl': "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+        readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.05)";
+        readonly none: "0 0 #0000";
+    };
+    readonly motion: {
+        readonly duration: {
+            readonly instant: "0ms";
+            readonly fast: "150ms";
+            readonly normal: "250ms";
+            readonly slow: "350ms";
+            readonly slower: "500ms";
+        };
+        readonly easing: {
+            readonly linear: "linear";
+            readonly easeIn: "cubic-bezier(0.4, 0, 1, 1)";
+            readonly easeOut: "cubic-bezier(0, 0, 0.2, 1)";
+            readonly easeInOut: "cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+        };
+    };
+    readonly breakpoints: {
+        readonly sm: "640px";
+        readonly md: "768px";
+        readonly lg: "1024px";
+        readonly xl: "1280px";
+        readonly '2xl': "1536px";
+    };
+    readonly zIndex: {
+        readonly hide: "-1";
+        readonly base: "0";
+        readonly dropdown: "1000";
+        readonly sticky: "1020";
+        readonly fixed: "1030";
+        readonly modalBackdrop: "1040";
+        readonly modal: "1050";
+        readonly popover: "1060";
+        readonly tooltip: "1070";
+        readonly toast: "1080";
+    };
+};
+
+export { borderRadius, breakpoints, colors, tokens as default, maxWidth, motion, opacity, shadows, spacing, tokens, typography, zIndex };