@streamplace/components 0.7.26 → 0.7.29

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) {

package/src/components/ui/text.tsx

@@ -1,7 +1,8 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import React, { forwardRef } from "react";
-import { StyleSheet } from "react-native";
-import { colors, borderRadius as radius, spacing } from "../../lib/theme/atoms";
+import { useTheme } from "../../lib/theme/theme";
+import { fontFamilies } from "../../lib/theme/tokens";
+import * as zero from "../../ui";
 import { TextPrimitive, TextPrimitiveProps } from "./primitives/text";
 
 // Text variants using class-variance-authority pattern
@@ -103,8 +104,7 @@ export const Text = forwardRef<any, TextProps>(
     },
     ref,
   ) => {
-    // Create dynamic styles based on atoms
-    const styles = React.useMemo(() => createStyles(), []);
+    const { zero: zt } = useTheme();
 
     // Override props based on convenience props
     const finalColor = customColor ? customColor : muted ? "muted" : color;
@@ -134,8 +134,31 @@ export const Text = forwardRef<any, TextProps>(
           ? "justify"
           : "left";
 
-    // Get variant-specific styles
-    const variantStyle = styles[`${variant}Style` as keyof typeof styles] || {};
+    // Get variant-specific styles using theme.zero
+    const variantStyle = React.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]
@@ -209,13 +232,24 @@ export const Label = forwardRef<any, Omit<TextProps, "variant">>(
 Label.displayName = "Label";
 
 export const Code = forwardRef<any, TextProps>(({ style, ...props }, ref) => {
-  const styles = React.useMemo(() => createStyles(), []);
+  const { zero: zt } = useTheme();
+
+  const codeStyle = React.useMemo(
+    () => [
+      {
+        borderRadius: zero.borderRadius.sm,
+        fontFamily: 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 <Text ref={ref} style={[styles.codeStyle, ...styleArr]} {...props} />;
+  return <Text ref={ref} style={[...codeStyle, ...styleArr]} {...props} />;
 });
 
 Code.displayName = "Code";
@@ -264,65 +298,6 @@ export const Span = forwardRef<
 
 Span.displayName = "Span";
 
-// Create atom-based styles
-function createStyles() {
-  return StyleSheet.create({
-    // Variant-specific styles
-    h1Style: {
-      marginBottom: spacing[4],
-    },
-    h2Style: {
-      marginBottom: spacing[3],
-    },
-    h3Style: {
-      marginBottom: spacing[3],
-    },
-    h4Style: {
-      marginBottom: spacing[2],
-    },
-    h5Style: {
-      marginBottom: spacing[2],
-    },
-    h6Style: {
-      marginBottom: spacing[2],
-    },
-    subtitle1Style: {
-      marginBottom: spacing[2],
-    },
-    subtitle2Style: {
-      marginBottom: spacing[1],
-    },
-    body1Style: {
-      marginBottom: spacing[3],
-    },
-    body2Style: {
-      marginBottom: spacing[2],
-    },
-    captionStyle: {
-      marginBottom: spacing[1],
-    },
-    overlineStyle: {
-      marginBottom: spacing[1],
-      textTransform: "uppercase",
-      letterSpacing: 1,
-    },
-    labelStyle: {
-      marginBottom: spacing[1],
-    },
-    buttonStyle: {
-      textAlign: "center",
-    },
-    codeStyle: {
-      fontFamily: "monospace",
-      backgroundColor: colors["muted"],
-      paddingHorizontal: spacing[1],
-      paddingVertical: 2,
-      borderRadius: radius.sm,
-      fontSize: 14,
-    },
-  });
-}
-
 // Export text variants for external use
 export { textVariants };