@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ListRow.jsx

@@ -0,0 +1,281 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, Text, View } from "react-native";
+import { NEUTRAL_500 } from "./colors";
+import { cn } from "./cn";
+import { textStyle, typeStyle } from "./controlStyles";
+import { FLOATING_ROW_RADIUS } from "./floating";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+/**
+ * A list row: an icon or `leading` node, a title with optional `titleEnd`,
+ * `meta` and `detail` lines, and `right` content. With `onPress` or
+ * `onLongPress` the row is a button named by `title`. A `control` sits beside
+ * the pressable area, not in it.
+ */
+export function ListRow(t0) {
+  const $ = _c(86);
+  const {
+    title,
+    meta,
+    detail,
+    icon: Icon,
+    iconColor: t1,
+    leading,
+    titleEnd,
+    right,
+    control,
+    onPress,
+    onLongPress,
+    accessibilityLabel,
+    onCanvas: t2,
+    testID
+  } = t0;
+  const iconColor = t1 === undefined ? NEUTRAL_500 : t1;
+  const onCanvas = t2 === undefined ? false : t2;
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const t3 = largerText ? "text-xl" : "text-lg";
+  const t4 = titleEnd != null && "min-w-0 flex-1";
+  let t5;
+  if ($[0] !== t3 || $[1] !== t4) {
+    t5 = cn("font-instrument-sans-semibold", t3, t4);
+    $[0] = t3;
+    $[1] = t4;
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  let t6;
+  if ($[3] !== scheme) {
+    t6 = textStyle("foreground", scheme);
+    $[3] = scheme;
+    $[4] = t6;
+  } else {
+    t6 = $[4];
+  }
+  let t7;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t7 = typeStyle("semibold");
+    $[5] = t7;
+  } else {
+    t7 = $[5];
+  }
+  let t8;
+  if ($[6] !== t6) {
+    t8 = [t6, t7];
+    $[6] = t6;
+    $[7] = t8;
+  } else {
+    t8 = $[7];
+  }
+  let t9;
+  if ($[8] !== t5 || $[9] !== t8 || $[10] !== title) {
+    t9 = <Text numberOfLines={2} className={t5} style={t8}>{title}</Text>;
+    $[8] = t5;
+    $[9] = t8;
+    $[10] = title;
+    $[11] = t9;
+  } else {
+    t9 = $[11];
+  }
+  const titleText = t9;
+  let t10;
+  if ($[12] !== Icon || $[13] !== iconColor || $[14] !== largerText || $[15] !== leading) {
+    t10 = leading != null ? <View className="shrink-0">{leading}</View> : Icon ? <Icon size={largerText ? 30 : 26} color={iconColor} /> : null;
+    $[12] = Icon;
+    $[13] = iconColor;
+    $[14] = largerText;
+    $[15] = leading;
+    $[16] = t10;
+  } else {
+    t10 = $[16];
+  }
+  let t11;
+  if ($[17] !== titleEnd || $[18] !== titleText) {
+    t11 = titleEnd != null ? <View className="flex-row items-center gap-2">{titleText}<View className="shrink-0">{titleEnd}</View></View> : titleText;
+    $[17] = titleEnd;
+    $[18] = titleText;
+    $[19] = t11;
+  } else {
+    t11 = $[19];
+  }
+  let t12;
+  if ($[20] !== largerText || $[21] !== meta || $[22] !== scheme) {
+    t12 = meta ? <Text className={cn("font-instrument-sans", largerText ? "text-lg" : "text-base")} style={textStyle("muted", scheme)}>{meta}</Text> : null;
+    $[20] = largerText;
+    $[21] = meta;
+    $[22] = scheme;
+    $[23] = t12;
+  } else {
+    t12 = $[23];
+  }
+  let t13;
+  if ($[24] !== detail || $[25] !== t11 || $[26] !== t12) {
+    t13 = <View className="min-w-0 flex-1">{t11}{t12}{detail}</View>;
+    $[24] = detail;
+    $[25] = t11;
+    $[26] = t12;
+    $[27] = t13;
+  } else {
+    t13 = $[27];
+  }
+  let t14;
+  if ($[28] !== right || $[29] !== t10 || $[30] !== t13) {
+    t14 = <>{t10}{t13}{right}</>;
+    $[28] = right;
+    $[29] = t10;
+    $[30] = t13;
+    $[31] = t14;
+  } else {
+    t14 = $[31];
+  }
+  const content = t14;
+  const pressable = Boolean(onPress || onLongPress);
+  const height = largerText ? "min-h-[72px]" : "min-h-16";
+  const paddingY = largerText ? "py-4" : "py-3";
+  const t15 = tokens.color[onCanvas ? "surface" : "surfaceSecondary"][scheme];
+  let t16;
+  if ($[32] !== t15) {
+    t16 = {
+      backgroundColor: t15,
+      borderRadius: FLOATING_ROW_RADIUS
+    };
+    $[32] = t15;
+    $[33] = t16;
+  } else {
+    t16 = $[33];
+  }
+  const rowStyle = t16;
+  if (control != null) {
+    let T0;
+    let t17;
+    let t18;
+    let t19;
+    if ($[34] !== accessibilityLabel || $[35] !== content || $[36] !== height || $[37] !== onLongPress || $[38] !== onPress || $[39] !== paddingY || $[40] !== pressable || $[41] !== rowStyle || $[42] !== testID || $[43] !== title) {
+      const bodyClassName = cn("min-w-0 flex-1 flex-row items-center gap-3 self-stretch pl-4 pr-3", paddingY);
+      T0 = View;
+      if ($[48] !== height) {
+        t17 = cn("flex-row items-center", height);
+        $[48] = height;
+        $[49] = t17;
+      } else {
+        t17 = $[49];
+      }
+      t18 = rowStyle;
+      t19 = pressable ? <Pressable testID={testID} accessibilityRole="button" accessibilityLabel={accessibilityLabel ?? title} onPress={onPress} onLongPress={onLongPress} className={cn(bodyClassName, "active:opacity-70")}>{content}</Pressable> : <View testID={testID} className={bodyClassName}>{content}</View>;
+      $[34] = accessibilityLabel;
+      $[35] = content;
+      $[36] = height;
+      $[37] = onLongPress;
+      $[38] = onPress;
+      $[39] = paddingY;
+      $[40] = pressable;
+      $[41] = rowStyle;
+      $[42] = testID;
+      $[43] = title;
+      $[44] = T0;
+      $[45] = t17;
+      $[46] = t18;
+      $[47] = t19;
+    } else {
+      T0 = $[44];
+      t17 = $[45];
+      t18 = $[46];
+      t19 = $[47];
+    }
+    let t20;
+    if ($[50] !== control) {
+      t20 = <View className="shrink-0 pr-4">{control}</View>;
+      $[50] = control;
+      $[51] = t20;
+    } else {
+      t20 = $[51];
+    }
+    let t21;
+    if ($[52] !== T0 || $[53] !== t17 || $[54] !== t18 || $[55] !== t19 || $[56] !== t20) {
+      t21 = <T0 className={t17} style={t18}>{t19}{t20}</T0>;
+      $[52] = T0;
+      $[53] = t17;
+      $[54] = t18;
+      $[55] = t19;
+      $[56] = t20;
+      $[57] = t21;
+    } else {
+      t21 = $[57];
+    }
+    return t21;
+  }
+  let T0;
+  let t17;
+  let t18;
+  let t19;
+  let t20;
+  let t21;
+  let t22;
+  let t23;
+  if ($[58] !== accessibilityLabel || $[59] !== content || $[60] !== height || $[61] !== onLongPress || $[62] !== onPress || $[63] !== paddingY || $[64] !== pressable || $[65] !== rowStyle || $[66] !== testID || $[67] !== title) {
+    t23 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const className = cn("flex-row items-center gap-3 px-4", height, paddingY);
+      if (!pressable) {
+        t23 = <View testID={testID} className={className} style={rowStyle}>{content}</View>;
+        break bb0;
+      }
+      T0 = Pressable;
+      t17 = testID;
+      t18 = "button";
+      t19 = accessibilityLabel ?? title;
+      t20 = onPress;
+      t21 = onLongPress;
+      t22 = cn(className, "active:opacity-70");
+    }
+    $[58] = accessibilityLabel;
+    $[59] = content;
+    $[60] = height;
+    $[61] = onLongPress;
+    $[62] = onPress;
+    $[63] = paddingY;
+    $[64] = pressable;
+    $[65] = rowStyle;
+    $[66] = testID;
+    $[67] = title;
+    $[68] = T0;
+    $[69] = t17;
+    $[70] = t18;
+    $[71] = t19;
+    $[72] = t20;
+    $[73] = t21;
+    $[74] = t22;
+    $[75] = t23;
+  } else {
+    T0 = $[68];
+    t17 = $[69];
+    t18 = $[70];
+    t19 = $[71];
+    t20 = $[72];
+    t21 = $[73];
+    t22 = $[74];
+    t23 = $[75];
+  }
+  if (t23 !== Symbol.for("react.early_return_sentinel")) {
+    return t23;
+  }
+  let t24;
+  if ($[76] !== T0 || $[77] !== content || $[78] !== rowStyle || $[79] !== t17 || $[80] !== t18 || $[81] !== t19 || $[82] !== t20 || $[83] !== t21 || $[84] !== t22) {
+    t24 = <T0 testID={t17} accessibilityRole={t18} accessibilityLabel={t19} onPress={t20} onLongPress={t21} className={t22} style={rowStyle}>{content}</T0>;
+    $[76] = T0;
+    $[77] = content;
+    $[78] = rowStyle;
+    $[79] = t17;
+    $[80] = t18;
+    $[81] = t19;
+    $[82] = t20;
+    $[83] = t21;
+    $[84] = t22;
+    $[85] = t24;
+  } else {
+    t24 = $[85];
+  }
+  return t24;
+}

