react-theme-forge 1.0.0

package/dist/components/ThemeProvider.d.ts

@@ -0,0 +1,6 @@
+import React from "react";
+import type { ThemeContextValue, ThemeProviderProps } from "../types";
+declare const ThemeContext: React.Context<ThemeContextValue | null>;
+export declare function ThemeProvider({ children, defaultMode, defaultTheme, storageKey, themes: initialThemes, darkClass, targetElement, disablePersistence, }: ThemeProviderProps): import("react/jsx-runtime").JSX.Element;
+export declare function useTheme(): ThemeContextValue;
+export { ThemeContext };

package/dist/components/ThemeToggle.d.ts

@@ -0,0 +1,18 @@
+export interface ThemeToggleProps {
+    /** "icon" shows one button that toggles, "segmented" shows Light/Dark/System buttons */
+    variant?: "icon" | "segmented";
+    /** Additional CSS classes */
+    className?: string;
+    /** Size of the icon button. Default: "md" */
+    size?: "sm" | "md" | "lg";
+    /** Show label next to icon */
+    showLabel?: boolean;
+    /** Custom aria-label */
+    ariaLabel?: string;
+}
+export declare function ThemeToggle({ variant, className, size, showLabel, ariaLabel, }: ThemeToggleProps): import("react/jsx-runtime").JSX.Element;
+export interface ThemePickerProps {
+    className?: string;
+    showPreview?: boolean;
+}
+export declare function ThemePicker({ className, showPreview }: ThemePickerProps): import("react/jsx-runtime").JSX.Element;

package/dist/hooks/useThemeColor.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Get the resolved CSS variable value for a given token.
+ *
+ * @example
+ * const primary = useThemeColor("primary");
+ * // Returns: "hsl(var(--primary))"
+ *
+ * const raw = useThemeColor("primary", true);
+ * // Returns: "221 83% 53%" (raw HSL parts, no wrapper)
+ */
+export declare function useThemeColor(token: string, raw?: boolean): string;
+/**
+ * @returns true when the resolved theme is "dark"
+ */
+export declare function useIsDark(): boolean;
+/**
+ * Returns a value depending on the active theme.
+ *
+ * @example
+ * const bg = useThemeValue("white", "gray-900");
+ */
+export declare function useThemeValue<T>(lightValue: T, darkValue: T): T;
+/**
+ * Temporarily adds a CSS transition to the document root
+ * so theme changes animate smoothly.
+ *
+ * @example
+ * const withTransition = useThemeTransition();
+ * withTransition(() => applyTheme("ocean"));
+ */
+export declare function useThemeTransition(duration?: number): (fn: () => void) => void;

package/dist/index.d.ts

