@streamplace/components 0.7.14 → 0.7.17

package/dist/lib/theme/theme.js

@@ -1,256 +0,0 @@
-"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,
-};