@streamplace/components 0.7.26 → 0.7.29

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 };

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