@nori-ui/core 1.2.0 → 1.4.0

package/dist/client.cjs

@@ -6611,6 +6611,417 @@ var Checkbox = /* @__PURE__ */ __name(({
     }
   );
 }, "Checkbox");
+var MenuContext = React.createContext(null);
+var MenuContextProvider = /* @__PURE__ */ __name(({
+  open,
+  toggle,
+  close,
+  children
+}) => /* @__PURE__ */ jsxRuntime.jsx(MenuContext.Provider, { value: { open, toggle: toggle ?? close, close }, children }), "MenuContextProvider");
+function useMenuContext(caller) {
+  const ctx = React.useContext(MenuContext);
+  if (!ctx) {
+    throw new Error(`<${caller}> must be rendered inside a <DropdownMenu> or <ContextMenu>.`);
+  }
+  return ctx;
+}
+__name(useMenuContext, "useMenuContext");
+var MenuContent = /* @__PURE__ */ __name(({
+  children,
+  className,
+  testID,
+  side = "bottom",
+  align = "start",
+  "aria-label": ariaLabel
+}) => {
+  const colors = useThemeColors();
+  const containerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    if (typeof document === "undefined") {
+      return;
+    }
+    const container = containerRef.current;
+    if (!container) {
+      return;
+    }
+    const getItems = /* @__PURE__ */ __name(() => Array.from(container.querySelectorAll('[role="menuitem"]:not([aria-disabled="true"])')), "getItems");
+    const onKeyDown = /* @__PURE__ */ __name((e) => {
+      const items = getItems();
+      if (items.length === 0) {
+        return;
+      }
+      const focused = document.activeElement;
+      const idx = focused ? items.indexOf(focused) : -1;
+      switch (e.key) {
+        case "ArrowDown":
+          e.preventDefault();
+          items[idx < items.length - 1 ? idx + 1 : 0]?.focus();
+          break;
+        case "ArrowUp":
+          e.preventDefault();
+          items[idx > 0 ? idx - 1 : items.length - 1]?.focus();
+          break;
+        case "Home":
+          e.preventDefault();
+          items[0]?.focus();
+          break;
+        case "End":
+          e.preventDefault();
+          items[items.length - 1]?.focus();
+          break;
+      }
+    }, "onKeyDown");
+    container.addEventListener("keydown", onKeyDown);
+    return () => container.removeEventListener("keydown", onKeyDown);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Content,
+    {
+      side,
+      align,
+      ...testID !== void 0 ? { testID } : {},
+      ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {},
+      ...className !== void 0 ? { className } : {},
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          ref: containerRef,
+          ...{
+            role: "menu",
+            ...ariaLabel !== void 0 ? { "aria-label": ariaLabel } : {}
+          },
+          style: {
+            minWidth: 160,
+            paddingVertical: px(colors.spacing["1"]),
+            margin: -px(colors.spacing["4"]),
+            borderRadius: px(colors.radius.lg),
+            overflow: "hidden"
+          },
+          children
+        }
+      )
+    }
+  );
+}, "MenuContent");
+MenuContent.displayName = "MenuContent";
+var MenuItem = /* @__PURE__ */ __name(({
+  onSelect,
+  disabled = false,
+  destructive = false,
+  icon,
+  shortcut,
+  children,
+  className,
+  testID
+}) => {
+  const colors = useThemeColors();
+  const menu = useMenuContext("MenuItem");
+  const handlePress = React.useCallback(() => {
+    if (disabled) {
+      return;
+    }
+    onSelect?.();
+    menu.close();
+  }, [disabled, onSelect, menu]);
+  const textColor = destructive ? colors.color.danger : disabled ? colors.semantic.text.muted : colors.semantic.text.default;
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      onPress: handlePress,
+      disabled,
+      ...{
+        role: "menuitem",
+        "aria-disabled": disabled ? "true" : void 0,
+        tabIndex: disabled ? -1 : 0,
+        onKeyDown: /* @__PURE__ */ __name((e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            handlePress();
+          }
+        }, "onKeyDown")
+      },
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-row items-center gap-2 px-3 py-2", className),
+      style: { opacity: disabled ? 0.4 : 1 },
+      accessibilityRole: "menuitem",
+      accessibilityState: { disabled },
+      children: [
+        icon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { width: 16, height: 16, alignItems: "center", justifyContent: "center" }, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              flex: 1,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              color: textColor
+            },
+            children
+          }
+        ),
+        shortcut !== void 0 && reactNative.Platform.OS === "web" && /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            ...{ "aria-hidden": "true" },
+            style: {
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.xs),
+              color: colors.semantic.text.muted
+            },
+            children: shortcut
+          }
+        )
+      ]
+    }
+  );
+}, "MenuItem");
+MenuItem.displayName = "MenuItem";
+var MenuSeparator = /* @__PURE__ */ __name(({ className, testID }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...{ role: "separator" },
+      accessibilityRole: "none",
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("mx-1 my-1", className),
+      style: {
+        height: 1,
+        marginVertical: 4,
+        marginHorizontal: 4,
+        backgroundColor: colors.semantic.border.default
+      }
+    }
+  );
+}, "MenuSeparator");
+MenuSeparator.displayName = "MenuSeparator";
+var MenuLabel = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...{ role: "presentation" },
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("px-3 pt-2 pb-1", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.xs),
+            color: colors.semantic.text.muted,
+            textTransform: "uppercase",
+            letterSpacing: 0.6,
+            fontWeight: "600"
+          },
+          children
+        }
+      )
+    }
+  );
+}, "MenuLabel");
+MenuLabel.displayName = "MenuLabel";
+var DropdownMenuRoot = /* @__PURE__ */ __name(({ open, defaultOpen = false, onOpenChange, children }) => {
+  const [inner, setInner] = React.useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const current = isControlled ? open : inner;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const toggle = React.useCallback(() => setOpen(!current), [setOpen, current]);
+  const close = React.useCallback(() => setOpen(false), [setOpen]);
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuContextProvider, { open: current, toggle, close, children: /* @__PURE__ */ jsxRuntime.jsx(Popover, { open: current, onOpenChange: setOpen, children }) });
+}, "DropdownMenuRoot");
+var DropdownMenuTrigger = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const menu = useMenuContext("DropdownMenu.Trigger");
+  const popover = usePopoverContext("DropdownMenu.Trigger");
+  const onPress = React.useCallback(() => {
+    popover.measureTrigger();
+    popover.setOpen(!popover.open);
+  }, [popover]);
+  if (React.isValidElement(children)) {
+    const child = children;
+    const fire = /* @__PURE__ */ __name((existing) => (event) => {
+      existing?.(event);
+      popover.measureTrigger();
+      popover.setOpen(!popover.open);
+    }, "fire");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        ref: (node) => {
+          popover.triggerRef.current = node;
+        },
+        onClick: fire(child.props.onClick),
+        onPress: fire(child.props.onPress),
+        ...{
+          "aria-haspopup": "menu",
+          "aria-expanded": menu.open,
+          "aria-controls": popover.contentId
+        },
+        ...testID !== void 0 ? { "data-testid": testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: child
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ref: (node) => {
+        popover.triggerRef.current = node;
+      },
+      onPress,
+      ...{
+        "aria-haspopup": "menu",
+        "aria-expanded": menu.open,
+        "aria-controls": popover.contentId
+      },
+      ...testID !== void 0 ? { testID } : {},
+      ...className !== void 0 ? { className } : {},
+      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children }) : children
+    }
+  );
+}, "DropdownMenuTrigger");
+var DropdownMenuContent = /* @__PURE__ */ __name((props) => /* @__PURE__ */ jsxRuntime.jsx(MenuContent, { ...props }), "DropdownMenuContent");
+var DropdownMenu = Object.assign(DropdownMenuRoot, {
+  Trigger: DropdownMenuTrigger,
+  Content: DropdownMenuContent,
+  Item: MenuItem,
+  Separator: MenuSeparator,
+  Label: MenuLabel
+});
+var ContextMenuCtx = React.createContext(null);
+var useContextMenuCtx = /* @__PURE__ */ __name(() => {
+  const ctx = React.useContext(ContextMenuCtx);
+  if (!ctx) {
+    throw new Error("ContextMenu compound parts must be rendered inside a <ContextMenu>.");
+  }
+  return ctx;
+}, "useContextMenuCtx");
+var ContextMenuRoot = /* @__PURE__ */ __name(({ open, defaultOpen = false, onOpenChange, children }) => {
+  const [inner, setInner] = React.useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const current = isControlled ? open : inner;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(ContextMenuCtx.Provider, { value: { open: current, setOpen }, children: /* @__PURE__ */ jsxRuntime.jsx(Popover, { open: current, onOpenChange: setOpen, children }) });
+}, "ContextMenuRoot");
+var ContextMenuTrigger = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useContextMenuCtx();
+  const popover = usePopoverContext("ContextMenu.Trigger");
+  const openMenu = React.useCallback(() => {
+    popover.measureTrigger();
+    ctx.setOpen(true);
+  }, [ctx, popover]);
+  if (reactNative.Platform.OS === "web") {
+    if (React.isValidElement(children)) {
+      const child = children;
+      const existing = child.props.onContextMenu;
+      return /* @__PURE__ */ jsxRuntime.jsx(
+        Slot,
+        {
+          ref: (node) => {
+            popover.triggerRef.current = node;
+          },
+          onContextMenu: (e) => {
+            e.preventDefault();
+            existing?.(e);
+            openMenu();
+          },
+          ...{
+            "aria-haspopup": "menu",
+            "aria-expanded": ctx.open,
+            "aria-controls": popover.contentId
+          },
+          ...testID !== void 0 ? { "data-testid": testID } : {},
+          ...className !== void 0 ? { className } : {},
+          children: child
+        }
+      );
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        ref: (node) => {
+          popover.triggerRef.current = node;
+        },
+        ...{
+          onContextMenu: /* @__PURE__ */ __name((e) => {
+            e.preventDefault();
+            openMenu();
+          }, "onContextMenu"),
+          "aria-haspopup": "menu",
+          "aria-expanded": ctx.open,
+          "aria-controls": popover.contentId
+        },
+        ...testID !== void 0 ? { testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children }) : children
+      }
+    );
+  }
+  if (React.isValidElement(children)) {
+    const child = children;
+    const existing = child.props.onLongPress;
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        ref: (node) => {
+          popover.triggerRef.current = node;
+        },
+        onLongPress: (e) => {
+          existing?.(e);
+          openMenu();
+        },
+        accessibilityRole: "button",
+        ...testID !== void 0 ? { testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: child
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ref: (node) => {
+        popover.triggerRef.current = node;
+      },
+      onLongPress: openMenu,
+      ...testID !== void 0 ? { testID } : {},
+      ...className !== void 0 ? { className } : {},
+      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children }) : children
+    }
+  );
+}, "ContextMenuTrigger");
+var ContextMenuContent = /* @__PURE__ */ __name((props) => {
+  const ctx = useContextMenuCtx();
+  const close = React.useCallback(() => ctx.setOpen(false), [ctx]);
+  return /* @__PURE__ */ jsxRuntime.jsx(MenuContextProvider, { open: ctx.open, close, children: /* @__PURE__ */ jsxRuntime.jsx(MenuContent, { ...props }) });
+}, "ContextMenuContent");
+var ContextMenu = Object.assign(ContextMenuRoot, {
+  Trigger: ContextMenuTrigger,
+  Content: ContextMenuContent,
+  Item: MenuItem,
+  Separator: MenuSeparator,
+  Label: MenuLabel
+});
 function formatDate(date$1, locale) {
   try {
     return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date$1.toDate(date.getLocalTimeZone()));
@@ -10254,25 +10665,455 @@ var Separator = /* @__PURE__ */ __name(({
     }
   );
 }, "Separator");
