@streamplace/components 0.7.13 → 0.7.15

package/dist/components/ui/button.js

@@ -1,223 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.buttonVariants = exports.Button = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-const class_variance_authority_1 = require("class-variance-authority");
-const react_1 = tslib_1.__importStar(require("react"));
-const react_native_1 = require("react-native");
-const theme_1 = require("../../lib/theme/theme");
-const tokens = tslib_1.__importStar(require("../../lib/theme/tokens"));
-const button_1 = require("./primitives/button");
-const text_1 = require("./primitives/text");
-// Button variants using class-variance-authority pattern
-const buttonVariants = (0, class_variance_authority_1.cva)("", {
-    variants: {
-        variant: {
-            primary: "primary",
-            secondary: "secondary",
-            outline: "outline",
-            ghost: "ghost",
-            destructive: "destructive",
-            success: "success",
-        },
-        size: {
-            sm: "sm",
-            md: "md",
-            lg: "lg",
-            xl: "xl",
-            pill: "pill",
-        },
-    },
-    defaultVariants: {
-        variant: "primary",
-        size: "md",
-    },
-});
-exports.buttonVariants = buttonVariants;
-exports.Button = (0, react_1.forwardRef)(({ variant = "primary", size = "md", children, leftIcon, rightIcon, loading = false, loadingText, disabled, style, ...props }, ref) => {
-    const { theme } = (0, theme_1.useTheme)();
-    // Create dynamic styles based on theme
-    const styles = (0, react_1.useMemo)(() => createStyles(theme), [theme]);
-    // Get variant styles
-    const buttonStyle = (0, react_1.useMemo)(() => {
-        const variantStyle = styles[`${variant}Button`];
-        const sizeStyle = styles[`${size}Button`];
-        return [variantStyle, sizeStyle];
-    }, [variant, size, styles]);
-    // Get inner styles for button content
-    const buttonInnerStyle = (0, react_1.useMemo)(() => {
-        const sizeInnerStyle = styles[`${size}ButtonInner`];
-        return sizeInnerStyle;
-    }, [size, styles]);
-    const textStyle = react_1.default.useMemo(() => {
-        const variantTextStyle = styles[`${variant}Text`];
-        const sizeTextStyle = styles[`${size}Text`];
-        return [variantTextStyle, sizeTextStyle];
-    }, [variant, size, styles]);
-    const iconSize = react_1.default.useMemo(() => {
-        switch (size) {
-            case "sm":
-                return 16;
-            case "lg":
-                return 20;
-            case "xl":
-                return 24;
-            case "md":
-            default:
-                return 18;
-        }
-    }, [size]);
-    const spinnerSize = (0, react_1.useMemo)(() => {
-        switch (size) {
-            case "sm":
-                return "small";
-            case "lg":
-            case "xl":
-                return "large";
-            case "md":
-            default:
-                return "small";
-        }
-    }, [size]);
-    const spinnerColor = (0, react_1.useMemo)(() => {
-        switch (variant) {
-            case "outline":
-            case "ghost":
-                return theme.colors.primary;
-            case "secondary":
-                return theme.colors.secondaryForeground;
-            case "destructive":
-                return theme.colors.destructiveForeground;
-            default:
-                return theme.colors.primaryForeground;
-        }
-    }, [variant, theme.colors]);
-    return ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Root, { ref: ref, disabled: disabled || loading, style: [buttonStyle, style], ...props, children: (0, jsx_runtime_1.jsxs)(button_1.ButtonPrimitive.Content, { style: buttonInnerStyle, children: [loading && !leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : leftIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "left", style: { width: iconSize, height: iconSize }, children: leftIcon })) : null, (0, jsx_runtime_1.jsx)(text_1.TextPrimitive.Root, { style: textStyle, children: loading && loadingText ? loadingText : children }), loading && rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", children: (0, jsx_runtime_1.jsx)(react_native_1.ActivityIndicator, { size: spinnerSize, color: spinnerColor }) })) : rightIcon ? ((0, jsx_runtime_1.jsx)(button_1.ButtonPrimitive.Icon, { position: "right", style: { width: iconSize, height: iconSize }, children: rightIcon })) : null] }) }));
-});
-exports.Button.displayName = "Button";
-// Create theme-based styles
-function createStyles(theme) {
-    return react_native_1.StyleSheet.create({
-        // Variant styles
-        primaryButton: {
-            backgroundColor: theme.colors.primary,
-            borderWidth: 0,
-            ...theme.shadows.sm,
-        },
-        primaryText: {
-            color: theme.colors.primaryForeground,
-            fontWeight: "600",
-        },
-        secondaryButton: {
-            backgroundColor: theme.colors.secondary,
-            borderWidth: 0,
-        },
-        secondaryText: {
-            color: theme.colors.secondaryForeground,
-            fontWeight: "500",
-        },
-        outlineButton: {
-            backgroundColor: "transparent",
-            borderWidth: 1,
-            borderColor: theme.colors.border,
-        },
-        outlineText: {
-            color: theme.colors.foreground,
-            fontWeight: "500",
-        },
-        ghostButton: {
-            backgroundColor: "transparent",
-            borderWidth: 0,
-        },
-        ghostText: {
-            color: theme.colors.foreground,
-            fontWeight: "500",
-        },
-        destructiveButton: {
-            backgroundColor: theme.colors.destructive,
-            borderWidth: 0,
-            ...theme.shadows.sm,
-        },
-        destructiveText: {
-            color: theme.colors.destructiveForeground,
-            fontWeight: "600",
-        },
-        successButton: {
-            backgroundColor: theme.colors.success,
-            borderWidth: 0,
-            ...theme.shadows.sm,
-        },
-        successText: {
-            color: theme.colors.successForeground,
-            fontWeight: "600",
-        },
-        pillButton: {
-            paddingHorizontal: theme.spacing[2],
-            paddingVertical: theme.spacing[1],
-            borderRadius: tokens.borderRadius.full,
-            minHeight: tokens.touchTargets.minimum / 2,
-        },
-        pillText: {
-            color: theme.colors.primaryForeground,
-            fontWeight: "400",
-        },
-        // Size styles
-        smButton: {
-            paddingHorizontal: theme.spacing[3],
-            paddingVertical: theme.spacing[2],
-            borderRadius: tokens.borderRadius.md,
-            minHeight: tokens.touchTargets.minimum,
-            gap: theme.spacing[1],
-        },
-        smButtonInner: {
-            gap: theme.spacing[1],
-        },
-        smText: {
-            fontSize: 14,
-            lineHeight: 16,
-        },
-        mdButton: {
-            paddingHorizontal: theme.spacing[4],
-            paddingVertical: theme.spacing[3],
-            borderRadius: tokens.borderRadius.md,
-            minHeight: tokens.touchTargets.minimum,
-            gap: theme.spacing[2],
-        },
-        mdButtonInner: {
-            gap: theme.spacing[2],
-        },
-        mdText: {
-            fontSize: 16,
-            lineHeight: 18,
-        },
-        lgButton: {
-            paddingHorizontal: theme.spacing[6],
-            paddingVertical: theme.spacing[4],
-            borderRadius: tokens.borderRadius.md,
-            minHeight: tokens.touchTargets.comfortable,
-            gap: theme.spacing[3],
-        },
-        lgButtonInner: {
-            gap: theme.spacing[3],
-        },
-        lgText: {
-            fontSize: 18,
-            lineHeight: 20,
-        },
-        xlButton: {
-            paddingHorizontal: theme.spacing[8],
-            paddingVertical: theme.spacing[5],
-            borderRadius: tokens.borderRadius.lg,
-            minHeight: tokens.touchTargets.large,
-            gap: theme.spacing[4],
-        },
-        xlButtonInner: {
-            gap: theme.spacing[4],
-        },
-        xlText: {
-            fontSize: 20,
-            lineHeight: 24,
-        },
-    });
-}

package/dist/components/ui/dialog.js

@@ -1,206 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.dialogVariants = exports.DialogFooter = exports.DialogDescription = exports.DialogTitle = exports.Dialog = void 0;
-const tslib_1 = require("tslib");
-const jsx_runtime_1 = require("react/jsx-runtime");
-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 theme_1 = require("../../lib/theme/theme");
-const icons_1 = require("./icons");
-const modal_1 = require("./primitives/modal");
-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)("", {
-    variants: {
-        variant: {
-            default: "default",
-            sheet: "sheet",
-            fullscreen: "fullscreen",
-        },
-        size: {
-            sm: "sm",
-            md: "md",
-            lg: "lg",
-            xl: "xl",
-            full: "full",
-        },
-        position: {
-            center: "center",
-            top: "top",
-            bottom: "bottom",
-            left: "left",
-            right: "right",
-        },
-    },
-    defaultVariants: {
-        variant: "default",
-        size: "md",
-        position: "center",
-    },
-});
-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 { 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();
-        }
-        if (onOpenChange) {
-            onOpenChange(false);
-        }
-    }, [onClose, onOpenChange]);
-    const presentationStyle = react_1.default.useMemo(() => {
-        if (variant === "sheet" && react_native_1.Platform.OS === "ios") {
-            return "pageSheet";
-        }
-        if (variant === "fullscreen") {
-            return "fullScreen";
-        }
-        return react_native_1.Platform.OS === "ios"
-            ? "pageSheet"
-            : "fullScreen";
-    }, [variant]);
-    const animationType = react_1.default.useMemo(() => {
-        if (variant === "sheet") {
-            return "slide";
-        }
-        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: styles.overlay, children: (0, jsx_runtime_1.jsxs)(modal_1.ModalPrimitive.Content, { position: position || "left", size: size || "md", style: [
-                    styles.content,
-                    styles[`${variant}Content`],
-                    styles[`${size}Content`],
-                ], 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";
-exports.DialogTitle = (0, react_1.forwardRef)(({ children, style, ...props }, ref) => {
-    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: [styles.title, style], ...props, children: children }));
-});
-exports.DialogTitle.displayName = "DialogTitle";
-exports.DialogDescription = (0, react_1.forwardRef)(({ children, style, ...props }, ref) => {
-    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: [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 { 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: [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
-        defaultContent: {
-        // Default styles already applied in content
-        },
-        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],
-        },
-        title: {
-            fontSize: 20,
-            fontWeight: "600",
-            color: theme.colors.text,
-            flex: 1,
-            lineHeight: 24,
-        },
-        description: {
-            fontSize: 16,
-            color: theme.colors.textMuted,
-            lineHeight: 22,
-            marginBottom: 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/dropdown.js

@@ -1,172 +0,0 @@
-"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.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_native_1 = require("react-native");
-const atoms_1 = require("../../lib/theme/atoms");
-const text_1 = require("./primitives/text");
-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) {
-    // Use the primitives' context to know if open
-    const { open, onOpenChange } = DropdownMenuPrimitive.useRootContext();
-    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: [atoms_1.bg.black, 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],
-                atoms_1.bg.gray[500],
-            ], children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.BottomSheetView, { style: [atoms_1.px[2]], children: typeof children === "function"
-                    ? children({ pressed: true })
-                    : children }) }) }));
-});
-exports.DropdownMenuSubTrigger = (0, react_1.forwardRef)(({ inset, children, ...props }, ref) => {
-    const { open } = DropdownMenuPrimitive.useSubContext();
-    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],
-            atoms_1.a.fontSize.base,
-            open && atoms_1.a.textColors.primary[700],
-        ]), children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.SubTrigger, { ref: ref, ...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.p[2],
-                    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: atoms_1.colors.gray[200] }) })] }) }) }));
-});
-exports.DropdownMenuSubContent = (0, react_1.forwardRef)((props, ref) => {
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.SubContent, { ref: ref, style: [
-            atoms_1.a.zIndex[50],
-            atoms_1.a.sizes.minWidth[32],
-            atoms_1.a.overflow.hidden,
-            atoms_1.a.radius.all.md,
-            atoms_1.a.borders.width.thin,
-            atoms_1.a.borders.color.gray[600],
-            atoms_1.mt[1],
-            atoms_1.bg.black,
-            atoms_1.p[1],
-            atoms_1.a.shadows.md,
-        ], ...props }));
-});
-exports.DropdownMenuContent = (0, react_1.forwardRef)(({ overlayStyle, portalHost, ...props }, ref) => {
-    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,
-            ], children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Content, { ref: ref, style: [
-                    atoms_1.a.zIndex[50],
-                    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,
-                    atoms_1.a.borders.color.gray[800],
-                    atoms_1.bg.gray[950],
-                    atoms_1.p[2],
-                    atoms_1.a.shadows.md,
-                ], ...props }) }) }));
-});
-exports.DropdownMenuContentWithoutPortal = (0, react_1.forwardRef)(({ overlayStyle, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Overlay, { style: [
-            react_native_1.Platform.OS !== "web" ? react_native_1.StyleSheet.absoluteFill : undefined,
-            overlayStyle,
-        ], children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Content, { ref: ref, style: [
-                { 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,
-                atoms_1.a.borders.color.gray[800],
-                atoms_1.bg.gray[950],
-                atoms_1.p[2],
-                atoms_1.a.shadows.md,
-            ], ...props }) }));
-});
-/// 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;
-    if (isBottomSheet) {
-        return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuBottomSheet, { ref: ref, ...props, children: children }));
-    }
-    return ((0, jsx_runtime_1.jsx)(exports.DropdownMenuContent, { ref: ref, ...props, children: children }));
-});
-exports.DropdownMenuItem = (0, react_1.forwardRef)(({ inset, disabled, style, children, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { ...props, children: (0, jsx_runtime_1.jsx)(text_1.TextContext.Provider, { value: (0, text_1.objectFromObjects)([atoms_1.a.textColors.gray[900], atoms_1.a.fontSize.base]), children: (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
-                    atoms_1.a.layout.flex.row,
-                    atoms_1.a.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 })
-                    : children }) }) }));
-});
-exports.DropdownMenuCheckboxItem = (0, react_1.forwardRef)(({ children, checked, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.CheckboxItem, { ref: ref, checked: checked, closeOnPress: props.closeOnPress || false, ...props, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-                atoms_1.a.layout.flex.row,
-                atoms_1.a.layout.flex.alignCenter,
-                atoms_1.a.radius.all.sm,
-                atoms_1.py[1],
-                atoms_1.pl[2],
-                atoms_1.pr[2],
-                atoms_1.pr[8],
-            ], children: [children, (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [atoms_1.pl[1], atoms_1.layout.position.absolute, atoms_1.right[1]], children: checked ? ((0, jsx_runtime_1.jsx)(lucide_react_native_1.CheckCircle, { size: 14, strokeWidth: 3, color: "white" })) : ((0, jsx_runtime_1.jsx)(lucide_react_native_1.Circle, { size: 14, strokeWidth: 3, color: atoms_1.a.colors.gray[400] })) })] }) }));
-});
-exports.DropdownMenuRadioItem = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.RadioItem, { ref: ref, closeOnPress: props.closeOnPress || false, ...props, children: (0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [
-                atoms_1.a.layout.flex.row,
-                atoms_1.a.layout.flex.alignCenter,
-                atoms_1.a.radius.all.sm,
-                atoms_1.py[1],
-                atoms_1.pl[2],
-                atoms_1.pr[1],
-            ], children: [(0, jsx_runtime_1.jsx)(react_native_1.View, { style: [atoms_1.pl[1], atoms_1.layout.position.absolute, atoms_1.right[1]], children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: (0, jsx_runtime_1.jsx)(lucide_react_native_1.Check, { size: 14, strokeWidth: 3, color: "white" }) }) }), children] }) }));
-});
-exports.DropdownMenuLabel = (0, react_1.forwardRef)(({ inset, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [
-            atoms_1.px[2],
-            atoms_1.py[2],
-            atoms_1.a.textColors.gray[200],
-            atoms_1.a.fontSize.base,
-            inset && atoms_1.gap[2],
-        ], ...props }));
-});
-exports.DropdownMenuSeparator = (0, react_1.forwardRef)((props, ref) => {
-    return (0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [{ height: 0.5 }, atoms_1.bg.gray[800]], ...props });
-});
-function DropdownMenuShortcut(props) {
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
-            atoms_1.ml.auto,
-            atoms_1.a.textColors.gray[500],
-            atoms_1.a.fontSize.sm,
-            atoms_1.a.letterSpacing.widest,
-        ], ...props }));
-}
-exports.DropdownMenuGroup = (0, react_1.forwardRef)((props, ref) => {
-    const { inset, title, children, ...rest } = props;
-    return ((0, jsx_runtime_1.jsxs)(react_native_1.View, { style: [atoms_1.pt[2], inset && atoms_1.gap[2]], ref: ref, ...rest, children: [title && ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [atoms_1.textColors.gray[400], atoms_1.pb[1], atoms_1.pl[2]], children: title })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
-                    atoms_1.bg.gray[900],
-                    react_native_1.Platform.OS === "web" ? [atoms_1.px[2], atoms_1.py[1]] : atoms_1.p[2],
-                    atoms_1.gap.all[1],
-                    { borderRadius: atoms_1.borderRadius.lg },
-                ], children: children })] }));
-});
-exports.DropdownMenuInfo = (0, react_1.forwardRef)(({ description, ...props }, ref) => {
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [atoms_1.textColors.gray[400], atoms_1.pt[1], atoms_1.pl[2], atoms_1.pb[2], atoms_1.fontSize.sm], children: description }));
-});

