squarex-ui-component-lib 1.0.4 → 1.0.5

package/dist/tokens/utils/hooks.d.ts

@@ -0,0 +1,773 @@
+/**
+ * React Hooks for Design Tokens
+ * Provides easy access to tokens and theming in React components
+ */
+import { type ThemeMode, type Theme } from '../index';
+/**
+ * Hook to access design tokens
+ * @returns The tokens object
+ *
+ * @example
+ * const MyComponent = () => {
+ *   const tokens = useTokens();
+ *   return <div style={{ color: tokens.color.text.brand.default }}>Hello</div>;
+ * };
+ */
+export declare function useTokens(): {
+    readonly color: {
+        readonly background: {
+            readonly brand: {
+                readonly default: "#8851bf";
+                readonly secondary: "#b897d9";
+                readonly tertiary: "#dbcbec";
+                readonly hover: "#6d4199";
+                readonly secondaryHover: "#a074cc";
+                readonly tertiaryHover: "#cfb9e5";
+                readonly subtleLow: "rgba(136, 81, 191, 0.08)";
+                readonly subtleMedium: "rgba(136, 81, 191, 0.08)";
+            };
+            readonly action: {
+                readonly default: "#4432bf";
+                readonly secondary: "#8f84d9";
+                readonly tertiary: "#dad6f2";
+                readonly hover: "#695bcc";
+                readonly secondaryHover: "#695bcc";
+                readonly tertiaryHover: "#c7c1ec";
+                readonly subtleLow: "rgba(68, 50, 191, 0.08)";
+                readonly subtleMedium: "rgba(68, 50, 191, 0.08)";
+            };
+            readonly success: {
+                readonly default: "#14ae5c";
+                readonly secondary: "#a1dfbe";
+                readonly tertiary: "#e7f7ef";
+                readonly hover: "#108b4a";
+                readonly secondaryHover: "#72ce9d";
+                readonly tertiaryHover: "#a1dfbe";
+                readonly subtleLow: "#a1dfbe";
+                readonly subtleMedium: "#a1dfbe";
+            };
+            readonly warning: {
+                readonly default: "#faca0a";
+                readonly secondary: "#fcdf6c";
+                readonly tertiary: "#fdefb5";
+                readonly hover: "#c8a208";
+                readonly secondaryHover: "#fbd53b";
+                readonly tertiaryHover: "#fdea9d";
+                readonly subtleLow: "#fdea9d";
+                readonly subtleMedium: "#fdea9d";
+            };
+            readonly danger: {
+                readonly default: "#f04e4c";
+                readonly secondary: "#f7a7a5";
+                readonly tertiary: "#fde9e9";
+                readonly hover: "#bd1b19";
+                readonly secondaryHover: "#f47a79";
+                readonly tertiaryHover: "#f9bdbc";
+                readonly subtleLow: "rgba(236, 34, 31, 0.08)";
+                readonly subtleMedium: "rgba(236, 34, 31, 0.08)";
+            };
+            readonly info: {
+                readonly default: "#0c8cf5";
+                readonly secondary: "#6dbaf9";
+                readonly tertiary: "#cee8fd";
+                readonly hover: "#0a70c4";
+                readonly secondaryHover: "#3da3f7";
+                readonly tertiaryHover: "#9ed1fb";
+                readonly subtleLow: "#9ed1fb";
+                readonly subtleMedium: "#9ed1fb";
+            };
+            readonly neutral: {
+                readonly default: "#768494";
+                readonly secondary: "#adb5bf";
+                readonly tertiary: "#e4e6ea";
+                readonly hover: "#5e6a76";
+                readonly secondaryHover: "#919da9";
+                readonly tertiaryHover: "#c8ced4";
+                readonly subtleLow: "rgba(118, 132, 148, 0.08)";
+                readonly subtleMedium: "rgba(118, 132, 148, 0.16)";
+            };
+            readonly default: {
+                readonly default: "#f1f3f4";
+                readonly hover: "#e4e6ea";
+                readonly glass: "rgba(255, 255, 255, 0.30)";
+                readonly onGlass: "rgba(255, 255, 255, 0.60)";
+                readonly onGlassSecondary: "rgba(255, 255, 255, 0.70)";
+                readonly onGlassTertiary: "rgba(255, 255, 255, 0.80)";
+                readonly onGlassHover: "rgba(255, 255, 255, 0.80)";
+            };
+            readonly disabled: {
+                readonly default: "#dbdbdb";
+                readonly secondary: "#ededed";
+            };
+            readonly utilities: {
+                readonly scrim: "rgba(255, 255, 255, 0.7)";
+                readonly overlay: "rgba(0, 0, 0, 0.5)";
+                readonly blanket: "rgba(0, 0, 0, 0.7)";
+                readonly bgOnGlass: "rgba(255, 255, 255, 0.45)";
+                readonly bgOnGlassOnGlass: "rgba(255, 255, 255, 0.6)";
+                readonly hoverOverlay: "rgba(0, 0, 0, 0.2)";
+            };
+        };
+        readonly text: {
+            readonly default: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#adb5bf";
+            };
+            readonly brand: {
+                readonly default: "#8851bf";
+                readonly secondary: "#b897d9";
+                readonly tertiary: "#dbcbec";
+                readonly onBrand: "#f3eef9";
+                readonly onBrandSecondary: "#36204c";
+                readonly onBrandTertiary: "#6d4199";
+            };
+            readonly action: {
+                readonly default: "#4432bf";
+                readonly secondary: "#8f84d9";
+                readonly tertiary: "#c7c1ec";
+                readonly onAction: "#eceaf9";
+                readonly onActionSecondary: "#291e73";
+                readonly onActionTertiary: "#362899";
+            };
+            readonly success: {
+                readonly default: "#084625";
+                readonly secondary: "#108b4a";
+                readonly tertiary: "#14ae5c";
+                readonly onSuccess: "#e7f7ef";
+                readonly onSuccessSecondary: "#0c6837";
+                readonly onSuccessTertiary: "#084625";
+            };
+            readonly warning: {
+                readonly default: "#4b3d03";
+                readonly secondary: "#967906";
+                readonly tertiary: "#c8a208";
+                readonly onWarning: "#4b3d03";
+                readonly onWarningSecondary: "#645104";
+                readonly onWarningTertiary: "#967906";
+            };
+            readonly danger: {
+                readonly default: "#ec221f";
+                readonly secondary: "#f04e4c";
+                readonly tertiary: "#f47a79";
+                readonly onDanger: "#fde9e9";
+                readonly onDangerSecondary: "#5e0e0c";
+                readonly onDangerTertiary: "#bd1b19";
+            };
+            readonly info: {
+                readonly default: "#0c8cf5";
+                readonly secondary: "#6dbaf9";
+                readonly tertiary: "#b6ddfc";
+                readonly onInfo: "#e7f3fe";
+                readonly onInfoSecondary: "#053862";
+                readonly onInfoTertiary: "#0a70c4";
+            };
+            readonly neutral: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#adb5bf";
+                readonly onNeutral: "#f1f3f4";
+                readonly onNeutralSecondary: "#2f353b";
+                readonly onNeutralTertiary: "#5e6a76";
+            };
+            readonly disabled: {
+                readonly default: "#b8b8b8";
+                readonly secondary: "#cacaca";
+                readonly onDisabled: "#a6a6a6";
+                readonly onDisabledSecondary: "#cacaca";
+            };
+            readonly utilities: {
+                readonly onOverlay: "rgba(12, 12, 13, 1.00)";
+            };
+        };
+        readonly border: {
+            readonly default: {
+                readonly default: "#ffffff";
+                readonly secondary: "#d6dadf";
+                readonly tertiary: "#768494";
+                readonly subtleLow: "rgba(255, 255, 255, 0.80)";
+                readonly subtleMedium: "rgba(118, 132, 148, 0.16)";
+                readonly subtleHigh: "rgba(255, 255, 255, 0.40)";
+            };
+            readonly brand: {
+                readonly default: "#cfb9e5";
+                readonly secondary: "#b897d9";
+                readonly tertiary: "#dbcbec";
+                readonly onBrand: "#f3eef9";
+                readonly onBrandSecondary: "#36204c";
+                readonly onBrandTertiary: "#6d4199";
+            };
+            readonly action: {
+                readonly default: "#4432bf";
+                readonly secondary: "#8f84d9";
+                readonly tertiary: "#c7c1ec";
+                readonly onAction: "#eceaf9";
+                readonly onActionSecondary: "#362899";
+                readonly onActionTertiary: "#1b144c";
+            };
+            readonly success: {
+                readonly default: "#084625";
+                readonly secondary: "#108b4a";
+                readonly tertiary: "#14ae5c";
+            };
+            readonly warning: {
+                readonly default: "#645104";
+                readonly secondary: "#c8a208";
+                readonly tertiary: "#faca0a";
+            };
+            readonly danger: {
+                readonly default: "#ec221f";
+                readonly secondary: "#f47a79";
+                readonly tertiary: "#fbd3d2";
+                readonly onDanger: "#bd1b19";
+            };
+            readonly info: {
+                readonly default: "#0c8cf5";
+                readonly secondary: "#6dbaf9";
+                readonly tertiary: "#b6ddfc";
+            };
+            readonly neutral: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#c8ced4";
+                readonly onNeutral: "#f1f3f4";
+                readonly onNeutralSecondary: "#474f59";
+                readonly onNeutralTertiary: "#5e6a76";
+            };
+            readonly disabled: {
+                readonly default: "#b8b8b8";
+            };
+            readonly utilities: {
+                readonly swatch: "rgba(0, 0, 0, 0.24)";
+            };
+        };
+        readonly icon: {
+            readonly default: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#adb5bf";
+            };
+            readonly brand: {
+                readonly default: "#36204c";
+                readonly secondary: "#6d4199";
+                readonly tertiary: "#8851bf";
+                readonly onBrand: "#f3eef9";
+                readonly onBrandSecondary: "#36204c";
+                readonly onBrandTertiary: "#6d4199";
+            };
+            readonly action: {
+                readonly default: "#4432bf";
+                readonly secondary: "#8f84d9";
+                readonly tertiary: "#c7c1ec";
+                readonly onAction: "#eceaf9";
+                readonly onActionSecondary: "#291e73";
+                readonly onActionTertiary: "#362899";
+            };
+            readonly success: {
+                readonly default: "#14ae5c";
+                readonly secondary: "#a1dfbe";
+                readonly tertiary: "#d0efde";
+                readonly onSuccess: "#e7f7ef";
+                readonly onSuccessSecondary: "#0c6837";
+                readonly onSuccessTertiary: "#084625";
+            };
+            readonly warning: {
+                readonly default: "#faca0a";
+                readonly secondary: "#fcdf6c";
+                readonly tertiary: "#fdefb5";
+                readonly onWarning: "#191401";
+                readonly onWarningSecondary: "#645104";
+                readonly onWarningTertiary: "#4b3d03";
+            };
+            readonly danger: {
+                readonly default: "#ec221f";
+                readonly secondary: "#f04e4c";
+                readonly tertiary: "#f47a79";
+                readonly onDanger: "#fde9e9";
+                readonly onDangerSecondary: "#8e1413";
+                readonly onDangerTertiary: "#5e0e0c";
+            };
+            readonly info: {
+                readonly default: "#0c8cf5";
+                readonly secondary: "#6dbaf9";
+                readonly tertiary: "#b6ddfc";
+                readonly onInfo: "#010e19";
+                readonly onInfoSecondary: "#053862";
+                readonly onInfoTertiary: "#042a4a";
+            };
+            readonly neutral: {
+                readonly default: "#2f353b";
+                readonly secondary: "#768494";
+                readonly tertiary: "#adb5bf";
+                readonly onNeutral: "#f1f3f4";
+                readonly onNeutralSecondary: "#474f59";
+                readonly onNeutralTertiary: "#5e6a76";
+            };
+            readonly disabled: {
+                readonly default: "#b8b8b8";
+                readonly secondary: "#cacaca";
+                readonly onDisabled: "#a6a6a6";
+                readonly onDisabledSecondary: "#cacaca";
+            };
+            readonly utilities: {
+                readonly onOverlay: "rgba(12, 12, 13, 1.00)";
+            };
+        };
+    };
+    readonly typography: {
+        readonly heroTitle: {
+            readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+            readonly fontSize: 40;
+            readonly fontWeight: 700;
+            readonly lineHeight: 1.25;
+            readonly letterSpacing: "-0.01em";
+        };
+        readonly titlePage: {
+            readonly small: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 20;
+                readonly fontWeight: 700;
+                readonly lineHeight: 1.25;
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly base: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 24;
+                readonly fontWeight: 700;
+                readonly lineHeight: 1.25;
+                readonly letterSpacing: "-0.01em";
+            };
+            readonly large: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 28;
+                readonly fontWeight: 700;
+                readonly lineHeight: 1.25;
+                readonly letterSpacing: "-0.01em";
+            };
+        };
+        readonly heading: {
+            readonly small: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 16;
+                readonly fontWeight: 500;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+            readonly base: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 18;
+                readonly fontWeight: 500;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+            readonly large: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 20;
+                readonly fontWeight: 500;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+        };
+        readonly subheading: {
+            readonly small: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 14;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+            readonly base: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 16;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+            readonly large: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 18;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+        };
+        readonly subtitle: {
+            readonly small: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 18;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+            readonly base: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 20;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+            readonly large: {
+                readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly fontSize: 24;
+                readonly fontWeight: 400;
+                readonly lineHeight: 1.5;
+                readonly letterSpacing: "0";
+            };
+        };
+        readonly body: {
+            readonly xs: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 12;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.5;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 12;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.5;
+                    readonly letterSpacing: "0";
+                };
+            };
+            readonly s: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 13;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.75;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 13;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.75;
+                    readonly letterSpacing: "0";
+                };
+            };
+            readonly m: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 14;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.75;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 14;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.75;
+                    readonly letterSpacing: "0";
+                };
+            };
+            readonly l: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 16;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.75;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 16;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.75;
+                    readonly letterSpacing: "0";
+                };
+            };
+        };
+        readonly singleLine: {
+            readonly xxs: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 11;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 11;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+            };
+            readonly xs: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 12;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 12;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+            };
+            readonly s: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 13;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 13;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+            };
+            readonly m: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 14;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 14;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+            };
+            readonly l: {
+                readonly regular: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 16;
+                    readonly fontWeight: 400;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+                readonly strong: {
+                    readonly fontFamily: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                    readonly fontSize: 16;
+                    readonly fontWeight: 500;
+                    readonly lineHeight: 1.25;
+                    readonly letterSpacing: "0";
+                };
+            };
+        };
+        readonly code: {
+            readonly fontFamily: "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+            readonly fontSize: 13;
+            readonly fontWeight: 400;
+            readonly lineHeight: 1.75;
+            readonly letterSpacing: "0";
+        };
+    };
+    readonly spacing: {
+        readonly 0: 0;
+        readonly 50: 2;
+        readonly 100: 4;
+        readonly 150: 6;
+        readonly 200: 8;
+        readonly 300: 12;
+        readonly 400: 16;
+        readonly 500: 20;
+        readonly 600: 24;
+        readonly 800: 32;
+        readonly 1200: 48;
+        readonly 1600: 64;
+        readonly 2400: 96;
+        readonly 4000: 160;
+        readonly '-100': -4;
+        readonly '-200': -8;
+        readonly '-300': -12;
+        readonly '-400': -16;
+        readonly '-600': -24;
+    };
+    readonly radius: {
+        readonly none: 0;
+        readonly sm: 4;
+        readonly md: 8;
+        readonly lg: 12;
+        readonly xl: 16;
+        readonly full: 9999;
+    };
+    readonly borderWidth: {
+        readonly none: 0;
+        readonly thin: 1;
+        readonly medium: 1.5;
+        readonly thick: 2;
+    };
+    readonly depth: {
+        readonly 0: 0;
+        readonly 25: 1;
+        readonly 100: 4;
+        readonly 200: 8;
+        readonly 400: 16;
+        readonly 800: 32;
+        readonly 1200: 48;
+        readonly '-25': -1;
+        readonly '-100': -4;
+        readonly '-200': -8;
+        readonly '-400': -16;
+        readonly '-800': -32;
+        readonly '-1200': -48;
+    };
+    readonly iconSize: {
+        readonly sm: 24;
+        readonly md: 32;
+        readonly lg: 40;
+    };
+    readonly shadow: {
+        readonly xs: `0 1px ${number}px rgba(0, 0, 0, 0.1)`;
+        readonly sm: `0 2px ${number}px rgba(0, 0, 0, 0.12)`;
+        readonly md: `0 4px ${number}px rgba(0, 0, 0, 0.15)`;
+        readonly lg: `0 8px ${number}px rgba(0, 0, 0, 0.18)`;
+        readonly xl: `0 16px ${number}px rgba(0, 0, 0, 0.20)`;
+        readonly none: "none";
+    };
+    readonly blur: {
+        readonly none: "blur(0px)";
+        readonly soft: "blur(2px)";
+        readonly light: "blur(4px)";
+        readonly medium: "blur(8px)";
+        readonly heavy: "blur(12px)";
+        readonly intense: "blur(24px)";
+    };
+    readonly transition: {
+        readonly fast: "150ms ease-in-out";
+        readonly base: "250ms ease-in-out";
+        readonly slow: "350ms ease-in-out";
+        readonly verySlow: "500ms ease-in-out";
+    };
+    readonly duration: {
+        readonly instant: 100;
+        readonly fast: 150;
+        readonly base: 250;
+        readonly slow: 350;
+        readonly verySlow: 500;
+    };
+    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.68, -0.55, 0.265, 1.55)";
+    };
+    readonly breakpoint: {
+        readonly mobile: 375;
+        readonly tablet: 768;
+        readonly desktop: 1200;
+        readonly wide: 1440;
+    };
+    readonly media: {
+        readonly mobile: "@media (min-width: 375px)";
+        readonly tablet: "@media (min-width: 768px)";
+        readonly desktop: "@media (min-width: 1200px)";
+        readonly wide: "@media (min-width: 1440px)";
+    };
+    readonly fontFamily: {
+        readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+        readonly mono: "SFMono-Regular, Menlo, Monaco, Consolas, \"Liberation Mono\", \"Courier New\", monospace";
+    };
+    readonly fontWeight: {
+        readonly regular: 400;
+        readonly medium: 500;
+        readonly semibold: 600;
+        readonly bold: 700;
+    };
+    readonly fontSize: {
+        readonly scale01: 11;
+        readonly scale02: 12;
+        readonly scale03: 13;
+        readonly scale04: 14;
+        readonly scale05: 16;
+        readonly scale06: 18;
+        readonly scale07: 20;
+        readonly scale08: 24;
+        readonly scale09: 28;
+        readonly scale10: 32;
+        readonly scale11: 40;
+    };
+    readonly lineHeight: {
+        readonly tight: 1.25;
+        readonly normal: 1.5;
+        readonly relaxed: 1.75;
+    };
+    readonly letterSpacing: {
+        readonly tight: "-0.01em";
+        readonly normal: "0";
+        readonly wide: "0.01em";
+    };
+    readonly fontStyle: {
+        readonly normal: "normal";
+        readonly italic: "italic";
+    };
+};
+/**
+ * Hook for theme management
+ * @param defaultTheme - The default theme mode ('light' or 'dark')
+ * @param persist - Whether to persist theme preference to localStorage
+ *
+ * @example
+ * const MyApp = () => {
+ *   const { theme, themeMode, setTheme, toggleTheme } = useTheme('light', true);
+ *
+ *   return (
+ *     <div>
+ *       <p>Current theme: {themeMode}</p>
+ *       <button onClick={toggleTheme}>Toggle Theme</button>
+ *     </div>
+ *   );
+ * };
+ */
+export declare function useTheme(defaultTheme?: ThemeMode, persist?: boolean): {
+    theme: Theme;
+    themeMode: ThemeMode;
+    setTheme: (mode: ThemeMode) => void;
+    toggleTheme: () => void;
+};
+/**
+ * Hook to detect system color scheme preference
+ *
+ * @example
+ * const MyApp = () => {
+ *   const prefersDark = usePrefersDarkMode();
+ *   const { setTheme } = useTheme();
+ *
+ *   useEffect(() => {
+ *     setTheme(prefersDark ? 'dark' : 'light');
+ *   }, [prefersDark, setTheme]);
+ * };
+ */
+export declare function usePrefersDarkMode(): boolean;
+/**
+ * Hook to get responsive breakpoint information
+ *
+ * @example
+ * const MyComponent = () => {
+ *   const { isMobile, isTablet, isDesktop } = useBreakpoint();
+ *
+ *   return (
+ *     <div>
+ *       {isMobile && <MobileNav />}
+ *       {isDesktop && <DesktopNav />}
+ *     </div>
+ *   );
+ * };
+ */
+export declare function useBreakpoint(): {
+    isMobile: boolean;
+    isTablet: boolean;
+    isDesktop: boolean;
+    isWide: boolean;
+    width: number;
+};
+//# sourceMappingURL=hooks.d.ts.map