@entropy-softworks/ui 2026.7.31

package/src/components/auth/ProtectedRoute.tsx

@@ -0,0 +1,91 @@
+import React, { useEffect } from "react";
+import { ActivityIndicator, View } from "react-native";
+import { type Href } from "expo-router";
+import { useNavigation } from "../../context/NavigationContext";
+import { useColorScheme } from "nativewind";
+import { useAuth, useRole } from "../../hooks/useAuth";
+import { useAppConfig } from "../../context/AppConfigContext";
+
+interface ProtectedRouteProps {
+  children: React.ReactNode;
+  requiredRole?: "Admin" | "User";
+  redirectTo?: Href;
+  fallback?: React.ReactNode;
+}
+
+export function ProtectedRoute({
+  children,
+  requiredRole,
+  redirectTo,
+  fallback,
+}: ProtectedRouteProps) {
+  const { isAuthenticated, isLoading, user } = useAuth();
+  const router = useNavigation();
+  const { routes } = useAppConfig();
+  const hasRequiredRole = useRole(requiredRole || "User");
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  useEffect(() => {
+    if (!isLoading) {
+      if (!isAuthenticated) {
+        router.replace((redirectTo ?? routes.login) as Href);
+      } else if (requiredRole && !hasRequiredRole) {
+        router.replace(routes.home);
+      }
+    }
+  }, [isAuthenticated, isLoading, hasRequiredRole, requiredRole, user, router, redirectTo, routes]);
+
+  if (isLoading) {
+    if (fallback) {
+      return <>{fallback}</>;
+    }
+    return (
+      <View className="flex-1 items-center justify-center bg-background">
+        <ActivityIndicator size="large" color={isDark ? "#FFFFFF" : "#000000"} />
+      </View>
+    );
+  }
+
+  if (!isAuthenticated || (requiredRole && !hasRequiredRole)) {
+    return null;
+  }
+
+  return <>{children}</>;
+}
+
+export function withAuth<P extends object>(
+  Component: React.ComponentType<P>,
+  options?: {
+    requiredRole?: "Admin" | "User";
+    redirectTo?: Href;
+    fallback?: React.ReactNode;
+  }
+) {
+  const ProtectedComponent = function ProtectedComponent(props: P) {
+    return (
+      <ProtectedRoute
+        requiredRole={options?.requiredRole}
+        redirectTo={options?.redirectTo}
+        fallback={options?.fallback}
+      >
+        <Component {...props} />
+      </ProtectedRoute>
+    );
+  };
+  ProtectedComponent.displayName = `withAuth(${Component.displayName || Component.name || "Component"})`;
+  return ProtectedComponent;
+}
+
+export function useProtectedContent(requiredRole?: "Admin" | "User") {
+  const { isAuthenticated, isLoading, user } = useAuth();
+  const hasRole = useRole(requiredRole || "User");
+
+  return {
+    canAccess: isAuthenticated && (!requiredRole || hasRole),
+    isLoading,
+    user,
+  };
+}
+
+export default ProtectedRoute;

package/src/components/auth/PwnedPasswordWarning.tsx

