@streamplace/components 0.7.35 → 0.8.3

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

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

package/dist/components/ui/checkbox.js

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

package/dist/components/ui/dialog.js

@@ -1,16 +1,20 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.dialogVariants = exports.DialogFooter = exports.DialogDescription = exports.DialogTitle = exports.Dialog = void 0;
+exports.dialogVariants = exports.DialogFooter = exports.DialogDescription = exports.DialogTitle = exports.ResponsiveDialog = exports.Dialog = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const bottom_sheet_1 = tslib_1.__importStar(require("@gorhom/bottom-sheet"));
+// to get the portal
+const Portal = tslib_1.__importStar(require("@rn-primitives/portal"));
 const class_variance_authority_1 = require("class-variance-authority");
 const lucide_react_native_1 = require("lucide-react-native");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
+const react_native_safe_area_context_1 = require("react-native-safe-area-context");
 const theme_1 = require("../../lib/theme/theme");
-const zero = tslib_1.__importStar(require("../../ui"));
 const icons_1 = require("./icons");
 const modal_1 = require("./primitives/modal");
+const text_1 = require("./text");
 const ThemedX = (0, icons_1.createThemedIcon)(lucide_react_native_1.X);
 // Dialog variants using class-variance-authority pattern
 const dialogVariants = (0, class_variance_authority_1.cva)("", {
@@ -42,67 +46,59 @@ const dialogVariants = (0, class_variance_authority_1.cva)("", {
     },
 });
 exports.dialogVariants = dialogVariants;
-exports.Dialog = (0, react_1.forwardRef)(({ variant = "left", size = "md", position = "center", children, title, description, dismissible = true, showCloseButton = true, onClose, open = false, onOpenChange, ...props }, ref) => {
-    const { zero: zt, theme } = (0, theme_1.useTheme)();
-    // Content styles using theme.zero
-    const contentStyles = react_1.default.useMemo(() => {
-        const baseStyle = [
-            zt.bg.card,
-            zero.r.lg,
-            zero.shadows.lg,
-            { maxHeight: "90%", maxWidth: "90%" },
-        ];
-        const variantStyle = (() => {
-            switch (variant) {
-                case "sheet":
-                    return [
-                        { borderRadius: zero.borderRadius.xl },
-                        {
-                            borderBottomLeftRadius: 0,
-                            borderBottomRightRadius: 0,
-                            marginTop: "auto",
-                            marginBottom: 0,
-                            maxHeight: "80%",
+// Bottom Sheet Dialog Component
+const DialogBottomSheet = (0, react_1.forwardRef)(function DialogBottomSheet({ overlayStyle, portalHost, children, title, description, showCloseButton = true, onClose, open = false, onOpenChange, ...props }, _ref) {
+    const { theme } = (0, theme_1.useTheme)();
+    const sheetRef = (0, react_1.useRef)(null);
+    const { top } = (0, react_native_safe_area_context_1.useSafeAreaInsets)();
+    const dims = (0, react_native_1.useWindowDimensions)();
+    const handleClose = react_1.default.useCallback(() => {
+        if (onClose) {
+            onClose();
+        }
+        if (onOpenChange) {
+            onOpenChange(false);
+        }
+    }, [onClose, onOpenChange]);
+    if (!open) {
+        return null;
+    }
+    return ((0, jsx_runtime_1.jsx)(Portal.Portal, { name: "dialog", children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.default, { ref: sheetRef, index: open ? 0 : -1, enablePanDownToClose: true, enableDynamicSizing: true, maxDynamicContentSize: dims.height - top, keyboardBehavior: "interactive", keyboardBlurBehavior: "restore", enableContentPanningGesture: false, backdropComponent: ({ style }) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [style, react_native_1.StyleSheet.absoluteFill], onPress: handleClose })), onClose: handleClose, style: [overlayStyle], backgroundStyle: {
+                backgroundColor: theme.colors.card,
+                borderRadius: theme.borderRadius.lg,
+                ...theme.shadows.lg,
+            }, handleIndicatorStyle: {
+                width: 48,
+                height: 4,
+                backgroundColor: theme.colors.textMuted,
+            }, children: (0, jsx_runtime_1.jsxs)(bottom_sheet_1.BottomSheetScrollView, { style: {
+                    flex: 1,
+                    width: "100%",
+                }, contentContainerStyle: { flexGrow: 1 }, children: [(title || showCloseButton) && ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                            paddingHorizontal: theme.spacing[4],
+                            paddingVertical: theme.spacing[4],
+                            flexDirection: "row",
+                            alignItems: "center",
+                            justifyContent: "space-between",
                             width: "100%",
-                            maxWidth: "100%",
-                        },
-                    ];
-                case "fullscreen":
-                    return [
-                        {
+                        }, children: [title && (0, jsx_runtime_1.jsx)(exports.DialogTitle, { children: title }), showCloseButton && ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { onPress: handleClose, style: {
+                                    width: theme.touchTargets.minimum,
+                                    height: theme.touchTargets.minimum,
+                                    alignItems: "center",
+                                    justifyContent: "center",
+                                    borderRadius: theme.borderRadius.sm,
+                                    marginLeft: theme.spacing[2],
+                                }, children: (0, jsx_runtime_1.jsx)(DialogCloseIcon, {}) }))] })), (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: {
+                            paddingHorizontal: theme.spacing[4],
+                            paddingBottom: theme.spacing[6],
+                            flex: 1,
                             width: "100%",
-                            height: "100%",
-                            maxWidth: "100%",
-                            maxHeight: "100%",
-                            borderRadius: 0,
-                            margin: 0,
-                        },
-                    ];
-                default:
-                    return [];
-            }
-        })();
-        const sizeStyle = (() => {
-            switch (size) {
-                case "sm":
-                    return { minWidth: 300, minHeight: 200 };
-                case "lg":
-                    return { minWidth: 500, minHeight: 400 };
-                case "xl":
-                    return { minWidth: 600, minHeight: 500 };
-                case "full":
-                    return {
-                        width: "95%",
-                        height: "95%",
-                        maxWidth: "95%",
-                        maxHeight: "95%",
-                    };
-                default:
-                    return { minWidth: 400, minHeight: 300 };
-            }
-        })();
-        return [baseStyle, variantStyle, sizeStyle].flat();
-    }, [variant, size, zero]);
+                        }, children: [description && ((0, jsx_runtime_1.jsx)(exports.DialogDescription, { children: description })), children] })] }) }) }));
+});
+exports.Dialog = (0, react_1.forwardRef)(({ variant = "default", size = "md", position = "center", children, title, description, dismissible = true, showCloseButton = true, onClose, open = false, onOpenChange, ...props }, ref) => {
+    const { theme } = (0, theme_1.useTheme)();
+    // Create dynamic styles based on theme
+    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
     const handleClose = react_1.default.useCallback(() => {
         if (onClose) {
             onClose();
@@ -128,46 +124,155 @@ exports.Dialog = (0, react_1.forwardRef)(({ variant = "left", size = "md", posit
         }
         return "fade";
     }, [variant]);
-    return ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Root, { ref: ref, open: open, onOpenChange: onOpenChange, presentationStyle: presentationStyle, animationType: animationType, ...props, children: (0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Overlay, { dismissible: dismissible, onDismiss: handleClose, style: zt.bg.overlay, children: (0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Content, { position: position || "left", size: size || "md", style: contentStyles, children: [(title || showCloseButton) && ((0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Header, { withBorder: variant !== "sheet", style: [
-                            zero.p[4],
-                            {
-                                flexDirection: "row",
-                                alignItems: "center",
-                                justifyContent: "space-between",
-                            },
-                        ], children: [(0, jsx_runtime_1.jsx)(exports.DialogTitle, { children: title }), showCloseButton && ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Close, { onClose: handleClose, style: [
-                                    zero.p[2],
-                                    {
-                                        width: 44,
-                                        height: 44,
-                                        alignItems: "center",
-                                        justifyContent: "center",
-                                    },
-                                ], children: (0, jsx_runtime_1.jsx)(DialogCloseIcon, {}) }))] })), (0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Body, { scrollable: variant !== "fullscreen", style: [zero.p[6], { paddingTop: 0, flex: 1 }], children: [description && ((0, jsx_runtime_1.jsx)(exports.DialogDescription, { children: description })), children] })] }) }) }));
+    return ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Root, { ref: ref, open: open, onOpenChange: onOpenChange, presentationStyle: presentationStyle, animationType: animationType, ...props, children: (0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Overlay, { dismissible: dismissible, onDismiss: handleClose, style: styles.overlay, children: (0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Content, { position: position || "center", size: size || "md", style: [
+                    styles.content,
+                    variant === "sheet" && styles.sheetContent,
+                    variant === "fullscreen" && styles.fullscreenContent,
+                    size === "sm" && styles.smContent,
+                    size === "md" && styles.mdContent,
+                    size === "lg" && styles.lgContent,
+                    size === "xl" && styles.xlContent,
+                    size === "full" && styles.fullContent,
+                ], children: [(title || showCloseButton) && ((0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Header, { withBorder: variant !== "sheet", style: styles.header, children: [(0, jsx_runtime_1.jsx)(exports.DialogTitle, { children: title }), showCloseButton && ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Close, { onClose: handleClose, style: styles.closeButton, children: (0, jsx_runtime_1.jsx)(DialogCloseIcon, {}) }))] })), (0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Body, { scrollable: variant !== "fullscreen", style: styles.body, children: [description && ((0, jsx_runtime_1.jsx)(exports.DialogDescription, { children: description })), children] })] }) }) }));
 });
 exports.Dialog.displayName = "Dialog";
