@entropy-softworks/ui 2026.7.31

package/src/components/settings-row.tsx

@@ -0,0 +1,126 @@
+import React from "react";
+import { Pressable, Switch, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import { cn } from "../utils/cn";
+import { MutedText, Text } from "./text";
+
+export interface SettingsRowProps {
+  icon: keyof typeof Ionicons.glyphMap;
+  label: string;
+  subtitle?: string;
+  onPress?: () => void;
+  showChevron?: boolean;
+  toggle?: boolean;
+  value?: boolean;
+  onValueChange?: (value: boolean) => void;
+  destructive?: boolean;
+}
+
+/**
+ * Horizontal row used inside settings dialogs / panels. Combines an icon
+ * tile, label + optional subtitle, and a trailing switch *or* chevron.
+ * `destructive` recolors the label + icon to the destructive token.
+ */
+export function SettingsRow({
+  icon,
+  label,
+  subtitle,
+  onPress,
+  showChevron,
+  toggle,
+  value,
+  onValueChange,
+  destructive,
+}: SettingsRowProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  const Wrapper = onPress ? Pressable : View;
+  // Toggle-mode rows tap-to-switch and also surface the switch
+  // itself — both surfaces need the label as their accessible name
+  // so a screen reader doesn't announce "Switch, on" with no
+  // context. The Switch carries `accessibilityState` so AT can
+  // announce the on/off state.
+  const wrapperProps = onPress
+    ? ({
+        onPress,
+        accessibilityRole: "button" as const,
+        accessibilityLabel: label,
+        ...(subtitle ? { accessibilityHint: subtitle } : {}),
+      } as const)
+    : {};
+
+  let iconColor: string;
+  if (destructive) {
+    iconColor = "#EF4444";
+  } else if (isDark) {
+    iconColor = "#FFFFFF";
+  } else {
+    iconColor = "#000000";
+  }
+
+  return (
+    <Wrapper
+      className="flex-row items-center border-b border-border px-3 py-3 last:border-b-0 dark:border-neutral-800"
+      {...wrapperProps}
+    >
+      <View className="mr-3 h-8 w-8 items-center justify-center rounded-md bg-secondary dark:bg-neutral-800">
+        <Ionicons name={icon} size={16} color={iconColor} />
+      </View>
+      <View className="flex-1">
+        <Text
+          className={cn(
+            "text-sm font-medium",
+            destructive ? "text-destructive" : "text-foreground"
+          )}
+        >
+          {label}
+        </Text>
+        {subtitle ? <MutedText className="text-xs">{subtitle}</MutedText> : null}
+      </View>
+      {toggle ? (
+        <Switch
+          value={value}
+          onValueChange={onValueChange}
+          accessibilityLabel={label}
+          accessibilityState={{ checked: value === true }}
+          trackColor={{
+            false: isDark ? "#404040" : "#D4D4D4",
+            true: isDark ? "#FFFFFF" : "#000000",
+          }}
+          thumbColor={isDark ? "#000000" : "#FFFFFF"}
+        />
+      ) : null}
+      {showChevron ? (
+        <Ionicons name="chevron-forward" size={16} color={isDark ? "#525252" : "#A3A3A3"} />
+      ) : null}
+    </Wrapper>
+  );
+}
+
+export interface SettingsSectionProps {
+  title: string;
+  destructive?: boolean;
+  children: React.ReactNode;
+}
+
+/** Group container for `SettingsRow`s. Renders the section title + a
+ *  bordered card around its children. */
+export function SettingsSection({ title, destructive, children }: SettingsSectionProps) {
+  return (
+    <View>
+      <Text
+        className={cn(
+          "mb-2 text-xs font-semibold tracking-wider",
+          destructive ? "text-destructive" : "text-muted-foreground"
+        )}
+      >
+        {title}
+      </Text>
+      <View className="rounded-lg border border-border bg-card dark:border-neutral-800 dark:bg-neutral-900/50">
+        {children}
+      </View>
+    </View>
+  );
+}

package/src/components/skeleton.tsx

@@ -0,0 +1,48 @@
+import React, { useEffect } from "react";
+import { type ViewProps } from "react-native";
+import Animated, {
+  cancelAnimation,
+  useAnimatedStyle,
+  useSharedValue,
+  withRepeat,
+  withSequence,
+  withTiming,
+} from "react-native-reanimated";
+import { useColorScheme } from "nativewind";
+import { cn } from "../utils/cn";
+
+interface SkeletonProps extends ViewProps {
+  className?: string;
+}
+
+export const Skeleton = React.memo(function Skeleton({ className, ...props }: SkeletonProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const opacity = useSharedValue(0.4);
+
+  useEffect(() => {
+    opacity.value = withRepeat(
+      withSequence(withTiming(1, { duration: 750 }), withTiming(0.4, { duration: 750 })),
+      -1
+    );
+    // Cancel the infinite repeat on unmount. Without this the worklet
+    // keeps running until the shared value is GC'd, which in long
+    // FlashList re-cycles (skeleton → loaded item → skeleton) leaves
+    // orphan animations alive.
+    return () => {
+      cancelAnimation(opacity);
+    };
+  }, [opacity]);
+
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.value,
+  }));
+
+  return (
+    <Animated.View
+      className={cn("rounded-md", isDark ? "bg-neutral-800" : "bg-neutral-200", className)}
+      style={animatedStyle}
+      {...props}
+    />
+  );
+});