@@ -0,0 +1,147 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+type ThemeMode = "light" | "dark" | "system";
+interface ThemeColors {
+    primary: string;
+    primaryForeground: string;
+    secondary: string;
+    secondaryForeground: string;
+    background: string;
+    foreground: string;
+    card: string;
+    cardForeground: string;
+    border: string;
+    input: string;
+    ring: string;
+    muted: string;
+    mutedForeground: string;
+    accent: string;
+    accentForeground: string;
+    destructive: string;
+    destructiveForeground: string;
+    success: string;
+    successForeground: string;
+    warning: string;
+    warningForeground: string;
+}
+interface ThemeRadius {
+    sm: string;
+    md: string;
+    lg: string;
+    xl: string;
+    full: string;
+}
+interface ThemeFonts {
+    sans: string;
+    mono: string;
+    heading: string;
+}
+interface ThemeConfig {
+    name: string;
+    colors: {
+        light: Partial<ThemeColors>;
+        dark: Partial<ThemeColors>;
+    };
+    radius?: Partial<ThemeRadius>;
+    fonts?: Partial<ThemeFonts>;
+}
+interface ThemeContextValue {
+    /** Current active resolved theme: "light" | "dark" */
+    theme: "light" | "dark";
+    /** Raw mode including "system" */
+    mode: ThemeMode;
+    /** All registered custom themes */
+    themes: Record<string, ThemeConfig>;
+    /** Name of the currently applied custom theme, if any */
+    activeTheme: string | null;
+    /** Toggle between light and dark */
+    toggleTheme: () => void;
+    /** Set mode explicitly */
+    setMode: (mode: ThemeMode) => void;
+    /** Apply a registered custom theme by name */
+    applyTheme: (themeName: string) => void;
+    /** Register a new custom theme */
+    registerTheme: (config: ThemeConfig) => void;
+    /** Remove a theme */
+    removeTheme: (themeName: string) => void;
+    /** Reset to default theme */
+    resetTheme: () => void;
+    /** Check if system prefers dark */
+    systemPrefersDark: boolean;
+}
+interface ThemeProviderProps {
+    children: React.ReactNode;
+    /** Default mode on first load. Default: "system" */
+    defaultMode?: ThemeMode;
+    /** Default custom theme name to apply */
+    defaultTheme?: string;
+    /** Key used for localStorage persistence. Default: "rtf-theme" */
+    storageKey?: string;
+    /** Custom themes to register at startup */
+    themes?: ThemeConfig[];
+    /** CSS class applied to <html> for dark mode. Default: "dark" */
+    darkClass?: string;
+    /** Apply CSS variables to a custom element instead of :root */
+    targetElement?: string;
+    /** Disable localStorage persistence */
+    disablePersistence?: boolean;
+}
+
+declare function ThemeProvider({ children, defaultMode, defaultTheme, storageKey, themes: initialThemes, darkClass, targetElement, disablePersistence, }: ThemeProviderProps): react_jsx_runtime.JSX.Element;
+declare function useTheme(): ThemeContextValue;
+
+interface ThemeToggleProps {
+    /** "icon" shows one button that toggles, "segmented" shows Light/Dark/System buttons */
+    variant?: "icon" | "segmented";
+    /** Additional CSS classes */
+    className?: string;
+    /** Size of the icon button. Default: "md" */
+    size?: "sm" | "md" | "lg";
+    /** Show label next to icon */
+    showLabel?: boolean;
+    /** Custom aria-label */
+    ariaLabel?: string;
+}
+declare function ThemeToggle({ variant, className, size, showLabel, ariaLabel, }: ThemeToggleProps): react_jsx_runtime.JSX.Element;
+interface ThemePickerProps {
+    className?: string;
+    showPreview?: boolean;
+}
+declare function ThemePicker({ className, showPreview }: ThemePickerProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Get the resolved CSS variable value for a given token.
+ *
+ * @example
+ * const primary = useThemeColor("primary");
+ * // Returns: "hsl(var(--primary))"
+ *
+ * const raw = useThemeColor("primary", true);
+ * // Returns: "221 83% 53%" (raw HSL parts, no wrapper)
+ */
+declare function useThemeColor(token: string, raw?: boolean): string;
+/**
+ * @returns true when the resolved theme is "dark"
+ */
+declare function useIsDark(): boolean;
+/**
+ * Returns a value depending on the active theme.
+ *
+ * @example
+ * const bg = useThemeValue("white", "gray-900");
+ */
+declare function useThemeValue<T>(lightValue: T, darkValue: T): T;
+/**
+ * Temporarily adds a CSS transition to the document root
+ * so theme changes animate smoothly.
+ *
+ * @example
+ * const withTransition = useThemeTransition();
+ * withTransition(() => applyTheme("ocean"));
+ */
+declare function useThemeTransition(duration?: number): (fn: () => void) => void;
+
+declare const presetThemes: Record<string, ThemeConfig>;
+
+export { ThemePicker, ThemeProvider, ThemeToggle, presetThemes, useIsDark, useTheme, useThemeColor, useThemeTransition, useThemeValue };
+export type { ThemeColors, ThemeConfig, ThemeContextValue, ThemeFonts, ThemeMode, ThemeProviderProps, ThemeRadius };