+/// Responsive Dialog Component. On mobile this will render a *bottom sheet*.
+/// Prefer this over the regular Dialog component for better mobile UX.
+exports.ResponsiveDialog = (0, react_1.forwardRef)(({ children, size, ...props }, ref) => {
+    const { width } = (0, react_native_1.useWindowDimensions)();
+    // On web, you might want to always use the normal dialog
+    // On mobile (width < 800), use the bottom sheet
+    const isBottomSheet = react_native_1.Platform.OS !== "web" && width < 800;
+    if (isBottomSheet) {
+        return ((0, jsx_runtime_1.jsx)(DialogBottomSheet, { ref: ref, ...props, size: "full", showCloseButton: false, variant: "fullscreen", children: children }));
+    }
+    // Use larger default size for regular dialogs to give more room
+    const dialogSize = size || "lg";
+    return ((0, jsx_runtime_1.jsx)(exports.Dialog, { ref: ref, size: dialogSize, ...props, children: children }));
+});
+exports.ResponsiveDialog.displayName = "ResponsiveDialog";
 exports.DialogTitle = (0, react_1.forwardRef)(({ children, style, ...props }, ref) => {
-    const { zero: zt } = (0, theme_1.useTheme)();
+    const { theme } = (0, theme_1.useTheme)();
+    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
     if (!children)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [zt.text.xl, { fontWeight: "600", flex: 1 }, style], ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(text_1.Text, { ref: ref, style: [styles.title, style], ...props, children: children }));
 });
 exports.DialogTitle.displayName = "DialogTitle";
 exports.DialogDescription = (0, react_1.forwardRef)(({ children, style, ...props }, ref) => {
-    const { zero: zt } = (0, theme_1.useTheme)();
+    const { theme } = (0, theme_1.useTheme)();
+    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
     if (!children)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [zt.text.muted, zero.mb[4], style], ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(text_1.Text, { ref: ref, style: [styles.description, style], ...props, children: children }));
 });
 exports.DialogDescription.displayName = "DialogDescription";
 exports.DialogFooter = (0, react_1.forwardRef)(({ children, direction = "row", justify = "flex-end", withBorder = true, style, ...props }, ref) => {
-    const { zero: zt } = (0, theme_1.useTheme)();
+    const { theme } = (0, theme_1.useTheme)();
+    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
     if (!children)
         return null;
-    return ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Footer, { ref: ref, withBorder: withBorder, direction: direction, justify: justify, style: [zero.p[6], { gap: 8 }, style], ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(modal_1.ModalPrimitive.Footer, { ref: ref, withBorder: withBorder, direction: direction, justify: justify, style: [styles.footer, style], ...props, children: children }));
 });
 exports.DialogFooter.displayName = "DialogFooter";
 // Dialog Close Icon component (Lucide X)
 const DialogCloseIcon = () => {
     return (0, jsx_runtime_1.jsx)(ThemedX, { size: "md", variant: "default" });
 };
