@beyondcorp/beyond-ui-native 0.1.2 → 0.1.4

package/src/templates/settings/SettingsTemplate.tsx

@@ -0,0 +1,226 @@
+import * as React from "react";
+import {
+  View,
+  ScrollView,
+  Pressable,
+  type ViewProps,
+} from "react-native";
+import { cn } from "../../utilities/cn";
+import { Text } from "../../components/text/text";
+import { Heading } from "../../components/text/heading";
+import { Avatar, AvatarFallback, AvatarImage } from "../../components/avatar/avatar";
+import { Badge } from "../../components/badge/badge";
+import { Card } from "../../components/card/card";
+import { Switch } from "../../components/switch/switch";
+import { Button } from "../../components/button/button";
+import { Separator } from "../../components/separator/separator";
+
+export interface SettingsTemplateProps extends ViewProps {
+  user: {
+    name: string;
+    email: string;
+    avatarUrl?: string;
+    plan?: string;
+  };
+  pushNotifications?: boolean;
+  onTogglePushNotifications?: (val: boolean) => void;
+  emailNotifications?: boolean;
+  onToggleEmailNotifications?: (val: boolean) => void;
+  isDarkMode?: boolean;
+  onToggleDarkMode?: (val: boolean) => void;
+  biometricsEnabled?: boolean;
+  onToggleBiometrics?: (val: boolean) => void;
+  onEditProfile?: () => void;
+  onChangePassword?: () => void;
+  onViewTerms?: () => void;
+  onViewPrivacy?: () => void;
+  onLogout?: () => void;
+  onDeleteAccount?: () => void;
+  className?: string;
+}
+
+export const SettingsTemplate: React.FC<SettingsTemplateProps> = ({
+  user,
+  pushNotifications = true,
+  onTogglePushNotifications,
+  emailNotifications = true,
+  onToggleEmailNotifications,
+  isDarkMode = false,
+  onToggleDarkMode,
+  biometricsEnabled = false,
+  onToggleBiometrics,
+  onEditProfile,
+  onChangePassword,
+  onViewTerms,
+  onViewPrivacy,
+  onLogout,
+  onDeleteAccount,
+  className,
+  ...props
+}) => {
+  return (
+    <ScrollView
+      {...props}
+      style={[{ flex: 1 }, (props as any).style]}
+      className={cn("flex-1 bg-background", className)}
+      contentContainerStyle={{ paddingBottom: 40 }}
+      showsVerticalScrollIndicator={false}
+    >
+      <View className="px-6 pt-6 gap-6">
+        <Heading level={2} className="text-2xl font-bold text-foreground">
+          Settings & Profile
+        </Heading>
+
+        {/* User Card */}
+        <Card className="p-4 flex-row items-center gap-4">
+          <Avatar size="lg">
+            {user.avatarUrl && <AvatarImage source={{ uri: user.avatarUrl }} />}
+            <AvatarFallback text={user.name.slice(0, 2).toUpperCase()} />
+          </Avatar>
+          <View className="flex-1">
+            <View className="flex-row items-center gap-2">
+              <Text className="text-base font-bold text-foreground">{user.name}</Text>
+              {user.plan && (
+                <Badge variant="primary" size="sm">
+                  {user.plan}
+                </Badge>
+              )}
+            </View>
+            <Text className="text-xs text-muted">{user.email}</Text>
+          </View>
+          {onEditProfile && (
+            <Button variant="outline" size="sm" onPress={onEditProfile}>
+              Edit
+            </Button>
+          )}
+        </Card>
+
+        {/* Preferences Section */}
+        <View className="gap-2">
+          <Text className="text-xs font-bold text-muted uppercase tracking-wider px-1">
+            Preferences
+          </Text>
+          <Card className="divide-y divide-border/50">
+            <View className="p-4 flex-row items-center justify-between">
+              <View className="pr-4 flex-1">
+                <Text className="text-sm font-semibold text-foreground">
+                  Push Notifications
+                </Text>
+                <Text className="text-xs text-muted">
+                  Receive real-time alerts on your mobile device
+                </Text>
+              </View>
+              <Switch
+                checked={pushNotifications}
+                onCheckedChange={onTogglePushNotifications}
+              />
+            </View>
+
+            <View className="p-4 flex-row items-center justify-between">
+              <View className="pr-4 flex-1">
+                <Text className="text-sm font-semibold text-foreground">
+                  Email Notifications
+                </Text>
+                <Text className="text-xs text-muted">
+                  Weekly digests and activity summaries
+                </Text>
+              </View>
+              <Switch
+                checked={emailNotifications}
+                onCheckedChange={onToggleEmailNotifications}
+              />
+            </View>
+
+            <View className="p-4 flex-row items-center justify-between">
+              <View className="pr-4 flex-1">
+                <Text className="text-sm font-semibold text-foreground">Dark Theme</Text>
+                <Text className="text-xs text-muted">
+                  Enable high contrast dark mode appearance
+                </Text>
+              </View>
+              <Switch checked={isDarkMode} onCheckedChange={onToggleDarkMode} />
+            </View>
+
+            <View className="p-4 flex-row items-center justify-between">
+              <View className="pr-4 flex-1">
+                <Text className="text-sm font-semibold text-foreground">
+                  Biometric Login
+                </Text>
+                <Text className="text-xs text-muted">
+                  Use Face ID or fingerprint to authenticate
+                </Text>
+              </View>
+              <Switch
+                checked={biometricsEnabled}
+                onCheckedChange={onToggleBiometrics}
+              />
+            </View>
+          </Card>
+        </View>
+
+        {/* Security & Account Links */}
+        <View className="gap-2">
+          <Text className="text-xs font-bold text-muted uppercase tracking-wider px-1">
+            Account & Security
+          </Text>
+          <Card className="divide-y divide-border/50">
+            {onChangePassword && (
+              <Pressable
+                onPress={onChangePassword}
+                className="p-4 flex-row items-center justify-between active:bg-muted/10"
+              >
+                <Text className="text-sm font-semibold text-foreground">
+                  Change Password
+                </Text>
+                <Text className="text-muted text-xs">›</Text>
+              </Pressable>
+            )}
+
+            {onViewTerms && (
+              <Pressable
+                onPress={onViewTerms}
+                className="p-4 flex-row items-center justify-between active:bg-muted/10"
+              >
+                <Text className="text-sm font-semibold text-foreground">
+                  Terms of Service
+                </Text>
+                <Text className="text-muted text-xs">›</Text>
+              </Pressable>
+            )}
+
+            {onViewPrivacy && (
+              <Pressable
+                onPress={onViewPrivacy}
+                className="p-4 flex-row items-center justify-between active:bg-muted/10"
+              >
+                <Text className="text-sm font-semibold text-foreground">
+                  Privacy Policy
+                </Text>
+                <Text className="text-muted text-xs">›</Text>
+              </Pressable>
+            )}
+          </Card>
+        </View>
+
+        {/* Danger Zone */}
+        <View className="gap-3 pt-2">
+          {onLogout && (
+            <Button variant="outline" size="lg" onPress={onLogout}>
+              Log Out
+            </Button>
+          )}
+
+          {onDeleteAccount && (
+            <Button
+              variant="destructive"
+              size="lg"
+              onPress={onDeleteAccount}
+            >
+              Delete Account
+            </Button>
+          )}
+        </View>
+      </View>
+    </ScrollView>
+  );
+};

