@streamplace/components 0.8.6 → 0.8.9

package/dist/components/ui/dropdown.js

@@ -1,42 +1,218 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.DropdownMenuInfo = exports.DropdownMenuGroup = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.ResponsiveDropdownMenuContent = exports.DropdownMenuContentWithoutPortal = exports.DropdownMenuContent = exports.DropdownMenuSubContent = exports.DropdownMenuSubTrigger = exports.DropdownMenuBottomSheet = exports.DropdownMenuRadioGroup = exports.DropdownMenuSub = exports.DropdownMenuPortal = exports.DropdownMenuTrigger = exports.DropdownMenu = void 0;
+exports.DropdownMenuInfo = exports.DropdownMenuGroup = exports.DropdownMenuSeparator = exports.DropdownMenuLabel = exports.DropdownMenuRadioItem = exports.DropdownMenuCheckboxItem = exports.DropdownMenuItem = exports.ResponsiveDropdownMenuContent = exports.DropdownMenuContentWithoutPortal = exports.DropdownMenuContent = exports.DropdownMenuSubContent = exports.DropdownMenuSubTrigger = exports.DropdownMenuBottomSheet = exports.DropdownMenuSub = exports.DropdownMenuRadioGroup = exports.DropdownMenuPortal = exports.DropdownMenuTrigger = exports.DropdownMenu = void 0;
 exports.DropdownMenuShortcut = DropdownMenuShortcut;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
 const bottom_sheet_1 = tslib_1.__importStar(require("@gorhom/bottom-sheet"));
 const DropdownMenuPrimitive = tslib_1.__importStar(require("@rn-primitives/dropdown-menu"));
 const lucide_react_native_1 = require("lucide-react-native");
-const react_1 = require("react");
+const react_1 = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
+const react_native_reanimated_1 = tslib_1.__importStar(require("react-native-reanimated"));
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 const atoms_1 = require("../../lib/theme/atoms");
 const ui_1 = require("../../ui");
 const text_1 = require("./primitives/text");
 const text_2 = require("./text");
