@streamplace/components 0.7.18 → 0.7.21

package/dist/lib/theme/theme.js

@@ -0,0 +1,256 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.createThemeStyles = exports.createThemeIcons = exports.createThemeColors = exports.darkTheme = exports.lightTheme = void 0;
+exports.ThemeProvider = ThemeProvider;
+exports.useTheme = useTheme;
+exports.usePlatformTypography = usePlatformTypography;
+exports.createThemedStyles = createThemedStyles;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const portal_1 = require("@rn-primitives/portal");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const tokens_1 = require("./tokens");
+const react_native_gesture_handler_1 = require("react-native-gesture-handler");
+// Create theme colors based on dark mode
+const createThemeColors = (isDark) => ({
+    background: isDark ? tokens_1.colors.gray[950] : tokens_1.colors.white,
+    foreground: isDark ? tokens_1.colors.gray[50] : tokens_1.colors.gray[950],
+    card: isDark ? tokens_1.colors.gray[900] : tokens_1.colors.white,
+    cardForeground: isDark ? tokens_1.colors.gray[50] : tokens_1.colors.gray[950],
+    popover: isDark ? tokens_1.colors.gray[900] : tokens_1.colors.white,
+    popoverForeground: isDark ? tokens_1.colors.gray[50] : tokens_1.colors.gray[950],
+    primary: react_native_1.Platform.OS === "ios" ? tokens_1.colors.ios.systemBlue : tokens_1.colors.primary[500],
+    primaryForeground: tokens_1.colors.white,
+    secondary: isDark ? tokens_1.colors.gray[800] : tokens_1.colors.gray[100],
+    secondaryForeground: isDark ? tokens_1.colors.gray[50] : tokens_1.colors.gray[900],
+    muted: isDark ? tokens_1.colors.gray[800] : tokens_1.colors.gray[100],
+    mutedForeground: isDark ? tokens_1.colors.gray[400] : tokens_1.colors.gray[500],
+    accent: isDark ? tokens_1.colors.gray[800] : tokens_1.colors.gray[100],
+    accentForeground: isDark ? tokens_1.colors.gray[50] : tokens_1.colors.gray[900],
+    destructive: react_native_1.Platform.OS === "ios" ? tokens_1.colors.ios.systemRed : tokens_1.colors.destructive[500],
+    destructiveForeground: tokens_1.colors.white,
+    success: react_native_1.Platform.OS === "ios" ? tokens_1.colors.ios.systemGreen : tokens_1.colors.success[500],
+    successForeground: tokens_1.colors.white,
+    warning: react_native_1.Platform.OS === "ios" ? tokens_1.colors.ios.systemOrange : tokens_1.colors.warning[500],
+    warningForeground: tokens_1.colors.white,
+    border: isDark ? tokens_1.colors.gray[500] + "30" : tokens_1.colors.gray[200] + "30",
+    input: isDark ? tokens_1.colors.gray[800] : tokens_1.colors.gray[200],
+    ring: react_native_1.Platform.OS === "ios" ? tokens_1.colors.ios.systemBlue : tokens_1.colors.primary[500],
+    text: isDark ? tokens_1.colors.gray[50] : tokens_1.colors.gray[950],
+    textMuted: isDark ? tokens_1.colors.gray[400] : tokens_1.colors.gray[500],
+    textDisabled: isDark ? tokens_1.colors.gray[600] : tokens_1.colors.gray[400],
+});
+exports.createThemeColors = createThemeColors;
+// Create theme styles based on colors
+const createThemeStyles = (themeColors) => ({
+    shadow: {
+        sm: tokens_1.shadows.sm,
+        md: tokens_1.shadows.md,
+        lg: tokens_1.shadows.lg,
+        xl: tokens_1.shadows.xl,
+    },
+    button: {
+        primary: {
+            backgroundColor: themeColors.primary,
+            borderWidth: 0,
+            ...tokens_1.shadows.sm,
+        },
+        secondary: {
+            backgroundColor: themeColors.secondary,
+            borderWidth: 0,
+        },
+        outline: {
+            backgroundColor: "transparent",
+            borderWidth: 1,
+            borderColor: themeColors.border,
+        },
+        ghost: {
+            backgroundColor: "transparent",
+            borderWidth: 0,
+        },
+    },
+    text: {
+        primary: {
+            color: themeColors.text,
+        },
+        muted: {
+            color: themeColors.textMuted,
+        },
+        disabled: {
+            color: themeColors.textDisabled,
+        },
+    },
+    input: {
+        base: {
+            backgroundColor: themeColors.background,
+            borderWidth: 1,
+            borderColor: themeColors.border,
+            borderRadius: tokens_1.borderRadius.md,
+            paddingHorizontal: tokens_1.spacing[3],
+            paddingVertical: tokens_1.spacing[3],
+            minHeight: tokens_1.touchTargets.minimum,
+        },
+        focused: {
+            borderColor: themeColors.ring,
+            borderWidth: 2,
+        },
+        error: {
+            borderColor: themeColors.destructive,
+            borderWidth: 2,
+        },
+    },
+    card: {
+        base: {
+            backgroundColor: themeColors.card,
+            borderRadius: tokens_1.borderRadius.lg,
+            ...tokens_1.shadows.sm,
+        },
+    },
+});
+exports.createThemeStyles = createThemeStyles;
+// Create theme icons based on colors
+const createThemeIcons = (themeColors) => ({
+    color: {
+        default: themeColors.text,
+        muted: themeColors.textMuted,
+        primary: themeColors.primary,
+        secondary: themeColors.secondary,
+        destructive: themeColors.destructive,
+        success: themeColors.success,
+        warning: themeColors.warning,
+    },
+    size: {
+        sm: 16,
+        md: 20,
+        lg: 24,
+        xl: 32,
+    },
+});
+exports.createThemeIcons = createThemeIcons;
+// Create the theme context
+const ThemeContext = (0, react_1.createContext)(null);
+// Theme provider component
+function ThemeProvider({ children, defaultTheme = "system", forcedTheme, }) {
+    const systemColorScheme = (0, react_native_1.useColorScheme)();
+    const [currentTheme, setCurrentTheme] = (0, react_1.useState)(defaultTheme);
+    // Determine if dark mode should be active
+    const isDark = (0, react_1.useMemo)(() => {
+        if (forcedTheme === "light")
+            return false;
+        if (forcedTheme === "dark")
+            return true;
+        if (currentTheme === "light")
+            return false;
+        if (currentTheme === "dark")
+            return true;
+        if (currentTheme === "system")
+            return systemColorScheme === "dark";
+        return systemColorScheme === "dark";
+    }, [forcedTheme, currentTheme, systemColorScheme]);
+    // Create theme based on dark mode
+    const theme = (0, react_1.useMemo)(() => {
+        const themeColors = createThemeColors(isDark);
+        return {
+            colors: themeColors,
+            spacing: tokens_1.spacing,
+            borderRadius: tokens_1.borderRadius,
+            typography: tokens_1.typography,
+            shadows: tokens_1.shadows,
+            touchTargets: tokens_1.touchTargets,
+            animations: tokens_1.animations,
+        };
+    }, [isDark]);
+    // Create utility styles
+    const styles = (0, react_1.useMemo)(() => {
+        return createThemeStyles(theme.colors);
+    }, [theme.colors]);
+    // Create icon utilities
+    const icons = (0, react_1.useMemo)(() => {
+        return createThemeIcons(theme.colors);
+    }, [theme.colors]);
+    // Theme controls
+    const setTheme = (newTheme) => {
+        if (!forcedTheme) {
+            setCurrentTheme(newTheme);
+        }
+    };
+    const toggleTheme = () => {
+        if (!forcedTheme) {
+            setCurrentTheme((prev) => {
+                if (prev === "light")
+                    return "dark";
+                if (prev === "dark")
+                    return "system";
+                return "light";
+            });
+        }
+    };
+    const value = (0, react_1.useMemo)(() => ({
+        theme,
+        styles,
+        icons,
+        isDark,
+        currentTheme: forcedTheme || currentTheme,
+        systemTheme: systemColorScheme || "light",
+        setTheme,
+        toggleTheme,
+    }), [
+        theme,
+        styles,
+        icons,
+        isDark,
+        forcedTheme,
+        currentTheme,
+        systemColorScheme,
+        setTheme,
+        toggleTheme,
+    ]);
+    return ((0, jsx_runtime_1.jsx)(ThemeContext.Provider, { value: value, children: (0, jsx_runtime_1.jsxs)(react_native_gesture_handler_1.GestureHandlerRootView, { children: [children, (0, jsx_runtime_1.jsx)(portal_1.PortalHost, {})] }) }));
+}
+// Hook to use theme
+function useTheme() {
+    const context = (0, react_1.useContext)(ThemeContext);
+    if (!context) {
+        throw new Error("useTheme must be used within a ThemeProvider");
+    }
+    return context;
+}
+// Hook to get current platform's typography
+function usePlatformTypography() {
+    const { theme } = useTheme();
+    return (0, react_1.useMemo)(() => {
+        if (react_native_1.Platform.OS === "ios") {
+            return theme.typography.ios;
+        }
+        else if (react_native_1.Platform.OS === "android") {
+            return theme.typography.android;
+        }
+        return theme.typography.universal;
+    }, [theme.typography]);
+}
+// Utility function to create theme-aware styles
+function createThemedStyles(styleCreator) {
+    return function useThemedStyles() {
+        const { theme, styles, icons } = useTheme();
+        return (0, react_1.useMemo)(() => styleCreator(theme, styles, icons), [theme, styles, icons]);
+    };
+}
+// Create light and dark theme instances for external use
+exports.lightTheme = {
+    colors: createThemeColors(false),
+    spacing: tokens_1.spacing,
+    borderRadius: tokens_1.borderRadius,
+    typography: tokens_1.typography,
+    shadows: tokens_1.shadows,
+    touchTargets: tokens_1.touchTargets,
+    animations: tokens_1.animations,
+};
+exports.darkTheme = {
+    colors: createThemeColors(true),
+    spacing: tokens_1.spacing,
+    borderRadius: tokens_1.borderRadius,
+    typography: tokens_1.typography,
+    shadows: tokens_1.shadows,
+    touchTargets: tokens_1.touchTargets,
+    animations: tokens_1.animations,
+};