@streamplace/components 0.7.27 → 0.7.29

package/dist/components/chat/chat-box.js

@@ -290,7 +290,7 @@ function ChatBox({ isPopout, chatBoxStyle, emojiData, setIsChatVisible, }) {
                     atoms_1.mb[2],
                     atoms_1.gap.all[2],
                     { justifyContent: "flex-end" },
-                ], children: [(0, jsx_runtime_1.jsx)(__1.Button, { variant: "secondary", style: { borderRadius: 16, height: 36, maxWidth: 36 }, onPress: () => {
+                ], children: [(0, jsx_runtime_1.jsx)(__1.Button, { variant: "secondary", style: { borderRadius: 16, maxWidth: 44, aspectRatio: 1 }, "aria-label": "Insert Mention", onPress: () => {
                             // if the last character is not @, add it
                             !message.endsWith("@") && setMessage(message + "@");
                             // get all the text after the last @
@@ -302,7 +302,7 @@ function ChatBox({ isPopout, chatBoxStyle, emojiData, setIsChatVisible, }) {
                             textAreaRef.current?.focus();
                         }, children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.AtSignIcon, { size: 20, color: "white" }) }), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onHoverOut: () => {
                             setEmojiIconIndex(Math.floor(Math.random() * COOL_EMOJI_LIST.length));
-                        }, children: (0, jsx_runtime_1.jsx)(__1.Button, { variant: "secondary", style: { borderRadius: 16, height: 36, maxWidth: 36 }, onPress: () => setShowEmojiSelector(!showEmojiSelector), children: (0, jsx_runtime_1.jsx)(__1.Text, { children: COOL_EMOJI_LIST[emojiIconIndex] }) }) }), !isPopout && ((0, jsx_runtime_1.jsx)(__1.Button, { variant: "secondary", style: { borderRadius: 16, height: 36, maxWidth: 36 }, onPress: () => {
+                        }, children: (0, jsx_runtime_1.jsx)(__1.Button, { variant: "secondary", "aria-label": "Insert Emoji", style: { borderRadius: 16, maxWidth: 44, aspectRatio: 1 }, onPress: () => setShowEmojiSelector(!showEmojiSelector), children: (0, jsx_runtime_1.jsx)(__1.Text, { children: COOL_EMOJI_LIST[emojiIconIndex] }) }) }), !isPopout && ((0, jsx_runtime_1.jsx)(__1.Button, { variant: "secondary", "aria-label": "Popout Chat", style: { borderRadius: 16, maxWidth: 44, aspectRatio: 1 }, onPress: () => {
                             if (!linfo)
                                 return;
                             const u = new URL(window.location.href);

package/dist/components/chat/chat.js

@@ -156,5 +156,5 @@ function Chat({ shownMessages = SHOWN_MSGS, style: propsStyle, canModerate = fal
                     atoms_1.flex.grow[1],
                     atoms_1.flex.shrink[1],
                     { minWidth: 0, maxWidth: "100%" },
-                ], data: chat.slice(0, shownMessages), inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => ((0, jsx_runtime_1.jsx)(ChatLine, { item: item, canModerate: canModerate })), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50, onScroll: handleScroll, scrollEventThrottle: 16 }), (0, jsx_runtime_1.jsx)(mod_view_1.ModView, {})] }));
+                ], data: chat.slice(0, shownMessages), inverted: true, keyExtractor: keyExtractor, renderItem: ({ item, index }) => ((0, jsx_runtime_1.jsx)(ChatLine, { item: item, canModerate: canModerate })), removeClippedSubviews: true, maxToRenderPerBatch: 10, initialNumToRender: 10, updateCellsBatchingPeriod: 50, onScroll: handleScroll, scrollEventThrottle: 16, nestedScrollEnabled: true }), (0, jsx_runtime_1.jsx)(mod_view_1.ModView, {})] }));
 }

package/dist/components/mobile-player/ui/autoplay-button.js