+const NavigationStackContext = (0, react_1.createContext)(null);
+const useNavigationStack = () => {
+    const context = (0, react_1.useContext)(NavigationStackContext);
+    return context;
+};
+const SubMenuContext = (0, react_1.createContext)(null);
 exports.DropdownMenu = DropdownMenuPrimitive.Root;
 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) {
+// Custom DropdownMenuSub that works with mobile navigation
+exports.DropdownMenuSub = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
+    const navStack = useNavigationStack();
+    const [subMenuTitle, setSubMenuTitle] = (0, react_1.useState)();
+    const renderContentRef = (0, react_1.useRef)(null);
+    const [subMenuKey, setSubMenuKey] = (0, react_1.useState)(null);
+    // If we're in a mobile navigation stack, use custom context
+    if (navStack) {
+        const trigger = () => {
+            if (renderContentRef.current) {
+                const key = `submenu-${Date.now()}`;
+                setSubMenuKey(key);
+                navStack.push({
+                    key,
+                    title: subMenuTitle,
+                    // Store a function that always reads the latest content from the ref
+                    content: (props) => {
+                        const renderFn = renderContentRef.current;
+                        return renderFn ? renderFn() : null;
+                    },
+                });
+            }
+        };
+        const setRenderContent = (renderer) => {
+            renderContentRef.current = renderer;
+        };
+        const contextValue = react_1.default.useMemo(() => ({
+            renderContent: () => renderContentRef.current?.(),
+            setRenderContent,
+            title: subMenuTitle,
+            setTitle: setSubMenuTitle,
+            trigger,
+            key: subMenuKey,
+        }), [subMenuTitle, subMenuKey]);
+        return ((0, jsx_runtime_1.jsx)(SubMenuContext.Provider, { value: contextValue, children: children }));
+    }
+    // Web - use primitive
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Sub, { ref: ref, ...props, children: children }));
+});
+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 { onOpenChange } = DropdownMenuPrimitive.useRootContext();
+    const { zero: zt, theme } = (0, ui_1.useTheme)();
     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: [
-                atoms_1.a.sizes.width[12],
-                atoms_1.a.sizes.height[1],
-                zt.bg.mutedForeground,
-            ], children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetView, { style: [atoms_1.px[4]], children: typeof children === "function"
-                    ? children({ pressed: true })
-                    : children }) }) }));
+    const { width } = (0, react_native_1.useWindowDimensions)();
+    const isWide = react_native_1.Platform.OS !== "web" && width >= 800;
+    const sheetWidth = isWide ? 450 : width;
+    const horizontalMargin = isWide ? (width - sheetWidth) / 2 : 0;
+    const insets = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    // Navigation stack state
+    const [stack, setStack] = (0, react_1.useState)([
+        { key: "root", content: children },
+    ]);
+    // Update root content when children changes
+    react_1.default.useEffect(() => {
+        setStack((prev) => {
+            if (!Array.isArray(prev) || prev.length === 0) {
+                return [{ key: "root", content: children }];
+            }
+            // Update the root item content
+            const newStack = [...prev];
+            newStack[0] = { ...newStack[0], content: children };
+            return newStack;
+        });
+    }, [children]);
+    const slideAnim = (0, react_native_reanimated_1.useSharedValue)(0);
+    const fadeAnim = (0, react_native_reanimated_1.useSharedValue)(1);
+    const push = (item) => {
+        // First, update the stack
+        setStack((prev) => {
+            if (!Array.isArray(prev))
+                return [{ key: "root", content: children }, item];
+            return [...prev, item];
+        });
+        // Then animate from right to center with fade
+        slideAnim.value = 40;
+        fadeAnim.value = 0;
+        slideAnim.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 350 });
+        fadeAnim.value = (0, react_native_reanimated_1.withTiming)(1, { duration: 350 });
+    };
+    const popStack = () => {
+        (0, react_1.startTransition)(() => {
+            setStack((prev) => {
+                if (!Array.isArray(prev) || prev.length <= 1) {
+                    return [{ key: "root", content: children }];
+                }
+                return prev.slice(0, -1);
+            });
+        });
+    };
+    const resetAnimationValues = () => {
+        setTimeout(() => {
+            slideAnim.value = 0;
+            fadeAnim.value = 1;
+        }, 5);
+    };
+    const pop = () => {
+        if (stack.length <= 1)
+            return;
+        // Animate out to the right with fade
+        slideAnim.value = (0, react_native_reanimated_1.withTiming)(40, { duration: 150 });
+        fadeAnim.value = (0, react_native_reanimated_1.withTiming)(0, { duration: 150 }, (finished) => {
+            if (finished) {
+                // Update stack first with startTransition for smoother render
+                (0, react_native_reanimated_1.runOnJS)(popStack)();
+                // Then reset animation position after a brief delay to ensure component has unmounted
+                (0, react_native_reanimated_1.runOnJS)(resetAnimationValues)();
+            }
+        });
+    };
+    const animatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        transform: [{ translateX: slideAnim.value }],
+        opacity: fadeAnim.value,
+    }));
+    const headerAnimatedStyle = (0, react_native_reanimated_1.useAnimatedStyle)(() => ({
+        opacity: fadeAnim.value,
+    }));
+    const currentLevel = stack[stack.length - 1];
+    const isNested = stack.length > 1;
+    const onBackgroundTap = () => {
+        if (sheetRef.current)
+            sheetRef.current?.close();
+        setTimeout(() => {
+            onOpenChange?.(false);
+        }, 300);
+    };
+    // Safety check - if no current level, don't render
+    if (!currentLevel) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: (0, jsx_runtime_1.jsx)(NavigationStackContext.Provider, { value: { stack, push, pop, isNested }, children: (0, jsx_runtime_1.jsxs)(bottom_sheet_1.default, { ref: sheetRef, enablePanDownToClose: true, enableDynamicSizing: true, detached: isWide, bottomInset: isWide ? 0 : 0, backdropComponent: ({ style }) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [style, react_native_1.StyleSheet.absoluteFill], onPress: () => onBackgroundTap() })), onClose: () => onOpenChange?.(false), style: [
+                    overlayStyle,
+                    react_native_1.StyleSheet.flatten(rest.style),
+                    isWide && { marginHorizontal: horizontalMargin },
+                ], 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,
+                ], children: [isNested && ((0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: [
+                            headerAnimatedStyle,
+                            atoms_1.a.layout.flex.row,
+                            atoms_1.a.layout.flex.alignCenter,
+                            atoms_1.px[4],
+                            atoms_1.pb[2],
+                            {
+                                borderBottomWidth: 1,
+                                borderBottomColor: theme.colors.border,
+                            },
+                        ], children: (0, jsx_runtime_1.jsxs)(react_native_1.Pressable, { onPress: pop, style: [
+                                atoms_1.a.layout.flex.row,
+                                atoms_1.a.layout.flex.alignCenter,
+                                atoms_1.gap.all[2],
+                            ], hitSlop: 80, children: [(0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronLeft, { size: 20, color: theme.colors.foreground }), currentLevel?.title ? ((0, jsx_runtime_1.jsx)(text_2.Text, { size: "lg", children: currentLevel.title })) : null] }) })), (0, jsx_runtime_1.jsx)(react_native_reanimated_1.default.View, { style: animatedStyle, children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetScrollView, { style: [atoms_1.px[4]], contentContainerStyle: {
+                                paddingBottom: insets.bottom + 50,
+                                overflow: "hidden",
+                            }, children: stack.map((level, index) => {
+                                const isCurrent = index === stack.length - 1;
+                                return ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: [{ display: isCurrent ? "flex" : "none" }], children: typeof level.content === "function"
+                                        ? level.content({ pressed: true })
+                                        : level.content }, level.key));
+                            }) }) })] }) }) }));
 });
