@streamplace/components 0.7.27 → 0.7.29

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

package/src/components/ui/toast.tsx

@@ -11,11 +11,81 @@ import {
   ViewStyle,
 } from "react-native";
 import { useSafeAreaInsets } from "react-native-safe-area-context";
-import { useTheme } from "../../lib/theme/theme";
 
-import { useCallback } from "react";
+import { useTheme } from "../../ui";
 
-type ToastController = {
+type ToastConfig = {
+  title: string;
+  description?: string;
+  duration?: number;
+  actionLabel?: string;
+  onAction?: () => void;
+};
+
+type ToastState = {
+  id: string;
+  open: boolean;
+  title: string;
+  description?: string;
+  duration: number;
+  actionLabel?: string;
+  onAction?: () => void;
+};
+
+class ToastManager {
+  private listeners: Set<(state: ToastState | null) => void> = new Set();
+  private currentToast: ToastState | null = null;
+  private timeoutId: ReturnType<typeof setTimeout> | null = null;
+
+  show(config: ToastConfig) {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+    }
+
+    const toast: ToastState = {
+      id: Math.random().toString(36).substr(2, 9),
+      open: true,
+      title: config.title,
+      description: config.description,
+      duration: config.duration ?? 3,
+      actionLabel: config.actionLabel,
+      onAction: config.onAction,
+    };
+
+    this.currentToast = toast;
+    this.notifyListeners();
+
+    if (toast.duration > 0) {
+      this.timeoutId = setTimeout(() => {
+        this.hide();
+      }, toast.duration * 1000);
+    }
+  }
+
+  hide() {
+    if (this.timeoutId) {
+      clearTimeout(this.timeoutId);
+      this.timeoutId = null;
+    }
+    this.currentToast = null;
+    this.notifyListeners();
+  }
+
+  subscribe(listener: (state: ToastState | null) => void) {
+    this.listeners.add(listener);
+    return () => {
+      this.listeners.delete(listener);
+    };
+  }
+
+  private notifyListeners() {
+    this.listeners.forEach((listener) => listener(this.currentToast));
+  }
+}
+
+const toastManager = new ToastManager();
+
+export const toast = {
   show: (
     title: string,
     description?: string,
@@ -24,103 +94,51 @@ type ToastController = {
       actionLabel?: string;
       onAction?: () => void;
     },
-  ) => void;
-  hide: () => void;
+  ) => {
+    toastManager.show({
+      title,
+      description,
+      ...options,
+    });
+  },
+  hide: () => toastManager.hide(),
 };
 