@@ -0,0 +1,54 @@
+import React from "react";
+import { View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { Text } from "../../components/text";
+
+interface PwnedPasswordInfo {
+  title: string;
+  message: string;
+  severity: "error" | "warning" | "info";
+  count: number;
+}
+
+interface PwnedPasswordWarningProps {
+  pwnedInfo: PwnedPasswordInfo | null;
+}
+
+export default function PwnedPasswordWarning({ pwnedInfo }: PwnedPasswordWarningProps) {
+  if (!pwnedInfo) {
+    return null;
+  }
+
+  const iconName =
+    pwnedInfo.severity === "error"
+      ? "warning"
+      : pwnedInfo.severity === "warning"
+        ? "alert-circle"
+        : "information-circle";
+
+  const iconColor =
+    pwnedInfo.severity === "error"
+      ? "#EF4444"
+      : pwnedInfo.severity === "warning"
+        ? "#F59E0B"
+        : "#3B82F6";
+
+  const textClass =
+    pwnedInfo.severity === "error"
+      ? "text-red-500 dark:text-red-400"
+      : pwnedInfo.severity === "warning"
+        ? "text-amber-500 dark:text-amber-400"
+        : "text-blue-500 dark:text-blue-400";
+
+  return (
+    <View className="mt-1 flex-row items-start gap-1.5">
+      <Ionicons
+        name={iconName as keyof typeof Ionicons.glyphMap}
+        size={14}
+        color={iconColor}
+        style={{ marginTop: 2 }}
+      />
+      <Text className={`flex-1 text-xs ${textClass}`}>{pwnedInfo.message}</Text>
+    </View>
+  );
+}

package/src/components/auth/index.ts

@@ -0,0 +1,10 @@
+export { LockOverlay } from "./LockOverlay";
+
+export {
+  default as PasswordStrengthMeter,
+  calculatePasswordStrength,
+} from "./PasswordStrengthMeter";
+
+export { default as PwnedPasswordWarning } from "./PwnedPasswordWarning";
+
+export { default as ProtectedRoute, withAuth, useProtectedContent } from "./ProtectedRoute";

package/src/components/bottom-nav.tsx

@@ -0,0 +1,99 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import { Text } from "./text";
+
+export interface BottomNavItem<T extends string = string> {
+  id: T;
+  label: string;
+  /** Ionicons glyph name (active state). */
+  icon: keyof typeof Ionicons.glyphMap;
+  /** Optional outline variant for the inactive state. Defaults to `icon`. */
+  iconOutline?: keyof typeof Ionicons.glyphMap;
+  /** When false the tab is hidden from the strip. */
+  visible?: boolean;
+}
+
+export interface BottomNavProps<T extends string = string> {
+  items: BottomNavItem<T>[];
+  active: T;
+  onChange: (tab: T) => void;
+}
+
+/**
+ * Sticky tab strip used in the extension popup and small-window
+ * surfaces. Hidden items collapse the strip naturally; supply the
+ * `iconOutline` variant for the inactive state when an icon needs a
+ * different glyph.
+ */
+export function BottomNav<T extends string = string>({
+  items,
+  active,
+  onChange,
+}: BottomNavProps<T>) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const borderColor = isDark ? "rgb(38, 38, 38)" : "rgb(229, 229, 229)";
+  const backgroundColor = isDark ? "rgb(0, 0, 0)" : "rgb(255, 255, 255)";
+
+  return (
+    <View
+      style={{
+        flexDirection: "row",
+        borderTopWidth: 1,
+        borderTopColor: borderColor,
+        backgroundColor,
+      }}
+    >
+      {items
+        .filter((t) => t.visible !== false)
+        .map((t) => (
+          <NavTab
+            key={t.id}
+            label={t.label}
+            iconName={t.id === active ? t.icon : (t.iconOutline ?? t.icon)}
+            active={t.id === active}
+            onPress={() => onChange(t.id)}
+          />
+        ))}
+    </View>
+  );
+}
+
+interface NavTabProps {
+  label: string;
+  iconName: keyof typeof Ionicons.glyphMap;
+  active: boolean;
+  onPress: () => void;
+}
+
+function NavTab({ label, iconName, active, onPress }: NavTabProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const tint = active
+    ? isDark
+      ? "rgb(255, 255, 255)"
+      : "rgb(0, 0, 0)"
+    : isDark
+      ? "rgb(163, 163, 163)"
+      : "rgb(115, 115, 115)";
+  const pressedBg = isDark ? "rgb(38, 38, 38)" : "rgb(245, 245, 245)";
+
+  return (
+    <Pressable
+      onPress={onPress}
+      style={({ pressed }) => ({
+        flex: 1,
+        paddingVertical: 8,
+        alignItems: "center",
+        justifyContent: "center",
+        gap: 2,
+        backgroundColor: pressed ? pressedBg : "transparent",
+      })}
+    >
+      <Ionicons name={iconName} size={18} color={tint} />
+      <Text style={{ color: tint, fontSize: 10, fontWeight: active ? "600" : "400" }}>{label}</Text>
+    </Pressable>
+  );
+}

package/src/components/button.tsx

