@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/Skeleton.jsx

@@ -0,0 +1,311 @@
+import { c as _c } from "react/compiler-runtime";
+import { Fragment } from "react";
+import { StyleSheet, View } from "react-native";
+import Animated, { cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
+import { useEffect } from "react";
+import { cn } from "./cn";
+import { cardStyle } from "./controlStyles";
+import { ListDivider } from "./DividedList";
+import { useReduceMotion } from "./useReduceMotion";
+import { useScheme } from "./useScheme";
+
+/**
+ * Pulsing placeholder block. Holds still with Reduce Motion. Size it with
+ * `className` (for example `h-4 w-32`). The classes sit on a plain `View`:
+ * NativeWind does not style a Reanimated `Animated.View`, so only the pulse
+ * (opacity) is animated, on a fill inside.
+ */
+export function Skeleton(t0) {
+  const $ = _c(20);
+  let className;
+  let props;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = style;
+  } else {
+    className = $[1];
+    props = $[2];
+    style = $[3];
+  }
+  const reduceMotion = useReduceMotion();
+  const opacity = useSharedValue(0.4);
+  let t1;
+  let t2;
+  if ($[4] !== opacity || $[5] !== reduceMotion) {
+    t1 = () => {
+      if (reduceMotion) {
+        opacity.set(0.7);
+        return;
+      }
+      opacity.set(withRepeat(withTiming(1, {
+        duration: 800
+      }), -1, true));
+      return () => cancelAnimation(opacity);
+    };
+    t2 = [opacity, reduceMotion];
+    $[4] = opacity;
+    $[5] = reduceMotion;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t1 = $[6];
+    t2 = $[7];
+  }
+  useEffect(t1, t2);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.get()
+  }));
+  let t3;
+  if ($[8] !== className) {
+    t3 = cn("overflow-hidden rounded-lg", className);
+    $[8] = className;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== animatedStyle) {
+    t4 = [StyleSheet.absoluteFill, animatedStyle];
+    $[10] = animatedStyle;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = <View className="flex-1 bg-neutral-200 dark:bg-neutral-700" />;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== t4) {
+    t6 = <Animated.View style={t4}>{t5}</Animated.View>;
+    $[13] = t4;
+    $[14] = t6;
+  } else {
+    t6 = $[14];
+  }
+  let t7;
+  if ($[15] !== props || $[16] !== style || $[17] !== t3 || $[18] !== t6) {
+    t7 = <View accessibilityElementsHidden={true} importantForAccessibility="no-hide-descendants" {...props} style={style} className={t3}>{t6}</View>;
+    $[15] = props;
+    $[16] = style;
+    $[17] = t3;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  return t7;
+}
+
+/** A `Card`-shaped placeholder: the flat card fill and radius. */
+export function CardSkeleton() {
+  const $ = _c(6);
+  const scheme = useScheme();
+  let t0;
+  if ($[0] !== scheme) {
+    t0 = cardStyle(scheme);
+    $[0] = scheme;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  let t1;
+  let t2;
+  if ($[2] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = <Skeleton className="h-4 w-32" />;
+    t2 = <Skeleton className="h-16 w-full" />;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== t0) {
+    t3 = <View className="gap-3 p-5" style={t0}>{t1}{t2}</View>;
+    $[4] = t0;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  return t3;
+}
+
+/** Title widths, row by row, so a list of placeholders does not read as one block. */
+const TITLE_WIDTHS = ["72%", "54%", "84%", "62%", "46%", "78%"];
+/**
+ * A list row's placeholder, shaped like the row it stands for: a round mark,
+ * a title (and a detail line), and a short trailing block, on the `px-4` row
+ * padding. Pulses as `Skeleton`; holds still with Reduce Motion.
+ */
+export function SkeletonRow(t0) {
+  const $ = _c(21);
+  const {
+    index: t1,
+    leading,
+    lines: t2,
+    trailing: t3,
+    minHeight: t4,
+    className
+  } = t0;
+  const index = t1 === undefined ? 0 : t1;
+  const lines = t2 === undefined ? 1 : t2;
+  const trailing = t3 === undefined ? true : t3;
+  const minHeight = t4 === undefined ? 56 : t4;
+  let t5;
+  if ($[0] !== className) {
+    t5 = cn("flex-row items-center gap-3 px-4", className);
+    $[0] = className;
+    $[1] = t5;
+  } else {
+    t5 = $[1];
+  }
+  let t6;
+  if ($[2] !== minHeight) {
+    t6 = {
+      minHeight
+    };
+    $[2] = minHeight;
+    $[3] = t6;
+  } else {
+    t6 = $[3];
+  }
+  let t7;
+  if ($[4] !== leading) {
+    t7 = leading ? <Skeleton style={{
+      width: leading,
+      height: leading,
+      borderRadius: leading / 2
+    }} /> : null;
+    $[4] = leading;
+    $[5] = t7;
+  } else {
+    t7 = $[5];
+  }
+  const t8 = TITLE_WIDTHS[index % TITLE_WIDTHS.length];
+  let t9;
+  if ($[6] !== t8) {
+    t9 = <Skeleton className="h-3.5" style={{
+      width: t8
+    }} />;
+    $[6] = t8;
+    $[7] = t9;
+  } else {
+    t9 = $[7];
+  }
+  let t10;
+  if ($[8] !== lines) {
+    t10 = lines === 2 ? <Skeleton className="h-3 w-1/3" /> : null;
+    $[8] = lines;
+    $[9] = t10;
+  } else {
+    t10 = $[9];
+  }
+  let t11;
+  if ($[10] !== t10 || $[11] !== t9) {
+    t11 = <View className="min-w-0 flex-1 gap-2">{t9}{t10}</View>;
+    $[10] = t10;
+    $[11] = t9;
+    $[12] = t11;
+  } else {
+    t11 = $[12];
+  }
+  let t12;
+  if ($[13] !== trailing) {
+    t12 = trailing ? <Skeleton className="h-3 w-8" /> : null;
+    $[13] = trailing;
+    $[14] = t12;
+  } else {
+    t12 = $[14];
+  }
+  let t13;
+  if ($[15] !== t11 || $[16] !== t12 || $[17] !== t5 || $[18] !== t6 || $[19] !== t7) {
+    t13 = <View className={t5} style={t6}>{t7}{t11}{t12}</View>;
+    $[15] = t11;
+    $[16] = t12;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t7;
+    $[20] = t13;
+  } else {
+    t13 = $[20];
+  }
+  return t13;
+}
+/**
+ * Placeholder rows where a list is loading, in place of a centred spinner:
+ * the screen keeps the shape it will have. Screen readers hear one busy
+ * element named `label`.
+ */
+export function SkeletonList(t0) {
+  const $ = _c(14);
+  const {
+    label,
+    count: t1,
+    divided: t2,
+    renderRow,
+    className
+  } = t0;
+  const count = t1 === undefined ? 6 : t1;
+  const divided = t2 === undefined ? true : t2;
+  let t3;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      busy: true
+    };
+    $[0] = t3;
+  } else {
+    t3 = $[0];
+  }
+  let t4;
+  if ($[1] !== className) {
+    t4 = cn("min-h-0 w-full flex-1 overflow-hidden", className);
+    $[1] = className;
+    $[2] = t4;
+  } else {
+    t4 = $[2];
+  }
+  let t5;
+  if ($[3] !== count || $[4] !== divided || $[5] !== renderRow) {
+    let t6;
+    if ($[7] !== divided || $[8] !== renderRow) {
+      t6 = (_, index) => <Fragment key={index}>{divided && index > 0 ? <ListDivider /> : null}{renderRow(index)}</Fragment>;
+      $[7] = divided;
+      $[8] = renderRow;
+      $[9] = t6;
+    } else {
+      t6 = $[9];
+    }
+    t5 = Array.from({
+      length: count
+    }, t6);
+    $[3] = count;
+    $[4] = divided;
+    $[5] = renderRow;
+    $[6] = t5;
+  } else {
+    t5 = $[6];
+  }
+  let t6;
+  if ($[10] !== label || $[11] !== t4 || $[12] !== t5) {
+    t6 = <View accessible={true} accessibilityRole="progressbar" accessibilityLabel={label} accessibilityState={t3} className={t4}>{t5}</View>;
+    $[10] = label;
+    $[11] = t4;
+    $[12] = t5;
+    $[13] = t6;
+  } else {
+    t6 = $[13];
+  }
+  return t6;
+}