-exports.DropdownMenuSubTrigger = (0, react_1.forwardRef)(({ inset, children, ...props }, ref) => {
+exports.DropdownMenuSubTrigger = (0, react_1.forwardRef)(({ inset, children, subMenuTitle, ...props }, ref) => {
+    const navStack = useNavigationStack();
+    const subMenuContext = (0, react_1.useContext)(SubMenuContext);
+    const { icons, theme } = (0, ui_1.useTheme)();
+    // Set the title in the submenu context if provided
+    react_1.default.useEffect(() => {
+        if (subMenuContext && subMenuTitle) {
+            subMenuContext.setTitle(subMenuTitle);
+        }
+    }, [subMenuContext, subMenuTitle]);
+    // If we're in a navigation stack (mobile bottom sheet), handle differently
+    if (navStack && subMenuContext) {
+        return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: () => {
+                subMenuContext.trigger();
+            }, ...props, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
+                    inset && atoms_1.gap[2],
+                    atoms_1.layout.flex.row,
+                    atoms_1.layout.flex.alignCenter,
+                    atoms_1.a.radius.all.sm,
+                    atoms_1.py[1],
+                    atoms_1.pl[2],
+                    atoms_1.pr[2],
+                ], children: [typeof children === "function" ? (children({ pressed: true })) : typeof children === "string" ? ((0, jsx_runtime_1.jsx)(text_2.Text, { children: children })) : (children), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [atoms_1.a.layout.position.absolute, atoms_1.a.position.right[1]], children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronRight, { size: 18, color: icons.color.muted }) })] }) }));
+    }
+    // Web behavior - use primitive
     const { open } = DropdownMenuPrimitive.useSubContext();
-    const { icons } = (0, ui_1.useTheme)();
     const Icon = react_native_1.Platform.OS === "web" ? lucide_react_native_1.ChevronRight : open ? lucide_react_native_1.ChevronUp : lucide_react_native_1.ChevronDown;
     return ((0, jsx_runtime_1.jsx)(text_1.TextContext.Provider, { value: (0, text_1.objectFromObjects)([
             atoms_1.a.textColors.primary[500],
@@ -50,8 +226,35 @@ exports.DropdownMenuSubTrigger = (0, react_1.forwardRef)(({ inset, children, ...
                     atoms_1.pr[8],
                 ], children: [children, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [atoms_1.a.layout.position.absolute, atoms_1.a.position.right[1]], children: (0, jsx_runtime_1.jsx)(Icon, { size: 18, color: icons.color.muted }) })] }) }) }));
 });
