@streamplace/components 0.8.6 → 0.8.9

package/dist/components/content-metadata/content-metadata-form.js

@@ -242,27 +242,13 @@ exports.ContentMetadataForm = (0, react_1.forwardRef)(({ showUpdateButton = fals
                                     layout.flex.row,
                                     layout.flex.alignCenter,
                                     w.percent[100],
-                                ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
-                                            text.neutral[300],
-                                            {
-                                                minWidth: 100,
-                                                textAlign: "left",
-                                                paddingBottom: 8,
-                                                fontSize: 14,
-                                            },
-                                        ], children: "Content Warnings" }), (0, jsx_runtime_1.jsx)(text_1.Text, { style: [text.gray[500], { fontSize: 12, paddingBottom: 8 }], children: "optional" })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [gap.all[2], w.percent[100]], children: metadata_constants_1.CONTENT_WARNINGS.map((warning) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [w.percent[100]], children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { content: warning.description, position: "top", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: contentWarnings.includes(warning.value), onCheckedChange: (checked) => handleContentWarningChange(warning.value, checked), label: warning.label, style: [{ fontSize: 12 }] }) }) }, warning.value))) })] })), activeSection === "contentRights" && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3], w.percent[100]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                    gap.all[2],
+                                ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { children: "Content Warnings" }), (0, jsx_runtime_1.jsx)(text_1.Text, { muted: true, children: "(optional)" })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [gap.all[2], w.percent[100]], children: metadata_constants_1.CONTENT_WARNINGS.map((warning) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [w.percent[100]], children: (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { content: warning.description, position: "top", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: contentWarnings.includes(warning.value), onCheckedChange: (checked) => handleContentWarningChange(warning.value, checked), label: warning.label, style: [{ fontSize: 12 }] }) }) }, warning.value))) })] })), activeSection === "contentRights" && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3], w.percent[100]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                                     layout.flex.row,
                                     layout.flex.alignCenter,
                                     w.percent[100],
-                                ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
-                                            text.neutral[300],
-                                            {
-                                                minWidth: 100,
-                                                textAlign: "left",
-                                                paddingBottom: 8,
-                                                fontSize: 14,
-                                            },
-                                        ], children: "Content Rights" }), (0, jsx_runtime_1.jsx)(text_1.Text, { style: [text.gray[500], { fontSize: 12, paddingBottom: 8 }], children: "optional" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3], w.percent[100]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                    gap.all[2],
+                                ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { children: "Content Rights" }), (0, jsx_runtime_1.jsx)(text_1.Text, { muted: true, children: "(optional)" })] }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[3], w.percent[100]], children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
                                             layout.flex.row,
                                             layout.flex.alignCenter,
                                             w.percent[100],
