@streamplace/components 0.7.27 → 0.7.29

package/src/components/ui/dropdown.tsx

@@ -19,9 +19,7 @@ import {
 } from "react-native";
 import {
   a,
-  bg,
   borderRadius,
-  colors,
   fontSize,
   gap,
   layout,
@@ -35,8 +33,8 @@ import {
   px,
   py,
   right,
-  textColors,
 } from "../../lib/theme/atoms";
+import { useTheme } from "../../ui";
 import {
   objectFromObjects,
   TextContext as TextClassContext,
@@ -60,6 +58,7 @@ export const DropdownMenuBottomSheet = forwardRef<
 ) {
   // Use the primitives' context to know if open
   const { open, onOpenChange } = DropdownMenuPrimitive.useRootContext();
+  const { zero: zt } = useTheme();
   const snapPoints = useMemo(() => ["25%", "50%", "80%"], []);
   const sheetRef = useRef<BottomSheet>(null);
 
@@ -81,11 +80,11 @@ export const DropdownMenuBottomSheet = forwardRef<
         )}
         onClose={() => onOpenChange?.(false)}
         style={[overlayStyle]}
-        backgroundStyle={[bg.black, a.radius.all.md, a.shadows.md, p[1]]}
+        backgroundStyle={[zt.bg.popover, a.radius.all.md, a.shadows.md, p[1]]}
         handleIndicatorStyle={[
           a.sizes.width[12],
           a.sizes.height[1],
-          bg.gray[500],
+          zt.bg.mutedForeground,
         ]}
       >
         <BottomSheetView style={[px[2]]}>