package/dist/LoadingState.jsx

@@ -0,0 +1,205 @@
+import { c as _c } from "react/compiler-runtime";
+import { View } from "react-native";
+import Animated, { useAnimatedStyle, useFrameCallback, useSharedValue } from "react-native-reanimated";
+import { DRIVE_DELAYS, DRIVE_SIZES, DRIVE_STILL_FRAME_MS, driveCellOpacity } from "./loadingGrid";
+import { tokens } from "./tokens";
+import { useReduceMotion } from "./useReduceMotion";
+import { useScheme } from "./useScheme";
+/**
+ * The web `LoadingState` with `variant="Drive"` and `iconOnly`: a 3x3 pixel
+ * grid whose chevron wavefront drives right. Same cells, delays, 650 ms
+ * cycle and keyframes as the web (see `loadingGrid.ts`). One frame clock per
+ * grid on the UI thread, started on mount as the web WAAPI pulse is. With
+ * Reduce Motion, or `paused`, it holds a still chevron frame and runs no
+ * clock. The labelled form (label and elapsed timer) and the `Dots` and
+ * `Orbit` variants are not ported.
+ */
+export function LoadingState(t0) {
+  const $ = _c(12);
+  const {
+    label: t1,
+    size: t2,
+    color,
+    colors,
+    paused: t3
+  } = t0;
+  const label = t1 === undefined ? "Working" : t1;
+  const size = t2 === undefined ? "default" : t2;
+  const paused = t3 === undefined ? false : t3;
+  const scheme = useScheme();
+  const reduceMotion = useReduceMotion();
+  const single = color ?? tokens.color.muted[scheme];
+  let t4;
+  if ($[0] !== colors || $[1] !== single) {
+    t4 = colors ?? [single, single, single];
+    $[0] = colors;
+    $[1] = single;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  const fill = t4;
+  const still = reduceMotion || paused;
+  let t5;
+  let t6;
+  if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      busy: true
+    };
+    t6 = {
+      alignSelf: "flex-start"
+    };
+    $[3] = t5;
+    $[4] = t6;
+  } else {
+    t5 = $[3];
+    t6 = $[4];
+  }
+  let t7;
+  if ($[5] !== fill || $[6] !== size || $[7] !== still) {
+    t7 = still ? <DriveGrid size={size} fill={fill} elapsed={undefined} /> : <RunningDriveGrid size={size} fill={fill} />;
+    $[5] = fill;
+    $[6] = size;
+    $[7] = still;
+    $[8] = t7;
+  } else {
+    t7 = $[8];
+  }
+  let t8;
+  if ($[9] !== label || $[10] !== t7) {
+    t8 = <View accessible={true} accessibilityRole="progressbar" accessibilityLabel={label} accessibilityState={t5} style={t6}>{t7}</View>;
+    $[9] = label;
+    $[10] = t7;
+    $[11] = t8;
+  } else {
+    t8 = $[11];
+  }
+  return t8;
+}
+
+/** Column colours, left to right. */
+
+/** Owns the clock, so unmounting it (Reduce Motion, `paused`) stops the frame callback. */
+function RunningDriveGrid(t0) {
+  const $ = _c(4);
+  const {
+    size,
+    fill
+  } = t0;
+  const elapsed = useSharedValue(0);
+  useFrameCallback(frame => {
+    "worklet";
+
+    elapsed.set(frame.timeSinceFirstFrame);
+  }, true);
+  let t1;
+  if ($[0] !== elapsed || $[1] !== fill || $[2] !== size) {
+    t1 = <DriveGrid size={size} fill={fill} elapsed={elapsed} />;
+    $[0] = elapsed;
+    $[1] = fill;
+    $[2] = size;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+
+/** The nine cells. No `elapsed`: the still frame. */
+function DriveGrid(t0) {
+  const $ = _c(11);
+  const {
+    size,
+    fill,
+    elapsed
+  } = t0;
+  const {
+    gap
+  } = DRIVE_SIZES[size];
+  let t1;
+  if ($[0] !== gap) {
+    t1 = {
+      gap
+    };
+    $[0] = gap;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = [0, 1, 2];
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  let t3;
+  if ($[3] !== elapsed || $[4] !== fill || $[5] !== gap || $[6] !== size) {
+    t3 = t2.map(row => <View key={row} style={{
+      flexDirection: "row",
+      gap
+    }}>{DRIVE_DELAYS.slice(row * 3, row * 3 + 3).map((delay, column) => elapsed ? <DriveCell key={column} size={size} fill={fill[column] ?? fill[0]} delay={delay} elapsed={elapsed} /> : <View key={column} style={[cellStyle(size, fill[column] ?? fill[0]), {
+        opacity: driveCellOpacity(DRIVE_STILL_FRAME_MS, delay)
+      }]} />)}</View>);
+    $[3] = elapsed;
+    $[4] = fill;
+    $[5] = gap;
+    $[6] = size;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== t1 || $[9] !== t3) {
+    t4 = <View style={t1}>{t3}</View>;
+    $[8] = t1;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  return t4;
+}
+function DriveCell(t0) {
+  const $ = _c(6);
+  const {
+    size,
+    fill,
+    delay,
+    elapsed
+  } = t0;
+  const pulse = useAnimatedStyle(() => ({
+    opacity: driveCellOpacity(elapsed.get(), delay)
+  }));
+  let t1;
+  if ($[0] !== fill || $[1] !== size) {
+    t1 = cellStyle(size, fill);
+    $[0] = fill;
+    $[1] = size;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  let t2;
+  if ($[3] !== pulse || $[4] !== t1) {
+    t2 = <Animated.View style={[t1, pulse]} />;
+    $[3] = pulse;
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+function cellStyle(size, fill) {
+  const {
+    cell,
+    radius
+  } = DRIVE_SIZES[size];
+  return {
+    width: cell,
+    height: cell,
+    borderRadius: radius,
+    backgroundColor: fill
+  };
+}

package/dist/PageIndicator.jsx

@@ -0,0 +1,128 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, View } from "react-native";
+import { MIN_TOUCH_TARGET } from "./controlStyles";
+import { palette, withAlpha } from "./palette";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+/** Dot sizes: the web `CarouselDots` (`h-1.5`, active `w-4`, `gap-1.5`), a step up with larger text. */
+export function pageDotSize(largerText) {
+  return largerText ? {
+    height: 8,
+    active: 20,
+    gap: 8
+  } : {
+    height: 6,
+    active: 16,
+    gap: 6
+  };
+}
+
+/**
+ * Page dots, as the web `CarouselDots`: the current page is a wider dot in
+ * `palette.primary`, the others muted at 30%. Nothing for a single page.
+ * Without `onChange` it is one element that reads "Page 2 of 5". With it each
+ * dot is a 44 button named "Page 2 of 5", `selected` on the current page; the
+ * dots then sit 44 apart, so each has a whole target.
+ */
+export function PageIndicator(t0) {
+  const $ = _c(19);
+  const {
+    count,
+    index,
+    onChange,
+    testID
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  if (count <= 1) {
+    return null;
+  }
+  const current = Math.min(Math.max(index, 0), count - 1);
+  let t1;
+  if ($[0] !== largerText) {
+    t1 = pageDotSize(largerText);
+    $[0] = largerText;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  const size = t1;
+  let t2;
+  if ($[2] !== count) {
+    t2 = page => `Page ${page + 1} of ${count}`;
+    $[2] = count;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const pageLabel = t2;
+  let t3;
+  if ($[4] !== current || $[5] !== scheme || $[6] !== size) {
+    t3 = page_0 => {
+      const selected = page_0 === current;
+      return <View key={page_0} style={{
+        height: size.height,
+        width: selected ? size.active : size.height,
+        borderRadius: size.height / 2,
+        backgroundColor: selected ? palette.primary[scheme] : withAlpha(tokens.color.muted[scheme], 0.3)
+      }} />;
+    };
+    $[4] = current;
+    $[5] = scheme;
+    $[6] = size;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  const dot = t3;
+  let t4;
+  let t5;
+  if ($[8] !== count || $[9] !== current || $[10] !== dot || $[11] !== onChange || $[12] !== pageLabel || $[13] !== size || $[14] !== testID) {
+    t5 = Symbol.for("react.early_return_sentinel");
+    bb0: {
+      const pages = Array.from({
+        length: count
+      }, _temp);
+      if (!onChange) {
+        let t6;
+        if ($[17] !== size.gap) {
+          t6 = {
+            gap: size.gap
+          };
+          $[17] = size.gap;
+          $[18] = t6;
+        } else {
+          t6 = $[18];
+        }
+        t5 = <View testID={testID} accessible={true} accessibilityLabel={pageLabel(current)} className="flex-row items-center justify-center" style={t6}>{pages.map(page_2 => dot(page_2))}</View>;
+        break bb0;
+      }
+      t4 = <View testID={testID} className="flex-row items-center justify-center">{pages.map(page_3 => <Pressable key={page_3} testID={testID ? `${testID}-${page_3}` : undefined} accessibilityRole="button" accessibilityLabel={pageLabel(page_3)} accessibilityState={{
+          selected: page_3 === current
+        }} onPress={() => onChange(page_3)} className="items-center justify-center active:opacity-70" style={{
+          minWidth: MIN_TOUCH_TARGET,
+          height: MIN_TOUCH_TARGET
+        }}>{dot(page_3)}</Pressable>)}</View>;
+    }
+    $[8] = count;
+    $[9] = current;
+    $[10] = dot;
+    $[11] = onChange;
+    $[12] = pageLabel;
+    $[13] = size;
+    $[14] = testID;
+    $[15] = t4;
+    $[16] = t5;
+  } else {
+    t4 = $[15];
+    t5 = $[16];
+  }
+  if (t5 !== Symbol.for("react.early_return_sentinel")) {
+    return t5;
+  }
+  return t4;
+}
+function _temp(_, page_1) {
+  return page_1;
+}