@@ -378,10 +364,8 @@ exports.ContentMetadataForm = (0, react_1.forwardRef)(({ showUpdateButton = fals
                                     layout.flex.row,
                                     layout.flex.alignCenter,
                                     w.percent[100],
-                                ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
-                                            text.neutral[300],
-                                            { minWidth: 100, textAlign: "left", paddingBottom: 8 },
-                                        ], children: "Distribution" }), (0, jsx_runtime_1.jsx)(text_1.Text, { style: [text.gray[500], { fontSize: 12, paddingBottom: 8 }], children: "optional" })] }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { content: "Distribution of your content is unlimited, but they still have to respect the deleteAfter policy below.", position: "top", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: distributionPolicy.allowedBroadcasters?.includes("*") ||
+                                    gap.all[2],
+                                ], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { children: "Distribution" }), (0, jsx_runtime_1.jsx)(text_1.Text, { muted: true, children: "(optional)" })] }), (0, jsx_runtime_1.jsx)(tooltip_1.Tooltip, { content: "Distribution of your content is unlimited, but they still have to respect the deleteAfter policy below.", position: "top", children: (0, jsx_runtime_1.jsx)(checkbox_1.Checkbox, { checked: distributionPolicy.allowedBroadcasters?.includes("*") ||
                                         false, onCheckedChange: (checked) => handleDistributionPolicyChange({
                                         allowedBroadcasters: checked
                                             ? "*"

package/dist/components/content-metadata/content-rights.js

@@ -4,15 +4,15 @@ exports.ContentRights = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
+const __1 = require("../..");
 const metadata_constants_1 = require("../../lib/metadata-constants");
-const theme_1 = require("../../lib/theme/theme");
 const text_1 = require("../ui/text");
-exports.ContentRights = (0, react_1.forwardRef)(({ contentRights }, ref) => {
-    const { theme } = (0, theme_1.useTheme)();
+const { layout, gap, mt, text: textStyles } = __1.zero;
+exports.ContentRights = (0, react_1.forwardRef)(({ contentRights, compact, ...rest }, ref) => {
+    const { zero } = (0, __1.useTheme)();
     if (!contentRights || Object.keys(contentRights).length === 0) {
         return null;
     }
-    const styles = createStyles(theme);
     const formatLicense = (license) => {
         return metadata_constants_1.LICENSE_URL_LABELS[license] || license;
     };
@@ -23,7 +23,10 @@ exports.ContentRights = (0, react_1.forwardRef)(({ contentRights }, ref) => {
     //   elements.push(`Creator: ${contentRights.creator}`);
     // }
     if (contentRights.copyrightYear) {
-        elements.push(`© ${contentRights.copyrightYear.toString()}`);
+        elements.push(`© ${contentRights.copyrightYear.toString()}${contentRights.creditLine ? " " + contentRights.creditLine : ""}`);
+    }
+    else if (contentRights.creditLine) {
+        elements.push(contentRights.creditLine);
     }
     if (contentRights.license) {
         elements.push(formatLicense(contentRights.license));
@@ -31,48 +34,16 @@ exports.ContentRights = (0, react_1.forwardRef)(({ contentRights }, ref) => {
     if (contentRights.copyrightNotice) {
         elements.push(contentRights.copyrightNotice);
     }
-    if (contentRights.creditLine) {
-        elements.push(contentRights.creditLine);
+    if (elements.length > 0) {
+        elements[0] = "Stream content is " + elements[0];
+    }
+    if (elements.length == 0) {
+        return null;
     }
-    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: styles.compactContainer, children: (0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.compactText, children: elements.join(" • ") }) }));
+    return ((0, jsx_runtime_1.jsx)(text_1.Text, { ref: ref, style: [
+            zero.text.mutedForeground,
+            mt[1],
+            react_native_1.StyleSheet.flatten(rest.style),
+        ], ...rest, children: elements.join(" • ") }));
 });
 exports.ContentRights.displayName = "ContentRights";
-function createStyles(theme) {
-    return react_native_1.StyleSheet.create({
-        container: {
-            paddingVertical: theme.spacing[3],
-        },
-        title: {
-            fontSize: 14,
-            fontWeight: "600",
-            color: theme.colors.text,
-            marginBottom: theme.spacing[2],
-        },
-        content: {
-            gap: theme.spacing[2],
-        },
-        row: {
-            flexDirection: "row",
-            gap: theme.spacing[2],
-        },
-        label: {
-            fontSize: 13,
-            color: theme.colors.textMuted,
-        },
-        value: {
-            fontSize: 13,
-            color: theme.colors.text,
-        },
-        compactContainer: {
-            flexDirection: "row",
-            gap: theme.spacing[2],
-            flexWrap: "wrap",
-            marginTop: theme.spacing[1],
-        },
-        compactText: {
-            fontSize: 14,
-            fontWeight: "500",
-            color: theme.colors.text,
-        },
-    });
-}

package/dist/components/content-metadata/content-warning-badge.js

@@ -0,0 +1,42 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ContentWarningBadge = ContentWarningBadge;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_native_1 = require("react-native");
+const __1 = require("../..");
+const metadata_constants_1 = require("../../lib/metadata-constants");
+const theme_1 = require("../../lib/theme/theme");
+const ui_1 = require("../../ui");
+const dropdown_1 = require("../ui/dropdown");
+const text_1 = require("../ui/text");
+const { px, py, gap, layout } = __1.zero;
+function ContentWarningBadge({ warnings }) {
+    const { theme } = (0, theme_1.useTheme)();
+    const getWarningLabel = (warning) => {
+        return metadata_constants_1.C2PA_WARNING_LABELS[warning] || warning;
+    };
+    if (!warnings || warnings.length === 0) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsxs)(dropdown_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.DropdownMenuTrigger, { children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                        layout.flex.row,
+                        layout.flex.align.center,
+                        gap.all[2],
+                        px[3],
+                        py[2],
+                        ui_1.r.md,
+                        { backgroundColor: theme.colors.warning + "20" },
+                    ], children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.AlertTriangle, { size: 14, color: theme.colors.warningForeground }), (0, jsx_runtime_1.jsx)(text_1.Text, { size: "sm", weight: "semibold", style: { color: theme.colors.warningForeground }, children: "Intended for certain audiences" }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronDown, { size: 14, color: theme.colors.warningForeground })] }) }), (0, jsx_runtime_1.jsxs)(dropdown_1.ResponsiveDropdownMenuContent, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [layout.flex.column, px[2], ui_1.pt[2]], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { children: "Heads up!" }), (0, jsx_runtime_1.jsx)(text_1.Text, { children: "This stream may contain:" })] }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                            layout.flex.row,
+                            { flexWrap: "wrap" },
+                            gap.all[2],
+                            px[2],
+                            py[2],
+                        ], children: warnings.map((warning, index) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                                { backgroundColor: theme.colors.warning },
+                                px[3],
+                                py[1],
+                                ui_1.r.full,
+                            ], children: (0, jsx_runtime_1.jsx)(text_1.Text, { size: "sm", weight: "semibold", style: { color: theme.colors.warningForeground }, children: getWarningLabel(warning) }) }, index))) })] })] }));
+}

