@streamplace/components 0.7.27 → 0.7.29

package/src/components/ui/button.tsx

@@ -1,8 +1,8 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import React, { forwardRef, useMemo } from "react";
-import { ActivityIndicator, StyleSheet } from "react-native";
+import { ActivityIndicator } from "react-native";
 import { useTheme } from "../../lib/theme/theme";
-import * as tokens from "../../lib/theme/tokens";
+import * as zero from "../../ui";
 import { ButtonPrimitive, ButtonPrimitiveProps } from "./primitives/button";
 import { TextPrimitive } from "./primitives/text";
 
@@ -57,44 +57,117 @@ export const Button = forwardRef<any, ButtonProps>(
     },
     ref,
   ) => {
-    const { theme } = useTheme();
+    const { zero: zt, icons } = useTheme();
 
-    // Create dynamic styles based on theme
-    const styles = useMemo(() => createStyles(theme), [theme]);
-
-    // Get variant styles
+    // Get variant styles using theme.zero
     const buttonStyle = useMemo(() => {
-      const variantStyle = styles[`${variant}Button` as keyof typeof styles];
-      const sizeStyle = styles[`${size}Button` as keyof typeof styles];
-      return [variantStyle, sizeStyle];
-    }, [variant, size, styles]);
+      switch (variant) {
+        case "primary":
+          return zt.button.primary;
+        case "secondary":
+          return zt.button.secondary;
+        case "outline":
+          return zt.button.outline;
+        case "ghost":
+          return zt.button.ghost;
+        case "destructive":
+          return [zt.bg.destructive, zero.shadows.sm];
+        case "success":
+          return [zt.bg.success, zero.shadows.sm];
+        default:
+          return zt.button.primary;
+      }
+    }, [variant, zt]);
 
-    // Get inner styles for button content
-    const buttonInnerStyle = useMemo(() => {
-      const sizeInnerStyle =
-        styles[`${size}ButtonInner` as keyof typeof styles];
-      return sizeInnerStyle;
-    }, [size, styles]);
+    // Get text styles using theme.zero
+    const textStyle = useMemo(() => {
+      switch (variant) {
+        case "primary":
+          return [zt.text.primaryForeground, { fontWeight: "600" }];
+        case "secondary":
+          return [zt.text.secondaryForeground, { fontWeight: "500" }];
+        case "outline":
+        case "ghost":
+          return [zt.text.foreground, { fontWeight: "500" }];
+        case "destructive":
+          return [zt.text.destructiveForeground, { fontWeight: "600" }];
+        case "success":
+          return [zt.text.successForeground, { fontWeight: "600" }];
+        default:
+          return [zt.text.primaryForeground, { fontWeight: "600" }];
+      }
+    }, [variant, zt]);
 
