@streamplace/components 0.7.27 → 0.7.30

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/chat/mod-view.js

@@ -25,6 +25,7 @@ exports.ModView = (0, react_1.forwardRef)(() => {
     const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
     const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
     const setModMessage = (0, player_store_1.usePlayerStore)((x) => x.setModMessage);
+    const deleteChatMessage = (0, livestream_store_1.useDeleteChatMessage)();
     // get the channel did
     const channelId = (0, player_store_1.usePlayerStore)((state) => state.src);
     // get the logged in user's identity
@@ -77,23 +78,37 @@ exports.ModView = (0, react_1.forwardRef)(() => {
                                             ? "Blocking..."
                                             : `Block user @${message.author.handle} from this channel` })) })] })), (0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: `User actions`, children: [(0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
                                         react_native_1.Linking.openURL(`https://${BSKY_FRONTEND_DOMAIN}/profile/${message.author.handle}`);
-                                    }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { color: "primary", children: ["View user on ", BSKY_FRONTEND_DOMAIN] }) }), message.author.did === agent?.did && ((0, jsx_runtime_1.jsx)(DeleteButton, { message: message })), message.author.did !== agent?.did && ((0, jsx_runtime_1.jsx)(ReportButton, { message: message, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }))] })] })) })] }));
+                                    }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { color: "primary", children: ["View user on ", BSKY_FRONTEND_DOMAIN] }) }), message.author.did === agent?.did && ((0, jsx_runtime_1.jsx)(DeleteButton, { message: message, deleteChatMessage: deleteChatMessage })), message.author.did !== agent?.did && ((0, jsx_runtime_1.jsx)(ReportButton, { message: message, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }))] })] })) })] }));
 });
-function DeleteButton({ message, }) {
-    const deleteChatMessage = (0, livestream_store_1.useDeleteChatMessage)();
-    const [confirming, setConfirming] = (0, react_1.useState)(false);
+var DeleteState;
+(function (DeleteState) {
+    DeleteState[DeleteState["None"] = 0] = "None";
+    DeleteState[DeleteState["Confirmed"] = 1] = "Confirmed";
+    DeleteState[DeleteState["Deleting"] = 2] = "Deleting";
+})(DeleteState || (DeleteState = {}));
+function DeleteButton({ message, deleteChatMessage, }) {
+    const [confirming, setConfirming] = (0, react_1.useState)(DeleteState.None);
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
     return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
             if (!message)
                 return;
             if (!confirming) {
-                setConfirming(true);
+                setConfirming(DeleteState.Confirmed);
                 return;
             }
+            if (confirming === DeleteState.Confirmed) {
+                setConfirming(DeleteState.Deleting);
+            }
             deleteChatMessage(message.uri).then(() => {
+                // wait ~a second before resetting state to allow deletion to take effect
+                setTimeout(() => setConfirming(DeleteState.None), 1000);
                 onOpenChange?.(false);
             });
-        }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "destructive", children: confirming ? "Are you sure?" : "Delete message" }) }));
+        }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "destructive", children: confirming === DeleteState.Confirmed
+                ? "Are you sure? Click again to confirm."
+                : confirming === DeleteState.Deleting
+                    ? "Deleting..."
+                    : "Delete message" }) }));
 }
 function ReportButton({ message, setReportModalOpen, setReportSubject, }) {
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();

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,
-        },
-    });
-}