@streamplace/components 0.7.34 → 0.8.0

package/dist/components/dashboard/problems.js

@@ -8,47 +8,49 @@ const react_1 = require("react");
 const react_native_1 = require("react-native");
 const livestream_store_1 = require("../../livestream-store");
 const zero = tslib_1.__importStar(require("../../ui"));
+const ui_1 = require("../ui");
 const { bg, r, borders, p, text, layout, gap } = zero;
+const getIcon = (severity) => {
+    switch (severity) {
+        case "error":
+            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleX, { size: 24, color: "white" });
+        case "warning":
+            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.CircleAlert, { size: 24, color: "white" });
+        case "info":
+            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.Info, { size: 24, color: "white" });
+        default:
+            return (0, jsx_runtime_1.jsx)(lucide_react_native_1.Sparkle, { size: 24, color: "white" });
+    }
+};
 const Problems = ({ probs, onIgnore, }) => {
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontSize: 24, fontWeight: "bold" }], children: "Optimize Your Stream" }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[300]], children: "We've found a few things that could improve your stream's reliability." })] }), probs.map((p) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[4]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[2]], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { size: "2xl", style: [text.white, { fontWeight: "600" }], children: "Optimize Your Stream" }), (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.gray[300]], children: "We've found a few things that could improve your stream's reliability." })] }), probs.map((p) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                         gap.all[2],
                         layout.flex.row,
                         layout.flex.alignCenter,
                         { gap: 8, alignItems: "flex-start" },
-                    ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
-                                r.sm,
-                                p[2],
+                    ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                zero.r.full,
+                                zero.p[1],
                                 {
-                                    width: 82,
-                                    textAlign: "center",
                                     backgroundColor: p.severity === "error"
                                         ? "#7f1d1d"
                                         : p.severity === "warning"
                                             ? "#7c2d12"
                                             : "#1e3a8a",
-                                    color: "white",
-                                    fontSize: 12,
                                 },
-                            ], children: p.severity }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [{ flex: 1 }, gap.all[1]], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontWeight: "600" }], children: p.code }), (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.gray[400], { fontSize: 14 }], children: p.message }), p.link && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => p.link && react_native_1.Linking.openURL(p.link), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                            ], children: getIcon(p.severity) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [{ flex: 1 }, gap.all[1]], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.white, { fontWeight: "600" }], children: p.code }), (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.gray[400], { fontSize: 14 }], children: p.message }), p.link && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => p.link && react_native_1.Linking.openURL(p.link), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                                             layout.flex.row,
                                             layout.flex.alignCenter,
                                             gap.all[2],
-                                        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [{ color: "#3b82f6", fontSize: 14 }], children: "Learn More" }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ExternalLink, { size: 12, color: "#3b82f6" })] }) }))] })] }) }, p.message))), (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: onIgnore, style: [
-                    bg.blue[600],
-                    r.md,
-                    p[3],
-                    layout.flex.center,
-                    { marginTop: 16 },
-                ], children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [text.white, { fontWeight: "600" }], children: "Ignore" }) })] }));
+                                        ], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { style: [{ color: "#3b82f6", fontSize: 14 }], children: "Learn More" }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ExternalLink, { size: 12, color: "#3b82f6" })] }) }))] })] }) }, p.message))), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.row, layout.flex.justify.end], children: (0, jsx_runtime_1.jsx)(ui_1.Button, { onPress: onIgnore, variant: "secondary", children: (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [text.white, { fontWeight: "600" }], children: "Acknowledge" }) }) })] }));
 };
