@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/BulkActionBar.jsx

@@ -0,0 +1,717 @@
+import { c as _c } from "react/compiler-runtime";
+import { Pressable, ScrollView, Text, View, useWindowDimensions } from "react-native";
+import { FadeInDown, FadeOutDown } from "react-native-reanimated";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconDots, IconX } from "@tabler/icons-react-native";
+import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from "./DropdownMenu";
+import { FloatingSurface } from "./FloatingSurface";
+import { FLOATING_PILL_RADIUS, tabBarHeight, tabBarSlotStyle } from "./floating";
+import { MIN_TOUCH_TARGET, sizeStyle, touchSlop, typeStyle } from "./controlStyles";
+import { palette, withAlpha } from "./palette";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useScheme } from "./useScheme";
+import { EASE_OUT } from "./motion";
+import { NativeOnlyAnimatedView } from "./primitives/native-only-animated-view";
+
+/**
+ * One control in the bar, as the web `BulkBarAction`. Each action carries the
+ * handler it runs, so confirm dialogs stay with the caller.
+ */
+
+/** The web `sm` breakpoint: below it, bar buttons are icon-only and "selected" is hidden. */
+export const BULK_BAR_LABEL_MIN_WIDTH = 640;
+
+/**
+ * Web `h-9` buttons with a 17 icon and `text-sm`; with larger text 48 high, a
+ * 22 icon and `text-lg`. In the tab bar slot: 48 high with a 20 icon over a
+ * `text-xs` label; with larger text 56, a 24 icon and `text-sm`. `caption` is
+ * the count chip, or the label under a docked icon.
+ */
+function barMetrics(largerText, docked) {
+  if (docked) {
+    return largerText ? {
+      height: 56,
+      icon: 24,
+      text: sizeStyle("text-lg"),
+      caption: sizeStyle("text-sm")
+    } : {
+      height: 48,
+      icon: 20,
+      text: sizeStyle("text-sm"),
+      caption: sizeStyle("text-xs")
+    };
+  }
+  return largerText ? {
+    height: 48,
+    icon: 22,
+    text: sizeStyle("text-lg"),
+    caption: sizeStyle("text-base")
+  } : {
+    height: 36,
+    icon: 17,
+    text: sizeStyle("text-sm"),
+    caption: sizeStyle("text-xs")
+  };
+}
+
+// Docked at the bottom: it rises into place and sinks back out, the exit 20%
+// quicker.
+const BAR_ENTER = FadeInDown.duration(150).easing(EASE_OUT);
+const BAR_EXIT = FadeOutDown.duration(120).easing(EASE_OUT);
+
+/**
+ * The floating selection bar, as the web `BulkActionBar`: a pill-ended glass
+ * bar (`FloatingSurface`, radius 16, `px-2.5 py-2`, `gap-1`) centred at the
+ * bottom of its container, 12 above `bottomOffset`. It holds the selected
+ * count chip, Select all (n) / Clear, a divider, the primary actions, a More
+ * menu, the destructive action, and Cancel selection (X). Actions are off with
+ * no selection. Below 640 wide (the web `sm`) the actions are icon-only. Put it
+ * last in a full-size container; it scrolls sideways when it does not fit
+ * (with `pinCancel`, all but the X scrolls). `placement="tabBar"` docks it in
+ * the tab bar's slot instead, with labelled 48 high actions.
+ */
+export function BulkActionBar(t0) {
+  const $ = _c(116);
+  const {
+    isSelecting,
+    selectedCount,
+    totalCount,
+    onExitSelect,
+    onSelectAll,
+    onClearSelection,
+    primaryActions,
+    moreActions,
+    destructiveAction,
+    barKey,
+    bottomOffset,
+    pinCancel: t1,
+    placement: t2
+  } = t0;
+  const pinCancel = t1 === undefined ? false : t1;
+  const placement = t2 === undefined ? "float" : t2;
+  const scheme = useScheme();
+  const largerText = useLargerText();
+  const insets = useSafeAreaInsets();
+  const {
+    width
+  } = useWindowDimensions();
+  if (!isSelecting) {
+    return null;
+  }
+  const docked = placement === "tabBar";
+  let T0;
+  let T1;
+  let T2;
+  let T3;
+  let cancel;
+  let hasSelection;
+  let labelled;
+  let pinned;
+  let t10;
+  let t11;
+  let t12;
+  let t13;
+  let t14;
+  let t15;
+  let t16;
+  let t17;
+  let t18;
+  let t19;
+  let t20;
+  let t3;
+  let t4;
+  let t5;
+  let t6;
+  let t7;
+  let t8;
+  let t9;
+  if ($[0] !== barKey || $[1] !== bottomOffset || $[2] !== docked || $[3] !== insets || $[4] !== largerText || $[5] !== moreActions || $[6] !== onClearSelection || $[7] !== onExitSelect || $[8] !== onSelectAll || $[9] !== pinCancel || $[10] !== primaryActions || $[11] !== scheme || $[12] !== selectedCount || $[13] !== totalCount || $[14] !== width) {
+    const metrics = barMetrics(largerText, docked);
+    pinned = pinCancel && !docked;
+    labelled = docked || width >= BULK_BAR_LABEL_MIN_WIDTH;
+    hasSelection = selectedCount > 0;
+    const allSelected = totalCount > 0 && selectedCount >= totalCount;
+    const muted = tokens.color.muted[scheme];
+    cancel = docked ? null : <><BarDivider /><BarPressable height={metrics.height} paddingX={0} docked={docked} label="Cancel selection" onPress={onExitSelect}><IconX size={metrics.icon} color={muted} /></BarPressable></>;
+    T3 = NativeOnlyAnimatedView;
+    t16 = barKey;
+    t17 = "box-none";
+    t18 = docked ? undefined : BAR_ENTER;
+    t19 = docked ? undefined : BAR_EXIT;
+    if ($[41] !== bottomOffset || $[42] !== docked || $[43] !== insets) {
+      t20 = docked ? tabBarSlotStyle(insets) : {
+        position: "absolute",
+        left: 0,
+        right: 0,
+        bottom: 12 + (bottomOffset ?? insets.bottom),
+        alignItems: "center",
+        paddingHorizontal: 16
+      };
+      $[41] = bottomOffset;
+      $[42] = docked;
+      $[43] = insets;
+      $[44] = t20;
+    } else {
+      t20 = $[44];
+    }
+    T2 = FloatingSurface;
+    t14 = docked ? FLOATING_PILL_RADIUS : tokens.radius.lg;
+    if ($[45] !== docked || $[46] !== width) {
+      t15 = docked ? undefined : {
+        maxWidth: width - 32
+      };
+      $[45] = docked;
+      $[46] = width;
+      $[47] = t15;
+    } else {
+      t15 = $[47];
+    }
+    T1 = View;
+    let t21;
+    if ($[48] !== docked || $[49] !== largerText) {
+      t21 = docked ? tabBarHeight(largerText) : undefined;
+      $[48] = docked;
+      $[49] = largerText;
+      $[50] = t21;
+    } else {
+      t21 = $[50];
+    }
+    if ($[51] !== t21) {
+      t13 = {
+        flexDirection: "row",
+        alignItems: "center",
+        height: t21
+      };
+      $[51] = t21;
+      $[52] = t13;
+    } else {
+      t13 = $[52];
+    }
+    T0 = ScrollView;
+    t3 = true;
+    t4 = false;
+    t5 = false;
+    if ($[53] !== docked || $[54] !== pinned) {
+      t6 = pinned || docked ? {
+        flexShrink: 1
+      } : undefined;
+      $[53] = docked;
+      $[54] = pinned;
+      $[55] = t6;
+    } else {
+      t6 = $[55];
+    }
+    let t22;
+    if ($[56] !== docked) {
+      t22 = docked ? {
+        flexGrow: 1
+      } : null;
+      $[56] = docked;
+      $[57] = t22;
+    } else {
+      t22 = $[57];
+    }
+    const t23 = docked ? 0 : 4;
+    const t24 = docked ? 8 : 10;
+    const t25 = docked ? 8 : pinned ? 0 : 10;
+    const t26 = docked ? 0 : 8;
+    if ($[58] !== t22 || $[59] !== t23 || $[60] !== t24 || $[61] !== t25 || $[62] !== t26) {
+      t7 = {
+        ...t22,
+        flexDirection: "row",
+        alignItems: "center",
+        gap: t23,
+        paddingLeft: t24,
+        paddingRight: t25,
+        paddingVertical: t26
+      };
+      $[58] = t22;
+      $[59] = t23;
+      $[60] = t24;
+      $[61] = t25;
+      $[62] = t26;
+      $[63] = t7;
+    } else {
+      t7 = $[63];
+    }
+    t8 = docked ? null : <View accessible={true} accessibilityLabel={`${selectedCount} selected`} style={{
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 8,
+      paddingLeft: 4,
+      paddingRight: 2
+    }}><View style={{
+        borderRadius: tokens.radius.md,
+        paddingHorizontal: 8,
+        paddingVertical: 2,
+        backgroundColor: tokens.color.surfaceSecondary[scheme]
+      }}><Text className="font-instrument-sans-semibold" style={[metrics.caption, typeStyle("semibold"), {
+          fontVariant: ["tabular-nums"],
+          color: tokens.color.foreground[scheme]
+        }]}>{selectedCount}</Text></View>{labelled ? <Text className="font-instrument-sans-medium" style={[metrics.text, typeStyle("medium"), {
+        color: muted
+      }]}>selected</Text> : null}</View>;
+    t9 = totalCount > 0 ? <BarPressable height={metrics.height} paddingX={8} docked={docked} onPress={allSelected ? onClearSelection : onSelectAll}><Text className="font-instrument-sans-medium" style={[metrics.text, typeStyle("medium"), {
+        color: muted
+      }]}>{allSelected ? "Clear" : `Select all (${totalCount})`}</Text></BarPressable> : null;
+    if ($[64] !== docked) {
+      t10 = docked ? null : <BarDivider />;
+      $[64] = docked;
+      $[65] = t10;
+    } else {
+      t10 = $[65];
+    }
+    if ($[66] !== docked || $[67] !== hasSelection || $[68] !== labelled || $[69] !== primaryActions) {
+      let t27;
+      if ($[71] !== docked || $[72] !== hasSelection || $[73] !== labelled) {
+        t27 = action => <BarButton key={action.key} action={action} disabled={!hasSelection} labelled={labelled} docked={docked} />;
+        $[71] = docked;
+        $[72] = hasSelection;
+        $[73] = labelled;
+        $[74] = t27;
+      } else {
+        t27 = $[74];
+      }
+      t11 = primaryActions.map(t27);
+      $[66] = docked;
+      $[67] = hasSelection;
+      $[68] = labelled;
+      $[69] = primaryActions;
+      $[70] = t11;
+    } else {
+      t11 = $[70];
+    }
+    t12 = moreActions && moreActions.length > 0 ? <DropdownMenu><DropdownMenuTrigger accessibilityLabel="More actions" disabled={!hasSelection} hitSlop={touchSlop(MIN_TOUCH_TARGET, metrics.height)} style={t27 => {
+        const {
+          pressed
+        } = t27;
+        return barButtonStyle(metrics.height, 0, pressed, !hasSelection, false, docked, scheme);
+      }}><IconDots size={metrics.icon} color={muted} /></DropdownMenuTrigger><DropdownMenuContent align="end" sideOffset={8}>{moreActions.map(action_0 => <DropdownMenuItem key={action_0.key} icon={action_0.icon} destructive={action_0.destructive} disabled={!hasSelection || Boolean(action_0.disabled)} onSelect={action_0.onClick}>{action_0.label}</DropdownMenuItem>)}</DropdownMenuContent></DropdownMenu> : null;
+    $[0] = barKey;
+    $[1] = bottomOffset;
+    $[2] = docked;
+    $[3] = insets;
+    $[4] = largerText;
+    $[5] = moreActions;
+    $[6] = onClearSelection;
+    $[7] = onExitSelect;
+    $[8] = onSelectAll;
+    $[9] = pinCancel;
+    $[10] = primaryActions;
+    $[11] = scheme;
+    $[12] = selectedCount;
+    $[13] = totalCount;
+    $[14] = width;
+    $[15] = T0;
+    $[16] = T1;
+    $[17] = T2;
+    $[18] = T3;
+    $[19] = cancel;
+    $[20] = hasSelection;
+    $[21] = labelled;
+    $[22] = pinned;
+    $[23] = t10;
+    $[24] = t11;
+    $[25] = t12;
+    $[26] = t13;
+    $[27] = t14;
+    $[28] = t15;
+    $[29] = t16;
+    $[30] = t17;
+    $[31] = t18;
+    $[32] = t19;
+    $[33] = t20;
+    $[34] = t3;
+    $[35] = t4;
+    $[36] = t5;
+    $[37] = t6;
+    $[38] = t7;
+    $[39] = t8;
+    $[40] = t9;
+  } else {
+    T0 = $[15];
+    T1 = $[16];
+    T2 = $[17];
+    T3 = $[18];
+    cancel = $[19];
+    hasSelection = $[20];
+    labelled = $[21];
+    pinned = $[22];
+    t10 = $[23];
+    t11 = $[24];
+    t12 = $[25];
+    t13 = $[26];
+    t14 = $[27];
+    t15 = $[28];
+    t16 = $[29];
+    t17 = $[30];
+    t18 = $[31];
+    t19 = $[32];
+    t20 = $[33];
+    t3 = $[34];
+    t4 = $[35];
+    t5 = $[36];
+    t6 = $[37];
+    t7 = $[38];
+    t8 = $[39];
+    t9 = $[40];
+  }
+  let t21;
+  if ($[75] !== destructiveAction || $[76] !== docked || $[77] !== hasSelection || $[78] !== labelled) {
+    t21 = destructiveAction ? <>{docked ? null : <BarDivider />}<BarButton action={destructiveAction} disabled={!hasSelection} labelled={labelled} docked={docked} /></> : null;
+    $[75] = destructiveAction;
+    $[76] = docked;
+    $[77] = hasSelection;
+    $[78] = labelled;
+    $[79] = t21;
+  } else {
+    t21 = $[79];
+  }
+  const t22 = pinned ? null : cancel;
+  let t23;
+  if ($[80] !== T0 || $[81] !== t10 || $[82] !== t11 || $[83] !== t12 || $[84] !== t21 || $[85] !== t22 || $[86] !== t3 || $[87] !== t4 || $[88] !== t5 || $[89] !== t6 || $[90] !== t7 || $[91] !== t8 || $[92] !== t9) {
+    t23 = <T0 horizontal={t3} bounces={t4} showsHorizontalScrollIndicator={t5} style={t6} contentContainerStyle={t7}>{t8}{t9}{t10}{t11}{t12}{t21}{t22}</T0>;
+    $[80] = T0;
+    $[81] = t10;
+    $[82] = t11;
+    $[83] = t12;
+    $[84] = t21;
+    $[85] = t22;
+    $[86] = t3;
+    $[87] = t4;
+    $[88] = t5;
+    $[89] = t6;
+    $[90] = t7;
+    $[91] = t8;
+    $[92] = t9;
+    $[93] = t23;
+  } else {
+    t23 = $[93];
+  }
+  let t24;
+  if ($[94] !== cancel || $[95] !== docked || $[96] !== pinned) {
+    t24 = pinned ? <View style={{
+      flexDirection: "row",
+      alignItems: "center",
+      gap: 4,
+      paddingLeft: docked ? 0 : 4,
+      paddingRight: docked ? 8 : 10
+    }}>{cancel}</View> : null;
+    $[94] = cancel;
+    $[95] = docked;
+    $[96] = pinned;
+    $[97] = t24;
+  } else {
+    t24 = $[97];
+  }
+  let t25;
+  if ($[98] !== T1 || $[99] !== t13 || $[100] !== t23 || $[101] !== t24) {
+    t25 = <T1 style={t13}>{t23}{t24}</T1>;
+    $[98] = T1;
+    $[99] = t13;
+    $[100] = t23;
+    $[101] = t24;
+    $[102] = t25;
+  } else {
+    t25 = $[102];
+  }
+  let t26;
+  if ($[103] !== T2 || $[104] !== t14 || $[105] !== t15 || $[106] !== t25) {
+    t26 = <T2 radius={t14} style={t15}>{t25}</T2>;
+    $[103] = T2;
+    $[104] = t14;
+    $[105] = t15;
+    $[106] = t25;
+    $[107] = t26;
+  } else {
+    t26 = $[107];
+  }
+  let t27;
+  if ($[108] !== T3 || $[109] !== t16 || $[110] !== t17 || $[111] !== t18 || $[112] !== t19 || $[113] !== t20 || $[114] !== t26) {
+    t27 = <T3 testID={t16} pointerEvents={t17} entering={t18} exiting={t19} style={t20}>{t26}</T3>;
+    $[108] = T3;
+    $[109] = t16;
+    $[110] = t17;
+    $[111] = t18;
+    $[112] = t19;
+    $[113] = t20;
+    $[114] = t26;
+    $[115] = t27;
+  } else {
+    t27 = $[115];
+  }
+  return t27;
+}
+
+/**
+ * A bar button box: the web `h-9 rounded-lg`, at least 44 wide and slopped to
+ * 44 high, `surface-secondary` while pressed (a 10% danger tint for a
+ * destructive one), faded to 30% when off. Docked: a pill (as the tab bar's
+ * active pill), at least 48 wide.
+ */
+function barButtonStyle(height, paddingX, pressed, disabled, destructive, docked, scheme) {
+  const pressedFill = destructive ? withAlpha(palette.danger[scheme], 0.1) : tokens.color.surfaceSecondary[scheme];
+  return {
+    height,
+    minWidth: docked ? 48 : MIN_TOUCH_TARGET,
+    paddingHorizontal: paddingX,
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: 6,
+    borderRadius: docked ? FLOATING_PILL_RADIUS : tokens.radius.lg,
+    backgroundColor: pressed && !disabled ? pressedFill : "transparent",
+    opacity: disabled ? 0.3 : 1
+  };
+}
+function BarPressable(t0) {
+  const $ = _c(20);
+  const {
+    height,
+    paddingX,
+    docked,
+    grow: t1,
+    label,
+    disabled: t2,
+    destructive: t3,
+    onPress,
+    children
+  } = t0;
+  const grow = t1 === undefined ? false : t1;
+  const disabled = t2 === undefined ? false : t2;
+  const destructive = t3 === undefined ? false : t3;
+  const scheme = useScheme();
+  let t4;
+  if ($[0] !== disabled) {
+    t4 = {
+      disabled
+    };
+    $[0] = disabled;
+    $[1] = t4;
+  } else {
+    t4 = $[1];
+  }
+  let t5;
+  if ($[2] !== height) {
+    t5 = touchSlop(MIN_TOUCH_TARGET, height);
+    $[2] = height;
+    $[3] = t5;
+  } else {
+    t5 = $[3];
+  }
+  let t6;
+  if ($[4] !== destructive || $[5] !== disabled || $[6] !== docked || $[7] !== grow || $[8] !== height || $[9] !== paddingX || $[10] !== scheme) {
+    t6 = t7 => {
+      const {
+        pressed
+      } = t7;
+      return {
+        ...barButtonStyle(height, paddingX, pressed, disabled, destructive, docked, scheme),
+        ...(grow ? {
+          flexGrow: 1
+        } : null)
+      };
+    };
+    $[4] = destructive;
+    $[5] = disabled;
+    $[6] = docked;
+    $[7] = grow;
+    $[8] = height;
+    $[9] = paddingX;
+    $[10] = scheme;
+    $[11] = t6;
+  } else {
+    t6 = $[11];
+  }
+  let t7;
+  if ($[12] !== children || $[13] !== disabled || $[14] !== label || $[15] !== onPress || $[16] !== t4 || $[17] !== t5 || $[18] !== t6) {
+    t7 = <Pressable accessibilityRole="button" accessibilityLabel={label} accessibilityState={t4} disabled={disabled} hitSlop={t5} onPress={onPress} style={t6}>{children}</Pressable>;
+    $[12] = children;
+    $[13] = disabled;
+    $[14] = label;
+    $[15] = onPress;
+    $[16] = t4;
+    $[17] = t5;
+    $[18] = t6;
+    $[19] = t7;
+  } else {
+    t7 = $[19];
+  }
+  return t7;
+}
+
+/**
+ * One action: the icon, and on wide screens the short label beside it
+ * (`text-sm` medium). Docked, the short label sits under the icon (`caption`).
+ */
+function BarButton(t0) {
+  const $ = _c(44);
+  const {
+    action,
+    disabled,
+    labelled,
+    docked
+  } = t0;
+  const scheme = useScheme();
+  const t1 = useLargerText();
+  let t2;
+  if ($[0] !== docked || $[1] !== t1) {
+    t2 = barMetrics(t1, docked);
+    $[0] = docked;
+    $[1] = t1;
+    $[2] = t2;
+  } else {
+    t2 = $[2];
+  }
+  const metrics = t2;
+  const Icon = action.icon;
+  const color = action.destructive ? palette.danger[scheme] : tokens.color.muted[scheme];
+  const shortLabel = action.shortLabel ?? action.label;
+  if (docked) {
+    const t3 = metrics.height;
+    const t4 = action.label;
+    const t5 = disabled || Boolean(action.disabled);
+    const t6 = action.destructive;
+    const t7 = action.onClick;
+    let t8;
+    if ($[3] === Symbol.for("react.memo_cache_sentinel")) {
+      t8 = {
+        alignItems: "center",
+        gap: 2
+      };
+      $[3] = t8;
+    } else {
+      t8 = $[3];
+    }
+    let t9;
+    if ($[4] !== Icon || $[5] !== color || $[6] !== metrics.icon) {
+      t9 = <Icon size={metrics.icon} color={color} />;
+      $[4] = Icon;
+      $[5] = color;
+      $[6] = metrics.icon;
+      $[7] = t9;
+    } else {
+      t9 = $[7];
+    }
+    const t10 = metrics.caption;
+    let t11;
+    if ($[8] === Symbol.for("react.memo_cache_sentinel")) {
+      t11 = typeStyle("medium");
+      $[8] = t11;
+    } else {
+      t11 = $[8];
+    }
+    let t12;
+    if ($[9] !== color) {
+      t12 = {
+        color
+      };
+      $[9] = color;
+      $[10] = t12;
+    } else {
+      t12 = $[10];
+    }
+    let t13;
+    if ($[11] !== metrics.caption || $[12] !== t12) {
+      t13 = [t10, t11, t12];
+      $[11] = metrics.caption;
+      $[12] = t12;
+      $[13] = t13;
+    } else {
+      t13 = $[13];
+    }
+    let t14;
+    if ($[14] !== shortLabel || $[15] !== t13) {
+      t14 = <Text numberOfLines={1} className="font-instrument-sans-medium" style={t13}>{shortLabel}</Text>;
+      $[14] = shortLabel;
+      $[15] = t13;
+      $[16] = t14;
+    } else {
+      t14 = $[16];
+    }
+    let t15;
+    if ($[17] !== t14 || $[18] !== t9) {
+      t15 = <View style={t8}>{t9}{t14}</View>;
+      $[17] = t14;
+      $[18] = t9;
+      $[19] = t15;
+    } else {
+      t15 = $[19];
+    }
+    let t16;
+    if ($[20] !== action.destructive || $[21] !== action.label || $[22] !== action.onClick || $[23] !== metrics.height || $[24] !== t15 || $[25] !== t5) {
+      t16 = <BarPressable height={t3} paddingX={6} docked={true} grow={true} label={t4} disabled={t5} destructive={t6} onPress={t7}>{t15}</BarPressable>;
+      $[20] = action.destructive;
+      $[21] = action.label;
+      $[22] = action.onClick;
+      $[23] = metrics.height;
+      $[24] = t15;
+      $[25] = t5;
+      $[26] = t16;
+    } else {
+      t16 = $[26];
+    }
+    return t16;
+  }
+  const t3 = disabled || Boolean(action.disabled);
+  let t4;
+  if ($[27] !== Icon || $[28] !== color || $[29] !== metrics.icon) {
+    t4 = <Icon size={metrics.icon} color={color} />;
+    $[27] = Icon;
+    $[28] = color;
+    $[29] = metrics.icon;
+    $[30] = t4;
+  } else {
+    t4 = $[30];
+  }
+  let t5;
+  if ($[31] !== color || $[32] !== labelled || $[33] !== metrics.text || $[34] !== shortLabel) {
+    t5 = labelled ? <Text className="font-instrument-sans-medium" style={[metrics.text, typeStyle("medium"), {
+      color
+    }]}>{shortLabel}</Text> : null;
+    $[31] = color;
+    $[32] = labelled;
+    $[33] = metrics.text;
+    $[34] = shortLabel;
+    $[35] = t5;
+  } else {
+    t5 = $[35];
+  }
+  let t6;
+  if ($[36] !== action.destructive || $[37] !== action.label || $[38] !== action.onClick || $[39] !== metrics.height || $[40] !== t3 || $[41] !== t4 || $[42] !== t5) {
+    t6 = <BarPressable height={metrics.height} paddingX={10} docked={false} label={action.label} disabled={t3} destructive={action.destructive} onPress={action.onClick}>{t4}{t5}</BarPressable>;
+    $[36] = action.destructive;
+    $[37] = action.label;
+    $[38] = action.onClick;
+    $[39] = metrics.height;
+    $[40] = t3;
+    $[41] = t4;
+    $[42] = t5;
+    $[43] = t6;
+  } else {
+    t6 = $[43];
+  }
+  return t6;
+}
+
+/** The web vertical `Separator`: `mx-1.5 h-5 bg-border`. */
+function BarDivider() {
+  const $ = _c(2);
+  const scheme = useScheme();
+  const t0 = tokens.color.border[scheme];
+  let t1;
+  if ($[0] !== t0) {
+    t1 = <View accessible={false} importantForAccessibility="no" style={{
+      width: 1,
+      height: 20,
+      marginHorizontal: 6,
+      backgroundColor: t0
+    }} />;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}