@streamplace/components 0.7.26 → 0.7.29

package/dist/components/ui/dialog.js

@@ -8,6 +8,7 @@ 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 zero = tslib_1.__importStar(require("../../ui"));
 const icons_1 = require("./icons");
 const modal_1 = require("./primitives/modal");
 const ThemedX = (0, icons_1.createThemedIcon)(lucide_react_native_1.X);
@@ -42,9 +43,66 @@ 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 { theme } = (0, theme_1.useTheme)();
-    // Create dynamic styles based on theme
-    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
+    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%",
+                            width: "100%",
+                            maxWidth: "100%",
+                        },
+                    ];
+                case "fullscreen":
+                    return [
+                        {
+                            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]);
     const handleClose = react_1.default.useCallback(() => {
         if (onClose) {
             onClose();
@@ -70,137 +128,46 @@ 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: 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] })] }) }) }));
+    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] })] }) }) }));
 });
 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]);
+    const { zero: zt } = (0, theme_1.useTheme)();
     if (!children)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [styles.title, style], ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [zt.text.xl, { fontWeight: "600", flex: 1 }, 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]);
+    const { zero: zt } = (0, theme_1.useTheme)();
     if (!children)
         return null;
-    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [styles.description, style], ...props, children: children }));
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [zt.text.muted, zero.mb[4], 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]);
+    const { zero: zt } = (0, theme_1.useTheme)();
     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 }));
+    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 }));
 });
 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

@@ -10,6 +10,7 @@ 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 ui_1 = require("../../ui");
 const text_1 = require("./primitives/text");
 exports.DropdownMenu = DropdownMenuPrimitive.Root;
 exports.DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -19,20 +20,22 @@ 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 { zero: zt } = (0, ui_1.useTheme)();
     const snapPoints = (0, react_1.useMemo)(() => ["25%", "50%", "80%"], []);
     const sheetRef = (0, react_1.useRef)(null);
     return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: (0, jsx_runtime_1.jsx)(bottom_sheet_1.default, { ref: sheetRef, 
             // why the heck is this 1-indexed
-            index: open ? 3 : -1, snapPoints: snapPoints, enablePanDownToClose: true, enableDynamicSizing: true, enableContentPanningGesture: false, backdropComponent: ({ style }) => ((0, jsx_runtime_1.jsx)(react_native_1.Pressable, { style: [style, react_native_1.StyleSheet.absoluteFill], onPress: () => onOpenChange?.(false) })), onClose: () => onOpenChange?.(false), style: [overlayStyle], backgroundStyle: [atoms_1.bg.black, atoms_1.a.radius.all.md, atoms_1.a.shadows.md, atoms_1.p[1]], handleIndicatorStyle: [
+            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],
-                atoms_1.bg.gray[500],
+                zt.bg.mutedForeground,
             ], 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 { 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],
@@ -44,23 +47,25 @@ exports.DropdownMenuSubTrigger = (0, react_1.forwardRef)(({ inset, children, ...
                     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] }) })] }) }) }));
+                ], 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) => {
+    const { zero: zt } = (0, ui_1.useTheme)();
     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],
+            zt.border.default,
             atoms_1.mt[1],