-type UseToastReturn = {
-  open: boolean;
-  title: string;
-  description?: string;
-  actionLabel?: string;
-  onAction?: () => void;
-  duration?: number;
-  setOpen: (open: boolean) => void;
-  setTitle: (title: string) => void;
-  setDescription: (description: string) => void;
-  setActionLabel: (label: string) => void;
-  setOnAction: (cb?: () => void) => void;
-  setDuration: (duration: number) => void;
-  toastController: ToastController;
-};
+export function useToast() {
+  const [toastState, setToastState] = useState<ToastState | null>(null);
 
-/**
- * useToast - a hook to manage Toast state and provide a toastController.
- * Returns a ready-to-render ToastComponent.
- */
-export function useToast(
-  initial: {
-    title?: string;
-    description?: string;
-    duration?: number;
-    actionLabel?: string;
-    onAction?: () => void;
-  } = {},
-) {
-  const [open, setOpen] = useState(false);
-  const [title, setTitle] = useState(initial.title ?? "");
-  const [description, setDescription] = useState(initial.description ?? "");
-  const [duration, setDuration] = useState(initial.duration ?? 3);
-  const [actionLabel, setActionLabel] = useState(
-    initial.actionLabel ?? "Action",
-  );
-  const [onAction, setOnAction] = useState<(() => void) | undefined>(
-    initial.onAction,
-  );
+  useEffect(() => {
+    return toastManager.subscribe(setToastState);
+  }, []);
 
-  const show = useCallback(
-    (
-      toastTitle: string,
-      toastDescription?: string,
-      options?: {
-        duration?: number;
-        actionLabel?: string;
-        onAction?: () => void;
-      },
-    ) => {
-      setTitle(toastTitle);
-      setDescription(toastDescription ?? "");
-      setDuration(options?.duration ?? 3);
-      setActionLabel(options?.actionLabel ?? "Action");
-      setOnAction(options?.onAction);
-      setOpen(true);
-    },
-    [],
-  );
+  return {
+    toast: toastState,
+    ...toast,
+  };
+}
+
+export function ToastProvider() {
+  const [toastState, setToastState] = useState<ToastState | null>(null);
 
-  const hide = useCallback(() => {
-    setOpen(false);
+  useEffect(() => {
+    return toastManager.subscribe(setToastState);
   }, []);
 
-  // Ready-to-render Toast component
-  const ToastComponent = (
+  if (!toastState?.open) return null;
+
+  return (
     <Toast
-      open={open}
-      onOpenChange={setOpen}
-      title={title}
-      description={description}
-      actionLabel={actionLabel}
-      onAction={onAction}
-      duration={duration}
+      open={toastState.open}
+      onOpenChange={(open) => {
+        if (!open) toastManager.hide();
+      }}
+      title={toastState.title}
+      description={toastState.description}
+      actionLabel={toastState.actionLabel}
+      onAction={toastState.onAction}
+      duration={toastState.duration}
     />
   );
-
-  return {
-    open,
-    title,
-    description,
-    actionLabel,
-    onAction,
-    duration,
-    setOpen,
-    setTitle,
-    setDescription,
-    setActionLabel,
-    setOnAction,
-    setDuration,
-    toastController: { show, hide },
-    ToastComponent,
-  };
 }
 
 type ToastProps = {

package/src/components/ui/view.tsx

@@ -5,8 +5,8 @@ import {
   ViewProps as RNViewProps,
   ViewStyle,
 } from "react-native";
-import { borderRadius as radius, spacing } from "../../lib/theme/atoms";
 import { useTheme } from "../../lib/theme/theme";
+import * as zero from "../../ui";
 
 // View variants using class-variance-authority pattern
 const viewVariants = cva("", {
@@ -121,72 +121,64 @@ export const View = forwardRef<RNView, ViewProps>(
     },
     ref,
   ) => {
-    const { theme } = useTheme();
+    const { zero: zt } = useTheme();
 
-    // Map variant to styles
+    // Map variant to styles using theme.zero
     const variantStyles: ViewStyle = (() => {
       switch (variant) {
         case "card":
           return {
-            backgroundColor: theme.colors.card,
-            borderRadius: radius.lg,
-            shadowColor: "#000",
-            shadowOffset: { width: 0, height: 2 },
-            shadowOpacity: 0.1,
-            shadowRadius: 4,
-            elevation: 3,
+            ...zt.bg.card,
+            borderRadius: zero.borderRadius.lg,
+            ...zero.shadows.md,
           };
         case "overlay":
-          return {
-            backgroundColor: "rgba(0, 0, 0, 0.5)",
-          };
+          return zt.bg.overlay;
         case "surface":
-          return {
-            backgroundColor: theme.colors.background,
-          };
+          return zt.bg.background;
         case "container":
           return {
-            backgroundColor: theme.colors.background,
-            padding: spacing[4],
+            ...zt.bg.background,
+            ...zero.p[8],
           };
         default:
           return {};
       }
     })();
 
-    // Map padding to numeric values
+    // Map padding to zero tokens
     const paddingValue = (() => {
       switch (padding) {
         case "xs":
-          return spacing[1];
+          return zero.p[1];
         case "sm":
-          return spacing[2];
+          return zero.p[2];
         case "md":
-          return spacing[3];
+          return zero.p[4];
         case "lg":
-          return spacing[4];
+          return zero.p[6];
         case "xl":
-          return spacing[5];
+          return zero.p[8];
         default:
-          return undefined;
+          return {};
       }
     })();
 
-    // Map margin to numeric values
+    // Map margin to zero tokens
     const marginValue = (() => {
       switch (margin) {
         case "xs":
-          return spacing[1];
+          return zero.m[1];
         case "sm":
-          return spacing[2];
+          return zero.m[2];
         case "md":
-          return spacing[3];
+          return zero.m[4];
         case "lg":
-          return spacing[4];
+          return zero.m[6];
         case "xl":
-          return spacing[5];
+          return zero.m[8];
         default:
-          return undefined;
+          return {};
       }
     })();
 
@@ -262,8 +254,8 @@ export const View = forwardRef<RNView, ViewProps>(
 
     const computedStyle: ViewStyle = {
       ...variantStyles,
-      ...(paddingValue !== undefined && { padding: paddingValue }),
-      ...(marginValue !== undefined && { margin: marginValue }),
+      ...paddingValue,
+      ...marginValue,
       flexDirection,
       alignItems,
       justifyContent,
@@ -278,13 +270,7 @@ export const View = forwardRef<RNView, ViewProps>(
       ...(borderColor && { borderColor }),
       ...(borderWidth !== undefined && { borderWidth }),
       ...(borderRadius !== undefined && { borderRadius }),
-      ...(shadow && {
-        shadowColor: "#000",
-        shadowOffset: { width: 0, height: 2 },
-        shadowOpacity: 0.1,
-        shadowRadius: 4,
-        elevation: 3,
-      }),
+      ...(shadow && zero.shadows.md),
     };
 
     const finalStyle = Array.isArray(style)

package/src/lib/theme/index.ts

@@ -3,7 +3,6 @@ export {
   ThemeProvider,
   createThemeColors,
   createThemeIcons,
-  createThemeStyles,
   createThemedStyles,
   darkTheme,
   lightTheme,
@@ -11,7 +10,6 @@ export {
   useTheme,
   type Theme,
   type ThemeIcons,
-  type ThemeStyles,
 } from "./theme";
 
 // Design tokens