package/src/components/social-connections.tsx

@@ -0,0 +1,55 @@
+import React from "react";
+import { Pressable, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+
+export interface SocialConnectionsProps {
+  onApple?: () => void;
+  onGoogle?: () => void;
+  onMicrosoft?: () => void;
+}
+
+const PROVIDERS = [
+  { key: "apple", icon: "logo-apple" as const },
+  { key: "google", icon: "logo-google" as const },
+  { key: "microsoft", icon: "logo-microsoft" as const },
+] as const;
+
+/**
+ * Three-up button row for federated sign-in (Apple / Google / Microsoft).
+ * Each handler is optional — providers with no handler still render but
+ * fire no action; this matches the "coming soon" UX the consumer apps
+ * use during the staged rollout.
+ */
+export function SocialConnections({
+  onApple,
+  onGoogle,
+  onMicrosoft,
+}: SocialConnectionsProps): React.JSX.Element {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+
+  const handlers: Record<string, (() => void) | undefined> = {
+    apple: onApple,
+    google: onGoogle,
+    microsoft: onMicrosoft,
+  };
+
+  return (
+    <View className="w-full flex-row items-center justify-center gap-3">
+      {PROVIDERS.map(({ key, icon }) => (
+        <Pressable
+          key={key}
+          onPress={handlers[key]}
+          className="h-12 w-12 items-center justify-center rounded-lg border border-border dark:border-neutral-600 active:opacity-70"
+          accessibilityRole="button"
+          accessibilityLabel={`Sign in with ${key}`}
+        >
+          <Ionicons name={icon} size={22} color={isDark ? "#FFFFFF" : "#000000"} />
+        </Pressable>
+      ))}
+    </View>
+  );
+}
+
+export default SocialConnections;

package/src/components/stat-card.tsx

@@ -0,0 +1,64 @@
+import React from "react";
+import { View } from "react-native";
+import { cn } from "../utils/cn";
+import { Card } from "./card";
+import { MutedText, Text } from "./text";
+
+/** Direction of a stat's delta — drives the trend colour. */
+export type StatTrend = "up" | "down" | "neutral";
+
+export interface StatCardProps {
+  /** Short label describing the metric (e.g. "Active users"). */
+  label: string;
+  /** The headline value. Numbers are rendered as-is; format upstream. */
+  value: string | number;
+  /** Optional leading icon slot (e.g. a lucide / Ionicons element). */
+  icon?: React.ReactNode;
+  /** Optional change indicator text (e.g. "+12% this week"). */
+  delta?: string;
+  /** Trend direction — colours the delta. Defaults to "neutral". */
+  trend?: StatTrend;
+  className?: string;
+}
+
+// Trend → delta text colour. Tokens only (success/destructive/muted) so each
+// consuming app's palette flows through; no hardcoded hex.
+const trendClass: Record<StatTrend, string> = {
+  up: "text-success",
+  down: "text-destructive",
+  neutral: "text-muted-foreground dark:text-neutral-400",
+};
+
+/**
+ * Map a trend direction to its delta text colour class. Pure so the
+ * trend→colour contract is unit-testable without a render host.
+ */
+export function trendColorClass(trend: StatTrend): string {
+  return trendClass[trend];
+}
+
+/**
+ * Dashboard stat tile: a label, a prominent value, an optional leading icon,
+ * and an optional trend/delta line. Composes `Card` + `Text` so the surface,
+ * border, and typography stay in lockstep with the rest of the system rather
+ * than duplicating styles.
+ */
+export function StatCard({
+  label,
+  value,
+  icon,
+  delta,
+  trend = "neutral",
+  className,
+}: StatCardProps) {
+  return (
+    <Card className={cn("p-5", className)} accessibilityRole="summary">
+      <View className="flex-row items-start justify-between">
+        <MutedText className="text-sm">{label}</MutedText>
+        {icon ? <View className="ml-2">{icon}</View> : null}
+      </View>
+      <Text className="mt-2 text-3xl font-bold text-foreground dark:text-white">{value}</Text>
+      {delta ? <Text className={cn("mt-1 text-xs", trendColorClass(trend))}>{delta}</Text> : null}
+    </Card>
+  );
+}

package/src/components/tag-chip.tsx

@@ -0,0 +1,78 @@
+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 TagChipProps {
+  name: string;
+  /** Accent color for the tag. Accepts `rgb(r, g, b)` or `#rrggbb`. */
+  color?: string | null;
+  selected?: boolean;
+  onPress?: () => void;
+  size?: "sm" | "md";
+}
+
+/**
+ * Compact chip used to display a tag — icon + name with a soft accent
+ * border. When `selected` is true the border + background pick up the
+ * accent at full opacity / 18% fill respectively.
+ */
+export function TagChip({ name, color, selected, onPress, size = "sm" }: TagChipProps) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const accent = color ?? (isDark ? "rgb(163, 163, 163)" : "rgb(115, 115, 115)");
+  const dims =
+    size === "sm"
+      ? { paddingH: 8, paddingV: 3, fontSize: 11, iconSize: 10 }
+      : { paddingH: 10, paddingV: 5, fontSize: 12, iconSize: 12 };
+
+  const inner = (
+    <View
+      style={{
+        flexDirection: "row",
+        alignItems: "center",
+        gap: 4,
+        paddingHorizontal: dims.paddingH,
+        paddingVertical: dims.paddingV,
+        borderRadius: 6,
+        borderWidth: 1,
+        borderColor: selected ? accent : withAlpha(accent, 0.33),
+        backgroundColor: selected ? withAlpha(accent, 0.18) : "transparent",
+      }}
+    >
+      <Ionicons name="pricetag-outline" size={dims.iconSize} color={accent} />
+      <Text className="text-foreground" style={{ fontSize: dims.fontSize }}>
+        {name}
+      </Text>
+    </View>
+  );
+
+  if (!onPress) {
+    return inner;
+  }
+
+  return (
+    <Pressable
+      onPress={onPress}
+      hitSlop={4}
+      style={({ pressed }) => ({ opacity: pressed ? 0.7 : 1 })}
+    >
+      {inner}
+    </Pressable>
+  );
+}
+
+/** Tints an `rgb(...)` or `#rrggbb` color with the given alpha 0..1. */
+export function withAlpha(color: string, alpha: number): string {
+  const rgb = color.match(/rgb\s*\(\s*(\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*\)/i);
+  if (rgb) {
+    return `rgba(${rgb[1]}, ${rgb[2]}, ${rgb[3]}, ${alpha})`;
+  }
+  const hex = color.match(/^#([0-9a-f]{6})$/i);
+  if (hex) {
+    const h = hex[1] ?? "";
+    return `rgba(${parseInt(h.slice(0, 2), 16)}, ${parseInt(h.slice(2, 4), 16)}, ${parseInt(h.slice(4, 6), 16)}, ${alpha})`;
+  }
+  return color;
+}

package/src/components/tag-multi-select.tsx

@@ -0,0 +1,136 @@
+import React, { useMemo, useState } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import { Ionicons } from "@expo/vector-icons";
+import { useColorScheme } from "nativewind";
+import { MutedText, Text } from "./text";
+import { SearchInput } from "./input";
+
+export interface TagOption {
+  id: string;
+  name: string;
+  /** Accent color used for the chip border + icon (defaults to muted). */
+  color?: string | null;
+}
+
+export interface TagMultiSelectProps<T extends TagOption> {
+  tags: T[];
+  selectedIds: string[];
+  onToggle: (tagId: string) => void;
+  /** Resolves the Ionicons glyph for a tag. Defaults to `pricetag`. */
+  iconFor?: (tag: T) => keyof typeof Ionicons.glyphMap;
+  /** Pixel cap on the scrollable list height. Defaults to 240. */
+  listMaxHeight?: number;
+}
+
+/**
+ * Searchable multi-select picker for tags / labels. Designed for lists
+ * that can be in the thousands — the list scrolls, fuzzy filters by
+ * name, and selected items appear as removable chips above the search.
+ *
+ * Generic over the tag shape; pass `iconFor` to map your tag's icon
+ * value onto an Ionicons glyph.
+ */
+export function TagMultiSelect<T extends TagOption>({
+  tags,
+  selectedIds,
+  onToggle,
+  iconFor,
+  listMaxHeight = 240,
+}: TagMultiSelectProps<T>) {
+  const { colorScheme } = useColorScheme();
+  const isDark = colorScheme === "dark";
+  const mutedColor = isDark ? "#A3A3A3" : "#737373";
+
+  const [query, setQuery] = useState("");
+
+  const selectedSet = useMemo(() => new Set(selectedIds), [selectedIds]);
+
+  const selectedTags = useMemo(
+    () => selectedIds.map((id) => tags.find((t) => t.id === id)).filter((t): t is T => !!t),
+    [selectedIds, tags]
+  );
+
+  const filteredTags = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    if (!q) {
+      return tags;
+    }
+    return tags.filter((t) => t.name.toLowerCase().includes(q));
+  }, [query, tags]);
+
+  const resolveIcon = (tag: T): keyof typeof Ionicons.glyphMap =>
+    iconFor ? iconFor(tag) : "pricetag";
+
+  return (
+    <View className="gap-2">
+      {selectedTags.length > 0 && (
+        <View className="flex-row flex-wrap gap-1.5">
+          {selectedTags.map((tag) => {
+            const accent = tag.color ?? mutedColor;
+            return (
+              <Pressable
+                key={tag.id}
+                onPress={() => onToggle(tag.id)}
+                className="flex-row items-center gap-1 rounded-md border px-2 py-1 active:opacity-70"
+                style={{ borderColor: `${accent}55` }}
+                accessibilityLabel={`Remove tag ${tag.name}`}
+                accessibilityRole="button"
+              >
+                <Ionicons name={resolveIcon(tag)} size={12} color={accent} />
+                <Text className="text-xs text-foreground">{tag.name}</Text>
+                <Ionicons name="close-circle" size={14} color={mutedColor} />
+              </Pressable>
+            );
+          })}
+        </View>
+      )}
+
+      <SearchInput
+        value={query}
+        onChangeText={setQuery}
+        placeholder={`Search ${tags.length} tag${tags.length === 1 ? "" : "s"}...`}
+        accessibilityLabel="Search tags"
+      />
+
+      <View
+        className="rounded-lg border border-border dark:border-neutral-800"
+        style={{ maxHeight: listMaxHeight }}
+      >
+        {filteredTags.length === 0 ? (
+          <View className="p-4">
+            <MutedText className="text-center text-sm italic">
+              {query ? `No tags match "${query}"` : "No tags yet"}
+            </MutedText>
+          </View>
+        ) : (
+          <ScrollView keyboardShouldPersistTaps="handled">
+            {filteredTags.map((tag) => {
+              const selected = selectedSet.has(tag.id);
+              const accent = tag.color ?? mutedColor;
+              const selectedColor = isDark ? "#FFFFFF" : "#000000";
+              const checkboxColor = selected ? selectedColor : mutedColor;
+              return (
+                <Pressable
+                  key={tag.id}
+                  onPress={() => onToggle(tag.id)}
+                  accessibilityLabel={`${selected ? "Deselect" : "Select"} tag ${tag.name}`}
+                  accessibilityRole="checkbox"
+                  accessibilityState={{ checked: selected }}
+                  className="flex-row items-center gap-2 px-3 py-2 active:bg-neutral-100 dark:active:bg-neutral-800"
+                >
+                  <Ionicons
+                    name={selected ? "checkbox" : "square-outline"}
+                    size={18}
+                    color={checkboxColor}
+                  />
+                  <Ionicons name={resolveIcon(tag)} size={14} color={accent} />
+                  <Text className="flex-1 text-sm text-foreground">{tag.name}</Text>
+                </Pressable>
+              );
+            })}
+          </ScrollView>
+        )}
+      </View>
+    </View>
+  );
+}

