@streamplace/components 0.8.5 → 0.8.8

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);
@@ -24,8 +25,13 @@ function ContextMenu({ dropdownPortalContainer, }) {
     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)();
+    console.log("profile", profile);
     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 +40,12 @@ 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;
+    const Portal = isMobile ? react_native_1.View : ui_2.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: [
+        ? ui_2.ResponsiveDropdownMenuContent
+        : ui_2.DropdownMenuContentWithoutPortal;
+    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 +61,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 +73,20 @@ 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, { 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 }) })))] }) }), (0, jsx_runtime_1.jsx)(ui_2.DropdownMenuGroup, { title: "Advanced", 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, { 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 +96,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,
-        },
     });
 }

package/dist/components/ui/dropdown.js

@@ -9,6 +9,7 @@ const DropdownMenuPrimitive = tslib_1.__importStar(require("@rn-primitives/dropd
 const lucide_react_native_1 = require("lucide-react-native");
 const react_1 = require("react");
 const react_native_1 = require("react-native");
+const __1 = require("../..");
 const atoms_1 = require("../../lib/theme/atoms");
 const ui_1 = require("../../ui");
 const text_1 = require("./primitives/text");
@@ -18,15 +19,12 @@ exports.DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 exports.DropdownMenuPortal = DropdownMenuPrimitive.Portal;
 exports.DropdownMenuSub = DropdownMenuPrimitive.Sub;
 exports.DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
-exports.DropdownMenuBottomSheet = (0, react_1.forwardRef)(function DropdownMenuBottomSheet({ overlayStyle, portalHost, children }, _ref) {
+exports.DropdownMenuBottomSheet = (0, react_1.forwardRef)(function DropdownMenuBottomSheet({ overlayStyle, portalHost, children, ...rest }, _ref) {
     // Use the primitives' context to know if open
     const { open, onOpenChange } = DropdownMenuPrimitive.useRootContext();
     const { zero: zt } = (0, ui_1.useTheme)();
-    const snapPoints = (0, react_1.useMemo)(() => ["25%", "50%", "80%"], []);
     const sheetRef = (0, react_1.useRef)(null);
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.default, { ref: sheetRef, 
-            // why the heck is this 1-indexed
-            index: open ? 3 : -1, snapPoints: snapPoints, enablePanDownToClose: true, enableDynamicSizing: true, enableContentPanningGesture: false, backdropComponent: ({ style }) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [style, react_native_1.StyleSheet.absoluteFill], onPress: () => onOpenChange?.(false) })), onClose: () => onOpenChange?.(false), style: [overlayStyle], backgroundStyle: [zt.bg.popover, atoms_1.a.radius.all.md, atoms_1.a.shadows.md, atoms_1.p[1]], handleIndicatorStyle: [
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.default, { ref: sheetRef, enablePanDownToClose: true, enableDynamicSizing: true, enableContentPanningGesture: false, backdropComponent: ({ style }) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [style, react_native_1.StyleSheet.absoluteFill], onPress: () => onOpenChange?.(false) })), onClose: () => onOpenChange?.(false), style: [overlayStyle, react_native_1.StyleSheet.flatten(rest.style)], backgroundStyle: [zt.bg.popover, atoms_1.a.radius.all.md, atoms_1.a.shadows.md, atoms_1.p[1]], handleIndicatorStyle: [
                 atoms_1.a.sizes.width[12],
                 atoms_1.a.sizes.height[1],
                 zt.bg.mutedForeground,
@@ -65,7 +63,7 @@ exports.DropdownMenuSubContent = (0, react_1.forwardRef)((props, ref) => {
             atoms_1.a.shadows.md,
         ], ...props }));
 });
-exports.DropdownMenuContent = (0, react_1.forwardRef)(({ overlayStyle, portalHost, ...props }, ref) => {
+exports.DropdownMenuContent = (0, react_1.forwardRef)(({ overlayStyle, portalHost, style, children, ...props }, ref) => {
     const { zero: zt } = (0, ui_1.useTheme)();
     return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Overlay, { style: [
                 react_native_1.Platform.OS !== "web" ? react_native_1.StyleSheet.absoluteFill : undefined,
@@ -81,10 +79,15 @@ exports.DropdownMenuContent = (0, react_1.forwardRef)(({ overlayStyle, portalHos
                     zt.bg.popover,
                     atoms_1.p[2],
                     atoms_1.a.shadows.md,
-                ], ...props }) }) }));
+                    style,
+                ], ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { showsVerticalScrollIndicator: true, children: typeof children === "function"
+                        ? children({ pressed: false })
+                        : children }) }) }) }));
 });
