@vtx-ui/react 0.0.1-beta.1

package/dist/hooks/useTheme.d.ts

@@ -0,0 +1,268 @@
+/**
+ * Hook to access theme tokens and utilities
+ *
+ * @returns Theme tokens and theme mode setter
+ *
+ * @example
+ * ```tsx
+ * function MyComponent() {
+ *   const { tokens, mode, setMode } = useTheme();
+ *   return (
+ *     <button
+ *       style={{ background: tokens.colors.primary[500] }}
+ *       onClick={() => setMode(mode === 'light' ? 'dark' : 'light')}
+ *     >
+ *       Toggle Theme
+ *     </button>
+ *   );
+ * }
+ * ```
+ */
+export declare const useTheme: () => {
+    tokens: {
+        readonly colors: {
+            readonly primary: {
+                readonly 50: "#eff6ff";
+                readonly 100: "#dbeafe";
+                readonly 200: "#bfdbfe";
+                readonly 300: "#93c5fd";
+                readonly 400: "#60a5fa";
+                readonly 500: "#3b82f6";
+                readonly 600: "#2563eb";
+                readonly 700: "#1d4ed8";
+                readonly 800: "#1e40af";
+                readonly 900: "#1e3a8a";
+            };
+            readonly secondary: {
+                readonly 50: "#f5f3ff";
+                readonly 100: "#ede9fe";
+                readonly 200: "#ddd6fe";
+                readonly 300: "#c4b5fd";
+                readonly 400: "#a78bfa";
+                readonly 500: "#8b5cf6";
+                readonly 600: "#7c3aed";
+                readonly 700: "#6d28d9";
+                readonly 800: "#5b21b6";
+                readonly 900: "#4c1d95";
+            };
+            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 success: {
+                readonly 50: "#f0fdf4";
+                readonly 500: "#22c55e";
+                readonly 600: "#16a34a";
+                readonly 700: "#15803d";
+            };
+            readonly warning: {
+                readonly 50: "#fffbeb";
+                readonly 500: "#f59e0b";
+                readonly 600: "#d97706";
+                readonly 700: "#b45309";
+            };
+            readonly error: {
+                readonly 50: "#fef2f2";
+                readonly 500: "#ef4444";
+                readonly 600: "#dc2626";
+                readonly 700: "#b91c1c";
+            };
+            readonly info: {
+                readonly 50: "#eff6ff";
+                readonly 500: "#3b82f6";
+                readonly 600: "#2563eb";
+                readonly 700: "#1d4ed8";
+            };
+        };
+        readonly spacing: {
+            readonly 0: "0";
+            readonly 1: "0.25rem";
+            readonly 2: "0.5rem";
+            readonly 3: "0.75rem";
+            readonly 4: "1rem";
+            readonly 5: "1.25rem";
+            readonly 6: "1.5rem";
+            readonly 8: "2rem";
+            readonly 10: "2.5rem";
+            readonly 12: "3rem";
+            readonly 16: "4rem";
+            readonly 20: "5rem";
+            readonly 24: "6rem";
+        };
+        readonly typography: {
+            readonly fontFamily: {
+                readonly sans: "-apple-system, BlinkMacSystemFont, \"Segoe UI\", Roboto, \"Helvetica Neue\", Arial, sans-serif";
+                readonly mono: "ui-monospace, SFMono-Regular, \"SF Mono\", Menlo, Consolas, \"Liberation Mono\", 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 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: "0";
+                readonly wide: "0.025em";
+                readonly wider: "0.05em";
+                readonly widest: "0.1em";
+            };
+            readonly textVariants: {
+                readonly h1: {
+                    readonly fontSize: "3.75rem";
+                    readonly fontWeight: "700";
+                    readonly lineHeight: "1.2";
+                    readonly letterSpacing: "-0.025em";
+                };
+                readonly h2: {
+                    readonly fontSize: "3rem";
+                    readonly fontWeight: "700";
+                    readonly lineHeight: "1.25";
+                    readonly letterSpacing: "-0.025em";
+                };
+                readonly h3: {
+                    readonly fontSize: "2.25rem";
+                    readonly fontWeight: "600";
+                    readonly lineHeight: "1.3";
+                    readonly letterSpacing: "-0.025em";
+                };
+                readonly h4: {
+                    readonly fontSize: "1.875rem";
+                    readonly fontWeight: "600";
+                    readonly lineHeight: "1.35";
+                    readonly letterSpacing: "0";
+                };
+                readonly h5: {
+                    readonly fontSize: "1.5rem";
+                    readonly fontWeight: "600";
+                    readonly lineHeight: "1.4";
+                    readonly letterSpacing: "0";
+                };
+                readonly h6: {
+                    readonly fontSize: "1.25rem";
+                    readonly fontWeight: "600";
+                    readonly lineHeight: "1.5";
+                    readonly letterSpacing: "0";
+                };
+                readonly body1: {
+                    readonly fontSize: "1rem";
+                    readonly fontWeight: "400";
+                    readonly lineHeight: "1.5";
+                    readonly letterSpacing: "0";
+                };
+                readonly body2: {
+                    readonly fontSize: "0.875rem";
+                    readonly fontWeight: "400";
+                    readonly lineHeight: "1.5";
+                    readonly letterSpacing: "0";
+                };
+                readonly subtitle1: {
+                    readonly fontSize: "1.125rem";
+                    readonly fontWeight: "500";
+                    readonly lineHeight: "1.5";
+                    readonly letterSpacing: "0";
+                };
+                readonly subtitle2: {
+                    readonly fontSize: "1rem";
+                    readonly fontWeight: "500";
+                    readonly lineHeight: "1.5";
+                    readonly letterSpacing: "0";
+                };
+                readonly caption: {
+                    readonly fontSize: "0.75rem";
+                    readonly fontWeight: "400";
+                    readonly lineHeight: "1.5";
+                    readonly letterSpacing: "0.025em";
+                };
+                readonly overline: {
+                    readonly fontSize: "0.75rem";
+                    readonly fontWeight: "600";
+                    readonly lineHeight: "1.5";
+                    readonly letterSpacing: "0.1em";
+                    readonly textTransform: "uppercase";
+                };
+                readonly button: {
+                    readonly fontSize: "0.875rem";
+                    readonly fontWeight: "600";
+                    readonly lineHeight: "1.5";
+                    readonly letterSpacing: "0.025em";
+                };
+                readonly label: {
+                    readonly fontSize: "0.875rem";
+                    readonly fontWeight: "500";
+                    readonly lineHeight: "1.5";
+                    readonly letterSpacing: "0";
+                };
+            };
+        };
+        readonly borderRadius: {
+            readonly none: "0";
+            readonly sm: "0.125rem";
+            readonly base: "0.25rem";
+            readonly md: "0.375rem";
+            readonly lg: "0.5rem";
+            readonly xl: "0.75rem";
+            readonly '2xl': "1rem";
+            readonly full: "9999px";
+        };
+        readonly shadows: {
+            readonly sm: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
+            readonly base: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)";
+            readonly md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)";
+            readonly lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)";
+            readonly xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)";
+            readonly none: "none";
+        };
+        readonly transitions: {
+            readonly fast: "150ms cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly base: "200ms cubic-bezier(0.4, 0, 0.2, 1)";
+            readonly slow: "300ms cubic-bezier(0.4, 0, 0.2, 1)";
+        };
+        readonly zIndex: {
+            readonly dropdown: 1000;
+            readonly sticky: 1100;
+            readonly modal: 1200;
+            readonly tooltip: 1300;
+            readonly notification: 1400;
+        };
+    };
+    mode: "light" | "dark";
+    setMode: (mode: "light" | "dark") => void;
+};