package/src/components/text.tsx

@@ -0,0 +1,77 @@
+import React from "react";
+import { Text as RNText, type TextProps as RNTextProps } from "react-native";
+import { cn } from "../utils/cn";
+
+export interface TextProps extends RNTextProps {
+  className?: string;
+  children?: React.ReactNode;
+}
+
+/**
+ * Text component with NativeWind styling. Provides consistent typography
+ * across consumer apps with dark-mode support.
+ */
+export function Text({ className, children, ...props }: TextProps) {
+  return (
+    <RNText className={cn("text-base text-foreground dark:text-white", className)} {...props}>
+      {children}
+    </RNText>
+  );
+}
+
+/** Heading variant with larger size and bold weight. */
+export function Heading({ className, children, ...props }: TextProps) {
+  return (
+    <RNText
+      className={cn("text-2xl font-bold text-foreground dark:text-white", className)}
+      {...props}
+    >
+      {children}
+    </RNText>
+  );
+}
+
+/** Label variant for form labels and small text. */
+export function Label({ className, children, ...props }: TextProps) {
+  return (
+    <RNText
+      className={cn("text-sm text-muted-foreground dark:text-neutral-400", className)}
+      {...props}
+    >
+      {children}
+    </RNText>
+  );
+}
+
+/** Muted text variant for less prominent content. */
+export function MutedText({ className, children, ...props }: TextProps) {
+  return (
+    <RNText
+      className={cn("text-base text-muted-foreground dark:text-neutral-400", className)}
+      {...props}
+    >
+      {children}
+    </RNText>
+  );
+}
+
+/** Monospace text variant for codes, passwords, and technical content. */
+export function MonoText({ className, children, ...props }: TextProps) {
+  return (
+    <RNText
+      className={cn("font-mono text-base text-foreground dark:text-white", className)}
+      {...props}
+    >
+      {children}
+    </RNText>
+  );
+}
+
+/** Error text variant for validation messages. */
+export function ErrorText({ className, children, ...props }: TextProps) {
+  return (
+    <RNText className={cn("text-sm text-destructive dark:text-red-400", className)} {...props}>
+      {children}
+    </RNText>
+  );
+}

