@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/card-button.jsx

@@ -0,0 +1,188 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, Text } from "react-native";
+import { cn } from "../cn";
+import { buttonColors, MIN_TOUCH_TARGET, sizeStyle, touchSlop, typeStyle } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+/**
+ * The compact pill button of the tool and subagent cards: at least 44 points
+ * high, label in the `small` chat size (steps up with larger text). Internal.
+ */
+export function CardButton(t0) {
+  const $ = _c(56);
+  const {
+    label,
+    variant,
+    onPress,
+    disabled,
+    accessibilityLabel,
+    testID
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let T0;
+  let T1;
+  let colors;
+  let t1;
+  let t10;
+  let t11;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== accessibilityLabel || $[1] !== disabled || $[2] !== label || $[3] !== largerText || $[4] !== onPress || $[5] !== scheme || $[6] !== testID || $[7] !== variant) {
+    const size = chatTextSize("small", largerText);
+    let t12;
+    if ($[22] !== scheme || $[23] !== variant) {
+      t12 = buttonColors(variant, scheme);
+      $[22] = scheme;
+      $[23] = variant;
+      $[24] = t12;
+    } else {
+      t12 = $[24];
+    }
+    colors = t12;
+    T1 = Pressable;
+    t3 = testID;
+    t4 = "button";
+    t5 = accessibilityLabel ?? label;
+    const t13 = !!disabled;
+    if ($[25] !== t13) {
+      t6 = {
+        disabled: t13
+      };
+      $[25] = t13;
+      $[26] = t6;
+    } else {
+      t6 = $[26];
+    }
+    t7 = disabled;
+    t8 = onPress;
+    if ($[27] === Symbol.for("react.memo_cache_sentinel")) {
+      t9 = touchSlop(MIN_TOUCH_TARGET);
+      t10 = cn("items-center justify-center rounded-full border px-4 active:opacity-70");
+      $[27] = t10;
+      $[28] = t9;
+    } else {
+      t10 = $[27];
+      t9 = $[28];
+    }
+    const t14 = disabled ? 0.5 : 1;
+    if ($[29] !== colors.backgroundColor || $[30] !== colors.borderColor || $[31] !== t14) {
+      t11 = {
+        minHeight: MIN_TOUCH_TARGET,
+        minWidth: MIN_TOUCH_TARGET,
+        backgroundColor: colors.backgroundColor,
+        borderColor: colors.borderColor,
+        opacity: t14
+      };
+      $[29] = colors.backgroundColor;
+      $[30] = colors.borderColor;
+      $[31] = t14;
+      $[32] = t11;
+    } else {
+      t11 = $[32];
+    }
+    T0 = Text;
+    t2 = cn(size, "font-instrument-sans-semibold");
+    t1 = sizeStyle(size);
+    $[0] = accessibilityLabel;
+    $[1] = disabled;
+    $[2] = label;
+    $[3] = largerText;
+    $[4] = onPress;
+    $[5] = scheme;
+    $[6] = testID;
+    $[7] = variant;
+    $[8] = T0;
+    $[9] = T1;
+    $[10] = colors;
+    $[11] = t1;
+    $[12] = t10;
+    $[13] = t11;
+    $[14] = t2;
+    $[15] = t3;
+    $[16] = t4;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t7;
+    $[20] = t8;
+    $[21] = t9;
+  } else {
+    T0 = $[8];
+    T1 = $[9];
+    colors = $[10];
+    t1 = $[11];
+    t10 = $[12];
+    t11 = $[13];
+    t2 = $[14];
+    t3 = $[15];
+    t4 = $[16];
+    t5 = $[17];
+    t6 = $[18];
+    t7 = $[19];
+    t8 = $[20];
+    t9 = $[21];
+  }
+  let t12;
+  if ($[33] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = typeStyle("semibold");
+    $[33] = t12;
+  } else {
+    t12 = $[33];
+  }
+  let t13;
+  if ($[34] !== colors.color) {
+    t13 = {
+      color: colors.color
+    };
+    $[34] = colors.color;
+    $[35] = t13;
+  } else {
+    t13 = $[35];
+  }
+  let t14;
+  if ($[36] !== t1 || $[37] !== t13) {
+    t14 = [t1, t12, t13];
+    $[36] = t1;
+    $[37] = t13;
+    $[38] = t14;
+  } else {
+    t14 = $[38];
+  }
+  let t15;
+  if ($[39] !== T0 || $[40] !== label || $[41] !== t14 || $[42] !== t2) {
+    t15 = <T0 className={t2} style={t14}>{label}</T0>;
+    $[39] = T0;
+    $[40] = label;
+    $[41] = t14;
+    $[42] = t2;
+    $[43] = t15;
+  } else {
+    t15 = $[43];
+  }
+  let t16;
+  if ($[44] !== T1 || $[45] !== t10 || $[46] !== t11 || $[47] !== t15 || $[48] !== t3 || $[49] !== t4 || $[50] !== t5 || $[51] !== t6 || $[52] !== t7 || $[53] !== t8 || $[54] !== t9) {
+    t16 = <T1 testID={t3} accessibilityRole={t4} accessibilityLabel={t5} accessibilityState={t6} disabled={t7} onPress={t8} hitSlop={t9} className={t10} style={t11}>{t15}</T1>;
+    $[44] = T1;
+    $[45] = t10;
+    $[46] = t11;
+    $[47] = t15;
+    $[48] = t3;
+    $[49] = t4;
+    $[50] = t5;
+    $[51] = t6;
+    $[52] = t7;
+    $[53] = t8;
+    $[54] = t9;
+    $[55] = t16;
+  } else {
+    t16 = $[55];
+  }
+  return t16;
+}

