@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/media/MediaCard.jsx

@@ -0,0 +1,162 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, Text, View } from "react-native";
+import { sizeStyle, textStyle, typeStyle } from "../controlStyles";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+/**
+ * A card for one thing a turn produced, such as a saved file or a report: an
+ * icon, a title and a muted line, on the surface fill at the surface radius
+ * (the web `Surface density="tight"`). It is at least 56 high. With `onPress`
+ * the whole card is a button that fades while pressed; otherwise `action`
+ * holds its control.
+ */
+export function MediaCard(t0) {
+  const $ = _c(40);
+  const {
+    icon: Icon,
+    title,
+    description,
+    onPress,
+    action,
+    trailingIcon: Trailing,
+    backgroundColor,
+    color,
+    mutedColor,
+    accessibilityLabel,
+    accessibilityHint,
+    testID
+  } = t0;
+  const scheme = useScheme();
+  const muted = mutedColor ?? tokens.color.muted[scheme];
+  let t1;
+  if ($[0] !== Icon || $[1] !== muted) {
+    t1 = <Icon size={18} color={muted} />;
+    $[0] = Icon;
+    $[1] = muted;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  let t3;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = sizeStyle("text-sm");
+    t3 = typeStyle("medium");
+    $[3] = t2;
+    $[4] = t3;
+  } else {
+    t2 = $[3];
+    t3 = $[4];
+  }
+  let t4;
+  if ($[5] !== color || $[6] !== scheme) {
+    t4 = color ? {
+      color
+    } : textStyle("foreground", scheme);
+    $[5] = color;
+    $[6] = scheme;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== t4) {
+    t5 = [t2, t3, t4];
+    $[8] = t4;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  let t6;
+  if ($[10] !== t5 || $[11] !== title) {
+    t6 = <Text numberOfLines={1} className="font-instrument-sans-medium" style={t5}>{title}</Text>;
+    $[10] = t5;
+    $[11] = title;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== description || $[14] !== muted) {
+    t7 = description ? <Text numberOfLines={1} className="font-instrument-sans" style={[sizeStyle("text-xs"), {
+      color: muted
+    }]}>{description}</Text> : null;
+    $[13] = description;
+    $[14] = muted;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] !== t6 || $[17] !== t7) {
+    t8 = <View className="min-w-0 flex-1">{t6}{t7}</View>;
+    $[16] = t6;
+    $[17] = t7;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== Trailing || $[20] !== muted) {
+    t9 = Trailing ? <Trailing size={16} color={muted} /> : null;
+    $[19] = Trailing;
+    $[20] = muted;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  let t10;
+  if ($[22] !== t1 || $[23] !== t8 || $[24] !== t9) {
+    t10 = <>{t1}{t8}{t9}</>;
+    $[22] = t1;
+    $[23] = t8;
+    $[24] = t9;
+    $[25] = t10;
+  } else {
+    t10 = $[25];
+  }
+  const body = t10;
+  const t11 = backgroundColor ?? tokens.color.surface[scheme];
+  let t12;
+  if ($[26] !== t11) {
+    t12 = {
+      minHeight: 56,
+      borderRadius: tokens.radius.lg,
+      backgroundColor: t11
+    };
+    $[26] = t11;
+    $[27] = t12;
+  } else {
+    t12 = $[27];
+  }
+  const frame = t12;
+  if (onPress) {
+    const t13 = accessibilityLabel ?? title;
+    let t14;
+    if ($[28] !== accessibilityHint || $[29] !== body || $[30] !== frame || $[31] !== onPress || $[32] !== t13 || $[33] !== testID) {
+      t14 = <Pressable testID={testID} accessibilityRole="button" accessibilityLabel={t13} accessibilityHint={accessibilityHint} onPress={onPress} className="flex-row items-center gap-3 p-3 active:opacity-70" style={frame}>{body}</Pressable>;
+      $[28] = accessibilityHint;
+      $[29] = body;
+      $[30] = frame;
+      $[31] = onPress;
+      $[32] = t13;
+      $[33] = testID;
+      $[34] = t14;
+    } else {
+      t14 = $[34];
+    }
+    return t14;
+  }
+  let t13;
+  if ($[35] !== action || $[36] !== body || $[37] !== frame || $[38] !== testID) {
+    t13 = <View testID={testID} className="flex-row items-center gap-3 p-3" style={frame}>{body}{action}</View>;
+    $[35] = action;
+    $[36] = body;
+    $[37] = frame;
+    $[38] = testID;
+    $[39] = t13;
+  } else {
+    t13 = $[39];
+  }
+  return t13;
+}

package/dist/media/imageGrid.js

@@ -0,0 +1,54 @@
+import { tokens } from "../tokens";
+
+/** One image in a gallery or the full-screen viewer. */
+
+/**
+ * The web `ImageGalleryPreview` metrics: the surface radius, a 2 gap between
+ * tiles (`gap-0.5`), 4:3 tiles, a lone image at most 384 high (`max-h-96`) and
+ * the hairline ring (`ring-black/10`, `dark:ring-white/10`).
+ */
+export const MEDIA = {
+  radius: tokens.radius.lg,
+  gap: 2,
+  tileAspect: 4 / 3,
+  singleMaxHeight: 384,
+  outline: {
+    light: "rgba(0, 0, 0, 0.1)",
+    dark: "rgba(255, 255, 255, 0.1)"
+  }
+};
+
+/** One tile of the grid: which image, whether it fills the left column, and the "+N" it carries. */
+
+/**
+ * The web gallery grid for `count` images: up to four tiles in two columns.
+ * With three, the first fills the left column. Past four, the fourth carries
+ * "+N" for the rest. One image is not a grid (see `ImageGallery`).
+ */
+export function imageGridTiles(count) {
+  const shown = Math.min(count, 4);
+  const overflow = count - shown;
+  return Array.from({
+    length: shown
+  }, (_, index) => ({
+    index,
+    spansColumn: count === 3 && index === 0,
+    overflow: index === shown - 1 ? overflow : 0
+  }));
+}
+
+/**
+ * Width over height of a lone image, from its own size once loaded, kept
+ * between 1:2 and 3:1 so a very tall or wide capture still reads. 4:3 until
+ * the size is known.
+ */
+export function imageAspect(size) {
+  if (!size || size.width <= 0 || size.height <= 0) return MEDIA.tileAspect;
+  return Math.min(3, Math.max(0.5, size.width / size.height));
+}
+
+/** The viewer's page for a scroll offset, kept in range. */
+export function imageViewerPage(offsetX, pageWidth, count) {
+  if (pageWidth <= 0 || count <= 0) return 0;
+  return Math.min(count - 1, Math.max(0, Math.round(offsetX / pageWidth)));
+}

package/dist/motion.js

@@ -0,0 +1,33 @@
+import { Easing, ReduceMotion } from "react-native-reanimated";
+import { useReduceMotion } from "./useReduceMotion";
+
+// The kit's motion values, from the `animate-expo` tables, so every part
+// eases and springs in one family.
+
+/** Strong ease-out: things entering or leaving the screen. */
+export const EASE_OUT = Easing.bezier(0.23, 1, 0.32, 1);
+
+/** A sheet opened or closed by a tap: no finger, so no velocity and no bounce. */
+export const SHEET_SPRING = {
+  duration: 300,
+  dampingRatio: 1,
+  overshootClamping: true,
+  reduceMotion: ReduceMotion.System
+};
+
+/** A dragged sheet that springs home: a little bounce, as the finger applied force. Add the release `velocity`. */
+export const SHEET_SNAP_SPRING = {
+  duration: 300,
+  dampingRatio: 0.8,
+  reduceMotion: ReduceMotion.System
+};
+
+/**
+ * Press feedback on press-in, as a class for a `Pressable`: the 3% scale the
+ * `animate-expo` press recipe allows for something pressed this often (the
+ * web buttons and composer chips scale by 3-4%). With Reduce Motion, a dim
+ * instead of the scale.
+ */
+export function usePressFeedback() {
+  return useReduceMotion() ? "active:opacity-80" : "active:scale-[0.97]";
+}

package/dist/pagerSwipe.js

@@ -0,0 +1,104 @@
+/**
+ * The rules of a swiped `Pager`, as plain numbers, so they stay testable
+ * apart from the gesture. The pager's position is in pages: 0 is the first
+ * page, 1.5 is halfway between the second and the third. Distances are in
+ * points and velocities in points per second (the Gesture Handler units),
+ * positive to the right. Each rule is a worklet, so the drag runs it on the
+ * UI thread.
+ */
+
+/**
+ * Sideways travel (pt) before a drag takes the pager: twice a row swipe's
+ * (`SWIPE_ACTIVE_OFFSET_X`), so a swipeable row under the finger takes its
+ * own swipe first, and only a clearly sideways drag moves the pages.
+ */
+export const PAGER_ACTIVE_OFFSET_X = 24;
+
+/** Vertical travel (pt) that leaves the touch to the page's own scroll. */
+export const PAGER_FAIL_OFFSET_Y = 14;
+
+/** A sideways flick at this speed (pt/s) turns the page, however short the drag. */
+const FLICK_VELOCITY = 500;
+
+/** How far ahead (s) the release velocity carries the pages when deciding where they settle. */
+const PROJECTION_S = 0.2;
+
+/** How far the pages move past the first or last page: less and less the further the finger goes. */
+function rubberband(overshoot, dimension) {
+  "worklet";
+
+  const constant = 0.55;
+  return overshoot * dimension * constant / (dimension + constant * overshoot);
+}
+
+/**
+ * Where the pages sit for a finger `dx` points from where the drag caught
+ * them at `start`: they follow the finger 1:1 (a drag left shows the next
+ * page), and past the first or last page they meet growing resistance.
+ */
+export function pagerPosition(start, dx, width, count) {
+  "worklet";
+
+  if (width <= 0) return start;
+  const raw = start - dx / width;
+  const last = count - 1;
+  if (raw < 0) return -rubberband(-raw * width, width) / width;
+  if (raw > last) return last + rubberband((raw - last) * width, width) / width;
+  return raw;
+}
+
+/**
+ * The page a released drag settles on, from the page it started on
+ * (`from`), where it is (`position`) and the finger's speed (`vx`): a flick
+ * past `FLICK_VELOCITY` the way it moved turns one page; else the position
+ * carried on by its speed rounds to the nearest page. Never more than one
+ * page from `from`, and never past the ends.
+ */
+export function pagerSettle(position, vx, width, from, count) {
+  "worklet";
+
+  const moved = position - from;
+  // A drag left (negative `vx`) moves toward the next page (a larger position).
+  const toward = -Math.sign(vx);
+  let target;
+  if (Math.abs(vx) >= FLICK_VELOCITY && moved !== 0 && toward === Math.sign(moved)) {
+    target = from + toward;
+  } else {
+    target = Math.round(width > 0 ? position - vx * PROJECTION_S / width : position);
+  }
+  return Math.min(count - 1, Math.max(0, Math.min(from + 1, Math.max(from - 1, target))));
+}
+
+/**
+ * Every page from `from` to `to`, both included: the pages a slide from
+ * outside (a tab press) passes, which the pager draws so it never crosses a
+ * blank page.
+ */
+export function pagesBetween(from, to) {
+  const low = Math.min(from, to);
+  return Array.from({
+    length: Math.abs(to - from) + 1
+  }, (_, step) => low + step);
+}
+
+/**
+ * The scroll offset (pt) of a sideways tab row that centres the tab at
+ * `position` (in pages, as the pager's: 1.5 is halfway between the second
+ * and the third tab), given each tab's `x` and `width` in the row and the
+ * row's visible `viewport` width. Between two tabs it blends their centres;
+ * it never scrolls before the first tab or past the last.
+ */
+export function centredTabScroll(tabs, position, viewport) {
+  "worklet";
+
+  const last = tabs[tabs.length - 1];
+  if (!last || viewport <= 0) return 0;
+  const at = Math.min(tabs.length - 1, Math.max(0, position));
+  const below = Math.floor(at);
+  const left = tabs[below] ?? last;
+  const right = tabs[Math.min(tabs.length - 1, below + 1)] ?? last;
+  const share = at - below;
+  const centre = left.x + left.width / 2 + (right.x + right.width / 2 - (left.x + left.width / 2)) * share;
+  const end = Math.max(0, last.x + last.width - viewport);
+  return Math.min(end, Math.max(0, centre - viewport / 2));
+}

package/dist/palette.js

@@ -0,0 +1,104 @@
+/**
+ * Web semantic colours for React Native, converted from `@vvedantb/ui`
+ * `tokens.css` (oklch → sRGB hex, clipped to sRGB). `tokens.ts` holds the
+ * neutrals the native app ships; these are the colours it lacks (primary,
+ * danger, success, warning, overlay, segment, tab bar pill, field placeholder, backdrop,
+ * dialog description).
+ *
+ * A test in this package converts `tokens.css` and fails when a value here
+ * drifts, so change `tokens.css` first and then this file.
+ */
+export const palette = {
+  /** `--accent` (web `primary`): near-black in light, near-white in dark. */
+  primary: {
+    light: "#181818",
+    dark: "#fcfcfc"
+  },
+  primaryForeground: {
+    light: "#fcfcfc",
+    dark: "#181818"
+  },
+  danger: {
+    light: "#ff373c",
+    dark: "#db3b3e"
+  },
+  dangerForeground: {
+    light: "#fcfcfc",
+    dark: "#fcfcfc"
+  },
+  success: {
+    light: "#15c964",
+    dark: "#15c964"
+  },
+  successForeground: {
+    light: "#161917",
+    dark: "#161917"
+  },
+  warning: {
+    light: "#f5a523",
+    dark: "#f7b750"
+  },
+  warningForeground: {
+    light: "#1a1815",
+    dark: "#1a1815"
+  },
+  /** `--default` (web `secondary`): neutral control fill. */
+  default: {
+    light: "#ebebeb",
+    dark: "#272727"
+  },
+  defaultForeground: {
+    light: "#181818",
+    dark: "#fcfcfc"
+  },
+  overlay: {
+    light: "#ffffff",
+    dark: "#181818"
+  },
+  overlayForeground: {
+    light: "#181818",
+    dark: "#fcfcfc"
+  },
+  segment: {
+    light: "#ffffff",
+    dark: "#474747"
+  },
+  segmentForeground: {
+    light: "#181818",
+    dark: "#fcfcfc"
+  },
+  /**
+   * The `FloatingTabBar` active pill: `--default` in light (it shows on the
+   * near-white glass bar) and `--segment` in dark. Its own key, so an app that
+   * themes `segment` for the segmented `Tabs` thumb keeps a pill that shows on
+   * the dark glass bar.
+   */
+  tabBarPill: {
+    light: "#ebebeb",
+    dark: "#474747"
+  },
+  surfaceTertiary: {
+    light: "#eaeaea",
+    dark: "#282627"
+  },
+  fieldPlaceholder: {
+    light: "#727272",
+    dark: "#a0a0a0"
+  },
+  backdrop: {
+    light: "rgba(0, 0, 0, 0.5)",
+    dark: "rgba(0, 0, 0, 0.6)"
+  },
+  /** Web `DialogDescription` text: `--overlay-foreground` mixed 72% into `--overlay` (oklch), for 4.5:1 on the overlay. */
+  overlayMuted: {
+    light: "#505050",
+    dark: "#b5b5b5"
+  },
+  /** Fill of the web destructive `Button` (`oklch(47.2% 0.195 25.7)`), the same in both schemes. */
+  destructive: "#af0015"
+};
+/** `#rrggbb` with an alpha, as `rgba(...)`. For tints such as the badge fills (web `bg-danger/12`). */
+export function withAlpha(hex, alpha) {
+  const n = Number.parseInt(hex.slice(1, 7), 16);
+  return `rgba(${n >> 16 & 255}, ${n >> 8 & 255}, ${n & 255}, ${alpha})`;
+}

package/dist/primitives/button.jsx

@@ -0,0 +1,127 @@
+import { c as _c } from "react/compiler-runtime";
+import { TextClassContext } from "./text";
+import { cn } from "../cn";
+import { cva } from "class-variance-authority";
+import * as React from "react";
+import { Platform, Pressable } from "react-native";
+import { usePressFeedback } from "../motion";
+const buttonVariants = cva(cn("group flex-row items-center justify-center gap-2 shadow-none", Platform.select({
+  web: "outline-none transition-all"
+})), {
+  variants: {
+    variant: {
+      default: cn("bg-primary", Platform.select({
+        web: "hover:bg-primary/90"
+      })),
+      destructive: cn("bg-destructive", Platform.select({
+        web: "hover:bg-destructive/90"
+      })),
+      outline: cn("border border-border bg-background", Platform.select({
+        web: "hover:bg-accent"
+      })),
+      secondary: cn("bg-secondary", Platform.select({
+        web: "hover:bg-secondary/80"
+      })),
+      ghost: cn(Platform.select({
+        web: "hover:bg-accent"
+      })),
+      link: ""
+    },
+    size: {
+      default: "h-10 px-4 py-2",
+      sm: "h-8 px-3",
+      lg: "h-11 px-6",
+      icon: "h-10 w-10"
+    },
+    // The web `shape`: `pill` (default) is fully round, `rounded` the radius
+    // before 0.6.0. `Button` also sets the radius as a style, which wins.
+    shape: {
+      pill: "rounded-full",
+      rounded: "rounded-lg"
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default",
+    shape: "pill"
+  }
+});
+
+// No weight: a class context cannot carry the `typeStyle` that a face class
+// needs, so `Button` sets the medium face and its weight on its label.
+const buttonTextVariants = cva("text-sm text-foreground", {
+  variants: {
+    variant: {
+      default: "text-primary-foreground",
+      destructive: "text-white",
+      outline: "text-accent-foreground",
+      secondary: "text-secondary-foreground",
+      ghost: "text-accent-foreground",
+      link: "text-primary underline"
+    },
+    size: {
+      default: "",
+      sm: "",
+      lg: "",
+      icon: ""
+    }
+  },
+  defaultVariants: {
+    variant: "default",
+    size: "default"
+  }
+});
+const Button = React.forwardRef((t0, ref) => {
+  const $ = _c(12);
+  const {
+    className,
+    variant,
+    size,
+    shape,
+    ...props
+  } = t0;
+  const pressed = usePressFeedback();
+  const t1 = TextClassContext;
+  let t2;
+  if ($[0] !== size || $[1] !== variant) {
+    t2 = buttonTextVariants({
+      variant,
+      size
+    });
+    $[0] = size;
+    $[1] = variant;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const T0 = Pressable;
+  const t3 = cn(buttonVariants({
+    variant,
+    size,
+    shape
+  }), pressed, props.disabled && "opacity-45", className);
+  let t4;
+  if ($[3] !== T0 || $[4] !== props || $[5] !== ref || $[6] !== t3) {
+    t4 = <T0 ref={ref} className={t3} role="button" {...props} />;
+    $[3] = T0;
+    $[4] = props;
+    $[5] = ref;
+    $[6] = t3;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  let t5;
+  if ($[8] !== t1.Provider || $[9] !== t2 || $[10] !== t4) {
+    t5 = <t1.Provider value={t2}>{t4}</t1.Provider>;
+    $[8] = t1.Provider;
+    $[9] = t2;
+    $[10] = t4;
+    $[11] = t5;
+  } else {
+    t5 = $[11];
+  }
+  return t5;
+});
+Button.displayName = "Button";
+export { Button, buttonTextVariants, buttonVariants };