@entropy-softworks/ui 2026.7.31

package/package.json

@@ -0,0 +1,204 @@
+{
+  "name": "@entropy-softworks/ui",
+  "version": "2026.7.31",
+  "private": false,
+  "description": "Shared React Native UI primitives, auth screens, hooks, and services for Entropy Softworks Expo apps",
+  "license": "MIT",
+  "author": "Entropy Softworks",
+  "sideEffects": [
+    "**/*.css"
+  ],
+  "engines": {
+    "node": ">=20.3"
+  },
+  "repository": {
+    "type": "git",
+    "url": "git+https://gitlab.com/entropysoftworks/packages/entropy-ui.git"
+  },
+  "homepage": "https://gitlab.com/entropysoftworks/packages/entropy-ui",
+  "bugs": {
+    "url": "https://gitlab.com/entropysoftworks/packages/entropy-ui/-/issues"
+  },
+  "keywords": [
+    "react-native",
+    "expo",
+    "nativewind",
+    "ui",
+    "components",
+    "auth"
+  ],
+  "source": "./src/index.ts",
+  "main": "./lib/index.js",
+  "module": "./lib/index.js",
+  "react-native": "./src/index.ts",
+  "types": "./lib/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./lib/index.d.ts",
+      "source": "./src/index.ts",
+      "react-native": "./src/index.ts",
+      "default": "./lib/index.js"
+    },
+    "./components": {
+      "types": "./lib/components/index.d.ts",
+      "source": "./src/components/index.ts",
+      "react-native": "./src/components/index.ts",
+      "default": "./lib/components/index.js"
+    },
+    "./screens": {
+      "types": "./lib/screens/index.d.ts",
+      "source": "./src/screens/index.ts",
+      "react-native": "./src/screens/index.ts",
+      "default": "./lib/screens/index.js"
+    },
+    "./screens/auth": {
+      "types": "./lib/screens/auth/index.d.ts",
+      "source": "./src/screens/auth/index.ts",
+      "react-native": "./src/screens/auth/index.ts",
+      "default": "./lib/screens/auth/index.js"
+    },
+    "./hooks": {
+      "types": "./lib/hooks/index.d.ts",
+      "source": "./src/hooks/index.ts",
+      "react-native": "./src/hooks/index.ts",
+      "default": "./lib/hooks/index.js"
+    },
+    "./services": {
+      "types": "./lib/services/index.d.ts",
+      "source": "./src/services/index.ts",
+      "react-native": "./src/services/index.ts",
+      "default": "./lib/services/index.js"
+    },
+    "./context": {
+      "types": "./lib/context/index.d.ts",
+      "source": "./src/context/index.ts",
+      "react-native": "./src/context/index.ts",
+      "default": "./lib/context/index.js"
+    },
+    "./forms": {
+      "types": "./lib/forms/index.d.ts",
+      "source": "./src/forms/index.ts",
+      "react-native": "./src/forms/index.ts",
+      "default": "./lib/forms/index.js"
+    },
+    "./utils": {
+      "types": "./lib/utils/index.d.ts",
+      "source": "./src/utils/index.ts",
+      "react-native": "./src/utils/index.ts",
+      "default": "./lib/utils/index.js"
+    },
+    "./tailwind-preset": "./tailwind-preset.js",
+    "./styles/globals.css": "./styles/globals.css"
+  },
+  "files": [
+    "lib/**/*",
+    "src/**/*",
+    "styles/**/*",
+    "tailwind-preset.js",
+    "README.md",
+    "LICENSE",
+    "CHANGELOG.md"
+  ],
+  "scripts": {
+    "type-check": "tsc --noEmit --strict",
+    "lint": "eslint . --ext .ts,.tsx",
+    "format": "prettier --write \"src/**/*.{ts,tsx,js,json,md}\" \"*.{md,json}\"",
+    "format:check": "prettier --check \"src/**/*.{ts,tsx,js,json,md}\" \"*.{md,json}\"",
+    "test": "jest --passWithNoTests",
+    "clean": "node -e \"require('fs').rmSync('lib',{recursive:true,force:true})\"",
+    "build": "npm run clean && tsc -p tsconfig.build.json",
+    "prepublishOnly": "npm run build",
+    "check-all": "concurrently \"npm:type-check\" \"npm:lint\" \"npm:format:check\" \"npm:test\""
+  },
+  "dependencies": {
+    "class-variance-authority": "^0.7.1",
+    "clsx": "^2.1.1",
+    "tailwind-merge": "^3.3.1"
+  },
+  "peerDependencies": {
+    "@expo/vector-icons": ">=15",
+    "@hookform/resolvers": ">=3",
+    "@noble/ciphers": ">=2",
+    "@react-native-async-storage/async-storage": ">=2",
+    "@react-native-community/slider": ">=5",
+    "@rn-primitives/alert-dialog": ">=1",
+    "@rn-primitives/avatar": ">=1",
+    "@rn-primitives/checkbox": ">=1",
+    "@rn-primitives/context-menu": ">=1",
+    "@rn-primitives/dialog": ">=1",
+    "@rn-primitives/dropdown-menu": ">=1",
+    "@rn-primitives/label": ">=1",
+    "@rn-primitives/popover": ">=1",
+    "@rn-primitives/portal": ">=1",
+    "@rn-primitives/progress": ">=1",
+    "@rn-primitives/radio-group": ">=1",
+    "@rn-primitives/select": ">=1",
+    "@rn-primitives/separator": ">=1",
+    "@rn-primitives/slot": ">=1",
+    "@rn-primitives/switch": ">=1",
+    "@rn-primitives/tabs": ">=1",
+    "@rn-primitives/toggle": ">=1",
+    "@rn-primitives/tooltip": ">=1",
+    "@rn-primitives/types": ">=1",
+    "@tanstack/react-query": ">=5",
+    "expo": ">=55 <56",
+    "expo-blur": ">=55 <56",
+    "expo-clipboard": ">=55 <56",
+    "expo-constants": ">=55 <56",
+    "expo-crypto": ">=55 <56",
+    "expo-haptics": ">=55 <56",
+    "expo-image": ">=55 <56",
+    "expo-linear-gradient": ">=55 <56",
+    "expo-linking": ">=55 <56",
+    "expo-local-authentication": ">=55 <56",
+    "expo-router": ">=55 <56",
+    "expo-secure-store": ">=55 <56",
+    "expo-status-bar": ">=55 <56",
+    "expo-web-browser": ">=55 <56",
+    "lucide-react-native": ">=0.539.0",
+    "nativewind": ">=4 <5",
+    "react": ">=19 <20",
+    "react-hook-form": ">=7",
+    "react-native": ">=0.83 <0.84",
+    "react-native-gesture-handler": ">=2",
+    "react-native-mmkv": ">=3",
+    "react-native-passkey": ">=3",
+    "react-native-qrcode-svg": ">=6",
+    "react-native-reanimated": ">=4 <5",
+    "react-native-safe-area-context": ">=5",
+    "react-native-svg": ">=15",
+    "react-native-toast-message": ">=2",
+    "zod": ">=4"
+  },
+  "peerDependenciesMeta": {
+    "react-native-passkey": {
+      "optional": true
+    }
+  },
+  "devDependencies": {
+    "react-native-passkey": "^3.4.0",
+    "@react-native-async-storage/async-storage": "^2.2.0",
+    "@testing-library/react-native": "^13.3.3",
+    "@types/jest": "^30.0.0",
+    "@types/react": "~19.2.10",
+    "@types/react-dom": "~19.2.3",
+    "@typescript-eslint/eslint-plugin": "^8.39.1",
+    "@typescript-eslint/parser": "^8.39.1",
+    "concurrently": "^9.2.0",
+    "eslint": "^9.33.0",
+    "eslint-config-expo": "~55.0.1",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-react-hooks": "^5.2.0",
+    "eslint-plugin-react-native": "^5.0.0",
+    "jest": "~29.7.0",
+    "jest-expo": "~55.0.18",
+    "prettier": "^3.6.2",
+    "react-native-gesture-handler": "~2.30.0",
+    "react-test-renderer": "19.2.6",
+    "tailwindcss": "^3.4.17",
+    "typescript": "~5.9.2"
+  },
+  "publishConfig": {
+    "access": "public"
+  }
+}

