@enterprise-ui-react/react 1.0.6

package/dist/tokens/index.d.ts

@@ -0,0 +1,725 @@
+/**
+ * Enterprise UI Color Tokens
+ * Battle-tested color palette based on industry standards (Microsoft, Atlassian, IBM)
+ *
+ * Design Principles:
+ * - Neutral-first design
+ * - Single primary color for actions
+ * - Low saturation for professionalism
+ * - WCAG 2.2 AA compliant contrast ratios
+ */
+declare const colors: {
+    readonly light: {
+        readonly background: {
+            readonly DEFAULT: "#F8FAFC";
+            readonly surface: "#FFFFFF";
+            readonly elevated: "#FFFFFF";
+            readonly overlay: "rgba(15, 23, 42, 0.5)";
+            readonly hover: "#F1F5F9";
+            readonly active: "#E2E8F0";
+        };
+        readonly border: {
+            readonly DEFAULT: "#E2E8F0";
+            readonly strong: "#CBD5E1";
+            readonly subtle: "#F1F5F9";
+            readonly focus: "#93C5FD";
+        };
+        readonly text: {
+            readonly primary: "#0F172A";
+            readonly secondary: "#475569";
+            readonly tertiary: "#64748B";
+            readonly disabled: "#94A3B8";
+            readonly inverse: "#FFFFFF";
+            readonly link: "#2563EB";
+            readonly linkHover: "#1D4ED8";
+        };
+        readonly primary: {
+            readonly DEFAULT: "#2563EB";
+            readonly hover: "#1D4ED8";
+            readonly active: "#1E40AF";
+            readonly disabled: "#93C5FD";
+            readonly text: "#FFFFFF";
+            readonly light: "#DBEAFE";
+            readonly lighter: "#EFF6FF";
+            readonly dark: "#1E3A8A";
+        };
+        readonly success: {
+            readonly DEFAULT: "#10B981";
+            readonly hover: "#059669";
+            readonly active: "#047857";
+            readonly disabled: "#86EFAC";
+            readonly text: "#FFFFFF";
+            readonly light: "#D1FAE5";
+            readonly lighter: "#ECFDF5";
+            readonly dark: "#065F46";
+        };
+        readonly warning: {
+            readonly DEFAULT: "#F59E0B";
+            readonly hover: "#D97706";
+            readonly active: "#B45309";
+            readonly disabled: "#FCD34D";
+            readonly text: "#FFFFFF";
+            readonly light: "#FEF3C7";
+            readonly lighter: "#FFFBEB";
+            readonly dark: "#92400E";
+        };
+        readonly error: {
+            readonly DEFAULT: "#EF4444";
+            readonly hover: "#DC2626";
+            readonly active: "#B91C1C";
+            readonly disabled: "#FCA5A5";
+            readonly text: "#FFFFFF";
+            readonly light: "#FEE2E2";
+            readonly lighter: "#FEF2F2";
+            readonly dark: "#991B1B";
+        };
+        readonly info: {
+            readonly DEFAULT: "#3B82F6";
+            readonly hover: "#2563EB";
+            readonly active: "#1D4ED8";
+            readonly disabled: "#93C5FD";
+            readonly text: "#FFFFFF";
+            readonly light: "#DBEAFE";
+            readonly lighter: "#EFF6FF";
+            readonly dark: "#1E40AF";
+        };
+    };
+    readonly dark: {
+        readonly background: {
+            readonly DEFAULT: "#0B1220";
+            readonly surface: "#111827";
+            readonly elevated: "#1F2937";
+            readonly overlay: "rgba(0, 0, 0, 0.7)";
+            readonly hover: "#1F2937";
+            readonly active: "#374151";
+        };
+        readonly border: {
+            readonly DEFAULT: "#374151";
+            readonly strong: "#4B5563";
+            readonly subtle: "#1F2937";
+            readonly focus: "#60A5FA";
+        };
+        readonly text: {
+            readonly primary: "#E5E7EB";
+            readonly secondary: "#9CA3AF";
+            readonly tertiary: "#6B7280";
+            readonly disabled: "#4B5563";
+            readonly inverse: "#0F172A";
+            readonly link: "#60A5FA";
+            readonly linkHover: "#93C5FD";
+        };
+        readonly primary: {
+            readonly DEFAULT: "#3B82F6";
+            readonly hover: "#60A5FA";
+            readonly active: "#93C5FD";
+            readonly disabled: "#1E40AF";
+            readonly text: "#FFFFFF";
+            readonly light: "#1E3A8A";
+            readonly lighter: "#1E40AF";
+            readonly dark: "#DBEAFE";
+        };
+        readonly success: {
+            readonly DEFAULT: "#10B981";
+            readonly hover: "#34D399";
+            readonly active: "#6EE7B7";
+            readonly disabled: "#065F46";
+            readonly text: "#FFFFFF";
+            readonly light: "#064E3B";
+            readonly lighter: "#065F46";
+            readonly dark: "#D1FAE5";
+        };
+        readonly warning: {
+            readonly DEFAULT: "#F59E0B";
+            readonly hover: "#FBBF24";
+            readonly active: "#FCD34D";
+            readonly disabled: "#92400E";
+            readonly text: "#FFFFFF";
+            readonly light: "#78350F";
+            readonly lighter: "#92400E";
+            readonly dark: "#FEF3C7";
+        };
+        readonly error: {
+            readonly DEFAULT: "#EF4444";
+            readonly hover: "#F87171";
+            readonly active: "#FCA5A5";
+            readonly disabled: "#991B1B";
+            readonly text: "#FFFFFF";
+            readonly light: "#7F1D1D";
+            readonly lighter: "#991B1B";
+            readonly dark: "#FEE2E2";
+        };
+        readonly info: {
+            readonly DEFAULT: "#3B82F6";
+            readonly hover: "#60A5FA";
+            readonly active: "#93C5FD";
+            readonly disabled: "#1E40AF";
+            readonly text: "#FFFFFF";
+            readonly light: "#1E3A8A";
+            readonly lighter: "#1E40AF";
+            readonly dark: "#DBEAFE";
+        };
+    };
+    readonly tealVariant: {
+        readonly primary: {
+            readonly DEFAULT: "#0F766E";
+            readonly hover: "#0D9488";
+            readonly active: "#14B8A6";
+            readonly light: "#CCFBF1";
+            readonly dark: "#134E4A";
+        };
+    };
+};
+type ColorToken = typeof colors;
+type ColorTheme = keyof typeof colors;
+
+/**
+ * Typography Design Tokens
+ * Professional, readable type system for enterprise applications
+ */
+declare const typography: {
+    readonly fontFamily: {
+        readonly sans: string;
+        readonly mono: string;
+    };
+    readonly fontSize: {
+        readonly xs: {
+            readonly size: "0.75rem";
+            readonly lineHeight: "1rem";
+        };
+        readonly sm: {
+            readonly size: "0.875rem";
+            readonly lineHeight: "1.25rem";
+        };
+        readonly base: {
+            readonly size: "1rem";
+            readonly lineHeight: "1.5rem";
+        };
+        readonly lg: {
+            readonly size: "1.125rem";
+            readonly lineHeight: "1.75rem";
+        };
+        readonly xl: {
+            readonly size: "1.25rem";
+            readonly lineHeight: "1.75rem";
+        };
+        readonly '2xl': {
+            readonly size: "1.5rem";
+            readonly lineHeight: "2rem";
+        };
+        readonly '3xl': {
+            readonly size: "1.875rem";
+            readonly lineHeight: "2.25rem";
+        };
+        readonly '4xl': {
+            readonly size: "2.25rem";
+            readonly lineHeight: "2.5rem";
+        };
+        readonly '5xl': {
+            readonly size: "3rem";
+            readonly lineHeight: "1.2";
+        };
+        readonly '6xl': {
+            readonly size: "3.75rem";
+            readonly lineHeight: "1.1";
+        };
+    };
+    readonly fontWeight: {
+        readonly normal: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly letterSpacing: {
+        readonly tight: "-0.025em";
+        readonly normal: "0";
+        readonly wide: "0.025em";
+    };
+    readonly textStyles: {
+        readonly h1: {
+            readonly fontSize: "3rem";
+            readonly lineHeight: "1.2";
+            readonly fontWeight: 700;
+            readonly letterSpacing: "-0.025em";
+        };
+        readonly h2: {
+            readonly fontSize: "2.25rem";
+            readonly lineHeight: "2.5rem";
+            readonly fontWeight: 700;
+            readonly letterSpacing: "-0.025em";
+        };
+        readonly h3: {
+            readonly fontSize: "1.875rem";
+            readonly lineHeight: "2.25rem";
+            readonly fontWeight: 600;
+            readonly letterSpacing: "-0.025em";
+        };
+        readonly h4: {
+            readonly fontSize: "1.5rem";
+            readonly lineHeight: "2rem";
+            readonly fontWeight: 600;
+        };
+        readonly h5: {
+            readonly fontSize: "1.25rem";
+            readonly lineHeight: "1.75rem";
+            readonly fontWeight: 600;
+        };
+        readonly h6: {
+            readonly fontSize: "1.125rem";
+            readonly lineHeight: "1.75rem";
+            readonly fontWeight: 600;
+        };
+        readonly bodyLarge: {
+            readonly fontSize: "1.125rem";
+            readonly lineHeight: "1.75rem";
+            readonly fontWeight: 400;
+        };
+        readonly body: {
+            readonly fontSize: "1rem";
+            readonly lineHeight: "1.5rem";
+            readonly fontWeight: 400;
+        };
+        readonly bodySmall: {
+            readonly fontSize: "0.875rem";
+            readonly lineHeight: "1.25rem";
+            readonly fontWeight: 400;
+        };
+        readonly label: {
+            readonly fontSize: "0.875rem";
+            readonly lineHeight: "1.25rem";
+            readonly fontWeight: 500;
+        };
+        readonly caption: {
+            readonly fontSize: "0.75rem";
+            readonly lineHeight: "1rem";
+            readonly fontWeight: 400;
+        };
+        readonly overline: {
+            readonly fontSize: "0.75rem";
+            readonly lineHeight: "1rem";
+            readonly fontWeight: 600;
+            readonly letterSpacing: "0.05em";
+            readonly textTransform: "uppercase";
+        };
+        readonly code: {
+            readonly fontSize: "0.875rem";
+            readonly lineHeight: "1.25rem";
+            readonly fontWeight: 400;
+            readonly fontFamily: string;
+        };
+    };
+};
+type TypographyToken = typeof typography;
+type TextStyle = keyof typeof typography.textStyles;
+
+/**
+ * Spacing Design Tokens
+ * Consistent spacing scale for layouts and components
+ */
+declare const spacing: {
+    readonly 0: "0";
+    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";
+};
+declare const semanticSpacing: {
+    readonly componentPaddingXs: "0.5rem";
+    readonly componentPaddingSm: "0.75rem";
+    readonly componentPaddingMd: "1rem";
+    readonly componentPaddingLg: "1.5rem";
+    readonly componentPaddingXl: "2rem";
+    readonly componentGapXs: "0.25rem";
+    readonly componentGapSm: "0.5rem";
+    readonly componentGapMd: "0.75rem";
+    readonly componentGapLg: "1rem";
+    readonly componentGapXl: "1.5rem";
+    readonly layoutGapXs: "1rem";
+    readonly layoutGapSm: "1.5rem";
+    readonly layoutGapMd: "2rem";
+    readonly layoutGapLg: "3rem";
+    readonly layoutGapXl: "4rem";
+    readonly sectionGapSm: "2rem";
+    readonly sectionGapMd: "3rem";
+    readonly sectionGapLg: "4rem";
+    readonly sectionGapXl: "6rem";
+};
+type Spacing = typeof spacing;
+type SpacingKey = keyof typeof spacing;
+type SemanticSpacing = typeof semanticSpacing;
+
+/**
+ * Border and Radius Design Tokens
+ * Consistent borders and corner radii
+ */
+declare const borders: {
+    readonly width: {
+        readonly none: "0";
+        readonly thin: "1px";
+        readonly medium: "2px";
+        readonly thick: "3px";
+        readonly heavy: "4px";
+    };
+    readonly radius: {
+        readonly none: "0";
+        readonly xs: "0.125rem";
+        readonly sm: "0.25rem";
+        readonly DEFAULT: "0.375rem";
+        readonly md: "0.5rem";
+        readonly lg: "0.75rem";
+        readonly xl: "1rem";
+        readonly '2xl': "1.5rem";
+        readonly '3xl': "2rem";
+        readonly full: "9999px";
+    };
+    readonly style: {
+        readonly solid: "solid";
+        readonly dashed: "dashed";
+        readonly dotted: "dotted";
+    };
+};
+declare const semanticBorders: {
+    readonly inputDefault: {
+        readonly width: "1px";
+        readonly style: "solid";
+        readonly radius: "0.5rem";
+    };
+    readonly inputFocus: {
+        readonly width: "2px";
+        readonly style: "solid";
+        readonly radius: "0.5rem";
+    };
+    readonly card: {
+        readonly width: "1px";
+        readonly style: "solid";
+        readonly radius: "0.75rem";
+    };
+    readonly button: {
+        readonly width: "1px";
+        readonly style: "solid";
+        readonly radius: "0.5rem";
+    };
+    readonly modal: {
+        readonly width: "0";
+        readonly style: "solid";
+        readonly radius: "1rem";
+    };
+};
+type Borders = typeof borders;
+type SemanticBorders = typeof semanticBorders;
+
+/**
+ * Shadow Design Tokens
+ * Elevation system for depth and hierarchy
+ */
+declare const shadows: {
+    readonly none: "none";
+    readonly xs: "0 1px 2px 0 rgba(0, 0, 0, 0.05)";
+    readonly sm: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)";
+    readonly DEFAULT: "0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)";
+    readonly md: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+    readonly lg: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
+    readonly xl: "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+    readonly '2xl': "0 30px 60px -15px rgba(0, 0, 0, 0.3)";
+    readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.06)";
+};
+declare const darkShadows: {
+    readonly none: "none";
+    readonly xs: "0 1px 2px 0 rgba(0, 0, 0, 0.3)";
+    readonly sm: "0 1px 3px 0 rgba(0, 0, 0, 0.4), 0 1px 2px 0 rgba(0, 0, 0, 0.3)";
+    readonly DEFAULT: "0 4px 6px -1px rgba(0, 0, 0, 0.4), 0 2px 4px -1px rgba(0, 0, 0, 0.3)";
+    readonly md: "0 10px 15px -3px rgba(0, 0, 0, 0.5), 0 4px 6px -2px rgba(0, 0, 0, 0.3)";
+    readonly lg: "0 20px 25px -5px rgba(0, 0, 0, 0.6), 0 10px 10px -5px rgba(0, 0, 0, 0.4)";
+    readonly xl: "0 25px 50px -12px rgba(0, 0, 0, 0.7)";
+    readonly '2xl': "0 30px 60px -15px rgba(0, 0, 0, 0.8)";
+    readonly inner: "inset 0 2px 4px 0 rgba(0, 0, 0, 0.3)";
+};
+declare const elevation: {
+    readonly flat: "none";
+    readonly raised: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)";
+    readonly floating: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+    readonly overlay: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
+    readonly modal: "0 25px 50px -12px rgba(0, 0, 0, 0.25)";
+    readonly popover: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04)";
+    readonly dropdown: "0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05)";
+    readonly tooltip: "0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06)";
+};
+type Shadows = typeof shadows;
+type DarkShadows = typeof darkShadows;
+type Elevation = typeof elevation;
+
+/**
+ * Breakpoint Design Tokens
+ * Responsive design breakpoints
+ */
+declare const breakpoints: {
+    readonly xs: "320px";
+    readonly sm: "640px";
+    readonly md: "768px";
+    readonly lg: "1024px";
+    readonly xl: "1280px";
+    readonly '2xl': "1536px";
+    readonly '3xl': "1920px";
+};
+declare const breakpointValues: {
+    readonly xs: 320;
+    readonly sm: 640;
+    readonly md: 768;
+    readonly lg: 1024;
+    readonly xl: 1280;
+    readonly '2xl': 1536;
+    readonly '3xl': 1920;
+};
+declare const mediaQueries: {
+    readonly xs: "@media (min-width: 320px)";
+    readonly sm: "@media (min-width: 640px)";
+    readonly md: "@media (min-width: 768px)";
+    readonly lg: "@media (min-width: 1024px)";
+    readonly xl: "@media (min-width: 1280px)";
+    readonly '2xl': "@media (min-width: 1536px)";
+    readonly '3xl': "@media (min-width: 1920px)";
+};
+type Breakpoint = keyof typeof breakpoints;
+type BreakpointValue = typeof breakpointValues[Breakpoint];
+
+/**
+ * Motion Design Tokens
+ * Animation durations, easings, and presets
+ */
+declare const motion: {
+    readonly duration: {
+        readonly instant: "0ms";
+        readonly fast: "100ms";
+        readonly normal: "200ms";
+        readonly moderate: "300ms";
+        readonly slow: "400ms";
+        readonly slower: "500ms";
+        readonly slowest: "600ms";
+    };
+    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 sharp: "cubic-bezier(0.4, 0, 0.6, 1)";
+        readonly spring: "cubic-bezier(0.34, 1.56, 0.64, 1)";
+    };
+    readonly variants: {
+        readonly fadeIn: {
+            readonly initial: {
+                readonly opacity: 0;
+            };
+            readonly animate: {
+                readonly opacity: 1;
+            };
+            readonly exit: {
+                readonly opacity: 0;
+            };
+            readonly transition: {
+                readonly duration: 0.2;
+            };
+        };
+        readonly fadeOut: {
+            readonly initial: {
+                readonly opacity: 1;
+            };
+            readonly animate: {
+                readonly opacity: 0;
+            };
+            readonly exit: {
+                readonly opacity: 1;
+            };
+            readonly transition: {
+                readonly duration: 0.2;
+            };
+        };
+        readonly slideInRight: {
+            readonly initial: {
+                readonly x: "100%";
+                readonly opacity: 0;
+            };
+            readonly animate: {
+                readonly x: 0;
+                readonly opacity: 1;
+            };
+            readonly exit: {
+                readonly x: "100%";
+                readonly opacity: 0;
+            };
+            readonly transition: {
+                readonly duration: 0.3;
+                readonly ease: readonly [0, 0, 0.2, 1];
+            };
+        };
+        readonly slideInLeft: {
+            readonly initial: {
+                readonly x: "-100%";
+                readonly opacity: 0;
+            };
+            readonly animate: {
+                readonly x: 0;
+                readonly opacity: 1;
+            };
+            readonly exit: {
+                readonly x: "-100%";
+                readonly opacity: 0;
+            };
+            readonly transition: {
+                readonly duration: 0.3;
+                readonly ease: readonly [0, 0, 0.2, 1];
+            };
+        };
+        readonly slideInUp: {
+            readonly initial: {
+                readonly y: "100%";
+                readonly opacity: 0;
+            };
+            readonly animate: {
+                readonly y: 0;
+                readonly opacity: 1;
+            };
+            readonly exit: {
+                readonly y: "100%";
+                readonly opacity: 0;
+            };
+            readonly transition: {
+                readonly duration: 0.3;
+                readonly ease: readonly [0, 0, 0.2, 1];
+            };
+        };
+        readonly slideInDown: {
+            readonly initial: {
+                readonly y: "-100%";
+                readonly opacity: 0;
+            };
+            readonly animate: {
+                readonly y: 0;
+                readonly opacity: 1;
+            };
+            readonly exit: {
+                readonly y: "-100%";
+                readonly opacity: 0;
+            };
+            readonly transition: {
+                readonly duration: 0.3;
+                readonly ease: readonly [0, 0, 0.2, 1];
+            };
+        };
+        readonly scaleIn: {
+            readonly initial: {
+                readonly scale: 0.95;
+                readonly opacity: 0;
+            };
+            readonly animate: {
+                readonly scale: 1;
+                readonly opacity: 1;
+            };
+            readonly exit: {
+                readonly scale: 0.95;
+                readonly opacity: 0;
+            };
+            readonly transition: {
+                readonly duration: 0.2;
+                readonly ease: readonly [0, 0, 0.2, 1];
+            };
+        };
+        readonly scaleOut: {
+            readonly initial: {
+                readonly scale: 1;
+                readonly opacity: 1;
+            };
+            readonly animate: {
+                readonly scale: 0.95;
+                readonly opacity: 0;
+            };
+            readonly exit: {
+                readonly scale: 1;
+                readonly opacity: 1;
+            };
+            readonly transition: {
+                readonly duration: 0.2;
+                readonly ease: readonly [0.4, 0, 1, 1];
+            };
+        };
+    };
+    readonly microInteractions: {
+        readonly buttonPress: {
+            readonly scale: 0.98;
+            readonly transition: {
+                readonly duration: 0.1;
+            };
+        };
+        readonly buttonHover: {
+            readonly scale: 1.02;
+            readonly transition: {
+                readonly duration: 0.2;
+            };
+        };
+        readonly cardHover: {
+            readonly y: -4;
+            readonly transition: {
+                readonly duration: 0.2;
+            };
+        };
+        readonly ripple: {
+            readonly scale: readonly [0, 1];
+            readonly opacity: readonly [0.5, 0];
+            readonly transition: {
+                readonly duration: 0.6;
+            };
+        };
+    };
+};
+type Motion = typeof motion;
+type MotionVariant = keyof typeof motion.variants;
+
+/**
+ * Z-Index Design Tokens
+ * Stacking order for layered UI elements
+ */
+declare const zIndex: {
+    readonly base: 0;
+    readonly dropdown: 1000;
+    readonly sticky: 1100;
+    readonly fixed: 1200;
+    readonly popover: 1300;
+    readonly tooltip: 1400;
+    readonly overlay: 1500;
+    readonly modal: 1600;
+    readonly toast: 1700;
+    readonly commandPalette: 1800;
+    readonly contextMenu: 1900;
+    readonly max: 2147483647;
+};
+type ZIndex = typeof zIndex;
+type ZIndexKey = keyof typeof zIndex;
+
+export { type Borders, type Breakpoint, type BreakpointValue, type ColorTheme, type ColorToken, type DarkShadows, type Elevation, type Motion, type MotionVariant, type SemanticBorders, type SemanticSpacing, type Shadows, type Spacing, type SpacingKey, type TextStyle, type TypographyToken, type ZIndex, type ZIndexKey, borders, breakpointValues, breakpoints, colors, darkShadows, elevation, mediaQueries, motion, semanticBorders, semanticSpacing, shadows, spacing, typography, zIndex };