package/src/templates/settings/index.ts

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

package/src/theme/preset.ts

@@ -0,0 +1,45 @@
+import { tokens } from "./tokens";
+
+export { tokens };
+
+export const beyondUIPreset = {
+  darkMode: "class",
+  theme: {
+    extend: {
+      colors: {
+        primary: tokens.colors.primary,
+        secondary: tokens.colors.secondary,
+        danger: tokens.colors.danger,
+        destructive: tokens.colors.destructive,
+        success: tokens.colors.success,
+        warning: tokens.colors.warning,
+        neutral: tokens.colors.neutral,
+        background: tokens.colors.semantic.light.background,
+        foreground: tokens.colors.semantic.light.foreground,
+        card: {
+          DEFAULT: tokens.colors.semantic.light.card,
+          foreground: tokens.colors.semantic.light.cardForeground,
+        },
+        cardForeground: tokens.colors.semantic.light.cardForeground,
+        muted: {
+          DEFAULT: tokens.colors.semantic.light.mutedForeground,
+          foreground: tokens.colors.semantic.light.mutedForeground,
+        },
+        mutedForeground: tokens.colors.semantic.light.mutedForeground,
+        border: tokens.colors.semantic.light.border,
+        input: tokens.colors.semantic.light.input,
+      },
+      borderRadius: {
+        none: "0px",
+        sm: `${tokens.radius.sm}px`,
+        md: `${tokens.radius.md}px`,
+        lg: `${tokens.radius.lg}px`,
+        xl: `${tokens.radius.xl}px`,
+        "2xl": `${tokens.radius["2xl"]}px`,
+        full: "9999px",
+      },
+    },
+  },
+};
+
+export default beyondUIPreset;