package/src/components/__tests__/data-table.test.ts

@@ -0,0 +1,94 @@
+import { resolveColumnStyle, dataTableBodyMode, type DataTableColumn } from "../data-table";
+
+// The component module pulls in `react-native-reanimated` (via Skeleton),
+// which ships ESM that the unit-suite babel transform does not process. The
+// shared setup already stubs `react-native` / `nativewind`; stub the animation
+// layer here too so the pure helpers under test load without a render runtime.
+// `jest.mock` is hoisted above the import by babel-plugin-jest-hoist (same
+// pattern as the existing context tests).
+jest.mock("react-native-reanimated", () => ({
+  __esModule: true,
+  default: { View: "Animated.View" },
+  useSharedValue: () => ({ value: 0 }),
+  useAnimatedStyle: () => ({}),
+  withTiming: (v: number) => v,
+  withRepeat: (v: number) => v,
+  withSequence: (v: number) => v,
+  cancelAnimation: () => {},
+}));
+
+interface Row {
+  id: string;
+  name: string;
+}
+
+describe("resolveColumnStyle", () => {
+  it("uses a fixed width when provided", () => {
+    const style = resolveColumnStyle<Row>({ key: "id", header: "ID", width: 80 });
+    expect(style.width).toBe(80);
+    expect(style.flex).toBeUndefined();
+  });
+
+  it("falls back to flex: 1 when neither width nor flex is set", () => {
+    const style = resolveColumnStyle<Row>({ key: "name", header: "Name" });
+    expect(style.flex).toBe(1);
+    expect(style.width).toBeUndefined();
+  });
+
+  it("honours an explicit flex grow factor", () => {
+    const style = resolveColumnStyle<Row>({ key: "name", header: "Name", flex: 3 });
+    expect(style.flex).toBe(3);
+  });
+
+  it("prefers width over flex when both are given", () => {
+    const style = resolveColumnStyle<Row>({ key: "id", header: "ID", width: 50, flex: 2 });
+    expect(style.width).toBe(50);
+    expect(style.flex).toBeUndefined();
+  });
+
+  it("maps alignment to the matching flex alignItems", () => {
+    expect(resolveColumnStyle<Row>({ key: "id", header: "ID" }).alignItems).toBe("flex-start");
+    expect(resolveColumnStyle<Row>({ key: "id", header: "ID", align: "center" }).alignItems).toBe(
+      "center"
+    );
+    expect(resolveColumnStyle<Row>({ key: "id", header: "ID", align: "right" }).alignItems).toBe(
+      "flex-end"
+    );
+  });
+});
+
+describe("dataTableBodyMode", () => {
+  it("shows skeleton rows while loading regardless of row count", () => {
+    expect(dataTableBodyMode(true, 0)).toBe("loading");
+    expect(dataTableBodyMode(true, 5)).toBe("loading");
+  });
+
+  it("shows the empty state when not loading and there are no rows", () => {
+    expect(dataTableBodyMode(false, 0)).toBe("empty");
+  });
+
+  it("renders data when not loading and rows are present", () => {
+    expect(dataTableBodyMode(false, 3)).toBe("data");
+  });
+});
+
+describe("DataTable column rendering", () => {
+  const rows: Row[] = [
+    { id: "1", name: "Frodo" },
+    { id: "2", name: "Sam" },
+  ];
+
+  it("resolves a cell value from the row by column key", () => {
+    const col: DataTableColumn<Row> = { key: "name", header: "Name" };
+    const value = String((rows[0] as Record<string, unknown>)[col.key] ?? "");
+    expect(value).toBe("Frodo");
+  });
+
+  it("invokes a custom renderer with the whole row", () => {
+    const render = jest.fn((row: Row) => row.name.toUpperCase());
+    const col: DataTableColumn<Row> = { key: "name", header: "Name", render };
+    const out = col.render?.(rows[1]);
+    expect(render).toHaveBeenCalledWith(rows[1]);
+    expect(out).toBe("SAM");
+  });
+});