+// Create theme-aware styles
+function createStyles(theme) {
+    return react_native_1.StyleSheet.create({
+        overlay: {
+            backgroundColor: "rgba(0, 0, 0, 0.5)",
+        },
+        content: {
+            backgroundColor: theme.colors.card,
+            borderRadius: theme.borderRadius.lg,
+            ...theme.shadows.lg,
+            maxHeight: "90%",
+            maxWidth: "90%",
+        },
+        // Variant styles
+        sheetContent: {
+            borderTopLeftRadius: theme.borderRadius.xl,
+            borderTopRightRadius: theme.borderRadius.xl,
+            borderBottomLeftRadius: 0,
+            borderBottomRightRadius: 0,
+            marginTop: "auto",
+            marginBottom: 0,
+            maxHeight: "80%",
+            width: "100%",
+            maxWidth: "100%",
+        },
+        fullscreenContent: {
+            width: "100%",
+            height: "100%",
+            maxWidth: "100%",
+            maxHeight: "100%",
+            borderRadius: 0,
+            margin: 0,
+        },
+        // Size styles
+        smContent: {
+            minWidth: 300,
+            minHeight: 200,
+        },
+        mdContent: {
+            minWidth: 400,
+            minHeight: 300,
+        },
+        lgContent: {
+            minWidth: 500,
+            minHeight: 400,
+        },
+        xlContent: {
+            minWidth: 600,
+            minHeight: 500,
+        },
+        fullContent: {
+            width: "95%",
+            height: "95%",
+            maxWidth: "95%",
+            maxHeight: "95%",
+        },
+        header: {
+            paddingHorizontal: theme.spacing[6],
+            paddingVertical: theme.spacing[4],
+            flexDirection: "row",
+            alignItems: "center",
+            justifyContent: "space-between",
+        },
+        body: {
+            paddingHorizontal: theme.spacing[6],
+            paddingBottom: theme.spacing[6],
+            flex: 1,
+        },
+        footer: {
+            paddingHorizontal: theme.spacing[6],
+            paddingVertical: theme.spacing[4],
+            gap: theme.spacing[2],
+            width: "100%",
+        },
+        title: {
+            fontSize: 20,
+            fontWeight: "600",
+            color: theme.colors.text,
+            flex: 1,
+            lineHeight: 24,
+        },
+        description: {
+            fontSize: 16,
+            color: theme.colors.textMuted,
+            lineHeight: 22,
+            marginVertical: theme.spacing[4],
+        },
+        closeButton: {
+            width: theme.touchTargets.minimum,
+            height: theme.touchTargets.minimum,
+            alignItems: "center",
+            justifyContent: "center",
+            borderRadius: theme.borderRadius.sm,
+            marginLeft: theme.spacing[2],
+        },
+    });
+}

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