-            atoms_1.bg.black,
+            zt.bg.popover,
             atoms_1.p[1],
             atoms_1.a.shadows.md,
         ], ...props }));
 });
 exports.DropdownMenuContent = (0, react_1.forwardRef)(({ overlayStyle, portalHost, ...props }, ref) => {
+    const { zero: zt } = (0, ui_1.useTheme)();
     return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Portal, { hostName: portalHost, children: (0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Overlay, { style: [
                 react_native_1.Platform.OS !== "web" ? react_native_1.StyleSheet.absoluteFill : undefined,
                 overlayStyle,
@@ -71,13 +76,14 @@ exports.DropdownMenuContent = (0, react_1.forwardRef)(({ overlayStyle, portalHos
                     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],
+                    zt.border.default,
+                    zt.bg.popover,
                     atoms_1.p[2],
                     atoms_1.a.shadows.md,
                 ], ...props }) }) }));
 });
 exports.DropdownMenuContentWithoutPortal = (0, react_1.forwardRef)(({ overlayStyle, ...props }, ref) => {
+    const { theme } = (0, ui_1.useTheme)();
     return ((0, jsx_runtime_1.jsx)(DropdownMenuPrimitive.Overlay, { style: [
             react_native_1.Platform.OS !== "web" ? react_native_1.StyleSheet.absoluteFill : undefined,
             overlayStyle,
@@ -88,8 +94,8 @@ exports.DropdownMenuContentWithoutPortal = (0, react_1.forwardRef)(({ overlaySty
                 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],
+                { borderColor: theme.colors.border },
+                { backgroundColor: theme.colors.popover },
                 atoms_1.p[2],
                 atoms_1.a.shadows.md,
             ], ...props }) }));
@@ -106,7 +112,11 @@ exports.ResponsiveDropdownMenuContent = (0, react_1.forwardRef)(({ 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: [
+    const { theme } = (0, ui_1.useTheme)();
+    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)([
+                { color: theme.colors.popoverForeground },
+                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,
@@ -118,6 +128,7 @@ exports.DropdownMenuItem = (0, react_1.forwardRef)(({ inset, disabled, style, ch
                     : children }) }) }));
 });
 exports.DropdownMenuCheckboxItem = (0, react_1.forwardRef)(({ children, checked, ...props }, ref) => {
+    const { theme } = (0, ui_1.useTheme)();
     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,
@@ -126,9 +137,10 @@ exports.DropdownMenuCheckboxItem = (0, react_1.forwardRef)(({ children, checked,
                 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] })) })] }) }));
+            ], 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: theme.colors.foreground })) : ((0, jsx_runtime_1.jsx)(lucide_react_native_1.Circle, { size: 14, strokeWidth: 3, color: theme.colors.mutedForeground })) })] }) }));
 });
 exports.DropdownMenuRadioItem = (0, react_1.forwardRef)(({ children, ...props }, ref) => {
+    const { theme } = (0, ui_1.useTheme)();
     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,
@@ -136,37 +148,48 @@ exports.DropdownMenuRadioItem = (0, react_1.forwardRef)(({ children, ...props },
                 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] }) }));
+            ], 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: theme.colors.foreground }) }) }), children] }) }));
 });
 exports.DropdownMenuLabel = (0, react_1.forwardRef)(({ inset, ...props }, ref) => {
+    const { theme } = (0, ui_1.useTheme)();
     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],
+            { color: theme.colors.textMuted },
             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 });
+    const { theme } = (0, ui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.View, { ref: ref, style: [{ height: 0.5 }, { backgroundColor: theme.colors.border }], ...props }));
 });
 function DropdownMenuShortcut(props) {
+    const { theme } = (0, ui_1.useTheme)();
     return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
             atoms_1.ml.auto,
-            atoms_1.a.textColors.gray[500],
+            { color: theme.colors.textMuted },
             atoms_1.a.fontSize.sm,
             atoms_1.a.letterSpacing.widest,
         ], ...props }));
 }
 exports.DropdownMenuGroup = (0, react_1.forwardRef)((props, ref) => {
+    const { theme } = (0, ui_1.useTheme)();
     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],
+    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: [{ color: theme.colors.textMuted }, atoms_1.pb[1], atoms_1.pl[2]], children: title })), (0, jsx_runtime_1.jsx)(react_native_1.View, { style: [
+                    { backgroundColor: theme.colors.muted },
                     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 }));
+    const { theme } = (0, ui_1.useTheme)();
+    return ((0, jsx_runtime_1.jsx)(react_native_1.Text, { style: [
+            { color: theme.colors.textMuted },
+            atoms_1.pt[1],
+            atoms_1.pl[2],
+            atoms_1.pb[2],
+            atoms_1.fontSize.sm,
+        ], children: description }));
 });

package/dist/components/ui/input.js