package/src/components/__tests__/pagination.test.ts

@@ -0,0 +1,73 @@
+import { getPaginationState } from "../pagination";
+
+// The component module imports view-layer deps (`@expo/vector-icons`,
+// `react-native-reanimated` via Button) that the unit-suite babel transform
+// does not process. The shared setup stubs `react-native` / `nativewind`;
+// stub the rest here so the pure helper under test loads without a render
+// runtime. `jest.mock` is hoisted above the import by babel-plugin-jest-hoist
+// (same pattern as the existing context tests).
+jest.mock("@expo/vector-icons", () => ({ Ionicons: "Ionicons" }));
+jest.mock("react-native-reanimated", () => ({
+  __esModule: true,
+  default: { View: "Animated.View" },
+  useSharedValue: () => ({ value: 0 }),
+  useAnimatedStyle: () => ({}),
+  withTiming: (v: number) => v,
+}));
+
+describe("getPaginationState", () => {
+  it("derives total pages and item range from page/size/total", () => {
+    const s = getPaginationState(1, 10, 25);
+    expect(s.totalPages).toBe(3);
+    expect(s.currentPage).toBe(1);
+    expect(s.rangeStart).toBe(1);
+    expect(s.rangeEnd).toBe(10);
+  });
+
+  it("computes the trailing partial-page range", () => {
+    const s = getPaginationState(3, 10, 25);
+    expect(s.currentPage).toBe(3);
+    expect(s.rangeStart).toBe(21);
+    expect(s.rangeEnd).toBe(25);
+  });
+
+  it("disables prev on the first page", () => {
+    const s = getPaginationState(1, 10, 25);
+    expect(s.canPrev).toBe(false);
+    expect(s.canNext).toBe(true);
+  });
+
+  it("disables next on the last page", () => {
+    const s = getPaginationState(3, 10, 25);
+    expect(s.canNext).toBe(false);
+    expect(s.canPrev).toBe(true);
+  });
+
+  it("disables both controls when a single page holds everything", () => {
+    const s = getPaginationState(1, 10, 4);
+    expect(s.totalPages).toBe(1);
+    expect(s.canPrev).toBe(false);
+    expect(s.canNext).toBe(false);
+  });
+
+  it("reports an empty range with no items but still one page", () => {
+    const s = getPaginationState(1, 10, 0);
+    expect(s.totalPages).toBe(1);
+    expect(s.rangeStart).toBe(0);
+    expect(s.rangeEnd).toBe(0);
+    expect(s.canPrev).toBe(false);
+    expect(s.canNext).toBe(false);
+  });
+
+  it("clamps an out-of-range page up or down", () => {
+    expect(getPaginationState(99, 10, 25).currentPage).toBe(3);
+    expect(getPaginationState(-5, 10, 25).currentPage).toBe(1);
+    expect(getPaginationState(0, 10, 25).currentPage).toBe(1);
+  });
+
+  it("tolerates degenerate page sizes by flooring to at least one", () => {
+    const s = getPaginationState(1, 0, 5);
+    expect(s.totalPages).toBe(5);
+    expect(s.rangeEnd).toBe(1);
+  });
+});

