@beyondcorp/beyond-ui-native 0.1.2 → 0.1.4

package/src/components/spinner/index.ts

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

package/src/components/spinner/spinner.tsx

@@ -0,0 +1,46 @@
+import * as React from "react";
+import { ActivityIndicator, View, type ViewProps } from "react-native";
+import { cn } from "../../utilities/cn";
+
+export type SpinnerColor =
+  | "primary"
+  | "secondary"
+  | "danger"
+  | "success"
+  | "warning"
+  | "white"
+  | "muted";
+
+export interface SpinnerProps extends ViewProps {
+  size?: "sm" | "md" | "lg";
+  color?: SpinnerColor;
+  className?: string;
+}
+
+const colorMap: Record<SpinnerColor, string> = {
+  primary: "#2563eb",
+  secondary: "#475569",
+  danger: "#dc2626",
+  success: "#16a34a",
+  warning: "#d97706",
+  white: "#ffffff",
+  muted: "#94a3b8",
+};
+
+export function Spinner({
+  size = "md",
+  color = "primary",
+  className,
+  ...props
+}: SpinnerProps) {
+  const nativeSize = size === "lg" ? "large" : "small";
+  const hexColor = colorMap[color] ?? colorMap.primary;
+
+  return (
+    <View className={cn("items-center justify-center", className)} {...props}>
+      <ActivityIndicator size={nativeSize} color={hexColor} />
+    </View>
+  );
+}
+
+Spinner.displayName = "Spinner";

package/src/components/stats-card/index.ts

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

package/src/components/stats-card/stats-card.tsx

@@ -0,0 +1,92 @@
+import * as React from "react";
+import { View, Text, type ViewProps } from "react-native";
+import { cn } from "../../utilities/cn";
+import { Card, CardContent } from "../card/card";
+
+export type TrendDirection = "up" | "down" | "neutral";
+
+export interface StatsCardProps extends ViewProps {
+  title: string;
+  value: string | number;
+  trend?: {
+    direction: TrendDirection;
+    value: string | number;
+    label?: string;
+  };
+  icon?: React.ReactNode;
+  className?: string;
+}
+
+export function StatsCard({
+  title,
+  value,
+  trend,
+  icon,
+  className,
+  ...props
+}: StatsCardProps) {
+  const isUp = trend?.direction === "up";
+  const isDown = trend?.direction === "down";
+
+  return (
+    <Card className={cn("w-full shadow-sm", className)} {...props}>
+      <CardContent className="p-4">
+        <View className="flex-row items-center justify-between mb-2">
+          <Text className="text-sm font-medium text-neutral-500 dark:text-neutral-400">
+            {title}
+          </Text>
+          {icon ? (
+            <View className="h-9 w-9 rounded-xl bg-neutral-100 dark:bg-neutral-800 items-center justify-center">
+              {icon}
+            </View>
+          ) : null}
+        </View>
+
+        <Text className="text-2xl font-extrabold tracking-tight text-neutral-900 dark:text-neutral-50 mb-2">
+          {value}
+        </Text>
+
+        {trend ? (
+          <View className="flex-row items-center gap-1.5 flex-wrap">
+            <View
+              className={cn(
+                "flex-row items-center rounded-md px-1.5 py-0.5",
+                isUp && "bg-success-100 dark:bg-success-950/60",
+                isDown && "bg-danger-100 dark:bg-danger-950/60",
+                !isUp && !isDown && "bg-neutral-100 dark:bg-neutral-800"
+              )}
+            >
+              <Text
+                className={cn(
+                  "text-xs font-bold mr-1",
+                  isUp && "text-success-700 dark:text-success-300",
+                  isDown && "text-danger-700 dark:text-danger-300",
+                  !isUp && !isDown && "text-neutral-600 dark:text-neutral-400"
+                )}
+              >
+                {isUp ? "↑" : isDown ? "↓" : "—"}
+              </Text>
+              <Text
+                className={cn(
+                  "text-xs font-semibold",
+                  isUp && "text-success-700 dark:text-success-300",
+                  isDown && "text-danger-700 dark:text-danger-300",
+                  !isUp && !isDown && "text-neutral-600 dark:text-neutral-400"
+                )}
+              >
+                {trend.value}
+              </Text>
+            </View>
+            {trend.label ? (
+              <Text className="text-xs text-neutral-500 dark:text-neutral-400">
+                {trend.label}
+              </Text>
+            ) : null}
+          </View>
+        ) : null}
+      </CardContent>
+    </Card>
+  );
+}
+
+StatsCard.displayName = "StatsCard";

package/src/components/switch/index.ts

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

package/src/components/switch/switch.tsx

@@ -0,0 +1,80 @@
+import * as React from "react";
+import {
+  Pressable,
+  View,
+  type GestureResponderEvent,
+  type PressableProps,
+} from "react-native";
+import { cn } from "../../utilities/cn";
+
+export interface SwitchProps extends Omit<PressableProps, "onPress"> {
+  checked?: boolean;
+  defaultChecked?: boolean;
+  onCheckedChange?: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  thumbClassName?: string;
+  onPress?: (event: GestureResponderEvent) => void;
+}
+
+export const Switch = React.forwardRef<
+  React.ElementRef<typeof Pressable>,
+  SwitchProps
+>(function Switch(
+  {
+    checked: controlledChecked,
+    defaultChecked = false,
+    onCheckedChange,
+    disabled = false,
+    className,
+    thumbClassName,
+    onPress,
+    ...props
+  },
+  ref
+) {
+  const [uncontrolledChecked, setUncontrolledChecked] = React.useState(defaultChecked);
+  const isControlled = controlledChecked !== undefined;
+  const isChecked = isControlled ? controlledChecked : uncontrolledChecked;
+
+  const handlePress = (e: GestureResponderEvent) => {
+    if (disabled) return;
+    const nextChecked = !isChecked;
+    if (!isControlled) {
+      setUncontrolledChecked(nextChecked);
+    }
+    onCheckedChange?.(nextChecked);
+    onPress?.(e);
+  };
+
+  return (
+    <Pressable
+      ref={ref}
+      role="switch"
+      accessibilityRole="switch"
+      accessibilityState={{ checked: isChecked, disabled: !!disabled }}
+      disabled={disabled}
+      onPress={handlePress}
+      className={cn(
+        "h-7 w-12 shrink-0 flex-row items-center rounded-full p-0.5 transition-colors",
+        isChecked
+          ? "bg-primary-600 dark:bg-primary-600"
+          : "bg-neutral-300 dark:bg-neutral-700",
+        disabled && "opacity-50",
+        className
+      )}
+      {...props}
+    >
+      <View
+        role="presentation"
+        className={cn(
+          "h-6 w-6 rounded-full bg-white shadow-sm transition-transform",
+          isChecked ? "translate-x-5" : "translate-x-0",
+          thumbClassName
+        )}
+      />
+    </Pressable>
+  );
+});
+
+Switch.displayName = "Switch";

package/src/components/tabs/index.ts

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

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