@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/ai/collapsible.jsx

@@ -0,0 +1,275 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+import { Pressable, View } from "react-native";
+import { IconChevronDown, IconChevronRight } from "@tabler/icons-react-native";
+import Animated from "react-native-reanimated";
+import { cn } from "../cn";
+import { MIN_TOUCH_TARGET, touchSlop } from "../controlStyles";
+import { useControllableState } from "../primitives/use-controllable-state";
+import { useReduceMotion } from "../useReduceMotion";
+
+// A small fold for the AI parts: native-ui has no `Collapsible`. A `Pressable`
+// trigger and content that mounts only while open. The content appears at
+// once: a fade would also run each time a list mounts an open fold (a chat
+// opening, a virtualised row scrolled back). The chevron turns in 150 ms; with
+// Reduce Motion it changes in place.
+
+/**
+ * The web chevron: `transition-transform duration-150`. The curve is the
+ * predefined `ease-out`: a `cubicBezier(...)` value in an `Animated.View`
+ * style does not typecheck against `react-native-reanimated` 4.3.
+ */
+const CHEVRON_TURN = {
+  transitionProperty: "transform",
+  transitionDuration: 150,
+  transitionTimingFunction: "ease-out"
+};
+const CollapsibleContext = createContext(null);
+
+/** The open state of the enclosing `Collapsible`, for a chevron or a custom trigger. */
+export function useCollapsible() {
+  const context = useContext(CollapsibleContext);
+  if (!context) {
+    throw new Error("Collapsible parts must be used within Collapsible");
+  }
+  return context;
+}
+/** Holds its own open state, or takes `open` and `onOpenChange`, as the web Radix `Collapsible`. */
+export function Collapsible(t0) {
+  const $ = _c(17);
+  let onOpenChange;
+  let open;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      open,
+      defaultOpen: t1,
+      onOpenChange,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = onOpenChange;
+    $[2] = open;
+    $[3] = props;
+    $[4] = t1;
+  } else {
+    onOpenChange = $[1];
+    open = $[2];
+    props = $[3];
+    t1 = $[4];
+  }
+  const defaultOpen = t1 === undefined ? false : t1;
+  let t2;
+  if ($[5] !== defaultOpen || $[6] !== onOpenChange || $[7] !== open) {
+    t2 = {
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange
+    };
+    $[5] = defaultOpen;
+    $[6] = onOpenChange;
+    $[7] = open;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  const [isOpen, setOpen] = useControllableState(t2);
+  let t3;
+  if ($[9] !== isOpen || $[10] !== setOpen) {
+    t3 = {
+      open: isOpen,
+      setOpen
+    };
+    $[9] = isOpen;
+    $[10] = setOpen;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  let t4;
+  if ($[12] !== props) {
+    t4 = <View {...props} />;
+    $[12] = props;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  let t5;
+  if ($[14] !== t3 || $[15] !== t4) {
+    t5 = <CollapsibleContext.Provider value={t3}>{t4}</CollapsibleContext.Provider>;
+    $[14] = t3;
+    $[15] = t4;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  return t5;
+}
+
+/** A `text-sm` line with the web `py-1`: 28 high. The slop brings it to 44. */
+const TRIGGER_ROW_HEIGHT = 28;
+/** Toggles the fold. A button with `expanded` state for VoiceOver and TalkBack. */
+export function CollapsibleTrigger(t0) {
+  const $ = _c(20);
+  let accessibilityState;
+  let className;
+  let onPress;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      onPress,
+      accessibilityState,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = accessibilityState;
+    $[2] = className;
+    $[3] = onPress;
+    $[4] = props;
+  } else {
+    accessibilityState = $[1];
+    className = $[2];
+    onPress = $[3];
+    props = $[4];
+  }
+  const {
+    open,
+    setOpen
+  } = useCollapsible();
+  let t1;
+  if ($[5] === Symbol.for("react.memo_cache_sentinel")) {
+    t1 = touchSlop(MIN_TOUCH_TARGET, TRIGGER_ROW_HEIGHT);
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== className) {
+    t2 = cn("active:opacity-70", className);
+    $[6] = className;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] !== accessibilityState || $[9] !== open) {
+    t3 = {
+      ...accessibilityState,
+      expanded: open
+    };
+    $[8] = accessibilityState;
+    $[9] = open;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== onPress || $[12] !== open || $[13] !== setOpen) {
+    t4 = event => {
+      onPress?.(event);
+      setOpen(!open);
+    };
+    $[11] = onPress;
+    $[12] = open;
+    $[13] = setOpen;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  let t5;
+  if ($[15] !== props || $[16] !== t2 || $[17] !== t3 || $[18] !== t4) {
+    t5 = <Pressable accessibilityRole="button" hitSlop={t1} className={t2} {...props} accessibilityState={t3} onPress={t4} />;
+    $[15] = props;
+    $[16] = t2;
+    $[17] = t3;
+    $[18] = t4;
+    $[19] = t5;
+  } else {
+    t5 = $[19];
+  }
+  return t5;
+}
+
+/** Mounted only while the fold is open. */
+export function CollapsibleContent(props) {
+  const $ = _c(2);
+  const {
+    open
+  } = useCollapsible();
+  if (!open) {
+    return null;
+  }
+  let t0;
+  if ($[0] !== props) {
+    t0 = <View {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+/**
+ * The fold chevron: `down` turns up when open (reasoning, sources, chain of
+ * thought), `right` turns down (trace lines), as the web `rotate-180` and
+ * `rotate-90`, easing over 150 ms as the web does (at once with Reduce Motion).
+ */
+export function CollapsibleChevron(t0) {
+  const $ = _c(12);
+  const {
+    open,
+    variant: t1,
+    size,
+    color
+  } = t0;
+  const variant = t1 === undefined ? "down" : t1;
+  const Icon = variant === "down" ? IconChevronDown : IconChevronRight;
+  const reduceMotion = useReduceMotion();
+  const turn = variant === "down" ? "180deg" : "90deg";
+  const t2 = open ? turn : "0deg";
+  let t3;
+  if ($[0] !== t2) {
+    t3 = {
+      transform: [{
+        rotate: t2
+      }]
+    };
+    $[0] = t2;
+    $[1] = t3;
+  } else {
+    t3 = $[1];
+  }
+  const t4 = reduceMotion ? null : CHEVRON_TURN;
+  let t5;
+  if ($[2] !== t3 || $[3] !== t4) {
+    t5 = [t3, t4];
+    $[2] = t3;
+    $[3] = t4;
+    $[4] = t5;
+  } else {
+    t5 = $[4];
+  }
+  let t6;
+  if ($[5] !== Icon || $[6] !== color || $[7] !== size) {
+    t6 = <Icon size={size} color={color} />;
+    $[5] = Icon;
+    $[6] = color;
+    $[7] = size;
+    $[8] = t6;
+  } else {
+    t6 = $[8];
+  }
+  let t7;
+  if ($[9] !== t5 || $[10] !== t6) {
+    t7 = <Animated.View style={t5}>{t6}</Animated.View>;
+    $[9] = t5;
+    $[10] = t6;
+    $[11] = t7;
+  } else {
+    t7 = $[11];
+  }
+  return t7;
+}