@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/Sheet.jsx

@@ -0,0 +1,343 @@
+import { c as _c } from "react/compiler-runtime";
+import { View } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { FloatingSurface } from "./FloatingSurface";
+import { cn } from "./cn";
+import { withAlpha } from "./palette";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+import { DialogBody, DialogDescription, DialogTitle } from "./Dialog";
+import { SheetDragView } from "./primitives/sheet-drag";
+import { OverlayClose, OverlayModal, OverlayRoot, OverlayTrigger } from "./primitives/overlay";
+const SHEET_RADIUS = tokens.radius.card;
+/**
+ * Bottom sheet in an RN `Modal`, with no `@gorhom/bottom-sheet`. Same open
+ * state API as `Dialog`.
+ */
+export function Sheet(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <OverlayRoot {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+export function SheetTrigger(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <OverlayTrigger part="SheetTrigger" {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+export function SheetClose(props) {
+  const $ = _c(2);
+  let t0;
+  if ($[0] !== props) {
+    t0 = <OverlayClose part="SheetClose" {...props} />;
+    $[0] = props;
+    $[1] = t0;
+  } else {
+    t0 = $[1];
+  }
+  return t0;
+}
+/**
+ * Panel pinned to the bottom edge: opaque surface, top corners at the card
+ * radius, safe-area bottom padding. It slides up on open and back down on
+ * close, with the backdrop fading to match (`OverlayModal`). Drag it down to
+ * close (when `dismissible`): it follows the finger, the backdrop fades, and
+ * a flick or a drag past half carries it out while a short slow one springs
+ * back (`SheetDragView`). Its bottom corners sit below the
+ * screen edge, so only the top corners show. Taller than the room (a short
+ * window, or the keyboard up), it shrinks to fit under the top inset, so a
+ * `SheetBody` or other scroll view inside scrolls and the title stays on screen.
+ */
+export function SheetContent(t0) {
+  const $ = _c(33);
+  let children;
+  let className;
+  let onShow;
+  let props;
+  let style;
+  let t1;
+  let t2;
+  if ($[0] !== t0) {
+    ({
+      children,
+      className,
+      dismissible: t1,
+      showHandle: t2,
+      onShow,
+      style,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = onShow;
+    $[4] = props;
+    $[5] = style;
+    $[6] = t1;
+    $[7] = t2;
+  } else {
+    children = $[1];
+    className = $[2];
+    onShow = $[3];
+    props = $[4];
+    style = $[5];
+    t1 = $[6];
+    t2 = $[7];
+  }
+  const dismissible = t1 === undefined ? true : t1;
+  const showHandle = t2 === undefined ? true : t2;
+  const insets = useSafeAreaInsets();
+  let t3;
+  if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+    t3 = {
+      marginBottom: -SHEET_RADIUS,
+      flexShrink: 1
+    };
+    $[8] = t3;
+  } else {
+    t3 = $[8];
+  }
+  let t4;
+  if ($[9] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = {
+      flexShrink: 1
+    };
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] === Symbol.for("react.memo_cache_sentinel")) {
+    t5 = {
+      flexShrink: 1
+    };
+    $[10] = t5;
+  } else {
+    t5 = $[10];
+  }
+  let t6;
+  if ($[11] !== className) {
+    t6 = cn("gap-4 px-5 pt-3", className);
+    $[11] = className;
+    $[12] = t6;
+  } else {
+    t6 = $[12];
+  }
+  const t7 = insets.bottom + 20 + SHEET_RADIUS;
+  let t8;
+  if ($[13] !== t7) {
+    t8 = {
+      paddingBottom: t7,
+      flexShrink: 1
+    };
+    $[13] = t7;
+    $[14] = t8;
+  } else {
+    t8 = $[14];
+  }
+  let t9;
+  if ($[15] !== style || $[16] !== t8) {
+    t9 = [t8, style];
+    $[15] = style;
+    $[16] = t8;
+    $[17] = t9;
+  } else {
+    t9 = $[17];
+  }
+  let t10;
+  if ($[18] !== showHandle) {
+    t10 = showHandle ? <SheetHandle /> : null;
+    $[18] = showHandle;
+    $[19] = t10;
+  } else {
+    t10 = $[19];
+  }
+  let t11;
+  if ($[20] !== children || $[21] !== props || $[22] !== t10 || $[23] !== t6 || $[24] !== t9) {
+    t11 = <FloatingSurface blur={false} radius={SHEET_RADIUS} style={t5}><View accessibilityViewIsModal={true} className={t6} {...props} style={t9}>{t10}{children}</View></FloatingSurface>;
+    $[20] = children;
+    $[21] = props;
+    $[22] = t10;
+    $[23] = t6;
+    $[24] = t9;
+    $[25] = t11;
+  } else {
+    t11 = $[25];
+  }
+  let t12;
+  if ($[26] !== dismissible || $[27] !== t11) {
+    t12 = <View style={t3}><SheetDragView enabled={dismissible} style={t4}>{t11}</SheetDragView></View>;
+    $[26] = dismissible;
+    $[27] = t11;
+    $[28] = t12;
+  } else {
+    t12 = $[28];
+  }
+  let t13;
+  if ($[29] !== dismissible || $[30] !== onShow || $[31] !== t12) {
+    t13 = <OverlayModal part="SheetContent" placement="bottom" dismissible={dismissible} onShow={onShow}>{t12}</OverlayModal>;
+    $[29] = dismissible;
+    $[30] = onShow;
+    $[31] = t12;
+    $[32] = t13;
+  } else {
+    t13 = $[32];
+  }
+  return t13;
+}
+export function SheetHandle(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 scheme = useScheme();
+  let t1;
+  if ($[4] !== className) {
+    t1 = cn("h-1.5 w-10 self-center rounded-full", className);
+    $[4] = className;
+    $[5] = t1;
+  } else {
+    t1 = $[5];
+  }
+  const t2 = tokens.color.muted[scheme];
+  let t3;
+  if ($[6] !== t2) {
+    t3 = withAlpha(t2, 0.4);
+    $[6] = t2;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== t3) {
+    t4 = {
+      backgroundColor: t3
+    };
+    $[8] = t3;
+    $[9] = t4;
+  } else {
+    t4 = $[9];
+  }
+  let t5;
+  if ($[10] !== style || $[11] !== t4) {
+    t5 = [t4, style];
+    $[10] = style;
+    $[11] = t4;
+    $[12] = t5;
+  } else {
+    t5 = $[12];
+  }
+  let t6;
+  if ($[13] !== props || $[14] !== t1 || $[15] !== t5) {
+    t6 = <View accessibilityElementsHidden={true} importantForAccessibility="no-hide-descendants" className={t1} style={t5} {...props} />;
+    $[13] = props;
+    $[14] = t1;
+    $[15] = t5;
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  return t6;
+}
+export function SheetHeader(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", 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;
+}
+export const SheetTitle = DialogTitle;
+export const SheetDescription = DialogDescription;
+export const SheetBody = DialogBody;
+/** Buttons stack full width, the last child on top: the web footer on a phone. */
+export function SheetFooter(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-col-reverse 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;
+}

package/dist/SheetRow.jsx

@@ -0,0 +1,198 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, Text, View } from "react-native";
+import { IconCheck } from "@tabler/icons-react-native";
+import { cn } from "./cn";
+import { sizeStyle, textStyle, typeStyle } from "./controlStyles";
+import { palette } from "./palette";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+/**
+ * One action in a `Sheet` or bottom sheet, a touch size of the web menu item:
+ * icon (or another `leading` mark), title and optional detail, at least 56 high (64 with larger text) with
+ * the `ListRow` padding (`px-4 py-3`). While pressed it takes the web menu
+ * item highlight (`bg-default`). `danger` draws the title and icon in the
+ * danger colour, `warning` in the warning colour; `active` makes it a choice with a check; `disabled` dims it to 50%, as the web
+ * item, and ignores presses.
+ */
+export function SheetRow(t0) {
+  const $ = _c(52);
+  const {
+    icon: Icon,
+    leading,
+    title,
+    detail,
+    active,
+    multiple: t1,
+    danger: t2,
+    warning: t3,
+    disabled: t4,
+    onPress,
+    testID
+  } = t0;
+  const multiple = t1 === undefined ? false : t1;
+  const danger = t2 === undefined ? false : t2;
+  const warning = t3 === undefined ? false : t3;
+  const disabled = t4 === undefined ? false : t4;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const color = danger ? palette.danger[scheme] : warning ? palette.warning[scheme] : tokens.color.foreground[scheme];
+  const titleSize = largerText ? "text-xl" : "text-base";
+  const detailSize = largerText ? "text-lg" : "text-sm";
+  const iconSize = largerText ? 26 : 22;
+  const t5 = active === undefined ? "button" : multiple ? "checkbox" : "radio";
+  let t6;
+  if ($[0] !== active || $[1] !== disabled) {
+    t6 = active === undefined ? {
+      disabled
+    } : {
+      disabled,
+      checked: active
+    };
+    $[0] = active;
+    $[1] = disabled;
+    $[2] = t6;
+  } else {
+    t6 = $[2];
+  }
+  const t7 = largerText ? "min-h-16" : "min-h-14";
+  const t8 = disabled && "opacity-50";
+  let t9;
+  if ($[3] !== t7 || $[4] !== t8) {
+    t9 = cn("flex-row items-center gap-3 px-4 py-3", t7, t8);
+    $[3] = t7;
+    $[4] = t8;
+    $[5] = t9;
+  } else {
+    t9 = $[5];
+  }
+  let t10;
+  if ($[6] !== disabled || $[7] !== scheme) {
+    t10 = t11 => {
+      const {
+        pressed
+      } = t11;
+      return {
+        borderRadius: tokens.radius.sm,
+        backgroundColor: pressed && !disabled ? palette.default[scheme] : "transparent"
+      };
+    };
+    $[6] = disabled;
+    $[7] = scheme;
+    $[8] = t10;
+  } else {
+    t10 = $[8];
+  }
+  let t11;
+  if ($[9] !== Icon || $[10] !== color || $[11] !== iconSize || $[12] !== leading) {
+    t11 = leading ?? (Icon ? <Icon size={iconSize} color={color} /> : null);
+    $[9] = Icon;
+    $[10] = color;
+    $[11] = iconSize;
+    $[12] = leading;
+    $[13] = t11;
+  } else {
+    t11 = $[13];
+  }
+  let t12;
+  if ($[14] !== titleSize) {
+    t12 = cn("font-instrument-sans-medium", titleSize);
+    $[14] = titleSize;
+    $[15] = t12;
+  } else {
+    t12 = $[15];
+  }
+  let t13;
+  if ($[16] !== color) {
+    t13 = {
+      color
+    };
+    $[16] = color;
+    $[17] = t13;
+  } else {
+    t13 = $[17];
+  }
+  let t14;
+  if ($[18] !== titleSize) {
+    t14 = sizeStyle(titleSize);
+    $[18] = titleSize;
+    $[19] = t14;
+  } else {
+    t14 = $[19];
+  }
+  let t15;
+  if ($[20] === Symbol.for("react.memo_cache_sentinel")) {
+    t15 = typeStyle("medium");
+    $[20] = t15;
+  } else {
+    t15 = $[20];
+  }
+  let t16;
+  if ($[21] !== t13 || $[22] !== t14) {
+    t16 = [t13, t14, t15];
+    $[21] = t13;
+    $[22] = t14;
+    $[23] = t16;
+  } else {
+    t16 = $[23];
+  }
+  let t17;
+  if ($[24] !== t12 || $[25] !== t16 || $[26] !== title) {
+    t17 = <Text className={t12} style={t16}>{title}</Text>;
+    $[24] = t12;
+    $[25] = t16;
+    $[26] = title;
+    $[27] = t17;
+  } else {
+    t17 = $[27];
+  }
+  let t18;
+  if ($[28] !== detail || $[29] !== detailSize || $[30] !== scheme) {
+    t18 = detail ? <Text className={cn("font-instrument-sans", detailSize)} style={[textStyle("muted", scheme), sizeStyle(detailSize)]}>{detail}</Text> : null;
+    $[28] = detail;
+    $[29] = detailSize;
+    $[30] = scheme;
+    $[31] = t18;
+  } else {
+    t18 = $[31];
+  }
+  let t19;
+  if ($[32] !== t17 || $[33] !== t18) {
+    t19 = <View className="min-w-0 flex-1">{t17}{t18}</View>;
+    $[32] = t17;
+    $[33] = t18;
+    $[34] = t19;
+  } else {
+    t19 = $[34];
+  }
+  let t20;
+  if ($[35] !== active || $[36] !== color || $[37] !== iconSize) {
+    t20 = active ? <IconCheck size={iconSize} color={color} strokeWidth={2} /> : null;
+    $[35] = active;
+    $[36] = color;
+    $[37] = iconSize;
+    $[38] = t20;
+  } else {
+    t20 = $[38];
+  }
+  let t21;
+  if ($[39] !== detail || $[40] !== disabled || $[41] !== onPress || $[42] !== t10 || $[43] !== t11 || $[44] !== t19 || $[45] !== t20 || $[46] !== t5 || $[47] !== t6 || $[48] !== t9 || $[49] !== testID || $[50] !== title) {
+    t21 = <Pressable testID={testID} accessibilityRole={t5} accessibilityLabel={title} accessibilityHint={detail} accessibilityState={t6} disabled={disabled} onPress={onPress} className={t9} style={t10}>{t11}{t19}{t20}</Pressable>;
+    $[39] = detail;
+    $[40] = disabled;
+    $[41] = onPress;
+    $[42] = t10;
+    $[43] = t11;
+    $[44] = t19;
+    $[45] = t20;
+    $[46] = t5;
+    $[47] = t6;
+    $[48] = t9;
+    $[49] = testID;
+    $[50] = title;
+    $[51] = t21;
+  } else {
+    t21 = $[51];
+  }
+  return t21;
+}