@@ -7,6 +7,7 @@ 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 zero = tslib_1.__importStar(require("../../ui"));
 const input_1 = require("./primitives/input");
 const inputVariants = (0, class_variance_authority_1.cva)("", {
     variants: {
@@ -28,23 +29,61 @@ const inputVariants = (0, class_variance_authority_1.cva)("", {
 });
 exports.inputVariants = inputVariants;
 exports.Input = (0, react_1.forwardRef)(({ variant = "default", size = "md", label, description, error, required = false, leftAddon, rightAddon, disabled = false, containerStyle, inputStyle, ...props }, ref) => {
-    const { theme } = (0, theme_1.useTheme)();
+    const { zero: zt, theme } = (0, theme_1.useTheme)();
     const [isFocused, setIsFocused] = react_1.default.useState(false);
     const inputRef = react_1.default.useRef(null);
-    // Create dynamic styles based on theme
-    const styles = react_1.default.useMemo(() => createStyles(theme), [theme]);
-    // Get variant and size styles
+    // Get variant and size styles using theme.zero
     const containerStyles = react_1.default.useMemo(() => {
-        const variantStyle = styles[`${variant}Container`];
-        const sizeStyle = styles[`${size}Container`];
-        const focusStyle = isFocused ? styles.focusedContainer : null;
-        return [variantStyle, sizeStyle, focusStyle];
-    }, [variant, size, styles, isFocused]);
+        const variantStyle = (() => {
+            switch (variant) {
+                case "filled":
+                    return [zt.bg.muted];
+                case "underlined":
+                    return [
+                        zt.bg.transparent,
+                        zt.border.bottom.default,
+                        { borderRadius: 0, paddingHorizontal: 0 },
+                    ];
+                default:
+                    return [zt.bg.background, zt.border.default];
+            }
+        })();
+        const sizeStyle = (() => {
+            switch (size) {
+                case "sm":
+                    return [
+                        zero.px[3],
+                        zero.py[2],
+                        { borderRadius: zero.borderRadius.md },
+                    ];
+                case "lg":
+                    return [
+                        zero.px[4],
+                        zero.py[3],
+                        { borderRadius: zero.borderRadius.md },
+                    ];
+                default:
+                    return [
+                        zero.px[3],
+                        zero.py[2],
+                        { borderRadius: zero.borderRadius.md },
+                    ];
+            }
+        })();
+        const focusStyle = isFocused ? zt.border.primary : null;
+        return [variantStyle, sizeStyle, focusStyle].filter(Boolean);
+    }, [variant, size, zt, isFocused]);
     const textStyles = react_1.default.useMemo(() => {
-        const variantTextStyle = styles[`${variant}Input`];
-        const sizeTextStyle = styles[`${size}Input`];
-        return [variantTextStyle, sizeTextStyle];
-    }, [variant, size, styles]);
+        const baseTextStyle = [zt.text.foreground, zt.bg.transparent];
+        switch (size) {
+            case "sm":
+                return [...baseTextStyle, zt.text.sm];
+            case "lg":
+                return [...baseTextStyle, zt.text.lg];
+            default:
+                return [...baseTextStyle, zt.text.md];
+        }
+    }, [size, zt]);
     const handleFocus = react_1.default.useCallback((event) => {
         setIsFocused(true);
         if (props.onFocus) {
@@ -74,12 +113,7 @@ exports.Input = (0, react_1.forwardRef)(({ variant = "default", size = "md", lab
                                             ref.current = node;
                                         }
                                     }
-                                }, disabled: disabled, error: !!error, onFocus: handleFocus, onBlur: handleBlur, style: [
-                                    textStyles,
-                                    styles.inputInContainer,
-                                    inputStyle,
-                                    { outline: "none" },
-                                ], placeholderTextColor: disabled ? theme.colors.textDisabled : theme.colors.textMuted, ...props }), rightAddon && ((0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Addon, { position: "right", children: rightAddon }))] }) }), description && !error && ((0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Description, { disabled: disabled, children: description })), (0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Error, { visible: !!error, children: error })] }));
+                                }, disabled: disabled, error: !!error, onFocus: handleFocus, onBlur: handleBlur, style: [textStyles, inputStyle, { outline: "none" }], placeholderTextColor: disabled ? theme.colors.textDisabled : theme.colors.textMuted, ...props }), rightAddon && ((0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Addon, { position: "right", children: rightAddon }))] }) }), description && !error && ((0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Description, { disabled: disabled, children: description })), (0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Error, { visible: !!error, children: error })] }));
     }
     return ((0, jsx_runtime_1.jsxs)(input_1.InputPrimitive.Group, { children: [label && ((0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Label, { required: required, disabled: disabled, error: !!error, children: label })), (0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Root, { ref: (node) => {
                     inputRef.current = node;
@@ -94,112 +128,3 @@ exports.Input = (0, react_1.forwardRef)(({ variant = "default", size = "md", lab
                 }, disabled: disabled, error: !!error, onFocus: handleFocus, onBlur: handleBlur, style: [containerStyles, textStyles, containerStyle, inputStyle], placeholderTextColor: disabled ? theme.colors.textDisabled : theme.colors.textMuted, ...props }), description && !error && ((0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Description, { disabled: disabled, children: description })), (0, jsx_runtime_1.jsx)(input_1.InputPrimitive.Error, { visible: !!error, children: error })] }));
 });
 exports.Input.displayName = "Input";
-// Create theme-aware styles
-function createStyles(theme) {
-    return react_native_1.StyleSheet.create({
-        // Variant styles for containers
-        defaultContainer: {
-            backgroundColor: theme.colors.background,
-            borderWidth: 1,
-            borderColor: theme.colors.border,
-            borderRadius: theme.borderRadius.md,
-        },
-        filledContainer: {
-            backgroundColor: theme.colors.muted,
-            borderWidth: 0,
-            borderRadius: theme.borderRadius.md,
-        },
-        underlinedContainer: {
-            backgroundColor: "transparent",
-            borderWidth: 0,
-            borderBottomWidth: 1,
-            borderBottomColor: theme.colors.border,
-            borderRadius: 0,
-            paddingHorizontal: 0,
-        },
-        // Variant styles for inputs
-        defaultInput: {
-            color: theme.colors.text,
-            backgroundColor: "transparent",
-        },
-        filledInput: {
-            color: theme.colors.text,
-            backgroundColor: "transparent",
-        },
-        underlinedInput: {
-            color: theme.colors.text,
-            backgroundColor: "transparent",
-        },
-        // Size styles for containers
-        smContainer: {
-            paddingHorizontal: theme.spacing[3],
-            paddingVertical: theme.spacing[2],
-            minHeight: theme.touchTargets.minimum - 8,
-        },
-        mdContainer: {
-            paddingHorizontal: theme.spacing[3],
-            paddingVertical: theme.spacing[3],
-            minHeight: theme.touchTargets.minimum,
-        },
-        lgContainer: {
-            paddingHorizontal: theme.spacing[4],
-            paddingVertical: theme.spacing[4],
-            minHeight: theme.touchTargets.comfortable,
-        },
-        // Size styles for inputs
-        smInput: {
-            fontSize: 14,
-            lineHeight: 18,
-            ...react_native_1.Platform.select({
-                ios: {
-                    paddingVertical: 0,
-                },
-                android: {
-                    paddingVertical: 0,
-                    textAlignVertical: "center",
-                },
-            }),
-        },
-        mdInput: {
-            fontSize: 16,
-            lineHeight: 20,
-            ...react_native_1.Platform.select({
-                ios: {
-                    paddingVertical: 0,
-                },
-                android: {
-                    paddingVertical: 0,
-                    textAlignVertical: "center",
-                },
-            }),
-        },
-        lgInput: {
-            fontSize: 18,
-            lineHeight: 22,
-            ...react_native_1.Platform.select({
-                ios: {
-                    paddingVertical: 0,
-                },
-                android: {
-                    paddingVertical: 0,
-                    textAlignVertical: "center",
-                },
-            }),
-        },
-        // Special style for inputs inside containers
-        inputInContainer: {
-            flex: 1,
-            paddingHorizontal: 0,
-            paddingVertical: 0,
-            borderWidth: 0,
-            backgroundColor: "transparent",
-            minHeight: "auto",
-            borderRadius: 0,
-        },
-        // Focus styles
-        focusedContainer: {
-            borderColor: theme.colors.primary,
-            borderWidth: 1,
-        },
-    });
-}

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

@@ -79,7 +79,6 @@ const primitiveStyles = react_native_1.StyleSheet.create({
         alignItems: "center",
         justifyContent: "center",
         minHeight: 44, // iOS minimum touch target
-        minWidth: 44,
     },
     disabled: {
         opacity: 0.5,
@@ -88,7 +87,6 @@ const primitiveStyles = react_native_1.StyleSheet.create({
         flexDirection: "row",
         alignItems: "center",
         justifyContent: "center",
-        flex: 1,
     },
     text: {
         textAlign: "center",