@@ -19,6 +19,7 @@ function AutoplayButton() {
                 .play()
                 .then(() => {
                 setAutoplayFailed(false);
+                setMuted(false);
                 setUserInteraction();
             })
                 .catch((err) => {

package/dist/components/mobile-player/ui/viewer-context-menu.js

@@ -33,7 +33,7 @@ function ContextMenu({ dropdownPortalContainer, }) {
     const DropdownMenuContent = isMobile
         ? ui_1.ResponsiveDropdownMenuContent
         : ui_1.DropdownMenuContentWithoutPortal;
-    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Settings, { color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsx)(Portal, { container: dropdownPortalContainer, children: (0, jsx_runtime_1.jsxs)(DropdownMenuContent, { side: "top", align: "end", children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: r.name }) })))] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Show Debug Info" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Report", children: (0, jsx_runtime_1.jsx)(ReportButton, { livestream: livestream, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }) })] }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Menu, { color: theme_1.colors.gray[200] }) }), (0, jsx_runtime_1.jsx)(Portal, { container: dropdownPortalContainer, children: (0, jsx_runtime_1.jsxs)(DropdownMenuContent, { side: "top", align: "end", children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: r.name }) })))] }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Show Debug Info" }) }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuGroup, { title: "Report", children: (0, jsx_runtime_1.jsx)(ReportButton, { livestream: livestream, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }) })] }) })] }));
 }
 function ReportButton({ livestream, setReportModalOpen, setReportSubject, }) {
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();

package/dist/components/mobile-player/ui/viewer-loading-overlay.js

@@ -9,7 +9,7 @@ const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-rea
 const __1 = require("../../..");
 function ViewerLoadingOverlay() {
     const status = (0, __1.usePlayerStore)((x) => x.status);
-    const theme = (0, __1.useTheme)();
+    const { theme, zero: zt } = (0, __1.useTheme)();
     const opacity = (0, react_native_reanimated_1.useSharedValue)(0);
     (0, react_1.useEffect)(() => {
         if (status === __1.PlayerStatus.PLAYING || status === __1.PlayerStatus.SUSPEND) {
@@ -32,7 +32,7 @@ function ViewerLoadingOverlay() {
     }
     let spinner = (0, jsx_runtime_1.jsx)(__1.Loader, { size: "large" });
     if (status === __1.PlayerStatus.PAUSE) {
-        spinner = (0, jsx_runtime_1.jsx)(lucide_react_native_1.Play, { size: "$12", color: theme.styles.text.primary["color"] });
+        spinner = (0, jsx_runtime_1.jsx)(lucide_react_native_1.Play, { size: "$12", color: theme.colors.foreground });
     }
     return ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
             {

package/dist/components/mobile-player/use-webrtc.js

@@ -3,7 +3,10 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.default = useWebRTC;
 exports.negotiateConnectionWithClientOffer = negotiateConnectionWithClientOffer;
 exports.useWebRTCIngest = useWebRTCIngest;
+exports.forceStereoAudio = forceStereoAudio;
+const tslib_1 = require("tslib");
 const react_1 = require("react");
+const sdpTransform = tslib_1.__importStar(require("sdp-transform"));
 const __1 = require("../..");
 const webrtc_primitives_1 = require("./webrtc-primitives");
 function useWebRTC(endpoint) {
@@ -97,6 +100,11 @@ async function negotiateConnectionWithClientOffer(peerConnection, endpoint, bear
         offerToReceiveAudio: true,
         offerToReceiveVideo: true,
     });
+    if (!offer.sdp) {
+        throw Error("no SDP in offer");
+    }
+    const newSDP = forceStereoAudio(offer.sdp);
+    offer.sdp = newSDP;
     /** https://developer.mozilla.org/en-US/docs/Web/API/RTCPeerConnection/setLocalDescription */
     await peerConnection.setLocalDescription(offer);
     /** Wait for ICE gathering to complete */
@@ -247,3 +255,25 @@ function useWebRTCIngest({ endpoint, }) {
     }, [peerConnection, mediaStream, ingestLive]);
     return [mediaStream, setMediaStream];
 }
+function forceStereoAudio(sdp) {
+    const parsedSDP = sdpTransform.parse(sdp);
+    const audioMedia = parsedSDP.media.find((m) => m.type === "audio");
+    if (!audioMedia) {
+        throw Error("no audio media in SDP");
+    }
+    const opusCodec = audioMedia.rtp.find((c) => c.codec === "opus");
+    if (!opusCodec) {
+        throw Error("no opus codec in SDP");
+    }
+    const opusFMTP = audioMedia.fmtp.find((c) => c.payload === opusCodec.payload);
+    if (!opusFMTP) {
+        throw Error("no opus fmtp in SDP");
+    }
+    const opusParams = sdpTransform.parseParams(opusFMTP.config);
+    opusParams.stereo = 1;
+    const newParams = Object.entries(opusParams)
+        .map(([k, v]) => `${k}=${v}`)
+        .join(";");
+    opusFMTP.config = newParams;
+    return sdpTransform.write(parsedSDP);
+}

package/dist/components/ui/button.js

@@ -7,7 +7,7 @@ const class_variance_authority_1 = require("class-variance-authority");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
 const theme_1 = require("../../lib/theme/theme");
-const tokens = tslib_1.__importStar(require("../../lib/theme/tokens"));
+const zero = tslib_1.__importStar(require("../../ui"));
 const button_1 = require("./primitives/button");
 const text_1 = require("./primitives/text");
 // Button variants using class-variance-authority pattern
@@ -36,38 +36,113 @@ const buttonVariants = (0, class_variance_authority_1.cva)("", {
 });
 exports.buttonVariants = buttonVariants;
 exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", children, leftIcon, rightIcon, loading = false, loadingText, disabled, style, ...props }, ref) => {
-    const { theme } = (0, theme_1.useTheme)();
-    // Create dynamic styles based on theme
-    const styles = (0, react_1.useMemo)(() => createStyles(theme), [theme]);
-    // Get variant styles
+    const { zero: zt, icons } = (0, theme_1.useTheme)();
+    // Get variant styles using theme.zero
     const buttonStyle = (0, react_1.useMemo)(() => {
-        const variantStyle = styles[`${variant}Button`];
-        const sizeStyle = styles[`${size}Button`];
-        return [variantStyle, sizeStyle];
-    }, [variant, size, styles]);
-    // Get inner styles for button content
-    const buttonInnerStyle = (0, react_1.useMemo)(() => {
-        const sizeInnerStyle = styles[`${size}ButtonInner`];
-        return sizeInnerStyle;
-    }, [size, styles]);
-    const textStyle = react_1.default.useMemo(() => {
-        const variantTextStyle = styles[`${variant}Text`];
-        const sizeTextStyle = styles[`${size}Text`];
-        return [variantTextStyle, sizeTextStyle];
-    }, [variant, size, styles]);
+        switch (variant) {
+            case "primary":
+                return zt.button.primary;
+            case "secondary":
+                return zt.button.secondary;
+            case "outline":
+                return zt.button.outline;
+            case "ghost":
+                return zt.button.ghost;
+            case "destructive":
+                return [zt.bg.destructive, zero.shadows.sm];
+            case "success":
+                return [zt.bg.success, zero.shadows.sm];
+            default:
+                return zt.button.primary;
+        }
+    }, [variant, zt]);
+    // Get text styles using theme.zero
+    const textStyle = (0, react_1.useMemo)(() => {
+        switch (variant) {
+            case "primary":
+                return [zt.text.primaryForeground, { fontWeight: "600" }];
+            case "secondary":
+                return [zt.text.secondaryForeground, { fontWeight: "500" }];
+            case "outline":
+            case "ghost":
+                return [zt.text.foreground, { fontWeight: "500" }];
+            case "destructive":
+                return [zt.text.destructiveForeground, { fontWeight: "600" }];
+            case "success":
+                return [zt.text.successForeground, { fontWeight: "600" }];
+            default:
+                return [zt.text.primaryForeground, { fontWeight: "600" }];
+        }
+    }, [variant, zt]);
+    // Size styles using theme.zero
+    const sizeStyles = (0, react_1.useMemo)(() => {
+        switch (size) {
+            case "sm":
+                return {
+                    button: [
+                        zero.px[3],
+                        zero.py[2],
+                        { borderRadius: zero.borderRadius.md },
+                    ],
+                    inner: { gap: 4 },
+                    text: zt.text.sm,
+                };
+            case "lg":
+                return {
+                    button: [
+                        zero.px[6],
+                        zero.py[3],
+                        { borderRadius: zero.borderRadius.md },
+                    ],
+                    inner: { gap: 8 },
+                    text: zt.text.lg,
+                };
+            case "xl":
+                return {
+                    button: [
+                        zero.px[8],
+                        zero.py[4],
+                        { borderRadius: zero.borderRadius.lg },
+                    ],
+                    inner: { gap: 12 },
+                    text: zt.text.xl,
+                };
+            case "pill":
+                return {
+                    button: [
+                        zero.px[4],
+                        zero.py[2],
+                        { borderRadius: zero.borderRadius.full },
+                    ],
+                    inner: { gap: 4 },
+                    text: zt.text.sm,
+                };
+            case "md":
+            default:
+                return {
+                    button: [
+                        zero.px[4],
+                        zero.py[2],
+                        { borderRadius: zero.borderRadius.md },
+                    ],
+                    inner: { gap: 6 },
+                    text: zt.text.md,
+                };
+        }
+    }, [size, zt]);
     const iconSize = react_1.default.useMemo(() => {
         switch (size) {
             case "sm":
-                return 16;
+                return icons.size.sm;
             case "lg":
-                return 20;
+                return icons.size.lg;
             case "xl":
-                return 24;
+                return icons.size.xl;
             case "md":
             default:
-                return 18;
+                return icons.size.md;
         }
-    }, [size]);
+    }, [size, icons]);
     const spinnerSize = (0, react_1.useMemo)(() => {
         switch (size) {
             case "sm":
@@ -84,140 +159,17 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
         switch (variant) {
             case "outline":
             case "ghost":
-                return theme.colors.primary;
+                return icons.color.primary;
             case "secondary":
-                return theme.colors.secondaryForeground;
+                return icons.color.secondary;
             case "destructive":
-                return theme.colors.destructiveForeground;
+                return icons.color.destructive;
+            case "success":
+                return icons.color.success;
             default:
-                return theme.colors.primaryForeground;
+                return icons.color.default;
         }
-    }, [variant, theme.colors]);
-    return ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Root, { ref: ref, disabled: disabled || loading, style: [buttonStyle, style], ...props, children: (0, jsx_runtime_1.jsxs)(button_1.ButtonPrimitive.Content, { style: buttonInnerStyle, children: [loading && !leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", style: { width: iconSize, height: iconSize }, children: leftIcon })) : null, (0, jsx_runtime_1.jsx)(text_1.TextPrimitive.Root, { style: textStyle, children: loading && loadingText ? loadingText : children }), loading && rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", style: { width: iconSize, height: iconSize }, children: rightIcon })) : null] }) }));
+    }, [variant, icons]);
+    return ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Root, { ref: ref, disabled: disabled || loading, style: [buttonStyle, sizeStyles.button, style], ...props, children: (0, jsx_runtime_1.jsxs)(button_1.ButtonPrimitive.Content, { style: sizeStyles.inner, children: [loading && !leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", style: { width: iconSize, height: iconSize }, children: leftIcon })) : null, (0, jsx_runtime_1.jsx)(text_1.TextPrimitive.Root, { style: [textStyle, sizeStyles.text], children: loading && loadingText ? loadingText : children }), loading && rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", style: { width: iconSize, height: iconSize }, children: rightIcon })) : null] }) }));
 });
 exports.Button.displayName = "Button";