package/dist/components/content-metadata/content-warnings.js

@@ -4,65 +4,32 @@ exports.ContentWarnings = void 0;
 const jsx_runtime_1 = require("react/jsx-runtime");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
+const __1 = require("../..");
 const metadata_constants_1 = require("../../lib/metadata-constants");
 const theme_1 = require("../../lib/theme/theme");
 const text_1 = require("../ui/text");
-exports.ContentWarnings = (0, react_1.forwardRef)(({ warnings, compact = false }, ref) => {
+const { layout, gap, bg, r, p, px, py, text: textStyles, borders } = __1.zero;
+exports.ContentWarnings = (0, react_1.forwardRef)(({ warnings, compact = false, ...rest }, ref) => {
     const { theme } = (0, theme_1.useTheme)();
     if (!warnings || warnings.length === 0) {
         return null;
     }
-    const styles = createStyles(theme, compact);
     const getWarningLabel = (warning) => {
         return metadata_constants_1.C2PA_WARNING_LABELS[warning] || warning;
     };
     if (compact) {
-        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: styles.compactContainer, children: warnings.map((warning, index) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.compactWarning, children: (0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.compactWarningText, children: getWarningLabel(warning) }) }, index))) }));
+        return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [layout.flex.row, layout.flex.wrap.wrap, gap.all[1]], ...rest, children: warnings.map((warning, index) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                    { backgroundColor: theme.colors.warning },
+                    r.full,
+                    px[2],
+                    { paddingVertical: 2 },
+                ], children: (0, jsx_runtime_1.jsx)(text_1.Text, { size: "sm", style: [{ color: theme.colors.warningForeground }], children: getWarningLabel(warning) }) }, index))) }));
     }
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: ref, style: styles.container, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.title, children: "Content Warnings" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.warningsContainer, children: warnings.map((warning, index) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.warning, children: (0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.warningText, children: getWarningLabel(warning) }) }, index))) })] }));
+    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { ref: ref, style: [layout.flex.column, gap.all[2]], ...rest, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [{ fontSize: 14, fontWeight: "600" }, textStyles.gray[900]], children: "Content Warnings" }), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [layout.flex.row, layout.flex.wrap.wrap, gap.all[2]], children: warnings.map((warning, index) => ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                        { backgroundColor: theme.colors.warning },
+                        r.full,
+                        px[3],
+                        py[1],
+                    ], children: (0, jsx_runtime_1.jsx)(text_1.Text, { size: "sm", style: [{ color: theme.colors.warningForeground }], children: getWarningLabel(warning) }) }, index))) })] }));
 });
 exports.ContentWarnings.displayName = "ContentWarnings";