package/src/components/toast/ToastPortal.tsx

@@ -0,0 +1,16 @@
+import React from "react";
+import Toast from "react-native-toast-message";
+import { toastConfig } from "./toast-config";
+
+/**
+ * Native toast portal — renders `Toast` directly in the component tree.
+ * Toast uses absolute positioning + a high zIndex to float above most
+ * content. Note: Toast will not appear above a React Native `Modal`
+ * (dialogs); wrapping in a Modal to force that would block all touches
+ * on the screen.
+ */
+export function ToastPortal(): React.JSX.Element {
+  return <Toast config={toastConfig} position="top" visibilityTime={3000} topOffset={50} />;
+}
+
+export default ToastPortal;

package/src/components/toast/ToastPortal.web.tsx

@@ -0,0 +1,47 @@
+import React, { useEffect, useRef } from "react";
+import { createPortal } from "react-dom";
+import Toast from "react-native-toast-message";
+import { toastConfig } from "./toast-config";
+
+/**
+ * Web toast portal — mounts `Toast` into a div appended directly to
+ * `document.body` so it renders above React Native Web's `Modal`
+ * portals (which also target body).
+ *
+ * The container div uses `pointer-events:none` so the transparent
+ * overlay never intercepts clicks. HTML `pointer-events` does NOT
+ * inherit to children (unlike SVG), so the visible toast pill itself
+ * remains fully interactive via its own event handlers.
+ */
+export function ToastPortal(): React.JSX.Element | null {
+  const containerRef = useRef<HTMLDivElement | null>(null);
+
+  if (!containerRef.current) {
+    const div = document.createElement("div");
+    div.style.cssText =
+      "position:fixed;top:0;bottom:0;right:0;left:var(--sidebar-width,0px);z-index:999999;pointer-events:none;";
+    containerRef.current = div;
+  }
+
+  useEffect(() => {
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    document.body.appendChild(container);
+    return () => {
+      document.body.removeChild(container);
+    };
+  }, []);
+
+  if (!containerRef.current) {
+    return null;
+  }
+
+  return createPortal(
+    <Toast config={toastConfig} position="top" visibilityTime={3000} topOffset={50} />,
+    containerRef.current
+  );
+}
+
+export default ToastPortal;

