@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/response-text.jsx

@@ -0,0 +1,130 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+import { Text } from "react-native";
+import { cn } from "../cn";
+import { sizeStyle, textStyle } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+
+// Markdown stub. The web renders replies with Streamdown; native-ui has no
+// markdown peer, so `ResponseText` draws the text as it is, newlines kept.
+// An app that wants markdown can render one of these in its place:
+// `react-native-markdown-display`, `@ronradtke/react-native-markdown-display`
+// (a maintained fork) or `react-native-marked`.
+
+/**
+ * The text colour `MessageContent` hands down: React Native text does not
+ * inherit a colour from its parent view, as web text does from `color`.
+ */
+export const ChatTextColorContext = createContext(undefined);
+/** Plain reply text, selectable, newlines kept. The markdown placeholder. */
+export function ResponseText(t0) {
+  const $ = _c(35);
+  let children;
+  let className;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  let tone;
+  if ($[0] !== t0) {
+    ({
+      children,
+      tone,
+      size: t1,
+      selectable: t2,
+      className,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = style;
+    $[5] = t1;
+    $[6] = t2;
+    $[7] = tone;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    style = $[4];
+    t1 = $[5];
+    t2 = $[6];
+    tone = $[7];
+  }
+  const size = t1 === undefined ? "body" : t1;
+  const selectable = t2 === undefined ? true : t2;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const inherited = useContext(ChatTextColorContext);
+  let T0;
+  let color;
+  let t3;
+  let t4;
+  let t5;
+  if ($[8] !== className || $[9] !== inherited || $[10] !== largerText || $[11] !== scheme || $[12] !== selectable || $[13] !== size || $[14] !== tone) {
+    const textSize = chatTextSize(size, largerText);
+    let t6;
+    if ($[20] !== inherited || $[21] !== scheme || $[22] !== tone) {
+      t6 = tone || !inherited ? textStyle(tone ?? "foreground", scheme) : {
+        color: inherited
+      };
+      $[20] = inherited;
+      $[21] = scheme;
+      $[22] = tone;
+      $[23] = t6;
+    } else {
+      t6 = $[23];
+    }
+    color = t6;
+    T0 = Text;
+    t4 = selectable;
+    t5 = cn(textSize, "font-instrument-sans", className);
+    t3 = sizeStyle(textSize);
+    $[8] = className;
+    $[9] = inherited;
+    $[10] = largerText;
+    $[11] = scheme;
+    $[12] = selectable;
+    $[13] = size;
+    $[14] = tone;
+    $[15] = T0;
+    $[16] = color;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t5;
+  } else {
+    T0 = $[15];
+    color = $[16];
+    t3 = $[17];
+    t4 = $[18];
+    t5 = $[19];
+  }
+  let t6;
+  if ($[24] !== color || $[25] !== style || $[26] !== t3) {
+    t6 = [t3, color, style];
+    $[24] = color;
+    $[25] = style;
+    $[26] = t3;
+    $[27] = t6;
+  } else {
+    t6 = $[27];
+  }
+  let t7;
+  if ($[28] !== T0 || $[29] !== children || $[30] !== props || $[31] !== t4 || $[32] !== t5 || $[33] !== t6) {
+    t7 = <T0 selectable={t4} className={t5} style={t6} {...props}>{children}</T0>;
+    $[28] = T0;
+    $[29] = children;
+    $[30] = props;
+    $[31] = t4;
+    $[32] = t5;
+    $[33] = t6;
+    $[34] = t7;
+  } else {
+    t7 = $[34];
+  }
+  return t7;
+}

package/dist/ai/shimmer.jsx

@@ -0,0 +1,149 @@
+import { c as _c } from "react/compiler-runtime";
+import { useEffect } from "react";
+import { Text } from "react-native";
+import Animated, { cancelAnimation, useAnimatedStyle, useSharedValue, withRepeat, withTiming } from "react-native-reanimated";
+import { cn } from "../cn";
+import { sizeStyle, textStyle } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { useReduceMotion } from "../useReduceMotion";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+
+/**
+ * Lowest opacity of the pulse. The foreground at 0.45 on the page is close to
+ * the muted colour, the far end of the web sweep.
+ */
+export const SHIMMER_LOW_OPACITY = 0.45;
+/**
+ * "Live" text, such as "Thinking…". The web sweeps a foreground band across
+ * muted text (`bg-clip-text`), which React Native cannot clip to the glyphs
+ * without a masked view. Here the foreground text fades to
+ * `SHIMMER_LOW_OPACITY` and back once per `duration`, on the UI thread with
+ * Reanimated. With Reduce Motion it holds still in the muted colour.
+ */
+export function Shimmer(t0) {
+  const $ = _c(35);
+  const {
+    children,
+    duration: t1,
+    size: t2,
+    numberOfLines,
+    className,
+    style
+  } = t0;
+  const duration = t1 === undefined ? 2 : t1;
+  const size = t2 === undefined ? "small" : t2;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const reduceMotion = useReduceMotion();
+  const opacity = useSharedValue(1);
+  let t3;
+  let t4;
+  if ($[0] !== duration || $[1] !== opacity || $[2] !== reduceMotion) {
+    t3 = () => {
+      if (reduceMotion) {
+        cancelAnimation(opacity);
+        opacity.set(1);
+        return;
+      }
+      opacity.set(withRepeat(withTiming(SHIMMER_LOW_OPACITY, {
+        duration: duration * 1000 / 2
+      }), -1, true));
+      return () => cancelAnimation(opacity);
+    };
+    t4 = [opacity, reduceMotion, duration];
+    $[0] = duration;
+    $[1] = opacity;
+    $[2] = reduceMotion;
+    $[3] = t3;
+    $[4] = t4;
+  } else {
+    t3 = $[3];
+    t4 = $[4];
+  }
+  useEffect(t3, t4);
+  const animatedStyle = useAnimatedStyle(() => ({
+    opacity: opacity.get()
+  }));
+  let T0;
+  let T1;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[5] !== animatedStyle || $[6] !== className || $[7] !== largerText || $[8] !== numberOfLines || $[9] !== size) {
+    const textSize = chatTextSize(size, largerText);
+    T1 = Animated.View;
+    t8 = "min-w-0 shrink";
+    t9 = animatedStyle;
+    T0 = Text;
+    t6 = numberOfLines;
+    t7 = cn(textSize, "font-instrument-sans", className);
+    t5 = sizeStyle(textSize);
+    $[5] = animatedStyle;
+    $[6] = className;
+    $[7] = largerText;
+    $[8] = numberOfLines;
+    $[9] = size;
+    $[10] = T0;
+    $[11] = T1;
+    $[12] = t5;
+    $[13] = t6;
+    $[14] = t7;
+    $[15] = t8;
+    $[16] = t9;
+  } else {
+    T0 = $[10];
+    T1 = $[11];
+    t5 = $[12];
+    t6 = $[13];
+    t7 = $[14];
+    t8 = $[15];
+    t9 = $[16];
+  }
+  const t10 = reduceMotion ? "muted" : "foreground";
+  let t11;
+  if ($[17] !== scheme || $[18] !== t10) {
+    t11 = textStyle(t10, scheme);
+    $[17] = scheme;
+    $[18] = t10;
+    $[19] = t11;
+  } else {
+    t11 = $[19];
+  }
+  let t12;
+  if ($[20] !== style || $[21] !== t11 || $[22] !== t5) {
+    t12 = [t5, t11, style];
+    $[20] = style;
+    $[21] = t11;
+    $[22] = t5;
+    $[23] = t12;
+  } else {
+    t12 = $[23];
+  }
+  let t13;
+  if ($[24] !== T0 || $[25] !== children || $[26] !== t12 || $[27] !== t6 || $[28] !== t7) {
+    t13 = <T0 numberOfLines={t6} className={t7} style={t12}>{children}</T0>;
+    $[24] = T0;
+    $[25] = children;
+    $[26] = t12;
+    $[27] = t6;
+    $[28] = t7;
+    $[29] = t13;
+  } else {
+    t13 = $[29];
+  }
+  let t14;
+  if ($[30] !== T1 || $[31] !== t13 || $[32] !== t8 || $[33] !== t9) {
+    t14 = <T1 className={t8} style={t9}>{t13}</T1>;
+    $[30] = T1;
+    $[31] = t13;
+    $[32] = t8;
+    $[33] = t9;
+    $[34] = t14;
+  } else {
+    t14 = $[34];
+  }
+  return t14;
+}

package/dist/ai/sources.jsx

@@ -0,0 +1,260 @@
+import { c as _c } from "react/compiler-runtime";
+import { Linking, Pressable } from "react-native";
+import { IconBook } from "@tabler/icons-react-native";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, touchSlop } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { Collapsible, CollapsibleChevron, CollapsibleContent, CollapsibleTrigger, useCollapsible } from "./collapsible";
+import { ResponseText } from "./response-text";
+
+/** The sources a reply used, folded (default closed). */
+export function Sources(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("w-full", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = <Collapsible className={t1} {...props} />;
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+
+/** "Used 1 source", "Used 3 sources". */
+export function sourcesLabel(count) {
+  return `Used ${count} ${count === 1 ? "source" : "sources"}`;
+}
+/** Book icon, "Used 3 sources" and a chevron, muted (web `text-xs`, here `text-sm`). */
+export function SourcesTrigger(t0) {
+  const $ = _c(24);
+  let className;
+  let count;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      count,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = count;
+    $[3] = props;
+  } else {
+    className = $[1];
+    count = $[2];
+    props = $[3];
+  }
+  const {
+    open
+  } = useCollapsible();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const muted = tokens.color.muted[scheme];
+  const iconSize = largerText ? 18 : 14;
+  let t1;
+  if ($[4] !== count) {
+    t1 = sourcesLabel(count);
+    $[4] = count;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const label = t1;
+  let t2;
+  if ($[6] !== className) {
+    t2 = cn("flex-row items-center gap-1.5 self-start", className);
+    $[6] = className;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] !== iconSize || $[9] !== muted) {
+    t3 = <IconBook size={iconSize} color={muted} strokeWidth={1.5} />;
+    $[8] = iconSize;
+    $[9] = muted;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== label) {
+    t4 = <ResponseText size="small" tone="muted" selectable={false}>{label}</ResponseText>;
+    $[11] = label;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== iconSize || $[14] !== muted || $[15] !== open) {
+    t5 = <CollapsibleChevron open={open} size={iconSize} color={muted} />;
+    $[13] = iconSize;
+    $[14] = muted;
+    $[15] = open;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  let t6;
+  if ($[17] !== label || $[18] !== props || $[19] !== t2 || $[20] !== t3 || $[21] !== t4 || $[22] !== t5) {
+    t6 = <CollapsibleTrigger accessibilityLabel={label} className={t2} {...props}>{t3}{t4}{t5}</CollapsibleTrigger>;
+    $[17] = label;
+    $[18] = props;
+    $[19] = t2;
+    $[20] = t3;
+    $[21] = t4;
+    $[22] = t5;
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  return t6;
+}
+
+/** The list of `Source` rows, shown while open (web `mt-2 space-y-2`). */
+export function SourcesContent(t0) {
+  const $ = _c(8);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== className) {
+    t1 = cn("mt-2 gap-2", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = <CollapsibleContent className={t1} {...props} />;
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+/** A `text-sm` line with the web `py-2`: 36 high. The slop brings it to 44. */
+const ROW_HEIGHT = 36;
+
+/**
+ * One source as a link row: title (or address) on one line and a book icon.
+ * Pressed, it takes the web hover fill (`bg-surface-secondary`).
+ */
+export function Source(t0) {
+  const $ = _c(18);
+  const {
+    href,
+    title,
+    onPress,
+    testID
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const label = title ?? href;
+  let t1;
+  if ($[0] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = touchSlop(MIN_TOUCH_TARGET, ROW_HEIGHT);
+    $[0] = t1;
+  } else {
+    t1 = $[0];
+  }
+  let t2;
+  if ($[1] !== href || $[2] !== onPress) {
+    t2 = () => onPress ? onPress(href) : void Linking.openURL(href);
+    $[1] = href;
+    $[2] = onPress;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  let t3;
+  if ($[4] !== scheme) {
+    t3 = t4 => {
+      const {
+        pressed
+      } = t4;
+      return {
+        borderRadius: tokens.radius.md,
+        backgroundColor: pressed ? tokens.color.surfaceSecondary[scheme] : "transparent"
+      };
+    };
+    $[4] = scheme;
+    $[5] = t3;
+  } else {
+    t3 = $[5];
+  }
+  let t4;
+  if ($[6] !== label) {
+    t4 = <ResponseText size="small" tone="muted" selectable={false} numberOfLines={1} className="shrink">{label}</ResponseText>;
+    $[6] = label;
+    $[7] = t4;
+  } else {
+    t4 = $[7];
+  }
+  const t5 = largerText ? 18 : 14;
+  const t6 = tokens.color.muted[scheme];
+  let t7;
+  if ($[8] !== t5 || $[9] !== t6) {
+    t7 = <IconBook size={t5} color={t6} strokeWidth={1.5} />;
+    $[8] = t5;
+    $[9] = t6;
+    $[10] = t7;
+  } else {
+    t7 = $[10];
+  }
+  let t8;
+  if ($[11] !== label || $[12] !== t2 || $[13] !== t3 || $[14] !== t4 || $[15] !== t7 || $[16] !== testID) {
+    t8 = <Pressable testID={testID} accessibilityRole="link" accessibilityLabel={label} hitSlop={t1} onPress={t2} className="flex-row items-center justify-between gap-2 px-3 py-2" style={t3}>{t4}{t7}</Pressable>;
+    $[11] = label;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t7;
+    $[16] = testID;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  return t8;
+}