@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/Dialog.jsx

@@ -0,0 +1,614 @@
+import { c as _c } from "react/compiler-runtime";
+import { Text, View, useWindowDimensions } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconX } from "@tabler/icons-react-native";
+import { FloatingSurface } from "./FloatingSurface";
+import { cn } from "./cn";
+import { isCompactOverlay, textStyle, typeStyle } from "./controlStyles";
+import { DialogLayoutContext, useDialogLayout } from "./dialogLayout";
+import { palette } from "./palette";
+import { tokens } from "./tokens";
+import { useLargerText } from "./theme";
+import { useScheme } from "./useScheme";
+import { SheetDragView, SheetScrollView } from "./primitives/sheet-drag";
+import { OverlayClose, OverlayModal, OverlayRoot, OverlayTrigger } from "./primitives/overlay";
+/** Holds the open state (controlled with `open` / `onOpenChange`, or `defaultOpen`). Renders no view. */
+export function Dialog(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <OverlayRoot {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+/** Opens the dialog. `asChild` merges the press into its child, for example a `Button`. */
+export function DialogTrigger(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <OverlayTrigger part="DialogTrigger" {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+
+/** Closes the dialog. `asChild` merges the press into its child. */
+export function DialogClose(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <OverlayClose part="DialogClose" {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+/** Web `rounded-t-2xl` (16) on the compact sheet. */
+const SHEET_RADIUS = tokens.radius.lg;
+
+/** The centred panel: at most 480 wide. */
+const PANEL = {
+  width: "100%",
+  maxWidth: 480,
+  alignSelf: "center"
+};
+/** The compact sheet: its bottom corners sit below the screen edge, and it shrinks to the room, as `SheetContent`. */
+const SHEET = {
+  marginBottom: -SHEET_RADIUS,
+  flexShrink: 1
+};
+const SHRINK = {
+  flexShrink: 1
+};
+const CENTRED = {
+  compact: false,
+  stacked: false
+};
+const COMPACT = {
+  compact: true,
+  stacked: false
+};
+const STACKED = {
+  compact: true,
+  stacked: true
+};
+
+/**
+ * Centred panel in an RN `Modal`: opaque surface (card radius 24, floating
+ * shadow, no blur), at most 480 wide, padding 24 as on the web. Android back
+ * closes it.
+ *
+ * In a compact window (the web `COMPACT_OVERLAY_QUERY`, from the window size)
+ * it is the web phone bottom sheet: full width, top corners 16, a handle,
+ * `pt-3 px-6`, the bottom safe-area inset (at least 24) below, and it slides
+ * up on open and down on close unless Reduce Motion is on. Drag it down to
+ * close, as `SheetContent`
+ * (when `dismissible`). Its bottom corners sit below the screen edge,
+ * as `SheetContent`'s do. `DialogFooter` stacks its buttons there. Taller than
+ * the room, it shrinks to fit, so a `DialogBody` inside scrolls.
+ */
+export function DialogContent(t0) {
+  const $ = _c(52);
+  let children;
+  let className;
+  let onShow;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  let t3;
+  if ($[0] !== t0) {
+    ({
+      children,
+      className,
+      hideCloseButton: t1,
+      dismissible: t2,
+      viewportAware: t3,
+      onShow,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = onShow;
+    $[4] = props;
+    $[5] = style;
+    $[6] = t1;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    children = $[1];
+    className = $[2];
+    onShow = $[3];
+    props = $[4];
+    style = $[5];
+    t1 = $[6];
+    t2 = $[7];
+    t3 = $[8];
+  }
+  const hideCloseButton = t1 === undefined ? false : t1;
+  const dismissible = t2 === undefined ? true : t2;
+  const viewportAware = t3 === undefined ? true : t3;
+  const {
+    width,
+    height
+  } = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  let t4;
+  if ($[9] !== height || $[10] !== viewportAware || $[11] !== width) {
+    t4 = viewportAware && isCompactOverlay(width, height);
+    $[9] = height;
+    $[10] = viewportAware;
+    $[11] = width;
+    $[12] = t4;
+  } else {
+    t4 = $[12];
+  }
+  const compact = t4;
+  const t5 = compact ? COMPACT : CENTRED;
+  const t6 = compact ? "bottom" : "center";
+  const t7 = compact ? SHEET : PANEL;
+  const t8 = compact && dismissible;
+  const t9 = compact ? SHRINK : undefined;
+  const t10 = compact ? SHEET_RADIUS : tokens.radius.card;
+  const t11 = compact ? SHRINK : undefined;
+  const t12 = compact ? "gap-4 px-6 pt-3" : "gap-4 p-6";
+  let t13;
+  if ($[13] !== className || $[14] !== t12) {
+    t13 = cn(t12, className);
+    $[13] = className;
+    $[14] = t12;
+    $[15] = t13;
+  } else {
+    t13 = $[15];
+  }
+  let t14;
+  if ($[16] !== compact || $[17] !== insets) {
+    t14 = compact ? {
+      paddingBottom: Math.max(24, insets.bottom) + SHEET_RADIUS,
+      flexShrink: 1
+    } : null;
+    $[16] = compact;
+    $[17] = insets;
+    $[18] = t14;
+  } else {
+    t14 = $[18];
+  }
+  let t15;
+  if ($[19] !== style || $[20] !== t14) {
+    t15 = [t14, style];
+    $[19] = style;
+    $[20] = t14;
+    $[21] = t15;
+  } else {
+    t15 = $[21];
+  }
+  let t16;
+  if ($[22] !== compact) {
+    t16 = compact ? <DialogHandle /> : null;
+    $[22] = compact;
+    $[23] = t16;
+  } else {
+    t16 = $[23];
+  }
+  let t17;
+  if ($[24] !== children || $[25] !== props || $[26] !== t13 || $[27] !== t15 || $[28] !== t16) {
+    t17 = <View accessibilityViewIsModal={true} className={t13} {...props} style={t15}>{t16}{children}</View>;
+    $[24] = children;
+    $[25] = props;
+    $[26] = t13;
+    $[27] = t15;
+    $[28] = t16;
+    $[29] = t17;
+  } else {
+    t17 = $[29];
+  }
+  let t18;
+  if ($[30] !== hideCloseButton) {
+    t18 = hideCloseButton ? null : <DialogCloseButton />;
+    $[30] = hideCloseButton;
+    $[31] = t18;
+  } else {
+    t18 = $[31];
+  }
+  let t19;
+  if ($[32] !== t10 || $[33] !== t11 || $[34] !== t17 || $[35] !== t18) {
+    t19 = <FloatingSurface blur={false} radius={t10} style={t11}>{t17}{t18}</FloatingSurface>;
+    $[32] = t10;
+    $[33] = t11;
+    $[34] = t17;
+    $[35] = t18;
+    $[36] = t19;
+  } else {
+    t19 = $[36];
+  }
+  let t20;
+  if ($[37] !== t19 || $[38] !== t8 || $[39] !== t9) {
+    t20 = <SheetDragView enabled={t8} style={t9}>{t19}</SheetDragView>;
+    $[37] = t19;
+    $[38] = t8;
+    $[39] = t9;
+    $[40] = t20;
+  } else {
+    t20 = $[40];
+  }
+  let t21;
+  if ($[41] !== t20 || $[42] !== t7) {
+    t21 = <View style={t7}>{t20}</View>;
+    $[41] = t20;
+    $[42] = t7;
+    $[43] = t21;
+  } else {
+    t21 = $[43];
+  }
+  let t22;
+  if ($[44] !== dismissible || $[45] !== onShow || $[46] !== t21 || $[47] !== t6) {
+    t22 = <OverlayModal part="DialogContent" placement={t6} dismissible={dismissible} onShow={onShow}>{t21}</OverlayModal>;
+    $[44] = dismissible;
+    $[45] = onShow;
+    $[46] = t21;
+    $[47] = t6;
+    $[48] = t22;
+  } else {
+    t22 = $[48];
+  }
+  let t23;
+  if ($[49] !== t22 || $[50] !== t5) {
+    t23 = <DialogLayoutContext.Provider value={t5}>{t22}</DialogLayoutContext.Provider>;
+    $[49] = t22;
+    $[50] = t5;
+    $[51] = t23;
+  } else {
+    t23 = $[51];
+  }
+  return t23;
+}
+
+/**
+ * The web compact handle: an `h-1 w-12` pill in `surface-tertiary`, in a
+ * 44-high row. The whole sheet drags (`SheetDragView`), the handle with it.
+ */
+function DialogHandle() {
+  const $ = _c(2);
+  const scheme = useScheme();
+  const t0 = palette.surfaceTertiary[scheme];
+  let t1;
+  if ($[0] !== t0) {
+    t1 = <View accessibilityElementsHidden={true} importantForAccessibility="no-hide-descendants" className="mb-1 min-h-11 items-center justify-center"><View className="h-1 w-12 rounded-full" style={{
+        backgroundColor: t0
+      }} /></View>;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}
+function DialogCloseButton() {
+  const $ = _c(3);
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const t0 = largerText ? 26 : 16;
+  const t1 = tokens.color.muted[scheme];
+  let t2;
+  if ($[0] !== t0 || $[1] !== t1) {
+    t2 = <DialogClose testID="dialog-close" accessibilityLabel="Close" hitSlop={8} className="absolute right-2 top-2 h-11 w-11 items-center justify-center rounded-lg active:opacity-70"><IconX size={t0} color={t1} /></DialogClose>;
+    $[0] = t0;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  return t2;
+}
+export function DialogHeader(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-1.5 pr-10", 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;
+}
+
+// Text colours are styles (`textStyle`), so they follow the colour scheme in
+// apps whose `text-foreground` does not. Recolour with `style`, not `className`.
+
+/** Web `text-lg font-semibold`. */
+export function DialogTitle(t0) {
+  const $ = _c(17);
+  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];
+  }
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const t1 = largerText ? "text-2xl" : "text-lg";
+  let t2;
+  if ($[4] !== className || $[5] !== t1) {
+    t2 = cn("font-instrument-sans-semibold", t1, className);
+    $[4] = className;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== scheme) {
+    t3 = textStyle("foreground", scheme);
+    $[7] = scheme;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = typeStyle("semibold");
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== style || $[11] !== t3) {
+    t5 = [t3, t4, style];
+    $[10] = style;
+    $[11] = t3;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== props || $[14] !== t2 || $[15] !== t5) {
+    t6 = <Text accessibilityRole="header" className={t2} style={t5} {...props} />;
+    $[13] = props;
+    $[14] = t2;
+    $[15] = t5;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  return t6;
+}
+
+/** Web `text-sm leading-relaxed`, in the web description colour (`palette.overlayMuted`). */
+export function DialogDescription(t0) {
+  const $ = _c(16);
+  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];
+  }
+  const largerText = useLargerText();
+  const scheme = useScheme();
+  const t1 = largerText ? "text-lg" : "text-sm";
+  let t2;
+  if ($[4] !== className || $[5] !== t1) {
+    t2 = cn("font-instrument-sans leading-relaxed", t1, className);
+    $[4] = className;
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  let t3;
+  if ($[7] !== scheme) {
+    t3 = textStyle("overlayMuted", scheme);
+    $[7] = scheme;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== style || $[10] !== t3) {
+    t4 = [t3, style];
+    $[9] = style;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  let t5;
+  if ($[12] !== props || $[13] !== t2 || $[14] !== t4) {
+    t5 = <Text className={t2} style={t4} {...props} />;
+    $[12] = props;
+    $[13] = t2;
+    $[14] = t4;
+    $[15] = t5;
+  } else {
+    t5 = $[15];
+  }
+  return t5;
+}
+
+/**
+ * Scrolling body for long content. Height is capped at `maxHeight` (default
+ * 60% of the window). In a bottom sheet (`SheetScrollView`) dragging down
+ * scrolls it back first and moves the sheet only from the top, and it holds
+ * still while the sheet follows the finger.
+ */
+export function DialogBody(t0) {
+  const $ = _c(12);
+  let maxHeight;
+  let props;
+  let style;
+  if ($[0] !== t0) {
+    ({
+      maxHeight,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = maxHeight;
+    $[2] = props;
+    $[3] = style;
+  } else {
+    maxHeight = $[1];
+    props = $[2];
+    style = $[3];
+  }
+  const {
+    height
+  } = useWindowDimensions();
+  const t1 = maxHeight ?? height * 0.6;
+  let t2;
+  if ($[4] !== t1) {
+    t2 = {
+      maxHeight: t1
+    };
+    $[4] = t1;
+    $[5] = t2;
+  } else {
+    t2 = $[5];
+  }
+  let t3;
+  if ($[6] !== style || $[7] !== t2) {
+    t3 = [t2, style];
+    $[6] = style;
+    $[7] = t2;
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] !== props || $[10] !== t3) {
+    t4 = <SheetScrollView bounces={false} keyboardShouldPersistTaps="handled" scrollEventThrottle={16} style={t3} {...props} />;
+    $[9] = props;
+    $[10] = t3;
+    $[11] = t4;
+  } else {
+    t4 = $[11];
+  }
+  return t4;
+}
+
+/**
+ * Buttons in a row at the end, as the web footer from `sm` up (Cancel, then
+ * Save). Give each `Button` `fullWidth={false}`; `AlertDialogAction` and
+ * `AlertDialogCancel` already do. Wraps when the labels do not fit.
+ *
+ * In the compact sheet it is the web phone footer: the buttons stack, the last
+ * child on top, each full width (whatever `fullWidth` says) and at least 44
+ * high.
+ */
+export function DialogFooter(t0) {
+  const $ = _c(13);
+  let className;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      className,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = className;
+    $[2] = props;
+  } else {
+    className = $[1];
+    props = $[2];
+  }
+  const {
+    compact
+  } = useDialogLayout();
+  if (compact) {
+    let t1;
+    if ($[3] !== className) {
+      t1 = cn("flex-col-reverse gap-2 pt-2", className);
+      $[3] = className;
+      $[4] = t1;
+    } else {
+      t1 = $[4];
+    }
+    let t2;
+    if ($[5] !== props || $[6] !== t1) {
+      t2 = <DialogLayoutContext.Provider value={STACKED}><View className={t1} {...props} /></DialogLayoutContext.Provider>;
+      $[5] = props;
+      $[6] = t1;
+      $[7] = t2;
+    } else {
+      t2 = $[7];
+    }
+    return t2;
+  }
+  let t1;
+  if ($[8] !== className) {
+    t1 = cn("flex-row flex-wrap items-center justify-end gap-2", className);
+    $[8] = className;
+    $[9] = t1;
+  } else {
+    t1 = $[9];
+  }
+  let t2;
+  if ($[10] !== props || $[11] !== t1) {
+    t2 = <View className={t1} {...props} />;
+    $[10] = props;
+    $[11] = t1;
+    $[12] = t2;
+  } else {
+    t2 = $[12];
+  }
+  return t2;
+}

package/dist/DividedList.jsx

@@ -0,0 +1,120 @@
+import { c as _c } from "react/compiler-runtime";
+import { Children, Fragment, isValidElement } from "react";
+import { View } from "react-native";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+/**
+ * Flat rows with a hairline between each pair, as the web `divide-y
+ * divide-border` lists (Eva's inbox rows). Rows keep their own padding; the
+ * list draws no fill, radius or outer border. `null` children are skipped, so
+ * no divider is left hanging.
+ */
+export function DividedList(t0) {
+  const $ = _c(24);
+  let children;
+  let className;
+  let props;
+  let style;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      children,
+      inset: t1,
+      className,
+      style,
+      ...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 inset = t1 === undefined ? 0 : t1;
+  let T0;
+  let t2;
+  let t3;
+  let t4;
+  let t5;
+  if ($[6] !== children || $[7] !== className || $[8] !== inset || $[9] !== props || $[10] !== style) {
+    const rows = Children.toArray(children).filter(isValidElement);
+    T0 = View;
+    t2 = className;
+    t3 = style;
+    t4 = props;
+    let t6;
+    if ($[16] !== inset) {
+      t6 = (row, index) => <Fragment key={row.key ?? index}>{index > 0 ? <ListDivider inset={inset} /> : null}{row}</Fragment>;
+      $[16] = inset;
+      $[17] = t6;
+    } else {
+      t6 = $[17];
+    }
+    t5 = rows.map(t6);
+    $[6] = children;
+    $[7] = className;
+    $[8] = inset;
+    $[9] = props;
+    $[10] = style;
+    $[11] = T0;
+    $[12] = t2;
+    $[13] = t3;
+    $[14] = t4;
+    $[15] = t5;
+  } else {
+    T0 = $[11];
+    t2 = $[12];
+    t3 = $[13];
+    t4 = $[14];
+    t5 = $[15];
+  }
+  let t6;
+  if ($[18] !== T0 || $[19] !== t2 || $[20] !== t3 || $[21] !== t4 || $[22] !== t5) {
+    t6 = <T0 className={t2} style={t3} {...t4}>{t5}</T0>;
+    $[18] = T0;
+    $[19] = t2;
+    $[20] = t3;
+    $[21] = t4;
+    $[22] = t5;
+    $[23] = t6;
+  } else {
+    t6 = $[23];
+  }
+  return t6;
+}
+
+/**
+ * The hairline `DividedList` draws between two rows (1 high, `border`
+ * colour), on its own: the `ItemSeparatorComponent` of a `FlatList` or
+ * `SectionList` whose rows should look like a `DividedList`.
+ */
+export function ListDivider(t0) {
+  const $ = _c(3);
+  const {
+    inset: t1
+  } = t0;
+  const inset = t1 === undefined ? 0 : t1;
+  const scheme = useScheme();
+  const t2 = tokens.color.border[scheme];
+  let t3;
+  if ($[0] !== inset || $[1] !== t2) {
+    t3 = <View accessible={false} style={{
+      height: 1,
+      marginLeft: inset,
+      backgroundColor: t2
+    }} />;
+    $[0] = inset;
+    $[1] = t2;
+    $[2] = t3;
+  } else {
+    t3 = $[2];
+  }
+  return t3;
+}