-const ProblemsWrapper = ({ children, }) => {
+exports.ProblemsWrapper = (0, react_1.forwardRef)(({ children }, ref) => {
     const problems = (0, livestream_store_1.useLivestreamStore)((x) => x.problems);
     const [dismiss, setDismiss] = (0, react_1.useState)(false);
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-            { position: "relative", flex: 1 },
-            layout.flex.center,
-            { flexBasis: 0 },
-        ], children: [children, problems.length > 0 && !dismiss && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+    (0, react_1.useImperativeHandle)(ref, () => ({
+        setDismiss,
+    }));
+    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [children, problems.length > 0 && !dismiss && ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
                     {
                         position: "absolute",
                         top: 0,
@@ -60,15 +62,14 @@ const ProblemsWrapper = ({ children, }) => {
                     },
                     layout.flex.center,
                     { justifyContent: "flex-start" },
-                    p[8],
+                    p[12],
                 ], children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
-                        bg.gray[900],
-                        borders.color.gray[700],
+                        bg.neutral[900],
+                        borders.color.neutral[700],
                         borders.width.thin,
                         r.lg,
-                        p[4],
+                        p[8],
                         { maxWidth: 700, width: "100%" },
                     ], children: (0, jsx_runtime_1.jsx)(Problems, { probs: problems, onIgnore: () => setDismiss(true) }) }) }))] }));
-};
-exports.ProblemsWrapper = ProblemsWrapper;
+});
 exports.default = Problems;

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

@@ -18,12 +18,16 @@ function Player(props) {
     const setIngest = (0, player_store_1.usePlayerStore)((x) => x.setIngestConnectionState);
     const clearControlsTimeout = (0, player_store_1.usePlayerStore)((x) => x.clearControlsTimeout);
     const setReportingURL = (0, player_store_1.usePlayerStore)((x) => x.setReportingURL);
+    const setEmbedded = (0, player_store_1.usePlayerStore)((x) => x.setEmbedded);
     const reportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.reportModalOpen);
     const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
     const reportSubject = (0, player_store_1.usePlayerStore)((x) => x.reportSubject);
     (0, react_1.useEffect)(() => {
         setReportingURL(props.reportingURL ?? null);
     }, [props.reportingURL]);
