@streamplace/components 0.7.26 → 0.7.29

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

package/dist/lib/theme/tokens.js

@@ -4,7 +4,7 @@
  * Inspired by shadcn/ui but adapted for React Native styling
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.breakpoints = exports.animations = exports.touchTargets = exports.shadows = exports.typography = exports.borderRadius = exports.spacing = exports.colors = void 0;
+exports.breakpoints = exports.animations = exports.touchTargets = exports.shadows = exports.fontFamilies = exports.typography = exports.borderRadius = exports.spacing = exports.colors = void 0;
 exports.colors = {
     // Primary colors
     primary: {
@@ -435,56 +435,67 @@ exports.typography = {
             fontSize: 34,
             lineHeight: 41,
             fontWeight: "700",
+            fontFamily: "AtkinsonHyperlegibleNext-Bold",
         },
         title1: {
             fontSize: 28,
             lineHeight: 34,
             fontWeight: "700",
+            fontFamily: "AtkinsonHyperlegibleNext-Bold",
         },
         title2: {
             fontSize: 22,
             lineHeight: 28,
             fontWeight: "700",
+            fontFamily: "AtkinsonHyperlegibleNext-Bold",
         },
         title3: {
             fontSize: 20,
             lineHeight: 25,
             fontWeight: "600",
+            fontFamily: "AtkinsonHyperlegibleNext-SemiBold",
         },
         headline: {
             fontSize: 17,
             lineHeight: 22,
             fontWeight: "600",
+            fontFamily: "AtkinsonHyperlegibleNext-SemiBold",
         },
         body: {
             fontSize: 17,
             lineHeight: 22,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         callout: {
             fontSize: 16,
             lineHeight: 21,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         subhead: {
             fontSize: 15,
             lineHeight: 20,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         footnote: {
             fontSize: 13,
             lineHeight: 18,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         caption1: {
             fontSize: 12,
             lineHeight: 16,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         caption2: {
             fontSize: 11,
             lineHeight: 13,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
     },
     // Android Material typography
@@ -493,66 +504,79 @@ exports.typography = {
             fontSize: 96,
             lineHeight: 112,
             fontWeight: "300",
+            fontFamily: "AtkinsonHyperlegibleNext-ExtraLight",
         },
         headline2: {
             fontSize: 60,
             lineHeight: 72,
             fontWeight: "300",
+            fontFamily: "AtkinsonHyperlegibleNext-Light",
         },
         headline3: {
             fontSize: 48,
             lineHeight: 56,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         headline4: {
             fontSize: 34,
             lineHeight: 42,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         headline5: {
             fontSize: 24,
             lineHeight: 32,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         headline6: {
             fontSize: 20,
             lineHeight: 28,
             fontWeight: "500",
+            fontFamily: "AtkinsonHyperlegibleNext-Medium",
         },
         subtitle1: {
             fontSize: 16,
             lineHeight: 24,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         subtitle2: {
             fontSize: 14,
             lineHeight: 22,
             fontWeight: "500",
+            fontFamily: "AtkinsonHyperlegibleNext-Medium",
         },
         body1: {
             fontSize: 16,
             lineHeight: 24,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         body2: {
             fontSize: 14,
             lineHeight: 20,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         button: {
             fontSize: 14,
             lineHeight: 16,
             fontWeight: "500",
+            fontFamily: "AtkinsonHyperlegibleNext-Medium",
         },
         caption: {
             fontSize: 12,
             lineHeight: 16,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         overline: {
             fontSize: 10,
             lineHeight: 16,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
     },
     // Universal typography scale
@@ -561,43 +585,112 @@ exports.typography = {
             fontSize: 12,
             lineHeight: 16,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         sm: {
             fontSize: 14,
             lineHeight: 20,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         base: {
             fontSize: 16,
             lineHeight: 24,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         lg: {
             fontSize: 18,
             lineHeight: 28,
             fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleNext-Regular",
         },
         xl: {
             fontSize: 20,
             lineHeight: 28,
             fontWeight: "500",
+            fontFamily: "AtkinsonHyperlegibleNext-Medium",
         },
         "2xl": {
             fontSize: 24,
             lineHeight: 32,
             fontWeight: "600",
+            fontFamily: "AtkinsonHyperlegibleNext-SemiBold",
         },
         "3xl": {
             fontSize: 30,
             lineHeight: 36,
             fontWeight: "700",
+            fontFamily: "AtkinsonHyperlegibleNext-Bold",
         },
         "4xl": {
             fontSize: 36,
             lineHeight: 40,
             fontWeight: "700",
+            fontFamily: "AtkinsonHyperlegibleNext-ExtraBold",
         },
     },
+    // Monospace typography for code and technical content
+    mono: {
+        xs: {
+            fontSize: 11,
+            lineHeight: 16,
+            fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleMono-Regular",
+        },
+        sm: {
+            fontSize: 13,
+            lineHeight: 18,
+            fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleMono-Regular",
+        },
+        base: {
+            fontSize: 14,
+            lineHeight: 20,
+            fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleMono-Regular",
+        },
+        lg: {
+            fontSize: 16,
+            lineHeight: 24,
+            fontWeight: "400",
+            fontFamily: "AtkinsonHyperlegibleMono-Regular",
+        },
+        xl: {
+            fontSize: 18,
+            lineHeight: 28,
+            fontWeight: "500",
+            fontFamily: "AtkinsonHyperlegibleMono-Medium",
+        },
+        "2xl": {
+            fontSize: 20,
+            lineHeight: 32,
+            fontWeight: "600",
+            fontFamily: "AtkinsonHyperlegibleMono-SemiBold",
+        },
+        "3xl": {
+            fontSize: 24,
+            lineHeight: 36,
+            fontWeight: "700",
+            fontFamily: "AtkinsonHyperlegibleMono-Bold",
+        },
+    },
+};
+// Font families available in the app
+exports.fontFamilies = {
+    // Sans serif fonts
+    regular: "AtkinsonHyperlegibleNext-Regular",
+    light: "AtkinsonHyperlegibleNext-Light",
+    extraLight: "AtkinsonHyperlegibleNext-ExtraLight",
+    medium: "AtkinsonHyperlegibleNext-Medium",
+    semiBold: "AtkinsonHyperlegibleNext-SemiBold",
+    bold: "AtkinsonHyperlegibleNext-Bold",
+    extraBold: "AtkinsonHyperlegibleNext-ExtraBold",
+    // Monospace fonts
+    monoRegular: "AtkinsonHyperlegibleMono-Regular",
+    monoMedium: "AtkinsonHyperlegibleMono-Medium",
+    monoSemiBold: "AtkinsonHyperlegibleMono-SemiBold",
+    monoBold: "AtkinsonHyperlegibleMono-Bold",
 };
 exports.shadows = {
     none: {

package/dist/livestream-store/chat.js

@@ -160,11 +160,9 @@ const reduceChatIncremental = (state, newMessages, blocks, hideUris = []) => {
     const newAuthors = { ...state.authors };
     let hasChanges = false;
     const removedKeys = new Set();
-    console.log("newMessages", newMessages);
     for (const msg of newMessages) {
         if (msg.deleted) {
             hasChanges = true;
-            console.log("deleted", msg.uri);
             removedKeys.add(msg.uri);
         }
     }

package/dist/livestream-store/stream-key.js

@@ -81,7 +81,7 @@ const useStreamKey = () => {
             setStreamKey(JSON.stringify(newKey));
             setKey(newKey);
         };
-        generateKey();
+        generateKey().catch((err) => setError(err.message));
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [key, setStreamKey]);
     return { streamKey: key, error };

package/dist/player-store/player-provider.js

@@ -3,10 +3,18 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.PlayerProvider = void 0;
 exports.withPlayerProvider = withPlayerProvider;
 const jsx_runtime_1 = require("react/jsx-runtime");
-const crypto_1 = require("crypto");
 const react_1 = require("react");
 const context_1 = require("./context");
 const player_store_1 = require("./player-store");
+function randomUUID() {
+    let dt = new Date().getTime();
+    var uuid = "xxxxxxxx-xxxx-4xxx-yxxx-xxxxxxxxxxxx".replace(/[xy]/g, function (c) {
+        var r = (dt + Math.random() * 16) % 16 | 0;
+        dt = Math.floor(dt / 16);
+        return (c == "x" ? r : (r & 0x3) | 0x8).toString(16);
+    });
+    return uuid;
+}
 const PlayerProvider = ({ children, initialPlayers = [], defaultId = Math.random().toString(36).slice(8), }) => {
     const [players, setPlayers] = (0, react_1.useState)(() => {
         // Initialize with any initial player IDs provided
@@ -21,7 +29,7 @@ const PlayerProvider = ({ children, initialPlayers = [], defaultId = Math.random
         return initialPlayerStores;
     });
     const createPlayer = (0, react_1.useCallback)((id) => {
-        const playerId = id || (0, crypto_1.randomUUID)();
+        const playerId = id || randomUUID();
         const playerStore = (0, player_store_1.makePlayerStore)(playerId);
         setPlayers((prev) => ({
             ...prev,

package/dist/player-store/single-player-provider.js

@@ -12,8 +12,8 @@ const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = tslib_1.__importStar(require("react"));
 const zustand_1 = require("zustand");
-const player_store_1 = require("../player-store");
 const player_state_1 = require("./player-state");
+const player_store_1 = require("./player-store");
 const SinglePlayerContext = (0, react_1.createContext)(null);
 /**
  * Provider component for a single player that creates a scoped context

package/dist/streamplace-store/stream.js

@@ -111,7 +111,7 @@ function useCreateStreamRecord() {
         }
         // Use customUrl if provided, otherwise fall back to the store URL
         const finalUrl = customUrl || url;
-        const u = new URL(finalUrl);
+        const u = new URL(url);
         let thumbnail = undefined;
         if (customThumbnail) {
             try {

package/dist/ui/index.js

@@ -6,8 +6,8 @@
  * ZeroCSS provides a zero-config, atomic styling system optimized for React Native.
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.atomsNS = exports.theme = exports.useTheme = exports.usePlatformTypography = exports.lightTheme = exports.darkTheme = exports.createThemedStyles = exports.createThemeStyles = exports.createThemeIcons = exports.createThemeColors = exports.ThemeProvider = exports.responsiveValue = exports.platformStyle = exports.mergeStyles = exports.debounce = exports.typography = exports.spacing = exports.shadows = exports.colors = exports.breakpoints = exports.borderRadius = exports.w = exports.top = exports.text = exports.right = exports.r = exports.py = exports.px = exports.pt = exports.pr = exports.position = exports.pl = exports.pb = exports.p = exports.my = exports.mx = exports.mt = exports.mr = exports.ml = exports.mb = exports.m = exports.left = exports.layout = exports.h = exports.gap = exports.flex = exports.bottom = exports.borders = exports.bg = exports.atoms = void 0;
-exports.utils = exports.tokens = void 0;
+exports.tokens = exports.atomsNS = exports.theme = exports.useTheme = exports.usePlatformTypography = exports.lightTheme = exports.darkTheme = exports.createThemedStyles = exports.createThemeIcons = exports.createThemeColors = exports.ThemeProvider = exports.responsiveValue = exports.platformStyle = exports.mergeStyles = exports.debounce = exports.typography = exports.spacing = exports.shadows = exports.colors = exports.breakpoints = exports.borderRadius = exports.w = exports.top = exports.text = exports.right = exports.r = exports.py = exports.px = exports.pt = exports.pr = exports.position = exports.pl = exports.pb = exports.p = exports.my = exports.mx = exports.mt = exports.mr = exports.ml = exports.mb = exports.m = exports.left = exports.layout = exports.h = exports.gap = exports.flex = exports.bottom = exports.borders = exports.bg = exports.atoms = void 0;
+exports.utils = void 0;
 const tslib_1 = require("tslib");
 // Export the most commonly used ZeroCSS utilities
 var atoms_1 = require("../lib/theme/atoms");
@@ -66,7 +66,6 @@ var theme_1 = require("../lib/theme/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.7.26",
+  "version": "0.7.29",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -17,6 +17,7 @@
   "author": "Streamplace",
   "license": "MIT",
   "devDependencies": {
+    "@types/sdp-transform": "^2.15.0",
     "tsup": "^8.5.0"
   },
   "dependencies": {
@@ -53,5 +54,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "4dcda25a5e66a2c1a9f412bee2e09c4dd528a939"
+  "gitHead": "8dba54b751a4a48f125485ef8b0997428f6095cf"
 }

package/src/components/chat/chat-box.tsx

@@ -421,7 +421,8 @@ export function ChatBox({
         >
           <Button
             variant="secondary"
-            style={{ borderRadius: 16, height: 36, maxWidth: 36 }}
+            style={{ borderRadius: 16, maxWidth: 44, aspectRatio: 1 }}
+            aria-label="Insert Mention"
             onPress={() => {
               // if the last character is not @, add it
               !message.endsWith("@") && setMessage(message + "@");
@@ -445,7 +446,8 @@ export function ChatBox({
           >
             <Button
               variant="secondary"
-              style={{ borderRadius: 16, height: 36, maxWidth: 36 }}
+              aria-label="Insert Emoji"
+              style={{ borderRadius: 16, maxWidth: 44, aspectRatio: 1 }}
               onPress={() => setShowEmojiSelector(!showEmojiSelector)}
             >
               <Text>{COOL_EMOJI_LIST[emojiIconIndex]}</Text>
@@ -454,7 +456,8 @@ export function ChatBox({
           {!isPopout && (
             <Button
               variant="secondary"
-              style={{ borderRadius: 16, height: 36, maxWidth: 36 }}
+              aria-label="Popout Chat"
+              style={{ borderRadius: 16, maxWidth: 44, aspectRatio: 1 }}
               onPress={() => {
                 if (!linfo) return;
                 const u = new URL(window.location.href);