package/src/components/toast/index.ts

@@ -0,0 +1,2 @@
+export { ToastPortal } from "./ToastPortal";
+export { toastConfig } from "./toast-config";

package/src/components/toast/toast-config.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { View } from "react-native";
+import type { BaseToastProps } from "react-native-toast-message";
+import { Text } from "../text";
+
+/**
+ * Shared toast renderer config for `react-native-toast-message`. Three
+ * variants (success / error / info) rendered as pill cards in the
+ * package's standard token palette. Used by `ToastPortal` on both
+ * native and web.
+ */
+export const toastConfig = {
+  success: ({ text1, text2 }: BaseToastProps) => (
+    <View className="self-center bg-green-500 dark:bg-green-600 px-4 py-3 rounded-lg mx-4 mt-4">
+      <Text className="text-white font-semibold">{text1}</Text>
+      {text2 && <Text className="text-white/80 text-sm mt-1">{text2}</Text>}
+    </View>
+  ),
+  error: ({ text1, text2 }: BaseToastProps) => (
+    <View className="self-center bg-destructive dark:bg-red-600 px-4 py-3 rounded-lg mx-4 mt-4">
+      <Text className="text-white font-semibold">{text1}</Text>
+      {text2 && <Text className="text-white/80 text-sm mt-1">{text2}</Text>}
+    </View>
+  ),
+  info: ({ text1, text2 }: BaseToastProps) => (
+    <View className="self-center bg-blue-500 dark:bg-blue-600 px-4 py-3 rounded-lg mx-4 mt-4">
+      <Text className="text-white font-semibold">{text1}</Text>
+      {text2 && <Text className="text-white/80 text-sm mt-1">{text2}</Text>}
+    </View>
+  ),
+};