@streamplace/components 0.8.6 → 0.8.8

package/src/components/ui/checkbox.tsx

@@ -1,7 +1,7 @@
 import { Check } from "lucide-react-native";
 import { forwardRef } from "react";
 import { StyleSheet, TouchableOpacity, View } from "react-native";
-import { useTheme } from "../../lib/theme/theme";
+import { Theme, useTheme } from "../../lib/theme/theme";
 import { Text } from "./text";
 
 export interface CheckboxProps {
@@ -60,9 +60,23 @@ export const Checkbox = forwardRef<any, CheckboxProps>(
         </View>
         {(label || description) && (
           <View style={styles.content}>
-            {label && <Text style={styles.label}>{label}</Text>}
+            {label && (
+              <Text
+                size={size === "sm" ? "sm" : size === "lg" ? "lg" : "base"}
+                color={disabled ? "muted" : "default"}
+                leading="snug"
+              >
+                {label}
+              </Text>
+            )}
             {description && (
-              <Text style={styles.description}>{description}</Text>
+              <Text
+                size={size === "sm" ? "xs" : size === "lg" ? "base" : "sm"}
+                color={disabled ? "muted" : "muted"}
+                style={{ marginTop: theme.spacing[1] }}
+              >
+                {description}
+              </Text>
             )}
           </View>
         )}
@@ -74,7 +88,7 @@ export const Checkbox = forwardRef<any, CheckboxProps>(
 Checkbox.displayName = "Checkbox";
 
 function createStyles(
-  theme: any,
+  theme: Theme,
   size: string,
   disabled: boolean,
   checked: boolean,
@@ -90,13 +104,13 @@ function createStyles(
       checkboxSize: 20,
       borderRadius: 4,
       padding: theme.spacing[1],
-      gap: theme.spacing[2],
+      gap: theme.spacing[1],
     },
     lg: {
       checkboxSize: 24,
       borderRadius: 6,
-      padding: theme.spacing[2],
-      gap: theme.spacing[3],
+      padding: theme.spacing[1],
+      gap: theme.spacing[2],
     },
   };
 
@@ -116,7 +130,7 @@ function createStyles(
         ? theme.colors.border
         : checked
           ? theme.colors.primary
-          : theme.colors.border,
+          : theme.colors.textMuted,
       borderRadius: currentSize.borderRadius,
       backgroundColor: disabled
         ? theme.colors.muted
@@ -128,20 +142,8 @@ function createStyles(
     },
     content: {
       flex: 1,
-      paddingTop: currentSize.padding * 0.5,
+      paddingTop: currentSize.padding * 0.25,
       paddingLeft: theme.spacing[2],
     },
-    label: {
-      fontSize: size === "sm" ? 14 : size === "lg" ? 18 : 16,
-      fontWeight: "500",
-      color: disabled ? theme.colors.textDisabled : theme.colors.text,
-      lineHeight: size === "sm" ? 18 : size === "lg" ? 22 : 20,
-    },
-    description: {
-      fontSize: size === "sm" ? 12 : size === "lg" ? 16 : 14,
-      color: disabled ? theme.colors.textDisabled : theme.colors.textMuted,
-      marginTop: theme.spacing[1],
-      lineHeight: size === "sm" ? 16 : size === "lg" ? 20 : 18,
-    },
   });
 }

package/src/components/ui/dropdown.tsx

@@ -8,14 +8,16 @@ import {
   ChevronUp,
   Circle,
 } from "lucide-react-native";
-import React, { forwardRef, ReactNode, useMemo, useRef } from "react";
+import React, { forwardRef, ReactNode, useRef } from "react";
 import {
   Platform,
   Pressable,
+  ScrollView,
   StyleSheet,
   useWindowDimensions,
   View,
 } from "react-native";
+import { zero } from "../..";
 import {
   a,
   borderRadius,
@@ -53,22 +55,18 @@ export const DropdownMenuBottomSheet = forwardRef<
     portalHost?: string;
   }
 >(function DropdownMenuBottomSheet(
-  { overlayStyle, portalHost, children },
+  { overlayStyle, portalHost, children, ...rest },
   _ref,
 ) {
   // 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);
 
   return (
     <DropdownMenuPrimitive.Portal hostName={portalHost}>
       <BottomSheet
         ref={sheetRef}
-        // why the heck is this 1-indexed
-        index={open ? 3 : -1}
-        snapPoints={snapPoints}
         enablePanDownToClose
         enableDynamicSizing
         enableContentPanningGesture={false}
@@ -79,7 +77,7 @@ export const DropdownMenuBottomSheet = forwardRef<
           />
         )}
         onClose={() => onOpenChange?.(false)}
-        style={[overlayStyle]}
+        style={[overlayStyle, StyleSheet.flatten(rest.style)]}
         backgroundStyle={[zt.bg.popover, a.radius.all.md, a.shadows.md, p[1]]}
         handleIndicatorStyle={[
           a.sizes.width[12],
@@ -169,7 +167,7 @@ export const DropdownMenuContent = forwardRef<
     overlayStyle?: any;
     portalHost?: string;
   }
->(({ overlayStyle, portalHost, ...props }, ref) => {
+>(({ overlayStyle, portalHost, style, children, ...props }, ref) => {
   const { zero: zt } = useTheme();
   return (
     <DropdownMenuPrimitive.Portal hostName={portalHost}>
@@ -193,10 +191,17 @@ export const DropdownMenuContent = forwardRef<
               zt.bg.popover,
               p[2],
               a.shadows.md,
+              style,
             ] as any
           }
           {...props}
-        />
+        >
+          <ScrollView showsVerticalScrollIndicator={true}>
+            {typeof children === "function"
+              ? children({ pressed: false })
+              : children}
+          </ScrollView>
+        </DropdownMenuPrimitive.Content>
       </DropdownMenuPrimitive.Overlay>
     </DropdownMenuPrimitive.Portal>
   );
@@ -206,37 +211,52 @@ export const DropdownMenuContentWithoutPortal = forwardRef<
   any,
   DropdownMenuPrimitive.ContentProps & {
     overlayStyle?: any;
+    maxHeightPercentage?: number;
   }
->(({ overlayStyle, ...props }, ref) => {
-  const { theme } = useTheme();
-  return (
-    <DropdownMenuPrimitive.Overlay
-      style={[
-        Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined,
-        overlayStyle,
-      ]}
-    >
-      <DropdownMenuPrimitive.Content
-        ref={ref}
-        style={
-          [
-            { zIndex: 999999 },
-            a.sizes.minWidth[32],
-            a.sizes.maxWidth[64],
-            a.overflow.hidden,
-            a.radius.all.md,
-            a.borders.width.thin,
-            { borderColor: theme.colors.border },
-            { backgroundColor: theme.colors.popover },
-            p[2],
-            a.shadows.md,
-          ] as any
-        }
-        {...props}
-      />
-    </DropdownMenuPrimitive.Overlay>
-  );
-});
+>(
+  (
+    { overlayStyle, maxHeightPercentage = 0.8, children, style, ...props },
+    ref,
+  ) => {
+    const { theme } = useTheme();
+    const { height } = useWindowDimensions();
+    const maxHeight = height * maxHeightPercentage;
+
+    return (
+      <DropdownMenuPrimitive.Overlay
+        style={[
+          Platform.OS !== "web" ? StyleSheet.absoluteFill : undefined,
+          overlayStyle,
+        ]}
+      >
+        <DropdownMenuPrimitive.Content
+          ref={ref}
+          style={
+            [
+              { zIndex: 999999 },
+              a.sizes.minWidth[32],
+              a.sizes.maxWidth[64],
+              a.radius.all.md,
+              a.borders.width.thin,
+              { borderColor: theme.colors.border },
+              { backgroundColor: theme.colors.popover },
+              p[2],
+              a.shadows.md,
+              style,
+            ] as any
+          }
+          {...props}
+        >
+          <ScrollView style={{ maxHeight }} showsVerticalScrollIndicator={true}>
+            {typeof children === "function"
+              ? children({ pressed: false })
+              : children}
+          </ScrollView>
+        </DropdownMenuPrimitive.Content>
+      </DropdownMenuPrimitive.Overlay>
+    );
+  },
+);
 
 /// Responsive Dropdown Menu Content. On mobile this will render a *bottom sheet* that is **portaled to the root of the app**.
 /// Prefer passing scoped content in as **otherwise it may crash the app**.
@@ -250,7 +270,7 @@ export const ResponsiveDropdownMenuContent = forwardRef<any, any>(
     if (isBottomSheet) {
       return (
         <DropdownMenuBottomSheet ref={ref} {...props}>
-          {children}
+          <ScrollView style={[zero.pb[12]]}>{children}</ScrollView>
         </DropdownMenuBottomSheet>
       );
     }

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

@@ -277,6 +277,22 @@ export const TextRoot = forwardRef<RNText, TextPrimitiveProps>(
     const inheritedContext =
       inherit && !reset && parentContext ? parentContext : {};
 
+    // Calculate fontSize first for line height calculation
+    let calculatedFontSize = inheritedContext.fontSize;
+
+    // Apply variant font size
+    if (variant && variantStyles[variant]?.fontSize) {
+      calculatedFontSize = variantStyles[variant].fontSize as number;
+    }
+
+    // Apply size-based font size
+    if (size) {
+      calculatedFontSize = typeof size === "number" ? size : sizeMap[size];
+    }
+
+    // Use default if still undefined
+    calculatedFontSize = calculatedFontSize || 16;
+
     // Calculate final styles
     const finalStyles: TextStyle = {
       // Start with inherited values
@@ -344,7 +360,10 @@ export const TextRoot = forwardRef<RNText, TextPrimitiveProps>(
 
       // Apply line height
       ...(leading && {
-        lineHeight: typeof leading === "number" ? leading : leadingMap[leading],
+        lineHeight:
+          typeof leading === "number"
+            ? leading
+            : leadingMap[leading] * calculatedFontSize,
       }),
 
       // Apply letter spacing
@@ -389,7 +408,7 @@ export const TextRoot = forwardRef<RNText, TextPrimitiveProps>(
         if (typeof fontSize === "number" && !styleObj.lineHeight && !leading) {
           return {
             ...styleObj,
-            lineHeight: fontSize * 1.2,
+            lineHeight: fontSize,
           };
         }
       }
@@ -478,7 +497,7 @@ export function createTextStyle(
     if (props.leading === undefined) {
       style.lineHeight =
         typeof props.size === "number"
-          ? props.size * 1.2 // Auto line height for numeric sizes
+          ? props.size
           : sizeLineHeightMap[props.size];
     }
   }
@@ -492,10 +511,11 @@ export function createTextStyle(
   }
 
   if (props.leading) {
+    const fontSize = style.fontSize || 16; // default font size
     style.lineHeight =
       typeof props.leading === "number"
         ? props.leading
-        : leadingMap[props.leading];
+        : leadingMap[props.leading] * fontSize;
   }
 
   if (props.tracking) {

package/src/components/ui/select.tsx

@@ -1,15 +1,20 @@
-import { ChevronDown } from "lucide-react-native";
-import { forwardRef, useState } from "react";
-import {
-  FlatList,
-  Modal,
-  StyleSheet,
-  TouchableOpacity,
-  View,
-} from "react-native";
+import { Check, ChevronDown } from "lucide-react-native";
+import { forwardRef } from "react";
+import { View } from "react-native";
+import { zero } from "../..";
 import { useTheme } from "../../lib/theme/theme";
+import { flex } from "../../ui";
+import {
+  DropdownMenu,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+  ResponsiveDropdownMenuContent,
+} from "./dropdown";
 import { Text } from "./text";
 
+const { layout, px, py, borders, r, gap } = zero;
+
 export interface SelectItem {
   label: string;
   value: string;
@@ -25,7 +30,7 @@ export interface SelectProps {
   style?: any;
 }
 
-export const Select = forwardRef<any, SelectProps>(
+export const Select = forwardRef<View, SelectProps>(
   (
     {
       value,
@@ -38,138 +43,105 @@ export const Select = forwardRef<any, SelectProps>(
     ref,
   ) => {
     const { theme } = useTheme();
-    const [isOpen, setIsOpen] = useState(false);
 
     const selectedItem = items.find((item) => item.value === value);
 
-    const handleSelect = (itemValue: string) => {
-      onValueChange(itemValue);
-      setIsOpen(false);
-    };
-
-    const styles = createStyles(theme, disabled);
-
     return (
-      <>
-        <TouchableOpacity
-          ref={ref}
-          style={[styles.container, style]}
-          onPress={() => !disabled && setIsOpen(true)}
-          disabled={disabled}
-        >
-          <Text style={styles.value}>{selectedItem?.label || placeholder}</Text>
-          <ChevronDown size={16} color={theme.colors.textMuted} />
-        </TouchableOpacity>
+      <DropdownMenu>
+        <DropdownMenuTrigger disabled={disabled}>
+          <View
+            ref={ref}
+            style={[
+              {
+                width: "100%",
+                paddingHorizontal: theme.spacing[3],
+                paddingVertical: theme.spacing[3],
+                borderWidth: 1,
+                borderColor: theme.colors.border,
+                borderRadius: theme.borderRadius.md,
+                backgroundColor: disabled
+                  ? theme.colors.muted
+                  : theme.colors.card,
+                minHeight: theme.touchTargets.minimum,
+                opacity: disabled ? 0.5 : 1,
+              },
+              style,
+            ]}
+          >
+            <View
+              style={{
+                flexDirection: "row",
+                alignItems: "center",
+                justifyContent: "space-between",
+                width: "100%",
+                gap: 8,
+              }}
+            >
+              <Text
+                style={{
+                  fontSize: 16,
+                  color: disabled
+                    ? theme.colors.textDisabled
+                    : theme.colors.text,
+                  flex: 1,
+                }}
+              >
+                {selectedItem?.label || placeholder}
+              </Text>
+              <ChevronDown size={16} color={theme.colors.textMuted} />
+            </View>
+          </View>
+        </DropdownMenuTrigger>
 
-        <Modal
-          visible={isOpen}
-          transparent
-          animationType="fade"
-          onRequestClose={() => setIsOpen(false)}
+        <ResponsiveDropdownMenuContent
+          align="start"
+          style={[
+            {
+              maxHeight: 400,
+            },
+          ]}
         >
-          <TouchableOpacity
-            style={styles.overlay}
-            activeOpacity={1}
-            onPress={() => setIsOpen(false)}
-          >
-            <View style={styles.dropdown}>
-              <FlatList
-                data={items}
-                keyExtractor={(item) => item.value}
-                renderItem={({ item }) => (
-                  <TouchableOpacity
-                    style={[
-                      styles.item,
-                      item.value === value && styles.selectedItem,
-                    ]}
-                    onPress={() => handleSelect(item.value)}
-                  >
+          {items.map((item, index) => (
+            <View key={item.value}>
+              <DropdownMenuItem onPress={() => onValueChange(item.value)}>
+                <View
+                  style={{
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                    width: "100%",
+                    gap: 8,
+                  }}
+                >
+                  <View style={[gap.all[1], py[1], flex.values[1]]}>
                     <Text
-                      style={[
-                        styles.itemText,
-                        item.value === value ? styles.selectedItemText : {},
-                      ]}
+                      style={{
+                        fontWeight: item.value === value ? "500" : "400",
+                      }}
+                      color={item.value === value ? "primary" : "default"}
                     >
                       {item.label}
                     </Text>
                     {item.description && (
-                      <Text style={styles.itemDescription}>
+                      <Text size="sm" color="muted">
                         {item.description}
                       </Text>
                     )}
-                  </TouchableOpacity>
-                )}
-                style={styles.list}
-              />
+                  </View>
+                  {item.value === value ? (
+                    <Check size={16} color={theme.colors.primary} />
+                  ) : (
+                    <View style={{ width: 16 }} />
+                  )}
+                </View>
+              </DropdownMenuItem>
+              {index < items.length - 1 && <DropdownMenuSeparator />}
             </View>
-          </TouchableOpacity>
-        </Modal>
-      </>
+          ))}
+        </ResponsiveDropdownMenuContent>
+      </DropdownMenu>
     );
   },
 );
 
 Select.displayName = "Select";
-
-function createStyles(theme: any, disabled: boolean) {
-  return StyleSheet.create({
-    container: {
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-      paddingHorizontal: theme.spacing[3],
-      paddingVertical: theme.spacing[3],
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      borderRadius: theme.borderRadius.md,
-      backgroundColor: disabled ? theme.colors.muted : theme.colors.card,
-      minHeight: theme.touchTargets.minimum,
-    },
-    value: {
-      fontSize: 16,
-      color: disabled ? theme.colors.textDisabled : theme.colors.text,
-      flex: 1,
-    },
-    overlay: {
-      flex: 1,
-      backgroundColor: "rgba(0, 0, 0, 0.5)",
-      justifyContent: "center",
-      alignItems: "center",
-    },
-    dropdown: {
-      backgroundColor: theme.colors.background,
-      borderRadius: theme.borderRadius.md,
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-      maxHeight: 300,
-      width: "90%",
-      maxWidth: 400,
-      ...theme.shadows.lg,
-    },
-    list: {
-      maxHeight: 300,
-    },
-    item: {
-      paddingHorizontal: theme.spacing[4],
-      paddingVertical: theme.spacing[3],
-      borderBottomWidth: 1,
-      borderBottomColor: theme.colors.border,
-    },
-    selectedItem: {
-      backgroundColor: theme.colors.primary,
-    },
-    itemText: {
-      fontSize: 16,
-      color: theme.colors.text,
-    },
-    selectedItemText: {
-      color: theme.colors.primaryForeground,
-      fontWeight: "500",
-    },
-    itemDescription: {
-      fontSize: 14,
-      color: theme.colors.textMuted,
-      marginTop: theme.spacing[1],
-    },
-  });
-}