@@ -0,0 +1,144 @@
+import React from "react";
+import { ActivityIndicator, Pressable, type PressableProps, Text as RNText } from "react-native";
+import Animated, { useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { useColorScheme } from "nativewind";
+import { cn } from "../utils/cn";
+
+export interface ButtonProps extends Omit<PressableProps, "className" | "style"> {
+  variant?: "default" | "ghost" | "outline" | "destructive";
+  size?: "sm" | "default" | "lg";
+  className?: string;
+  textClassName?: string;
+  children?: React.ReactNode;
+  isLoading?: boolean;
+  disabled?: boolean;
+  /** Override the loading spinner colour (otherwise derived from the variant). */
+  spinnerColor?: string;
+}
+
+const sizeClass = { sm: "h-10 px-4", default: "h-12 px-4", lg: "h-14 px-6" } as const;
+const textSizeClass = { sm: "text-sm", default: "text-base", lg: "text-lg" } as const;
+
+// Colours are driven by the active theme's CSS variables (`--primary`,
+// `--destructive`, …) so each consuming app's palette flows through without
+// the component hardcoding anything.
+const bgClass = {
+  default: "bg-primary",
+  destructive: "bg-destructive",
+  outline: "border border-border bg-transparent",
+  ghost: "bg-transparent",
+} as const;
+
+const fgClass = {
+  default: "text-primary-foreground",
+  destructive: "text-destructive-foreground",
+  outline: "text-foreground",
+  ghost: "text-foreground",
+} as const;
+
+export function Button({
+  variant = "default",
+  size = "default",
+  className,
+  textClassName,
+  children,
+  isLoading = false,
+  disabled = false,
+  spinnerColor,
+  onPressIn,
+  onPressOut,
+  ...props
+}: ButtonProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const isDisabled = disabled || isLoading;
+
+  // Reanimated feedback shared by every button: hover (web) lifts slightly,
+  // press dips + dims — two distinct, layered responses.
+  const pressed = useSharedValue(0);
+  const hovered = useSharedValue(0);
+  const pressStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 + hovered.value * 0.025 - pressed.value * 0.06 }],
+    opacity: 1 - pressed.value * 0.08,
+  }));
+
+  const spinner =
+    spinnerColor ??
+    (variant === "default"
+      ? isDark
+        ? "#000000"
+        : "#FFFFFF"
+      : variant === "destructive"
+        ? "#FFFFFF"
+        : isDark
+          ? "#FFFFFF"
+          : "#000000");
+
+  return (
+    <Animated.View style={pressStyle} className={isDisabled ? "opacity-50" : undefined}>
+      <Pressable
+        className={cn(
+          "flex-row items-center justify-center rounded-lg",
+          sizeClass[size],
+          bgClass[variant],
+          className
+        )}
+        disabled={isDisabled}
+        onPressIn={(e) => {
+          pressed.value = withTiming(1, { duration: 90 });
+          onPressIn?.(e);
+        }}
+        onPressOut={(e) => {
+          pressed.value = withTiming(0, { duration: 150 });
+          onPressOut?.(e);
+        }}
+        onHoverIn={() => (hovered.value = withTiming(1, { duration: 120 }))}
+        onHoverOut={() => (hovered.value = withTiming(0, { duration: 160 }))}
+        {...props}
+        focusable={!isDisabled}
+        accessibilityState={{ disabled: isDisabled, busy: isLoading }}
+      >
+        {isLoading ? (
+          <ActivityIndicator size="small" color={spinner} />
+        ) : typeof children === "string" ? (
+          <RNText
+            className={cn("font-sans-medium", textSizeClass[size], fgClass[variant], textClassName)}
+          >
+            {children}
+          </RNText>
+        ) : (
+          children
+        )}
+      </Pressable>
+    </Animated.View>
+  );
+}
+
+export function IconButton({ size = "default", children, className, ...props }: ButtonProps) {
+  const dim = { sm: 40, default: 48, lg: 56 }[size];
+  const isDisabled = props.disabled || props.isLoading;
+  const pressed = useSharedValue(0);
+  const hovered = useSharedValue(0);
+  const pressStyle = useAnimatedStyle(() => ({
+    transform: [{ scale: 1 + hovered.value * 0.06 - pressed.value * 0.08 }],
+  }));
+
+  return (
+    <Animated.View style={pressStyle} className={isDisabled ? "opacity-50" : undefined}>
+      <Pressable
+        className={cn("items-center justify-center rounded-lg", className)}
+        style={{ width: dim, height: dim }}
+        disabled={isDisabled}
+        onPressIn={() => (pressed.value = withTiming(1, { duration: 90 }))}
+        onPressOut={() => (pressed.value = withTiming(0, { duration: 150 }))}
+        onHoverIn={() => (hovered.value = withTiming(1, { duration: 120 }))}
+        onHoverOut={() => (hovered.value = withTiming(0, { duration: 160 }))}
+        {...props}
+        focusable={!isDisabled}
+        accessibilityState={{ disabled: isDisabled, busy: props.isLoading }}
+      >
+        {children}
+      </Pressable>
+    </Animated.View>
+  );
+}