package/src/theme/tokens.ts

@@ -0,0 +1,144 @@
+export const tokens = {
+  colors: {
+    primary: {
+      50: "#eff6ff",
+      100: "#dbeafe",
+      200: "#bfdbfe",
+      300: "#93c5fd",
+      400: "#60a5fa",
+      500: "#3b82f6",
+      600: "#2563eb",
+      700: "#1d4ed8",
+      800: "#1e40af",
+      900: "#1e3a8a",
+      950: "#172554",
+      DEFAULT: "#2563eb",
+    },
+    secondary: {
+      50: "#f8fafc",
+      100: "#f1f5f9",
+      200: "#e2e8f0",
+      300: "#cbd5e1",
+      400: "#94a3b8",
+      500: "#64748b",
+      600: "#475569",
+      700: "#334155",
+      800: "#1e293b",
+      900: "#0f172a",
+      950: "#020617",
+      DEFAULT: "#475569",
+    },
+    danger: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d",
+      950: "#450a0a",
+      DEFAULT: "#dc2626",
+    },
+    // Alias for shadcn / React Native convention compatibility
+    destructive: {
+      50: "#fef2f2",
+      100: "#fee2e2",
+      200: "#fecaca",
+      300: "#fca5a5",
+      400: "#f87171",
+      500: "#ef4444",
+      600: "#dc2626",
+      700: "#b91c1c",
+      800: "#991b1b",
+      900: "#7f1d1d",
+      950: "#450a0a",
+      DEFAULT: "#dc2626",
+    },
+    success: {
+      50: "#f0fdf4",
+      100: "#dcfce7",
+      200: "#bbf7d0",
+      300: "#86efac",
+      400: "#4ade80",
+      500: "#22c55e",
+      600: "#16a34a",
+      700: "#15803d",
+      800: "#166534",
+      900: "#14532d",
+      950: "#052e16",
+      DEFAULT: "#16a34a",
+    },
+    warning: {
+      50: "#fffbeb",
+      100: "#fef3c7",
+      200: "#fde68a",
+      300: "#fcd34d",
+      400: "#fbbf24",
+      500: "#f59e0b",
+      600: "#d97706",
+      700: "#b45309",
+      800: "#92400e",
+      900: "#78350f",
+      950: "#451a03",
+      DEFAULT: "#d97706",
+    },
+    neutral: {
+      50: "#f9fafb",
+      100: "#f3f4f6",
+      200: "#e5e7eb",
+      300: "#d1d5db",
+      400: "#9ca3af",
+      500: "#6b7280",
+      600: "#4b5563",
+      700: "#374151",
+      800: "#1f2937",
+      900: "#111827",
+      950: "#030712",
+    },
+    semantic: {
+      light: {
+        background: "#ffffff",
+        foreground: "#0f172a",
+        card: "#ffffff",
+        cardForeground: "#0f172a",
+        muted: "#f8fafc",
+        mutedForeground: "#64748b",
+        border: "#e2e8f0",
+        input: "#e2e8f0",
+      },
+      dark: {
+        background: "#090d16",
+        foreground: "#f8fafc",
+        card: "#0f172a",
+        cardForeground: "#f8fafc",
+        muted: "#1e293b",
+        mutedForeground: "#94a3b8",
+        border: "#334155",
+        input: "#334155",
+      },
+    },
+  },
+  radius: {
+    none: 0,
+    sm: 6,
+    md: 10,
+    lg: 14,
+    xl: 20,
+    "2xl": 28,
+    full: 9999,
+  },
+  spacing: {
+    xs: 4,
+    sm: 8,
+    md: 12,
+    lg: 16,
+    xl: 24,
+    "2xl": 32,
+    "3xl": 48,
+  },
+} as const;
+
+export type BeyondUITokens = typeof tokens;

