@vvedantb/native-ui 0.2.0 → 0.3.12

package/src/toastChrome.ts

@@ -0,0 +1,103 @@
+/**
+ * The `Toaster` look, from the web `SonnerToaster` at its default density
+ * (`createToasterClassNames` in `sonner.tsx`) with `toastIcons="filled24"`
+ * (`sonner-icons.tsx`). No React Native import, so the tests can load this
+ * file.
+ */
+import { palette, withAlpha } from "./palette";
+import { tokens } from "./tokens";
+
+type Scheme = "light" | "dark";
+
+/** Web `rounded-lg` (`--radius`, 16), the default `toastRadius`. */
+export const TOAST_RADIUS = tokens.radius.lg;
+
+/**
+ * The web `smooth-shadow-ring-md`: a 1 px ring in the border colour at 60%
+ * (`color-mix(in srgb, var(--color-border) 60%, transparent)`) and a
+ * `0 4px 12px rgb(0 0 0 / 0.08)` drop shadow. Native draws the ring as a
+ * border, so the painted toast is the web toast plus its ring.
+ */
+export const TOAST_RING = { width: 1, alpha: 0.6 } as const;
+export const TOAST_SHADOW = { offsetY: 4, blur: 12, opacity: 0.08 } as const;
+
+/**
+ * Fill, ring and radius of a toast. The fill is the web `glass-panel-strong`,
+ * the flat `--overlay` (`palette.overlay`), with no blur.
+ */
+export function toastSurfaceStyle(scheme: Scheme) {
+  return {
+    backgroundColor: palette.overlay[scheme],
+    borderColor: withAlpha(tokens.color.border[scheme], TOAST_RING.alpha),
+    borderWidth: TOAST_RING.width,
+    borderRadius: TOAST_RADIUS,
+  };
+}
+
+/**
+ * The drop shadow as a style: `boxShadow` on Android and web, the shadow
+ * props on iOS. The iOS radius is half the CSS blur, as a CSS blur is twice
+ * the Gaussian deviation.
+ */
+export function toastShadowStyle(os: string) {
+  const { offsetY, blur, opacity } = TOAST_SHADOW;
+  if (os === "ios") {
+    return {
+      shadowColor: tokens.color.black,
+      shadowOffset: { width: 0, height: offsetY },
+      shadowOpacity: opacity,
+      shadowRadius: blur / 2,
+    };
+  }
+  return { boxShadow: `0px ${offsetY}px ${blur}px rgba(0, 0, 0, ${opacity})` };
+}
+
+export type ToastIconVariant = "success" | "info" | "warning" | "error";
+
+/** Web `h-6 w-6`. */
+export const TOAST_ICON_SIZE = 24;
+
+/**
+ * The web `filledToastIcons`, path for path: filled shapes painted in the
+ * variant colour, with no stroke. `error` keeps the web 20 × 20 viewBox and
+ * `warning` its even-odd fill.
+ */
+export const TOAST_ICONS: Record<
+  ToastIconVariant,
+  { viewBox: string; d: string; evenOdd?: true }
+> = {
+  success: {
+    viewBox: "0 0 24 24",
+    d: "M12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2ZM16.78 9.7L11.11 15.37C10.97 15.51 10.78 15.59 10.58 15.59C10.38 15.59 10.19 15.51 10.05 15.37L7.22 12.54C6.93 12.25 6.93 11.77 7.22 11.48C7.51 11.19 7.99 11.19 8.28 11.48L10.58 13.78L15.72 8.64C16.01 8.35 16.49 8.35 16.78 8.64C17.07 8.93 17.07 9.4 16.78 9.7Z",
+  },
+  info: {
+    viewBox: "0 0 24 24",
+    d: "M12 22C17.51 22 22 17.51 22 12C22 6.49 17.51 2 12 2C6.49 2 2 6.49 2 12C2 17.51 6.49 22 12 22ZM12.75 16C12.75 16.41 12.41 16.75 12 16.75C11.59 16.75 11.25 16.41 11.25 16L11.25 11C11.25 10.59 11.59 10.25 12 10.25C12.41 10.25 12.75 10.59 12.75 11L12.75 16ZM11.08 7.62C11.13 7.49 11.2 7.39 11.29 7.29C11.39 7.2 11.5 7.13 11.62 7.08C11.74 7.03 11.87 7 12 7C12.13 7 12.26 7.03 12.38 7.08C12.5 7.13 12.61 7.2 12.71 7.29C12.8 7.39 12.87 7.49 12.92 7.62C12.97 7.74 13 7.87 13 8C13 8.13 12.97 8.26 12.92 8.38C12.87 8.5 12.8 8.61 12.71 8.71C12.61 8.8 12.5 8.87 12.38 8.92C12.14 9.02 11.86 9.02 11.62 8.92C11.5 8.87 11.39 8.8 11.29 8.71C11.2 8.61 11.13 8.5 11.08 8.38C11.03 8.26 11 8.13 11 8C11 7.87 11.03 7.74 11.08 7.62Z",
+  },
+  warning: {
+    viewBox: "0 0 24 24",
+    d: "M3 10.417C3 7.219 3 5.62 3.378 5.082C3.755 4.545 5.258 4.03 8.265 3.001L8.838 2.805C10.405 2.268 11.188 2 12 2C12.812 2 13.595 2.268 15.162 2.805L15.735 3.001C18.742 4.03 20.245 4.545 20.622 5.082C21 5.62 21 7.22 21 10.417V11.991C21 17.629 16.761 20.366 14.101 21.527C13.38 21.842 13.02 22 12 22C10.98 22 10.62 21.842 9.899 21.527C7.239 20.365 3 17.63 3 11.991V10.417ZM12 7.25C12.1989 7.25 12.3897 7.32902 12.5303 7.46967C12.671 7.61032 12.75 7.80109 12.75 8V12C12.75 12.1989 12.671 12.3897 12.5303 12.5303C12.3897 12.671 12.1989 12.75 12 12.75C11.8011 12.75 11.6103 12.671 11.4697 12.5303C11.329 12.3897 11.25 12.1989 11.25 12V8C11.25 7.80109 11.329 7.61032 11.4697 7.46967C11.6103 7.32902 11.8011 7.25 12 7.25ZM12 16C12.2652 16 12.5196 15.8946 12.7071 15.7071C12.8946 15.5196 13 15.2652 13 15C13 14.7348 12.8946 14.4804 12.7071 14.2929C12.5196 14.1054 12.2652 14 12 14C11.7348 14 11.4804 14.1054 11.2929 14.2929C11.1054 14.4804 11 14.7348 11 15C11 15.2652 11.1054 15.5196 11.2929 15.7071C11.4804 15.8946 11.7348 16 12 16Z",
+    evenOdd: true,
+  },
+  error: {
+    viewBox: "0 0 20 20",
+    d: "M17.51 3.85L11.57 0.42C10.6 -0.14 9.4 -0.14 8.42 0.42L2.49 3.85C1.52 4.41 0.919998 5.45 0.919998 6.58V13.42C0.919998 14.54 1.52 15.58 2.49 16.15L8.43 19.58C9.4 20.14 10.6 20.14 11.58 19.58L17.52 16.15C18.49 15.59 19.09 14.55 19.09 13.42V6.58C19.08 5.45 18.48 4.42 17.51 3.85ZM9.25 5.75C9.25 5.34 9.59 5 10 5C10.41 5 10.75 5.34 10.75 5.75V11C10.75 11.41 10.41 11.75 10 11.75C9.59 11.75 9.25 11.41 9.25 11V5.75ZM10.92 14.63C10.87 14.75 10.8 14.86 10.71 14.96C10.52 15.15 10.27 15.25 10 15.25C9.87 15.25 9.74 15.22 9.62 15.17C9.49 15.12 9.39 15.05 9.29 14.96C9.2 14.86 9.13 14.75 9.07 14.63C9.02 14.51 9 14.38 9 14.25C9 13.99 9.1 13.73 9.29 13.54C9.39 13.45 9.49 13.38 9.62 13.33C9.99 13.17 10.43 13.26 10.71 13.54C10.8 13.64 10.87 13.74 10.92 13.87C10.97 13.99 11 14.12 11 14.25C11 14.38 10.97 14.51 10.92 14.63Z",
+  },
+};
+
+/**
+ * Icon colour per variant: the web `text-success`, `text-destructive` (the
+ * `--danger` token), `text-warning` and `text-primary`.
+ */
+export function toastIconColor(variant: ToastIconVariant, scheme: Scheme): string {
+  switch (variant) {
+    case "success":
+      return palette.success[scheme];
+    case "error":
+      return palette.danger[scheme];
+    case "warning":
+      return palette.warning[scheme];
+    case "info":
+      return palette.primary[scheme];
+  }
+}