package/dist/Spinner.jsx

@@ -0,0 +1,195 @@
+import { c as _c } from "react/compiler-runtime";
+import { ActivityIndicator, Platform, View } from "react-native";
+import { cn } from "./cn";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+/** The system `"small"` spinner box on iOS, Android and React Native Web. */
+const SYSTEM_SMALL = 20;
+/** Web `size-4`. No platform has a 16 spinner, so `sm` is the small one scaled down in a 16 box. */
+const SM = 16;
+function systemSize(size) {
+  if (typeof size === "number") {
+    return Platform.OS === "android" ? size : size >= 30 ? "large" : "small";
+  }
+  return size === "lg" ? "large" : "small";
+}
+
+/**
+ * The platform `ActivityIndicator` with the web `Spinner` size and tone names.
+ * The web `mark`, `circle` and `ring` variants (animated SVG strokes) are not ported.
+ */
+export function Spinner(t0) {
+  const $ = _c(28);
+  let accessibilityLabel;
+  let color;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      size: t1,
+      tone: t2,
+      color,
+      decorative: t3,
+      accessibilityLabel,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = accessibilityLabel;
+    $[2] = color;
+    $[3] = props;
+    $[4] = style;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    accessibilityLabel = $[1];
+    color = $[2];
+    props = $[3];
+    style = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    t3 = $[7];
+  }
+  const size = t1 === undefined ? "md" : t1;
+  const tone = t2 === undefined ? "muted" : t2;
+  const decorative = t3 === undefined ? false : t3;
+  const scheme = useScheme();
+  const small = size === "sm";
+  let t4;
+  if ($[8] !== size) {
+    t4 = systemSize(size);
+    $[8] = size;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  const t5 = color ?? (tone === "muted" ? tokens.color.muted[scheme] : tokens.color.foreground[scheme]);
+  const t6 = decorative ? "no-hide-descendants" : "auto";
+  const t7 = decorative ? undefined : "progressbar";
+  const t8 = decorative ? undefined : accessibilityLabel ?? "Loading";
+  let t9;
+  if ($[10] !== small || $[11] !== style) {
+    t9 = small ? {
+      transform: [{
+        scale: SM / SYSTEM_SMALL
+      }]
+    } : style;
+    $[10] = small;
+    $[11] = style;
+    $[12] = t9;
+  } else {
+    t9 = $[12];
+  }
+  let t10;
+  if ($[13] !== decorative || $[14] !== props || $[15] !== t4 || $[16] !== t5 || $[17] !== t6 || $[18] !== t7 || $[19] !== t8 || $[20] !== t9) {
+    t10 = <ActivityIndicator size={t4} color={t5} accessibilityElementsHidden={decorative} importantForAccessibility={t6} accessibilityRole={t7} accessibilityLabel={t8} style={t9} {...props} />;
+    $[13] = decorative;
+    $[14] = props;
+    $[15] = t4;
+    $[16] = t5;
+    $[17] = t6;
+    $[18] = t7;
+    $[19] = t8;
+    $[20] = t9;
+    $[21] = t10;
+  } else {
+    t10 = $[21];
+  }
+  const indicator = t10;
+  if (!small) {
+    return indicator;
+  }
+  let t11;
+  if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+    t11 = {
+      width: SM,
+      height: SM,
+      alignItems: "center",
+      justifyContent: "center"
+    };
+    $[22] = t11;
+  } else {
+    t11 = $[22];
+  }
+  let t12;
+  if ($[23] !== style) {
+    t12 = [t11, style];
+    $[23] = style;
+    $[24] = t12;
+  } else {
+    t12 = $[24];
+  }
+  let t13;
+  if ($[25] !== indicator || $[26] !== t12) {
+    t13 = <View style={t12}>{indicator}</View>;
+    $[25] = indicator;
+    $[26] = t12;
+    $[27] = t13;
+  } else {
+    t13 = $[27];
+  }
+  return t13;
+}
+
+/** A `Spinner` centred in whatever box it is given. `label` names it for assistive tech. */
+export function CenteredSpinner(t0) {
+  const $ = _c(13);
+  let className;
+  let label;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      label,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = label;
+    $[3] = props;
+  } else {
+    className = $[1];
+    label = $[2];
+    props = $[3];
+  }
+  let t1;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = {
+      busy: true
+    };
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== className) {
+    t2 = cn("min-h-0 w-full flex-1 items-center justify-center p-6", className);
+    $[5] = className;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== label) {
+    t3 = <Spinner accessibilityLabel={label} />;
+    $[7] = label;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== props || $[10] !== t2 || $[11] !== t3) {
+    t4 = <View accessibilityState={t1} className={t2} {...props}>{t3}</View>;
+    $[9] = props;
+    $[10] = t2;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  return t4;
+}