package/dist/ai/chain-of-thought.jsx

@@ -0,0 +1,459 @@
+import { c as _c } from "react/compiler-runtime";
+import { Text, View } from "react-native";
+import { IconBrain, IconPointFilled } from "@tabler/icons-react-native";
+import { badgeColors, Badge } from "../Badge";
+import { cn } from "../cn";
+import { sizeStyle } from "../controlStyles";
+import { useLargerText } from "../theme";
+import { tokens } from "../tokens";
+import { useScheme } from "../useScheme";
+import { chatTextSize } from "./chat-text";
+import { Collapsible, CollapsibleChevron, CollapsibleContent, CollapsibleTrigger, useCollapsible } from "./collapsible";
+import { ResponseText } from "./response-text";
+
+// The web `ChainOfThought`, simplified: a fold of steps with search-result
+// chips. `ChainOfThoughtImage` and the step enter animation are not ported.
+
+/** Holds its open state (default closed), or takes `open` and `onOpenChange`. */
+export function ChainOfThought(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 gap-4", 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;
+}
+/** Brain icon, title and chevron: toggles the steps. */
+export function ChainOfThoughtHeader(t0) {
+  const $ = _c(24);
+  let className;
+  let props;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      children: t1,
+      icon: t2,
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    className = $[1];
+    props = $[2];
+    t1 = $[3];
+    t2 = $[4];
+  }
+  const children = t1 === undefined ? "Chain of Thought" : t1;
+  const Icon = t2 === undefined ? IconBrain : t2;
+  const {
+    open
+  } = useCollapsible();
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const muted = tokens.color.muted[scheme];
+  const iconSize = largerText ? 20 : 16;
+  let t3;
+  if ($[5] !== className) {
+    t3 = cn("w-full flex-row items-center gap-2", className);
+    $[5] = className;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== Icon || $[8] !== iconSize || $[9] !== muted) {
+    t4 = <Icon size={iconSize} color={muted} />;
+    $[7] = Icon;
+    $[8] = iconSize;
+    $[9] = muted;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  let t5;
+  if ($[11] !== children) {
+    t5 = <ResponseText size="small" tone="muted" selectable={false} className="flex-1">{children}</ResponseText>;
+    $[11] = children;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== iconSize || $[14] !== muted || $[15] !== open) {
+    t6 = <CollapsibleChevron open={open} size={iconSize} color={muted} />;
+    $[13] = iconSize;
+    $[14] = muted;
+    $[15] = open;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  let t7;
+  if ($[17] !== children || $[18] !== props || $[19] !== t3 || $[20] !== t4 || $[21] !== t5 || $[22] !== t6) {
+    t7 = <CollapsibleTrigger accessibilityLabel={children} className={t3} {...props}>{t4}{t5}{t6}</CollapsibleTrigger>;
+    $[17] = children;
+    $[18] = props;
+    $[19] = t3;
+    $[20] = t4;
+    $[21] = t5;
+    $[22] = t6;
+    $[23] = t7;
+  } else {
+    t7 = $[23];
+  }
+  return t7;
+}
+
+/** The steps, shown while open. */
+export function ChainOfThoughtContent(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("gap-3", 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;
+}
+/** One step: icon with a rail under it to the next step, label, description and any children (such as search results). */
+export function ChainOfThoughtStep(t0) {
+  const $ = _c(40);
+  let children;
+  let className;
+  let description;
+  let label;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      icon: t1,
+      label,
+      description,
+      status: t2,
+      className,
+      style,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = description;
+    $[4] = label;
+    $[5] = props;
+    $[6] = style;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    children = $[1];
+    className = $[2];
+    description = $[3];
+    label = $[4];
+    props = $[5];
+    style = $[6];
+    t1 = $[7];
+    t2 = $[8];
+  }
+  const Icon = t1 === undefined ? IconPointFilled : t1;
+  const status = t2 === undefined ? "complete" : t2;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const tone = status === "active" ? "foreground" : "muted";
+  let t3;
+  if ($[9] !== className) {
+    t3 = cn("flex-row gap-2", className);
+    $[9] = className;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== status) {
+    t4 = status === "pending" ? {
+      opacity: 0.5
+    } : null;
+    $[11] = status;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== style || $[14] !== t4) {
+    t5 = [t4, style];
+    $[13] = style;
+    $[14] = t4;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  const t6 = largerText ? 20 : 16;
+  const t7 = tokens.color[tone][scheme];
+  let t8;
+  if ($[16] !== Icon || $[17] !== t6 || $[18] !== t7) {
+    t8 = <Icon size={t6} color={t7} />;
+    $[16] = Icon;
+    $[17] = t6;
+    $[18] = t7;
+    $[19] = t8;
+  } else {
+    t8 = $[19];
+  }
+  const t9 = tokens.color.separator[scheme];
+  let t10;
+  if ($[20] !== t9) {
+    t10 = <View className="mt-2 w-px flex-1" style={{
+      backgroundColor: t9
+    }} />;
+    $[20] = t9;
+    $[21] = t10;
+  } else {
+    t10 = $[21];
+  }
+  let t11;
+  if ($[22] !== t10 || $[23] !== t8) {
+    t11 = <View className="mt-0.5 items-center">{t8}{t10}</View>;
+    $[22] = t10;
+    $[23] = t8;
+    $[24] = t11;
+  } else {
+    t11 = $[24];
+  }
+  let t12;
+  if ($[25] !== label || $[26] !== tone) {
+    t12 = <ResponseText size="small" tone={tone}>{label}</ResponseText>;
+    $[25] = label;
+    $[26] = tone;
+    $[27] = t12;
+  } else {
+    t12 = $[27];
+  }
+  let t13;
+  if ($[28] !== description) {
+    t13 = description ? <ResponseText size="caption" tone="muted">{description}</ResponseText> : null;
+    $[28] = description;
+    $[29] = t13;
+  } else {
+    t13 = $[29];
+  }
+  let t14;
+  if ($[30] !== children || $[31] !== t12 || $[32] !== t13) {
+    t14 = <View className="min-w-0 flex-1 gap-2">{t12}{t13}{children}</View>;
+    $[30] = children;
+    $[31] = t12;
+    $[32] = t13;
+    $[33] = t14;
+  } else {
+    t14 = $[33];
+  }
+  let t15;
+  if ($[34] !== props || $[35] !== t11 || $[36] !== t14 || $[37] !== t3 || $[38] !== t5) {
+    t15 = <View className={t3} style={t5} {...props}>{t11}{t14}</View>;
+    $[34] = props;
+    $[35] = t11;
+    $[36] = t14;
+    $[37] = t3;
+    $[38] = t5;
+    $[39] = t15;
+  } else {
+    t15 = $[39];
+  }
+  return t15;
+}
+
+/** A wrapping row of `ChainOfThoughtSearchResult` chips. */
+export function ChainOfThoughtSearchResults(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("flex-row flex-wrap items-center gap-2", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = <View className={t1} {...props} />;
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+
+/** One search result: a `secondary` `Badge` with regular `text-xs` type, as the web `font-normal text-xs`. */
+export function ChainOfThoughtSearchResult(t0) {
+  const $ = _c(29);
+  const {
+    children,
+    className
+  } = t0;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let T0;
+  let T1;
+  let t1;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  if ($[0] !== className || $[1] !== largerText) {
+    const size = chatTextSize("caption", largerText);
+    T1 = Badge;
+    t4 = "secondary";
+    if ($[9] !== className) {
+      t5 = cn("px-2 py-0.5", className);
+      $[9] = className;
+      $[10] = t5;
+    } else {
+      t5 = $[10];
+    }
+    T0 = Text;
+    t2 = 1;
+    t3 = cn(size, "font-instrument-sans");
+    t1 = sizeStyle(size);
+    $[0] = className;
+    $[1] = largerText;
+    $[2] = T0;
+    $[3] = T1;
+    $[4] = t1;
+    $[5] = t2;
+    $[6] = t3;
+    $[7] = t4;
+    $[8] = t5;
+  } else {
+    T0 = $[2];
+    T1 = $[3];
+    t1 = $[4];
+    t2 = $[5];
+    t3 = $[6];
+    t4 = $[7];
+    t5 = $[8];
+  }
+  let t6;
+  if ($[11] !== scheme) {
+    t6 = badgeColors("secondary", scheme);
+    $[11] = scheme;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  let t7;
+  if ($[13] !== t6.color) {
+    t7 = {
+      color: t6.color
+    };
+    $[13] = t6.color;
+    $[14] = t7;
+  } else {
+    t7 = $[14];
+  }
+  let t8;
+  if ($[15] !== t1 || $[16] !== t7) {
+    t8 = [t1, t7];
+    $[15] = t1;
+    $[16] = t7;
+    $[17] = t8;
+  } else {
+    t8 = $[17];
+  }
+  let t9;
+  if ($[18] !== T0 || $[19] !== children || $[20] !== t2 || $[21] !== t3 || $[22] !== t8) {
+    t9 = <T0 numberOfLines={t2} className={t3} style={t8}>{children}</T0>;
+    $[18] = T0;
+    $[19] = children;
+    $[20] = t2;
+    $[21] = t3;
+    $[22] = t8;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  let t10;
+  if ($[24] !== T1 || $[25] !== t4 || $[26] !== t5 || $[27] !== t9) {
+    t10 = <T1 variant={t4} className={t5}>{t9}</T1>;
+    $[24] = T1;
+    $[25] = t4;
+    $[26] = t5;
+    $[27] = t9;
+    $[28] = t10;
+  } else {
+    t10 = $[28];
+  }
+  return t10;
+}

package/dist/ai/chat-jump-rail.jsx

@@ -0,0 +1,57 @@
+import { c as _c } from "react/compiler-runtime";
+import { ScrollView } from "react-native";
+import { Chip } from "../Chip";
+import { cn } from "../cn";
+/**
+ * A rail to jump between messages (web `chat-jump-rail`): a horizontal row of
+ * chips, one per item. Each chip is a 48 high button named by its label. Draws
+ * nothing for an empty list.
+ */
+export function ChatJumpRail(t0) {
+  const $ = _c(11);
+  const {
+    items,
+    onJump,
+    className,
+    testID
+  } = t0;
+  if (items.length === 0) {
+    return null;
+  }
+  let t1;
+  if ($[0] !== className) {
+    t1 = cn("grow-0", className);
+    $[0] = className;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  let t2;
+  if ($[2] !== items || $[3] !== onJump) {
+    let t3;
+    if ($[5] !== onJump) {
+      t3 = item => <Chip key={item.id} label={item.label} selected={false} onPress={() => onJump(item.id)} testID={`jump-${item.id}`} />;
+      $[5] = onJump;
+      $[6] = t3;
+    } else {
+      t3 = $[6];
+    }
+    t2 = items.map(t3);
+    $[2] = items;
+    $[3] = onJump;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  let t3;
+  if ($[7] !== t1 || $[8] !== t2 || $[9] !== testID) {
+    t3 = <ScrollView testID={testID} horizontal={true} showsHorizontalScrollIndicator={false} keyboardShouldPersistTaps="handled" accessibilityRole="toolbar" className={t1} contentContainerClassName="gap-2 px-3 py-2">{t2}</ScrollView>;
+    $[7] = t1;
+    $[8] = t2;
+    $[9] = testID;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
+}