-function createStyles(theme, compact) {
-    return react_native_1.StyleSheet.create({
-        container: {
-            flexDirection: "column",
-            gap: theme.spacing[2],
-        },
-        title: {
-            fontSize: 14,
-            fontWeight: "600",
-            color: theme.colors.text,
-        },
-        warningsContainer: {
-            flexDirection: "row",
-            flexWrap: "wrap",
-            gap: theme.spacing[2],
-        },
-        warning: {
-            backgroundColor: theme.colors.warning,
-            borderRadius: theme.borderRadius.md,
-            padding: theme.spacing[2],
-        },
-        warningText: {
-            color: theme.colors.warningForeground,
-            fontSize: 12,
-            fontWeight: "500",
-        },
-        compactContainer: {
-            flexDirection: "row",
-            flexWrap: "wrap",
-            gap: theme.spacing[1],
-        },
-        compactWarning: {
-            backgroundColor: theme.colors.warning,
-            borderRadius: theme.borderRadius.full,
-            paddingHorizontal: 10,
-            paddingVertical: 4,
-        },
-        compactWarningText: {
-            color: theme.colors.warningForeground,
-            fontSize: 14,
-            fontWeight: "600",
-        },
-    });
-}

package/dist/components/content-metadata/index.js

@@ -1,11 +1,13 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.ContentWarnings = exports.ContentRights = exports.ContentMetadataForm = void 0;
+exports.ContentWarnings = exports.ContentWarningBadge = exports.ContentRights = exports.ContentMetadataForm = void 0;
 // Main form component
 var content_metadata_form_1 = require("./content-metadata-form");
 Object.defineProperty(exports, "ContentMetadataForm", { enumerable: true, get: function () { return content_metadata_form_1.ContentMetadataForm; } });
 // Display components
 var content_rights_1 = require("./content-rights");
 Object.defineProperty(exports, "ContentRights", { enumerable: true, get: function () { return content_rights_1.ContentRights; } });
+var content_warning_badge_1 = require("./content-warning-badge");
+Object.defineProperty(exports, "ContentWarningBadge", { enumerable: true, get: function () { return content_warning_badge_1.ContentWarningBadge; } });
 var content_warnings_1 = require("./content-warnings");
 Object.defineProperty(exports, "ContentWarnings", { enumerable: true, get: function () { return content_warnings_1.ContentWarnings; } });

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

