@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/AlertDialog.jsx

@@ -0,0 +1,123 @@
+import { c as _c } from "react/compiler-runtime";
+import { Button } from "./Button";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle, DialogTrigger } from "./Dialog";
+import { useOverlay } from "./primitives/overlay";
+/** A `Dialog` whose content blocks backdrop taps. Android back still closes it, as Escape does on the web. */
+export function AlertDialog(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <Dialog {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+export const AlertDialogTrigger = DialogTrigger;
+/** `DialogContent` with no backdrop dismiss and, by default, no close button. */
+export function AlertDialogContent(t0) {
+  const $ = _c(6);
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      hideCloseButton: t1,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = props;
+    $[2] = t1;
+  } else {
+    props = $[1];
+    t1 = $[2];
+  }
+  const hideCloseButton = t1 === undefined ? true : t1;
+  let t2;
+  if ($[3] !== hideCloseButton || $[4] !== props) {
+    t2 = <DialogContent hideCloseButton={hideCloseButton} dismissible={false} {...props} />;
+    $[3] = hideCloseButton;
+    $[4] = props;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  return t2;
+}
+export const AlertDialogHeader = DialogHeader;
+export const AlertDialogFooter = DialogFooter;
+export const AlertDialogTitle = DialogTitle;
+export const AlertDialogDescription = DialogDescription;
+
+/**
+ * Confirm button. As on the web it does not close the dialog: close it in
+ * `onPress` (set `open` to false). Not full width by default, for the row
+ * footer; full width in the stacked footer of the compact sheet.
+ */
+export function AlertDialogAction(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <Button shadowType="flat" fullWidth={false} {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+/**
+ * Cancel button: runs `onPress`, then closes the dialog. Default variant
+ * `outline`, as on the web. Not full width, except in the stacked footer of
+ * the compact sheet.
+ */
+export function AlertDialogCancel(t0) {
+  const $ = _c(11);
+  let onPress;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      variant: t1,
+      onPress,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = onPress;
+    $[2] = props;
+    $[3] = t1;
+  } else {
+    onPress = $[1];
+    props = $[2];
+    t1 = $[3];
+  }
+  const variant = t1 === undefined ? "outline" : t1;
+  const {
+    setOpen
+  } = useOverlay("AlertDialogCancel");
+  let t2;
+  if ($[4] !== onPress || $[5] !== setOpen) {
+    t2 = () => {
+      onPress?.();
+      setOpen(false);
+    };
+    $[4] = onPress;
+    $[5] = setOpen;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== props || $[8] !== t2 || $[9] !== variant) {
+    t3 = <Button variant={variant} shadowType="flat" fullWidth={false} {...props} onPress={t2} />;
+    $[7] = props;
+    $[8] = t2;
+    $[9] = variant;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  return t3;
+}

package/dist/AmbientBackground.jsx

@@ -0,0 +1,73 @@
+import { c as _c } from "react/compiler-runtime";
+import { StyleSheet, View } from "react-native";
+import { cn } from "./cn";
+import { loadLinearGradient } from "./gradient";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+const LIGHT = ["#f6f6f7", "#fde8f0", "#f4f5f7"];
+const DARK = ["#1c1c1e", "#2a1820", "#1a1a1c"];
+
+/**
+ * A soft gradient behind the screen. Without the optional
+ * `expo-linear-gradient` peer it draws the solid `tokens.color.background`.
+ */
+export function AmbientBackground(t0) {
+  const $ = _c(13);
+  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];
+  }
+  const scheme = useScheme();
+  const LinearGradient = loadLinearGradient()?.LinearGradient;
+  let t1;
+  if ($[4] !== className) {
+    t1 = cn("flex-1", className);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[6] !== scheme) {
+    t2 = LinearGradient ? <LinearGradient pointerEvents="none" colors={[...(scheme === "dark" ? DARK : LIGHT)]} start={{
+      x: 0.05,
+      y: 0
+    }} end={{
+      x: 0.95,
+      y: 1
+    }} style={StyleSheet.absoluteFill} /> : <View pointerEvents="none" style={{
+      ...StyleSheet.absoluteFill,
+      backgroundColor: tokens.color.background[scheme]
+    }} />;
+    $[6] = scheme;
+    $[7] = t2;
+  } else {
+    t2 = $[7];
+  }
+  let t3;
+  if ($[8] !== children || $[9] !== props || $[10] !== t1 || $[11] !== t2) {
+    t3 = <View className={t1} {...props}>{t2}{children}</View>;
+    $[8] = children;
+    $[9] = props;
+    $[10] = t1;
+    $[11] = t2;
+    $[12] = t3;
+  } else {
+    t3 = $[12];
+  }
+  return t3;
+}

package/dist/ArtifactList.jsx

@@ -0,0 +1,59 @@
+import { c as _c } from "react/compiler-runtime";
+import { View } from "react-native";
+import { DividedList } from "./DividedList";
+import { ListRow } from "./ListRow";
+/**
+ * Artifacts as pressable `ListRow`s under hairlines (`DividedList`): the title
+ * and an optional description line. A row is a button named by its title.
+ * `empty` stands in for an empty list.
+ */
+export function ArtifactList(t0) {
+  const $ = _c(12);
+  const {
+    rows,
+    onOpen,
+    empty,
+    className,
+    testID
+  } = t0;
+  if (rows.length === 0) {
+    let t1;
+    if ($[0] !== empty || $[1] !== testID) {
+      t1 = empty != null ? <View testID={testID}>{empty}</View> : null;
+      $[0] = empty;
+      $[1] = testID;
+      $[2] = t1;
+    } else {
+      t1 = $[2];
+    }
+    return t1;
+  }
+  let t1;
+  if ($[3] !== onOpen || $[4] !== rows) {
+    let t2;
+    if ($[6] !== onOpen) {
+      t2 = row => <ListRow key={row.id} testID={`artifact-${row.id}`} title={row.title} meta={row.description} onPress={() => onOpen(row.id)} />;
+      $[6] = onOpen;
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    t1 = rows.map(t2);
+    $[3] = onOpen;
+    $[4] = rows;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  let t2;
+  if ($[8] !== className || $[9] !== t1 || $[10] !== testID) {
+    t2 = <DividedList className={className} testID={testID}>{t1}</DividedList>;
+    $[8] = className;
+    $[9] = t1;
+    $[10] = testID;
+    $[11] = t2;
+  } else {
+    t2 = $[11];
+  }
+  return t2;
+}

package/dist/Avatar.jsx

@@ -0,0 +1,285 @@
+import { c as _c } from "react/compiler-runtime";
+import { createContext, useContext, useEffect, useRef, useState } from "react";
+import { Image, StyleSheet, Text, View } from "react-native";
+import { cn } from "./cn";
+import { typeStyle } from "./controlStyles";
+import { palette } from "./palette";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+const AvatarContext = createContext(null);
+function useAvatar(part) {
+  const context = useContext(AvatarContext);
+  if (!context) {
+    throw new Error(`${part} must be inside an Avatar.`);
+  }
+  return context;
+}
+/** Round frame for `AvatarImage` and `AvatarFallback`, as the web `Avatar`. The fallback shows until the image loads, and stays if it fails. */
+export function Avatar(t0) {
+  const $ = _c(27);
+  let children;
+  let className;
+  let props;
+  let style;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      size: t1,
+      className,
+      style,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = style;
+    $[5] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    style = $[4];
+    t1 = $[5];
+  }
+  const size = t1 === undefined ? 40 : t1;
+  const scheme = useScheme();
+  const [status, setStatus] = useState("idle");
+  let t2;
+  if ($[6] !== size || $[7] !== status) {
+    t2 = {
+      size,
+      status,
+      setStatus
+    };
+    $[6] = size;
+    $[7] = status;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  let t3;
+  if ($[9] !== className) {
+    t3 = cn("relative shrink-0 overflow-hidden border", className);
+    $[9] = className;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  const t4 = size / 2;
+  const t5 = tokens.color.border[scheme];
+  const t6 = tokens.color.surfaceSecondary[scheme];
+  let t7;
+  if ($[11] !== size || $[12] !== t4 || $[13] !== t5 || $[14] !== t6) {
+    t7 = {
+      width: size,
+      height: size,
+      borderRadius: t4,
+      borderColor: t5,
+      backgroundColor: t6
+    };
+    $[11] = size;
+    $[12] = t4;
+    $[13] = t5;
+    $[14] = t6;
+    $[15] = t7;
+  } else {
+    t7 = $[15];
+  }
+  let t8;
+  if ($[16] !== style || $[17] !== t7) {
+    t8 = [t7, style];
+    $[16] = style;
+    $[17] = t7;
+    $[18] = t8;
+  } else {
+    t8 = $[18];
+  }
+  let t9;
+  if ($[19] !== children || $[20] !== props || $[21] !== t3 || $[22] !== t8) {
+    t9 = <View className={t3} style={t8} {...props}>{children}</View>;
+    $[19] = children;
+    $[20] = props;
+    $[21] = t3;
+    $[22] = t8;
+    $[23] = t9;
+  } else {
+    t9 = $[23];
+  }
+  let t10;
+  if ($[24] !== t2 || $[25] !== t9) {
+    t10 = <AvatarContext.Provider value={t2}>{t9}</AvatarContext.Provider>;
+    $[24] = t2;
+    $[25] = t9;
+    $[26] = t10;
+  } else {
+    t10 = $[26];
+  }
+  return t10;
+}
+export function AvatarImage(t0) {
+  const $ = _c(15);
+  const {
+    onLoad,
+    onError,
+    className,
+    ...props
+  } = t0;
+  const {
+    status,
+    setStatus
+  } = useAvatar("AvatarImage");
+  const sourceKey = JSON.stringify(props.source);
+  const previousSource = useRef(sourceKey);
+  let t1;
+  let t2;
+  if ($[0] !== setStatus || $[1] !== sourceKey) {
+    t1 = () => {
+      if (previousSource.current === sourceKey) {
+        return;
+      }
+      previousSource.current = sourceKey;
+      setStatus("idle");
+    };
+    t2 = [sourceKey, setStatus];
+    $[0] = setStatus;
+    $[1] = sourceKey;
+    $[2] = t1;
+    $[3] = t2;
+  } else {
+    t1 = $[2];
+    t2 = $[3];
+  }
+  useEffect(t1, t2);
+  if (status === "error") {
+    return null;
+  }
+  let t3;
+  if ($[4] !== onLoad || $[5] !== setStatus) {
+    t3 = event => {
+      setStatus("loaded");
+      onLoad?.(event);
+    };
+    $[4] = onLoad;
+    $[5] = setStatus;
+    $[6] = t3;
+  } else {
+    t3 = $[6];
+  }
+  let t4;
+  if ($[7] !== onError || $[8] !== setStatus) {
+    t4 = event_0 => {
+      setStatus("error");
+      onError?.(event_0);
+    };
+    $[7] = onError;
+    $[8] = setStatus;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== className || $[11] !== props || $[12] !== t3 || $[13] !== t4) {
+    t5 = <Image resizeMode="cover" className={className} style={StyleSheet.absoluteFill} onLoad={t3} onError={t4} {...props} />;
+    $[10] = className;
+    $[11] = props;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  return t5;
+}
+export function AvatarFallback(t0) {
+  const $ = _c(23);
+  let children;
+  let className;
+  let props;
+  let style;
+  let textClassName;
+  if ($[0] !== t0) {
+    ({
+      children,
+      className,
+      textClassName,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = style;
+    $[5] = textClassName;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    style = $[4];
+    textClassName = $[5];
+  }
+  const {
+    size,
+    status
+  } = useAvatar("AvatarFallback");
+  const scheme = useScheme();
+  if (status === "loaded") {
+    return null;
+  }
+  let t1;
+  if ($[6] !== className) {
+    t1 = cn("absolute inset-0 items-center justify-center", className);
+    $[6] = className;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  const t2 = palette.default[scheme];
+  let t3;
+  if ($[8] !== t2) {
+    t3 = {
+      backgroundColor: t2
+    };
+    $[8] = t2;
+    $[9] = t3;
+  } else {
+    t3 = $[9];
+  }
+  let t4;
+  if ($[10] !== style || $[11] !== t3) {
+    t4 = [t3, style];
+    $[10] = style;
+    $[11] = t3;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  let t5;
+  if ($[13] !== children || $[14] !== scheme || $[15] !== size || $[16] !== textClassName) {
+    t5 = typeof children === "string" ? <Text numberOfLines={1} className={cn("font-instrument-sans-semibold", textClassName)} style={[{
+      fontSize: Math.round(size * 0.4),
+      color: palette.defaultForeground[scheme]
+    }, typeStyle("semibold")]}>{children}</Text> : children;
+    $[13] = children;
+    $[14] = scheme;
+    $[15] = size;
+    $[16] = textClassName;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  let t6;
+  if ($[18] !== props || $[19] !== t1 || $[20] !== t4 || $[21] !== t5) {
+    t6 = <View className={t1} style={t4} {...props}>{t5}</View>;
+    $[18] = props;
+    $[19] = t1;
+    $[20] = t4;
+    $[21] = t5;
+    $[22] = t6;
+  } else {
+    t6 = $[22];
+  }
+  return t6;
+}

package/dist/Badge.jsx

@@ -0,0 +1,154 @@
+import { c as _c } from "react/compiler-runtime";
+import { Text, View } from "react-native";
+import { cn } from "./cn";
+import { typeStyle } from "./controlStyles";
+import { palette, withAlpha } from "./palette";
+import { tokens } from "./tokens";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+
+/** The web `Badge` variants. */
+
+/** Border, fill and text colours per variant, from the web classes (`border-danger/25 bg-danger/12 text-danger` and so on). */
+export function badgeColors(variant, scheme) {
+  const tone = (hex, border, fill) => ({
+    borderColor: withAlpha(hex, border),
+    backgroundColor: withAlpha(hex, fill),
+    color: hex
+  });
+  switch (variant) {
+    case "secondary":
+      return {
+        borderColor: tokens.color.separator[scheme],
+        backgroundColor: palette.default[scheme],
+        color: palette.defaultForeground[scheme]
+      };
+    case "destructive":
+      return tone(palette.danger[scheme], 0.25, 0.12);
+    case "destructive-soft":
+      return {
+        borderColor: tokens.color.border[scheme],
+        backgroundColor: withAlpha(palette.danger[scheme], 0.1),
+        color: palette.danger[scheme]
+      };
+    case "outline":
+      return {
+        borderColor: tokens.color.separator[scheme],
+        backgroundColor: "transparent",
+        color: tokens.color.muted[scheme]
+      };
+    case "success":
+      return tone(palette.success[scheme], 0.25, 0.12);
+    case "warning":
+      return tone(palette.warning[scheme], 0.25, 0.12);
+    default:
+      return {
+        borderColor: tokens.color.border[scheme],
+        backgroundColor: palette.default[scheme],
+        color: tokens.color.foreground[scheme]
+      };
+  }
+}
+
+/** Small rounded status label, with the web `Badge` variant names and colours. */
+export function Badge(t0) {
+  const $ = _c(28);
+  let children;
+  let className;
+  let props;
+  let style;
+  let t1;
+  let textClassName;
+  if ($[0] !== t0) {
+    ({
+      variant: t1,
+      className,
+      textClassName,
+      children,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = style;
+    $[5] = t1;
+    $[6] = textClassName;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    style = $[4];
+    t1 = $[5];
+    textClassName = $[6];
+  }
+  const variant = t1 === undefined ? "default" : t1;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  let t2;
+  if ($[7] !== scheme || $[8] !== variant) {
+    t2 = badgeColors(variant, scheme);
+    $[7] = scheme;
+    $[8] = variant;
+    $[9] = t2;
+  } else {
+    t2 = $[9];
+  }
+  let color;
+  let frame;
+  if ($[10] !== t2) {
+    ({
+      color,
+      ...frame
+    } = t2);
+    $[10] = t2;
+    $[11] = color;
+    $[12] = frame;
+  } else {
+    color = $[11];
+    frame = $[12];
+  }
+  let t3;
+  if ($[13] !== className) {
+    t3 = cn("flex-row items-center gap-1 self-start rounded-full border px-2.5 py-1", className);
+    $[13] = className;
+    $[14] = t3;
+  } else {
+    t3 = $[14];
+  }
+  let t4;
+  if ($[15] !== frame || $[16] !== style) {
+    t4 = [frame, style];
+    $[15] = frame;
+    $[16] = style;
+    $[17] = t4;
+  } else {
+    t4 = $[17];
+  }
+  let t5;
+  if ($[18] !== children || $[19] !== color || $[20] !== largerText || $[21] !== textClassName) {
+    t5 = typeof children === "string" || typeof children === "number" ? <Text className={cn("font-instrument-sans-medium", largerText ? "text-base" : "text-sm", textClassName)} style={[{
+      color
+    }, typeStyle("medium")]}>{children}</Text> : children;
+    $[18] = children;
+    $[19] = color;
+    $[20] = largerText;
+    $[21] = textClassName;
+    $[22] = t5;
+  } else {
+    t5 = $[22];
+  }
+  let t6;
+  if ($[23] !== props || $[24] !== t3 || $[25] !== t4 || $[26] !== t5) {
+    t6 = <View className={t3} style={t4} {...props}>{t5}</View>;
+    $[23] = props;
+    $[24] = t3;
+    $[25] = t4;
+    $[26] = t5;
+    $[27] = t6;
+  } else {
+    t6 = $[27];
+  }
+  return t6;
+}