-// Create theme-based styles
-function createStyles(theme) {
-    return react_native_1.StyleSheet.create({
-        // Variant styles
-        primaryButton: {
-            backgroundColor: theme.colors.primary,
-            borderWidth: 0,
-            ...theme.shadows.sm,
-        },
-        primaryText: {
-            color: theme.colors.primaryForeground,
-            fontWeight: "600",
-        },
-        secondaryButton: {
-            backgroundColor: theme.colors.secondary,
-            borderWidth: 0,
-        },
-        secondaryText: {
-            color: theme.colors.secondaryForeground,
-            fontWeight: "500",
-        },
-        outlineButton: {
-            backgroundColor: "transparent",
-            borderWidth: 1,
-            borderColor: theme.colors.border,
-        },
-        outlineText: {
-            color: theme.colors.foreground,
-            fontWeight: "500",
-        },
-        ghostButton: {
-            backgroundColor: "transparent",
-            borderWidth: 0,
-        },
-        ghostText: {
-            color: theme.colors.foreground,
-            fontWeight: "500",
-        },
-        destructiveButton: {
-            backgroundColor: theme.colors.destructive,
-            borderWidth: 0,
-            ...theme.shadows.sm,
-        },
-        destructiveText: {
-            color: theme.colors.destructiveForeground,
-            fontWeight: "600",
-        },
-        successButton: {
-            backgroundColor: theme.colors.success,
-            borderWidth: 0,
-            ...theme.shadows.sm,
-        },
-        successText: {
-            color: theme.colors.successForeground,
-            fontWeight: "600",
-        },
-        pillButton: {
-            paddingHorizontal: theme.spacing[2],
-            paddingVertical: theme.spacing[1],
-            borderRadius: tokens.borderRadius.full,
-            minHeight: tokens.touchTargets.minimum / 2,
-        },
-        pillText: {
-            color: theme.colors.primaryForeground,
-            fontWeight: "400",
-        },
-        // Size styles
-        smButton: {
-            paddingHorizontal: theme.spacing[3],
-            paddingVertical: theme.spacing[2],
-            borderRadius: tokens.borderRadius.md,
-            minHeight: tokens.touchTargets.minimum,
-            gap: theme.spacing[1],
-        },
-        smButtonInner: {
-            gap: theme.spacing[1],
-        },
-        smText: {
-            fontSize: 14,
-            lineHeight: 16,
-        },
-        mdButton: {
-            paddingHorizontal: theme.spacing[4],
-            paddingVertical: theme.spacing[3],
-            borderRadius: tokens.borderRadius.md,
-            minHeight: tokens.touchTargets.minimum,
-            gap: theme.spacing[2],
-        },
-        mdButtonInner: {
-            gap: theme.spacing[2],
-        },
-        mdText: {
-            fontSize: 16,
-            lineHeight: 18,
-        },
-        lgButton: {
-            paddingHorizontal: theme.spacing[6],
-            paddingVertical: theme.spacing[4],
-            borderRadius: tokens.borderRadius.md,
-            minHeight: tokens.touchTargets.comfortable,
-            gap: theme.spacing[3],
-        },
-        lgButtonInner: {
-            gap: theme.spacing[3],
-        },
-        lgText: {
-            fontSize: 18,
-            lineHeight: 20,
-        },
-        xlButton: {
-            paddingHorizontal: theme.spacing[8],
-            paddingVertical: theme.spacing[5],
-            borderRadius: tokens.borderRadius.lg,
-            minHeight: tokens.touchTargets.large,
-            gap: theme.spacing[4],
-        },
-        xlButtonInner: {
-            gap: theme.spacing[4],
-        },
-        xlText: {
-            fontSize: 20,
-            lineHeight: 24,
-        },
-    });
-}

