@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/primitives/card.jsx

@@ -0,0 +1,249 @@
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+import { View } from "react-native";
+import { Text, TextClassContext } from "./text";
+import { cn } from "../cn";
+import { typeStyle } from "../controlStyles";
+const Card = React.forwardRef((t0, ref) => {
+  const $ = _c(9);
+  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 flex-col gap-6 rounded-lg bg-surface py-6", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== ref || $[7] !== t1) {
+    t2 = <TextClassContext.Provider value="text-card-foreground"><View ref={ref} className={t1} {...props} /></TextClassContext.Provider>;
+    $[5] = props;
+    $[6] = ref;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+});
+const CardHeader = React.forwardRef((t0, ref) => {
+  const $ = _c(9);
+  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 flex-col gap-1.5 px-6", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== ref || $[7] !== t1) {
+    t2 = <View ref={ref} className={t1} {...props} />;
+    $[5] = props;
+    $[6] = ref;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+});
+const CardTitle = React.forwardRef((t0, ref) => {
+  const $ = _c(14);
+  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];
+  }
+  let t1;
+  if ($[4] !== className) {
+    t1 = cn("font-instrument-sans-semibold leading-none", className);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] === Symbol.for("react.memo_cache_sentinel")) {
+    t2 = typeStyle("semibold");
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== style) {
+    t3 = [t2, style];
+    $[7] = style;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== props || $[10] !== ref || $[11] !== t1 || $[12] !== t3) {
+    t4 = <Text ref={ref} role="heading" aria-level={3} className={t1} style={t3} {...props} />;
+    $[9] = props;
+    $[10] = ref;
+    $[11] = t1;
+    $[12] = t3;
+    $[13] = t4;
+  } else {
+    t4 = $[13];
+  }
+  return t4;
+});
+const CardDescription = React.forwardRef((t0, ref) => {
+  const $ = _c(9);
+  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("text-sm text-muted-foreground", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== ref || $[7] !== t1) {
+    t2 = <Text ref={ref} className={t1} {...props} />;
+    $[5] = props;
+    $[6] = ref;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+});
+const CardContent = React.forwardRef((t0, ref) => {
+  const $ = _c(9);
+  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("px-6", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== ref || $[7] !== t1) {
+    t2 = <View ref={ref} className={t1} {...props} />;
+    $[5] = props;
+    $[6] = ref;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+});
+const CardFooter = React.forwardRef((t0, ref) => {
+  const $ = _c(9);
+  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 flex-row items-center px-6", className);
+    $[3] = className;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== ref || $[7] !== t1) {
+    t2 = <View ref={ref} className={t1} {...props} />;
+    $[5] = props;
+    $[6] = ref;
+    $[7] = t1;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  return t2;
+});
+Card.displayName = "Card";
+CardHeader.displayName = "CardHeader";
+CardTitle.displayName = "CardTitle";
+CardDescription.displayName = "CardDescription";
+CardContent.displayName = "CardContent";
+CardFooter.displayName = "CardFooter";
+export { Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle };

package/dist/primitives/icon.jsx

@@ -0,0 +1,37 @@
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+
+// Tabler, not Lucide: a Lucide icon always sets `testID` on its `Svg`, which
+// on web is a DOM `<svg>`, so React logs it as an unknown DOM prop.
+
+function Icon(t0) {
+  const $ = _c(6);
+  let Component;
+  let props;
+  if ($[0] !== t0) {
+    const {
+      as: t1,
+      className: _className,
+      ...t2
+    } = t0;
+    Component = t1;
+    props = t2;
+    $[0] = t0;
+    $[1] = Component;
+    $[2] = props;
+  } else {
+    Component = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== Component || $[4] !== props) {
+    t1 = <Component {...props} />;
+    $[3] = Component;
+    $[4] = props;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  return t1;
+}
+export { Icon };

package/dist/primitives/input.jsx

@@ -0,0 +1,56 @@
+import { c as _c } from "react/compiler-runtime";
+import * as React from "react";
+import { Platform, TextInput } from "react-native";
+import { cn } from "../cn";
+import { palette } from "../palette";
+import { useScheme } from "../useScheme";
+const Input = React.forwardRef((t0, ref) => {
+  const $ = _c(12);
+  let className;
+  let placeholderTextColor;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      placeholderTextColor,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = placeholderTextColor;
+    $[3] = props;
+  } else {
+    className = $[1];
+    placeholderTextColor = $[2];
+    props = $[3];
+  }
+  const scheme = useScheme();
+  const t1 = placeholderTextColor ?? palette.fieldPlaceholder[scheme];
+  let t2;
+  if ($[4] !== className || $[5] !== props.editable) {
+    t2 = cn("flex w-full flex-row items-center rounded-lg border-0 bg-secondary px-3 py-2 text-base text-foreground", props.editable === false && cn("opacity-50", Platform.select({
+      web: "cursor-not-allowed pointer-events-none"
+    })), Platform.select({
+      web: "outline-none transition-[color,box-shadow] md:text-sm"
+    }), className);
+    $[4] = className;
+    $[5] = props.editable;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== props || $[8] !== ref || $[9] !== t1 || $[10] !== t2) {
+    t3 = <TextInput ref={ref} placeholderTextColor={t1} className={t2} {...props} />;
+    $[7] = props;
+    $[8] = ref;
+    $[9] = t1;
+    $[10] = t2;
+    $[11] = t3;
+  } else {
+    t3 = $[11];
+  }
+  return t3;
+});
+Input.displayName = "Input";
+export { Input };

package/dist/primitives/keyboard-controller.jsx

@@ -0,0 +1,207 @@
+import { c as _c } from "react/compiler-runtime";
+import { Platform } from "react-native";
+import { KeyboardAvoidingView, KeyboardChatScrollView, KeyboardGestureArea, KeyboardStickyView, useKeyboardHandler } from "react-native-keyboard-controller";
+import { runOnJS } from "react-native-reanimated";
+import { COMPOSER_INPUT_ID, KeyboardPartsContext } from "./keyboard-parts";
+
+// The keyboard parts on `react-native-keyboard-controller`: the keyboard's
+// real position, frame by frame, on the UI thread. No timing of our own, so
+// the composer can neither lag nor lead the keyboard; with Reduce Motion the
+// system shortens the keyboard's own motion and the parts follow it.
+
+/**
+ * A drag moves the keyboard on iOS (`keyboardDismissMode="interactive"`) and
+ * on Android 11+ (API 30, `WindowInsetsAnimation`). Android 10 and below has
+ * no interactive keyboard: `KeyboardGestureArea` then only renders its
+ * children, and the transcript keeps `on-drag`.
+ */
+const INTERACTIVE = Platform.OS === "ios" || Platform.OS === "android" && Number(Platform.Version) >= 30;
+function AvoidingView(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <KeyboardAvoidingView {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+function StickyView(t0) {
+  const $ = _c(8);
+  let bottomOffset;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      bottomOffset,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = bottomOffset;
+    $[2] = props;
+  } else {
+    bottomOffset = $[1];
+    props = $[2];
+  }
+  let t1;
+  if ($[3] !== bottomOffset) {
+    t1 = {
+      opened: bottomOffset
+    };
+    $[3] = bottomOffset;
+    $[4] = t1;
+  } else {
+    t1 = $[4];
+  }
+  let t2;
+  if ($[5] !== props || $[6] !== t1) {
+    t2 = <KeyboardStickyView {...props} offset={t1} />;
+    $[5] = props;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  return t2;
+}
+
+/**
+ * `always`: the content rises with the keyboard wherever the reader is, so
+ * what sat on the composer stays there (the newest message, at the end).
+ * Inverted, the keyboard's space is the content's top inset, the visual
+ * bottom: iOS scrolls below offset 0 into it, so the end moves there; Android
+ * moves the content down by it instead, so offset 0 stays the end. While the
+ * keyboard moves, the list scrolls with it, through offsets that are not the
+ * end on either platform.
+ */
+function ChatScrollView(t0) {
+  const $ = _c(17);
+  let bottomOffset;
+  let onInsetChange;
+  let onKeyboardMove;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      bottomOffset,
+      inverted: t1,
+      onInsetChange,
+      onKeyboardMove,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = bottomOffset;
+    $[2] = onInsetChange;
+    $[3] = onKeyboardMove;
+    $[4] = props;
+    $[5] = t1;
+  } else {
+    bottomOffset = $[1];
+    onInsetChange = $[2];
+    onKeyboardMove = $[3];
+    props = $[4];
+    t1 = $[5];
+  }
+  const inverted = t1 === undefined ? false : t1;
+  let t2;
+  let t3;
+  if ($[6] !== onKeyboardMove) {
+    t2 = {
+      onStart: () => {
+        "worklet";
+
+        runOnJS(onKeyboardMove)(true);
+      },
+      onEnd: () => {
+        "worklet";
+
+        runOnJS(onKeyboardMove)(false);
+      }
+    };
+    t3 = [onKeyboardMove];
+    $[6] = onKeyboardMove;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t2 = $[7];
+    t3 = $[8];
+  }
+  useKeyboardHandler(t2, t3);
+  let t4;
+  if ($[9] !== inverted || $[10] !== onInsetChange) {
+    t4 = insets => onInsetChange(inverted ? Platform.OS === "ios" ? insets.top : 0 : insets.bottom);
+    $[9] = inverted;
+    $[10] = onInsetChange;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== bottomOffset || $[13] !== inverted || $[14] !== props || $[15] !== t4) {
+    t5 = <KeyboardChatScrollView {...props} inverted={inverted} offset={bottomOffset} keyboardLiftBehavior="always" onContentInsetChange={t4} />;
+    $[12] = bottomOffset;
+    $[13] = inverted;
+    $[14] = props;
+    $[15] = t4;
+    $[16] = t5;
+  } else {
+    t5 = $[16];
+  }
+  return t5;
+}
+
+/**
+ * `ios`: the keyboard follows once the finger reaches the composer, then 1:1,
+ * and a release carries the finger's velocity, on both platforms.
+ */
+function GestureArea(t0) {
+  const $ = _c(4);
+  const {
+    offset,
+    style,
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== children || $[1] !== offset || $[2] !== style) {
+    t1 = <KeyboardGestureArea interpolator="ios" offset={offset} textInputNativeID={COMPOSER_INPUT_ID} style={style}>{children}</KeyboardGestureArea>;
+    $[0] = children;
+    $[1] = offset;
+    $[2] = style;
+    $[3] = t1;
+  } else {
+    t1 = $[3];
+  }
+  return t1;
+}
+const PARTS = {
+  AvoidingView,
+  StickyView,
+  ChatScrollView,
+  GestureArea,
+  interactive: INTERACTIVE
+};
+
+/**
+ * Runs the kit's keyboard handling on `react-native-keyboard-controller`:
+ * the chat composer (`ConversationDock`), its scroll button and the
+ * transcript (`ConversationList`) follow the keyboard frame by frame, a drag
+ * on the transcript moves the keyboard with the finger, and `PromptInput`,
+ * `ChatThread`, the overlays and `KeyboardAvoidingView` pad frame by frame.
+ * Put it inside the app's `KeyboardProvider`.
+ */
+export function KeyboardControllerProvider(t0) {
+  const $ = _c(2);
+  const {
+    children
+  } = t0;
+  let t1;
+  if ($[0] !== children) {
+    t1 = <KeyboardPartsContext.Provider value={PARTS}>{children}</KeyboardPartsContext.Provider>;
+    $[0] = children;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}

package/dist/primitives/keyboard-parts.jsx

@@ -0,0 +1,75 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext } from "react";
+import { KeyboardAvoidingView as NativeKeyboardAvoidingView } from "react-native";
+
+/**
+ * The `react-native-keyboard-controller` build of the keyboard parts, from
+ * `@vvedantb/native-ui/keyboard-controller`. They follow the keyboard frame
+ * by frame on the UI thread, and a drag on the chat transcript moves the
+ * keyboard with the finger. Without them (the peer is optional) the kit keeps
+ * React Native's `KeyboardAvoidingView`. A context, so only that entry imports
+ * the peer and an app without it bundles as before.
+ */
+
+export const KeyboardPartsContext = createContext(null);
+
+/**
+ * True inside a part that already keeps its content clear of the keyboard
+ * (`ConversationDock` with the keyboard-controller parts, `ChatThread`): the
+ * chat parts in it add no lift of their own, so nothing lifts twice.
+ */
+export const KeyboardLiftContext = createContext(false);
+
+/**
+ * The keyboard-controller parts for a chat part that follows the keyboard
+ * itself, or `null`: without `KeyboardControllerProvider`, or inside a part
+ * that already lifts it (`KeyboardLiftContext`).
+ */
+export function useKeyboardParts() {
+  const parts = useContext(KeyboardPartsContext);
+  const lifted = useContext(KeyboardLiftContext);
+  return lifted ? null : parts;
+}
+
+/**
+ * The `nativeID` of the `PromptInput` field. On iOS the transcript's gesture
+ * area keeps its `offset` (the composer above the keyboard) only for the
+ * focused field with this id.
+ */
+export const COMPOSER_INPUT_ID = "native-ui-composer";
+/**
+ * React Native's `KeyboardAvoidingView`, or with
+ * `@vvedantb/native-ui/keyboard-controller` the keyboard-controller one, which
+ * pads frame by frame with the keyboard instead of in one step at its end.
+ */
+export function KeyboardAvoidingView(t0) {
+  const $ = _c(7);
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      behavior: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+    $[2] = t1;
+  } else {
+    props = $[1];
+    t1 = $[2];
+  }
+  const behavior = t1 === undefined ? "padding" : t1;
+  const parts = useContext(KeyboardPartsContext);
+  const Avoiding = parts?.AvoidingView ?? NativeKeyboardAvoidingView;
+  let t2;
+  if ($[3] !== Avoiding || $[4] !== behavior || $[5] !== props) {
+    t2 = <Avoiding behavior={behavior} {...props} />;
+    $[3] = Avoiding;
+    $[4] = behavior;
+    $[5] = props;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  return t2;
+}

package/dist/primitives/native-only-animated-view.jsx

@@ -0,0 +1,68 @@
+import { c as _c } from "react/compiler-runtime";
+import { Platform, View } from "react-native";
+import Animated from "react-native-reanimated";
+import { useReduceMotion } from "../useReduceMotion";
+/**
+ * `Animated.View` with layout animations on iOS and Android, a plain `View`
+ * on web. With Reduce Motion on, it drops the animations: sheets, toasts and
+ * the `Select` popover appear and leave in place.
+ */
+function NativeOnlyAnimatedView(t0) {
+  const $ = _c(15);
+  let children;
+  let entering;
+  let exiting;
+  let layout;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      children,
+      entering,
+      exiting,
+      layout,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = entering;
+    $[3] = exiting;
+    $[4] = layout;
+    $[5] = props;
+  } else {
+    children = $[1];
+    entering = $[2];
+    exiting = $[3];
+    layout = $[4];
+    props = $[5];
+  }
+  const reduceMotion = useReduceMotion();
+  if (Platform.OS === "web") {
+    let t1;
+    if ($[6] !== children || $[7] !== props) {
+      t1 = <View {...props}>{children}</View>;
+      $[6] = children;
+      $[7] = props;
+      $[8] = t1;
+    } else {
+      t1 = $[8];
+    }
+    return t1;
+  }
+  const t1 = reduceMotion ? undefined : entering;
+  const t2 = reduceMotion ? undefined : exiting;
+  const t3 = reduceMotion ? undefined : layout;
+  let t4;
+  if ($[9] !== children || $[10] !== props || $[11] !== t1 || $[12] !== t2 || $[13] !== t3) {
+    t4 = <Animated.View entering={t1} exiting={t2} layout={t3} {...props}>{children}</Animated.View>;
+    $[9] = children;
+    $[10] = props;
+    $[11] = t1;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  return t4;
+}
+export { NativeOnlyAnimatedView };