+    (0, react_1.useEffect)(() => {
+        setEmbedded(props.embedded ?? false);
+    }, [props.embedded]);
     // Will call back every few seconds to send health updates
     usePlayerStatus();
     (0, react_1.useEffect)(() => {

package/dist/components/mobile-player/ui/report-modal.js

@@ -47,6 +47,7 @@ const ReportModal = ({ open, onOpenChange, onSubmit, subject, title = "Report",
     const [additionalComments, setAdditionalComments] = (0, react_1.useState)("");
     const [isSubmitting, setIsSubmitting] = (0, react_1.useState)(false);
     const [submitError, setSubmitError] = (0, react_1.useState)(null);
+    const { theme } = (0, ui_1.useTheme)();
     const submitReport = (0, livestream_store_1.useSubmitReport)();
     const handleCancel = () => {
         setSelectedReason(null);
@@ -74,7 +75,7 @@ const ReportModal = ({ open, onOpenChange, onSubmit, subject, title = "Report",
             setIsSubmitting(false);
         }
     };
-    return ((0, jsx_runtime_1.jsxs)(ui_1.Dialog, { open: open, onOpenChange: onOpenChange, title: title, description: description, showCloseButton: true, variant: "default", size: "md", dismissible: false, position: "center", children: [(0, jsx_runtime_1.jsxs)(ui_1.ModalContent, { style: [__1.zero.pb[2]], children: [REPORT_REASONS.map((reason) => ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { onPress: () => setSelectedReason(reason.value), style: [
+    return ((0, jsx_runtime_1.jsxs)(ui_1.ResponsiveDialog, { open: open, onOpenChange: onOpenChange, title: title, description: description, showCloseButton: true, variant: "default", size: "md", dismissible: false, position: "center", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [__1.zero.pb[2]], children: [REPORT_REASONS.map((reason) => ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { onPress: () => setSelectedReason(reason.value), style: [
                             __1.zero.layout.flex.row,
                             __1.zero.gap.all[2],
                             __1.zero.py[3],
@@ -84,7 +85,7 @@ const ReportModal = ({ open, onOpenChange, onSubmit, subject, title = "Report",
                             selectedReason === reason.value && {
                                 backgroundColor: "rgba(0, 122, 255, 0.1)",
                             },
-                        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { children: selectedReason === reason.value ? (0, jsx_runtime_1.jsx)(lucide_react_native_1.CheckCircle, {}) : (0, jsx_runtime_1.jsx)(lucide_react_native_1.Circle, {}) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [__1.zero.layout.flex.column, __1.zero.gap.all[1], __1.zero.flex[1]], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { style: [{ fontWeight: "600" }], children: reason.label }), (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [{ fontSize: 14, color: "rgba(255,255,255,0.7)" }], children: reason.description })] })] }, reason.value))), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [__1.zero.pb[4], __1.zero.mt[4], __1.zero.px[2]], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { style: [__1.zero.mb[2]], children: "Additional Comments (optional)" }), (0, jsx_runtime_1.jsx)(ui_1.Textarea, { maxLength: 500, numberOfLines: 3, value: additionalComments, onChangeText: setAdditionalComments, placeholder: "Provide additional context for this report..." }), submitError && ((0, jsx_runtime_1.jsx)(ui_1.Text, { style: [__1.zero.mt[2], { color: "red", fontSize: 14 }], children: submitError }))] })] }), (0, jsx_runtime_1.jsxs)(ui_1.DialogFooter, { children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "secondary", onPress: handleCancel, disabled: isSubmitting, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "primary", onPress: handleSubmit, disabled: !selectedReason || isSubmitting, children: isSubmitting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Loader2, { style: [{ marginRight: 8 }] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Submitting..." })] })) : ((0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Submit" })) })] })] }));
+                        ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { children: selectedReason === reason.value ? ((0, jsx_runtime_1.jsx)(lucide_react_native_1.CheckCircle, { color: theme.colors.foreground })) : ((0, jsx_runtime_1.jsx)(lucide_react_native_1.Circle, { color: theme.colors.foreground })) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [__1.zero.layout.flex.column, __1.zero.gap.all[1], __1.zero.flex[1]], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { style: [{ fontWeight: "600" }], children: reason.label }), (0, jsx_runtime_1.jsx)(ui_1.Text, { style: [{ fontSize: 14, color: "rgba(255,255,255,0.7)" }], children: reason.description })] })] }, reason.value))), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [__1.zero.pb[4], __1.zero.mt[4], __1.zero.px[2]], children: [(0, jsx_runtime_1.jsx)(ui_1.Text, { style: [__1.zero.mb[2]], children: "Additional Comments (optional)" }), (0, jsx_runtime_1.jsx)(ui_1.Textarea, { maxLength: 500, numberOfLines: 3, value: additionalComments, onChangeText: setAdditionalComments, placeholder: "Provide additional context for this report..." }), submitError && ((0, jsx_runtime_1.jsx)(ui_1.Text, { style: [__1.zero.mt[2], { color: "red", fontSize: 14 }], children: submitError }))] })] }), (0, jsx_runtime_1.jsxs)(ui_1.DialogFooter, { children: [(0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "secondary", onPress: handleCancel, disabled: isSubmitting, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Cancel" }) }), (0, jsx_runtime_1.jsx)(ui_1.Button, { variant: "primary", onPress: handleSubmit, disabled: !selectedReason || isSubmitting, children: isSubmitting ? ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.Loader2, { style: [{ marginRight: 8 }] }), (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Submitting..." })] })) : ((0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Submit" })) })] })] }));
 };
 exports.ReportModal = ReportModal;
 exports.default = exports.ReportModal;

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

@@ -6,9 +6,11 @@ const jsx_runtime_1 = require("react/jsx-runtime");
 const dropdown_menu_1 = require("@rn-primitives/dropdown-menu");
 const lucide_react_native_1 = require("lucide-react-native");
 const react_native_1 = require("react-native");
+const __1 = require("../../..");
 const theme_1 = require("../../../lib/theme");
 const livestream_store_1 = require("../../../livestream-store");
 const player_store_1 = require("../../../player-store/");
+const graph_1 = require("../../../streamplace-store/graph");
 const ui_1 = require("../../ui");
 function ContextMenu({ dropdownPortalContainer, }) {
     const quality = (0, player_store_1.usePlayerStore)((x) => x.selectedRendition);
@@ -21,6 +23,10 @@ function ContextMenu({ dropdownPortalContainer, }) {
     const livestream = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
     const setReportModalOpen = (0, player_store_1.usePlayerStore)((x) => x.setReportModalOpen);
     const setReportSubject = (0, player_store_1.usePlayerStore)((x) => x.setReportSubject);
+    const { profile } = (0, __1.useLivestreamInfo)();
+    const avatars = (0, __1.useAvatars)(profile?.did ? [profile?.did] : []);
+    const ls = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
+    let graphManager = (0, graph_1.useGraphManager)(profile?.did);
     const lowLatency = protocol === "webrtc";
     const setLowLatency = (value) => {
         setProtocol(value ? player_store_1.PlayerProtocol.WEBRTC : player_store_1.PlayerProtocol.HLS);
@@ -33,7 +39,44 @@ 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.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 }) })] }) })] }));
+    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: [react_native_1.Platform.OS !== "web" && ((0, jsx_runtime_1.jsxs)(ui_1.DropdownMenuGroup, { title: "Streamer", children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                        __1.zero.layout.flex.row,
+                                        __1.zero.layout.flex.center,
+                                        __1.zero.gap.all[3],
+                                        { flex: 1, minWidth: 0 },
+                                    ], children: [profile?.did && avatars[profile?.did]?.avatar && ((0, jsx_runtime_1.jsx)(react_native_1.Image, { source: {
+                                                uri: avatars[profile?.did]?.avatar,
+                                            }, style: { width: 42, height: 42, borderRadius: 999 }, resizeMode: "cover" }, "avatar")), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: { flex: 1, minWidth: 0 }, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                                        __1.zero.layout.flex.row,
+                                                        __1.zero.layout.flex.alignCenter,
+                                                        __1.zero.gap.all[2],
+                                                    ], children: (0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => {
+                                                            if (profile?.handle) {
+                                                                const url = `https://bsky.app/profile/${profile.handle}`;
+                                                                react_native_1.Linking.openURL(url);
+                                                            }
+                                                        }, children: (0, jsx_runtime_1.jsxs)(ui_1.Text, { children: ["@", profile?.handle || "user"] }) }) }), (0, jsx_runtime_1.jsx)(ui_1.Text, { color: "muted", size: "sm", numberOfLines: 2, ellipsizeMode: "tail", children: ls?.record.title || "Stream Title" })] })] }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { disabled: graphManager.isLoading || !profile?.did, onPress: async () => {
+                                        try {
+                                            if (graphManager.isFollowing) {
+                                                await graphManager.unfollow();
+                                            }
+                                            else {
+                                                await graphManager.follow();
+                                            }
+                                        }
+                                        catch (err) {
+                                            console.error("Follow/unfollow error:", err);
+                                        }
+                                    }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { color: graphManager.isFollowing ? "destructive" : "default", children: graphManager.isLoading
+                                            ? "Loading..."
+                                            : graphManager.isFollowing
+                                                ? "Unfollow"
+                                                : "Follow" }) }), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
+                                        if (profile?.handle) {
+                                            const url = `https://bsky.app/profile/${profile.handle}`;
+                                            react_native_1.Linking.openURL(url);
+                                        }
+                                    }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "View Profile on Bluesky" }) })] })), (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/ui/button.js

@@ -85,7 +85,7 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                         { borderRadius: zero.borderRadius.md },
                     ],
                     inner: { gap: 4 },