-exports.DropdownMenuSubContent = (0, react_1.forwardRef)((props, ref) => {
+exports.DropdownMenuSubContent = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
     const { zero: zt } = (0, ui_1.useTheme)();
+    const subMenuContext = (0, react_1.useContext)(SubMenuContext);
+    const navStack = useNavigationStack();
+    const prevChildrenRef = (0, react_1.useRef)(null);
+    // Register a render function that will be called fresh each time
+    react_1.default.useEffect(() => {
+        if (subMenuContext && navStack) {
+            // Only update if children reference actually changed
+            if (prevChildrenRef.current === children) {
+                return;
+            }
+            prevChildrenRef.current = children;
+            // Pass a function that returns the current children
+            subMenuContext.setRenderContent(() => children);
+            // Force a stack update to trigger rerender with the actual children
+            if (subMenuContext.key) {
+                // Store the children directly so React can handle updates
+                //navStack.updateContent(subMenuContext.key, children);
+            }
+        }
+    }, [children, subMenuContext, navStack]);
+    // On mobile, don't render the subcontent here - it'll be rendered in the nav stack
+    // But keep the component mounted so effects run when children change
+    if (navStack && subMenuContext) {
+        // Component stays mounted to track prop changes, but renders nothing
+        return null;
+    }
+    // Web - use primitive
     return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.SubContent, { ref: ref, style: [
             atoms_1.a.zIndex[50],
             atoms_1.a.sizes.minWidth[32],
@@ -63,10 +266,12 @@ exports.DropdownMenuSubContent = (0, react_1.forwardRef)((props, ref) => {
             zt.bg.popover,
             atoms_1.p[1],
             atoms_1.a.shadows.md,
-        ], ...props }));
+        ], ...props, children: children }));
 });
-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)();
+    const { height } = (0, react_native_1.useWindowDimensions)();
+    const maxHeight = height * 0.8;
     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,
                 overlayStyle,
@@ -81,10 +286,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, { style: { maxHeight }, 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,21 +302,23 @@ 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**.
 exports.ResponsiveDropdownMenuContent = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
     const { width } = (0, react_native_1.useWindowDimensions)();
     // On web, you might want to always use the normal dropdown
-    const isBottomSheet = react_native_1.Platform.OS !== "web" && width < 800;
+    const isBottomSheet = react_native_1.Platform.OS !== "web";
     if (isBottomSheet) {
         return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuBottomSheet, { ref: ref, ...props, children: children }));
     }

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 =

package/dist/components/ui/select.js

@@ -5,85 +5,54 @@ 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 __1 = require("../..");
 const theme_1 = require("../../lib/theme/theme");
+const ui_1 = require("../../ui");
+const dropdown_1 = require("./dropdown");
 const text_1 = require("./text");