-var PULSE_DURATION_MS = 900;
-var PULSE_MIN = 0.55;
-var PULSE_MAX = 1;
-var Skeleton = /* @__PURE__ */ __name(({
-  width = "100%",
-  height = 16,
-  radius = 6,
-  static: isStatic = false,
-  className,
-  style,
-  testID
+var SIZE_PERCENT = {
+  sm: "25%",
+  md: "50%",
+  lg: "75%",
+  full: "100%"
+};
+var SheetContext = React.createContext(null);
+var useSheetContext = /* @__PURE__ */ __name((label) => {
+  const ctx = React.useContext(SheetContext);
+  if (!ctx) {
+    throw new Error(`<${label}> must be rendered inside a <Sheet>.`);
+  }
+  return ctx;
+}, "useSheetContext");
+var SheetRoot = /* @__PURE__ */ __name(({
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  side = "bottom",
+  size = "md",
+  dismissible = true,
+  children
 }) => {
-  const colors = useThemeColors();
-  const isDark = useColorScheme() === "dark";
-  const opacity = React.useRef(new reactNative.Animated.Value(PULSE_MAX)).current;
-  React.useEffect(() => {
-    if (isStatic) {
-      return;
-    }
+  const [inner, setInner] = React.useState(defaultOpen);
+  const isControlled = open !== void 0;
+  const current = isControlled ? open : inner;
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const baseId = React.useId();
+  const triggerRef = React.useRef(null);
+  const ctxValue = {
+    open: current,
+    setOpen,
+    titleId: `${baseId}-title`,
+    descriptionId: `${baseId}-description`,
+    triggerRef,
+    side,
+    size,
+    dismissible
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(SheetContext.Provider, { value: ctxValue, children });
+}, "SheetRoot");
+var SheetTrigger = /* @__PURE__ */ __name(({ asChild = true, children, className, testID }) => {
+  const ctx = useSheetContext("SheetTrigger");
+  const onPress = React.useCallback(() => ctx.setOpen(true), [ctx]);
+  if (asChild && React.isValidElement(children)) {
+    const child = children;
+    const fire = /* @__PURE__ */ __name((existing) => (event) => {
+      existing?.(event);
+      ctx.setOpen(true);
+    }, "fire");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        ref: (node) => {
+          ctx.triggerRef.current = node;
+        },
+        onClick: fire(child.props.onClick),
+        onPress: fire(child.props.onPress),
+        ...testID !== void 0 ? { "data-testid": testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: child
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      ref: (node) => {
+        ctx.triggerRef.current = node;
+      },
+      onPress,
+      ...testID !== void 0 ? { testID } : {},
+      ...className !== void 0 ? { className } : {},
+      children: wrapStringChildren5(children)
+    }
+  );
+}, "SheetTrigger");
+var SheetHeader = /* @__PURE__ */ __name(({ children, className }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      className: cn("flex-col gap-1", className),
+      style: {
+        flexDirection: "column",
+        gap: px(colors.spacing["1"]),
+        paddingHorizontal: px(colors.spacing["6"]),
+        paddingTop: px(colors.spacing["6"]),
+        paddingBottom: px(colors.spacing["2"])
+      },
+      children
+    }
+  );
+}, "SheetHeader");
+var SheetTitle = /* @__PURE__ */ __name(({ children, className }) => {
+  const ctx = useSheetContext("SheetTitle");
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      nativeID: ctx.titleId,
+      id: ctx.titleId,
+      role: "heading",
+      "aria-level": 2,
+      className: cn("text-lg font-semibold text-semantic-text-default", className),
+      style: {
+        color: colors.semantic.text.default,
+        fontFamily: colors.fontFamily.display,
+        fontSize: px(colors.fontSize.lg),
+        fontWeight: colors.fontWeight.semibold
+      },
+      children
+    }
+  );
+}, "SheetTitle");
+var SheetDescription = /* @__PURE__ */ __name(({ children, className }) => {
+  const ctx = useSheetContext("SheetDescription");
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      nativeID: ctx.descriptionId,
+      id: ctx.descriptionId,
+      className: cn("text-sm text-semantic-text-muted", className),
+      style: {
+        color: colors.semantic.text.muted,
+        fontFamily: colors.fontFamily.body,
+        fontSize: px(colors.fontSize.sm),
+        lineHeight: px(colors.fontSize.sm) * Number(colors.lineHeight.normal)
+      },
+      children
+    }
+  );
+}, "SheetDescription");
+var SheetBody = /* @__PURE__ */ __name(({ children, className }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      className: cn("flex-1", className),
+      style: {
+        flex: 1,
+        paddingHorizontal: px(colors.spacing["6"]),
+        paddingVertical: px(colors.spacing["4"])
+      },
+      children
+    }
+  );
+}, "SheetBody");
+var SheetFooter = /* @__PURE__ */ __name(({ children, className }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      className: cn("flex-row items-center justify-end gap-2", className),
+      style: {
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: px(colors.spacing["2"]),
+        paddingHorizontal: px(colors.spacing["6"]),
+        paddingBottom: px(colors.spacing["6"]),
+        paddingTop: px(colors.spacing["2"])
+      },
+      children
+    }
+  );
+}, "SheetFooter");
+var SheetClose = /* @__PURE__ */ __name(({
+  asChild = true,
+  children,
+  className,
+  testID,
+  accessibilityLabel = "Close"
+}) => {
+  const ctx = useSheetContext("SheetClose");
+  const onPress = React.useCallback(() => ctx.setOpen(false), [ctx]);
+  if (asChild && React.isValidElement(children)) {
+    const child = children;
+    const fire = /* @__PURE__ */ __name((existing) => (event) => {
+      existing?.(event);
+      ctx.setOpen(false);
+    }, "fire");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        onClick: fire(child.props.onClick),
+        onPress: fire(child.props.onPress),
+        ...testID !== void 0 ? { "data-testid": testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: child
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      onPress,
+      role: "button",
+      accessibilityRole: "button",
+      accessibilityLabel,
+      "aria-label": accessibilityLabel,
+      ...testID !== void 0 ? { testID } : {},
+      ...className !== void 0 ? { className } : {},
+      children: wrapStringChildren5(children)
+    }
+  );
+}, "SheetClose");
+function wrapStringChildren5(children) {
+  if (typeof children === "string" || typeof children === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children });
+  }
+  return children;
+}
+__name(wrapStringChildren5, "wrapStringChildren");
+var SCRIM_COLOR3 = "rgba(0, 0, 0, 0.40)";
+var FOCUSABLE_SELECTOR3 = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var SheetPanel = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useSheetContext("SheetPanel");
+  const colors = useThemeColors();
+  const panelRef = React.useRef(null);
+  const overlayDomRef = React.useRef(null);
+  const [entered, setEntered] = React.useState(false);
+  React.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      setEntered(true);
+      return;
+    }
+    if (!ctx.open) {
+      setEntered(false);
+      return;
+    }
+    const id = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(id);
+  }, [ctx.open]);
+  React.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    const node = overlayDomRef.current;
+    if (!node) {
+      return;
+    }
+    node.style.transitionProperty = "background-color";
+    node.style.transitionDuration = "200ms";
+    node.style.transitionTimingFunction = "ease-out";
+    node.style.backgroundColor = entered ? SCRIM_COLOR3 : "rgba(0,0,0,0)";
+  }, [entered]);
+  React.useEffect(() => {
+    if (!ctx.open || reactNative.Platform.OS !== "web" || typeof document === "undefined") {
+      return;
+    }
+    const previouslyFocused = document.activeElement;
+    const prevBodyOverflow = document.body.style.overflow;
+    document.body.style.overflow = "hidden";
+    const focusFirst = /* @__PURE__ */ __name(() => {
+      const node = panelRef.current;
+      if (!node) {
+        return;
+      }
+      const focusable = node.querySelectorAll(FOCUSABLE_SELECTOR3);
+      const first = focusable[0];
+      if (first) {
+        first.focus();
+      } else {
+        node.setAttribute("tabindex", "-1");
+        node.focus();
+      }
+    }, "focusFirst");
+    focusFirst();
+    const onKeyDown = /* @__PURE__ */ __name((event) => {
+      if (event.key === "Escape") {
+        event.preventDefault();
+        ctx.setOpen(false);
+        return;
+      }
+      if (event.key !== "Tab") {
+        return;
+      }
+      const node = panelRef.current;
+      if (!node) {
+        return;
+      }
+      const focusable = Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR3)).filter(
+        (el) => el.offsetParent !== null || el === document.activeElement
+      );
+      if (focusable.length === 0) {
+        event.preventDefault();
+        return;
+      }
+      const first = focusable[0];
+      const last = focusable[focusable.length - 1];
+      if (!first || !last) {
+        return;
+      }
+      if (event.shiftKey) {
+        if (document.activeElement === first || !node.contains(document.activeElement)) {
+          event.preventDefault();
+          last.focus();
+        }
+      } else if (document.activeElement === last) {
+        event.preventDefault();
+        first.focus();
+      }
+    }, "onKeyDown");
+    document.addEventListener("keydown", onKeyDown);
+    return () => {
+      document.removeEventListener("keydown", onKeyDown);
+      document.body.style.overflow = prevBodyOverflow;
+      const restoreTo = ctx.triggerRef.current ?? previouslyFocused;
+      restoreTo?.focus?.();
+    };
+  }, [ctx.open, ctx.setOpen, ctx.triggerRef]);
+  const onBackdropPress = React.useCallback(() => {
+    if (ctx.dismissible) {
+      ctx.setOpen(false);
+    }
+  }, [ctx]);
+  const isHorizontal = ctx.side === "left" || ctx.side === "right";
+  const dim = typeof ctx.size === "number" ? ctx.size : SIZE_PERCENT[ctx.size];
+  const panelStyle = {
+    position: "absolute",
+    backgroundColor: colors.semantic.background.elevated,
+    ...isHorizontal ? { top: 0, bottom: 0 } : { left: 0, right: 0 },
+    ...ctx.side === "bottom" && { bottom: 0 },
+    ...ctx.side === "top" && { top: 0 },
+    ...ctx.side === "left" && { left: 0 },
+    ...ctx.side === "right" && { right: 0 }
+  };
+  const translateStyle = reactNative.Platform.OS === "web" ? {
+    transform: entered ? "translateX(0) translateY(0)" : translateOffscreen(ctx.side),
+    transitionProperty: "transform",
+    transitionDuration: "280ms",
+    transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)"
+  } : {};
+  const overlayStyle = {
+    position: reactNative.Platform.OS === "web" ? "fixed" : "absolute",
+    top: 0,
+    left: 0,
+    right: 0,
+    bottom: 0,
+    ...reactNative.Platform.OS === "web" ? { zIndex: 50 } : { backgroundColor: SCRIM_COLOR3 }
+  };
+  const sizeStyle = isHorizontal ? { width: dim, height: "100%" } : { height: dim, width: "100%" };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Modal,
+    {
+      visible: ctx.open,
+      transparent: true,
+      animationType: reactNative.Platform.OS === "web" ? "none" : ctx.side === "bottom" || ctx.side === "top" ? "slide" : "fade",
+      onRequestClose: () => ctx.setOpen(false),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Pressable,
+        {
+          accessibilityRole: "none",
+          "aria-hidden": true,
+          ref: (node) => {
+            overlayDomRef.current = node;
+          },
+          style: overlayStyle,
+          onPress: onBackdropPress,
+          children: /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.Pressable,
+            {
+              onPress: (event) => event.stopPropagation?.(),
+              ref: (node) => {
+                panelRef.current = node;
+              },
+              role: "dialog",
+              accessibilityRole: "none",
+              "aria-modal": true,
+              "aria-labelledby": ctx.titleId,
+              "aria-describedby": ctx.descriptionId,
+              "data-side": ctx.side,
+              ...testID !== void 0 ? { testID } : {},
+              className: cn("bg-semantic-background-elevated", className),
+              style: [
+                panelStyle,
+                sizeStyle,
+                translateStyle,
+                {
+                  shadowColor: "#000",
+                  shadowOffset: { width: 0, height: -2 },
+                  shadowOpacity: 0.15,
+                  shadowRadius: 20,
+                  elevation: 24,
+                  ...ctx.side === "bottom" ? { borderTopLeftRadius: 16, borderTopRightRadius: 16 } : {},
+                  ...ctx.side === "top" ? { borderBottomLeftRadius: 16, borderBottomRightRadius: 16 } : {}
+                }
+              ],
+              children
+            }
+          )
+        }
+      )
+    }
+  );
+}, "SheetPanel");
+var Sheet = Object.assign(SheetRoot, {
+  Trigger: SheetTrigger,
+  Panel: SheetPanel,
+  Header: SheetHeader,
+  Title: SheetTitle,
+  Description: SheetDescription,
+  Body: SheetBody,
+  Footer: SheetFooter,
+  Close: SheetClose
+});
+var Drawer = Sheet;
+function translateOffscreen(side) {
+  switch (side) {
+    case "bottom":
+      return "translateY(100%)";
+    case "top":
+      return "translateY(-100%)";
+    case "left":
+      return "translateX(-100%)";
+    case "right":
+      return "translateX(100%)";
+  }
+}
+__name(translateOffscreen, "translateOffscreen");
+var PULSE_DURATION_MS = 900;
+var PULSE_MIN = 0.55;
+var PULSE_MAX = 1;
+var Skeleton = /* @__PURE__ */ __name(({
+  width = "100%",
+  height = 16,
+  radius = 6,
+  static: isStatic = false,
+  className,
+  style,
+  testID
+}) => {
+  const colors = useThemeColors();
+  const isDark = useColorScheme() === "dark";
+  const opacity = React.useRef(new reactNative.Animated.Value(PULSE_MAX)).current;
+  React.useEffect(() => {
+    if (isStatic) {
+      return;
+    }
     const loop = reactNative.Animated.loop(
       reactNative.Animated.sequence([
         reactNative.Animated.timing(opacity, {
@@ -12167,17 +13008,17 @@ var TooltipTrigger = /* @__PURE__ */ __name(({ asChild = true, children, classNa
       },
       ...testID !== void 0 ? { testID } : {},
       ...className !== void 0 ? { className } : {},
-      children: wrapStringChildren5(children)
+      children: wrapStringChildren6(children)
     }
   );
 }, "TooltipTrigger");
-function wrapStringChildren5(children) {
+function wrapStringChildren6(children) {
   if (typeof children === "string" || typeof children === "number") {
     return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children });
   }
   return children;
 }
-__name(wrapStringChildren5, "wrapStringChildren");
+__name(wrapStringChildren6, "wrapStringChildren");
 var GAP2 = 4;
 var MIN_WIDTH2 = 0;
 function computePosition2(rect, side, align, contentSize) {
@@ -12619,8 +13460,11 @@ exports.Button = Button;
 exports.Calendar = Calendar;
 exports.Card = Card;
 exports.Checkbox = Checkbox;
+exports.ContextMenu = ContextMenu;
 exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
+exports.Drawer = Drawer;
+exports.DropdownMenu = DropdownMenu;
 exports.Field = Field;
 exports.FloatButton = FloatButton;
 exports.HStack = HStack;
@@ -12629,6 +13473,10 @@ exports.Icon = Icon;
 exports.InputGroup = InputGroup;
 exports.Label = Label;
 exports.LocaleProvider = LocaleProvider;
+exports.MenuContent = MenuContent;
+exports.MenuItem = MenuItem;
+exports.MenuLabel = MenuLabel;
+exports.MenuSeparator = MenuSeparator;
 exports.NoriProvider = NoriProvider;
 exports.PAGINATION_COMPACT_BREAKPOINT = PAGINATION_COMPACT_BREAKPOINT;
 exports.Pagination = Pagination;
@@ -12639,6 +13487,15 @@ exports.SegmentedControl = SegmentedControl;
 exports.Select = Select;
 exports.SemanticIconsProvider = SemanticIconsProvider;
 exports.Separator = Separator;
+exports.Sheet = Sheet;
+exports.SheetBody = SheetBody;
+exports.SheetClose = SheetClose;
+exports.SheetDescription = SheetDescription;
+exports.SheetFooter = SheetFooter;
+exports.SheetHeader = SheetHeader;
+exports.SheetPanel = SheetPanel;
+exports.SheetTitle = SheetTitle;
+exports.SheetTrigger = SheetTrigger;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.SliderGestureProvider = SliderGestureProvider;
@@ -12675,6 +13532,7 @@ exports.useCalendarCaption = useCalendarCaption;
 exports.useColorScheme = useColorScheme;
 exports.useLocale = useLocale;
 exports.usePagination = usePagination;
+exports.usePopoverContext = usePopoverContext;
 exports.useSemanticIcon = useSemanticIcon;
 exports.useSliderInteractionActive = useSliderInteractionActive;
 exports.useTheme = useTheme;