-                    text: zt.text.sm,
+                    text: zero.typography.universal.sm,
                 };
             case "lg":
                 return {
@@ -94,8 +94,8 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                         zero.py[3],
                         { borderRadius: zero.borderRadius.md },
                     ],
-                    inner: { gap: 8 },
-                    text: zt.text.lg,
+                    inner: { gap: 12 },
+                    text: zero.typography.universal.lg,
                 };
             case "xl":
                 return {
@@ -105,17 +105,17 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                         { borderRadius: zero.borderRadius.lg },
                     ],
                     inner: { gap: 12 },
-                    text: zt.text.xl,
+                    text: zero.typography.universal.xl,
                 };
             case "pill":
                 return {
                     button: [
-                        zero.px[4],
-                        zero.py[2],
+                        zero.px[2],
+                        zero.py[1],
                         { borderRadius: zero.borderRadius.full },
                     ],
                     inner: { gap: 4 },
-                    text: zt.text.sm,
+                    text: zero.typography.universal.xs,
                 };
             case "md":
             default:
@@ -126,7 +126,7 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                         { borderRadius: zero.borderRadius.md },
                     ],
                     inner: { gap: 6 },
-                    text: zt.text.md,
+                    text: zero.typography.universal.sm,
                 };
         }
     }, [size, zt]);
