@beyondcorp/beyond-ui-native 0.1.1 → 0.1.3

package/src/components/tabs/tabs.tsx

@@ -0,0 +1,172 @@
+import * as React from "react";
+import {
+  View,
+  Text,
+  Pressable,
+  type ViewProps,
+  type PressableProps,
+  type GestureResponderEvent,
+} from "react-native";
+import { cn } from "../../utilities/cn";
+
+export interface TabsContextValue {
+  value: string;
+  onValueChange: (value: string) => void;
+}
+
+export const TabsContext = React.createContext<TabsContextValue | null>(null);
+
+export function useTabsContext(): TabsContextValue {
+  const context = React.useContext(TabsContext);
+  if (!context) {
+    throw new Error("Tabs compound components must be rendered inside a Tabs component");
+  }
+  return context;
+}
+
+export interface TabsProps extends ViewProps {
+  value?: string;
+  defaultValue?: string;
+  onValueChange?: (value: string) => void;
+  className?: string;
+}
+
+export const Tabs = React.forwardRef<View, TabsProps>(function Tabs(
+  { value: controlledValue, defaultValue = "", onValueChange, className, children, ...props },
+  ref
+) {
+  const [internalValue, setInternalValue] = React.useState(defaultValue);
+  const isControlled = controlledValue !== undefined;
+  const currentValue = isControlled ? controlledValue : internalValue;
+
+  const handleValueChange = React.useCallback(
+    (val: string) => {
+      if (!isControlled) {
+        setInternalValue(val);
+      }
+      onValueChange?.(val);
+    },
+    [isControlled, onValueChange]
+  );
+
+  return (
+    <TabsContext.Provider value={{ value: currentValue, onValueChange: handleValueChange }}>
+      <View ref={ref} className={className} {...props}>
+        {children}
+      </View>
+    </TabsContext.Provider>
+  );
+});
+Tabs.displayName = "Tabs";
+
+export interface TabsListProps extends ViewProps {
+  className?: string;
+}
+
+export const TabsList = React.forwardRef<View, TabsListProps>(function TabsList(
+  { className, ...props },
+  ref
+) {
+  return (
+    <View
+      ref={ref}
+      role="tablist"
+      className={cn(
+        "flex-row items-center justify-center rounded-xl bg-neutral-100 dark:bg-neutral-800 p-1",
+        className
+      )}
+      {...props}
+    />
+  );
+});
+TabsList.displayName = "TabsList";
+
+export interface TabsTriggerProps extends Omit<PressableProps, "onPress"> {
+  value: string;
+  className?: string;
+  textClassName?: string;
+  children?: React.ReactNode;
+  onPress?: (e: GestureResponderEvent) => void;
+}
+
+export const TabsTrigger = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  TabsTriggerProps
+>(function TabsTrigger({ value, className, textClassName, children, onPress, disabled, ...props }, ref) {
+  const { value: selectedValue, onValueChange } = useTabsContext();
+  const isSelected = selectedValue === value;
+
+  const handlePress = (e: GestureResponderEvent) => {
+    if (disabled) return;
+    onValueChange(value);
+    onPress?.(e);
+  };
+
+  return (
+    <Pressable
+      ref={ref}
+      role="tab"
+      accessibilityRole="tab"
+      accessibilityState={{ selected: isSelected, disabled: !!disabled }}
+      disabled={disabled}
+      onPress={handlePress}
+      className={cn(
+        "flex-1 items-center justify-center rounded-lg py-2 px-3 transition-all",
+        isSelected
+          ? "bg-white dark:bg-neutral-900 shadow-sm"
+          : "bg-transparent opacity-70",
+        disabled && "opacity-40",
+        className
+      )}
+      {...props}
+    >
+      {typeof children === "string" ? (
+        <Text
+          className={cn(
+            "text-sm font-semibold",
+            isSelected
+              ? "text-neutral-900 dark:text-neutral-50"
+              : "text-neutral-600 dark:text-neutral-400",
+            textClassName
+          )}
+        >
+          {children}
+        </Text>
+      ) : (
+        children
+      )}
+    </Pressable>
+  );
+});
+TabsTrigger.displayName = "TabsTrigger";
+
+export interface TabsContentProps extends ViewProps {
+  value: string;
+  className?: string;
+  forceMount?: boolean;
+}
+
+export const TabsContent = React.forwardRef<View, TabsContentProps>(function TabsContent(
+  { value, className, forceMount, children, ...props },
+  ref
+) {
+  const { value: selectedValue } = useTabsContext();
+  const isSelected = selectedValue === value;
+
+  if (!isSelected && !forceMount) {
+    return null;
+  }
+
+  return (
+    <View
+      ref={ref}
+      role="tabpanel"
+      accessibilityElementsHidden={!isSelected}
+      className={cn("mt-3", className)}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+});
+TabsContent.displayName = "TabsContent";

package/src/components/text/heading.tsx

@@ -0,0 +1,50 @@
+import * as React from "react";
+import { Text as NativeText, type TextProps as NativeTextProps } from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utilities/cn";
+
+export const headingVariants = cva("font-bold text-neutral-900 dark:text-neutral-50 tracking-tight", {
+  variants: {
+    level: {
+      h1: "text-3xl font-extrabold",
+      h2: "text-2xl font-bold",
+      h3: "text-xl font-bold",
+      h4: "text-lg font-semibold",
+      h5: "text-base font-semibold",
+      h6: "text-sm font-semibold uppercase tracking-wider",
+    },
+  },
+  defaultVariants: {
+    level: "h2",
+  },
+});
+
+export type HeadingLevel = "h1" | "h2" | "h3" | "h4" | "h5" | "h6" | 1 | 2 | 3 | 4 | 5 | 6;
+
+export interface HeadingProps
+  extends NativeTextProps,
+    Omit<VariantProps<typeof headingVariants>, "level"> {
+  level?: HeadingLevel;
+  className?: string;
+}
+
+export const Heading = React.forwardRef<NativeText, HeadingProps>(function Heading(
+  { className, level = "h2", ...props },
+  ref
+) {
+  const normalizedLevel =
+    typeof level === "number"
+      ? (`h${level}` as "h1" | "h2" | "h3" | "h4" | "h5" | "h6")
+      : level;
+
+  return (
+    <NativeText
+      ref={ref}
+      accessibilityRole="header"
+      className={cn(headingVariants({ level: normalizedLevel }), className)}
+      {...props}
+    />
+  );
+});
+
+Heading.displayName = "Heading";

package/src/components/text/index.ts

@@ -0,0 +1,2 @@
+export * from "./text";
+export * from "./heading";

package/src/components/text/text.tsx

@@ -0,0 +1,62 @@
+import * as React from "react";
+import { Text as NativeText, type TextProps as NativeTextProps } from "react-native";
+import { cva, type VariantProps } from "class-variance-authority";
+import { cn } from "../../utilities/cn";
+
+export const textVariants = cva("text-neutral-900 dark:text-neutral-100", {
+  variants: {
+    variant: {
+      body: "text-base font-normal",
+      caption: "text-xs font-normal text-neutral-500 dark:text-neutral-400",
+      label: "text-sm font-medium text-neutral-700 dark:text-neutral-300",
+      muted: "text-sm font-normal text-neutral-500 dark:text-neutral-400",
+      lead: "text-lg font-normal text-neutral-600 dark:text-neutral-300",
+    },
+    color: {
+      default: "text-neutral-900 dark:text-neutral-100",
+      muted: "text-neutral-500 dark:text-neutral-400",
+      primary: "text-primary-600 dark:text-primary-400",
+      secondary: "text-secondary-600 dark:text-secondary-400",
+      danger: "text-danger-600 dark:text-danger-400",
+      success: "text-success-600 dark:text-success-400",
+      warning: "text-warning-600 dark:text-warning-400",
+    },
+    size: {
+      xs: "text-xs",
+      sm: "text-sm",
+      base: "text-base",
+      lg: "text-lg",
+      xl: "text-xl",
+    },
+    weight: {
+      normal: "font-normal",
+      medium: "font-medium",
+      semibold: "font-semibold",
+      bold: "font-bold",
+    },
+  },
+  defaultVariants: {
+    variant: "body",
+  },
+});
+
+export interface TextProps
+  extends NativeTextProps,
+    VariantProps<typeof textVariants> {
+  className?: string;
+}
+
+export const Text = React.forwardRef<NativeText, TextProps>(function Text(
+  { className, variant, color, size, weight, ...props },
+  ref
+) {
+  return (
+    <NativeText
+      ref={ref}
+      className={cn(textVariants({ variant, color, size, weight }), className)}
+      {...props}
+    />
+  );
+});
+
+Text.displayName = "Text";

package/src/components/textarea/index.ts

@@ -0,0 +1 @@
+export * from "./textarea";

package/src/components/textarea/textarea.tsx

@@ -0,0 +1,87 @@
+import * as React from "react";
+import {
+  Text,
+  TextInput,
+  View,
+  type TextInputProps,
+} from "react-native";
+import { cn } from "../../utilities/cn";
+
+export interface TextareaProps
+  extends Omit<TextInputProps, "multiline"> {
+  label?: string;
+  error?: string;
+  helperText?: string;
+  disabled?: boolean;
+  rows?: number;
+  containerClassName?: string;
+  className?: string;
+  labelClassName?: string;
+}
+
+export const Textarea = React.forwardRef<TextInput, TextareaProps>(function Textarea(
+  {
+    label,
+    error,
+    helperText,
+    disabled = false,
+    rows = 4,
+    containerClassName,
+    className,
+    labelClassName,
+    placeholderTextColor,
+    accessibilityLabel,
+    ...props
+  },
+  ref
+) {
+  const minHeight = Math.max(80, rows * 22);
+
+  return (
+    <View className={cn("w-full gap-1.5", containerClassName)}>
+      {label ? (
+        <Text
+          className={cn(
+            "text-sm font-medium text-neutral-800 dark:text-neutral-200",
+            labelClassName
+          )}
+        >
+          {label}
+        </Text>
+      ) : null}
+
+      <TextInput
+        ref={ref}
+        multiline
+        textAlignVertical="top"
+        editable={!disabled}
+        accessibilityLabel={accessibilityLabel ?? label}
+        accessibilityHint={error}
+        aria-invalid={!!error}
+        placeholderTextColor={placeholderTextColor ?? "#9ca3af"}
+        style={{ minHeight }}
+        className={cn(
+          "w-full rounded-xl border bg-white dark:bg-neutral-900 text-neutral-900 dark:text-neutral-100 p-3.5 text-base",
+          error
+            ? "border-danger-500 dark:border-danger-500"
+            : "border-neutral-300 dark:border-neutral-700 focus:border-primary-500",
+          disabled && "opacity-50 bg-neutral-100 dark:bg-neutral-800",
+          className
+        )}
+        {...props}
+      />
+
+      {error ? (
+        <Text accessibilityRole="alert" className="text-xs font-medium text-danger-600 dark:text-danger-400">
+          {error}
+        </Text>
+      ) : helperText ? (
+        <Text className="text-xs text-neutral-500 dark:text-neutral-400">
+          {helperText}
+        </Text>
+      ) : null}
+    </View>
+  );
+});
+
+Textarea.displayName = "Textarea";

package/src/components/toast/index.ts

@@ -0,0 +1,2 @@
+export * from "./toast";
+export * from "./types";

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