@@ -11,7 +11,8 @@ 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");
+const ui_1 = require("../../../ui");
+const ui_2 = require("../../ui");
 function ContextMenu({ dropdownPortalContainer, }) {
     const quality = (0, player_store_1.usePlayerStore)((x) => x.selectedRendition);
     const setQuality = (0, player_store_1.usePlayerStore)((x) => x.setSelectedRendition);
@@ -26,6 +27,10 @@ function ContextMenu({ dropdownPortalContainer, }) {
     const { profile } = (0, __1.useLivestreamInfo)();
     const avatars = (0, __1.useAvatars)(profile?.did ? [profile?.did] : []);
     const ls = (0, livestream_store_1.useLivestreamStore)((x) => x.livestream);
+    const segment = (0, livestream_store_1.useLivestreamStore)((x) => x.segment);
+    // Get content rights from the latest segment
+    const contentRights = segment?.contentRights;
+    const contentWarnings = segment?.contentWarnings?.warnings || [];
     let graphManager = (0, graph_1.useGraphManager)(profile?.did);
     const lowLatency = protocol === "webrtc";
     const setLowLatency = (value) => {
@@ -34,12 +39,9 @@ function ContextMenu({ dropdownPortalContainer, }) {
     // are we on mobile? then do dropdowns
     const isMobile = react_native_1.Platform.OS === "ios" || react_native_1.Platform.OS === "android";
     // dummy portal for mobile
-    const Portal = isMobile ? react_native_1.View : ui_1.DropdownMenuPortal;
-    // render the responsive version on mobile as we can't fullscreen there
-    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: [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: [
+    const Portal = isMobile ? react_native_1.View : ui_2.DropdownMenuPortal;
+    const DropdownMenuContent = ui_2.ResponsiveDropdownMenuContent;
+    return ((0, jsx_runtime_1.jsxs)(ui_2.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(ui_2.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_2.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],
@@ -55,7 +57,7 @@ function ContextMenu({ dropdownPortalContainer, }) {
                                                                 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 () => {
+                                                        }, children: (0, jsx_runtime_1.jsxs)(ui_2.Text, { children: ["@", profile?.handle || "user"] }) }) }), (0, jsx_runtime_1.jsx)(ui_2.Text, { color: "muted", size: "sm", numberOfLines: 2, ellipsizeMode: "tail", children: ls?.record.title || "Stream Title" })] })] }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuItem, { disabled: graphManager.isLoading || !profile?.did, onPress: async () => {
                                         try {
                                             if (graphManager.isFollowing) {
                                                 await graphManager.unfollow();
@@ -67,20 +69,25 @@ function ContextMenu({ dropdownPortalContainer, }) {
                                         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
+                                    }, children: (0, jsx_runtime_1.jsx)(ui_2.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: () => {
+                                                : "Follow" }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuSeparator, {}), (0, jsx_runtime_1.jsx)(ui_2.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 }) })] }) })] }));
+                                    }, children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "View Profile on Bluesky" }) })] })), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsxs)(ui_2.DropdownMenuSub, { children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenuSubTrigger, { subMenuTitle: "Quality", children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                                                __1.zero.flex.values[1],
+                                                __1.zero.layout.flex.row,
+                                                __1.zero.layout.flex.spaceBetween,
+                                                __1.zero.pr[4],
+                                            ], children: [(0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Quality" }), (0, jsx_runtime_1.jsxs)(ui_2.Text, { muted: true, children: ["(", quality, ", ", lowLatency ? "low latency" : "regular latency", ")"] })] }) }), (0, jsx_runtime_1.jsxs)(ui_2.DropdownMenuSubContent, { children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { title: "Resolution", children: (0, jsx_runtime_1.jsxs)(ui_2.DropdownMenuRadioGroup, { value: quality, onValueChange: setQuality, children: [(0, jsx_runtime_1.jsx)(ui_2.DropdownMenuRadioItem, { value: "source", children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Source (Original Quality)" }) }), qualities.map((r) => ((0, jsx_runtime_1.jsx)(ui_2.DropdownMenuRadioItem, { value: r.name, children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: r.name }) }, r.name)))] }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { children: (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuCheckboxItem, { checked: lowLatency, onCheckedChange: () => setLowLatency(!lowLatency), children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Low Latency" }) }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuInfo, { description: "Reduces the delay between video and chat for a more real-time experience." })] })] }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { title: "Advanced", children: (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuCheckboxItem, { checked: debugInfo, onCheckedChange: () => setShowDebugInfo(!debugInfo), children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Show Debug Info" }) }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { title: "Report", children: (0, jsx_runtime_1.jsx)(ReportButton, { livestream: livestream, setReportModalOpen: setReportModalOpen, setReportSubject: setReportSubject }) }), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.pt[3], ui_1.px[2], ui_1.gap.all[2]], children: [contentWarnings && contentWarnings.length > 0 && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [ui_1.gap.all[1]], children: [(0, jsx_runtime_1.jsx)(ui_2.Text, { size: "base", color: "muted", children: "Stream may contain" }), (0, jsx_runtime_1.jsx)(__1.ContentWarnings, { warnings: contentWarnings, compact: true })] })), contentRights && Object.keys(contentRights).length > 0 && ((0, jsx_runtime_1.jsx)(__1.ContentRights, { contentRights: contentRights, size: "xs", color: "muted" }))] })] }) })] }));
 }
 function ReportButton({ livestream, setReportModalOpen, setReportSubject, }) {
     const { onOpenChange } = (0, dropdown_menu_1.useRootContext)();
-    return ((0, jsx_runtime_1.jsx)(ui_1.DropdownMenuItem, { onPress: () => {
+    return ((0, jsx_runtime_1.jsx)(ui_2.DropdownMenuItem, { onPress: () => {
             if (!livestream)
                 return;
             onOpenChange?.(false);
@@ -90,5 +97,5 @@ function ReportButton({ livestream, setReportModalOpen, setReportSubject, }) {
                 uri: livestream.uri,
                 cid: livestream.cid,
             });
-        }, children: (0, jsx_runtime_1.jsx)(ui_1.Text, { children: "Report Livestream..." }) }));
+        }, children: (0, jsx_runtime_1.jsx)(ui_2.Text, { children: "Report Livestream..." }) }));
 }