package/src/components/__tests__/stat-card.test.ts

@@ -0,0 +1,21 @@
+import { trendColorClass } from "../stat-card";
+
+describe("trendColorClass", () => {
+  it("colours an upward trend with the success token", () => {
+    expect(trendColorClass("up")).toContain("text-success");
+  });
+
+  it("colours a downward trend with the destructive token", () => {
+    expect(trendColorClass("down")).toContain("text-destructive");
+  });
+
+  it("falls back to muted for a neutral trend", () => {
+    expect(trendColorClass("neutral")).toContain("text-muted-foreground");
+  });
+
+  it("uses only palette tokens, never raw hex", () => {
+    for (const trend of ["up", "down", "neutral"] as const) {
+      expect(trendColorClass(trend)).not.toMatch(/#[0-9a-fA-F]{3,8}/);
+    }
+  });
+});

package/src/components/auth/LockOverlay.tsx

@@ -0,0 +1,122 @@
+import React, { useState } from "react";
+import { View } from "react-native";
+import Toast from "react-native-toast-message";
+import { Button } from "../../components/button";
+import { PasswordInput } from "../../components/input";
+import { MutedText, Text } from "../../components/text";
+import { useAppConfig } from "../../context/AppConfigContext";
+
+interface LockOverlayProps {
+  /**
+   * Validates the password and unlocks the session. Throw on bad
+   * password — the overlay catches and surfaces a generic error.
+   */
+  onUnlock: (password: string) => Promise<void> | void;
+  /** Fired when the user picks "Sign out". */
+  onSignOut: () => void;
+  /** Optional success-toast message. Defaults to `${appName} unlocked`. */
+  successMessage?: string;
+}
+
+/**
+ * Unlock form for session-locked flows (e.g. vault re-lock after idle).
+ * The typed password never leaves this component — it is captured into a
+ * local closure variable and wiped from React state before the async
+ * unlock work begins so the fiber tree no longer references the
+ * plaintext during PBKDF2 / WebCrypto derivation.
+ */
+export function LockOverlay({ onUnlock, onSignOut, successMessage }: LockOverlayProps) {
+  const { appName, Logo } = useAppConfig();
+  const [password, setPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [error, setError] = useState("");
+
+  const handleUnlock = async () => {
+    const captured = password;
+    if (!captured.trim()) {
+      setError("Password is required");
+      return;
+    }
+    setPassword("");
+    setLoading(true);
+    setError("");
+    try {
+      await onUnlock(captured);
+      Toast.show({
+        type: "success",
+        text1: successMessage ?? `${appName} unlocked`,
+        visibilityTime: 1500,
+      });
+    } catch (e) {
+      const msg = e instanceof Error ? e.message : String(e);
+      if (__DEV__) {
+        console.error("Unlock failed:", msg);
+      }
+      // Distinguish "wrong password" (the common case) from a real
+      // crypto/transport failure. The vault key-derivation pipeline
+      // surfaces wrong-password as a decrypt / authentication-tag
+      // mismatch from AES-GCM; anything else means the unlock path
+      // itself broke and the user can't recover by retyping.
+      const looksLikeWrongPassword =
+        /decrypt|auth(entication)? tag|bad ?decrypt|invalid|unwrap/i.test(msg);
+      setError(
+        looksLikeWrongPassword ? "Incorrect password. Please try again." : `Unlock failed: ${msg}`
+      );
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  return (
+    <View className="flex-1 items-center justify-center bg-background">
+      <View className="w-full max-w-[340px] items-center px-6">
+        <View className="mb-2 flex-row items-center justify-center">
+          <Logo width={56} height={56} />
+          <Text className="font-sans-bold text-[28px] text-foreground dark:text-white">
+            {appName}
+          </Text>
+        </View>
+        <MutedText className="mb-8 text-center text-sm">
+          Enter your master password to unlock
+        </MutedText>
+        <View className="w-full gap-3">
+          <PasswordInput
+            value={password}
+            onChangeText={(text) => {
+              setPassword(text);
+              if (error) {
+                setError("");
+              }
+            }}
+            placeholder="Master password"
+            error={error}
+            autoFocus
+            returnKeyType="done"
+            onSubmitEditing={handleUnlock}
+            accessibilityLabel="Master password"
+            testID="lock-password-input"
+          />
+          <Button
+            className="w-full"
+            onPress={handleUnlock}
+            isLoading={loading}
+            accessibilityLabel="Unlock"
+            accessibilityRole="button"
+            testID="lock-unlock-button"
+          >
+            Unlock
+          </Button>
+          <Button
+            variant="ghost"
+            className="w-full"
+            onPress={onSignOut}
+            accessibilityLabel="Sign out"
+            accessibilityRole="button"
+          >
+            Sign out
+          </Button>
+        </View>
+      </View>
+    </View>
+  );
+}

package/src/components/auth/PasswordStrengthMeter.tsx

@@ -0,0 +1,96 @@
+import React from "react";
+import { View } from "react-native";
+import { MutedText } from "../../components/text";
+
+interface PasswordStrengthMeterProps {
+  password: string;
+}
+
+export function calculatePasswordStrength(pass: string) {
+  let strength: number;
+
+  const hasLower = /[a-z]/.test(pass);
+  const hasUpper = /[A-Z]/.test(pass);
+  const hasNumber = /[0-9]/.test(pass);
+  const hasSpecial = /[^A-Za-z0-9]/.test(pass);
+  const complexityCount = [hasLower, hasUpper, hasNumber, hasSpecial].filter(Boolean).length;
+
+  if (complexityCount >= 4) {
+    strength = 60;
+  } else if (complexityCount === 3) {
+    strength = 40;
+  } else if (complexityCount === 2) {
+    strength = 20;
+  } else {
+    strength = 10;
+  }
+
+  if (pass.length >= 16) {
+    strength += 40;
+  } else if (pass.length >= 12) {
+    strength += 20;
+  } else if (pass.length >= 8) {
+    strength += 10;
+  }
+
+  if (pass.length < 8) {
+    strength = Math.min(strength, 25);
+  } else if (pass.length < 12) {
+    strength = Math.min(strength, 50);
+  } else if (pass.length < 16) {
+    strength = Math.min(strength, 75);
+  }
+
+  let color: string;
+  let label: string;
+
+  if (strength <= 25) {
+    color = "#EF4444";
+    label = "Weak";
+  } else if (strength <= 50) {
+    color = "#F59E0B";
+    label = "Moderate";
+  } else if (strength <= 75) {
+    color = "#22C55E";
+    label = "Strong";
+  } else {
+    color = "#10B981";
+    label = "Very Strong";
+  }
+
+  return { strength: Math.min(strength, 100), color, label };
+}
+
+const PasswordStrengthMeter = React.memo(function PasswordStrengthMeter({
+  password,
+}: PasswordStrengthMeterProps) {
+  if (!password) {
+    return null;
+  }
+
+  const { strength, color, label } = calculatePasswordStrength(password);
+
+  return (
+    <View className="gap-2">
+      <View className="flex-row gap-1">
+        {[0, 1, 2, 3, 4].map((i) => {
+          const threshold = (i + 1) * 20;
+          const filled = strength >= threshold;
+          return (
+            <View
+              key={i}
+              className="h-1 flex-1 rounded-full"
+              style={{ backgroundColor: filled ? color : "#333333" }}
+            />
+          );
+        })}
+      </View>
+      <View className="flex-row items-center justify-between">
+        <MutedText className="text-xs">{label}</MutedText>
+        <MutedText className="text-xs">{strength}%</MutedText>
+      </View>
+    </View>
+  );
+});
+
+export default PasswordStrengthMeter;