@beyondcorp/beyond-ui-native 0.1.2 → 0.1.3

package/src/components/toast/toast.tsx

@@ -0,0 +1,136 @@
+import * as React from "react";
+import { View, Text, Pressable, Animated } from "react-native";
+import { cva } from "class-variance-authority";
+import { cn } from "../../utilities/cn";
+import { ToastItem, ToastVariant } from "./types";
+
+const toastVariants = cva(
+  "w-full max-w-sm rounded-xl p-4 shadow-lg border flex-row items-center justify-between mb-2",
+  {
+    variants: {
+      variant: {
+        default: "bg-white border-neutral-200 dark:bg-neutral-900 dark:border-neutral-800",
+        success: "bg-success-50 border-success-200 dark:bg-success-950/80 dark:border-success-800",
+        danger: "bg-danger-50 border-danger-200 dark:bg-danger-950/80 dark:border-danger-800",
+        warning: "bg-warning-50 border-warning-200 dark:bg-warning-950/80 dark:border-warning-800",
+        info: "bg-primary-50 border-primary-200 dark:bg-primary-950/80 dark:border-primary-800",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  }
+);
+
+const toastTitleVariants = cva("text-sm font-semibold", {
+  variants: {
+    variant: {
+      default: "text-neutral-900 dark:text-white",
+      success: "text-success-700 dark:text-success-300",
+      danger: "text-danger-700 dark:text-danger-300",
+      warning: "text-warning-800 dark:text-warning-300",
+      info: "text-primary-700 dark:text-primary-300",
+    },
+  },
+  defaultVariants: {
+    variant: "default",
+  },
+});
+
+interface ToastBannerProps {
+  toast: ToastItem;
+  onDismiss: (id: string) => void;
+}
+
+export function ToastBanner({ toast, onDismiss }: ToastBannerProps) {
+  const opacity = React.useRef(new Animated.Value(0)).current;
+  const translateY = React.useRef(new Animated.Value(-16)).current;
+
+  React.useEffect(() => {
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 1,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateY, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start();
+
+    const timer = setTimeout(() => {
+      handleDismiss();
+    }, toast.duration || 4000);
+
+    return () => clearTimeout(timer);
+  }, []);
+
+  const handleDismiss = () => {
+    Animated.parallel([
+      Animated.timing(opacity, {
+        toValue: 0,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+      Animated.timing(translateY, {
+        toValue: -16,
+        duration: 200,
+        useNativeDriver: true,
+      }),
+    ]).start(() => {
+      onDismiss(toast.id);
+    });
+  };
+
+  const variant: ToastVariant = toast.variant || "default";
+
+  return (
+    <Animated.View
+      style={{
+        opacity,
+        transform: [{ translateY }],
+      }}
+      className="w-full items-center px-4"
+    >
+      <Pressable
+        onPress={handleDismiss}
+        className={cn(toastVariants({ variant }))}
+      >
+        <View className="flex-1 pr-2">
+          <Text className={cn(toastTitleVariants({ variant }))}>
+            {toast.title}
+          </Text>
+          {toast.description ? (
+            <Text className="text-xs text-neutral-600 dark:text-neutral-400 mt-0.5">
+              {toast.description}
+            </Text>
+          ) : null}
+        </View>
+        <Text className="text-xs text-neutral-400">✕</Text>
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+export function ToastContainer({
+  toasts,
+  onDismiss,
+}: {
+  toasts: ToastItem[];
+  onDismiss: (id: string) => void;
+}) {
+  if (toasts.length === 0) return null;
+
+  return (
+    <View
+      pointerEvents="box-none"
+      className="absolute top-12 left-0 right-0 z-50 items-center"
+    >
+      {toasts.map((toast) => (
+        <ToastBanner key={toast.id} toast={toast} onDismiss={onDismiss} />
+      ))}
+    </View>
+  );
+}

package/src/components/toast/types.ts

@@ -0,0 +1,32 @@
+import * as React from "react";
+
+export type ToastVariant = "default" | "success" | "danger" | "warning" | "info";
+
+export interface ToastItem {
+  id: string;
+  title: string;
+  description?: string;
+  variant?: ToastVariant;
+  duration?: number;
+}
+
+export interface ToastContextValue {
+  toasts: ToastItem[];
+  show: (toast: Omit<ToastItem, "id">) => string;
+  dismiss: (id: string) => void;
+  success: (title: string, description?: string) => string;
+  danger: (title: string, description?: string) => string;
+  error: (title: string, description?: string) => string;
+  warning: (title: string, description?: string) => string;
+  info: (title: string, description?: string) => string;
+}
+
+export const ToastContext = React.createContext<ToastContextValue | null>(null);
+
+export function useToast(): ToastContextValue {
+  const context = React.useContext(ToastContext);
+  if (!context) {
+    throw new Error("useToast must be used within a BeyondUIProvider");
+  }
+  return context;
+}

package/src/index.ts

@@ -0,0 +1,42 @@
+/// <reference path="./types/nativewind-env.d.ts" />
+
+// Primitives
+export * from "./primitives";
+
+// Components
+export * from "./components/button";
+export * from "./components/text";
+export * from "./components/input";
+export * from "./components/textarea";
+export * from "./components/card";
+export * from "./components/badge";
+export * from "./components/avatar";
+export * from "./components/switch";
+export * from "./components/checkbox";
+export * from "./components/radio";
+export * from "./components/spinner";
+export * from "./components/skeleton";
+export * from "./components/alert";
+export * from "./components/separator";
+export * from "./components/dialog";
+export * from "./components/tabs";
+export * from "./components/toast";
+export * from "./components/stats-card";
+export * from "./components/accordion";
+export * from "./components/bottom-sheet";
+export * from "./components/select";
+export * from "./components/data-table";
+
+// Screen Templates
+export * from "./templates";
+
+// Providers & Context
+export * from "./providers/BeyondUIProvider";
+
+// Theme & Tokens
+export * from "./theme/tokens";
+export { default as beyondUIPreset } from "./theme/preset";
+
+// Utilities
+export * from "./utilities/cn";
+export * from "./utilities/accessibility";

package/src/primitives/box.tsx

@@ -0,0 +1,25 @@
+import * as React from "react";
+import { View, type ViewProps } from "react-native";
+import { cn } from "../utilities/cn";
+
+export interface BoxProps extends ViewProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export const Box = React.forwardRef<View, BoxProps>(
+  ({ className, style, children, ...props }, ref) => {
+    return (
+      <View
+        ref={ref}
+        className={cn(className)}
+        style={style}
+        {...props}
+      >
+        {children}
+      </View>
+    );
+  }
+);
+
+Box.displayName = "Box";

package/src/primitives/index.ts

@@ -0,0 +1,2 @@
+export * from "./box";
+export * from "./pressable";

package/src/primitives/pressable.tsx

@@ -0,0 +1,49 @@
+import * as React from "react";
+import {
+  Pressable as RNPressable,
+  type PressableProps as RNPressableProps,
+  type View,
+  type GestureResponderEvent,
+} from "react-native";
+import { cn } from "../utilities/cn";
+
+export interface PressableProps extends Omit<RNPressableProps, "children"> {
+  className?: string;
+  children?: React.ReactNode | ((state: { pressed: boolean }) => React.ReactNode);
+  feedback?: "opacity" | "scale" | "none";
+}
+
+export const Pressable = React.forwardRef<View, PressableProps>(
+  (
+    {
+      className,
+      style,
+      disabled,
+      feedback = "opacity",
+      children,
+      ...props
+    },
+    ref
+  ) => {
+    return (
+      <RNPressable
+        ref={ref}
+        disabled={disabled}
+        accessibilityRole="button"
+        accessibilityState={{ disabled: !!disabled }}
+        className={cn(
+          feedback === "opacity" && "active:opacity-70",
+          feedback === "scale" && "active:scale-[0.98]",
+          disabled && "opacity-50",
+          className
+        )}
+        style={style}
+        {...props}
+      >
+        {typeof children === "function" ? children : children}
+      </RNPressable>
+    );
+  }
+);
+
+Pressable.displayName = "Pressable";

package/src/providers/BeyondUIProvider.tsx

@@ -0,0 +1,100 @@
+import * as React from "react";
+import { View, useColorScheme as useRNColorScheme } from "react-native";
+import { PortalHost } from "@rn-primitives/portal";
+import { ToastContext, ToastItem, ToastContextValue } from "../components/toast/types";
+import { ToastContainer } from "../components/toast/toast";
+
+export type ColorScheme = "light" | "dark" | "system";
+
+export interface BeyondUIContextValue {
+  colorScheme: "light" | "dark";
+  setColorScheme: (scheme: ColorScheme) => void;
+  toggleColorScheme: () => void;
+}
+
+export const BeyondUIContext = React.createContext<BeyondUIContextValue>({
+  colorScheme: "light",
+  setColorScheme: () => {},
+  toggleColorScheme: () => {},
+});
+
+export function useBeyondUI() {
+  return React.useContext(BeyondUIContext);
+}
+
+export interface BeyondUIProviderProps {
+  children: React.ReactNode;
+  defaultColorScheme?: ColorScheme;
+}
+
+export function BeyondUIProvider({
+  children,
+  defaultColorScheme = "system",
+}: BeyondUIProviderProps) {
+  const systemScheme = useRNColorScheme() ?? "light";
+  const [selectedScheme, setSelectedScheme] = React.useState<ColorScheme>(defaultColorScheme);
+  const [toasts, setToasts] = React.useState<ToastItem[]>([]);
+
+  const activeScheme: "light" | "dark" =
+    selectedScheme === "system" ? systemScheme : selectedScheme;
+
+  const toggleColorScheme = React.useCallback(() => {
+    setSelectedScheme((prev) => {
+      const current = prev === "system" ? systemScheme : prev;
+      return current === "dark" ? "light" : "dark";
+    });
+  }, [systemScheme]);
+
+  const dismissToast = React.useCallback((id: string) => {
+    setToasts((prev) => prev.filter((t) => t.id !== id));
+  }, []);
+
+  const showToast = React.useCallback((toast: Omit<ToastItem, "id">) => {
+    const id = Math.random().toString(36).substring(2, 9);
+    setToasts((prev) => [...prev, { ...toast, id }]);
+    return id;
+  }, []);
+
+  const toastContextValue: ToastContextValue = React.useMemo(
+    () => ({
+      toasts,
+      show: showToast,
+      dismiss: dismissToast,
+      success: (title, description) =>
+        showToast({ title, description, variant: "success" }),
+      danger: (title, description) =>
+        showToast({ title, description, variant: "danger" }),
+      error: (title, description) =>
+        showToast({ title, description, variant: "danger" }),
+      warning: (title, description) =>
+        showToast({ title, description, variant: "warning" }),
+      info: (title, description) =>
+        showToast({ title, description, variant: "info" }),
+    }),
+    [toasts, showToast, dismissToast]
+  );
+
+  const contextValue: BeyondUIContextValue = React.useMemo(
+    () => ({
+      colorScheme: activeScheme,
+      setColorScheme: setSelectedScheme,
+      toggleColorScheme,
+    }),
+    [activeScheme, toggleColorScheme]
+  );
+
+  return (
+    <BeyondUIContext.Provider value={contextValue}>
+      <ToastContext.Provider value={toastContextValue}>
+        <View
+          style={{ flex: 1 }}
+          className={activeScheme === "dark" ? "dark flex-1" : "flex-1"}
+        >
+          {children}
+          <PortalHost />
+          <ToastContainer toasts={toasts} onDismiss={dismissToast} />
+        </View>
+      </ToastContext.Provider>
+    </BeyondUIContext.Provider>
+  );
+}

package/src/templates/auth/ForgotPasswordTemplate.tsx

@@ -0,0 +1,132 @@
+import * as React from "react";
+import {
+  View,
+  ScrollView,
+  KeyboardAvoidingView,
+  Platform,
+  Pressable,
+} from "react-native";
+import { cn } from "../../utilities/cn";
+import { Text } from "../../components/text/text";
+import { Heading } from "../../components/text/heading";
+import { Input } from "../../components/input/input";
+import { Button } from "../../components/button/button";
+import { Alert, AlertDescription } from "../../components/alert/alert";
+
+export interface ForgotPasswordTemplateProps {
+  title?: string;
+  subtitle?: string;
+  onSubmit?: (data: { email: string }) => void;
+  onBackToSignIn?: () => void;
+  isLoading?: boolean;
+  isSuccess?: boolean;
+  error?: string | null;
+  className?: string;
+}
+
+export const ForgotPasswordTemplate: React.FC<ForgotPasswordTemplateProps> = ({
+  title = "Reset Password",
+  subtitle = "Enter your email address and we'll send you recovery instructions",
+  onSubmit,
+  onBackToSignIn,
+  isLoading = false,
+  isSuccess = false,
+  error,
+  className,
+}) => {
+  const [email, setEmail] = React.useState("");
+  const [emailError, setEmailError] = React.useState<string | undefined>();
+
+  const handleSubmit = () => {
+    if (!email || !email.includes("@")) {
+      setEmailError("Please enter a valid email address");
+      return;
+    }
+    setEmailError(undefined);
+    onSubmit?.({ email });
+  };
+
+  return (
+    <KeyboardAvoidingView
+      behavior={Platform.OS === "ios" ? "padding" : "height"}
+      style={{ flex: 1 }}
+      className={cn("flex-1 bg-background", className)}
+    >
+      <ScrollView
+        style={{ flex: 1 }}
+        contentContainerStyle={{ flexGrow: 1, justifyContent: "center" }}
+        className="px-6 py-8"
+        keyboardShouldPersistTaps="handled"
+        showsVerticalScrollIndicator={false}
+      >
+        <View className="w-full max-w-md mx-auto gap-6">
+          <View className="items-center gap-2">
+            <Heading level={2} className="text-3xl font-extrabold text-foreground text-center">
+              {title}
+            </Heading>
+            <Text className="text-muted text-center text-base">
+              {subtitle}
+            </Text>
+          </View>
+
+          {error && (
+            <Alert variant="danger">
+              <AlertDescription>{error}</AlertDescription>
+            </Alert>
+          )}
+
+          {isSuccess ? (
+            <View className="gap-4">
+              <Alert variant="success">
+                <AlertDescription>
+                  Password reset link sent! Check your email inbox.
+                </AlertDescription>
+              </Alert>
+
+              {onBackToSignIn && (
+                <Button variant="primary" size="lg" onPress={onBackToSignIn}>
+                  Back to Sign In
+                </Button>
+              )}
+            </View>
+          ) : (
+            <View className="gap-4">
+              <Input
+                label="Email Address"
+                placeholder="you@company.com"
+                keyboardType="email-address"
+                autoCapitalize="none"
+                value={email}
+                onChangeText={(text) => {
+                  setEmail(text);
+                  if (emailError) setEmailError(undefined);
+                }}
+                error={emailError}
+              />
+
+              <Button
+                variant="primary"
+                size="lg"
+                loading={isLoading}
+                onPress={handleSubmit}
+                className="mt-2"
+              >
+                Send Reset Link
+              </Button>
+
+              {onBackToSignIn && (
+                <View className="flex-row justify-center items-center gap-1.5 pt-2">
+                  <Pressable onPress={onBackToSignIn}>
+                    <Text className="text-sm font-semibold text-primary">
+                      Back to Sign In
+                    </Text>
+                  </Pressable>
+                </View>
+              )}
+            </View>
+          )}
+        </View>
+      </ScrollView>
+    </KeyboardAvoidingView>
+  );
+};