@@ -3,11 +3,23 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.InputPrimitive = exports.InputGroup = exports.InputAddon = exports.InputError = exports.InputDescription = exports.InputLabel = exports.InputContainer = exports.InputRoot = void 0;
 const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const bottom_sheet_1 = require("@gorhom/bottom-sheet");
 const react_1 = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
 // Input root primitive - the main TextInput component
 exports.InputRoot = (0, react_1.forwardRef)(({ value, onChangeText, onChange, onFocus, onBlur, error = false, disabled = false, loading = false, editable, style, placeholderTextColor = "#9ca3af", ...props }, ref) => {
     const [isFocused, setIsFocused] = react_1.default.useState(false);
+    let isInBottomSheet = false;
+    try {
+        (0, bottom_sheet_1.useBottomSheetInternal)();
+        isInBottomSheet = true;
+    }
+    catch {
+        isInBottomSheet = false;
+    }
+    const InputComponent = isInBottomSheet && react_native_1.Platform.OS !== "web"
+        ? bottom_sheet_1.BottomSheetTextInput
+        : react_native_1.TextInput;
     const handleChangeText = react_1.default.useCallback((text) => {
         if (onChangeText) {
             onChangeText(text);
@@ -28,7 +40,7 @@ exports.InputRoot = (0, react_1.forwardRef)(({ value, onChangeText, onChange, on
             onBlur(event);
         }
     }, [onBlur]);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { ref: ref, value: value, onChangeText: handleChangeText, onFocus: handleFocus, onBlur: handleBlur, editable: !disabled && !loading && editable, placeholderTextColor: placeholderTextColor, style: [
+    return ((0, jsx_runtime_1.jsx)(InputComponent, { ref: ref, value: value, onChangeText: handleChangeText, onFocus: handleFocus, onBlur: handleBlur, editable: !disabled && !loading && editable, placeholderTextColor: placeholderTextColor, style: [
             primitiveStyles.input,
             style,
             error && primitiveStyles.inputError,

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

@@ -7,7 +7,7 @@ const react_1 = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
 const { width: screenWidth, height: screenHeight } = react_native_1.Dimensions.get("window");
 // Modal root primitive - handles the native Modal component
-exports.ModalRoot = (0, react_1.forwardRef)(({ open = false, onOpenChange, children, onRequestClose, animationType = "fade", presentationStyle = react_native_1.Platform.OS === "ios" ? "pageSheet" : "fullScreen", statusBarTranslucent = react_native_1.Platform.OS === "android", ...props }, ref) => {
+exports.ModalRoot = (0, react_1.forwardRef)(({ open = false, onOpenChange, children, onRequestClose, animationType = "fade", presentationStyle = react_native_1.Platform.OS === "ios" ? "pageSheet" : "formSheet", statusBarTranslucent = react_native_1.Platform.OS !== "ios", transparent = true, ...props }, ref) => {
     const handleRequestClose = react_1.default.useCallback((e) => {
         if (onOpenChange) {
             onOpenChange(false);
@@ -16,7 +16,7 @@ exports.ModalRoot = (0, react_1.forwardRef)(({ open = false, onOpenChange, child
             onRequestClose(e);
         }
     }, [onOpenChange, onRequestClose]);
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: open, onRequestClose: handleRequestClose, animationType: animationType, presentationStyle: presentationStyle, statusBarTranslucent: statusBarTranslucent, ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: primitiveStyles.container, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Modal, { visible: open, onRequestClose: handleRequestClose, animationType: animationType, presentationStyle: presentationStyle, statusBarTranslucent: statusBarTranslucent, transparent: transparent, ...props, children: (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: primitiveStyles.container, children: children }) }));
 });
 exports.ModalRoot.displayName = "ModalRoot";
 exports.ModalOverlay = (0, react_1.forwardRef)(({ dismissible = true, onDismiss, onPress, style, children, activeOpacity = 1, ...props }, ref) => {

package/dist/components/ui/select.js

@@ -0,0 +1,89 @@
+"use strict";
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.Select = void 0;
+const jsx_runtime_1 = require("react/jsx-runtime");
+const lucide_react_native_1 = require("lucide-react-native");
+const react_1 = require("react");
+const react_native_1 = require("react-native");
+const theme_1 = require("../../lib/theme/theme");
+const text_1 = require("./text");
+exports.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 }) }) }) })] }));
+});
+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/dist/components/ui/textarea.js

@@ -1,11 +1,28 @@
 "use strict";
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.Textarea = Textarea;
+exports.Textarea = void 0;
+const tslib_1 = require("tslib");
 const jsx_runtime_1 = require("react/jsx-runtime");
+const bottom_sheet_1 = require("@gorhom/bottom-sheet");
+const React = tslib_1.__importStar(require("react"));
 const react_native_1 = require("react-native");
 const atoms_1 = require("../../lib/theme/atoms");
-function Textarea({ style, multiline = true, numberOfLines = 4, ...props }) {
-    return ((0, jsx_runtime_1.jsx)(react_native_1.TextInput, { style: [
+const Textarea = React.forwardRef(({ style, multiline = true, numberOfLines = 4, ...props }, ref) => {
+    // Detect if we're inside a bottom sheet
+    let isInBottomSheet = false;
+    try {
+        (0, bottom_sheet_1.useBottomSheetInternal)();
+        isInBottomSheet = true;
+    }
+    catch {
+        // Not in a bottom sheet context
+        isInBottomSheet = false;
+    }
+    // Use BottomSheetTextInput when inside a bottom sheet, regular TextInput otherwise
+    const InputComponent = isInBottomSheet && react_native_1.Platform.OS !== "web"
+        ? bottom_sheet_1.BottomSheetTextInput
+        : react_native_1.TextInput;
+    return ((0, jsx_runtime_1.jsx)(InputComponent, { ref: ref, style: [
             atoms_1.flex.values[1],
             atoms_1.borders.width.thin,
             atoms_1.borders.color.gray[400],
@@ -16,4 +33,6 @@ function Textarea({ style, multiline = true, numberOfLines = 4, ...props }) {
             { borderRadius: 10 },
             style,
         ], multiline: multiline, numberOfLines: numberOfLines, textAlignVertical: "top", ...props }));
-}
+});
+exports.Textarea = Textarea;
+Textarea.displayName = "Textarea";