@vvedantb/native-ui 0.17.2 → 0.18.0

package/dist/DropdownMenu.jsx

@@ -0,0 +1,849 @@
+import { c as _c } from "react/compiler-runtime";
+import * as Slot from "@rn-primitives/slot";
+import { createContext, useContext, useRef, useState } from "react";
+import { Modal, Pressable, ScrollView, StyleSheet, Text, View, useWindowDimensions } from "react-native";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+import { IconCheck } from "@tabler/icons-react-native";
+import { FloatingSurface } from "./FloatingSurface";
+import { cn } from "./cn";
+import { sizeStyle, typeStyle } from "./controlStyles";
+import { selectionHaptic } from "./haptics";
+import { palette } from "./palette";
+import { useLargerText } from "./theme";
+import { tokens } from "./tokens";
+import { useReduceMotion } from "./useReduceMotion";
+import { useScheme } from "./useScheme";
+import { useControllableState } from "./primitives/use-controllable-state";
+
+/**
+ * Sizes from the web menu classes (`_menu-classes.ts`): content `min-w-[12rem]
+ * p-1.5 rounded-lg`, `sideOffset` 4 and `collisionPadding` 8; items `px-2.5
+ * py-3 rounded-menu-item` (8) with a 16 icon `gap-2`; radio items `pl-8` with
+ * the check at `left-2.5`; the label `px-2.5 py-1.5`; the separator `-mx-1.5
+ * my-1 h-px`. Items are at least 48 high, a phone menu row (the web
+ * `max-sm:min-h-10` is 40).
+ */
+export const DROPDOWN_MENU = {
+  minWidth: 192,
+  padding: 6,
+  radius: tokens.radius.lg,
+  sideOffset: 4,
+  edge: 8,
+  itemHeight: 48,
+  itemRadius: 8,
+  itemPaddingX: 10,
+  itemPaddingY: 12,
+  itemGap: 8,
+  indicatorInset: 32,
+  indicatorLeft: 10,
+  labelPaddingY: 6,
+  separatorMargin: 4
+};
+
+/** A view's box in window coordinates, from `measureInWindow`. */
+
+const MenuContext = createContext(null);
+function useMenu(part) {
+  const context = useContext(MenuContext);
+  if (!context) {
+    throw new Error(`${part} must be inside a DropdownMenu.`);
+  }
+  return context;
+}
+/**
+ * A small menu anchored to its trigger, the native `DropdownMenu`: holds the
+ * open state (controlled with `open` / `onOpenChange`, or `defaultOpen`) and
+ * renders no view.
+ */
+export function DropdownMenu(t0) {
+  const $ = _c(11);
+  const {
+    open,
+    defaultOpen: t1,
+    onOpenChange,
+    children
+  } = t0;
+  const defaultOpen = t1 === undefined ? false : t1;
+  let t2;
+  if ($[0] !== defaultOpen || $[1] !== onOpenChange || $[2] !== open) {
+    t2 = {
+      value: open,
+      defaultValue: defaultOpen,
+      onChange: onOpenChange
+    };
+    $[0] = defaultOpen;
+    $[1] = onOpenChange;
+    $[2] = open;
+    $[3] = t2;
+  } else {
+    t2 = $[3];
+  }
+  const [value, setValue] = useControllableState(t2);
+  const [trigger, setTrigger] = useState(null);
+  let t3;
+  if ($[4] !== setValue || $[5] !== trigger || $[6] !== value) {
+    t3 = {
+      open: value,
+      setOpen: setValue,
+      trigger,
+      setTrigger
+    };
+    $[4] = setValue;
+    $[5] = trigger;
+    $[6] = value;
+    $[7] = t3;
+  } else {
+    t3 = $[7];
+  }
+  let t4;
+  if ($[8] !== children || $[9] !== t3) {
+    t4 = <MenuContext.Provider value={t3}>{children}</MenuContext.Provider>;
+    $[8] = children;
+    $[9] = t3;
+    $[10] = t4;
+  } else {
+    t4 = $[10];
+  }
+  return t4;
+}
+/**
+ * Opens the menu, or closes it when open. On press it measures itself
+ * (`measureInWindow`) and the menu opens under it. Reports `expanded`.
+ */
+export function DropdownMenuTrigger(t0) {
+  const $ = _c(18);
+  let accessibilityState;
+  let asChild;
+  let onPress;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      asChild,
+      onPress,
+      accessibilityState,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = accessibilityState;
+    $[2] = asChild;
+    $[3] = onPress;
+    $[4] = props;
+  } else {
+    accessibilityState = $[1];
+    asChild = $[2];
+    onPress = $[3];
+    props = $[4];
+  }
+  const {
+    open,
+    setOpen,
+    setTrigger
+  } = useMenu("DropdownMenuTrigger");
+  const ref = useRef(null);
+  const Component = asChild ? Slot.Pressable : Pressable;
+  let t1;
+  if ($[5] !== accessibilityState || $[6] !== open) {
+    t1 = {
+      ...accessibilityState,
+      expanded: open
+    };
+    $[5] = accessibilityState;
+    $[6] = open;
+    $[7] = t1;
+  } else {
+    t1 = $[7];
+  }
+  let t2;
+  if ($[8] !== onPress || $[9] !== open || $[10] !== setOpen || $[11] !== setTrigger) {
+    t2 = event => {
+      onPress?.(event);
+      if (open) {
+        return setOpen(false);
+      }
+      const view = ref.current;
+      if (!view) {
+        return setOpen(true);
+      }
+      view.measureInWindow((x, y, width, height) => {
+        setTrigger({
+          x,
+          y,
+          width,
+          height
+        });
+        setOpen(true);
+      });
+    };
+    $[8] = onPress;
+    $[9] = open;
+    $[10] = setOpen;
+    $[11] = setTrigger;
+    $[12] = t2;
+  } else {
+    t2 = $[12];
+  }
+  let t3;
+  if ($[13] !== Component || $[14] !== props || $[15] !== t1 || $[16] !== t2) {
+    t3 = <Component ref={ref} accessibilityRole="button" {...props} accessibilityState={t1} onPress={t2} />;
+    $[13] = Component;
+    $[14] = props;
+    $[15] = t1;
+    $[16] = t2;
+    $[17] = t3;
+  } else {
+    t3 = $[17];
+  }
+  return t3;
+}
+/**
+ * Where the menu goes: under the trigger, `sideOffset` away, its start edge on
+ * the trigger's start (`"start"`) or its end edge on the trigger's end
+ * (`"end"`), kept 8 inside the safe area. It flips above the trigger when its
+ * content does not fit below and there is more room above. Without a trigger
+ * box it sits at the top of the safe area.
+ */
+export function dropdownMenuPosition({
+  trigger,
+  window,
+  insets,
+  align,
+  sideOffset = DROPDOWN_MENU.sideOffset,
+  contentHeight
+}) {
+  const edge = DROPDOWN_MENU.edge;
+  const minTop = insets.top + edge;
+  const maxBottom = window.height - insets.bottom - edge;
+  const minLeft = insets.left + edge;
+  const minRight = insets.right + edge;
+  if (!trigger) return {
+    top: minTop,
+    left: minLeft,
+    maxHeight: maxBottom - minTop
+  };
+  const horizontal = align === "end" ? {
+    right: Math.max(minRight, window.width - (trigger.x + trigger.width))
+  } : {
+    left: Math.max(minLeft, trigger.x)
+  };
+  const below = trigger.y + trigger.height + sideOffset;
+  const above = trigger.y - sideOffset;
+  const roomBelow = maxBottom - below;
+  const roomAbove = above - minTop;
+  if (contentHeight > roomBelow && roomAbove > roomBelow) {
+    return {
+      ...horizontal,
+      bottom: window.height - above,
+      maxHeight: roomAbove
+    };
+  }
+  return {
+    ...horizontal,
+    top: below,
+    maxHeight: roomBelow
+  };
+}
+/**
+ * The menu in a transparent RN `Modal`: the opaque overlay surface of
+ * `Dialog` and `Sheet` (`FloatingSurface` without blur, with the floating
+ * shadow) at radius 16, at least 192 wide, `p-1.5`, scrolling when taller than
+ * the room. A tap outside, Android back and the VoiceOver escape gesture close
+ * it. With Reduce Motion on, the fade is off.
+ */
+export function DropdownMenuContent(t0) {
+  const $ = _c(49);
+  let children;
+  let className;
+  let props;
+  let sideOffset;
+  let style;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      align: t1,
+      sideOffset,
+      className,
+      style,
+      children,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = children;
+    $[2] = className;
+    $[3] = props;
+    $[4] = sideOffset;
+    $[5] = style;
+    $[6] = t1;
+  } else {
+    children = $[1];
+    className = $[2];
+    props = $[3];
+    sideOffset = $[4];
+    style = $[5];
+    t1 = $[6];
+  }
+  const align = t1 === undefined ? "start" : t1;
+  const {
+    open,
+    setOpen,
+    trigger
+  } = useMenu("DropdownMenuContent");
+  const window = useWindowDimensions();
+  const insets = useSafeAreaInsets();
+  const reduceMotion = useReduceMotion();
+  const [contentHeight, setContentHeight] = useState(null);
+  let t2;
+  if ($[7] !== setOpen) {
+    t2 = () => setOpen(false);
+    $[7] = setOpen;
+    $[8] = t2;
+  } else {
+    t2 = $[8];
+  }
+  const close = t2;
+  const t3 = contentHeight ?? 0;
+  let t4;
+  if ($[9] !== align || $[10] !== insets || $[11] !== sideOffset || $[12] !== t3 || $[13] !== trigger || $[14] !== window) {
+    t4 = dropdownMenuPosition({
+      trigger,
+      window,
+      insets,
+      align,
+      sideOffset,
+      contentHeight: t3
+    });
+    $[9] = align;
+    $[10] = insets;
+    $[11] = sideOffset;
+    $[12] = t3;
+    $[13] = trigger;
+    $[14] = window;
+    $[15] = t4;
+  } else {
+    t4 = $[15];
+  }
+  const position = t4;
+  const t5 = reduceMotion ? "none" : "fade";
+  let t6;
+  if ($[16] === Symbol.for("react.memo_cache_sentinel")) {
+    t6 = {
+      flex: 1
+    };
+    $[16] = t6;
+  } else {
+    t6 = $[16];
+  }
+  let t7;
+  if ($[17] !== close) {
+    t7 = <Pressable testID="DropdownMenu-backdrop" accessibilityRole="button" accessibilityLabel="Close menu" onPress={close} style={StyleSheet.absoluteFill} />;
+    $[17] = close;
+    $[18] = t7;
+  } else {
+    t7 = $[18];
+  }
+  const t8 = window.width - insets.left - insets.right - 2 * DROPDOWN_MENU.edge;
+  const t9 = contentHeight === null ? 0 : 1;
+  let t10;
+  if ($[19] !== position || $[20] !== t8 || $[21] !== t9) {
+    t10 = {
+      position: "absolute",
+      ...position,
+      minWidth: DROPDOWN_MENU.minWidth,
+      maxWidth: t8,
+      opacity: t9
+    };
+    $[19] = position;
+    $[20] = t8;
+    $[21] = t9;
+    $[22] = t10;
+  } else {
+    t10 = $[22];
+  }
+  let t11;
+  if ($[23] !== position.maxHeight) {
+    t11 = {
+      maxHeight: position.maxHeight
+    };
+    $[23] = position.maxHeight;
+    $[24] = t11;
+  } else {
+    t11 = $[24];
+  }
+  let t12;
+  let t13;
+  if ($[25] === Symbol.for("react.memo_cache_sentinel")) {
+    t12 = (_width, height) => setContentHeight(height);
+    t13 = {
+      padding: DROPDOWN_MENU.padding
+    };
+    $[25] = t12;
+    $[26] = t13;
+  } else {
+    t12 = $[25];
+    t13 = $[26];
+  }
+  let t14;
+  if ($[27] !== className) {
+    t14 = cn(className);
+    $[27] = className;
+    $[28] = t14;
+  } else {
+    t14 = $[28];
+  }
+  let t15;
+  if ($[29] !== children || $[30] !== props || $[31] !== style || $[32] !== t14) {
+    t15 = <ScrollView bounces={false} showsVerticalScrollIndicator={false} onContentSizeChange={t12} contentContainerStyle={t13}><View className={t14} style={style} {...props}>{children}</View></ScrollView>;
+    $[29] = children;
+    $[30] = props;
+    $[31] = style;
+    $[32] = t14;
+    $[33] = t15;
+  } else {
+    t15 = $[33];
+  }
+  let t16;
+  if ($[34] !== t11 || $[35] !== t15) {
+    t16 = <FloatingSurface blur={false} radius={DROPDOWN_MENU.radius} style={t11}>{t15}</FloatingSurface>;
+    $[34] = t11;
+    $[35] = t15;
+    $[36] = t16;
+  } else {
+    t16 = $[36];
+  }
+  let t17;
+  if ($[37] !== close || $[38] !== t10 || $[39] !== t16) {
+    t17 = <View accessibilityRole="menu" accessibilityViewIsModal={true} onAccessibilityEscape={close} style={t10}>{t16}</View>;
+    $[37] = close;
+    $[38] = t10;
+    $[39] = t16;
+    $[40] = t17;
+  } else {
+    t17 = $[40];
+  }
+  let t18;
+  if ($[41] !== t17 || $[42] !== t7) {
+    t18 = <View style={t6} pointerEvents="box-none">{t7}{t17}</View>;
+    $[41] = t17;
+    $[42] = t7;
+    $[43] = t18;
+  } else {
+    t18 = $[43];
+  }
+  let t19;
+  if ($[44] !== close || $[45] !== open || $[46] !== t18 || $[47] !== t5) {
+    t19 = <Modal visible={open} transparent={true} animationType={t5} statusBarTranslucent={true} onRequestClose={close}>{t18}</Modal>;
+    $[44] = close;
+    $[45] = open;
+    $[46] = t18;
+    $[47] = t5;
+    $[48] = t19;
+  } else {
+    t19 = $[48];
+  }
+  return t19;
+}
+
+/** Item type and icon size: the web `text-sm` with a 16 icon in 48 rows, or `text-lg` with a 22 icon and 56 rows with larger text. */
+function itemMetrics(largerText) {
+  return largerText ? {
+    text: sizeStyle("text-lg"),
+    icon: 22,
+    minHeight: 56
+  } : {
+    text: sizeStyle("text-sm"),
+    icon: 16,
+    minHeight: DROPDOWN_MENU.itemHeight
+  };
+}
+function MenuRow(t0) {
+  const $ = _c(47);
+  let accessibilityState;
+  let checked;
+  let children;
+  let className;
+  let color;
+  let disabled;
+  let itemRole;
+  let leading;
+  let onSelect;
+  let paddingLeft;
+  let part;
+  let props;
+  let t1;
+  if ($[0] !== t0) {
+    ({
+      part,
+      itemRole,
+      checked,
+      color,
+      paddingLeft,
+      leading,
+      children,
+      onSelect,
+      closeOnSelect: t1,
+      disabled,
+      className,
+      accessibilityState,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = accessibilityState;
+    $[2] = checked;
+    $[3] = children;
+    $[4] = className;
+    $[5] = color;
+    $[6] = disabled;
+    $[7] = itemRole;
+    $[8] = leading;
+    $[9] = onSelect;
+    $[10] = paddingLeft;
+    $[11] = part;
+    $[12] = props;
+    $[13] = t1;
+  } else {
+    accessibilityState = $[1];
+    checked = $[2];
+    children = $[3];
+    className = $[4];
+    color = $[5];
+    disabled = $[6];
+    itemRole = $[7];
+    leading = $[8];
+    onSelect = $[9];
+    paddingLeft = $[10];
+    part = $[11];
+    props = $[12];
+    t1 = $[13];
+  }
+  const closeOnSelect = t1 === undefined ? true : t1;
+  const {
+    setOpen
+  } = useMenu(part);
+  const scheme = useScheme();
+  const t2 = useLargerText();
+  let t3;
+  if ($[14] !== t2) {
+    t3 = itemMetrics(t2);
+    $[14] = t2;
+    $[15] = t3;
+  } else {
+    t3 = $[15];
+  }
+  const metrics = t3;
+  const t4 = Boolean(disabled);
+  let t5;
+  if ($[16] !== checked) {
+    t5 = checked === undefined ? null : {
+      checked
+    };
+    $[16] = checked;
+    $[17] = t5;
+  } else {
+    t5 = $[17];
+  }
+  let t6;
+  if ($[18] !== accessibilityState || $[19] !== t4 || $[20] !== t5) {
+    t6 = {
+      ...accessibilityState,
+      disabled: t4,
+      ...t5
+    };
+    $[18] = accessibilityState;
+    $[19] = t4;
+    $[20] = t5;
+    $[21] = t6;
+  } else {
+    t6 = $[21];
+  }
+  let t7;
+  if ($[22] !== checked || $[23] !== closeOnSelect || $[24] !== onSelect || $[25] !== setOpen) {
+    t7 = () => {
+      if (checked === false) {
+        selectionHaptic();
+      }
+      onSelect?.();
+      if (closeOnSelect) {
+        setOpen(false);
+      }
+    };
+    $[22] = checked;
+    $[23] = closeOnSelect;
+    $[24] = onSelect;
+    $[25] = setOpen;
+    $[26] = t7;
+  } else {
+    t7 = $[26];
+  }
+  const t8 = disabled ? 0.5 : 1;
+  let t9;
+  if ($[27] !== metrics.minHeight || $[28] !== paddingLeft || $[29] !== t8) {
+    t9 = {
+      flexDirection: "row",
+      alignItems: "center",
+      minHeight: metrics.minHeight,
+      gap: DROPDOWN_MENU.itemGap,
+      paddingLeft,
+      paddingRight: DROPDOWN_MENU.itemPaddingX,
+      paddingVertical: DROPDOWN_MENU.itemPaddingY,
+      borderRadius: DROPDOWN_MENU.itemRadius,
+      opacity: t8
+    };
+    $[27] = metrics.minHeight;
+    $[28] = paddingLeft;
+    $[29] = t8;
+    $[30] = t9;
+  } else {
+    t9 = $[30];
+  }
+  let t10;
+  if ($[31] !== children || $[32] !== className || $[33] !== color || $[34] !== disabled || $[35] !== leading || $[36] !== metrics.text || $[37] !== scheme) {
+    t10 = t11 => {
+      const {
+        pressed
+      } = t11;
+      return <>{pressed && !disabled ? <View pointerEvents="none" style={[StyleSheet.absoluteFill, {
+          borderRadius: DROPDOWN_MENU.itemRadius,
+          backgroundColor: palette.default[scheme]
+        }]} /> : null}{leading}<View className={cn("min-w-0 flex-1 flex-row items-center", className)}>{typeof children === "string" ? <Text className="flex-1 font-instrument-sans" style={[metrics.text, {
+            color
+          }]}>{children}</Text> : children}</View></>;
+    };
+    $[31] = children;
+    $[32] = className;
+    $[33] = color;
+    $[34] = disabled;
+    $[35] = leading;
+    $[36] = metrics.text;
+    $[37] = scheme;
+    $[38] = t10;
+  } else {
+    t10 = $[38];
+  }
+  let t11;
+  if ($[39] !== disabled || $[40] !== itemRole || $[41] !== props || $[42] !== t10 || $[43] !== t6 || $[44] !== t7 || $[45] !== t9) {
+    t11 = <Pressable accessibilityRole={itemRole} {...props} disabled={disabled} accessibilityState={t6} onPress={t7} style={t9}>{t10}</Pressable>;
+    $[39] = disabled;
+    $[40] = itemRole;
+    $[41] = props;
+    $[42] = t10;
+    $[43] = t6;
+    $[44] = t7;
+    $[45] = t9;
+    $[46] = t11;
+  } else {
+    t11 = $[46];
+  }
+  return t11;
+}
+/** One action row (`menuitem`): an optional icon and the label. */
+export function DropdownMenuItem(t0) {
+  const $ = _c(15);
+  let Icon;
+  let destructive;
+  let props;
+  let warning;
+  if ($[0] !== t0) {
+    ({
+      icon: Icon,
+      destructive,
+      warning,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = Icon;
+    $[2] = destructive;
+    $[3] = props;
+    $[4] = warning;
+  } else {
+    Icon = $[1];
+    destructive = $[2];
+    props = $[3];
+    warning = $[4];
+  }
+  const scheme = useScheme();
+  const t1 = useLargerText();
+  let t2;
+  if ($[5] !== t1) {
+    t2 = itemMetrics(t1);
+    $[5] = t1;
+    $[6] = t2;
+  } else {
+    t2 = $[6];
+  }
+  const metrics = t2;
+  const color = destructive ? palette.danger[scheme] : warning ? palette.warning[scheme] : palette.overlayForeground[scheme];
+  let t3;
+  if ($[7] !== Icon || $[8] !== color || $[9] !== metrics) {
+    t3 = Icon ? <Icon size={metrics.icon} color={color} /> : null;
+    $[7] = Icon;
+    $[8] = color;
+    $[9] = metrics;
+    $[10] = t3;
+  } else {
+    t3 = $[10];
+  }
+  let t4;
+  if ($[11] !== color || $[12] !== props || $[13] !== t3) {
+    t4 = <MenuRow part="DropdownMenuItem" itemRole="menuitem" color={color} paddingLeft={DROPDOWN_MENU.itemPaddingX} leading={t3} {...props} />;
+    $[11] = color;
+    $[12] = props;
+    $[13] = t3;
+    $[14] = t4;
+  } else {
+    t4 = $[14];
+  }
+  return t4;
+}
+/**
+ * One choice of a set (`radio`, reporting `checked`): the label inset `pl-8`
+ * with a 16 check at `left-2.5` when `checked`.
+ */
+export function DropdownMenuRadioItem(t0) {
+  const $ = _c(15);
+  let checked;
+  let props;
+  if ($[0] !== t0) {
+    ({
+      checked,
+      ...props
+    } = t0);
+    $[0] = t0;
+    $[1] = checked;
+    $[2] = props;
+  } else {
+    checked = $[1];
+    props = $[2];
+  }
+  const scheme = useScheme();
+  const t1 = useLargerText();
+  let t2;
+  if ($[3] !== t1) {
+    t2 = itemMetrics(t1);
+    $[3] = t1;
+    $[4] = t2;
+  } else {
+    t2 = $[4];
+  }
+  const metrics = t2;
+  const color = palette.overlayForeground[scheme];
+  const t3 = DROPDOWN_MENU.indicatorInset + (metrics.icon - 16);
+  let t4;
+  if ($[5] !== checked || $[6] !== color || $[7] !== metrics.icon) {
+    t4 = checked ? <View accessible={false} style={{
+      position: "absolute",
+      left: DROPDOWN_MENU.indicatorLeft,
+      top: 0,
+      bottom: 0,
+      justifyContent: "center"
+    }}><IconCheck size={metrics.icon} color={color} /></View> : null;
+    $[5] = checked;
+    $[6] = color;
+    $[7] = metrics.icon;
+    $[8] = t4;
+  } else {
+    t4 = $[8];
+  }
+  let t5;
+  if ($[9] !== checked || $[10] !== color || $[11] !== props || $[12] !== t3 || $[13] !== t4) {
+    t5 = <MenuRow part="DropdownMenuRadioItem" itemRole="radio" checked={checked} color={color} paddingLeft={t3} leading={t4} {...props} />;
+    $[9] = checked;
+    $[10] = color;
+    $[11] = props;
+    $[12] = t3;
+    $[13] = t4;
+    $[14] = t5;
+  } else {
+    t5 = $[14];
+  }
+  return t5;
+}
+/** A group heading: the web `text-xs font-semibold uppercase tracking-widest text-muted-foreground`, `px-2.5 py-1.5`. */
+export function DropdownMenuLabel(t0) {
+  const $ = _c(15);
+  const {
+    children,
+    className
+  } = t0;
+  const scheme = useScheme();
+  const t1 = useLargerText() ? "text-base" : "text-xs";
+  let t2;
+  if ($[0] !== t1) {
+    t2 = sizeStyle(t1);
+    $[0] = t1;
+    $[1] = t2;
+  } else {
+    t2 = $[1];
+  }
+  const text = t2;
+  let t3;
+  if ($[2] !== className) {
+    t3 = cn("font-instrument-sans-semibold uppercase", className);
+    $[2] = className;
+    $[3] = t3;
+  } else {
+    t3 = $[3];
+  }
+  let t4;
+  if ($[4] === Symbol.for("react.memo_cache_sentinel")) {
+    t4 = typeStyle("semibold");
+    $[4] = t4;
+  } else {
+    t4 = $[4];
+  }
+  const t5 = text.fontSize / 10;
+  const t6 = tokens.color.muted[scheme];
+  let t7;
+  if ($[5] !== t5 || $[6] !== t6) {
+    t7 = {
+      letterSpacing: t5,
+      color: t6,
+      paddingHorizontal: DROPDOWN_MENU.itemPaddingX,
+      paddingVertical: DROPDOWN_MENU.labelPaddingY
+    };
+    $[5] = t5;
+    $[6] = t6;
+    $[7] = t7;
+  } else {
+    t7 = $[7];
+  }
+  let t8;
+  if ($[8] !== t7 || $[9] !== text) {
+    t8 = [text, t4, t7];
+    $[8] = t7;
+    $[9] = text;
+    $[10] = t8;
+  } else {
+    t8 = $[10];
+  }
+  let t9;
+  if ($[11] !== children || $[12] !== t3 || $[13] !== t8) {
+    t9 = <Text accessibilityRole="header" className={t3} style={t8}>{children}</Text>;
+    $[11] = children;
+    $[12] = t3;
+    $[13] = t8;
+    $[14] = t9;
+  } else {
+    t9 = $[14];
+  }
+  return t9;
+}
+
+/** A 1-high `separator` line across the menu, `-mx-1.5 my-1`. */
+export function DropdownMenuSeparator() {
+  const $ = _c(2);
+  const scheme = useScheme();
+  const t0 = tokens.color.separator[scheme];
+  let t1;
+  if ($[0] !== t0) {
+    t1 = <View accessible={false} importantForAccessibility="no" style={{
+      height: 1,
+      marginHorizontal: -DROPDOWN_MENU.padding,
+      marginVertical: DROPDOWN_MENU.separatorMargin,
+      backgroundColor: t0
+    }} />;
+    $[0] = t0;
+    $[1] = t1;
+  } else {
+    t1 = $[1];
+  }
+  return t1;
+}