@@ -108,6 +107,7 @@ export const DropdownMenuSubTrigger = forwardRef<
   }
 >(({ inset, children, ...props }, ref) => {
   const { open } = DropdownMenuPrimitive.useSubContext();
+  const { icons } = useTheme();
   const Icon =
     Platform.OS === "web" ? ChevronRight : open ? ChevronUp : ChevronDown;
   return (
@@ -130,7 +130,7 @@ export const DropdownMenuSubTrigger = forwardRef<
         >
           {children}
           <View style={[a.layout.position.absolute, a.position.right[1]]}>
-            <Icon size={18} color={colors.gray[200]} />
+            <Icon size={18} color={icons.color.muted} />
           </View>
         </View>
       </DropdownMenuPrimitive.SubTrigger>
@@ -142,6 +142,7 @@ export const DropdownMenuSubContent = forwardRef<
   any,
   DropdownMenuPrimitive.SubContentProps
 >((props, ref) => {
+  const { zero: zt } = useTheme();
   return (
     <DropdownMenuPrimitive.SubContent
       ref={ref}
@@ -151,9 +152,9 @@ export const DropdownMenuSubContent = forwardRef<
         a.overflow.hidden,
         a.radius.all.md,
         a.borders.width.thin,
-        a.borders.color.gray[600],
+        zt.border.default,
         mt[1],
-        bg.black,
+        zt.bg.popover,
         p[1],
         a.shadows.md,
       ]}
@@ -169,6 +170,7 @@ export const DropdownMenuContent = forwardRef<
     portalHost?: string;
   }
 >(({ overlayStyle, portalHost, ...props }, ref) => {
+  const { zero: zt } = useTheme();
   return (
     <DropdownMenuPrimitive.Portal hostName={portalHost}>
       <DropdownMenuPrimitive.Overlay
@@ -187,8 +189,8 @@ export const DropdownMenuContent = forwardRef<
               a.overflow.hidden,
               a.radius.all.md,
               a.borders.width.thin,
-              a.borders.color.gray[800],
-              bg.gray[950],
+              zt.border.default,
+              zt.bg.popover,
               p[2],
               a.shadows.md,
             ] as any
@@ -206,6 +208,7 @@ export const DropdownMenuContentWithoutPortal = forwardRef<
     overlayStyle?: any;
   }
 >(({ overlayStyle, ...props }, ref) => {
+  const { theme } = useTheme();
   return (
     <DropdownMenuPrimitive.Overlay
       style={[
@@ -223,8 +226,8 @@ export const DropdownMenuContentWithoutPortal = forwardRef<
             a.overflow.hidden,
             a.radius.all.md,
             a.borders.width.thin,
-            a.borders.color.gray[800],
-            bg.gray[950],
+            { borderColor: theme.colors.border },
+            { backgroundColor: theme.colors.popover },
             p[2],
             a.shadows.md,
           ] as any
@@ -263,10 +266,14 @@ export const DropdownMenuItem = forwardRef<
   any,
   DropdownMenuPrimitive.ItemProps & { inset?: boolean; disabled?: boolean }
 >(({ inset, disabled, style, children, ...props }, ref) => {
+  const { theme } = useTheme();
   return (
     <Pressable {...props}>
       <TextClassContext.Provider
-        value={objectFromObjects([a.textColors.gray[900], a.fontSize.base])}
+        value={objectFromObjects([
+          { color: theme.colors.popoverForeground },
+          a.fontSize.base,
+        ])}
       >
         <View
           style={[
@@ -294,6 +301,7 @@ export const DropdownMenuCheckboxItem = forwardRef<
     children?: React.ReactNode;
   }
 >(({ children, checked, ...props }, ref) => {
+  const { theme } = useTheme();
   return (
     <DropdownMenuPrimitive.CheckboxItem
       ref={ref}
@@ -315,9 +323,17 @@ export const DropdownMenuCheckboxItem = forwardRef<
         {children}
         <View style={[pl[1], layout.position.absolute, right[1]]}>
           {checked ? (
-            <CheckCircle size={14} strokeWidth={3} color="white" />
+            <CheckCircle
+              size={14}
+              strokeWidth={3}
+              color={theme.colors.foreground}
+            />
           ) : (
-            <Circle size={14} strokeWidth={3} color={a.colors.gray[400]} />
+            <Circle
+              size={14}
+              strokeWidth={3}
+              color={theme.colors.mutedForeground}
+            />
           )}
         </View>
       </View>
@@ -332,6 +348,7 @@ export const DropdownMenuRadioItem = forwardRef<
     children?: React.ReactNode;
   }
 >(({ children, ...props }, ref) => {
+  const { theme } = useTheme();
   return (
     <DropdownMenuPrimitive.RadioItem
       ref={ref}
@@ -350,7 +367,7 @@ export const DropdownMenuRadioItem = forwardRef<
       >
         <View style={[pl[1], layout.position.absolute, right[1]]}>
           <DropdownMenuPrimitive.ItemIndicator>
-            <Check size={14} strokeWidth={3} color="white" />
+            <Check size={14} strokeWidth={3} color={theme.colors.foreground} />
           </DropdownMenuPrimitive.ItemIndicator>
         </View>
         {children}
@@ -363,13 +380,14 @@ export const DropdownMenuLabel = forwardRef<
   any,
   DropdownMenuPrimitive.LabelProps & { inset?: boolean }
 >(({ inset, ...props }, ref) => {
+  const { theme } = useTheme();
   return (
     <Text
       ref={ref}
       style={[
         px[2],
         py[2],
-        a.textColors.gray[200],
+        { color: theme.colors.textMuted },
         a.fontSize.base,
         inset && gap[2],
       ]}
@@ -382,15 +400,23 @@ export const DropdownMenuSeparator = forwardRef<
   any,
   DropdownMenuPrimitive.SeparatorProps
 >((props, ref) => {
-  return <View ref={ref} style={[{ height: 0.5 }, bg.gray[800]]} {...props} />;
+  const { theme } = useTheme();
+  return (
+    <View
+      ref={ref}
+      style={[{ height: 0.5 }, { backgroundColor: theme.colors.border }]}
+      {...props}
+    />
+  );
 });
 
 export function DropdownMenuShortcut(props: any) {
+  const { theme } = useTheme();
   return (
     <Text
       style={[
         ml.auto,
-        a.textColors.gray[500],
+        { color: theme.colors.textMuted },
         a.fontSize.sm,
         a.letterSpacing.widest,
       ]}
@@ -403,15 +429,18 @@ export const DropdownMenuGroup = forwardRef<
   any,
   { inset?: boolean; title?: string; children: ReactNode }
 >((props, ref) => {
+  const { theme } = useTheme();
   const { inset, title, children, ...rest } = props;
   return (
     <View style={[pt[2], inset && gap[2]]} ref={ref} {...rest}>
       {title && (
-        <Text style={[textColors.gray[400], pb[1], pl[2]]}>{title}</Text>
+        <Text style={[{ color: theme.colors.textMuted }, pb[1], pl[2]]}>
+          {title}
+        </Text>
       )}
       <View
         style={[
-          bg.gray[900],
+          { backgroundColor: theme.colors.muted },
           Platform.OS === "web" ? [px[2], py[1]] : p[2],
           gap.all[1],
           { borderRadius: borderRadius.lg },
@@ -425,8 +454,17 @@ export const DropdownMenuGroup = forwardRef<
 
 export const DropdownMenuInfo = forwardRef<any, any>(
   ({ description, ...props }, ref) => {
+    const { theme } = useTheme();
     return (
-      <Text style={[textColors.gray[400], pt[1], pl[2], pb[2], fontSize.sm]}>
+      <Text
+        style={[
+          { color: theme.colors.textMuted },
+          pt[1],
+          pl[2],
+          pb[2],
+          fontSize.sm,
+        ]}
+      >
         {description}
       </Text>
     );

package/src/components/ui/input.tsx

@@ -1,7 +1,8 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import React, { forwardRef } from "react";
-import { Platform, StyleSheet, TouchableWithoutFeedback } from "react-native";
+import { TouchableWithoutFeedback } from "react-native";
 import { useTheme } from "../../lib/theme/theme";
+import * as zero from "../../ui";
 import { InputPrimitive, InputPrimitiveProps } from "./primitives/input";
 
 const inputVariants = cva("", {
@@ -54,26 +55,66 @@ export const Input = forwardRef<any, InputProps>(
     },
     ref,
   ) => {
-    const { theme } = useTheme();
+    const { zero: zt, theme } = useTheme();
     const [isFocused, setIsFocused] = React.useState(false);
     const inputRef = React.useRef<any>(null);
 
-    // Create dynamic styles based on theme
-    const styles = React.useMemo(() => createStyles(theme), [theme]);
-
-    // Get variant and size styles
+    // Get variant and size styles using theme.zero
     const containerStyles = React.useMemo(() => {
-      const variantStyle = styles[`${variant}Container` as keyof typeof styles];
-      const sizeStyle = styles[`${size}Container` as keyof typeof styles];
-      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.useMemo(() => {
-      const variantTextStyle = styles[`${variant}Input` as keyof typeof styles];
-      const sizeTextStyle = styles[`${size}Input` as keyof typeof styles];
-      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.useCallback(
       (event: any) => {
@@ -144,12 +185,7 @@ export const Input = forwardRef<any, InputProps>(
                 error={!!error}
                 onFocus={handleFocus}
                 onBlur={handleBlur}
-                style={[
-                  textStyles,
-                  styles.inputInContainer,
-                  inputStyle,
-                  { outline: "none" },
-                ]}
+                style={[textStyles, inputStyle, { outline: "none" }]}
                 placeholderTextColor={
                   disabled ? theme.colors.textDisabled : theme.colors.textMuted
                 }
@@ -223,128 +259,5 @@ export const Input = forwardRef<any, InputProps>(
 
 Input.displayName = "Input";
 
-// Create theme-aware styles
-function createStyles(theme: any) {
-  return 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,
-      ...Platform.select({
-        ios: {
-          paddingVertical: 0,
-        },
-        android: {
-          paddingVertical: 0,
-          textAlignVertical: "center",
-        },
-      }),
-    },
-
-    mdInput: {
-      fontSize: 16,
-      lineHeight: 20,
-      ...Platform.select({
-        ios: {
-          paddingVertical: 0,
-        },
-        android: {
-          paddingVertical: 0,
-          textAlignVertical: "center",
-        },
-      }),
-    },
-
-    lgInput: {
-      fontSize: 18,
-      lineHeight: 22,
-      ...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,
-    },
-  });
-}
-
 // Export input variants for external use
 export { inputVariants };

package/src/components/ui/primitives/button.tsx

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

package/src/components/ui/primitives/modal.tsx

@@ -33,7 +33,6 @@ export const ModalRoot = forwardRef<View, ModalPrimitiveProps>(
       onRequestClose,
       animationType = "fade",
       presentationStyle = Platform.OS === "ios" ? "pageSheet" : "fullScreen",
-      transparent = true,
       statusBarTranslucent = Platform.OS === "android",
       ...props
     },
@@ -57,7 +56,6 @@ export const ModalRoot = forwardRef<View, ModalPrimitiveProps>(
         onRequestClose={handleRequestClose}
         animationType={animationType}
         presentationStyle={presentationStyle}
-        transparent={transparent}
         statusBarTranslucent={statusBarTranslucent}
         {...props}
       >

package/src/components/ui/primitives/text.tsx

@@ -129,6 +129,18 @@ const sizeMap = {
   "4xl": 36,
 } as const;
 
+// 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
+} as const;
+
 // Weight mapping
 const weightMap = {
   thin: "100",
@@ -199,12 +211,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,
@@ -286,9 +298,16 @@ export const TextRoot = forwardRef<RNText, TextPrimitiveProps>(
 
       // 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
@@ -360,6 +379,23 @@ export const TextRoot = forwardRef<RNText, TextPrimitiveProps>(
     finalStyles.color = finalStyles.color as ColorValue;
 
     // 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: TextContextValue = {
       fontSize:
         typeof finalStyles.fontSize === "number"
@@ -386,7 +422,7 @@ export const TextRoot = forwardRef<RNText, TextPrimitiveProps>(
 
     return (
       <TextContext.Provider value={contextValue}>
-        <RNText ref={ref} style={[finalStyles, style]} {...props}>
+        <RNText ref={ref} style={[finalStyles, ...enhancedStyles]} {...props}>
           {children}
         </RNText>
       </TextContext.Provider>
@@ -438,6 +474,13 @@ export function createTextStyle(
   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) {