package/src/components/card.tsx

@@ -0,0 +1,82 @@
+import React from "react";
+import { View, type ViewProps } from "react-native";
+import { cn } from "../utils/cn";
+import { Text } from "./text";
+
+export interface CardProps extends ViewProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+/** Card container with border and shadow. Dark-mode aware. */
+export function Card({ className, children, ...props }: CardProps) {
+  return (
+    <View
+      className={cn(
+        "rounded-lg border border-border bg-card dark:bg-neutral-900/50",
+        "shadow-sm shadow-foreground/10",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+
+export function CardHeader({ className, children, ...props }: CardProps) {
+  return (
+    <View className={cn("p-6 pb-4", className)} {...props}>
+      {children}
+    </View>
+  );
+}
+
+export function CardContent({ className, children, ...props }: CardProps) {
+  return (
+    <View className={cn("px-6 pb-6", className)} {...props}>
+      {children}
+    </View>
+  );
+}
+
+export function CardFooter({ className, children, ...props }: CardProps) {
+  return (
+    <View
+      className={cn(
+        "flex-row items-center justify-end px-6 pb-6 pt-2",
+        "border-t border-border dark:border-neutral-800",
+        className
+      )}
+      {...props}
+    >
+      {children}
+    </View>
+  );
+}
+
+export interface CardTitleProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function CardTitle({ className, children }: CardTitleProps) {
+  return (
+    <Text className={cn("text-xl font-semibold text-foreground dark:text-white", className)}>
+      {children}
+    </Text>
+  );
+}
+
+export interface CardDescriptionProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+export function CardDescription({ className, children }: CardDescriptionProps) {
+  return (
+    <Text className={cn("text-sm text-muted-foreground dark:text-neutral-400 mt-2", className)}>
+      {children}
+    </Text>
+  );
+}

package/src/components/checkbox.tsx

@@ -0,0 +1,48 @@
+import React from "react";
+import * as CheckboxPrimitive from "@rn-primitives/checkbox";
+import { Ionicons } from "@expo/vector-icons";
+import { cn } from "../utils/cn";
+import { useColorScheme } from "nativewind";
+
+interface CheckboxProps {
+  checked: boolean;
+  onCheckedChange: (checked: boolean) => void;
+  disabled?: boolean;
+  className?: string;
+  accessibilityLabel?: string;
+  accessibilityRole?: "checkbox" | "none";
+}
+
+function Checkbox({
+  checked,
+  onCheckedChange,
+  disabled,
+  className,
+  accessibilityLabel,
+  accessibilityRole,
+}: CheckboxProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  return (
+    <CheckboxPrimitive.Root
+      checked={checked}
+      onCheckedChange={onCheckedChange}
+      disabled={disabled}
+      accessibilityLabel={accessibilityLabel}
+      accessibilityRole={accessibilityRole}
+      className={cn(
+        "h-5 w-5 rounded items-center justify-center",
+        checked ? "bg-primary dark:bg-white" : "border border-input dark:border-neutral-600",
+        disabled && "opacity-50",
+        className
+      )}
+    >
+      <CheckboxPrimitive.Indicator>
+        <Ionicons name="checkmark" size={14} color={isDark ? "#000000" : "#ffffff"} />
+      </CheckboxPrimitive.Indicator>
+    </CheckboxPrimitive.Root>
+  );
+}
+
+export { Checkbox };