package/dist/components/ui/dialog.js

@@ -8,6 +8,7 @@ const lucide_react_native_1 = require("lucide-react-native");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
 const theme_1 = require("../../lib/theme/theme");
+const zero = tslib_1.__importStar(require("../../ui"));
 const icons_1 = require("./icons");
 const modal_1 = require("./primitives/modal");
 const ThemedX = (0, icons_1.createThemedIcon)(lucide_react_native_1.X);
@@ -42,9 +43,66 @@ const dialogVariants = (0, class_variance_authority_1.cva)("", {
 });
 exports.dialogVariants = dialogVariants;
 exports.Dialog = (0, react_1.forwardRef)(({ variant = "left", size = "md", position = "center", children, title, description, dismissible = true, showCloseButton = true, onClose, open = false, onOpenChange, ...props }, ref) => {
-    const { theme } = (0, theme_1.useTheme)();
-    // Create dynamic styles based on theme
-    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
+    const { zero: zt, theme } = (0, theme_1.useTheme)();
+    // Content styles using theme.zero
+    const contentStyles = react_1.default.useMemo(() => {
+        const baseStyle = [
+            zt.bg.card,
+            zero.r.lg,
+            zero.shadows.lg,
+            { maxHeight: "90%", maxWidth: "90%" },
+        ];
+        const variantStyle = (() => {
+            switch (variant) {
+                case "sheet":
+                    return [
+                        { borderRadius: zero.borderRadius.xl },
+                        {
+                            borderBottomLeftRadius: 0,
+                            borderBottomRightRadius: 0,
+                            marginTop: "auto",
+                            marginBottom: 0,
+                            maxHeight: "80%",
+                            width: "100%",
+                            maxWidth: "100%",
+                        },
+                    ];
+                case "fullscreen":
+                    return [
+                        {
+                            width: "100%",
+                            height: "100%",
+                            maxWidth: "100%",
+                            maxHeight: "100%",
+                            borderRadius: 0,
+                            margin: 0,
+                        },
+                    ];
+                default:
+                    return [];
+            }
+        })();
+        const sizeStyle = (() => {
+            switch (size) {
+                case "sm":
+                    return { minWidth: 300, minHeight: 200 };
+                case "lg":
+                    return { minWidth: 500, minHeight: 400 };
+                case "xl":
+                    return { minWidth: 600, minHeight: 500 };
+                case "full":
+                    return {
+                        width: "95%",
+                        height: "95%",
+                        maxWidth: "95%",
+                        maxHeight: "95%",
+                    };
+                default:
+                    return { minWidth: 400, minHeight: 300 };
+            }
+        })();
+        return [baseStyle, variantStyle, sizeStyle].flat();
+    }, [variant, size, zero]);
     const handleClose = react_1.default.useCallback(() => {
         if (onClose) {
             onClose();
@@ -70,137 +128,46 @@ exports.Dialog = (0, react_1.forwardRef)(({ variant = "left", size = "md", posit
         }
         return "fade";
     }, [variant]);
-    return ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Root, { ref: ref, open: open, onOpenChange: onOpenChange, presentationStyle: presentationStyle, animationType: animationType, ...props, children: (0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Overlay, { dismissible: dismissible, onDismiss: handleClose, style: styles.overlay, children: (0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Content, { position: position || "left", size: size || "md", style: [
-                    styles.content,
-                    styles[`${variant}Content`],
-                    styles[`${size}Content`],
-                ], children: [(title || showCloseButton) && ((0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Header, { withBorder: variant !== "sheet", style: styles.header, children: [(0, jsx_runtime_1.jsx)(exports.DialogTitle, { children: title }), showCloseButton && ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Close, { onClose: handleClose, style: styles.closeButton, children: (0, jsx_runtime_1.jsx)(DialogCloseIcon, {}) }))] })), (0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Body, { scrollable: variant !== "fullscreen", style: styles.body, children: [description && ((0, jsx_runtime_1.jsx)(exports.DialogDescription, { children: description })), children] })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Root, { ref: ref, open: open, onOpenChange: onOpenChange, presentationStyle: presentationStyle, animationType: animationType, ...props, children: (0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Overlay, { dismissible: dismissible, onDismiss: handleClose, style: zt.bg.overlay, children: (0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Content, { position: position || "left", size: size || "md", style: contentStyles, children: [(title || showCloseButton) && ((0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Header, { withBorder: variant !== "sheet", style: [
+                            zero.p[4],
+                            {
+                                flexDirection: "row",
+                                alignItems: "center",
+                                justifyContent: "space-between",
+                            },
+                        ], children: [(0, jsx_runtime_1.jsx)(exports.DialogTitle, { children: title }), showCloseButton && ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Close, { onClose: handleClose, style: [
+                                    zero.p[2],
+                                    {
+                                        width: 44,
+                                        height: 44,
+                                        alignItems: "center",
+                                        justifyContent: "center",
+                                    },
+                                ], children: (0, jsx_runtime_1.jsx)(DialogCloseIcon, {}) }))] })), (0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Body, { scrollable: variant !== "fullscreen", style: [zero.p[6], { paddingTop: 0, flex: 1 }], children: [description && ((0, jsx_runtime_1.jsx)(exports.DialogDescription, { children: description })), children] })] }) }) }));
 });
 exports.Dialog.displayName = "Dialog";
 exports.DialogTitle = (0, react_1.forwardRef)(({ children, style, ...props }, ref) => {
-    const { theme } = (0, theme_1.useTheme)();
-    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
+    const { zero: zt } = (0, theme_1.useTheme)();
     if (!children)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [styles.title, style], ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [zt.text.xl, { fontWeight: "600", flex: 1 }, style], ...props, children: children }));
 });
 exports.DialogTitle.displayName = "DialogTitle";
 exports.DialogDescription = (0, react_1.forwardRef)(({ children, style, ...props }, ref) => {
-    const { theme } = (0, theme_1.useTheme)();
-    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
+    const { zero: zt } = (0, theme_1.useTheme)();
     if (!children)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [styles.description, style], ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [zt.text.muted, zero.mb[4], style], ...props, children: children }));
 });
 exports.DialogDescription.displayName = "DialogDescription";
 exports.DialogFooter = (0, react_1.forwardRef)(({ children, direction = "row", justify = "flex-end", withBorder = true, style, ...props }, ref) => {
-    const { theme } = (0, theme_1.useTheme)();
-    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
+    const { zero: zt } = (0, theme_1.useTheme)();
     if (!children)
         return null;
-    return ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Footer, { ref: ref, withBorder: withBorder, direction: direction, justify: justify, style: [styles.footer, style], ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Footer, { ref: ref, withBorder: withBorder, direction: direction, justify: justify, style: [zero.p[6], { gap: 8 }, style], ...props, children: children }));
 });
 exports.DialogFooter.displayName = "DialogFooter";
 // Dialog Close Icon component (Lucide X)
 const DialogCloseIcon = () => {
     return (0, jsx_runtime_1.jsx)(ThemedX, { size: "md", variant: "default" });
 };