package/dist/components/ui/checkbox.js

@@ -17,7 +17,7 @@ exports.Checkbox = (0, react_1.forwardRef)(({ checked, onCheckedChange, disabled
     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 }))] }))] }));
+                        : 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, { size: size === "sm" ? "sm" : size === "lg" ? "lg" : "base", color: disabled ? "muted" : "default", leading: "snug", children: label })), description && ((0, jsx_runtime_1.jsx)(text_1.Text, { size: size === "sm" ? "xs" : size === "lg" ? "base" : "sm", color: disabled ? "muted" : "muted", style: { marginTop: theme.spacing[1] }, children: description }))] }))] }));
 });
 exports.Checkbox.displayName = "Checkbox";
 function createStyles(theme, size, disabled, checked) {
@@ -32,13 +32,13 @@ function createStyles(theme, size, disabled, checked) {
             checkboxSize: 20,
             borderRadius: 4,
             padding: theme.spacing[1],
-            gap: theme.spacing[2],
+            gap: theme.spacing[1],
         },
         lg: {
             checkboxSize: 24,
             borderRadius: 6,
-            padding: theme.spacing[2],
-            gap: theme.spacing[3],
+            padding: theme.spacing[1],
+            gap: theme.spacing[2],
         },
     };
     const currentSize = sizeStyles[size];
@@ -56,7 +56,7 @@ function createStyles(theme, size, disabled, checked) {
                 ? theme.colors.border
                 : checked
                     ? theme.colors.primary
-                    : theme.colors.border,
+                    : theme.colors.textMuted,
             borderRadius: currentSize.borderRadius,
             backgroundColor: disabled
                 ? theme.colors.muted
@@ -68,20 +68,8 @@ function createStyles(theme, size, disabled, checked) {
         },
         content: {
             flex: 1,
-            paddingTop: currentSize.padding * 0.5,
+            paddingTop: currentSize.padding * 0.25,
             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,
-        },
     });
 }