@streamplace/components 0.7.27 → 0.7.29

package/dist/components/ui/toast.js

@@ -1,59 +1,97 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
+exports.toast = void 0;
 exports.useToast = useToast;
+exports.ToastProvider = ToastProvider;
 exports.Toast = Toast;
 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 react_native_safe_area_context_1 = require("react-native-safe-area-context");
-const theme_1 = require("../../lib/theme/theme");
-const react_2 = require("react");
-/**
- * useToast - a hook to manage Toast state and provide a toastController.
- * Returns a ready-to-render ToastComponent.
- */
-function useToast(initial = {}) {
-    const [open, setOpen] = (0, react_1.useState)(false);
-    const [title, setTitle] = (0, react_1.useState)(initial.title ?? "");
-    const [description, setDescription] = (0, react_1.useState)(initial.description ?? "");
-    const [duration, setDuration] = (0, react_1.useState)(initial.duration ?? 3);
-    const [actionLabel, setActionLabel] = (0, react_1.useState)(initial.actionLabel ?? "Action");
-    const [onAction, setOnAction] = (0, react_1.useState)(initial.onAction);
-    const show = (0, react_2.useCallback)((toastTitle, toastDescription, options) => {
-        setTitle(toastTitle);
-        setDescription(toastDescription ?? "");
-        setDuration(options?.duration ?? 3);
-        setActionLabel(options?.actionLabel ?? "Action");
-        setOnAction(options?.onAction);
-        setOpen(true);
-    }, []);
-    const hide = (0, react_2.useCallback)(() => {
-        setOpen(false);
+const ui_1 = require("../../ui");
+class ToastManager {
+    constructor() {
+        this.listeners = new Set();
+        this.currentToast = null;
+        this.timeoutId = null;
+    }
+    show(config) {
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+        }
+        const toast = {
+            id: Math.random().toString(36).substr(2, 9),
+            open: true,
+            title: config.title,
+            description: config.description,
+            duration: config.duration ?? 3,
+            actionLabel: config.actionLabel,
+            onAction: config.onAction,
+        };
+        this.currentToast = toast;
+        this.notifyListeners();
+        if (toast.duration > 0) {
+            this.timeoutId = setTimeout(() => {
+                this.hide();
+            }, toast.duration * 1000);
+        }
+    }
+    hide() {
+        if (this.timeoutId) {
+            clearTimeout(this.timeoutId);
+            this.timeoutId = null;
+        }
+        this.currentToast = null;
+        this.notifyListeners();
+    }
+    subscribe(listener) {
+        this.listeners.add(listener);
+        return () => {
+            this.listeners.delete(listener);
+        };
+    }
+    notifyListeners() {
+        this.listeners.forEach((listener) => listener(this.currentToast));
+    }
+}
+const toastManager = new ToastManager();
+exports.toast = {
+    show: (title, description, options) => {
+        toastManager.show({
+            title,
+            description,
+            ...options,
+        });
+    },
+    hide: () => toastManager.hide(),
+};
+function useToast() {
+    const [toastState, setToastState] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        return toastManager.subscribe(setToastState);
     }, []);
-    // Ready-to-render Toast component
-    const ToastComponent = ((0, jsx_runtime_1.jsx)(Toast, { open: open, onOpenChange: setOpen, title: title, description: description, actionLabel: actionLabel, onAction: onAction, duration: duration }));
     return {
-        open,
-        title,
-        description,
-        actionLabel,
-        onAction,
-        duration,
-        setOpen,
-        setTitle,
-        setDescription,
-        setActionLabel,
-        setOnAction,
-        setDuration,
-        toastController: { show, hide },
-        ToastComponent,
+        toast: toastState,
+        ...exports.toast,
     };
 }