@@ -170,6 +170,6 @@ exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", ch
                 return icons.color.default;
         }
     }, [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] }) }));
+    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", 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";

package/dist/components/ui/checkbox.js

@@ -0,0 +1,87 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Checkbox = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../lib/theme/theme");
+const text_1 = require("./text");
+exports.Checkbox = (0, react_1.forwardRef)(({ checked, onCheckedChange, disabled = false, size = "md", label, description, style, ...props }, ref) => {
+    const { theme } = (0, theme_1.useTheme)();
+    const handlePress = () => {
+        if (!disabled) {
+            onCheckedChange(!checked);
+        }
+    };
+    const styles = createStyles(theme, size, disabled, checked);
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { ref: ref, style: [styles.container, style], onPress: handlePress, disabled: disabled, ...props, children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.checkbox, children: checked && ((0, jsx_runtime_1.jsx)(lucide_react_native_1.Check, { size: size === "sm" ? 12 : size === "lg" ? 18 : 14, color: disabled
+                        ? theme.colors.textDisabled
+                        : theme.colors.primaryForeground })) }), (label || description) && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: styles.content, children: [label && (0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.label, children: label }), description && ((0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.description, children: description }))] }))] }));
+});
+exports.Checkbox.displayName = "Checkbox";
+function createStyles(theme, size, disabled, checked) {
+    const sizeStyles = {
+        sm: {
+            checkboxSize: 16,
+            borderRadius: 2,
+            padding: theme.spacing[1],
+            gap: theme.spacing[1],
+        },
+        md: {
+            checkboxSize: 20,
+            borderRadius: 4,
+            padding: theme.spacing[1],
+            gap: theme.spacing[2],
+        },
+        lg: {
+            checkboxSize: 24,
+            borderRadius: 6,
+            padding: theme.spacing[2],
+            gap: theme.spacing[3],
+        },
+    };
+    const currentSize = sizeStyles[size];
+    return react_native_1.StyleSheet.create({
+        container: {
+            flexDirection: "row",
+            alignItems: "flex-start",
+            opacity: disabled ? 0.5 : 1,
+        },
+        checkbox: {
+            width: currentSize.checkboxSize,
+            height: currentSize.checkboxSize,
+            borderWidth: 1.5,
+            borderColor: disabled
+                ? theme.colors.border
+                : checked
+                    ? theme.colors.primary
+                    : theme.colors.border,
+            borderRadius: currentSize.borderRadius,
+            backgroundColor: disabled
+                ? theme.colors.muted
+                : checked
+                    ? theme.colors.primary
+                    : "transparent",
+            alignItems: "center",
+            justifyContent: "center",
+        },
+        content: {
+            flex: 1,
+            paddingTop: currentSize.padding * 0.5,
+            paddingLeft: theme.spacing[2],
+        },
+        label: {
+            fontSize: size === "sm" ? 14 : size === "lg" ? 18 : 16,
+            fontWeight: "500",
+            color: disabled ? theme.colors.textDisabled : theme.colors.text,
+            lineHeight: size === "sm" ? 18 : size === "lg" ? 22 : 20,
+        },
+        description: {
+            fontSize: size === "sm" ? 12 : size === "lg" ? 16 : 14,
+            color: disabled ? theme.colors.textDisabled : theme.colors.textMuted,
+            marginTop: theme.spacing[1],
+            lineHeight: size === "sm" ? 16 : size === "lg" ? 20 : 18,
+        },
+    });
+}