@entropy-softworks/ui 2026.7.31

package/src/components/pagination.tsx

@@ -0,0 +1,154 @@
+import React from "react";
+import { View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import { cn } from "../utils/cn";
+import { Button } from "./button";
+import { MutedText } from "./text";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from "./dropdown-menu";
+
+export interface PaginationProps {
+  /** Current page, 1-based. */
+  page: number;
+  /** Number of rows per page. Used to derive total pages from `totalItems`. */
+  pageSize: number;
+  /** Total number of items across all pages. */
+  totalItems: number;
+  /** Called with the next page (1-based) when prev/next is pressed. */
+  onPageChange: (page: number) => void;
+  /**
+   * Page-size choices. When provided (and `onPageSizeChange` is set) a
+   * size selector renders, built on the existing `DropdownMenu` primitive.
+   */
+  pageSizeOptions?: number[];
+  onPageSizeChange?: (pageSize: number) => void;
+  className?: string;
+}
+
+export interface PaginationState {
+  totalPages: number;
+  /** Clamped current page (never below 1, never above totalPages). */
+  currentPage: number;
+  canPrev: boolean;
+  canNext: boolean;
+  /** 1-based index of the first item on the current page (0 when empty). */
+  rangeStart: number;
+  /** 1-based index of the last item on the current page (0 when empty). */
+  rangeEnd: number;
+}
+
+/**
+ * Pure pagination maths, separated from the view so it can be unit-tested
+ * without a render host. Tolerates degenerate inputs (zero items, negative
+ * page, oversized page) by clamping.
+ */
+export function getPaginationState(
+  page: number,
+  pageSize: number,
+  totalItems: number
+): PaginationState {
+  const safeSize = Math.max(1, Math.floor(pageSize));
+  const safeTotal = Math.max(0, Math.floor(totalItems));
+  const totalPages = Math.max(1, Math.ceil(safeTotal / safeSize));
+  const currentPage = Math.min(Math.max(1, Math.floor(page) || 1), totalPages);
+  const rangeStart = safeTotal === 0 ? 0 : (currentPage - 1) * safeSize + 1;
+  const rangeEnd = Math.min(currentPage * safeSize, safeTotal);
+  return {
+    totalPages,
+    currentPage,
+    canPrev: currentPage > 1,
+    canNext: currentPage < totalPages,
+    rangeStart,
+    rangeEnd,
+  };
+}
+
+/**
+ * Page controls for paginated lists/tables: prev/next, a "X–Y of Z" summary,
+ * and an optional page-size selector. Disabled states are derived from the
+ * clamped pagination state and exposed to assistive tech via
+ * `accessibilityState`.
+ */
+export function Pagination({
+  page,
+  pageSize,
+  totalItems,
+  onPageChange,
+  pageSizeOptions,
+  onPageSizeChange,
+  className,
+}: PaginationProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const iconColor = isDark ? "#FFFFFF" : "#000000";
+
+  const { totalPages, currentPage, canPrev, canNext, rangeStart, rangeEnd } = getPaginationState(
+    page,
+    pageSize,
+    totalItems
+  );
+
+  const showSizeSelector = !!pageSizeOptions && pageSizeOptions.length > 0 && !!onPageSizeChange;
+
+  return (
+    <View className={cn("flex-row items-center justify-between gap-3", className)}>
+      <View className="flex-row items-center gap-3">
+        <MutedText className="text-sm">
+          {totalItems === 0 ? "No items" : `${rangeStart}–${rangeEnd} of ${totalItems}`}
+        </MutedText>
+        {showSizeSelector ? (
+          <DropdownMenu>
+            <DropdownMenuTrigger asChild>
+              <Button
+                variant="outline"
+                size="sm"
+                accessibilityRole="button"
+                accessibilityLabel={`Rows per page, currently ${pageSize}`}
+              >
+                {`${pageSize} / page`}
+              </Button>
+            </DropdownMenuTrigger>
+            <DropdownMenuContent>
+              {pageSizeOptions.map((size) => (
+                <DropdownMenuItem key={size} onPress={() => onPageSizeChange(size)}>
+                  <MutedText className="text-sm text-foreground">{`${size} / page`}</MutedText>
+                </DropdownMenuItem>
+              ))}
+            </DropdownMenuContent>
+          </DropdownMenu>
+        ) : null}
+      </View>
+
+      <View className="flex-row items-center gap-2">
+        <MutedText className="text-sm">{`Page ${currentPage} of ${totalPages}`}</MutedText>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={!canPrev}
+          onPress={() => onPageChange(currentPage - 1)}
+          accessibilityRole="button"
+          accessibilityLabel="Previous page"
+          accessibilityState={{ disabled: !canPrev }}
+        >
+          <Ionicons name="chevron-back" size={18} color={iconColor} />
+        </Button>
+        <Button
+          variant="outline"
+          size="sm"
+          disabled={!canNext}
+          onPress={() => onPageChange(currentPage + 1)}
+          accessibilityRole="button"
+          accessibilityLabel="Next page"
+          accessibilityState={{ disabled: !canNext }}
+        >
+          <Ionicons name="chevron-forward" size={18} color={iconColor} />
+        </Button>
+      </View>
+    </View>
+  );
+}

package/src/components/password-generator.tsx

@@ -0,0 +1,393 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { ActivityIndicator, Platform, Pressable, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import * as Haptics from "expo-haptics";
+import Slider from "@react-native-community/slider";
+import Toast from "react-native-toast-message";
+import { Text } from "./text";
+import { copyToClipboard } from "../utils/clipboard";
+import { generatePassword } from "../utils/password";
+import { checkPasswordPwned } from "../services/hibp";
+
+// A randomly drawn password being in a breach corpus is astronomically
+// unlikely, but if it ever hits, regenerate until clean — capped so a
+// misbehaving API can't loop forever.
+const MAX_BREACH_REGEN = 5;
+type BreachState = "idle" | "checking" | "safe" | "unverified";
+
+const isWeb = Platform.OS === "web";
+
+export interface PasswordGeneratorProps {
+  /** Called when the user taps "Use Password" (only shown when `onSelect` is provided). */
+  onSelect?: (password: string) => void;
+  /** Hide the copy button (useful in embedded / inline mode). */
+  hideCopy?: boolean;
+}
+
+/**
+ * UI shell over `utils/password.generatePassword`. Owns length slider,
+ * character-set toggles, copy-to-clipboard (via shared util with auto-
+ * clear), and a coarse strength indicator.
+ */
+export const PasswordGenerator = React.memo(function PasswordGenerator({
+  onSelect,
+  hideCopy,
+}: PasswordGeneratorProps) {
+  const [password, setPassword] = useState("");
+  const [length, setLength] = useState(16);
+  const [includeUppercase, setIncludeUppercase] = useState(true);
+  const [includeLowercase, setIncludeLowercase] = useState(true);
+  const [includeNumbers, setIncludeNumbers] = useState(true);
+  const [includeSymbols, setIncludeSymbols] = useState(true);
+  const [excludeSimilar, setExcludeSimilar] = useState(false);
+  const [breach, setBreach] = useState<BreachState>("idle");
+
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  // Latest options, read by the breach-regen path without re-subscribing the
+  // check effect on every option change.
+  const optsRef = useRef({
+    length,
+    includeUppercase,
+    includeLowercase,
+    includeNumbers,
+    includeSymbols,
+    excludeSimilar,
+  });
+  optsRef.current = {
+    length,
+    includeUppercase,
+    includeLowercase,
+    includeNumbers,
+    includeSymbols,
+    excludeSimilar,
+  };
+  // Ignore stale async HIBP results once a newer password supersedes them.
+  const breachTokenRef = useRef(0);
+  const breachAttemptRef = useRef(0);
+
+  // 150 ms throttle on Generate. The CSPRNG draw itself is cheap
+  // (synchronous bytes), but a held-down Enter key or a stuck
+  // accessibility-keyboard repeat could fire many calls per second
+  // and the rejection-sampling loop inside `generatePassword` does
+  // a small amount of work per call. The throttle also gates the
+  // haptic so the user isn't getting buzzed at keypress rate.
+  const lastGenerateRef = useRef(0);
+  const handleGenerate = useCallback(() => {
+    const now = Date.now();
+    if (now - lastGenerateRef.current < 150) {
+      return;
+    }
+    lastGenerateRef.current = now;
+    try {
+      const next = generatePassword({
+        length,
+        includeUppercase,
+        includeLowercase,
+        includeNumbers,
+        includeSymbols,
+        excludeSimilar,
+      });
+      setPassword(next);
+      if (!isWeb) {
+        Haptics.impactAsync(Haptics.ImpactFeedbackStyle.Light);
+      }
+    } catch (e) {
+      Toast.show({
+        type: "error",
+        text1: e instanceof Error ? e.message : "Please select at least one character type",
+        visibilityTime: 3000,
+      });
+    }
+  }, [length, includeUppercase, includeLowercase, includeNumbers, includeSymbols, excludeSimilar]);
+
+  const handleCopy = useCallback(async () => {
+    if (!password) {
+      return;
+    }
+    const ok = await copyToClipboard(password);
+    if (!ok) {
+      return;
+    }
+    if (!isWeb) {
+      Haptics.notificationAsync(Haptics.NotificationFeedbackType.Success);
+    }
+    Toast.show({ type: "success", text1: "Copied to clipboard", visibilityTime: 2000 });
+  }, [password]);
+
+  // Generate on mount and when character-class options change.
+  useEffect(() => {
+    handleGenerate();
+  }, [handleGenerate]);
+
+  // Verify each generated password against HIBP (k-anonymity — only the SHA-1
+  // prefix leaves the device). Debounced so spamming Generate only checks the
+  // final password. On the (near-impossible) breach hit, silently regenerate;
+  // a failed/offline check surfaces as "unverified" rather than blocking.
+  useEffect(() => {
+    if (!password) {
+      setBreach("idle");
+      return;
+    }
+    const token = ++breachTokenRef.current;
+    setBreach("checking");
+    const timer = setTimeout(async () => {
+      const res = await checkPasswordPwned(password);
+      if (token !== breachTokenRef.current) {
+        return;
+      } // superseded
+      if (res.isPwned === true && breachAttemptRef.current < MAX_BREACH_REGEN) {
+        breachAttemptRef.current += 1;
+        try {
+          setPassword(generatePassword(optsRef.current));
+        } catch {
+          setBreach("unverified");
+        }
+        return;
+      }
+      breachAttemptRef.current = 0;
+      setBreach(res.isPwned === null ? "unverified" : "safe");
+    }, 400);
+    return () => clearTimeout(timer);
+  }, [password]);
+
+  const passwordStrength = useStrength(password);
+
+  return (
+    <>
+      <View className="mb-4 rounded-lg border border-border bg-card p-4 dark:bg-neutral-900/50">
+        <View className="mb-3 flex-row items-center justify-between">
+          <Text className="text-sm font-medium text-muted-foreground">Generated Password</Text>
+          <View className="flex-row items-center">
+            <View
+              className="h-2 w-2 rounded-full"
+              style={{ backgroundColor: passwordStrength.color }}
+            />
+            <Text className="ml-2 text-xs font-medium" style={{ color: passwordStrength.color }}>
+              {passwordStrength.label}
+            </Text>
+          </View>
+        </View>
+
+        <View className="mb-2 rounded-lg bg-background p-3">
+          <Text
+            className="font-mono text-base text-foreground"
+            selectable
+            numberOfLines={2}
+            testID="generator-output"
+          >
+            {password || "Press generate to create a password"}
+          </Text>
+        </View>
+
+        {/* HIBP breach-check status. Fixed height so the layout never shifts. */}
+        <View className="mb-3 h-4 flex-row items-center gap-1.5" testID="generator-breach-status">
+          {breach === "checking" ? (
+            <>
+              <ActivityIndicator size="small" color={isDark ? "#a3a3a3" : "#737373"} />
+              <Text className="text-xs text-muted-foreground">Checking breach database…</Text>
+            </>
+          ) : breach === "safe" ? (
+            <>
+              <Ionicons name="shield-checkmark" size={12} color="#22c55e" />
+              <Text className="text-xs" style={{ color: "#22c55e" }}>
+                Not found in any known breach
+              </Text>
+            </>
+          ) : breach === "unverified" ? (
+            <>
+              <Ionicons
+                name="cloud-offline-outline"
+                size={12}
+                color={isDark ? "#a3a3a3" : "#737373"}
+              />
+              <Text className="text-xs text-muted-foreground">
+                Couldn&apos;t check breaches (offline)
+              </Text>
+            </>
+          ) : null}
+        </View>
+
+        <View className="flex-row gap-2">
+          <Pressable
+            onPress={handleGenerate}
+            className="active:scale-98 flex-1 rounded-lg bg-primary px-4 py-3"
+            accessibilityRole="button"
+            accessibilityLabel="Generate password"
+            testID="generator-generate"
+          >
+            <View className="flex-row items-center justify-center">
+              <Ionicons name="refresh" size={18} color={isDark ? "black" : "white"} />
+              <Text className="ml-2 font-semibold text-primary-foreground">Generate</Text>
+            </View>
+          </Pressable>
+
+          {!hideCopy && (
+            <Pressable
+              onPress={handleCopy}
+              disabled={!password}
+              className="active:scale-98 rounded-lg bg-secondary px-4 py-3"
+              accessibilityRole="button"
+              accessibilityLabel="Copy password"
+              accessibilityState={{ disabled: !password }}
+            >
+              <View className="flex-row items-center justify-center">
+                <Ionicons name="copy-outline" size={18} color={isDark ? "white" : "black"} />
+                <Text className="ml-2 font-semibold text-foreground">Copy</Text>
+              </View>
+            </Pressable>
+          )}
+
+          {onSelect && (
+            <Pressable
+              onPress={() => onSelect(password)}
+              disabled={!password}
+              className="active:scale-98 rounded-lg bg-secondary px-4 py-3"
+              accessibilityRole="button"
+              accessibilityLabel="Use password"
+              accessibilityState={{ disabled: !password }}
+            >
+              <View className="flex-row items-center justify-center">
+                <Ionicons name="checkmark" size={18} color={isDark ? "white" : "black"} />
+                <Text className="ml-2 font-semibold text-foreground">Use</Text>
+              </View>
+            </Pressable>
+          )}
+        </View>
+      </View>
+
+      <View className="rounded-lg border border-border bg-card p-4 dark:bg-neutral-900/50">
+        <Text className="mb-4 text-base font-semibold text-foreground">Options</Text>
+
+        <View className="mb-5">
+          <View className="mb-2 flex-row items-center justify-between">
+            <Text className="text-sm text-foreground">Password Length</Text>
+            <Text className="font-mono text-sm font-semibold text-primary">{length}</Text>
+          </View>
+          <Slider
+            value={length}
+            onValueChange={setLength}
+            onSlidingComplete={setLength}
+            minimumValue={8}
+            maximumValue={128}
+            step={1}
+            minimumTrackTintColor={isDark ? "white" : "black"}
+            maximumTrackTintColor={isDark ? "#404040" : "#e5e5e5"}
+            thumbTintColor={isDark ? "white" : "black"}
+            accessibilityLabel={`Password length: ${length}`}
+            accessibilityRole="adjustable"
+          />
+          <View className="mt-1 flex-row justify-between">
+            <Text className="text-xs text-muted-foreground">8</Text>
+            <Text className="text-xs text-muted-foreground">128</Text>
+          </View>
+        </View>
+
+        <View className="gap-3">
+          <CharsetCheckbox
+            label="Uppercase Letters (A-Z)"
+            checked={includeUppercase}
+            onToggle={() => setIncludeUppercase((v) => !v)}
+            isDark={isDark}
+          />
+          <CharsetCheckbox
+            label="Lowercase Letters (a-z)"
+            checked={includeLowercase}
+            onToggle={() => setIncludeLowercase((v) => !v)}
+            isDark={isDark}
+          />
+          <CharsetCheckbox
+            label="Numbers (0-9)"
+            checked={includeNumbers}
+            onToggle={() => setIncludeNumbers((v) => !v)}
+            isDark={isDark}
+          />
+          <CharsetCheckbox
+            label="Symbols (!@#$%...)"
+            checked={includeSymbols}
+            onToggle={() => setIncludeSymbols((v) => !v)}
+            isDark={isDark}
+          />
+          <CharsetCheckbox
+            label="Exclude Similar Characters"
+            checked={excludeSimilar}
+            onToggle={() => setExcludeSimilar((v) => !v)}
+            isDark={isDark}
+          />
+        </View>
+      </View>
+    </>
+  );
+});
+
+export default PasswordGenerator;
+
+/** Coarse strength indicator — purely UX, server doesn't see it. */
+function useStrength(password: string): { label: string; color: string } {
+  if (!password) {
+    return { label: "Generate a password", color: "gray" };
+  }
+  let strength = 0;
+  if (password.length >= 12) {
+    strength++;
+  }
+  if (password.length >= 16) {
+    strength++;
+  }
+  if (/[a-z]/.test(password)) {
+    strength++;
+  }
+  if (/[A-Z]/.test(password)) {
+    strength++;
+  }
+  if (/[0-9]/.test(password)) {
+    strength++;
+  }
+  if (/[^A-Za-z0-9]/.test(password)) {
+    strength++;
+  }
+  if (strength <= 2) {
+    return { label: "Weak", color: "#ef4444" };
+  }
+  if (strength <= 4) {
+    return { label: "Medium", color: "#f59e0b" };
+  }
+  return { label: "Strong", color: "#22c55e" };
+}
+
+interface CharsetCheckboxProps {
+  label: string;
+  checked: boolean;
+  onToggle: () => void;
+  isDark: boolean;
+}
+
+function CharsetCheckbox({ label, checked, onToggle, isDark }: CharsetCheckboxProps) {
+  return (
+    <Pressable
+      onPress={onToggle}
+      className="flex-row items-center gap-3"
+      accessibilityRole="checkbox"
+      accessibilityLabel={label}
+      accessibilityState={{ checked }}
+    >
+      <View
+        style={{
+          width: 20,
+          height: 20,
+          borderRadius: 4,
+          borderWidth: 1.5,
+          alignItems: "center",
+          justifyContent: "center",
+          borderColor: checked ? (isDark ? "#ffffff" : "#000000") : isDark ? "#525252" : "#d4d4d4",
+          backgroundColor: checked ? (isDark ? "#ffffff" : "#000000") : "transparent",
+        }}
+      >
+        {checked && <Ionicons name="checkmark" size={14} color={isDark ? "#000000" : "#ffffff"} />}
+      </View>
+      <Text className="flex-1 text-sm text-foreground">{label}</Text>
+    </Pressable>
+  );
+}

package/src/components/pin-pad.tsx

@@ -0,0 +1,156 @@
+import React, { useCallback, useEffect, useRef, useState } from "react";
+import { Platform, Pressable, Text, View } from "react-native";
+import { useColorScheme } from "nativewind";
+import { Delete, Fingerprint } from "lucide-react-native";
+
+/**
+ * Numeric PIN entry pad with a filled-dots indicator. Theme-driven (uses
+ * the active palette via NativeWind classes). Self-manages the entered
+ * digits and fires `onComplete` when `length` is reached; pass a changing
+ * `resetKey` to clear it (e.g. after a wrong PIN).
+ */
+export interface PinPadProps {
+  length?: number;
+  onComplete: (pin: string) => void;
+  onChange?: (pin: string) => void;
+  /** Show a biometric key (bottom-left); omit to leave that slot blank. */
+  onBiometric?: () => void;
+  /** Bump to clear the entered digits. */
+  resetKey?: string | number;
+  error?: boolean;
+}
+
+const KEYS = ["1", "2", "3", "4", "5", "6", "7", "8", "9"] as const;
+
+export function PinPad({
+  length = 6,
+  onComplete,
+  onChange,
+  onBiometric,
+  resetKey,
+  error,
+}: PinPadProps) {
+  const { colorScheme } = useColorScheme();
+  const iconColor = colorScheme === "dark" ? "#FFFFFF" : "#000000";
+  const [pin, setPin] = useState("");
+  // Source of truth for the latest digits — lets callbacks fire OUTSIDE the
+  // setPin updater (calling a parent setState inside an updater triggers
+  // "setState while rendering"). Kept in sync with state on every render.
+  const pinRef = useRef(pin);
+  pinRef.current = pin;
+
+  // Clear when resetKey changes.
+  const [seenKey, setSeenKey] = useState(resetKey);
+  if (resetKey !== seenKey) {
+    setSeenKey(resetKey);
+    if (pin) {
+      pinRef.current = "";
+      setPin("");
+    }
+  }
+
+  const press = useCallback(
+    (d: string) => {
+      const cur = pinRef.current;
+      if (cur.length >= length) {
+        return;
+      }
+      const next = cur + d;
+      pinRef.current = next;
+      setPin(next);
+      onChange?.(next);
+      if (next.length === length) {
+        onComplete(next);
+      }
+    },
+    [length, onChange, onComplete]
+  );
+
+  const back = useCallback(() => {
+    const next = pinRef.current.slice(0, -1);
+    pinRef.current = next;
+    setPin(next);
+    onChange?.(next);
+  }, [onChange]);
+
+  // Physical keyboard / numpad support (web): digits type, Backspace/Delete
+  // removes, Enter submits a full PIN.
+  useEffect(() => {
+    if (Platform.OS !== "web" || typeof window === "undefined") {
+      return;
+    }
+    const onKey = (e: KeyboardEvent) => {
+      if (e.key >= "0" && e.key <= "9") {
+        e.preventDefault();
+        press(e.key);
+      } else if (e.key === "Backspace" || e.key === "Delete") {
+        e.preventDefault();
+        back();
+      } else if (e.key === "Enter") {
+        e.preventDefault();
+        if (pinRef.current.length === length) {
+          onComplete(pinRef.current);
+        }
+      }
+    };
+    window.addEventListener("keydown", onKey);
+    return () => window.removeEventListener("keydown", onKey);
+  }, [press, back, onComplete, length]);
+
+  return (
+    <View className="items-center gap-7">
+      {/* dots */}
+      <View className="flex-row gap-3">
+        {Array.from({ length }).map((_, i) => (
+          <View
+            key={i}
+            className={
+              i < pin.length
+                ? error
+                  ? "h-3.5 w-3.5 rounded-full bg-destructive"
+                  : "h-3.5 w-3.5 rounded-full bg-primary"
+                : "h-3.5 w-3.5 rounded-full border-2 border-border"
+            }
+          />
+        ))}
+      </View>
+
+      {/* keypad */}
+      <View className="w-72 flex-row flex-wrap justify-center gap-3">
+        {KEYS.map((k) => (
+          <Key key={k} label={k} onPress={() => press(k)} />
+        ))}
+        {onBiometric ? (
+          <Key onPress={onBiometric} icon={<Fingerprint size={26} color={iconColor} />} />
+        ) : (
+          <View className="h-20 w-20" />
+        )}
+        <Key label="0" onPress={() => press("0")} />
+        <Key onPress={back} icon={<Delete size={24} color={iconColor} />} />
+      </View>
+    </View>
+  );
+}
+
+function Key({
+  label,
+  icon,
+  onPress,
+}: {
+  label?: string;
+  icon?: React.ReactNode;
+  onPress: () => void;
+}) {
+  return (
+    <Pressable
+      onPress={onPress}
+      className="h-20 w-20 items-center justify-center rounded-full active:bg-secondary"
+      accessibilityRole="button"
+      accessibilityLabel={label ?? "key"}
+    >
+      {icon ?? <Text className="font-sans-medium text-2xl text-foreground">{label}</Text>}
+    </Pressable>
+  );
+}
+
+export default PinPad;