+function ToastProvider() {
+    const [toastState, setToastState] = (0, react_1.useState)(null);
+    (0, react_1.useEffect)(() => {
+        return toastManager.subscribe(setToastState);
+    }, []);
+    if (!toastState?.open)
+        return null;
+    return ((0, jsx_runtime_1.jsx)(Toast, { open: toastState.open, onOpenChange: (open) => {
+            if (!open)
+                toastManager.hide();
+        }, title: toastState.title, description: toastState.description, actionLabel: toastState.actionLabel, onAction: toastState.onAction, duration: toastState.duration }));
+}
 function Toast({ open, onOpenChange, title, description, actionLabel = "Action", onAction, duration = 3, }) {
     const [seconds, setSeconds] = (0, react_1.useState)(duration);
     const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
-    const { theme } = (0, theme_1.useTheme)();
+    const { theme } = (0, ui_1.useTheme)();
     const [fadeAnim] = (0, react_1.useState)(new react_native_1.Animated.Value(0));
     const { width } = (0, react_native_1.useWindowDimensions)();
     const isWeb = react_native_1.Platform.OS === "web";

package/dist/components/ui/view.js

@@ -1,12 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
 exports.viewVariants = exports.Center = exports.Column = exports.Row = exports.Overlay = exports.Surface = exports.Container = exports.Card = exports.View = void 0;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const class_variance_authority_1 = require("class-variance-authority");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
-const atoms_1 = require("../../lib/theme/atoms");
 const theme_1 = require("../../lib/theme/theme");
+const zero = tslib_1.__importStar(require("../../ui"));
 // View variants using class-variance-authority pattern
 const viewVariants = (0, class_variance_authority_1.cva)("", {
     variants: {
@@ -72,69 +73,61 @@ const viewVariants = (0, class_variance_authority_1.cva)("", {
 });
 exports.viewVariants = viewVariants;
 exports.View = (0, react_1.forwardRef)(({ variant = "default", padding = "none", margin = "none", direction = "column", align = "stretch", justify = "start", flex = "none", fullWidth = false, fullHeight = false, centered = false, backgroundColor, borderColor, borderWidth, borderRadius, shadow = false, style, ...props }, ref) => {
-    const { theme } = (0, theme_1.useTheme)();
-    // Map variant to styles
+    const { zero: zt } = (0, theme_1.useTheme)();
+    // Map variant to styles using theme.zero
     const variantStyles = (() => {
         switch (variant) {
             case "card":
                 return {
-                    backgroundColor: theme.colors.card,
-                    borderRadius: atoms_1.borderRadius.lg,
-                    shadowColor: "#000",
-                    shadowOffset: { width: 0, height: 2 },
-                    shadowOpacity: 0.1,
-                    shadowRadius: 4,
-                    elevation: 3,
+                    ...zt.bg.card,
+                    borderRadius: zero.borderRadius.lg,
+                    ...zero.shadows.md,
                 };
             case "overlay":
-                return {
-                    backgroundColor: "rgba(0, 0, 0, 0.5)",
-                };
+                return zt.bg.overlay;
             case "surface":
-                return {
-                    backgroundColor: theme.colors.background,
-                };
+                return zt.bg.background;
             case "container":
                 return {
-                    backgroundColor: theme.colors.background,
-                    padding: atoms_1.spacing[4],
+                    ...zt.bg.background,
+                    ...zero.p[8],
                 };
             default:
                 return {};
         }
     })();
-    // Map padding to numeric values
+    // Map padding to zero tokens
     const paddingValue = (() => {
         switch (padding) {
             case "xs":
-                return atoms_1.spacing[1];
+                return zero.p[1];
             case "sm":
-                return atoms_1.spacing[2];
+                return zero.p[2];
             case "md":
-                return atoms_1.spacing[3];
+                return zero.p[4];
             case "lg":
-                return atoms_1.spacing[4];
+                return zero.p[6];
             case "xl":
-                return atoms_1.spacing[5];
+                return zero.p[8];
             default:
-                return undefined;
+                return {};
         }
     })();
-    // Map margin to numeric values
+    // Map margin to zero tokens
     const marginValue = (() => {
         switch (margin) {
             case "xs":
-                return atoms_1.spacing[1];
+                return zero.m[1];
             case "sm":
-                return atoms_1.spacing[2];
+                return zero.m[2];
             case "md":
-                return atoms_1.spacing[3];
+                return zero.m[4];
             case "lg":
-                return atoms_1.spacing[4];
+                return zero.m[6];
             case "xl":
-                return atoms_1.spacing[5];
+                return zero.m[8];
             default:
-                return undefined;
+                return {};
         }
     })();
     // Map flex direction
@@ -205,8 +198,8 @@ exports.View = (0, react_1.forwardRef)(({ variant = "default", padding = "none",
     })();
     const computedStyle = {
         ...variantStyles,
-        ...(paddingValue !== undefined && { padding: paddingValue }),
-        ...(marginValue !== undefined && { margin: marginValue }),
+        ...paddingValue,
+        ...marginValue,
         flexDirection,
         alignItems,
         justifyContent,
@@ -221,13 +214,7 @@ exports.View = (0, react_1.forwardRef)(({ variant = "default", padding = "none",
         ...(borderColor && { borderColor }),
         ...(borderWidth !== undefined && { borderWidth }),
         ...(borderRadius !== undefined && { borderRadius }),
-        ...(shadow && {
-            shadowColor: "#000",
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.1,
-            shadowRadius: 4,
-            elevation: 3,
-        }),
+        ...(shadow && zero.shadows.md),
     };
     const finalStyle = Array.isArray(style)
         ? [computedStyle, ...style]

package/dist/lib/theme/index.js

@@ -1,13 +1,12 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.tokens = exports.atoms = exports.typographyAtoms = exports.layout = exports.iconSizes = exports.getPlatformTypography = exports.borders = exports.typography = exports.touchTargets = exports.spacing = exports.shadows = exports.colors = exports.breakpoints = exports.borderRadius = exports.animations = exports.useTheme = exports.usePlatformTypography = exports.lightTheme = exports.darkTheme = exports.createThemedStyles = exports.createThemeStyles = exports.createThemeIcons = exports.createThemeColors = exports.ThemeProvider = void 0;
+exports.tokens = exports.atoms = exports.typographyAtoms = exports.layout = exports.iconSizes = exports.getPlatformTypography = exports.borders = exports.typography = exports.touchTargets = exports.spacing = exports.shadows = exports.colors = exports.breakpoints = exports.borderRadius = exports.animations = exports.useTheme = exports.usePlatformTypography = exports.lightTheme = exports.darkTheme = exports.createThemedStyles = exports.createThemeIcons = exports.createThemeColors = exports.ThemeProvider = void 0;
 const tslib_1 = require("tslib");
 // Main theme system exports
 var theme_1 = require("./theme");
 Object.defineProperty(exports, "ThemeProvider", { enumerable: true, get: function () { return theme_1.ThemeProvider; } });
 Object.defineProperty(exports, "createThemeColors", { enumerable: true, get: function () { return theme_1.createThemeColors; } });
 Object.defineProperty(exports, "createThemeIcons", { enumerable: true, get: function () { return theme_1.createThemeIcons; } });
-Object.defineProperty(exports, "createThemeStyles", { enumerable: true, get: function () { return theme_1.createThemeStyles; } });
 Object.defineProperty(exports, "createThemedStyles", { enumerable: true, get: function () { return theme_1.createThemedStyles; } });
 Object.defineProperty(exports, "darkTheme", { enumerable: true, get: function () { return theme_1.darkTheme; } });
 Object.defineProperty(exports, "lightTheme", { enumerable: true, get: function () { return theme_1.lightTheme; } });

package/dist/lib/theme/theme.js

@@ -1,6 +1,6 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.createThemeStyles = exports.createThemeIcons = exports.createThemeColors = exports.darkTheme = exports.lightTheme = void 0;
+exports.createThemeZero = exports.createThemeIcons = exports.createThemeColors = exports.darkTheme = exports.lightTheme = void 0;
 exports.ThemeProvider = ThemeProvider;
 exports.useTheme = useTheme;
 exports.usePlatformTypography = usePlatformTypography;
@@ -11,44 +11,69 @@ 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");
+const ui_1 = require("../../components/ui");
+// Import pairify function for generating theme tokens
+function pairify(obj, styleKeyPrefix) {
+    const result = {};
+    for (const [key, value] of Object.entries(obj)) {
+        if (typeof value === "object" && value !== null && !Array.isArray(value)) {
+            // For nested objects (like color scales), create another level
+            result[key] = {};
+            for (const [nestedKey, nestedValue] of Object.entries(value)) {
+                result[key][nestedKey] = { [styleKeyPrefix]: nestedValue };
+            }
+        }
+        else {
+            // For simple values, create the style object directly
+            result[key] = { [styleKeyPrefix]: value };
+        }
+    }
+    return result;
+}
 // 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],
-});
+const createThemeColors = (isDark, lightTheme, darkTheme, colorTheme) => {
+    let baseColors;
+    if (isDark && darkTheme) {
+        // Use dark theme
+        baseColors = isColorPalette(darkTheme)
+            ? generateThemeColorsFromPalette(darkTheme, true)
+            : darkTheme;
+    }
+    else if (!isDark && lightTheme) {
+        // Use light theme
+        baseColors = isColorPalette(lightTheme)
+            ? generateThemeColorsFromPalette(lightTheme, false)
+            : lightTheme;
+    }
+    else {
+        // Fall back to default gray theme
+        const defaultPalette = tokens_1.colors.neutral;
+        baseColors = generateThemeColorsFromPalette(defaultPalette, isDark);
+    }
+    // Merge with custom color overrides if provided
+    return {
+        ...baseColors,
+        ...colorTheme,
+    };
+};
 exports.createThemeColors = createThemeColors;
-// Create theme styles based on colors
-const createThemeStyles = (themeColors) => ({
+// Create theme-aware zero tokens using pairify
+const createThemeZero = (themeColors) => ({
+    // Theme-aware colors using pairify
+    bg: pairify(themeColors, "backgroundColor"),
+    text: pairify(themeColors, "color"),
+    border: {
+        ...pairify(themeColors, "borderColor"),
+        default: { borderColor: themeColors.border },
+    },
+    // Static design tokens
     shadow: {
         sm: tokens_1.shadows.sm,
         md: tokens_1.shadows.md,
         lg: tokens_1.shadows.lg,
         xl: tokens_1.shadows.xl,
     },
+    // Common button styles
     button: {
         primary: {
             backgroundColor: themeColors.primary,
@@ -69,17 +94,7 @@ const createThemeStyles = (themeColors) => ({
             borderWidth: 0,
         },
     },
-    text: {
-        primary: {
-            color: themeColors.text,
-        },
-        muted: {
-            color: themeColors.textMuted,
-        },
-        disabled: {
-            color: themeColors.textDisabled,
-        },
-    },
+    // Input styles
     input: {
         base: {
             backgroundColor: themeColors.background,
@@ -99,6 +114,7 @@ const createThemeStyles = (themeColors) => ({
             borderWidth: 2,
         },
     },
+    // Card styles
     card: {
         base: {
             backgroundColor: themeColors.card,
@@ -107,7 +123,7 @@ const createThemeStyles = (themeColors) => ({
         },
     },
 });
-exports.createThemeStyles = createThemeStyles;
+exports.createThemeZero = createThemeZero;
 // Create theme icons based on colors
 const createThemeIcons = (themeColors) => ({
     color: {
@@ -129,8 +145,44 @@ const createThemeIcons = (themeColors) => ({
 exports.createThemeIcons = createThemeIcons;
 // Create the theme context
 const ThemeContext = (0, react_1.createContext)(null);
+// Helper function to check if input is a ColorPalette or Theme["colors"]
+function isColorPalette(input) {
+    return "50" in input && "100" in input && "950" in input;
+}
+// Helper function to generate Theme["colors"] from ColorPalette
+function generateThemeColorsFromPalette(palette, isDark) {
+    return {
+        background: isDark ? palette[950] : tokens_1.colors.white,
+        foreground: isDark ? palette[50] : palette[950],
+        card: isDark ? palette[900] : tokens_1.colors.white,
+        cardForeground: isDark ? palette[50] : palette[950],
+        popover: isDark ? palette[900] : tokens_1.colors.white,
+        popoverForeground: isDark ? palette[50] : palette[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 ? palette[800] : palette[100],
+        secondaryForeground: isDark ? palette[50] : palette[900],
+        muted: isDark ? palette[800] : palette[100],
+        mutedForeground: isDark ? palette[400] : palette[500],
+        accent: isDark ? palette[800] : palette[100],
+        accentForeground: isDark ? palette[50] : palette[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 ? palette[500] + "30" : palette[200] + "30",
+        input: isDark ? palette[800] : palette[200],
+        ring: react_native_1.Platform.OS === "ios" ? tokens_1.colors.ios.systemBlue : tokens_1.colors.primary[500],
+        text: isDark ? palette[50] : palette[950],
+        textMuted: isDark ? palette[400] : palette[500],
+        textDisabled: isDark ? palette[600] : palette[400],
+    };
+}
 // Theme provider component
-function ThemeProvider({ children, defaultTheme = "system", forcedTheme, }) {
+// Should be surrounded by SafeAreaProvider at the root
+function ThemeProvider({ children, defaultTheme = "system", forcedTheme, colorTheme, lightTheme, darkTheme, }) {
     const systemColorScheme = (0, react_native_1.useColorScheme)();
     const [currentTheme, setCurrentTheme] = (0, react_1.useState)(defaultTheme);
     // Determine if dark mode should be active
@@ -149,7 +201,7 @@ function ThemeProvider({ children, defaultTheme = "system", forcedTheme, }) {
     }, [forcedTheme, currentTheme, systemColorScheme]);
     // Create theme based on dark mode
     const theme = (0, react_1.useMemo)(() => {
-        const themeColors = createThemeColors(isDark);
+        const themeColors = createThemeColors(isDark, lightTheme, darkTheme, colorTheme);
         return {
             colors: themeColors,
             spacing: tokens_1.spacing,
@@ -159,10 +211,10 @@ function ThemeProvider({ children, defaultTheme = "system", forcedTheme, }) {
             touchTargets: tokens_1.touchTargets,
             animations: tokens_1.animations,
         };
-    }, [isDark]);
-    // Create utility styles
-    const styles = (0, react_1.useMemo)(() => {
-        return createThemeStyles(theme.colors);
+    }, [isDark, lightTheme, darkTheme, colorTheme]);
+    // Create theme-aware zero tokens
+    const zero = (0, react_1.useMemo)(() => {
+        return createThemeZero(theme.colors);
     }, [theme.colors]);
     // Create icon utilities
     const icons = (0, react_1.useMemo)(() => {
@@ -187,7 +239,7 @@ function ThemeProvider({ children, defaultTheme = "system", forcedTheme, }) {
     };
     const value = (0, react_1.useMemo)(() => ({
         theme,
-        styles,
+        zero,
         icons,
         isDark,
         currentTheme: forcedTheme || currentTheme,
@@ -196,7 +248,7 @@ function ThemeProvider({ children, defaultTheme = "system", forcedTheme, }) {
         toggleTheme,
     }), [
         theme,
-        styles,
+        zero,
         icons,
         isDark,
         forcedTheme,
@@ -205,7 +257,7 @@ function ThemeProvider({ children, defaultTheme = "system", forcedTheme, }) {
         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, {})] }) }));
+    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, {}), (0, jsx_runtime_1.jsx)(ui_1.ToastProvider, {})] }) }));
 }
 // Hook to use theme
 function useTheme() {
@@ -231,8 +283,8 @@ function usePlatformTypography() {
 // 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]);
+        const { theme, zero, icons } = useTheme();
+        return (0, react_1.useMemo)(() => styleCreator(theme, zero, icons), [theme, zero, icons]);
     };
 }
 // Create light and dark theme instances for external use