package/src/types/nativewind-env.d.ts

@@ -0,0 +1,26 @@
+/// <reference types="nativewind/types" />
+
+import "react-native";
+
+declare module "react-native" {
+  interface ViewProps {
+    className?: string;
+  }
+  interface TextProps {
+    className?: string;
+  }
+  interface TextInputProps {
+    className?: string;
+    placeholderClassName?: string;
+  }
+  interface PressableProps {
+    className?: string;
+  }
+  interface ScrollViewProps {
+    className?: string;
+    contentContainerClassName?: string;
+  }
+  interface ImageProps {
+    className?: string;
+  }
+}

package/src/utilities/accessibility.ts

@@ -0,0 +1,43 @@
+import type { AccessibilityRole, AccessibilityState } from "react-native";
+
+export interface AccessibilityPropsOptions {
+  label?: string;
+  hint?: string;
+  role?: AccessibilityRole;
+  disabled?: boolean;
+  selected?: boolean;
+  checked?: boolean | "mixed";
+  busy?: boolean;
+  expanded?: boolean;
+}
+
+/**
+ * Helper to construct accessible props for React Native components.
+ */
+export function getAccessibilityProps(options: AccessibilityPropsOptions = {}) {
+  const { label, hint, role, disabled, selected, checked, busy, expanded } = options;
+
+  const state: AccessibilityState = {};
+  if (disabled !== undefined) state.disabled = disabled;
+  if (selected !== undefined) state.selected = selected;
+  if (checked !== undefined) state.checked = checked;
+  if (busy !== undefined) state.busy = busy;
+  if (expanded !== undefined) state.expanded = expanded;
+
+  const hasState = Object.keys(state).length > 0;
+
+  return {
+    accessible: true,
+    ...(label ? { accessibilityLabel: label } : {}),
+    ...(hint ? { accessibilityHint: hint } : {}),
+    ...(role ? { accessibilityRole: role } : {}),
+    ...(hasState ? { accessibilityState: state } : {}),
+  };
+}
+
+/**
+ * Format a visually hidden text string or accessibility label from parts.
+ */
+export function joinA11yLabels(...parts: (string | undefined | null | false)[]): string {
+  return parts.filter(Boolean).join(", ");
+}

package/src/utilities/cn.ts

@@ -0,0 +1,9 @@
+import { type ClassValue, clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+/**
+ * Merges class names with tailwind-merge to avoid style collisions in NativeWind.
+ */
+export function cn(...inputs: ClassValue[]): string {
+  return twMerge(clsx(inputs));
+}

package/src/utilities/index.ts

@@ -0,0 +1,2 @@
+export * from "./cn";
+export * from "./accessibility";