@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/PillTabs.jsx

@@ -0,0 +1,300 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable } from "react-native";
+import Animated, { scrollTo, useAnimatedReaction, useAnimatedRef, useSharedValue } from "react-native-reanimated";
+import { cn } from "./cn";
+import { selectionHaptic } from "./haptics";
+import { MIN_TOUCH_TARGET, tabColors, tabTriggerSize, touchSlop, typeStyle } from "./controlStyles";
+import { centredTabScroll } from "./pagerSwipe";
+import { useTabIndicator, useTabLabelStyle } from "./tabIndicator";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+
+/**
+ * A row of pill tabs from an options array, the web pills look tuned for a
+ * phone: 36 high pills (`px-3.5`, a `text-sm` medium label) with 4 slop above
+ * and below, so each is a 44 target. The row is one line that scrolls
+ * sideways when the pills do not fit (larger system text), and never wraps.
+ * The active pill scrolls into view, centred, each time it changes.
+ *
+ * With `progress` (a `Pager`'s), the selected fill is one indicator that
+ * slides with that value, and each label blends to the selected colour with
+ * it, so fill, label and the centred scroll follow the pages under a swipe;
+ * a press still changes `value` at once.
+ */
+export function PillTabs(t0) {
+  const $ = _c(35);
+  const {
+    options,
+    value,
+    onChange,
+    progress
+  } = t0;
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  let t1;
+  let trigger;
+  if ($[0] !== largerText) {
+    trigger = tabTriggerSize("pills", "default", largerText);
+    t1 = touchSlop(MIN_TOUCH_TARGET, trigger.minHeight);
+    $[0] = largerText;
+    $[1] = t1;
+    $[2] = trigger;
+  } else {
+    t1 = $[1];
+    trigger = $[2];
+  }
+  const slop = t1;
+  const indicator = useTabIndicator(progress, options.length);
+  const {
+    boxes
+  } = indicator;
+  const selectedIndex = Math.max(0, options.findIndex(tab => tab.id === value));
+  const scroll = useAnimatedRef();
+  const viewport = useSharedValue(0);
+  useAnimatedReaction(() => progress ? progress.get() : selectedIndex, at => {
+    if (boxes.length === 0 || viewport.get() <= 0) {
+      return;
+    }
+    scrollTo(scroll, centredTabScroll(boxes, at, viewport.get()), 0, false);
+  });
+  let t2;
+  if ($[3] !== viewport) {
+    t2 = event => viewport.set(event.nativeEvent.layout.width);
+    $[3] = viewport;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const t3 = -slop.top;
+  let t4;
+  if ($[5] !== t3) {
+    t4 = {
+      flexGrow: 0,
+      marginVertical: t3
+    };
+    $[5] = t3;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== slop.top) {
+    t5 = {
+      flexDirection: "row",
+      gap: 6,
+      paddingVertical: slop.top
+    };
+    $[7] = slop.top;
+    $[8] = t5;
+  } else {
+    t5 = $[8];
+  }
+  let t6;
+  if ($[9] !== indicator.measured || $[10] !== indicator.style || $[11] !== scheme) {
+    t6 = indicator.measured ? <Animated.View pointerEvents="none" style={[{
+      position: "absolute",
+      left: 0,
+      borderRadius: 9999
+    }, {
+      backgroundColor: tabColors("pills", true, scheme).backgroundColor
+    }, indicator.style]} /> : null;
+    $[9] = indicator.measured;
+    $[10] = indicator.style;
+    $[11] = scheme;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== indicator || $[14] !== onChange || $[15] !== options || $[16] !== progress || $[17] !== slop || $[18] !== trigger || $[19] !== value) {
+    let t8;
+    if ($[21] !== indicator || $[22] !== onChange || $[23] !== progress || $[24] !== slop || $[25] !== trigger || $[26] !== value) {
+      t8 = (tab_0, index) => <PillTab key={tab_0.id} label={tab_0.label} testID={tab_0.testID} index={index} selected={value === tab_0.id} filled={!indicator.measured} progress={progress} trigger={trigger} hitSlop={slop} onLayout={indicator.onLayout(index)} onPress={() => onChange(tab_0.id)} />;
+      $[21] = indicator;
+      $[22] = onChange;
+      $[23] = progress;
+      $[24] = slop;
+      $[25] = trigger;
+      $[26] = value;
+      $[27] = t8;
+    } else {
+      t8 = $[27];
+    }
+    t7 = options.map(t8);
+    $[13] = indicator;
+    $[14] = onChange;
+    $[15] = options;
+    $[16] = progress;
+    $[17] = slop;
+    $[18] = trigger;
+    $[19] = value;
+    $[20] = t7;
+  } else {
+    t7 = $[20];
+  }
+  let t8;
+  if ($[28] !== scroll || $[29] !== t2 || $[30] !== t4 || $[31] !== t5 || $[32] !== t6 || $[33] !== t7) {
+    t8 = <Animated.ScrollView ref={scroll} horizontal={true} accessibilityRole="tablist" showsHorizontalScrollIndicator={false} fadingEdgeLength={16} onLayout={t2} style={t4} contentContainerStyle={t5}>{t6}{t7}</Animated.ScrollView>;
+    $[28] = scroll;
+    $[29] = t2;
+    $[30] = t4;
+    $[31] = t5;
+    $[32] = t6;
+    $[33] = t7;
+    $[34] = t8;
+  } else {
+    t8 = $[34];
+  }
+  return t8;
+}
+function PillTab(t0) {
+  const $ = _c(39);
+  const {
+    label,
+    testID,
+    index,
+    selected,
+    filled,
+    progress,
+    trigger,
+    hitSlop,
+    onLayout,
+    onPress
+  } = t0;
+  const scheme = useScheme();
+  let t1;
+  if ($[0] !== scheme || $[1] !== selected) {
+    t1 = tabColors("pills", selected, scheme);
+    $[0] = scheme;
+    $[1] = selected;
+    $[2] = t1;
+  } else {
+    t1 = $[2];
+  }
+  const colors = t1;
+  let t2;
+  if ($[3] !== scheme) {
+    t2 = tabColors("pills", true, scheme);
+    $[3] = scheme;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const t3 = t2.color;
+  let t4;
+  if ($[5] !== scheme) {
+    t4 = tabColors("pills", false, scheme);
+    $[5] = scheme;
+    $[6] = t4;
+  } else {
+    t4 = $[6];
+  }
+  let t5;
+  if ($[7] !== t2.color || $[8] !== t4.color) {
+    t5 = {
+      selected: t3,
+      muted: t4.color
+    };
+    $[7] = t2.color;
+    $[8] = t4.color;
+    $[9] = t5;
+  } else {
+    t5 = $[9];
+  }
+  const labelStyle = useTabLabelStyle(progress, index, t5, colors.color);
+  let t6;
+  if ($[10] !== onPress || $[11] !== selected) {
+    t6 = () => {
+      if (!selected) {
+        selectionHaptic();
+      }
+      onPress();
+    };
+    $[10] = onPress;
+    $[11] = selected;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== selected) {
+    t7 = {
+      selected
+    };
+    $[13] = selected;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== trigger.className) {
+    t8 = cn("justify-center rounded-full border border-white/40 active:opacity-70 dark:border-white/10", trigger.className);
+    $[15] = trigger.className;
+    $[16] = t8;
+  } else {
+    t8 = $[16];
+  }
+  const t9 = filled ? colors.backgroundColor : "transparent";
+  let t10;
+  if ($[17] !== t9 || $[18] !== trigger.minHeight) {
+    t10 = {
+      backgroundColor: t9,
+      minHeight: trigger.minHeight
+    };
+    $[17] = t9;
+    $[18] = trigger.minHeight;
+    $[19] = t10;
+  } else {
+    t10 = $[19];
+  }
+  let t11;
+  if ($[20] !== trigger.textClassName) {
+    t11 = cn("text-center font-instrument-sans-medium", trigger.textClassName);
+    $[20] = trigger.textClassName;
+    $[21] = t11;
+  } else {
+    t11 = $[21];
+  }
+  let t12;
+  if ($[22] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = typeStyle("medium");
+    $[22] = t12;
+  } else {
+    t12 = $[22];
+  }
+  let t13;
+  if ($[23] !== labelStyle) {
+    t13 = [t12, labelStyle];
+    $[23] = labelStyle;
+    $[24] = t13;
+  } else {
+    t13 = $[24];
+  }
+  let t14;
+  if ($[25] !== label || $[26] !== t11 || $[27] !== t13) {
+    t14 = <Animated.Text numberOfLines={1} className={t11} style={t13}>{label}</Animated.Text>;
+    $[25] = label;
+    $[26] = t11;
+    $[27] = t13;
+    $[28] = t14;
+  } else {
+    t14 = $[28];
+  }
+  let t15;
+  if ($[29] !== hitSlop || $[30] !== label || $[31] !== onLayout || $[32] !== t10 || $[33] !== t14 || $[34] !== t6 || $[35] !== t7 || $[36] !== t8 || $[37] !== testID) {
+    t15 = <Pressable testID={testID} accessibilityLabel={label} onLayout={onLayout} onPress={t6} accessibilityRole="tab" accessibilityState={t7} hitSlop={hitSlop} className={t8} style={t10}>{t14}</Pressable>;
+    $[29] = hitSlop;
+    $[30] = label;
+    $[31] = onLayout;
+    $[32] = t10;
+    $[33] = t14;
+    $[34] = t6;
+    $[35] = t7;
+    $[36] = t8;
+    $[37] = testID;
+    $[38] = t15;
+  } else {
+    t15 = $[38];
+  }
+  return t15;
+}

package/dist/PinnedBotTile.jsx

@@ -0,0 +1,212 @@
+import { c as _c } from "react/compiler-runtime";
+import { Children } from "react";
+import { Pressable, Text, View } from "react-native";
+import { cn } from "./cn";
+import { cardStyle, textStyle, typeStyle } from "./controlStyles";
+import { StatusDot } from "./StatusDot";
+import { Spinner } from "./Spinner";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+/**
+ * A large pinned-bot tile: the avatar above the name on a `Card` fill, an
+ * unread dot or a generating spinner at the top end. At least 112 high, so it
+ * is a comfortable touch target in a `BotPinGrid`. The tile is one button named
+ * by the title, plus "unread" or "generating".
+ */
+export function PinnedBotTile(t0) {
+  const $ = _c(35);
+  const {
+    title,
+    leading,
+    unread: t1,
+    generating: t2,
+    onPress,
+    onLongPress,
+    testID
+  } = t0;
+  const unread = t1 === undefined ? false : t1;
+  const generating = t2 === undefined ? false : t2;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const t3 = unread ? "unread" : null;
+  const t4 = generating ? "generating" : null;
+  let t5;
+  if ($[0] !== t3 || $[1] !== t4) {
+    t5 = [t3, t4].filter(Boolean);
+    $[0] = t3;
+    $[1] = t4;
+    $[2] = t5;
+  } else {
+    t5 = $[2];
+  }
+  const state = t5.join(", ");
+  const t6 = state ? `${title}, ${state}` : title;
+  const t7 = largerText ? "min-h-36" : "min-h-28";
+  let t8;
+  if ($[3] !== t7) {
+    t8 = cn("min-w-0 items-center justify-center gap-2 px-3 py-4 active:opacity-70", t7);
+    $[3] = t7;
+    $[4] = t8;
+  } else {
+    t8 = $[4];
+  }
+  let t9;
+  if ($[5] !== scheme) {
+    t9 = cardStyle(scheme);
+    $[5] = scheme;
+    $[6] = t9;
+  } else {
+    t9 = $[6];
+  }
+  const t10 = largerText ? "text-lg" : "text-base";
+  let t11;
+  if ($[7] !== t10) {
+    t11 = cn("text-center font-instrument-sans-semibold", t10);
+    $[7] = t10;
+    $[8] = t11;
+  } else {
+    t11 = $[8];
+  }
+  let t12;
+  if ($[9] !== scheme) {
+    t12 = textStyle("foreground", scheme);
+    $[9] = scheme;
+    $[10] = t12;
+  } else {
+    t12 = $[10];
+  }
+  let t13;
+  if ($[11] === Symbol.for("react.memo_cache_sentinel")) {
+    t13 = typeStyle("semibold");
+    $[11] = t13;
+  } else {
+    t13 = $[11];
+  }
+  let t14;
+  if ($[12] !== t12) {
+    t14 = [t12, t13];
+    $[12] = t12;
+    $[13] = t14;
+  } else {
+    t14 = $[13];
+  }
+  let t15;
+  if ($[14] !== t11 || $[15] !== t14 || $[16] !== title) {
+    t15 = <Text numberOfLines={2} className={t11} style={t14}>{title}</Text>;
+    $[14] = t11;
+    $[15] = t14;
+    $[16] = title;
+    $[17] = t15;
+  } else {
+    t15 = $[17];
+  }
+  let t16;
+  if ($[18] !== testID || $[19] !== unread) {
+    t16 = unread ? <View className="absolute left-3 top-3" testID={testID ? `${testID}-unread` : undefined}><StatusDot tone="active" size="md" /></View> : null;
+    $[18] = testID;
+    $[19] = unread;
+    $[20] = t16;
+  } else {
+    t16 = $[20];
+  }
+  let t17;
+  if ($[21] !== generating || $[22] !== testID) {
+    t17 = generating ? <View className="absolute right-3 top-3" testID={testID ? `${testID}-generating` : undefined}><Spinner size="sm" decorative={true} /></View> : null;
+    $[21] = generating;
+    $[22] = testID;
+    $[23] = t17;
+  } else {
+    t17 = $[23];
+  }
+  let t18;
+  if ($[24] !== leading || $[25] !== onLongPress || $[26] !== onPress || $[27] !== t15 || $[28] !== t16 || $[29] !== t17 || $[30] !== t6 || $[31] !== t8 || $[32] !== t9 || $[33] !== testID) {
+    t18 = <Pressable testID={testID} accessibilityRole="button" accessibilityLabel={t6} onPress={onPress} onLongPress={onLongPress} className={t8} style={t9}>{leading}{t15}{t16}{t17}</Pressable>;
+    $[24] = leading;
+    $[25] = onLongPress;
+    $[26] = onPress;
+    $[27] = t15;
+    $[28] = t16;
+    $[29] = t17;
+    $[30] = t6;
+    $[31] = t8;
+    $[32] = t9;
+    $[33] = testID;
+    $[34] = t18;
+  } else {
+    t18 = $[34];
+  }
+  return t18;
+}
+/**
+ * Lays `PinnedBotTile`s out two across, wrapping to new rows, with a 12 gap. A
+ * lone last tile keeps half the width. Each child gets a half-width cell.
+ */
+export function BotPinGrid(t0) {
+  const $ = _c(18);
+  let children;
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      children,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+  }
+  let T0;
+  let t1;
+  let t2;
+  let t3;
+  if ($[4] !== children || $[5] !== className || $[6] !== props) {
+    const cells = Children.toArray(children);
+    T0 = View;
+    if ($[11] !== className) {
+      t1 = cn("flex-row flex-wrap gap-3", className);
+      $[11] = className;
+      $[12] = t1;
+    } else {
+      t1 = $[12];
+    }
+    t2 = props;
+    t3 = cells.map(_temp);
+    $[4] = children;
+    $[5] = className;
+    $[6] = props;
+    $[7] = T0;
+    $[8] = t1;
+    $[9] = t2;
+    $[10] = t3;
+  } else {
+    T0 = $[7];
+    t1 = $[8];
+    t2 = $[9];
+    t3 = $[10];
+  }
+  let t4;
+  if ($[13] !== T0 || $[14] !== t1 || $[15] !== t2 || $[16] !== t3) {
+    t4 = <T0 className={t1} {...t2}>{t3}</T0>;
+    $[13] = T0;
+    $[14] = t1;
+    $[15] = t2;
+    $[16] = t3;
+    $[17] = t4;
+  } else {
+    t4 = $[17];
+  }
+  return t4;
+}
+function _temp(child, index) {
+  return <View key={child.key ?? index} className="min-w-0" style={{
+    flexBasis: "47%",
+    flexGrow: 1,
+    maxWidth: "50%"
+  }}>{child}</View>;
+}

package/dist/Progress.jsx

@@ -0,0 +1,147 @@
+import { c as _c } from "react/compiler-runtime";
+import { useEffect } from "react";
+import { View } from "react-native";
+import Animated, { Easing, useAnimatedStyle, useSharedValue, withTiming } from "react-native-reanimated";
+import { cn } from "./cn";
+import { palette } from "./palette";
+import { useAccentColor } from "./theme";
+import { useReduceMotion } from "./useReduceMotion";
+import { useScheme } from "./useScheme";
+/** Determinate bar: 10 high, rounded, `palette.default` track. The fill eases over 300 ms (instant with Reduce Motion). */
+export function Progress(t0) {
+  const $ = _c(33);
+  let className;
+  let indicatorColor;
+  let props;
+  let style;
+  let t1;
+  let value;
+  if ($[0] !== t0) {
+    ({
+      value,
+      max: t1,
+      indicatorColor,
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = indicatorColor;
+    $[3] = props;
+    $[4] = style;
+    $[5] = t1;
+    $[6] = value;
+  } else {
+    className = $[1];
+    indicatorColor = $[2];
+    props = $[3];
+    style = $[4];
+    t1 = $[5];
+    value = $[6];
+  }
+  const max = t1 === undefined ? 100 : t1;
+  const scheme = useScheme();
+  const accent = useAccentColor();
+  const reduceMotion = useReduceMotion();
+  const percent = Math.min(100, Math.max(0, (value ?? 0) / max * 100));
+  const width = useSharedValue(percent);
+  let t2;
+  let t3;
+  if ($[7] !== percent || $[8] !== reduceMotion || $[9] !== width) {
+    t2 = () => {
+      width.set(reduceMotion ? percent : withTiming(percent, {
+        duration: 300,
+        easing: Easing.bezier(0.22, 1, 0.36, 1)
+      }));
+    };
+    t3 = [percent, reduceMotion, width];
+    $[7] = percent;
+    $[8] = reduceMotion;
+    $[9] = width;
+    $[10] = t2;
+    $[11] = t3;
+  } else {
+    t2 = $[10];
+    t3 = $[11];
+  }
+  useEffect(t2, t3);
+  const indicatorStyle = useAnimatedStyle(() => ({
+    width: `${width.get()}%`
+  }));
+  const t4 = value ?? 0;
+  let t5;
+  if ($[12] !== max || $[13] !== t4) {
+    t5 = {
+      min: 0,
+      max,
+      now: t4
+    };
+    $[12] = max;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  let t6;
+  if ($[15] !== className) {
+    t6 = cn("h-2.5 w-full overflow-hidden rounded-full", className);
+    $[15] = className;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  const t7 = palette.default[scheme];
+  let t8;
+  if ($[17] !== t7) {
+    t8 = {
+      backgroundColor: t7
+    };
+    $[17] = t7;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== style || $[20] !== t8) {
+    t9 = [t8, style];
+    $[19] = style;
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    t9 = $[21];
+  }
+  const t10 = indicatorColor ?? accent;
+  let t11;
+  if ($[22] !== t10) {
+    t11 = {
+      backgroundColor: t10
+    };
+    $[22] = t10;
+    $[23] = t11;
+  } else {
+    t11 = $[23];
+  }
+  let t12;
+  if ($[24] !== indicatorStyle || $[25] !== t11) {
+    t12 = <Animated.View className="h-full rounded-full" style={[t11, indicatorStyle]} />;
+    $[24] = indicatorStyle;
+    $[25] = t11;
+    $[26] = t12;
+  } else {
+    t12 = $[26];
+  }
+  let t13;
+  if ($[27] !== props || $[28] !== t12 || $[29] !== t5 || $[30] !== t6 || $[31] !== t9) {
+    t13 = <View accessibilityRole="progressbar" accessibilityValue={t5} className={t6} style={t9} {...props}>{t12}</View>;
+    $[27] = props;
+    $[28] = t12;
+    $[29] = t5;
+    $[30] = t6;
+    $[31] = t9;
+    $[32] = t13;
+  } else {
+    t13 = $[32];
+  }
+  return t13;
+}

package/dist/SafeAreaContainer.jsx

@@ -0,0 +1,38 @@
+import { c as _c } from "react/compiler-runtime";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+export const SafeAreaContainer = t0 => {
+  const $ = _c(8);
+  const {
+    children
+  } = t0;
+  const insets = useSafeAreaInsets();
+  let t1;
+  if ($[0] !== insets.bottom || $[1] !== insets.left || $[2] !== insets.right || $[3] !== insets.top) {
+    t1 = {
+      flex: 1,
+      justifyContent: "space-between",
+      paddingTop: insets.top,
+      paddingBottom: insets.bottom,
+      paddingLeft: insets.left,
+      paddingRight: insets.right
+    };
+    $[0] = insets.bottom;
+    $[1] = insets.left;
+    $[2] = insets.right;
+    $[3] = insets.top;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== children || $[6] !== t1) {
+    t2 = <View className="bg-transparent" style={t1}>{children}</View>;
+    $[5] = children;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+};