+const { layout, px, py, borders, r, gap } = __1.zero;
 exports.Select = (0, react_1.forwardRef)(({ value, onValueChange, placeholder = "Select...", items, disabled = false, style, }, ref) => {
     const { theme } = (0, theme_1.useTheme)();
-    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
     const selectedItem = items.find((item) => item.value === value);
-    const handleSelect = (itemValue) => {
-        onValueChange(itemValue);
-        setIsOpen(false);
-    };
-    const styles = createStyles(theme, disabled);
-    return ((0, jsx_runtime_1.jsxs)(jsx_runtime_1.Fragment, { children: [(0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { ref: ref, style: [styles.container, style], onPress: () => !disabled && setIsOpen(true), disabled: disabled, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.value, children: selectedItem?.label || placeholder }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronDown, { size: 16, color: theme.colors.textMuted })] }), (0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: isOpen, transparent: true, animationType: "fade", onRequestClose: () => setIsOpen(false), children: (0, jsx_runtime_1.jsx)(react_native_1.TouchableOpacity, { style: styles.overlay, activeOpacity: 1, onPress: () => setIsOpen(false), children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: styles.dropdown, children: (0, jsx_runtime_1.jsx)(react_native_1.FlatList, { data: items, keyExtractor: (item) => item.value, renderItem: ({ item }) => ((0, jsx_runtime_1.jsxs)(react_native_1.TouchableOpacity, { style: [
-                                    styles.item,
-                                    item.value === value && styles.selectedItem,
-                                ], onPress: () => handleSelect(item.value), children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: [
-                                            styles.itemText,
-                                            item.value === value ? styles.selectedItemText : {},
-                                        ], children: item.label }), item.description && ((0, jsx_runtime_1.jsx)(text_1.Text, { style: styles.itemDescription, children: item.description }))] })), style: styles.list }) }) }) })] }));
+    return ((0, jsx_runtime_1.jsxs)(dropdown_1.DropdownMenu, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.DropdownMenuTrigger, { disabled: disabled, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [
+                        {
+                            width: "100%",
+                            paddingHorizontal: theme.spacing[3],
+                            paddingVertical: theme.spacing[3],
+                            borderWidth: 1,
+                            borderColor: theme.colors.border,
+                            borderRadius: theme.borderRadius.md,
+                            backgroundColor: disabled
+                                ? theme.colors.muted
+                                : theme.colors.card,
+                            minHeight: theme.touchTargets.minimum,
+                            opacity: disabled ? 0.5 : 1,
+                        },
+                        style,
+                    ], children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                            flexDirection: "row",
+                            alignItems: "center",
+                            justifyContent: "space-between",
+                            width: "100%",
+                            gap: 8,
+                        }, children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: {
+                                    fontSize: 16,
+                                    color: disabled
+                                        ? theme.colors.textDisabled
+                                        : theme.colors.text,
+                                    flex: 1,
+                                }, children: selectedItem?.label || placeholder }), (0, jsx_runtime_1.jsx)(lucide_react_native_1.ChevronDown, { size: 16, color: theme.colors.textMuted })] }) }) }), (0, jsx_runtime_1.jsx)(dropdown_1.ResponsiveDropdownMenuContent, { align: "start", style: [
+                    {
+                        maxHeight: 400,
+                    },
+                ], children: items.map((item, index) => ((0, jsx_runtime_1.jsxs)(react_native_1.View, { children: [(0, jsx_runtime_1.jsx)(dropdown_1.DropdownMenuItem, { onPress: () => onValueChange(item.value), children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                                    flexDirection: "row",
+                                    alignItems: "center",
+                                    justifyContent: "space-between",
+                                    width: "100%",
+                                    gap: 8,
+                                }, children: [(0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [gap.all[1], py[1], ui_1.flex.values[1]], children: [(0, jsx_runtime_1.jsx)(text_1.Text, { style: {
+                                                    fontWeight: item.value === value ? "500" : "400",
+                                                }, color: item.value === value ? "primary" : "default", children: item.label }), item.description && ((0, jsx_runtime_1.jsx)(text_1.Text, { size: "sm", color: "muted", children: item.description }))] }), item.value === value ? ((0, jsx_runtime_1.jsx)(lucide_react_native_1.Check, { size: 16, color: theme.colors.primary })) : ((0, jsx_runtime_1.jsx)(react_native_1.View, { style: { width: 16 } }))] }) }), index < items.length - 1 && (0, jsx_runtime_1.jsx)(dropdown_1.DropdownMenuSeparator, {})] }, item.value))) })] }));
 });
 exports.Select.displayName = "Select";