-// Create theme-aware styles
-function createStyles(theme) {
-    return react_native_1.StyleSheet.create({
-        overlay: {
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
-        },
-        content: {
-            backgroundColor: theme.colors.card,
-            borderRadius: theme.borderRadius.lg,
-            ...theme.shadows.lg,
-            maxHeight: "90%",
-            maxWidth: "90%",
-        },
-        // Variant styles
-        defaultContent: {
-        // Default styles already applied in content
-        },
-        sheetContent: {
-            borderTopLeftRadius: theme.borderRadius.xl,
-            borderTopRightRadius: theme.borderRadius.xl,
-            borderBottomLeftRadius: 0,
-            borderBottomRightRadius: 0,
-            marginTop: "auto",
-            marginBottom: 0,
-            maxHeight: "80%",
-            width: "100%",
-            maxWidth: "100%",
-        },
-        fullscreenContent: {
-            width: "100%",
-            height: "100%",
-            maxWidth: "100%",
-            maxHeight: "100%",
-            borderRadius: 0,
-            margin: 0,
-        },
-        // Size styles
-        smContent: {
-            minWidth: 300,
-            minHeight: 200,
-        },
-        mdContent: {
-            minWidth: 400,
-            minHeight: 300,
-        },
-        lgContent: {
-            minWidth: 500,
-            minHeight: 400,
-        },
-        xlContent: {
-            minWidth: 600,
-            minHeight: 500,
-        },
-        fullContent: {
-            width: "95%",
-            height: "95%",
-            maxWidth: "95%",
-            maxHeight: "95%",
-        },
-        header: {
-            paddingHorizontal: theme.spacing[6],
-            paddingVertical: theme.spacing[4],
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
-        },
-        body: {
-            paddingHorizontal: theme.spacing[6],
-            paddingBottom: theme.spacing[6],
-            flex: 1,
-        },
-        footer: {
-            paddingHorizontal: theme.spacing[6],
-            paddingVertical: theme.spacing[4],
-            gap: theme.spacing[2],
-        },
-        title: {
-            fontSize: 20,
-            fontWeight: "600",
-            color: theme.colors.text,
-            flex: 1,
-            lineHeight: 24,
-        },
-        description: {
-            fontSize: 16,
-            color: theme.colors.textMuted,
-            lineHeight: 22,
-            marginBottom: theme.spacing[4],
-        },
-        closeButton: {
-            width: theme.touchTargets.minimum,
-            height: theme.touchTargets.minimum,
-            alignItems: "center",
-            justifyContent: "center",
-            borderRadius: theme.borderRadius.sm,
-            marginLeft: theme.spacing[2],
-        },
-    });
-}