-    const textStyle = React.useMemo(() => {
-      const variantTextStyle = styles[`${variant}Text` as keyof typeof styles];
-      const sizeTextStyle = styles[`${size}Text` as keyof typeof styles];
-      return [variantTextStyle, sizeTextStyle];
-    }, [variant, size, styles]);
+    // Size styles using theme.zero
+    const sizeStyles = useMemo(() => {
+      switch (size) {
+        case "sm":
+          return {
+            button: [
+              zero.px[3],
+              zero.py[2],
+              { borderRadius: zero.borderRadius.md },
+            ],
+            inner: { gap: 4 },
+            text: zt.text.sm,
+          };
+        case "lg":
+          return {
+            button: [
+              zero.px[6],
+              zero.py[3],
+              { borderRadius: zero.borderRadius.md },
+            ],
+            inner: { gap: 8 },
+            text: zt.text.lg,
+          };
+        case "xl":
+          return {
+            button: [
+              zero.px[8],
+              zero.py[4],
+              { borderRadius: zero.borderRadius.lg },
+            ],
+            inner: { gap: 12 },
+            text: zt.text.xl,
+          };
+        case "pill":
+          return {
+            button: [
+              zero.px[4],
+              zero.py[2],
+              { borderRadius: zero.borderRadius.full },
+            ],
+            inner: { gap: 4 },
+            text: zt.text.sm,
+          };
+        case "md":
+        default:
+          return {
+            button: [
+              zero.px[4],
+              zero.py[2],
+              { borderRadius: zero.borderRadius.md },
+            ],
+            inner: { gap: 6 },
+            text: zt.text.md,
+          };
+      }
+    }, [size, zt]);
 
     const iconSize = React.useMemo(() => {
       switch (size) {
         case "sm":
-          return 16;
+          return icons.size.sm;
         case "lg":
-          return 20;
+          return icons.size.lg;
         case "xl":
-          return 24;
+          return icons.size.xl;
         case "md":
         default:
-          return 18;
+          return icons.size.md;
       }
-    }, [size]);
+    }, [size, icons]);
 
     const spinnerSize = useMemo(() => {
       switch (size) {
@@ -113,24 +186,26 @@ export const Button = forwardRef<any, ButtonProps>(
       switch (variant) {
         case "outline":
         case "ghost":
-          return theme.colors.primary;
+          return icons.color.primary;
         case "secondary":
-          return theme.colors.secondaryForeground;
+          return icons.color.secondary;
         case "destructive":
-          return theme.colors.destructiveForeground;
+          return icons.color.destructive;
+        case "success":
+          return icons.color.success;
         default:
-          return theme.colors.primaryForeground;
+          return icons.color.default;
       }
-    }, [variant, theme.colors]);
+    }, [variant, icons]);
 
     return (
       <ButtonPrimitive.Root
         ref={ref}
         disabled={disabled || loading}
-        style={[buttonStyle, style]}
+        style={[buttonStyle, sizeStyles.button, style]}
         {...props}
       >
-        <ButtonPrimitive.Content style={buttonInnerStyle}>
+        <ButtonPrimitive.Content style={sizeStyles.inner}>
           {loading && !leftIcon ? (
             <ButtonPrimitive.Icon position="left">
               <ActivityIndicator size={spinnerSize} color={spinnerColor} />
@@ -144,7 +219,7 @@ export const Button = forwardRef<any, ButtonProps>(
             </ButtonPrimitive.Icon>
           ) : null}
 
-          <TextPrimitive.Root style={textStyle}>
+          <TextPrimitive.Root style={[textStyle, sizeStyles.text]}>
             {loading && loadingText ? loadingText : children}
           </TextPrimitive.Root>
 
@@ -168,142 +243,5 @@ export const Button = forwardRef<any, ButtonProps>(
 
 Button.displayName = "Button";
 
-// Create theme-based styles
-function createStyles(theme: any) {
-  return StyleSheet.create({
-    // Variant styles
-    primaryButton: {
-      backgroundColor: theme.colors.primary,
-      borderWidth: 0,
-      ...theme.shadows.sm,
-    },
-    primaryText: {
-      color: theme.colors.primaryForeground,
-      fontWeight: "600",
-    },
-
-    secondaryButton: {
-      backgroundColor: theme.colors.secondary,
-      borderWidth: 0,
-    },
-    secondaryText: {
-      color: theme.colors.secondaryForeground,
-      fontWeight: "500",
-    },
-
-    outlineButton: {
-      backgroundColor: "transparent",
-      borderWidth: 1,
-      borderColor: theme.colors.border,
-    },
-    outlineText: {
-      color: theme.colors.foreground,
-      fontWeight: "500",
-    },
-
-    ghostButton: {
-      backgroundColor: "transparent",
-      borderWidth: 0,
-    },
-    ghostText: {
-      color: theme.colors.foreground,
-      fontWeight: "500",
-    },
-
-    destructiveButton: {
-      backgroundColor: theme.colors.destructive,
-      borderWidth: 0,
-      ...theme.shadows.sm,
-    },
-    destructiveText: {
-      color: theme.colors.destructiveForeground,
-      fontWeight: "600",
-    },
-
-    successButton: {
-      backgroundColor: theme.colors.success,
-      borderWidth: 0,
-      ...theme.shadows.sm,
-    },
-    successText: {
-      color: theme.colors.successForeground,
-      fontWeight: "600",
-    },
-
-    pillButton: {
-      paddingHorizontal: theme.spacing[2],
-      paddingVertical: theme.spacing[1],
-      borderRadius: tokens.borderRadius.full,
-      minHeight: tokens.touchTargets.minimum / 2,
-    },
-
-    pillText: {
-      color: theme.colors.primaryForeground,
-      fontWeight: "400",
-    },
-
-    // Size styles
-    smButton: {
-      paddingHorizontal: theme.spacing[3],
-      paddingVertical: theme.spacing[2],
-      borderRadius: tokens.borderRadius.md,
-      minHeight: tokens.touchTargets.minimum,
-      gap: theme.spacing[1],
-    },
-    smButtonInner: {
-      gap: theme.spacing[1],
-    },
-    smText: {
-      fontSize: 14,
-      lineHeight: 16,
-    },
-
-    mdButton: {
-      paddingHorizontal: theme.spacing[4],
-      paddingVertical: theme.spacing[3],
-      borderRadius: tokens.borderRadius.md,
-      minHeight: tokens.touchTargets.minimum,
-      gap: theme.spacing[2],
-    },
-    mdButtonInner: {
-      gap: theme.spacing[2],
-    },
-    mdText: {
-      fontSize: 16,
-      lineHeight: 18,
-    },
-
-    lgButton: {
-      paddingHorizontal: theme.spacing[6],
-      paddingVertical: theme.spacing[4],
-      borderRadius: tokens.borderRadius.md,
-      minHeight: tokens.touchTargets.comfortable,
-      gap: theme.spacing[3],
-    },
-    lgButtonInner: {
-      gap: theme.spacing[3],
-    },
-    lgText: {
-      fontSize: 18,
-      lineHeight: 20,
-    },
-
-    xlButton: {
-      paddingHorizontal: theme.spacing[8],
-      paddingVertical: theme.spacing[5],
-      borderRadius: tokens.borderRadius.lg,
-      minHeight: tokens.touchTargets.large,
-      gap: theme.spacing[4],
-    },
-    xlButtonInner: {
-      gap: theme.spacing[4],
-    },
-    xlText: {
-      fontSize: 20,
-      lineHeight: 24,
-    },
-  });
-}
-
 // Export button variants for external use
 export { buttonVariants };

package/src/components/ui/dialog.tsx

@@ -1,8 +1,9 @@
 import { cva, type VariantProps } from "class-variance-authority";
 import { X } from "lucide-react-native";
 import React, { forwardRef } from "react";
-import { Platform, StyleSheet, Text } from "react-native";
+import { Platform, Text } from "react-native";
 import { useTheme } from "../../lib/theme/theme";
+import * as zero from "../../ui";
 import { createThemedIcon } from "./icons";
 import { ModalPrimitive, ModalPrimitiveProps } from "./primitives/modal";
 
@@ -67,10 +68,70 @@ export const Dialog = forwardRef<any, DialogProps>(
     },
     ref,
   ) => {
-    const { theme } = useTheme();
-
-    // Create dynamic styles based on theme
-    const styles = React.useMemo(() => createStyles(theme), [theme]);
+    const { zero: zt, theme } = useTheme();
+
+    // Content styles using theme.zero
+    const contentStyles = React.useMemo(() => {
+      const baseStyle = [
+        zt.bg.card,
+        zero.r.lg,
+        zero.shadows.lg,
+        { maxHeight: "90%", maxWidth: "90%" },
+      ];
+
+      const variantStyle = (() => {
+        switch (variant) {
+          case "sheet":
+            return [
+              { borderRadius: zero.borderRadius.xl },
+              {
+                borderBottomLeftRadius: 0,
+                borderBottomRightRadius: 0,
+                marginTop: "auto",
+                marginBottom: 0,
+                maxHeight: "80%",
+                width: "100%",
+                maxWidth: "100%",
+              },
+            ];
+          case "fullscreen":
+            return [
+              {
+                width: "100%",
+                height: "100%",
+                maxWidth: "100%",
+                maxHeight: "100%",
+                borderRadius: 0,
+                margin: 0,
+              },
+            ];
+          default:
+            return [];
+        }
+      })();
+
+      const sizeStyle = (() => {
+        switch (size) {
+          case "sm":
+            return { minWidth: 300, minHeight: 200 };
+          case "lg":
+            return { minWidth: 500, minHeight: 400 };
+          case "xl":
+            return { minWidth: 600, minHeight: 500 };
+          case "full":
+            return {
+              width: "95%",
+              height: "95%",
+              maxWidth: "95%",
+              maxHeight: "95%",
+            };
+          default:
+            return { minWidth: 400, minHeight: 300 };
+        }
+      })();
+
+      return [baseStyle, variantStyle, sizeStyle].flat();
+    }, [variant, size, zero]);
 
     const handleClose = React.useCallback(() => {
       if (onClose) {
@@ -112,27 +173,38 @@ export const Dialog = forwardRef<any, DialogProps>(
         <ModalPrimitive.Overlay
           dismissible={dismissible}
           onDismiss={handleClose}
-          style={styles.overlay}
+          style={zt.bg.overlay}
         >
           <ModalPrimitive.Content
             position={position || "left"}
             size={size || "md"}
-            style={[
-              styles.content,
-              styles[`${variant}Content` as keyof typeof styles],
-              styles[`${size}Content` as keyof typeof styles],
-            ]}
+            style={contentStyles}
           >
             {(title || showCloseButton) && (
               <ModalPrimitive.Header
                 withBorder={variant !== "sheet"}
-                style={styles.header}
+                style={[
+                  zero.p[4],
+                  {
+                    flexDirection: "row",
+                    alignItems: "center",
+                    justifyContent: "space-between",
+                  },
+                ]}
               >
                 <DialogTitle>{title}</DialogTitle>
                 {showCloseButton && (
                   <ModalPrimitive.Close
                     onClose={handleClose}
-                    style={styles.closeButton}
+                    style={[
+                      zero.p[2],
+                      {
+                        width: 44,
+                        height: 44,
+                        alignItems: "center",
+                        justifyContent: "center",
+                      },
+                    ]}
                   >
                     <DialogCloseIcon />
                   </ModalPrimitive.Close>
@@ -142,7 +214,7 @@ export const Dialog = forwardRef<any, DialogProps>(
 
             <ModalPrimitive.Body
               scrollable={variant !== "fullscreen"}
-              style={styles.body}
+              style={[zero.p[6], { paddingTop: 0, flex: 1 }]}
             >
               {description && (
                 <DialogDescription>{description}</DialogDescription>
@@ -166,13 +238,16 @@ export interface DialogTitleProps {
 
 export const DialogTitle = forwardRef<any, DialogTitleProps>(
   ({ children, style, ...props }, ref) => {
-    const { theme } = useTheme();
-    const styles = React.useMemo(() => createStyles(theme), [theme]);
+    const { zero: zt } = useTheme();
 
     if (!children) return null;
 
     return (
-      <Text ref={ref} style={[styles.title, style]} {...props}>
+      <Text
+        ref={ref}
+        style={[zt.text.xl, { fontWeight: "600", flex: 1 }, style]}
+        {...props}
+      >
         {children}
       </Text>
     );
@@ -189,13 +264,12 @@ export interface DialogDescriptionProps {
 
 export const DialogDescription = forwardRef<any, DialogDescriptionProps>(
   ({ children, style, ...props }, ref) => {
-    const { theme } = useTheme();
-    const styles = React.useMemo(() => createStyles(theme), [theme]);
+    const { zero: zt } = useTheme();
 
     if (!children) return null;
 
     return (
-      <Text ref={ref} style={[styles.description, style]} {...props}>
+      <Text ref={ref} style={[zt.text.muted, zero.mb[4], style]} {...props}>
         {children}
       </Text>
     );
@@ -230,8 +304,7 @@ export const DialogFooter = forwardRef<any, DialogFooterProps>(
     },
     ref,
   ) => {
-    const { theme } = useTheme();
-    const styles = React.useMemo(() => createStyles(theme), [theme]);
+    const { zero: zt } = useTheme();
 
     if (!children) return null;
 
@@ -241,7 +314,7 @@ export const DialogFooter = forwardRef<any, DialogFooterProps>(
         withBorder={withBorder}
         direction={direction}
         justify={justify}
-        style={[styles.footer, style]}
+        style={[zero.p[6], { gap: 8 }, style]}
         {...props}
       >
         {children}
@@ -257,120 +330,5 @@ const DialogCloseIcon = () => {
   return <ThemedX size="md" variant="default" />;
 };
 
-// Create theme-aware styles
-function createStyles(theme: any) {
-  return StyleSheet.create({
-    overlay: {
-      backgroundColor: "rgba(0, 0, 0, 0.5)",
-    },
-
-    content: {
-      backgroundColor: theme.colors.card,
-      borderRadius: theme.borderRadius.lg,
-      ...theme.shadows.lg,
-      maxHeight: "90%",
-      maxWidth: "90%",
-    },
-
-    // Variant styles
-    defaultContent: {
-      // Default styles already applied in content
-    },
-
-    sheetContent: {
-      borderTopLeftRadius: theme.borderRadius.xl,
-      borderTopRightRadius: theme.borderRadius.xl,
-      borderBottomLeftRadius: 0,
-      borderBottomRightRadius: 0,
-      marginTop: "auto",
-      marginBottom: 0,
-      maxHeight: "80%",
-      width: "100%",
-      maxWidth: "100%",
-    },
-
-    fullscreenContent: {
-      width: "100%",
-      height: "100%",
-      maxWidth: "100%",
-      maxHeight: "100%",
-      borderRadius: 0,
-      margin: 0,
-    },
-
-    // Size styles
-    smContent: {
-      minWidth: 300,
-      minHeight: 200,
-    },
-
-    mdContent: {
-      minWidth: 400,
-      minHeight: 300,
-    },
-
-    lgContent: {
-      minWidth: 500,
-      minHeight: 400,
-    },
-
-    xlContent: {
-      minWidth: 600,
-      minHeight: 500,
-    },
-
-    fullContent: {
-      width: "95%",
-      height: "95%",
-      maxWidth: "95%",
-      maxHeight: "95%",
-    },
-
-    header: {
-      paddingHorizontal: theme.spacing[6],
-      paddingVertical: theme.spacing[4],
-      flexDirection: "row",
-      alignItems: "center",
-      justifyContent: "space-between",
-    },
-
-    body: {
-      paddingHorizontal: theme.spacing[6],
-      paddingBottom: theme.spacing[6],
-      flex: 1,
-    },
-
-    footer: {
-      paddingHorizontal: theme.spacing[6],
-      paddingVertical: theme.spacing[4],
-      gap: theme.spacing[2],
-    },
-
-    title: {
-      fontSize: 20,
-      fontWeight: "600",
-      color: theme.colors.text,
-      flex: 1,
-      lineHeight: 24,
-    },
-
-    description: {
-      fontSize: 16,
-      color: theme.colors.textMuted,
-      lineHeight: 22,
-      marginBottom: theme.spacing[4],
-    },
-
-    closeButton: {
-      width: theme.touchTargets.minimum,
-      height: theme.touchTargets.minimum,
-      alignItems: "center",
-      justifyContent: "center",
-      borderRadius: theme.borderRadius.sm,
-      marginLeft: theme.spacing[2],
-    },
-  });
-}
-
 // Export dialog variants for external use
 export { dialogVariants };