-function createStyles(theme, disabled) {
-    return react_native_1.StyleSheet.create({
-        container: {
-            flexDirection: "row",
-            alignItems: "center",
-            justifyContent: "space-between",
-            paddingHorizontal: theme.spacing[3],
-            paddingVertical: theme.spacing[3],
-            borderWidth: 1,
-            borderColor: theme.colors.border,
-            borderRadius: theme.borderRadius.md,
-            backgroundColor: disabled ? theme.colors.muted : theme.colors.card,
-            minHeight: theme.touchTargets.minimum,
-        },
-        value: {
-            fontSize: 16,
-            color: disabled ? theme.colors.textDisabled : theme.colors.text,
-            flex: 1,
-        },
-        overlay: {
-            flex: 1,
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
-            justifyContent: "center",
-            alignItems: "center",
-        },
-        dropdown: {
-            backgroundColor: theme.colors.background,
-            borderRadius: theme.borderRadius.md,
-            borderWidth: 1,
-            borderColor: theme.colors.border,
-            maxHeight: 300,
-            width: "90%",
-            maxWidth: 400,
-            ...theme.shadows.lg,
-        },
-        list: {
-            maxHeight: 300,
-        },
-        item: {
-            paddingHorizontal: theme.spacing[4],
-            paddingVertical: theme.spacing[3],
-            borderBottomWidth: 1,
-            borderBottomColor: theme.colors.border,
-        },
-        selectedItem: {
-            backgroundColor: theme.colors.primary,
-        },
-        itemText: {
-            fontSize: 16,
-            color: theme.colors.text,
-        },
-        selectedItemText: {
-            color: theme.colors.primaryForeground,
-            fontWeight: "500",
-        },
-        itemDescription: {
-            fontSize: 14,
-            color: theme.colors.textMuted,
-            marginTop: theme.spacing[1],
-        },
-    });
-}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamplace/components",
-  "version": "0.8.6",
+  "version": "0.8.9",
   "description": "Streamplace React (Native) Components",
   "main": "dist/index.js",
   "types": "src/index.tsx",
@@ -56,5 +56,5 @@
     "start": "tsc --watch --preserveWatchOutput",
     "prepare": "tsc"
   },
-  "gitHead": "a40860f005ba4da989cfe1a5c39d29fa3564fea6"
+  "gitHead": "2ac59bf91315b2b1f848842c1048a23bd74658b7"
 }

package/src/components/content-metadata/content-metadata-form.tsx

@@ -376,26 +376,11 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
                     layout.flex.row,
                     layout.flex.alignCenter,
                     w.percent[100],
+                    gap.all[2],
                   ]}
                 >
-                  <Text
-                    style={[
-                      text.neutral[300],
-                      {
-                        minWidth: 100,
-                        textAlign: "left",
-                        paddingBottom: 8,
-                        fontSize: 14,
-                      },
-                    ]}
-                  >
-                    Content Warnings
-                  </Text>
-                  <Text
-                    style={[text.gray[500], { fontSize: 12, paddingBottom: 8 }]}
-                  >
-                    optional
-                  </Text>
+                  <Text>Content Warnings</Text>
+                  <Text muted>(optional)</Text>
                 </View>
                 <View style={[gap.all[2], w.percent[100]]}>
                   {CONTENT_WARNINGS.map((warning) => (
@@ -424,26 +409,11 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
                     layout.flex.row,
                     layout.flex.alignCenter,
                     w.percent[100],
+                    gap.all[2],
                   ]}
                 >
-                  <Text
-                    style={[
-                      text.neutral[300],
-                      {
-                        minWidth: 100,
-                        textAlign: "left",
-                        paddingBottom: 8,
-                        fontSize: 14,
-                      },
-                    ]}
-                  >
-                    Content Rights
-                  </Text>
-                  <Text
-                    style={[text.gray[500], { fontSize: 12, paddingBottom: 8 }]}
-                  >
-                    optional
-                  </Text>
+                  <Text>Content Rights</Text>
+                  <Text muted>(optional)</Text>
                 </View>
 
                 <View style={[gap.all[3], w.percent[100]]}>
@@ -674,21 +644,11 @@ export const ContentMetadataForm = forwardRef<any, ContentMetadataFormProps>(
                     layout.flex.row,
                     layout.flex.alignCenter,
                     w.percent[100],
+                    gap.all[2],
                   ]}
                 >
-                  <Text
-                    style={[
-                      text.neutral[300],
-                      { minWidth: 100, textAlign: "left", paddingBottom: 8 },
-                    ]}
-                  >
-                    Distribution
-                  </Text>
-                  <Text
-                    style={[text.gray[500], { fontSize: 12, paddingBottom: 8 }]}
-                  >
-                    optional
-                  </Text>
+                  <Text>Distribution</Text>
+                  <Text muted>(optional)</Text>
                 </View>
 
                 {/* allow everyone to distribute your content */}