package/dist/StackPageHeader.jsx

@@ -0,0 +1,160 @@
+import { c as _c } from "react/compiler-runtime";
+import { useState } from "react";
+import { Text, View } from "react-native";
+import { IconChevronLeft } from "@tabler/icons-react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { cn } from "./cn";
+import { PAGE_HEADER_HEIGHT, sizeStyle, textStyle } from "./controlStyles";
+import { HeaderIconButton } from "./HeaderIconButton";
+import { PageTitle } from "./PageTitle";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+/**
+ * A stack screen header with no fill, for a screen over `AmbientBackground`:
+ * a back chevron `HeaderIconButton` at the start, `headerRight` at the end and
+ * a centred `PageTitle` (Instrument Sans 600 at 20 / 25) with an optional
+ * muted description. The two sides are the same width, the wider of the back
+ * button and `headerRight`, so the title stays centred on the screen and a
+ * long one is cut off before it reaches them. `centre` (0.12.0) replaces the
+ * `PageTitle` with custom content; `title` then names the header for
+ * VoiceOver and TalkBack. The row is at least 56 high
+ * below the top inset, as `PageHeader`, with the `px-4` screen padding.
+ */
+export function StackPageHeader(t0) {
+  const $ = _c(38);
+  const {
+    title,
+    centre,
+    description,
+    onBack,
+    backLabel: t1,
+    headerRight,
+    backTestID,
+    safeTop: t2,
+    testID,
+    className
+  } = t0;
+  const backLabel = t1 === undefined ? "Back" : t1;
+  const safeTop = t2 === undefined ? true : t2;
+  const insets = useSafeAreaInsets();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const [rightWidth, setRightWidth] = useState(0);
+  const top = safeTop ? insets.top : 0;
+  const backWidth = onBack ? largerText ? 56 : 48 : 0;
+  const t3 = Math.max(backWidth, headerRight != null ? rightWidth : 0);
+  let t4;
+  if ($[0] !== t3) {
+    t4 = {
+      minWidth: t3
+    };
+    $[0] = t3;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  const side = t4;
+  const descriptionSize = largerText ? "text-base" : "text-sm";
+  let t5;
+  if ($[2] !== className) {
+    t5 = cn("flex-row items-center gap-2 px-4", className);
+    $[2] = className;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  const t6 = top + PAGE_HEADER_HEIGHT;
+  let t7;
+  if ($[4] !== t6 || $[5] !== top) {
+    t7 = {
+      paddingTop: top,
+      minHeight: t6
+    };
+    $[4] = t6;
+    $[5] = top;
+    $[6] = t7;
+  } else {
+    t7 = $[6];
+  }
+  let t8;
+  if ($[7] !== backLabel || $[8] !== backTestID || $[9] !== largerText || $[10] !== onBack || $[11] !== scheme) {
+    t8 = onBack ? <HeaderIconButton label={backLabel} testID={backTestID} onPress={onBack}><IconChevronLeft size={largerText ? 26 : 22} color={tokens.color.foreground[scheme]} /></HeaderIconButton> : null;
+    $[7] = backLabel;
+    $[8] = backTestID;
+    $[9] = largerText;
+    $[10] = onBack;
+    $[11] = scheme;
+    $[12] = t8;
+  } else {
+    t8 = $[12];
+  }
+  let t9;
+  if ($[13] !== side || $[14] !== t8) {
+    t9 = <View className="flex-1 flex-row items-center justify-start" style={side}>{t8}</View>;
+    $[13] = side;
+    $[14] = t8;
+    $[15] = t9;
+  } else {
+    t9 = $[15];
+  }
+  let t10;
+  if ($[16] !== centre || $[17] !== title) {
+    t10 = centre != null ? <View accessible={true} accessibilityRole="header" accessibilityLabel={title} className="min-w-0 max-w-full shrink flex-row items-center justify-center">{centre}</View> : <PageTitle className="text-center">{title}</PageTitle>;
+    $[16] = centre;
+    $[17] = title;
+    $[18] = t10;
+  } else {
+    t10 = $[18];
+  }
+  let t11;
+  if ($[19] !== description || $[20] !== descriptionSize || $[21] !== scheme) {
+    t11 = description ? <Text numberOfLines={2} className={cn("text-center font-instrument-sans", descriptionSize)} style={[textStyle("muted", scheme), sizeStyle(descriptionSize)]}>{description}</Text> : null;
+    $[19] = description;
+    $[20] = descriptionSize;
+    $[21] = scheme;
+    $[22] = t11;
+  } else {
+    t11 = $[22];
+  }
+  let t12;
+  if ($[23] !== t10 || $[24] !== t11) {
+    t12 = <View className="min-w-0 shrink items-center py-2">{t10}{t11}</View>;
+    $[23] = t10;
+    $[24] = t11;
+    $[25] = t12;
+  } else {
+    t12 = $[25];
+  }
+  let t13;
+  if ($[26] !== headerRight) {
+    t13 = headerRight != null ? <View className="flex-row items-center gap-2" onLayout={event => setRightWidth(event.nativeEvent.layout.width)}>{headerRight}</View> : null;
+    $[26] = headerRight;
+    $[27] = t13;
+  } else {
+    t13 = $[27];
+  }
+  let t14;
+  if ($[28] !== side || $[29] !== t13) {
+    t14 = <View className="flex-1 flex-row items-center justify-end" style={side}>{t13}</View>;
+    $[28] = side;
+    $[29] = t13;
+    $[30] = t14;
+  } else {
+    t14 = $[30];
+  }
+  let t15;
+  if ($[31] !== t12 || $[32] !== t14 || $[33] !== t5 || $[34] !== t7 || $[35] !== t9 || $[36] !== testID) {
+    t15 = <View testID={testID} className={t5} style={t7}>{t9}{t12}{t14}</View>;
+    $[31] = t12;
+    $[32] = t14;
+    $[33] = t5;
+    $[34] = t7;
+    $[35] = t9;
+    $[36] = testID;
+    $[37] = t15;
+  } else {
+    t15 = $[37];
+  }
+  return t15;
+}