package/src/toastStore.ts

@@ -0,0 +1,86 @@
+// Module-level toast queue behind `toast()` and `<Toaster />`. No React Native
+// imports, so it runs anywhere (tests, non-component code).
+
+export type ToastVariant = "default" | "success" | "error" | "warning" | "info" | "loading";
+
+export type ToastOptions = {
+  /** Reuse an id to replace a toast in place, for example a `loading` toast with its result. */
+  id?: string;
+  description?: string;
+  /** Milliseconds before it closes. Default 4000; `loading` stays until replaced or dismissed. `Infinity` keeps any toast open. */
+  duration?: number;
+  /** One text button. A press runs `onPress` and closes the toast. */
+  action?: { label: string; onPress: () => void };
+};
+
+export type ToastItem = {
+  id: string;
+  variant: ToastVariant;
+  title: string;
+  description?: string;
+  duration: number;
+  action?: ToastOptions["action"];
+};
+
+/** At most this many toasts show; the oldest drop first. */
+export const MAX_TOASTS = 3;
+export const DEFAULT_TOAST_DURATION = 4000;
+
+let toasts: readonly ToastItem[] = [];
+let counter = 0;
+const listeners = new Set<() => void>();
+
+function emit() {
+  for (const listener of listeners) listener();
+}
+
+export function subscribeToasts(listener: () => void): () => void {
+  listeners.add(listener);
+  return () => {
+    listeners.delete(listener);
+  };
+}
+
+export function getToasts(): readonly ToastItem[] {
+  return toasts;
+}
+
+function show(variant: ToastVariant, title: string, options: ToastOptions = {}): string {
+  const id = options.id ?? `toast-${++counter}`;
+  const item: ToastItem = {
+    id,
+    variant,
+    title,
+    description: options.description,
+    duration:
+      options.duration ?? (variant === "loading" ? Infinity : DEFAULT_TOAST_DURATION),
+    action: options.action,
+  };
+  toasts = toasts.some((toast) => toast.id === id)
+    ? toasts.map((toast) => (toast.id === id ? item : toast))
+    : [...toasts, item].slice(-MAX_TOASTS);
+  emit();
+  return id;
+}
+
+/**
+ * Shows a toast and returns its id. The sonner-style shape of the web `toast`:
+ * `toast("Saved")`, `toast.success(...)`, `toast.error(...)`, `toast.warning(...)`,
+ * `toast.info(...)`, `toast.loading(...)` and `toast.dismiss(id?)`. Needs one
+ * `<Toaster />` mounted near the app root.
+ */
+export const toast = Object.assign(
+  (title: string, options?: ToastOptions) => show("default", title, options),
+  {
+    success: (title: string, options?: ToastOptions) => show("success", title, options),
+    error: (title: string, options?: ToastOptions) => show("error", title, options),
+    warning: (title: string, options?: ToastOptions) => show("warning", title, options),
+    info: (title: string, options?: ToastOptions) => show("info", title, options),
+    loading: (title: string, options?: ToastOptions) => show("loading", title, options),
+    /** Closes one toast, or every toast without an id. */
+    dismiss(id?: string) {
+      toasts = id === undefined ? [] : toasts.filter((toast) => toast.id !== id);
+      emit();
+    },
+  },
+);

