@streamplace/components 0.7.27 → 0.7.29

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",

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", transparent = true, 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" : "fullScreen", statusBarTranslucent = react_native_1.Platform.OS === "android", ...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, transparent: transparent, 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, ...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/primitives/text.js

@@ -24,6 +24,17 @@ const sizeMap = {
     "3xl": 30,
     "4xl": 36,
 };
+// Size-specific line height mapping (provides better default line heights for each size)
+const sizeLineHeightMap = {
+    xs: 16, // 12px * 1.33 = tight but readable
+    sm: 20, // 14px * 1.43 = good for small text
+    base: 24, // 16px * 1.5 = standard body text
+    lg: 28, // 18px * 1.56 = comfortable for larger text
+    xl: 30, // 20px * 1.5 = balanced
+    "2xl": 32, // 24px * 1.33 = tighter for headings
+    "3xl": 36, // 30px * 1.2 = tight for large headings
+    "4xl": 40, // 36px * 1.11 = very tight for display text
+};
 // Weight mapping
 const weightMap = {
     thin: "100",
@@ -85,12 +96,12 @@ const getVariantStyles = () => {
     }
     else if (typographicPlatform === "android") {
         return {
-            h1: platformTypography.headline1,
-            h2: platformTypography.headline2,
-            h3: platformTypography.headline3,
-            h4: platformTypography.headline4,
-            h5: platformTypography.headline5,
-            h6: platformTypography.headline6,
+            h1: platformTypography.headline4, // 34px instead of 96px
+            h2: platformTypography.headline5, // 24px instead of 60px
+            h3: platformTypography.headline6, // 20px instead of 48px
+            h4: platformTypography.subtitle1, // 16px instead of 34px
+            h5: platformTypography.subtitle2, // 14px instead of 24px
+            h6: platformTypography.subtitle2, // 14px - consistent with h5
             subtitle1: platformTypography.subtitle1,
             subtitle2: platformTypography.subtitle2,
             body1: platformTypography.body1,
@@ -143,9 +154,15 @@ exports.TextRoot = (0, react_1.forwardRef)(({ variant, size, weight, color, alig
         // Apply variant styles (these may override inherited)
         ...(variant && variantStyles[variant]),
         // Apply explicit prop styles (these should override inherited and variant)
-        // Apply size
+        // Apply size (with corresponding line height if not explicitly set)
         ...(size && {
             fontSize: typeof size === "number" ? size : sizeMap[size],
+            // Apply size-specific line height only if leading is not explicitly set
+            ...(leading === undefined && {
+                lineHeight: typeof size === "number"
+                    ? size // Auto line height for numeric sizes
+                    : sizeLineHeightMap[size],
+            }),
         }),
         // Apply weight
         ...(weight && {
@@ -204,6 +221,22 @@ exports.TextRoot = (0, react_1.forwardRef)(({ variant, size, weight, color, alig
     };
     finalStyles.color = finalStyles.color;
     // Create context value for children
+    // Process custom styles to auto-add line height for fontSize
+    const processedStyle = Array.isArray(style)
+        ? style
+        : [style].filter(Boolean);
+    const enhancedStyles = processedStyle.map((styleObj) => {
+        if (styleObj && typeof styleObj === "object" && "fontSize" in styleObj) {
+            const fontSize = styleObj.fontSize;
+            if (typeof fontSize === "number" && !styleObj.lineHeight && !leading) {
+                return {
+                    ...styleObj,
+                    lineHeight: fontSize * 1.2,
+                };
+            }
+        }
+        return styleObj;
+    });
     const contextValue = {
         fontSize: typeof finalStyles.fontSize === "number"
             ? finalStyles.fontSize
@@ -223,7 +256,7 @@ exports.TextRoot = (0, react_1.forwardRef)(({ variant, size, weight, color, alig
         fontStyle: finalStyles.fontStyle,
         opacity: finalStyles.opacity,
     };
-    return ((0, jsx_runtime_1.jsx)(exports.TextContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [finalStyles, style], ...props, children: children }) }));
+    return ((0, jsx_runtime_1.jsx)(exports.TextContext.Provider, { value: contextValue, children: (0, jsx_runtime_1.jsx)(react_native_1.Text, { ref: ref, style: [finalStyles, ...enhancedStyles], ...props, children: children }) }));
 });
 exports.TextRoot.displayName = "TextRoot";
 // Text span primitive (inherits from parent but doesn't create new context)
@@ -248,6 +281,13 @@ function createTextStyle(props) {
     if (props.size) {
         style.fontSize =
             typeof props.size === "number" ? props.size : sizeMap[props.size];
+        // Apply size-specific line height only if leading is not explicitly set
+        if (props.leading === undefined) {
+            style.lineHeight =
+                typeof props.size === "number"
+                    ? props.size * 1.2 // Auto line height for numeric sizes
+                    : sizeLineHeightMap[props.size];
+        }
     }
     if (props.weight) {
         style.fontWeight = weightMap[props.weight];

package/dist/components/ui/text.js

@@ -5,8 +5,9 @@ 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 atoms_1 = require("../../lib/theme/atoms");
+const theme_1 = require("../../lib/theme/theme");
+const tokens_1 = require("../../lib/theme/tokens");
+const zero = tslib_1.__importStar(require("../../ui"));
 const text_1 = require("./primitives/text");
 Object.defineProperty(exports, "TextPrimitive", { enumerable: true, get: function () { return text_1.TextPrimitive; } });
 // Text variants using class-variance-authority pattern
@@ -65,8 +66,7 @@ const textVariants = (0, class_variance_authority_1.cva)("", {
 });
 exports.textVariants = textVariants;
 exports.Text = (0, react_1.forwardRef)(({ variant = undefined, size = undefined, weight = undefined, color = undefined, muted = false, bold = false, italic = false, underline = false, strikethrough = false, uppercase = false, lowercase = false, capitalize = false, center = false, right = false, justify = false, customColor, style, children, ...props }, ref) => {
-    // Create dynamic styles based on atoms
-    const styles = react_1.default.useMemo(() => createStyles(), []);
+    const { zero: zt } = (0, theme_1.useTheme)();
     // Override props based on convenience props
     const finalColor = customColor ? customColor : muted ? "muted" : color;
     const finalTransform = uppercase
@@ -90,8 +90,31 @@ exports.Text = (0, react_1.forwardRef)(({ variant = undefined, size = undefined,
             : justify
                 ? "justify"
                 : "left";
-    // Get variant-specific styles
-    const variantStyle = styles[`${variant}Style`] || {};
+    // Get variant-specific styles using theme.zero
+    const variantStyle = react_1.default.useMemo(() => {
+        switch (variant) {
+            case "h1":
+                return zero.my[6];
+            case "h2":
+            case "h3":
+                return zero.my[4];
+            case "h4":
+            case "h5":
+            case "h6":
+            case "subtitle1":
+                return zero.my[2];
+            case "subtitle2":
+            case "caption":
+            case "overline":
+                return zero.my[1];
+            case "body1":
+                return zero.my[4];
+            case "body2":
+                return zero.my[2];
+            default:
+                return {};
+        }
+    }, [variant, zt]);
     const styleArr = (Array.isArray(style) ? style : [style || undefined]).filter((s) => s !== undefined);
     return ((0, jsx_runtime_1.jsx)(text_1.TextPrimitive.Root, { ref: ref, variant: variant || "body1", size: size || "base", color: finalColor || "default", align: finalAlign, transform: finalTransform, decoration: finalDecoration, italic: italic, style: [variantStyle, ...styleArr], ...props, children: children }));
 });
@@ -108,70 +131,18 @@ exports.Caption.displayName = "Caption";
 exports.Label = (0, react_1.forwardRef)((props, ref) => ((0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, variant: "subtitle1", weight: "medium", ...props })));
 exports.Label.displayName = "Label";
 exports.Code = (0, react_1.forwardRef)(({ style, ...props }, ref) => {
-    const styles = react_1.default.useMemo(() => createStyles(), []);
+    const { zero: zt } = (0, theme_1.useTheme)();
+    const codeStyle = react_1.default.useMemo(() => [
+        {
+            borderRadius: zero.borderRadius.sm,
+            fontFamily: tokens_1.fontFamilies.monoRegular,
+        },
+    ], [zt]);
     // if style is not an array, convert it to an array
     const styleArr = (Array.isArray(style) ? style : [style || undefined]).filter((s) => s !== undefined);
-    return (0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, style: [styles.codeStyle, ...styleArr], ...props });
+    return (0, jsx_runtime_1.jsx)(exports.Text, { ref: ref, style: [...codeStyle, ...styleArr], ...props });
 });
 exports.Code.displayName = "Code";
 // Span component for inline text styling (inherits from parent)
 exports.Span = (0, react_1.forwardRef)(({ children, ...props }, ref) => ((0, jsx_runtime_1.jsx)(text_1.TextPrimitive.Span, { ref: ref, ...props, children: children })));
 exports.Span.displayName = "Span";
-// Create atom-based styles
-function createStyles() {
-    return react_native_1.StyleSheet.create({
-        // Variant-specific styles
-        h1Style: {
-            marginBottom: atoms_1.spacing[4],
-        },
-        h2Style: {
-            marginBottom: atoms_1.spacing[3],
-        },
-        h3Style: {
-            marginBottom: atoms_1.spacing[3],
-        },
-        h4Style: {
-            marginBottom: atoms_1.spacing[2],
-        },
-        h5Style: {
-            marginBottom: atoms_1.spacing[2],
-        },
-        h6Style: {
-            marginBottom: atoms_1.spacing[2],
-        },
-        subtitle1Style: {
-            marginBottom: atoms_1.spacing[2],
-        },
-        subtitle2Style: {
-            marginBottom: atoms_1.spacing[1],
-        },
-        body1Style: {
-            marginBottom: atoms_1.spacing[3],
-        },
-        body2Style: {
-            marginBottom: atoms_1.spacing[2],
-        },
-        captionStyle: {
-            marginBottom: atoms_1.spacing[1],
-        },
-        overlineStyle: {
-            marginBottom: atoms_1.spacing[1],
-            textTransform: "uppercase",
-            letterSpacing: 1,
-        },
-        labelStyle: {
-            marginBottom: atoms_1.spacing[1],
-        },
-        buttonStyle: {
-            textAlign: "center",
-        },
-        codeStyle: {
-            fontFamily: "monospace",
-            backgroundColor: atoms_1.colors["muted"],
-            paddingHorizontal: atoms_1.spacing[1],
-            paddingVertical: 2,
-            borderRadius: atoms_1.borderRadius.sm,
-            fontSize: 14,
-        },
-    });
-}