-exports.DropdownMenuContentWithoutPortal = (0, react_1.forwardRef)(({ overlayStyle, ...props }, ref) => {
+exports.DropdownMenuContentWithoutPortal = (0, react_1.forwardRef)(({ overlayStyle, maxHeightPercentage = 0.8, children, style, ...props }, ref) => {
     const { theme } = (0, ui_1.useTheme)();
+    const { height } = (0, react_native_1.useWindowDimensions)();
+    const maxHeight = height * maxHeightPercentage;
     return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Overlay, { style: [
             react_native_1.Platform.OS !== "web" ? react_native_1.StyleSheet.absoluteFill : undefined,
             overlayStyle,
@@ -92,14 +95,16 @@ exports.DropdownMenuContentWithoutPortal = (0, react_1.forwardRef)(({ overlaySty
                 { zIndex: 999999 },
                 atoms_1.a.sizes.minWidth[32],
                 atoms_1.a.sizes.maxWidth[64],
-                atoms_1.a.overflow.hidden,
                 atoms_1.a.radius.all.md,
                 atoms_1.a.borders.width.thin,
                 { borderColor: theme.colors.border },
                 { backgroundColor: theme.colors.popover },
                 atoms_1.p[2],
                 atoms_1.a.shadows.md,
-            ], ...props }) }));
+                style,
+            ], ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: { maxHeight }, showsVerticalScrollIndicator: true, children: typeof children === "function"
+                    ? children({ pressed: false })
+                    : children }) }) }));
 });
 /// Responsive Dropdown Menu Content. On mobile this will render a *bottom sheet* that is **portaled to the root of the app**.
 /// Prefer passing scoped content in as **otherwise it may crash the app**.
@@ -108,7 +113,7 @@ exports.ResponsiveDropdownMenuContent = (0, react_1.forwardRef)(({ children, ...
     // On web, you might want to always use the normal dropdown
     const isBottomSheet = react_native_1.Platform.OS !== "web" && width < 800;
     if (isBottomSheet) {
-        return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuBottomSheet, { ref: ref, ...props, children: children }));
+        return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuBottomSheet, { ref: ref, ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.ScrollView, { style: [__1.zero.pb[12]], children: children }) }));
     }
     return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuContent, { ref: ref, ...props, children: children }));
 });

package/dist/components/ui/index.js

@@ -9,6 +9,7 @@ tslib_1.__exportStar(require("./primitives/modal"), exports);
 tslib_1.__exportStar(require("./primitives/text"), exports);
 // Export styled components
 tslib_1.__exportStar(require("./button"), exports);
+tslib_1.__exportStar(require("./checkbox"), exports);
 tslib_1.__exportStar(require("./dialog"), exports);
 tslib_1.__exportStar(require("./dropdown"), exports);
 tslib_1.__exportStar(require("./icons"), exports);
@@ -21,6 +22,7 @@ tslib_1.__exportStar(require("./slider"), exports);
 tslib_1.__exportStar(require("./text"), exports);
 tslib_1.__exportStar(require("./textarea"), exports);
 tslib_1.__exportStar(require("./toast"), exports);
+tslib_1.__exportStar(require("./tooltip"), exports);
 tslib_1.__exportStar(require("./view"), exports);
 // Component collections for easy importing
 var button_1 = require("./primitives/button");

package/dist/components/ui/primitives/text.js

@@ -137,6 +137,18 @@ exports.TextRoot = (0, react_1.forwardRef)(({ variant, size, weight, color, alig
     const variantStyles = getVariantStyles();
     // Calculate inherited values
     const inheritedContext = inherit && !reset && parentContext ? parentContext : {};
+    // Calculate fontSize first for line height calculation
+    let calculatedFontSize = inheritedContext.fontSize;
+    // Apply variant font size
+    if (variant && variantStyles[variant]?.fontSize) {
+        calculatedFontSize = variantStyles[variant].fontSize;
+    }
+    // Apply size-based font size
+    if (size) {
+        calculatedFontSize = typeof size === "number" ? size : sizeMap[size];
+    }
+    // Use default if still undefined
+    calculatedFontSize = calculatedFontSize || 16;
     // Calculate final styles
     const finalStyles = {
         // Start with inherited values
@@ -194,7 +206,9 @@ exports.TextRoot = (0, react_1.forwardRef)(({ variant, size, weight, color, alig
         }),
         // Apply line height
         ...(leading && {
-            lineHeight: typeof leading === "number" ? leading : leadingMap[leading],
+            lineHeight: typeof leading === "number"
+                ? leading
+                : leadingMap[leading] * calculatedFontSize,
         }),
         // Apply letter spacing
         ...(tracking && {
@@ -231,7 +245,7 @@ exports.TextRoot = (0, react_1.forwardRef)(({ variant, size, weight, color, alig
             if (typeof fontSize === "number" && !styleObj.lineHeight && !leading) {
                 return {
                     ...styleObj,
-                    lineHeight: fontSize * 1.2,
+                    lineHeight: fontSize,
                 };
             }
         }
@@ -285,7 +299,7 @@ function createTextStyle(props) {
         if (props.leading === undefined) {
             style.lineHeight =
                 typeof props.size === "number"
-                    ? props.size * 1.2 // Auto line height for numeric sizes
+                    ? props.size
                     : sizeLineHeightMap[props.size];
         }
     }
@@ -296,10 +310,11 @@ function createTextStyle(props) {
         style.textAlign = props.align;
     }
     if (props.leading) {
+        const fontSize = style.fontSize || 16; // default font size
         style.lineHeight =
             typeof props.leading === "number"
                 ? props.leading
-                : leadingMap[props.leading];
+                : leadingMap[props.leading] * fontSize;
     }
     if (props.tracking) {
         style.letterSpacing =