package/dist/components/ui/icons.js

@@ -1,25 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.createThemedIcon = createThemedIcon;
-const jsx_runtime_1 = require("react/jsx-runtime");
-const theme_1 = require("../../lib/theme");
-// Size mapping
-const sizeMap = {
-    sm: 16,
-    md: 20,
-    lg: 24,
-    xl: 32,
-};
-// HOC to create themed icons
-function createThemedIcon(IconComponent) {
-    return ({ variant = "default", size = "md", color, ...restProps }) => {
-        let theme = (0, theme_1.useTheme)(); // Ensure theme is available
-        // Calculate size
-        const iconSize = typeof size === "number" ? size : sizeMap[size];
-        // Calculate color if not provided using atoms
-        const iconColor = color ||
-            theme.theme.colors[variant] ||
-            theme.theme.colors.secondaryForeground;
-        return ((0, jsx_runtime_1.jsx)(IconComponent, { size: iconSize, color: iconColor, ...restProps }));
-    };
-}

package/dist/components/ui/index.js

@@ -1,34 +0,0 @@
-"use strict";
-Object.defineProperty(exports, "__esModule", { value: true });
-exports.TextPrimitive = exports.ModalPrimitive = exports.InputPrimitive = exports.ButtonPrimitive = void 0;
-const tslib_1 = require("tslib");
-// Export primitive components
-tslib_1.__exportStar(require("./primitives/button"), exports);
-tslib_1.__exportStar(require("./primitives/input"), exports);
-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("./dialog"), exports);
-tslib_1.__exportStar(require("./dropdown"), exports);
-tslib_1.__exportStar(require("./icons"), exports);
-tslib_1.__exportStar(require("./info-box"), exports);
-tslib_1.__exportStar(require("./info-row"), exports);
-tslib_1.__exportStar(require("./input"), exports);
-tslib_1.__exportStar(require("./loader"), exports);
-tslib_1.__exportStar(require("./resizeable"), exports);
-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("./view"), exports);
-// Component collections for easy importing
-var button_1 = require("./primitives/button");
-Object.defineProperty(exports, "ButtonPrimitive", { enumerable: true, get: function () { return button_1.ButtonPrimitive; } });
-var input_1 = require("./primitives/input");
-Object.defineProperty(exports, "InputPrimitive", { enumerable: true, get: function () { return input_1.InputPrimitive; } });
-var modal_1 = require("./primitives/modal");
-Object.defineProperty(exports, "ModalPrimitive", { enumerable: true, get: function () { return modal_1.ModalPrimitive; } });
-var text_1 = require("./primitives/text");
-Object.defineProperty(exports, "TextPrimitive", { enumerable: true, get: function () { return text_1.TextPrimitive; } });
-tslib_1.__exportStar(require("../../lib/theme"), exports);