package/src/tokens.ts

@@ -1,21 +1,26 @@
 /**
- * JS tokens for React Native. Values match `tokens.css`
- * (oklch neutrals → hex, 1rem = 16).
+ * JS tokens for React Native: colours, radii and spacing (1rem = 16).
  *
  * Copy of `packages/ui/tokens/src/native.ts`, kept here so native-ui has no
- * dependency on the web package. A test in `@vvedantb/ui` fails when the two
- * differ below this header: change both together.
+ * dependency on the web package. A test in `@vvedantb/ui` and one in this
+ * package fail when the two differ below this header: change both together.
+ *
+ * The neutrals and `radius.field` match `tokens.css` (oklch → sRGB hex); a
+ * test converts `tokens.css` and fails when they drift. `fill` and `hairline`
+ * are native glass chrome with no web token. `radius.card` has no web token
+ * either; `docs/native-ui-parity.md` lists it. The web semantic colours
+ * (primary, danger, success, warning) are in `palette.ts`.
  */
 export const tokens = {
   color: {
-    background: { light: "#f6f6f6", dark: "#1f1f1f" },
-    foreground: { light: "#242426", dark: "#fafafa" },
-    muted: { light: "#737373", dark: "#b3b3b3" },
-    border: { light: "#e5e5e5", dark: "#474747" },
-    surface: { light: "#ffffff", dark: "#242426" },
-    surfaceSecondary: { light: "#f2f2f2", dark: "#2a2a2c" },
-    surfaceCard: { light: "#fafafa", dark: "#2a2a2c" },
-    separator: { light: "#ebebeb", dark: "#404040" },
+    background: { light: "#f5f5f5", dark: "#060606" },
+    foreground: { light: "#181818", dark: "#fcfcfc" },
+    muted: { light: "#727272", dark: "#a0a0a0" },
+    border: { light: "#dedede", dark: "#292929" },
+    surface: { light: "#ffffff", dark: "#181818" },
+    surfaceSecondary: { light: "#efefef", dark: "#242323" },
+    surfaceCard: { light: "#f8f8f8", dark: "#242323" },
+    separator: { light: "#e4e4e4", dark: "#222222" },
     white: "#ffffff",
     black: "#000000",
     hairline: {
@@ -24,12 +29,12 @@ export const tokens = {
     },
     fill: {
       light: "rgba(255, 255, 255, 0.86)",
-      dark: "rgba(28, 28, 30, 0.88)",
+      dark: "rgba(24, 24, 24, 0.88)",
     },
   },
   radius: {
     lg: 16,
-    field: 20,
+    field: 10,
     md: 14,
     sm: 12,
     card: 24,

package/src/typography.ts

@@ -0,0 +1,24 @@
+/**
+ * NativeWind classes for Instrument Sans. The app loads the font files and maps
+ * these classes to them (see README). Literal strings, so Tailwind's source
+ * scan generates them.
+ */
+export const fontClass = {
+  regular: "font-instrument-sans",
+  medium: "font-instrument-sans-medium",
+  semibold: "font-instrument-sans-semibold",
+  bold: "font-instrument-sans-bold",
+} as const;
+
+/**
+ * `AppWordmark` geometry, the same numbers as the web `AppWordmark` and
+ * `.landing-wordmark-text`: Instrument Sans 500, letter spacing -0.02em, icon
+ * 1.4x the font size, gap 0.2em. A test checks them against the web source.
+ */
+export const WORDMARK = {
+  fontClass: fontClass.medium,
+  fontWeight: 500,
+  letterSpacingEm: -0.02,
+  iconScale: 1.4,
+  gapEm: 0.2,
+} as const;

package/src/useReduceMotion.ts

@@ -0,0 +1,24 @@
+import { useEffect, useState } from "react";
+import { AccessibilityInfo } from "react-native";
+import { useReducedMotion } from "react-native-reanimated";
+
+/**
+ * The system Reduce Motion setting (iOS) or Remove animations (Android). The
+ * first value is Reanimated's synchronous read, so an overlay that mounts open
+ * does not animate once before the setting loads. Later changes come from
+ * `AccessibilityInfo`.
+ */
+export function useReduceMotion() {
+  const initial = useReducedMotion();
+  const [enabled, setEnabled] = useState(initial);
+
+  useEffect(() => {
+    const subscription = AccessibilityInfo.addEventListener(
+      "reduceMotionChanged",
+      setEnabled,
+    );
+    return () => subscription.remove();
+  }, []);
+
+  return enabled;
+}

package/src/useScheme.ts

@@ -0,0 +1,6 @@
+import { useColorScheme } from "nativewind";
+
+/** Active colour scheme as a `tokens` / `palette` key. */
+export function useScheme(): "light" | "dark" {
+  return useColorScheme().colorScheme === "dark" ? "dark" : "light";
+}