@nori-ui/core 1.7.0 → 1.9.0

package/dist/index.cjs

@@ -6489,6 +6489,254 @@ var Card = Object.assign(CardRoot, {
   Content: CardContent,
   Footer: CardFooter
 });
+var CarouselContext = React.createContext(null);
+function useCarouselContext(caller) {
+  const ctx = React.useContext(CarouselContext);
+  if (!ctx) {
+    throw new Error(`<${caller}> must be rendered inside <Carousel>.`);
+  }
+  return ctx;
+}
+__name(useCarouselContext, "useCarouselContext");
+var CarouselRoot = /* @__PURE__ */ __name(({
+  index: controlledIndex,
+  defaultIndex = 0,
+  onIndexChange,
+  loop = false,
+  orientation = "horizontal",
+  children,
+  className,
+  testID
+}) => {
+  const [inner, setInner] = React.useState(defaultIndex);
+  const isControlled = controlledIndex !== void 0;
+  const index = isControlled ? controlledIndex : inner;
+  const [count, setCount] = React.useState(0);
+  const listRef = React.useRef(null);
+  const id = React.useId();
+  const setIndex = React.useCallback(
+    (next2) => {
+      if (!isControlled) {
+        setInner(next2);
+      }
+      onIndexChange?.(next2);
+    },
+    [isControlled, onIndexChange]
+  );
+  const scrollTo = React.useCallback(
+    (idx) => {
+      const list = listRef.current;
+      if (!list) {
+        return;
+      }
+      const item = list.children[idx];
+      if (!item) {
+        return;
+      }
+      item.scrollIntoView({ behavior: "smooth", block: "nearest", inline: "nearest" });
+      setIndex(idx);
+    },
+    [setIndex]
+  );
+  const next = React.useCallback(() => {
+    if (count === 0) {
+      return;
+    }
+    if (index < count - 1) {
+      scrollTo(index + 1);
+    } else if (loop) {
+      scrollTo(0);
+    }
+  }, [index, count, loop, scrollTo]);
+  const prev = React.useCallback(() => {
+    if (count === 0) {
+      return;
+    }
+    if (index > 0) {
+      scrollTo(index - 1);
+    } else if (loop) {
+      scrollTo(count - 1);
+    }
+  }, [index, count, loop, scrollTo]);
+  React.useEffect(() => {
+    const list = listRef.current;
+    if (!list) {
+      return;
+    }
+    const handleScroll = /* @__PURE__ */ __name(() => {
+      const { scrollLeft, scrollTop, offsetWidth, offsetHeight } = list;
+      const pos = orientation === "horizontal" ? scrollLeft : scrollTop;
+      const size = orientation === "horizontal" ? offsetWidth : offsetHeight;
+      if (size === 0) {
+        return;
+      }
+      const newIdx = Math.round(pos / size);
+      if (newIdx !== index) {
+        setIndex(newIdx);
+      }
+    }, "handleScroll");
+    list.addEventListener("scroll", handleScroll, { passive: true });
+    return () => list.removeEventListener("scroll", handleScroll);
+  }, [orientation, index, setIndex]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    CarouselContext.Provider,
+    {
+      value: { index, count, loop, orientation, scrollTo, next, prev, listRef, setCount, id },
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "section",
+        {
+          "aria-label": testID ?? "Carousel",
+          className: cn("relative overflow-hidden", className),
+          "data-testid": testID,
+          children
+        }
+      )
+    }
+  );
+}, "CarouselRoot");
+var CarouselContent = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useCarouselContext("Carousel.Content");
+  const childCount = React.Children.count(children);
+  React.useEffect(() => {
+    ctx.setCount(childCount);
+  }, [childCount, ctx.setCount]);
+  const isHorizontal = ctx.orientation === "horizontal";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      ref: ctx.listRef,
+      "data-testid": testID,
+      className: cn(
+        "flex",
+        isHorizontal ? "flex-row overflow-x-auto overflow-y-hidden" : "flex-col overflow-y-auto overflow-x-hidden",
+        className
+      ),
+      style: {
+        scrollSnapType: isHorizontal ? "x mandatory" : "y mandatory",
+        scrollBehavior: "smooth",
+        WebkitOverflowScrolling: "touch",
+        // Hide scrollbar
+        scrollbarWidth: "none",
+        msOverflowStyle: "none"
+      },
+      children
+    }
+  );
+}, "CarouselContent");
+var CarouselItem = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useCarouselContext("Carousel.Item");
+  const isHorizontal = ctx.orientation === "horizontal";
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      "data-testid": testID,
+      className: cn("shrink-0", isHorizontal ? "w-full" : "h-full", className),
+      style: {
+        scrollSnapAlign: "start",
+        minWidth: isHorizontal ? "100%" : void 0,
+        minHeight: !isHorizontal ? "100%" : void 0
+      },
+      children
+    }
+  );
+}, "CarouselItem");
+var CarouselPrevious = /* @__PURE__ */ __name(({ className, testID, children }) => {
+  const ctx = useCarouselContext("Carousel.Previous");
+  const disabled = !ctx.loop && ctx.index === 0;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Previous slide",
+      disabled,
+      "data-testid": testID,
+      onClick: ctx.prev,
+      className: cn(
+        "absolute left-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-white/80 shadow hover:bg-white disabled:opacity-40",
+        className
+      ),
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          className: "h-4 w-4",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M15 18l-6-6 6-6", strokeLinecap: "round", strokeLinejoin: "round" })
+        }
+      )
+    }
+  );
+}, "CarouselPrevious");
+var CarouselNext = /* @__PURE__ */ __name(({ className, testID, children }) => {
+  const ctx = useCarouselContext("Carousel.Next");
+  const disabled = !ctx.loop && ctx.index >= ctx.count - 1;
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "button",
+    {
+      type: "button",
+      "aria-label": "Next slide",
+      disabled,
+      "data-testid": testID,
+      onClick: ctx.next,
+      className: cn(
+        "absolute right-2 top-1/2 z-10 flex h-8 w-8 -translate-y-1/2 items-center justify-center rounded-full bg-white/80 shadow hover:bg-white disabled:opacity-40",
+        className
+      ),
+      children: children ?? /* @__PURE__ */ jsxRuntime.jsx(
+        "svg",
+        {
+          viewBox: "0 0 24 24",
+          fill: "none",
+          stroke: "currentColor",
+          strokeWidth: 2,
+          className: "h-4 w-4",
+          "aria-hidden": "true",
+          children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M9 18l6-6-6-6", strokeLinecap: "round", strokeLinejoin: "round" })
+        }
+      )
+    }
+  );
+}, "CarouselNext");
+var CarouselDots = /* @__PURE__ */ __name(({ className, testID }) => {
+  const ctx = useCarouselContext("Carousel.Dots");
+  if (ctx.count === 0) {
+    return null;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "div",
+    {
+      role: "tablist",
+      "aria-label": "Slide navigation",
+      "data-testid": testID,
+      className: cn("absolute bottom-3 left-0 right-0 flex items-center justify-center gap-1.5", className),
+      children: Array.from({ length: ctx.count }, (_, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        "button",
+        {
+          type: "button",
+          role: "tab",
+          "aria-selected": i === ctx.index,
+          "aria-label": `Go to slide ${i + 1}`,
+          onClick: () => ctx.scrollTo(i),
+          className: cn(
+            "h-1.5 w-1.5 rounded-full transition-all",
+            i === ctx.index ? "w-3 bg-white" : "bg-white/50 hover:bg-white/75"
+          )
+        },
+        i
+      ))
+    }
+  );
+}, "CarouselDots");
+var Carousel = Object.assign(CarouselRoot, {
+  Content: CarouselContent,
+  Item: CarouselItem,
+  Previous: CarouselPrevious,
+  Next: CarouselNext,
+  Dots: CarouselDots
+});
 var SemanticIconsContext = React.createContext(defaultSemanticIcons);
 SemanticIconsContext.displayName = "SemanticIconsContext";
 
@@ -6822,1198 +7070,1198 @@ var Collapsible = Object.assign(CollapsibleRoot, {
 var Combobox = /* @__PURE__ */ __name((props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Select, { searchable: true, ...props });
 }, "Combobox");
-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);
+var DialogContext = React.createContext(null);
+var useDialogContext = /* @__PURE__ */ __name((label) => {
+  const ctx = React.useContext(DialogContext);
   if (!ctx) {
-    throw new Error(`<${caller}> must be rendered inside a <DropdownMenu> or <ContextMenu>.`);
+    throw new Error(`<${label}> must be rendered inside a <Dialog>.`);
   }
   return ctx;
+}, "useDialogContext");
+var DialogRoot = /* @__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 baseId = React.useId();
+  const triggerRef = React.useRef(null);
+  const ctxValue = {
+    open: current,
+    setOpen,
+    titleId: `${baseId}-title`,
+    descriptionId: `${baseId}-description`,
+    triggerRef
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: ctxValue, children });
+}, "DialogRoot");
+var DialogTrigger = /* @__PURE__ */ __name(({ asChild = true, children, className, testID }) => {
+  const ctx = useDialogContext("DialogTrigger");
+  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: wrapStringChildren4(children)
+    }
+  );
+}, "DialogTrigger");
+function wrapStringChildren4(children) {
+  if (typeof children === "string" || typeof children === "number") {
+    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children });
+  }
+  return children;
 }
-__name(useMenuContext, "useMenuContext");
-var MenuContent = /* @__PURE__ */ __name(({
-  children,
-  className,
-  testID,
-  side = "bottom",
-  align = "start",
-  "aria-label": ariaLabel
-}) => {
+__name(wrapStringChildren4, "wrapStringChildren");
+var SCRIM_COLOR2 = "rgba(0, 0, 0, 0.24)";
+var BLUR_AMOUNT2 = 4;
+var OVERLAY_LAYOUT_BASE2 = {
+  position: reactNative.Platform.OS === "web" ? "fixed" : "absolute",
+  top: 0,
+  left: 0,
+  right: 0,
+  bottom: 0,
+  alignItems: "center",
+  justifyContent: "center",
+  // On native the BlurBackdrop sibling renders BEHIND this overlay and
+  // already provides dim + frosted-glass via expo-blur's `tint`/`intensity`.
+  // Painting SCRIM_COLOR on top would mask the blur entirely (the user
+  // sees only a flat tint), so the overlay stays transparent and the
+  // BlurView is the dominant visual on native.
+  ...reactNative.Platform.OS === "web" ? { zIndex: 50 } : { backgroundColor: "transparent" }
+};
+var CONTENT_LAYOUT_BASE3 = {
+  width: "100%",
+  maxWidth: 480,
+  // component-density literal — not from theme
+  ...reactNative.Platform.OS === "web" ? {
+    boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
+  } : { elevation: 24 }
+};
+var FOCUSABLE_SELECTOR2 = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
+var DialogContent = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useDialogContext("DialogContent");
   const colors = useThemeColors();
-  const containerRef = React.useRef(null);
+  const scheme = useColorScheme();
+  const contentRef = React.useRef(null);
+  const overlayStyle = {
+    ...OVERLAY_LAYOUT_BASE2,
+    padding: px(colors.spacing["4"])
+  };
+  const contentStyle = {
+    ...CONTENT_LAYOUT_BASE3,
+    borderRadius: px(colors.radius.xl),
+    padding: px(colors.spacing["6"]),
+    gap: px(colors.spacing["3"])
+  };
+  const [entered, setEntered] = React.useState(false);
   React.useEffect(() => {
     if (reactNative.Platform.OS !== "web") {
+      setEntered(true);
       return;
     }
-    if (typeof document === "undefined") {
+    if (!ctx.open) {
+      setEntered(false);
       return;
     }
-    const container = containerRef.current;
-    if (!container) {
+    const id = requestAnimationFrame(() => setEntered(true));
+    return () => cancelAnimationFrame(id);
+  }, [ctx.open]);
+  const enterStyle = reactNative.Platform.OS === "web" ? {
+    opacity: entered ? 1 : 0,
+    transform: [{ scale: entered ? 1 : 0.96 }],
+    transitionProperty: "opacity, transform",
+    transitionDuration: "150ms",
+    transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)"
+  } : {};
+  const overlayDomRef = React.useRef(null);
+  React.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
       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
-        }
-      )
+    const node = overlayDomRef.current;
+    if (!node) {
+      return;
     }
-  );
-}, "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) {
+    node.style.transitionProperty = "background-color, backdrop-filter, -webkit-backdrop-filter";
+    node.style.transitionDuration = "150ms, 200ms, 200ms";
+    node.style.transitionTimingFunction = "ease-out";
+    if (entered) {
+      node.style.backgroundColor = SCRIM_COLOR2;
+      node.style.backdropFilter = `blur(${BLUR_AMOUNT2}px)`;
+      node.style.setProperty("-webkit-backdrop-filter", `blur(${BLUR_AMOUNT2}px)`);
+    } else {
+      node.style.backgroundColor = "rgba(0, 0, 0, 0)";
+      node.style.backdropFilter = "blur(0px)";
+      node.style.setProperty("-webkit-backdrop-filter", "blur(0px)");
+    }
+  }, [entered]);
+  React.useEffect(() => {
+    if (!ctx.open) {
       return;
     }
-    onSelect?.();
-    menu.close();
-  }, [disabled, onSelect, menu]);
-  const textColor = destructive ? colors.color.danger : disabled ? colors.semantic.text.muted : colors.semantic.text.default;
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    if (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 = contentRef.current;
+      if (!node) {
+        return;
+      }
+      const focusable = node.querySelectorAll(FOCUSABLE_SELECTOR2);
+      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 = contentRef.current;
+      if (!node) {
+        return;
+      }
+      const focusable = Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR2)).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 onOverlayPress = React.useCallback(() => ctx.setOpen(false), [ctx]);
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactNative.Pressable,
+    reactNative.Modal,
     {
-      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 },
+      visible: ctx.open,
+      transparent: true,
+      animationType: reactNative.Platform.OS === "web" ? "none" : "fade",
+      onRequestClose: () => ctx.setOpen(false),
       children: [
-        icon !== void 0 && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { width: 16, height: 16, alignItems: "center", justifyContent: "center" }, children: icon }),
+        /* @__PURE__ */ jsxRuntime.jsx(BlurBackdrop, { intensity: 60, tint: scheme === "dark" ? "dark" : "light", style: reactNative.StyleSheet.absoluteFill }),
         /* @__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,
+          reactNative.Pressable,
           {
-            ...{ "aria-hidden": "true" },
-            style: {
-              fontFamily: colors.fontFamily.body,
-              fontSize: px(colors.fontSize.xs),
-              color: colors.semantic.text.muted
+            accessibilityRole: "none",
+            "aria-hidden": true,
+            ref: (node) => {
+              overlayDomRef.current = node;
             },
-            children: shortcut
+            style: overlayStyle,
+            onPress: onOverlayPress,
+            children: /* @__PURE__ */ jsxRuntime.jsx(
+              reactNative.Pressable,
+              {
+                onPress: (event) => event.stopPropagation?.(),
+                ref: (node) => {
+                  contentRef.current = node;
+                },
+                role: "dialog",
+                accessibilityRole: "none",
+                "aria-modal": true,
+                "aria-labelledby": ctx.titleId,
+                "aria-describedby": ctx.descriptionId,
+                ...testID !== void 0 ? { testID } : {},
+                className: cn("w-full max-w-md rounded-xl bg-semantic-background-elevated p-6 gap-3", className),
+                style: [contentStyle, { backgroundColor: colors.semantic.background.elevated }, enterStyle],
+                children: /* @__PURE__ */ jsxRuntime.jsx(
+                  reactNative.View,
+                  {
+                    className: "flex-col gap-1.5",
+                    style: { flexDirection: "column", gap: px(colors.spacing["2"]) - 2 },
+                    children
+                  }
+                )
+              }
+            )
           }
         )
       ]
     }
   );
-}, "MenuItem");
-MenuItem.displayName = "MenuItem";
-var MenuSeparator = /* @__PURE__ */ __name(({ className, testID }) => {
+}, "DialogContent");
+var DialogTitle = /* @__PURE__ */ __name(({ children, className }) => {
+  const ctx = useDialogContext("DialogTitle");
   const colors = useThemeColors();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.View,
+    reactNative.Text,
     {
-      ...{ role: "separator" },
-      accessibilityRole: "none",
-      ...testID !== void 0 ? { testID } : {},
-      className: cn("mx-1 my-1", className),
+      nativeID: ctx.titleId,
+      id: ctx.titleId,
+      role: "heading",
+      "aria-level": 2,
+      className: cn("text-lg font-semibold text-semantic-text-default", className),
       style: {
-        height: 1,
-        marginVertical: 4,
-        marginHorizontal: 4,
-        backgroundColor: colors.semantic.border.default
-      }
-    }
-  );
-}, "MenuSeparator");
-MenuSeparator.displayName = "MenuSeparator";
-var MenuLabel = /* @__PURE__ */ __name(({ children, className, testID }) => {
+        color: colors.semantic.text.default,
+        fontFamily: colors.fontFamily.display,
+        fontSize: px(colors.fontSize.lg),
+        fontWeight: colors.fontWeight.semibold
+      },
+      children
+    }
+  );
+}, "DialogTitle");
+var DialogDescription = /* @__PURE__ */ __name(({ children, className }) => {
+  const ctx = useDialogContext("DialogDescription");
   const colors = useThemeColors();
   return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.View,
+    reactNative.Text,
     {
-      ...{ 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
-        }
-      )
+      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
     }
   );
-}, "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)) {
+}, "DialogDescription");
+var DialogClose = /* @__PURE__ */ __name(({
+  asChild = true,
+  children,
+  className,
+  testID,
+  accessibilityLabel = "Close"
+}) => {
+  const ctx = useDialogContext("DialogClose");
+  const colors = useThemeColors();
+  const onPress = React.useCallback(() => ctx.setOpen(false), [ctx]);
+  if (asChild && React.isValidElement(children)) {
     const child = children;
     const fire = /* @__PURE__ */ __name((existing) => (event) => {
       existing?.(event);
-      popover.measureTrigger();
-      popover.setOpen(!popover.open);
+      ctx.setOpen(false);
     }, "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
       }
     );
   }
+  if (children !== void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        onPress,
+        role: "button",
+        accessibilityRole: "button",
+        accessibilityLabel,
+        "aria-label": accessibilityLabel,
+        ...testID !== void 0 ? { testID } : {},
+        ...className !== void 0 ? { className } : {},
+        children: wrapStringChildren4(children)
+      }
+    );
+  }
   return /* @__PURE__ */ jsxRuntime.jsx(
     reactNative.Pressable,
     {
-      ref: (node) => {
-        popover.triggerRef.current = node;
-      },
       onPress,
-      ...{
-        "aria-haspopup": "menu",
-        "aria-expanded": menu.open,
-        "aria-controls": popover.contentId
-      },
+      role: "button",
+      accessibilityRole: "button",
+      accessibilityLabel,
+      "aria-label": accessibilityLabel,
       ...testID !== void 0 ? { testID } : {},
-      ...className !== void 0 ? { className } : {},
-      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children }) : children
+      className: cn("absolute right-3 top-3 w-8 h-8 items-center justify-center rounded-md", className),
+      style: {
+        position: "absolute",
+        right: px(colors.spacing["3"]),
+        top: px(colors.spacing["3"]),
+        // 32×32 close hit target — component-density literal — not from theme
+        width: 32,
+        height: 32,
+        alignItems: "center",
+        justifyContent: "center",
+        borderRadius: px(colors.radius.md)
+      },
+      children: /* @__PURE__ */ jsxRuntime.jsx(defaultSemanticIcons.close, { size: 18, color: colors.semantic.text.muted })
     }
   );
-}, "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
+}, "DialogClose");
+var DialogFooter = /* @__PURE__ */ __name(({ children, className }) => {
+  const colors = useThemeColors();
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      className: cn("mt-4 flex-row items-center justify-end gap-2", className),
+      style: {
+        marginTop: px(colors.spacing["4"]),
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "flex-end",
+        gap: px(colors.spacing["2"])
+      },
+      children
+    }
+  );
+}, "DialogFooter");
+var Dialog = Object.assign(DialogRoot, {
+  Trigger: DialogTrigger,
+  Content: DialogContent,
+  Title: DialogTitle,
+  Description: DialogDescription,
+  Footer: DialogFooter,
+  Close: DialogClose
 });
-var ContextMenuCtx = React.createContext(null);
-var useContextMenuCtx = /* @__PURE__ */ __name(() => {
-  const ctx = React.useContext(ContextMenuCtx);
+var CommandContext = React.createContext(null);
+function useCommandContext(caller) {
+  const ctx = React.useContext(CommandContext);
   if (!ctx) {
-    throw new Error("ContextMenu compound parts must be rendered inside a <ContextMenu>.");
+    throw new Error(`<${caller}> must be rendered inside <Command>.`);
   }
   return ctx;
-}, "useContextMenuCtx");
-var ContextMenuRoot = /* @__PURE__ */ __name(({ open, defaultOpen = false, onOpenChange, children }) => {
+}
+__name(useCommandContext, "useCommandContext");
+var CommandRoot = /* @__PURE__ */ __name(({ open, defaultOpen = false, onOpenChange, children }) => {
   const [inner, setInner] = React.useState(defaultOpen);
   const isControlled = open !== void 0;
   const current = isControlled ? open : inner;
+  const [query, setQuery] = React.useState("");
   const setOpen = React.useCallback(
     (next) => {
       if (!isControlled) {
         setInner(next);
       }
+      if (!next) {
+        setQuery("");
+      }
       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]);
+  React.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    const handler = /* @__PURE__ */ __name((e) => {
+      if ((e.metaKey || e.ctrlKey) && e.key === "k") {
+        e.preventDefault();
+        setOpen(!current);
+      }
+    }, "handler");
+    window.addEventListener("keydown", handler);
+    return () => window.removeEventListener("keydown", handler);
+  }, [current, setOpen]);
+  const ctxValue = {
+    open: current,
+    setOpen,
+    query,
+    setQuery
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(CommandContext.Provider, { value: ctxValue, children });
+}, "CommandRoot");
+var CommandTrigger = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useCommandContext("Command.Trigger");
+  const open = /* @__PURE__ */ __name(() => ctx.setOpen(true), "open");
   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
+      const existingOnClick = child.props.onClick;
+      const existingOnPress = child.props.onPress;
+      const fire = /* @__PURE__ */ __name((e) => {
+        existingOnClick?.(e);
+        existingOnPress?.(e);
+        open();
+      }, "fire");
+      const extraProps = {
+        onClick: fire,
+        "aria-haspopup": "dialog",
+        "aria-expanded": ctx.open ? "true" : "false"
+      };
+      if (existingOnPress !== void 0) {
+        extraProps.onPress = fire;
       }
-    );
-  }
-  if (React.isValidElement(children)) {
-    const child = children;
-    const existing = child.props.onLongPress;
+      return React.cloneElement(child, extraProps);
+    }
     return /* @__PURE__ */ jsxRuntime.jsx(
-      Slot,
+      "button",
       {
-        ref: (node) => {
-          popover.triggerRef.current = node;
-        },
-        onLongPress: (e) => {
-          existing?.(e);
-          openMenu();
-        },
-        accessibilityRole: "button",
-        ...testID !== void 0 ? { testID } : {},
-        ...className !== void 0 ? { className } : {},
-        children: child
+        type: "button",
+        "data-testid": testID,
+        className: cn("nori-command-trigger", className),
+        "aria-haspopup": "dialog",
+        "aria-expanded": ctx.open,
+        onClick: open,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Pressable, { testID, onPress: open, accessibilityRole: "button", children });
+}, "CommandTrigger");
+var CommandDialogInner = /* @__PURE__ */ __name(({
+  placeholder = "Type a command or search\u2026",
+  children,
+  className,
+  testID
+}) => {
+  const ctx = useCommandContext("Command.Dialog");
+  const colors = useThemeColors();
+  const inputRef = React.useRef(null);
+  React.useEffect(() => {
+    if (!ctx.open) {
+      return;
+    }
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    const id = setTimeout(() => inputRef.current?.focus(), 50);
+    return () => clearTimeout(id);
+  }, [ctx.open]);
+  const contentProps = testID !== void 0 ? { testID, className: cn("nori-command-dialog", className) } : { className: cn("nori-command-dialog", className) };
+  return /* @__PURE__ */ jsxRuntime.jsx(Dialog, { open: ctx.open, onOpenChange: ctx.setOpen, children: /* @__PURE__ */ jsxRuntime.jsx(Dialog.Content, { ...contentProps, children: reactNative.Platform.OS === "web" ? /* @__PURE__ */ jsxRuntime.jsxs(
+    "div",
+    {
+      style: {
+        maxHeight: "80vh",
+        display: "flex",
+        flexDirection: "column",
+        overflow: "hidden",
+        minWidth: 360
+      },
+      children: [
+        /* @__PURE__ */ jsxRuntime.jsxs(
+          "div",
+          {
+            style: {
+              padding: `${colors.spacing["3"]}px ${colors.spacing["4"]}px`,
+              borderBottom: `1px solid ${colors.semantic.border.default}`,
+              display: "flex",
+              alignItems: "center",
+              gap: colors.spacing["2"]
+            },
+            children: [
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "svg",
+                {
+                  width: "16",
+                  height: "16",
+                  viewBox: "0 0 16 16",
+                  fill: "none",
+                  "aria-hidden": "true",
+                  style: { color: colors.semantic.text.muted, flexShrink: 0 },
+                  children: /* @__PURE__ */ jsxRuntime.jsx(
+                    "path",
+                    {
+                      d: "M6.5 11a4.5 4.5 0 1 0 0-9 4.5 4.5 0 0 0 0 9ZM14 14l-3-3",
+                      stroke: "currentColor",
+                      strokeWidth: "1.5",
+                      strokeLinecap: "round",
+                      strokeLinejoin: "round"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ jsxRuntime.jsx(
+                "input",
+                {
+                  ref: inputRef,
+                  type: "text",
+                  role: "combobox",
+                  "aria-expanded": true,
+                  "aria-autocomplete": "list",
+                  autoComplete: "off",
+                  spellCheck: false,
+                  placeholder,
+                  value: ctx.query,
+                  onChange: (e) => ctx.setQuery(e.target.value),
+                  style: {
+                    flex: 1,
+                    fontSize: 15,
+                    background: "transparent",
+                    border: "none",
+                    outline: "none",
+                    color: colors.semantic.text.default,
+                    width: "100%"
+                  }
+                }
+              )
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsxRuntime.jsx("div", { role: "listbox", style: { overflowY: "auto", flex: 1, maxHeight: 400 }, children })
+      ]
+    }
+  ) : /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flex: 1 }, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.TextInput,
+      {
+        placeholder,
+        placeholderTextColor: colors.semantic.text.muted,
+        value: ctx.query,
+        onChangeText: ctx.setQuery,
+        autoFocus: ctx.open,
+        style: {
+          fontSize: 15,
+          color: colors.semantic.text.default,
+          paddingHorizontal: px(colors.spacing["4"]),
+          paddingVertical: px(colors.spacing["3"]),
+          borderBottomWidth: 1,
+          borderBottomColor: colors.semantic.border.default
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { style: { maxHeight: 400 }, children })
+  ] }) }) });
+}, "CommandDialogInner");
+var CommandEmpty = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const colors = useThemeColors();
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": testID,
+        role: "status",
+        "aria-live": "polite",
+        className: cn("nori-command-empty", className),
+        style: {
+          paddingTop: colors.spacing["6"],
+          paddingBottom: colors.spacing["6"],
+          paddingLeft: colors.spacing["4"],
+          paddingRight: colors.spacing["4"],
+          textAlign: "center",
+          color: colors.semantic.text.muted,
+          fontSize: 14
+        },
+        children
       }
     );
   }
   return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.Pressable,
+    reactNative.View,
     {
-      ref: (node) => {
-        popover.triggerRef.current = node;
+      testID,
+      style: {
+        paddingVertical: px(colors.spacing["6"]),
+        paddingHorizontal: px(colors.spacing["4"]),
+        alignItems: "center"
       },
-      onLongPress: openMenu,
-      ...testID !== void 0 ? { testID } : {},
-      ...className !== void 0 ? { className } : {},
-      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children }) : children
+      children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: colors.semantic.text.muted, fontSize: 14 }, children: typeof children === "string" ? children : "No results found." })
     }
   );
-}, "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
-});
-var range = /* @__PURE__ */ __name((from, to) => {
-  if (to < from) {
-    return [];
+}, "CommandEmpty");
+var CommandGroup = /* @__PURE__ */ __name(({ heading, children, className, testID }) => {
+  const ctx = useCommandContext("Command.Group");
+  const groupId = React.useId();
+  const colors = useThemeColors();
+  const visibleCount = countVisibleItems(children, ctx.query);
+  if (visibleCount === 0) {
+    return null;
   }
-  const out = new Array(to - from + 1);
-  for (let i = 0; i < out.length; i += 1) {
-    out[i] = from + i;
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsxs(
+      "section",
+      {
+        "data-testid": testID,
+        "aria-labelledby": heading ? `${groupId}-heading` : void 0,
+        className: cn("nori-command-group", className),
+        children: [
+          heading && /* @__PURE__ */ jsxRuntime.jsx(
+            "div",
+            {
+              id: `${groupId}-heading`,
+              style: {
+                padding: `${colors.spacing["2"]}px ${colors.spacing["4"]}px ${colors.spacing["1"]}px`,
+                fontSize: 11,
+                fontWeight: 600,
+                letterSpacing: "0.05em",
+                textTransform: "uppercase",
+                color: colors.semantic.text.muted
+              },
+              children: heading
+            }
+          ),
+          /* @__PURE__ */ jsxRuntime.jsx("div", { style: { paddingBottom: colors.spacing["2"] }, children })
+        ]
+      }
+    );
   }
-  return out;
-}, "range");
-function usePagination(args) {
-  const {
-    page: controlledPage,
-    defaultPage = 1,
-    pageCount,
-    siblingCount = 1,
-    boundaryCount = 1,
-    showFirstLast = false,
-    showPrevNext = true,
-    onPageChange
-  } = args;
-  const isControlled = controlledPage !== void 0;
-  const [uncontrolledPage, setUncontrolledPage] = React.useState(defaultPage);
-  const onChangeRef = React.useRef(onPageChange);
-  onChangeRef.current = onPageChange;
-  const safePageCount = Math.max(1, Math.floor(pageCount));
-  const rawPage = isControlled ? controlledPage : uncontrolledPage;
-  const currentPage = Math.min(Math.max(1, Math.floor(rawPage)), safePageCount);
-  const goToPage = React.useCallback(
-    (next2) => {
-      const clamped = Math.min(Math.max(1, Math.floor(next2)), Math.max(1, Math.floor(pageCount)));
-      if (!isControlled) {
-        setUncontrolledPage(clamped);
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { testID, children: [
+    heading && /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: {
+          paddingHorizontal: px(colors.spacing["4"]),
+          paddingTop: px(colors.spacing["2"]),
+          paddingBottom: px(colors.spacing["1"])
+        },
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              fontSize: 11,
+              fontWeight: "600",
+              textTransform: "uppercase",
+              color: colors.semantic.text.muted,
+              letterSpacing: 0.5
+            },
+            children: heading
+          }
+        )
       }
-      onChangeRef.current?.(clamped);
-    },
-    [isControlled, pageCount]
-  );
-  const prev = React.useCallback(() => goToPage(currentPage - 1), [goToPage, currentPage]);
-  const next = React.useCallback(() => goToPage(currentPage + 1), [goToPage, currentPage]);
-  const first = React.useCallback(() => goToPage(1), [goToPage]);
-  const last = React.useCallback(() => goToPage(safePageCount), [goToPage, safePageCount]);
-  const pages = React.useMemo(() => {
-    const items = [];
-    const safeSibling = Math.max(0, Math.floor(siblingCount));
-    const safeBoundary = Math.max(0, Math.floor(boundaryCount));
-    if (showFirstLast) {
-      items.push({ type: "first", disabled: currentPage <= 1 });
-    }
-    if (showPrevNext) {
-      items.push({ type: "prev", disabled: currentPage <= 1 });
+    ),
+    children
+  ] });
+}, "CommandGroup");
+var CommandItem = /* @__PURE__ */ __name(({ onSelect, disabled = false, children, className, testID }) => {
+  const ctx = useCommandContext("Command.Item");
+  const colors = useThemeColors();
+  const text = extractText(children);
+  const visible = matchesQuery(text, ctx.query);
+  if (!visible) {
+    return null;
+  }
+  const handleSelect = /* @__PURE__ */ __name(() => {
+    if (disabled) {
+      return;
     }
-    const startPages = range(1, Math.min(safeBoundary, safePageCount));
-    const endPages = range(Math.max(safePageCount - safeBoundary + 1, safeBoundary + 1), safePageCount);
-    const siblingsStart = Math.max(
-      Math.min(currentPage - safeSibling, safePageCount - safeBoundary - safeSibling * 2 - 1),
-      safeBoundary + 2
-    );
-    const siblingsEnd = Math.min(
-      Math.max(currentPage + safeSibling, safeBoundary + safeSibling * 2 + 2),
-      endPages.length > 0 ? endPages[0] - 2 : safePageCount - 1
+    onSelect?.();
+    ctx.setOpen(false);
+  }, "handleSelect");
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": testID,
+        role: "option",
+        "aria-selected": "false",
+        "aria-disabled": disabled,
+        tabIndex: disabled ? -1 : 0,
+        className: cn("nori-command-item", className),
+        onClick: handleSelect,
+        onKeyDown: (e) => {
+          if (e.key === "Enter") {
+            e.preventDefault();
+            handleSelect();
+          }
+        },
+        onMouseEnter: (e) => {
+          if (!disabled) {
+            e.currentTarget.style.background = `${colors.semantic.interactive.primary}14`;
+          }
+        },
+        onMouseLeave: (e) => {
+          e.currentTarget.style.background = "transparent";
+        },
+        onFocus: (e) => {
+          if (!disabled) {
+            e.currentTarget.style.background = `${colors.semantic.interactive.primary}14`;
+          }
+        },
+        onBlur: (e) => {
+          e.currentTarget.style.background = "transparent";
+        },
+        style: {
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          padding: `${colors.spacing["2"]}px ${colors.spacing["4"]}px`,
+          cursor: disabled ? "not-allowed" : "pointer",
+          opacity: disabled ? 0.5 : 1,
+          fontSize: 14,
+          color: colors.semantic.text.default,
+          borderRadius: colors.radius.sm,
+          margin: `0 ${colors.spacing["1"]}px`,
+          outline: "none"
+        },
+        children
+      }
     );
-    const middle = [];
-    if (siblingsStart > safeBoundary + 2) {
-      middle.push("ellipsis");
-    } else if (safeBoundary + 1 < safePageCount - safeBoundary) {
-      middle.push(safeBoundary + 1);
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      testID,
+      onPress: handleSelect,
+      disabled,
+      accessibilityRole: "button",
+      style: ({ pressed }) => ({
+        flexDirection: "row",
+        alignItems: "center",
+        justifyContent: "space-between",
+        paddingHorizontal: px(colors.spacing["4"]),
+        paddingVertical: px(colors.spacing["3"]),
+        opacity: disabled ? 0.5 : pressed ? 0.7 : 1
+      }),
+      children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 14, color: colors.semantic.text.default }, children }) : children
     }
-    for (const p of range(siblingsStart, siblingsEnd)) {
-      middle.push(p);
+  );
+}, "CommandItem");
+var CommandShortcut = /* @__PURE__ */ __name(({ children, className }) => {
+  const colors = useThemeColors();
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: cn("nori-command-shortcut", className),
+        style: {
+          marginLeft: "auto",
+          fontSize: 12,
+          color: colors.semantic.text.muted,
+          letterSpacing: "0.05em",
+          opacity: 0.7
+        },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Text,
+    {
+      style: {
+        fontSize: 12,
+        color: colors.semantic.text.muted,
+        opacity: 0.7
+      },
+      children: typeof children === "string" ? children : null
     }
-    if (siblingsEnd < safePageCount - safeBoundary - 1) {
-      middle.push("ellipsis");
-    } else if (safePageCount - safeBoundary > safeBoundary) {
-      middle.push(safePageCount - safeBoundary);
+  );
+}, "CommandShortcut");
+function extractText(node) {
+  if (typeof node === "string" || typeof node === "number") {
+    return String(node);
+  }
+  if (Array.isArray(node)) {
+    return node.map(extractText).join(" ");
+  }
+  if (React.isValidElement(node)) {
+    const el = node;
+    return extractText(el.props.children);
+  }
+  return "";
+}
+__name(extractText, "extractText");
+function matchesQuery(text, query) {
+  if (!query.trim()) {
+    return true;
+  }
+  return text.toLowerCase().includes(query.toLowerCase().trim());
+}
+__name(matchesQuery, "matchesQuery");
+function countVisibleItems(children, query) {
+  let count = 0;
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return;
     }
-    const seen = /* @__PURE__ */ new Set();
-    const pushPage = /* @__PURE__ */ __name((n) => {
-      if (n < 1 || n > safePageCount || seen.has(n)) {
-        return;
+    const props = child.props;
+    if ("onSelect" in props || !("heading" in props)) {
+      const text = extractText(props.children);
+      if (matchesQuery(text, query)) {
+        count++;
       }
-      seen.add(n);
-      items.push({ type: "page", page: n, selected: n === currentPage });
-    }, "pushPage");
-    for (const n of startPages) {
-      pushPage(n);
-    }
-    for (const m of middle) {
-      if (m === "ellipsis") {
-        items.push({ type: "ellipsis" });
-      } else {
-        pushPage(m);
-      }
-    }
-    for (const n of endPages) {
-      pushPage(n);
-    }
-    if (showPrevNext) {
-      items.push({ type: "next", disabled: currentPage >= safePageCount });
-    }
-    if (showFirstLast) {
-      items.push({ type: "last", disabled: currentPage >= safePageCount });
     }
-    return items;
-  }, [currentPage, safePageCount, siblingCount, boundaryCount, showFirstLast, showPrevNext]);
-  return {
-    page: currentPage,
-    pages,
-    canPrev: currentPage > 1,
-    canNext: currentPage < safePageCount,
-    goToPage,
-    prev,
-    next,
-    first,
-    last
-  };
-}
-__name(usePagination, "usePagination");
-var TableContext = React.createContext({
-  striped: false,
-  compact: false,
-  bordered: false,
-  rowIndex: 0,
-  setRowIndex: /* @__PURE__ */ __name(() => {
-  }, "setRowIndex")
-});
-function buildTableCompound(parts) {
-  return Object.assign(parts.Root, {
-    Header: parts.Header,
-    Body: parts.Body,
-    Footer: parts.Footer,
-    Row: parts.Row,
-    HeaderCell: parts.HeaderCell,
-    Cell: parts.Cell,
-    Caption: parts.Caption
   });
+  return count;
 }
-__name(buildTableCompound, "buildTableCompound");
-var TableRoot = /* @__PURE__ */ __name(({ striped = false, compact = false, bordered = false, children, className, testID }) => {
-  const [rowIndex, setRowIndex] = React.useState(0);
-  const ctxValue = {
-    striped,
-    compact,
-    bordered,
-    rowIndex,
-    setRowIndex
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(
-    "table",
-    {
-      className: cn(
-        "w-full caption-bottom text-sm",
-        bordered && "border border-semantic-border-default",
-        className
-      ),
-      ...testID !== void 0 ? { "data-testid": testID } : {},
-      children
-    }
-  ) }) });
-}, "TableRoot");
-var TableHeader = /* @__PURE__ */ __name(({ children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "thead",
-  {
-    className: cn("[&_tr]:border-b [&_tr]:border-semantic-border-default", className),
-    ...testID !== void 0 ? { "data-testid": testID } : {},
-    children
-  }
-), "TableHeader");
-var TableBody = /* @__PURE__ */ __name(({ children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "tbody",
-  {
-    className: cn("[&_tr:last-child]:border-0", className),
-    ...testID !== void 0 ? { "data-testid": testID } : {},
-    children
-  }
-), "TableBody");
-var TableFooter = /* @__PURE__ */ __name(({ children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "tfoot",
-  {
-    className: cn("border-t border-semantic-border-default font-medium", className),
-    ...testID !== void 0 ? { "data-testid": testID } : {},
-    children
-  }
-), "TableFooter");
-var TableRow = /* @__PURE__ */ __name(({ selected = false, onPress, children, className, testID }) => {
-  const colors = useThemeColors();
-  const handleClick = React.useCallback(() => {
-    onPress?.();
-  }, [onPress]);
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    "tr",
-    {
-      className: cn(
-        "border-b border-semantic-border-default transition-colors",
-        onPress && "cursor-pointer hover:bg-semantic-background-subtle",
-        selected && "bg-semantic-background-subtle",
-        className
-      ),
-      style: selected ? { backgroundColor: colors.semantic.background.subtle } : void 0,
-      onClick: onPress ? handleClick : void 0,
-      ...testID !== void 0 ? { "data-testid": testID } : {},
-      children
-    }
-  );
-}, "TableRow");
-var TableHeaderCell = /* @__PURE__ */ __name(({ align = "left", colSpan, children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "th",
-  {
-    className: cn(
-      "h-10 px-4 font-medium text-semantic-text-secondary",
-      align === "right" && "text-right",
-      align === "center" && "text-center",
-      align === "left" && "text-left",
-      className
-    ),
-    colSpan,
-    ...testID !== void 0 ? { "data-testid": testID } : {},
-    children
-  }
-), "TableHeaderCell");
-var TableCell = /* @__PURE__ */ __name(({ align = "left", colSpan, children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "td",
-  {
-    className: cn(
-      "p-4 align-middle",
-      align === "right" && "text-right",
-      align === "center" && "text-center",
-      align === "left" && "text-left",
-      className
-    ),
-    colSpan,
-    ...testID !== void 0 ? { "data-testid": testID } : {},
-    children
-  }
-), "TableCell");
-var TableCaption = /* @__PURE__ */ __name(({ children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
-  "caption",
-  {
-    className: cn("mt-4 text-sm text-semantic-text-secondary", className),
-    ...testID !== void 0 ? { "data-testid": testID } : {},
-    children
-  }
-), "TableCaption");
-var Table = buildTableCompound({
-  Root: TableRoot,
-  Header: TableHeader,
-  Body: TableBody,
-  Footer: TableFooter,
-  Row: TableRow,
-  HeaderCell: TableHeaderCell,
-  Cell: TableCell,
-  Caption: TableCaption
-});
-function sortData(data, sort) {
-  if (!sort) {
-    return data;
-  }
-  const key = sort.id;
-  return [...data].sort((a, b) => {
-    const av = a[key];
-    const bv = b[key];
-    if (av == null && bv == null) {
-      return 0;
+__name(countVisibleItems, "countVisibleItems");
+var CommandDialogWrapper = /* @__PURE__ */ __name((props) => {
+  const ctx = useCommandContext("Command.Dialog");
+  const { children, ...rest } = props;
+  let anyVisible = false;
+  let emptyNode = null;
+  React.Children.forEach(children, (child) => {
+    if (!React.isValidElement(child)) {
+      return;
     }
-    if (av == null) {
-      return 1;
+    const childProps = child.props;
+    if (!("heading" in childProps) && !("onSelect" in childProps) && !("icon" in childProps)) {
+      emptyNode = child;
+      return;
     }
-    if (bv == null) {
-      return -1;
+    const groupChildren = childProps.children;
+    const count = countVisibleItems(groupChildren, ctx.query);
+    if (count > 0) {
+      anyVisible = true;
     }
-    const cmp2 = av < bv ? -1 : av > bv ? 1 : 0;
-    return sort.direction === "asc" ? cmp2 : -cmp2;
   });
-}
-__name(sortData, "sortData");
-function SortIndicator({ direction }) {
-  if (direction === void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: 4, opacity: 0.3 }, children: "\u21C5" });
+  return /* @__PURE__ */ jsxRuntime.jsx(CommandDialogInner, { ...rest, children: anyVisible ? children : emptyNode ?? /* @__PURE__ */ jsxRuntime.jsx(CommandEmpty, { children: "No results found." }) });
+}, "CommandDialogWrapper");
+var Command = Object.assign(CommandRoot, {
+  Trigger: CommandTrigger,
+  Dialog: CommandDialogWrapper,
+  Empty: CommandEmpty,
+  Group: CommandGroup,
+  Item: CommandItem,
+  Shortcut: CommandShortcut
+});
+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 /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: 4 }, children: direction === "asc" ? "\u2191" : "\u2193" });
+  return ctx;
 }
-__name(SortIndicator, "SortIndicator");
-function DataTable({
-  data,
-  columns,
-  pageSize = 10,
-  defaultSort,
-  onRowPress,
-  emptyState,
-  striped,
-  compact,
-  bordered,
+__name(useMenuContext, "useMenuContext");
+var MenuContent = /* @__PURE__ */ __name(({
+  children,
+  className,
   testID,
-  className
-}) {
-  const [sort, setSort] = React.useState(defaultSort ?? null);
-  const sorted = React.useMemo(() => sortData(data, sort), [data, sort]);
-  const pageCount = Math.max(1, Math.ceil(sorted.length / pageSize));
-  const { page, goToPage, canPrev, canNext } = usePagination({ pageCount, defaultPage: 1 });
-  const pageSlice = React.useMemo(() => {
-    const start = (page - 1) * pageSize;
-    return sorted.slice(start, start + pageSize);
-  }, [sorted, page, pageSize]);
-  const handleSort = /* @__PURE__ */ __name((colId) => {
-    setSort((prev) => {
-      if (prev?.id !== colId) {
-        goToPage(1);
-        return { id: colId, direction: "asc" };
+  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;
       }
-      if (prev.direction === "asc") {
-        return { id: colId, direction: "desc" };
+      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;
       }
-      goToPage(1);
-      return null;
-    });
-  }, "handleSort");
-  const tableProps = {};
-  if (striped !== void 0) {
-    tableProps.striped = striped;
-  }
-  if (compact !== void 0) {
-    tableProps.compact = compact;
-  }
-  if (bordered !== void 0) {
-    tableProps.bordered = bordered;
-  }
-  if (testID !== void 0) {
-    tableProps.testID = testID;
-  }
-  if (className !== void 0) {
-    tableProps.className = className;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { width: "100%" }, children: [
-    /* @__PURE__ */ jsxRuntime.jsxs(Table, { ...tableProps, children: [
-      /* @__PURE__ */ jsxRuntime.jsx(Table.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(Table.Row, { children: columns.map((col) => {
-        const align = col.align;
-        return /* @__PURE__ */ jsxRuntime.jsx(Table.HeaderCell, { ...align !== void 0 ? { align } : {}, children: col.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
-          reactNative.Pressable,
-          {
-            accessibilityRole: "button",
-            accessibilityLabel: `Sort by ${col.id}`,
-            "aria-label": `Sort by ${col.id}`,
-            onPress: () => handleSort(col.id),
-            style: { flexDirection: "row", alignItems: "center" },
-            children: [
-              typeof col.header === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children: col.header }) : col.header,
-              /* @__PURE__ */ jsxRuntime.jsx(
-                SortIndicator,
-                {
-                  ...sort?.id === col.id ? { direction: sort.direction } : {}
-                }
-              )
-            ]
-          }
-        ) : col.header }, col.id);
-      }) }) }),
-      /* @__PURE__ */ jsxRuntime.jsx(Table.Body, { children: pageSlice.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Table.Row, { children: /* @__PURE__ */ jsxRuntime.jsx(Table.Cell, { colSpan: columns.length, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: emptyState ?? "No data" }) }) }) : pageSlice.map((row, i) => /* @__PURE__ */ jsxRuntime.jsx(
-        Table.Row,
+    }, "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,
         {
-          ...onRowPress !== void 0 ? { onPress: /* @__PURE__ */ __name(() => onRowPress(row), "onPress") } : {},
-          children: columns.map((col) => {
-            const colAlign = col.align;
-            return /* @__PURE__ */ jsxRuntime.jsx(
-              Table.Cell,
-              {
-                ...colAlign !== void 0 ? { align: colAlign } : {},
-                children: col.cell(row)
-              },
-              col.id
-            );
-          })
-        },
-        i
-      )) })
-    ] }),
-    pageCount > 1 && /* @__PURE__ */ jsxRuntime.jsx(
-      PaginationControls,
-      {
-        page,
-        pageCount,
-        canPrev,
-        canNext,
-        goToPage
-      }
-    )
-  ] });
-}
-__name(DataTable, "DataTable");
-function EmptyState({ children }) {
-  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { paddingVertical: 32, alignItems: "center" }, children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: "#888", fontSize: 14 }, children }) : children });
-}
-__name(EmptyState, "EmptyState");
-function PaginationControls({
-  page,
-  pageCount,
-  canPrev,
-  canNext,
-  goToPage
-}) {
+          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.View,
+    reactNative.Pressable,
     {
-      style: {
-        flexDirection: "row",
-        justifyContent: "flex-end",
-        alignItems: "center",
-        paddingVertical: 8,
-        gap: 8
+      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.Pressable,
+          reactNative.Text,
           {
-            onPress: canPrev ? () => goToPage(page - 1) : void 0,
-            accessibilityRole: "button",
-            accessibilityLabel: "Previous page",
-            "aria-label": "Previous page",
-            "aria-disabled": !canPrev,
-            style: { opacity: canPrev ? 1 : 0.4, paddingHorizontal: 8 },
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 14 }, children: "\u2039 Prev" })
+            style: {
+              flex: 1,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              color: textColor
+            },
+            children
           }
         ),
-        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: { fontSize: 14 }, "aria-live": "polite", children: [
-          page,
-          " / ",
-          pageCount
-        ] }),
-        /* @__PURE__ */ jsxRuntime.jsx(
-          reactNative.Pressable,
+        shortcut !== void 0 && reactNative.Platform.OS === "web" && /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
           {
-            onPress: canNext ? () => goToPage(page + 1) : void 0,
-            accessibilityRole: "button",
-            accessibilityLabel: "Next page",
-            "aria-label": "Next page",
-            "aria-disabled": !canNext,
-            style: { opacity: canNext ? 1 : 0.4, paddingHorizontal: 8 },
-            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 14 }, children: "Next \u203A" })
+            ...{ "aria-hidden": "true" },
+            style: {
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.xs),
+              color: colors.semantic.text.muted
+            },
+            children: shortcut
           }
         )
       ]
     }
   );
-}
-__name(PaginationControls, "PaginationControls");
-function formatDate(date$1, locale) {
-  try {
-    return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date$1.toDate(date.getLocalTimeZone()));
-  } catch {
-    return `${date$1.year}-${String(date$1.month).padStart(2, "0")}-${String(date$1.day).padStart(2, "0")}`;
-  }
-}
-__name(formatDate, "formatDate");
-function CalendarIcon({ size = 16, color = "currentColor" }) {
+}, "MenuItem");
+MenuItem.displayName = "MenuItem";
+var MenuSeparator = /* @__PURE__ */ __name(({ className, testID }) => {
   const colors = useThemeColors();
-  if (reactNative.Platform.OS === "web") {
-    return /* @__PURE__ */ jsxRuntime.jsx(
-      "svg",
-      {
-        width: size,
-        height: size,
-        viewBox: "0 0 24 24",
-        fill: "none",
-        stroke: color,
-        strokeWidth: "2",
-        strokeLinecap: "round",
-        strokeLinejoin: "round",
-        "aria-hidden": "true",
-        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" })
-      }
-    );
-  }
-  const resolvedColor = color === "currentColor" ? colors.semantic.text.muted : color;
   return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.Text,
+    reactNative.View,
     {
-      accessibilityElementsHidden: true,
-      importantForAccessibility: "no-hide-descendants",
-      style: { fontSize: size, lineHeight: size, color: resolvedColor },
-      children: "\u{1F4C5}"
+      ...{ 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
+      }
     }
   );
-}
-__name(CalendarIcon, "CalendarIcon");
-function buildCalendarOptional(minValue, maxValue, isDateUnavailable, firstDayOfWeek) {
-  const out = {};
-  if (minValue !== void 0) {
-    out.minValue = minValue;
-  }
-  if (maxValue !== void 0) {
-    out.maxValue = maxValue;
-  }
-  if (isDateUnavailable !== void 0) {
-    out.isDateUnavailable = isDateUnavailable;
-  }
-  if (firstDayOfWeek !== void 0) {
-    out.firstDayOfWeek = firstDayOfWeek;
-  }
-  return out;
-}
-__name(buildCalendarOptional, "buildCalendarOptional");
-function buildTriggerAriaProps(ariaProps) {
-  const out = {};
-  if (ariaProps["aria-labelledby"] !== void 0) {
-    out["aria-labelledby"] = ariaProps["aria-labelledby"];
-  }
-  if (ariaProps["aria-describedby"] !== void 0) {
-    out["aria-describedby"] = ariaProps["aria-describedby"];
-  }
-  if (ariaProps["aria-invalid"] !== void 0) {
-    out["aria-invalid"] = ariaProps["aria-invalid"];
-  }
-  if (ariaProps["aria-required"] !== void 0) {
-    out["aria-required"] = ariaProps["aria-required"];
-  }
-  return out;
-}
-__name(buildTriggerAriaProps, "buildTriggerAriaProps");
-var DatePickerRoot = /* @__PURE__ */ __name(({
-  value,
-  defaultValue: defaultValue2,
-  onChange,
-  locale: localeProp,
-  minValue,
-  maxValue,
-  isDateUnavailable,
-  firstDayOfWeek,
-  placeholder,
-  disabled = false,
-  id,
-  name: _name,
-  className,
-  testID,
-  ...ariaProps
-}) => {
-  const providerLocale = useLocale();
-  const locale = localeProp ?? providerLocale;
-  const [open, setOpen] = React.useState(false);
-  const isControlled = value !== void 0;
-  const [inner, setInner] = React.useState(defaultValue2 ?? null);
-  const current = isControlled ? value ?? null : inner;
-  const handleChange = React.useCallback(
-    (date) => {
-      if (!isControlled) {
-        setInner(date);
-      }
-      onChange?.(date);
-      setOpen(false);
-    },
-    [isControlled, onChange]
+}, "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
+        }
+      )
+    }
   );
-  const handleOpenChange = React.useCallback(
+}, "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 (!disabled) {
-        setOpen(next);
+      if (!isControlled) {
+        setInner(next);
       }
+      onOpenChange?.(next);
     },
-    [disabled]
+    [isControlled, onOpenChange]
   );
-  const displayValue = current ? formatDate(current, locale) : null;
-  const calendarOptional = buildCalendarOptional(minValue, maxValue, isDateUnavailable, firstDayOfWeek);
-  const triggerAriaProps = buildTriggerAriaProps(ariaProps);
-  const colors = useThemeColors();
-  const hasError = ariaProps["aria-invalid"] === true || ariaProps["aria-invalid"] === "true";
-  const pressableStyle = {
-    flexDirection: "row",
-    alignItems: "center",
-    borderWidth: 1,
-    borderRadius: px(colors.radius.md),
-    paddingHorizontal: px(colors.spacing["3"]),
-    paddingVertical: px(colors.spacing["2"]),
-    backgroundColor: colors.semantic.background.elevated,
-    borderColor: hasError ? colors.color.danger : colors.semantic.border.default,
-    opacity: disabled ? 0.6 : 1
-  };
-  const textStyle = {
-    flex: 1,
-    fontFamily: colors.fontFamily.body,
-    fontSize: px(colors.fontSize.md),
-    color: displayValue ? colors.semantic.text.default : colors.semantic.text.muted
-  };
-  const triggerExtraProps = {
-    role: "combobox",
-    accessibilityRole: "button",
-    "aria-haspopup": "dialog",
-    "aria-expanded": open,
-    ...triggerAriaProps
-  };
-  if (id !== void 0) {
-    triggerExtraProps.id = id;
-    triggerExtraProps.nativeID = id;
-  }
-  if (testID !== void 0) {
-    triggerExtraProps.testID = testID;
-  }
-  if (hasError) {
-    triggerExtraProps["aria-invalid"] = true;
-  }
-  if (ariaProps["aria-required"]) {
-    triggerExtraProps["aria-required"] = true;
-  }
-  if (disabled) {
-    triggerExtraProps["aria-disabled"] = true;
-  }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Popover.Trigger, { asChild: false, className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.Pressable,
-      {
-        onPress: disabled ? void 0 : () => setOpen(!open),
-        disabled,
-        className: cn(
-          "flex-row items-center rounded-md border px-3 py-2",
-          hasError ? "border-semantic-interactive-destructive" : "border-semantic-border-default",
-          disabled ? "opacity-60" : void 0,
-          className
-        ),
-        style: pressableStyle,
-        ...triggerExtraProps,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: textStyle, numberOfLines: 1, children: displayValue ?? placeholder ?? "" }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginLeft: px(colors.spacing["2"]) }, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, { size: 16, color: colors.semantic.text.muted }) })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { "aria-label": "Date picker", side: "bottom", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Calendar,
+  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,
       {
-        mode: "single",
-        value: current,
-        onChange: (date) => {
-          handleChange(date);
+        ref: (node) => {
+          popover.triggerRef.current = node;
         },
-        locale,
-        ...calendarOptional
+        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
       }
-    ) })
-  ] });
-}, "DatePickerRoot");
-var DatePickerRange = /* @__PURE__ */ __name(({
-  value,
-  defaultValue: defaultValue2,
-  onChange,
-  locale: localeProp,
-  minValue,
-  maxValue,
-  isDateUnavailable,
-  firstDayOfWeek,
-  placeholder,
-  disabled = false,
-  id,
-  name: _name,
-  className,
-  testID,
-  ...ariaProps
-}) => {
-  const providerLocale = useLocale();
-  const locale = localeProp ?? providerLocale;
-  const [open, setOpen] = React.useState(false);
-  const isControlled = value !== void 0;
-  const [inner, setInner] = React.useState(defaultValue2 ?? { start: null, end: null });
-  const current = isControlled ? value ?? { start: null, end: null } : inner;
-  const calendarValue = current.start !== null ? { start: current.start, end: current.end } : null;
-  const handleChange = React.useCallback(
-    (calRange) => {
-      const next = {
-        start: calRange?.start ?? null,
-        end: calRange?.end ?? null
-      };
-      if (!isControlled) {
-        setInner(next);
-      }
-      onChange?.(next);
-      if (next.start !== null && next.end !== null) {
-        setOpen(false);
-      }
-    },
-    [isControlled, onChange]
-  );
-  const handleOpenChange = React.useCallback(
-    (next) => {
-      if (!disabled) {
-        setOpen(next);
-      }
-    },
-    [disabled]
-  );
-  let displayValue = null;
-  if (current.start !== null) {
-    const startStr = formatDate(current.start, locale);
-    const endStr = current.end !== null ? formatDate(current.end, locale) : "";
-    displayValue = `${startStr} \u2013 ${endStr}`;
-  }
-  const calendarOptional = buildCalendarOptional(minValue, maxValue, isDateUnavailable, firstDayOfWeek);
-  const triggerAriaProps = buildTriggerAriaProps(ariaProps);
-  const colors = useThemeColors();
-  const hasError = ariaProps["aria-invalid"] === true || ariaProps["aria-invalid"] === "true";
-  const pressableStyle = {
-    flexDirection: "row",
-    alignItems: "center",
-    borderWidth: 1,
-    borderRadius: px(colors.radius.md),
-    paddingHorizontal: px(colors.spacing["3"]),
-    paddingVertical: px(colors.spacing["2"]),
-    backgroundColor: colors.semantic.background.elevated,
-    borderColor: hasError ? colors.color.danger : colors.semantic.border.default,
-    opacity: disabled ? 0.6 : 1
-  };
-  const textStyle = {
-    flex: 1,
-    fontFamily: colors.fontFamily.body,
-    fontSize: px(colors.fontSize.md),
-    color: displayValue ? colors.semantic.text.default : colors.semantic.text.muted
-  };
-  const triggerExtraProps = {
-    role: "combobox",
-    accessibilityRole: "button",
-    "aria-haspopup": "dialog",
-    "aria-expanded": open,
-    ...triggerAriaProps
-  };
-  if (id !== void 0) {
-    triggerExtraProps.id = id;
-    triggerExtraProps.nativeID = id;
-  }
-  if (testID !== void 0) {
-    triggerExtraProps.testID = testID;
-  }
-  if (hasError) {
-    triggerExtraProps["aria-invalid"] = true;
-  }
-  if (ariaProps["aria-required"]) {
-    triggerExtraProps["aria-required"] = true;
-  }
-  if (disabled) {
-    triggerExtraProps["aria-disabled"] = true;
+    );
   }
-  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
-    /* @__PURE__ */ jsxRuntime.jsx(Popover.Trigger, { asChild: false, className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs(
-      reactNative.Pressable,
-      {
-        onPress: disabled ? void 0 : () => setOpen(!open),
-        disabled,
-        className: cn(
-          "flex-row items-center rounded-md border px-3 py-2",
-          hasError ? "border-semantic-interactive-destructive" : "border-semantic-border-default",
-          disabled ? "opacity-60" : void 0,
-          className
-        ),
-        style: pressableStyle,
-        ...triggerExtraProps,
-        children: [
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: textStyle, numberOfLines: 1, children: displayValue ?? placeholder ?? "" }),
-          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginLeft: px(colors.spacing["2"]) }, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, { size: 16, color: colors.semantic.text.muted }) })
-        ]
-      }
-    ) }),
-    /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { "aria-label": "Date range picker", side: "bottom", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
-      Calendar,
-      {
-        mode: "range",
-        value: calendarValue,
-        onChange: (range2) => {
-          handleChange(range2);
-        },
-        locale,
-        ...calendarOptional
-      }
-    ) })
-  ] });
-}, "DatePickerRange");
-var DatePicker = Object.assign(DatePickerRoot, {
-  Range: DatePickerRange
+  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 DialogContext = React.createContext(null);
-var useDialogContext = /* @__PURE__ */ __name((label) => {
-  const ctx = React.useContext(DialogContext);
+var ContextMenuCtx = React.createContext(null);
+var useContextMenuCtx = /* @__PURE__ */ __name(() => {
+  const ctx = React.useContext(ContextMenuCtx);
   if (!ctx) {
-    throw new Error(`<${label}> must be rendered inside a <Dialog>.`);
+    throw new Error("ContextMenu compound parts must be rendered inside a <ContextMenu>.");
   }
   return ctx;
-}, "useDialogContext");
-var DialogRoot = /* @__PURE__ */ __name(({ open, defaultOpen = false, onOpenChange, children }) => {
+}, "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;
@@ -8026,35 +8274,77 @@ var DialogRoot = /* @__PURE__ */ __name(({ open, defaultOpen = false, onOpenChan
     },
     [isControlled, onOpenChange]
   );
-  const baseId = React.useId();
-  const triggerRef = React.useRef(null);
-  const ctxValue = {
-    open: current,
-    setOpen,
-    titleId: `${baseId}-title`,
-    descriptionId: `${baseId}-description`,
-    triggerRef
-  };
-  return /* @__PURE__ */ jsxRuntime.jsx(DialogContext.Provider, { value: ctxValue, children });
-}, "DialogRoot");
-var DialogTrigger = /* @__PURE__ */ __name(({ asChild = true, children, className, testID }) => {
-  const ctx = useDialogContext("DialogTrigger");
-  const onPress = React.useCallback(() => ctx.setOpen(true), [ctx]);
-  if (asChild && React.isValidElement(children)) {
+  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 fire = /* @__PURE__ */ __name((existing) => (event) => {
-      existing?.(event);
-      ctx.setOpen(true);
-    }, "fire");
+    const existing = child.props.onLongPress;
     return /* @__PURE__ */ jsxRuntime.jsx(
       Slot,
       {
         ref: (node) => {
-          ctx.triggerRef.current = node;
+          popover.triggerRef.current = node;
         },
-        onClick: fire(child.props.onClick),
-        onPress: fire(child.props.onPress),
-        ...testID !== void 0 ? { "data-testid": testID } : {},
+        onLongPress: (e) => {
+          existing?.(e);
+          openMenu();
+        },
+        accessibilityRole: "button",
+        ...testID !== void 0 ? { testID } : {},
         ...className !== void 0 ? { className } : {},
         children: child
       }
@@ -8064,358 +8354,798 @@ var DialogTrigger = /* @__PURE__ */ __name(({ asChild = true, children, classNam
     reactNative.Pressable,
     {
       ref: (node) => {
-        ctx.triggerRef.current = node;
+        popover.triggerRef.current = node;
       },
-      onPress,
+      onLongPress: openMenu,
       ...testID !== void 0 ? { testID } : {},
       ...className !== void 0 ? { className } : {},
-      children: wrapStringChildren4(children)
+      children: typeof children === "string" || typeof children === "number" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children }) : children
     }
   );
-}, "DialogTrigger");
-function wrapStringChildren4(children) {
-  if (typeof children === "string" || typeof children === "number") {
-    return /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children });
-  }
-  return children;
-}
-__name(wrapStringChildren4, "wrapStringChildren");
-var SCRIM_COLOR2 = "rgba(0, 0, 0, 0.24)";
-var BLUR_AMOUNT2 = 4;
-var OVERLAY_LAYOUT_BASE2 = {
-  position: reactNative.Platform.OS === "web" ? "fixed" : "absolute",
-  top: 0,
-  left: 0,
-  right: 0,
-  bottom: 0,
-  alignItems: "center",
-  justifyContent: "center",
-  // On native the BlurBackdrop sibling renders BEHIND this overlay and
-  // already provides dim + frosted-glass via expo-blur's `tint`/`intensity`.
-  // Painting SCRIM_COLOR on top would mask the blur entirely (the user
-  // sees only a flat tint), so the overlay stays transparent and the
-  // BlurView is the dominant visual on native.
-  ...reactNative.Platform.OS === "web" ? { zIndex: 50 } : { backgroundColor: "transparent" }
-};
-var CONTENT_LAYOUT_BASE3 = {
-  width: "100%",
-  maxWidth: 480,
-  // component-density literal — not from theme
-  ...reactNative.Platform.OS === "web" ? {
-    boxShadow: "0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 8px 10px -6px rgba(0, 0, 0, 0.1)"
-  } : { elevation: 24 }
-};
-var FOCUSABLE_SELECTOR2 = 'a[href], button:not([disabled]), textarea:not([disabled]), input:not([disabled]):not([type="hidden"]), select:not([disabled]), [tabindex]:not([tabindex="-1"])';
-var DialogContent = /* @__PURE__ */ __name(({ children, className, testID }) => {
-  const ctx = useDialogContext("DialogContent");
-  const colors = useThemeColors();
-  const scheme = useColorScheme();
-  const contentRef = React.useRef(null);
-  const overlayStyle = {
-    ...OVERLAY_LAYOUT_BASE2,
-    padding: px(colors.spacing["4"])
-  };
-  const contentStyle = {
-    ...CONTENT_LAYOUT_BASE3,
-    borderRadius: px(colors.radius.xl),
-    padding: px(colors.spacing["6"]),
-    gap: px(colors.spacing["3"])
-  };
-  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]);
-  const enterStyle = reactNative.Platform.OS === "web" ? {
-    opacity: entered ? 1 : 0,
-    transform: [{ scale: entered ? 1 : 0.96 }],
-    transitionProperty: "opacity, transform",
-    transitionDuration: "150ms",
-    transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)"
-  } : {};
-  const overlayDomRef = React.useRef(null);
-  React.useEffect(() => {
-    if (reactNative.Platform.OS !== "web") {
-      return;
-    }
-    const node = overlayDomRef.current;
-    if (!node) {
-      return;
+}, "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
+});
+var range = /* @__PURE__ */ __name((from, to) => {
+  if (to < from) {
+    return [];
+  }
+  const out = new Array(to - from + 1);
+  for (let i = 0; i < out.length; i += 1) {
+    out[i] = from + i;
+  }
+  return out;
+}, "range");
+function usePagination(args) {
+  const {
+    page: controlledPage,
+    defaultPage = 1,
+    pageCount,
+    siblingCount = 1,
+    boundaryCount = 1,
+    showFirstLast = false,
+    showPrevNext = true,
+    onPageChange
+  } = args;
+  const isControlled = controlledPage !== void 0;
+  const [uncontrolledPage, setUncontrolledPage] = React.useState(defaultPage);
+  const onChangeRef = React.useRef(onPageChange);
+  onChangeRef.current = onPageChange;
+  const safePageCount = Math.max(1, Math.floor(pageCount));
+  const rawPage = isControlled ? controlledPage : uncontrolledPage;
+  const currentPage = Math.min(Math.max(1, Math.floor(rawPage)), safePageCount);
+  const goToPage = React.useCallback(
+    (next2) => {
+      const clamped = Math.min(Math.max(1, Math.floor(next2)), Math.max(1, Math.floor(pageCount)));
+      if (!isControlled) {
+        setUncontrolledPage(clamped);
+      }
+      onChangeRef.current?.(clamped);
+    },
+    [isControlled, pageCount]
+  );
+  const prev = React.useCallback(() => goToPage(currentPage - 1), [goToPage, currentPage]);
+  const next = React.useCallback(() => goToPage(currentPage + 1), [goToPage, currentPage]);
+  const first = React.useCallback(() => goToPage(1), [goToPage]);
+  const last = React.useCallback(() => goToPage(safePageCount), [goToPage, safePageCount]);
+  const pages = React.useMemo(() => {
+    const items = [];
+    const safeSibling = Math.max(0, Math.floor(siblingCount));
+    const safeBoundary = Math.max(0, Math.floor(boundaryCount));
+    if (showFirstLast) {
+      items.push({ type: "first", disabled: currentPage <= 1 });
     }
-    node.style.transitionProperty = "background-color, backdrop-filter, -webkit-backdrop-filter";
-    node.style.transitionDuration = "150ms, 200ms, 200ms";
-    node.style.transitionTimingFunction = "ease-out";
-    if (entered) {
-      node.style.backgroundColor = SCRIM_COLOR2;
-      node.style.backdropFilter = `blur(${BLUR_AMOUNT2}px)`;
-      node.style.setProperty("-webkit-backdrop-filter", `blur(${BLUR_AMOUNT2}px)`);
-    } else {
-      node.style.backgroundColor = "rgba(0, 0, 0, 0)";
-      node.style.backdropFilter = "blur(0px)";
-      node.style.setProperty("-webkit-backdrop-filter", "blur(0px)");
+    if (showPrevNext) {
+      items.push({ type: "prev", disabled: currentPage <= 1 });
     }
-  }, [entered]);
-  React.useEffect(() => {
-    if (!ctx.open) {
-      return;
+    const startPages = range(1, Math.min(safeBoundary, safePageCount));
+    const endPages = range(Math.max(safePageCount - safeBoundary + 1, safeBoundary + 1), safePageCount);
+    const siblingsStart = Math.max(
+      Math.min(currentPage - safeSibling, safePageCount - safeBoundary - safeSibling * 2 - 1),
+      safeBoundary + 2
+    );
+    const siblingsEnd = Math.min(
+      Math.max(currentPage + safeSibling, safeBoundary + safeSibling * 2 + 2),
+      endPages.length > 0 ? endPages[0] - 2 : safePageCount - 1
+    );
+    const middle = [];
+    if (siblingsStart > safeBoundary + 2) {
+      middle.push("ellipsis");
+    } else if (safeBoundary + 1 < safePageCount - safeBoundary) {
+      middle.push(safeBoundary + 1);
     }
-    if (reactNative.Platform.OS !== "web") {
-      return;
+    for (const p of range(siblingsStart, siblingsEnd)) {
+      middle.push(p);
     }
-    if (typeof document === "undefined") {
-      return;
+    if (siblingsEnd < safePageCount - safeBoundary - 1) {
+      middle.push("ellipsis");
+    } else if (safePageCount - safeBoundary > safeBoundary) {
+      middle.push(safePageCount - safeBoundary);
     }
-    const previouslyFocused = document.activeElement;
-    const prevBodyOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-    const focusFirst = /* @__PURE__ */ __name(() => {
-      const node = contentRef.current;
-      if (!node) {
+    const seen = /* @__PURE__ */ new Set();
+    const pushPage = /* @__PURE__ */ __name((n) => {
+      if (n < 1 || n > safePageCount || seen.has(n)) {
         return;
       }
-      const focusable = node.querySelectorAll(FOCUSABLE_SELECTOR2);
-      const first = focusable[0];
-      if (first) {
-        first.focus();
+      seen.add(n);
+      items.push({ type: "page", page: n, selected: n === currentPage });
+    }, "pushPage");
+    for (const n of startPages) {
+      pushPage(n);
+    }
+    for (const m of middle) {
+      if (m === "ellipsis") {
+        items.push({ type: "ellipsis" });
       } 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 = contentRef.current;
-      if (!node) {
-        return;
+        pushPage(m);
       }
-      const focusable = Array.from(node.querySelectorAll(FOCUSABLE_SELECTOR2)).filter(
-        (el) => el.offsetParent !== null || el === document.activeElement
-      );
-      if (focusable.length === 0) {
-        event.preventDefault();
-        return;
+    }
+    for (const n of endPages) {
+      pushPage(n);
+    }
+    if (showPrevNext) {
+      items.push({ type: "next", disabled: currentPage >= safePageCount });
+    }
+    if (showFirstLast) {
+      items.push({ type: "last", disabled: currentPage >= safePageCount });
+    }
+    return items;
+  }, [currentPage, safePageCount, siblingCount, boundaryCount, showFirstLast, showPrevNext]);
+  return {
+    page: currentPage,
+    pages,
+    canPrev: currentPage > 1,
+    canNext: currentPage < safePageCount,
+    goToPage,
+    prev,
+    next,
+    first,
+    last
+  };
+}
+__name(usePagination, "usePagination");
+var TableContext = React.createContext({
+  striped: false,
+  compact: false,
+  bordered: false,
+  rowIndex: 0,
+  setRowIndex: /* @__PURE__ */ __name(() => {
+  }, "setRowIndex")
+});
+function buildTableCompound(parts) {
+  return Object.assign(parts.Root, {
+    Header: parts.Header,
+    Body: parts.Body,
+    Footer: parts.Footer,
+    Row: parts.Row,
+    HeaderCell: parts.HeaderCell,
+    Cell: parts.Cell,
+    Caption: parts.Caption
+  });
+}
+__name(buildTableCompound, "buildTableCompound");
+var TableRoot = /* @__PURE__ */ __name(({ striped = false, compact = false, bordered = false, children, className, testID }) => {
+  const [rowIndex, setRowIndex] = React.useState(0);
+  const ctxValue = {
+    striped,
+    compact,
+    bordered,
+    rowIndex,
+    setRowIndex
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(TableContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx("div", { className: cn("w-full overflow-auto", className), children: /* @__PURE__ */ jsxRuntime.jsx(
+    "table",
+    {
+      className: cn(
+        "w-full caption-bottom text-sm",
+        bordered && "border border-semantic-border-default",
+        className
+      ),
+      ...testID !== void 0 ? { "data-testid": testID } : {},
+      children
+    }
+  ) }) });
+}, "TableRoot");
+var TableHeader = /* @__PURE__ */ __name(({ children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "thead",
+  {
+    className: cn("[&_tr]:border-b [&_tr]:border-semantic-border-default", className),
+    ...testID !== void 0 ? { "data-testid": testID } : {},
+    children
+  }
+), "TableHeader");
+var TableBody = /* @__PURE__ */ __name(({ children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tbody",
+  {
+    className: cn("[&_tr:last-child]:border-0", className),
+    ...testID !== void 0 ? { "data-testid": testID } : {},
+    children
+  }
+), "TableBody");
+var TableFooter = /* @__PURE__ */ __name(({ children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "tfoot",
+  {
+    className: cn("border-t border-semantic-border-default font-medium", className),
+    ...testID !== void 0 ? { "data-testid": testID } : {},
+    children
+  }
+), "TableFooter");
+var TableRow = /* @__PURE__ */ __name(({ selected = false, onPress, children, className, testID }) => {
+  const colors = useThemeColors();
+  const handleClick = React.useCallback(() => {
+    onPress?.();
+  }, [onPress]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    "tr",
+    {
+      className: cn(
+        "border-b border-semantic-border-default transition-colors",
+        onPress && "cursor-pointer hover:bg-semantic-background-subtle",
+        selected && "bg-semantic-background-subtle",
+        className
+      ),
+      style: selected ? { backgroundColor: colors.semantic.background.subtle } : void 0,
+      onClick: onPress ? handleClick : void 0,
+      ...testID !== void 0 ? { "data-testid": testID } : {},
+      children
+    }
+  );
+}, "TableRow");
+var TableHeaderCell = /* @__PURE__ */ __name(({ align = "left", colSpan, children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "th",
+  {
+    className: cn(
+      "h-10 px-4 font-medium text-semantic-text-secondary",
+      align === "right" && "text-right",
+      align === "center" && "text-center",
+      align === "left" && "text-left",
+      className
+    ),
+    colSpan,
+    ...testID !== void 0 ? { "data-testid": testID } : {},
+    children
+  }
+), "TableHeaderCell");
+var TableCell = /* @__PURE__ */ __name(({ align = "left", colSpan, children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "td",
+  {
+    className: cn(
+      "p-4 align-middle",
+      align === "right" && "text-right",
+      align === "center" && "text-center",
+      align === "left" && "text-left",
+      className
+    ),
+    colSpan,
+    ...testID !== void 0 ? { "data-testid": testID } : {},
+    children
+  }
+), "TableCell");
+var TableCaption = /* @__PURE__ */ __name(({ children, className, testID }) => /* @__PURE__ */ jsxRuntime.jsx(
+  "caption",
+  {
+    className: cn("mt-4 text-sm text-semantic-text-secondary", className),
+    ...testID !== void 0 ? { "data-testid": testID } : {},
+    children
+  }
+), "TableCaption");
+var Table = buildTableCompound({
+  Root: TableRoot,
+  Header: TableHeader,
+  Body: TableBody,
+  Footer: TableFooter,
+  Row: TableRow,
+  HeaderCell: TableHeaderCell,
+  Cell: TableCell,
+  Caption: TableCaption
+});
+function sortData(data, sort) {
+  if (!sort) {
+    return data;
+  }
+  const key = sort.id;
+  return [...data].sort((a, b) => {
+    const av = a[key];
+    const bv = b[key];
+    if (av == null && bv == null) {
+      return 0;
+    }
+    if (av == null) {
+      return 1;
+    }
+    if (bv == null) {
+      return -1;
+    }
+    const cmp2 = av < bv ? -1 : av > bv ? 1 : 0;
+    return sort.direction === "asc" ? cmp2 : -cmp2;
+  });
+}
+__name(sortData, "sortData");
+function SortIndicator({ direction }) {
+  if (direction === void 0) {
+    return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: 4, opacity: 0.3 }, children: "\u21C5" });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { style: { marginLeft: 4 }, children: direction === "asc" ? "\u2191" : "\u2193" });
+}
+__name(SortIndicator, "SortIndicator");
+function DataTable({
+  data,
+  columns,
+  pageSize = 10,
+  defaultSort,
+  onRowPress,
+  emptyState,
+  striped,
+  compact,
+  bordered,
+  testID,
+  className
+}) {
+  const [sort, setSort] = React.useState(defaultSort ?? null);
+  const sorted = React.useMemo(() => sortData(data, sort), [data, sort]);
+  const pageCount = Math.max(1, Math.ceil(sorted.length / pageSize));
+  const { page, goToPage, canPrev, canNext } = usePagination({ pageCount, defaultPage: 1 });
+  const pageSlice = React.useMemo(() => {
+    const start = (page - 1) * pageSize;
+    return sorted.slice(start, start + pageSize);
+  }, [sorted, page, pageSize]);
+  const handleSort = /* @__PURE__ */ __name((colId) => {
+    setSort((prev) => {
+      if (prev?.id !== colId) {
+        goToPage(1);
+        return { id: colId, direction: "asc" };
       }
-      const first = focusable[0];
-      const last = focusable[focusable.length - 1];
-      if (!first || !last) {
-        return;
+      if (prev.direction === "asc") {
+        return { id: colId, direction: "desc" };
       }
-      if (event.shiftKey) {
-        if (document.activeElement === first || !node.contains(document.activeElement)) {
-          event.preventDefault();
-          last.focus();
-        }
-      } else if (document.activeElement === last) {
-        event.preventDefault();
-        first.focus();
+      goToPage(1);
+      return null;
+    });
+  }, "handleSort");
+  const tableProps = {};
+  if (striped !== void 0) {
+    tableProps.striped = striped;
+  }
+  if (compact !== void 0) {
+    tableProps.compact = compact;
+  }
+  if (bordered !== void 0) {
+    tableProps.bordered = bordered;
+  }
+  if (testID !== void 0) {
+    tableProps.testID = testID;
+  }
+  if (className !== void 0) {
+    tableProps.className = className;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { width: "100%" }, children: [
+    /* @__PURE__ */ jsxRuntime.jsxs(Table, { ...tableProps, children: [
+      /* @__PURE__ */ jsxRuntime.jsx(Table.Header, { children: /* @__PURE__ */ jsxRuntime.jsx(Table.Row, { children: columns.map((col) => {
+        const align = col.align;
+        return /* @__PURE__ */ jsxRuntime.jsx(Table.HeaderCell, { ...align !== void 0 ? { align } : {}, children: col.sortable ? /* @__PURE__ */ jsxRuntime.jsxs(
+          reactNative.Pressable,
+          {
+            accessibilityRole: "button",
+            accessibilityLabel: `Sort by ${col.id}`,
+            "aria-label": `Sort by ${col.id}`,
+            onPress: () => handleSort(col.id),
+            style: { flexDirection: "row", alignItems: "center" },
+            children: [
+              typeof col.header === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { children: col.header }) : col.header,
+              /* @__PURE__ */ jsxRuntime.jsx(
+                SortIndicator,
+                {
+                  ...sort?.id === col.id ? { direction: sort.direction } : {}
+                }
+              )
+            ]
+          }
+        ) : col.header }, col.id);
+      }) }) }),
+      /* @__PURE__ */ jsxRuntime.jsx(Table.Body, { children: pageSlice.length === 0 ? /* @__PURE__ */ jsxRuntime.jsx(Table.Row, { children: /* @__PURE__ */ jsxRuntime.jsx(Table.Cell, { colSpan: columns.length, children: /* @__PURE__ */ jsxRuntime.jsx(EmptyState, { children: emptyState ?? "No data" }) }) }) : pageSlice.map((row, i) => /* @__PURE__ */ jsxRuntime.jsx(
+        Table.Row,
+        {
+          ...onRowPress !== void 0 ? { onPress: /* @__PURE__ */ __name(() => onRowPress(row), "onPress") } : {},
+          children: columns.map((col) => {
+            const colAlign = col.align;
+            return /* @__PURE__ */ jsxRuntime.jsx(
+              Table.Cell,
+              {
+                ...colAlign !== void 0 ? { align: colAlign } : {},
+                children: col.cell(row)
+              },
+              col.id
+            );
+          })
+        },
+        i
+      )) })
+    ] }),
+    pageCount > 1 && /* @__PURE__ */ jsxRuntime.jsx(
+      PaginationControls,
+      {
+        page,
+        pageCount,
+        canPrev,
+        canNext,
+        goToPage
       }
-    }, "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 onOverlayPress = React.useCallback(() => ctx.setOpen(false), [ctx]);
+    )
+  ] });
+}
+__name(DataTable, "DataTable");
+function EmptyState({ children }) {
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { paddingVertical: 32, alignItems: "center" }, children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { color: "#888", fontSize: 14 }, children }) : children });
+}
+__name(EmptyState, "EmptyState");
+function PaginationControls({
+  page,
+  pageCount,
+  canPrev,
+  canNext,
+  goToPage
+}) {
   return /* @__PURE__ */ jsxRuntime.jsxs(
-    reactNative.Modal,
+    reactNative.View,
     {
-      visible: ctx.open,
-      transparent: true,
-      animationType: reactNative.Platform.OS === "web" ? "none" : "fade",
-      onRequestClose: () => ctx.setOpen(false),
+      style: {
+        flexDirection: "row",
+        justifyContent: "flex-end",
+        alignItems: "center",
+        paddingVertical: 8,
+        gap: 8
+      },
       children: [
-        /* @__PURE__ */ jsxRuntime.jsx(BlurBackdrop, { intensity: 60, tint: scheme === "dark" ? "dark" : "light", style: reactNative.StyleSheet.absoluteFill }),
         /* @__PURE__ */ jsxRuntime.jsx(
           reactNative.Pressable,
           {
-            accessibilityRole: "none",
-            "aria-hidden": true,
-            ref: (node) => {
-              overlayDomRef.current = node;
-            },
-            style: overlayStyle,
-            onPress: onOverlayPress,
-            children: /* @__PURE__ */ jsxRuntime.jsx(
-              reactNative.Pressable,
-              {
-                onPress: (event) => event.stopPropagation?.(),
-                ref: (node) => {
-                  contentRef.current = node;
-                },
-                role: "dialog",
-                accessibilityRole: "none",
-                "aria-modal": true,
-                "aria-labelledby": ctx.titleId,
-                "aria-describedby": ctx.descriptionId,
-                ...testID !== void 0 ? { testID } : {},
-                className: cn("w-full max-w-md rounded-xl bg-semantic-background-elevated p-6 gap-3", className),
-                style: [contentStyle, { backgroundColor: colors.semantic.background.elevated }, enterStyle],
-                children: /* @__PURE__ */ jsxRuntime.jsx(
-                  reactNative.View,
-                  {
-                    className: "flex-col gap-1.5",
-                    style: { flexDirection: "column", gap: px(colors.spacing["2"]) - 2 },
-                    children
-                  }
-                )
-              }
-            )
+            onPress: canPrev ? () => goToPage(page - 1) : void 0,
+            accessibilityRole: "button",
+            accessibilityLabel: "Previous page",
+            "aria-label": "Previous page",
+            "aria-disabled": !canPrev,
+            style: { opacity: canPrev ? 1 : 0.4, paddingHorizontal: 8 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 14 }, children: "\u2039 Prev" })
           }
-        )
-      ]
-    }
-  );
-}, "DialogContent");
-var DialogTitle = /* @__PURE__ */ __name(({ children, className }) => {
-  const ctx = useDialogContext("DialogTitle");
-  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
+        ),
+        /* @__PURE__ */ jsxRuntime.jsxs(reactNative.Text, { style: { fontSize: 14 }, "aria-live": "polite", children: [
+          page,
+          " / ",
+          pageCount
+        ] }),
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Pressable,
+          {
+            onPress: canNext ? () => goToPage(page + 1) : void 0,
+            accessibilityRole: "button",
+            accessibilityLabel: "Next page",
+            "aria-label": "Next page",
+            "aria-disabled": !canNext,
+            style: { opacity: canNext ? 1 : 0.4, paddingHorizontal: 8 },
+            children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: { fontSize: 14 }, children: "Next \u203A" })
+          }
+        )
+      ]
     }
   );
-}, "DialogTitle");
-var DialogDescription = /* @__PURE__ */ __name(({ children, className }) => {
-  const ctx = useDialogContext("DialogDescription");
+}
+__name(PaginationControls, "PaginationControls");
+function formatDate(date$1, locale) {
+  try {
+    return new Intl.DateTimeFormat(locale, { dateStyle: "medium" }).format(date$1.toDate(date.getLocalTimeZone()));
+  } catch {
+    return `${date$1.year}-${String(date$1.month).padStart(2, "0")}-${String(date$1.day).padStart(2, "0")}`;
+  }
+}
+__name(formatDate, "formatDate");
+function CalendarIcon({ size = 16, color = "currentColor" }) {
   const colors = useThemeColors();
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "svg",
+      {
+        width: size,
+        height: size,
+        viewBox: "0 0 24 24",
+        fill: "none",
+        stroke: color,
+        strokeWidth: "2",
+        strokeLinecap: "round",
+        strokeLinejoin: "round",
+        "aria-hidden": "true",
+        children: /* @__PURE__ */ jsxRuntime.jsx("path", { d: "M8 2v4M16 2v4M3 10h18M5 4h14a2 2 0 0 1 2 2v14a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V6a2 2 0 0 1 2-2z" })
+      }
+    );
+  }
+  const resolvedColor = color === "currentColor" ? colors.semantic.text.muted : color;
   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
+      accessibilityElementsHidden: true,
+      importantForAccessibility: "no-hide-descendants",
+      style: { fontSize: size, lineHeight: size, color: resolvedColor },
+      children: "\u{1F4C5}"
     }
   );
-}, "DialogDescription");
-var DialogClose = /* @__PURE__ */ __name(({
-  asChild = true,
-  children,
+}
+__name(CalendarIcon, "CalendarIcon");
+function buildCalendarOptional(minValue, maxValue, isDateUnavailable, firstDayOfWeek) {
+  const out = {};
+  if (minValue !== void 0) {
+    out.minValue = minValue;
+  }
+  if (maxValue !== void 0) {
+    out.maxValue = maxValue;
+  }
+  if (isDateUnavailable !== void 0) {
+    out.isDateUnavailable = isDateUnavailable;
+  }
+  if (firstDayOfWeek !== void 0) {
+    out.firstDayOfWeek = firstDayOfWeek;
+  }
+  return out;
+}
+__name(buildCalendarOptional, "buildCalendarOptional");
+function buildTriggerAriaProps(ariaProps) {
+  const out = {};
+  if (ariaProps["aria-labelledby"] !== void 0) {
+    out["aria-labelledby"] = ariaProps["aria-labelledby"];
+  }
+  if (ariaProps["aria-describedby"] !== void 0) {
+    out["aria-describedby"] = ariaProps["aria-describedby"];
+  }
+  if (ariaProps["aria-invalid"] !== void 0) {
+    out["aria-invalid"] = ariaProps["aria-invalid"];
+  }
+  if (ariaProps["aria-required"] !== void 0) {
+    out["aria-required"] = ariaProps["aria-required"];
+  }
+  return out;
+}
+__name(buildTriggerAriaProps, "buildTriggerAriaProps");
+var DatePickerRoot = /* @__PURE__ */ __name(({
+  value,
+  defaultValue: defaultValue2,
+  onChange,
+  locale: localeProp,
+  minValue,
+  maxValue,
+  isDateUnavailable,
+  firstDayOfWeek,
+  placeholder,
+  disabled = false,
+  id,
+  name: _name,
   className,
   testID,
-  accessibilityLabel = "Close"
+  ...ariaProps
 }) => {
-  const ctx = useDialogContext("DialogClose");
+  const providerLocale = useLocale();
+  const locale = localeProp ?? providerLocale;
+  const [open, setOpen] = React.useState(false);
+  const isControlled = value !== void 0;
+  const [inner, setInner] = React.useState(defaultValue2 ?? null);
+  const current = isControlled ? value ?? null : inner;
+  const handleChange = React.useCallback(
+    (date) => {
+      if (!isControlled) {
+        setInner(date);
+      }
+      onChange?.(date);
+      setOpen(false);
+    },
+    [isControlled, onChange]
+  );
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!disabled) {
+        setOpen(next);
+      }
+    },
+    [disabled]
+  );
+  const displayValue = current ? formatDate(current, locale) : null;
+  const calendarOptional = buildCalendarOptional(minValue, maxValue, isDateUnavailable, firstDayOfWeek);
+  const triggerAriaProps = buildTriggerAriaProps(ariaProps);
   const colors = useThemeColors();
-  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,
+  const hasError = ariaProps["aria-invalid"] === true || ariaProps["aria-invalid"] === "true";
+  const pressableStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: px(colors.radius.md),
+    paddingHorizontal: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["2"]),
+    backgroundColor: colors.semantic.background.elevated,
+    borderColor: hasError ? colors.color.danger : colors.semantic.border.default,
+    opacity: disabled ? 0.6 : 1
+  };
+  const textStyle = {
+    flex: 1,
+    fontFamily: colors.fontFamily.body,
+    fontSize: px(colors.fontSize.md),
+    color: displayValue ? colors.semantic.text.default : colors.semantic.text.muted
+  };
+  const triggerExtraProps = {
+    role: "combobox",
+    accessibilityRole: "button",
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    ...triggerAriaProps
+  };
+  if (id !== void 0) {
+    triggerExtraProps.id = id;
+    triggerExtraProps.nativeID = id;
+  }
+  if (testID !== void 0) {
+    triggerExtraProps.testID = testID;
+  }
+  if (hasError) {
+    triggerExtraProps["aria-invalid"] = true;
+  }
+  if (ariaProps["aria-required"]) {
+    triggerExtraProps["aria-required"] = true;
+  }
+  if (disabled) {
+    triggerExtraProps["aria-disabled"] = true;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Trigger, { asChild: false, className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs(
+      reactNative.Pressable,
       {
-        onClick: fire(child.props.onClick),
-        onPress: fire(child.props.onPress),
-        ...testID !== void 0 ? { "data-testid": testID } : {},
-        ...className !== void 0 ? { className } : {},
-        children: child
+        onPress: disabled ? void 0 : () => setOpen(!open),
+        disabled,
+        className: cn(
+          "flex-row items-center rounded-md border px-3 py-2",
+          hasError ? "border-semantic-interactive-destructive" : "border-semantic-border-default",
+          disabled ? "opacity-60" : void 0,
+          className
+        ),
+        style: pressableStyle,
+        ...triggerExtraProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: textStyle, numberOfLines: 1, children: displayValue ?? placeholder ?? "" }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginLeft: px(colors.spacing["2"]) }, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, { size: 16, color: colors.semantic.text.muted }) })
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { "aria-label": "Date picker", side: "bottom", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Calendar,
+      {
+        mode: "single",
+        value: current,
+        onChange: (date) => {
+          handleChange(date);
+        },
+        locale,
+        ...calendarOptional
+      }
+    ) })
+  ] });
+}, "DatePickerRoot");
+var DatePickerRange = /* @__PURE__ */ __name(({
+  value,
+  defaultValue: defaultValue2,
+  onChange,
+  locale: localeProp,
+  minValue,
+  maxValue,
+  isDateUnavailable,
+  firstDayOfWeek,
+  placeholder,
+  disabled = false,
+  id,
+  name: _name,
+  className,
+  testID,
+  ...ariaProps
+}) => {
+  const providerLocale = useLocale();
+  const locale = localeProp ?? providerLocale;
+  const [open, setOpen] = React.useState(false);
+  const isControlled = value !== void 0;
+  const [inner, setInner] = React.useState(defaultValue2 ?? { start: null, end: null });
+  const current = isControlled ? value ?? { start: null, end: null } : inner;
+  const calendarValue = current.start !== null ? { start: current.start, end: current.end } : null;
+  const handleChange = React.useCallback(
+    (calRange) => {
+      const next = {
+        start: calRange?.start ?? null,
+        end: calRange?.end ?? null
+      };
+      if (!isControlled) {
+        setInner(next);
       }
-    );
+      onChange?.(next);
+      if (next.start !== null && next.end !== null) {
+        setOpen(false);
+      }
+    },
+    [isControlled, onChange]
+  );
+  const handleOpenChange = React.useCallback(
+    (next) => {
+      if (!disabled) {
+        setOpen(next);
+      }
+    },
+    [disabled]
+  );
+  let displayValue = null;
+  if (current.start !== null) {
+    const startStr = formatDate(current.start, locale);
+    const endStr = current.end !== null ? formatDate(current.end, locale) : "";
+    displayValue = `${startStr} \u2013 ${endStr}`;
   }
-  if (children !== void 0) {
-    return /* @__PURE__ */ jsxRuntime.jsx(
+  const calendarOptional = buildCalendarOptional(minValue, maxValue, isDateUnavailable, firstDayOfWeek);
+  const triggerAriaProps = buildTriggerAriaProps(ariaProps);
+  const colors = useThemeColors();
+  const hasError = ariaProps["aria-invalid"] === true || ariaProps["aria-invalid"] === "true";
+  const pressableStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    borderWidth: 1,
+    borderRadius: px(colors.radius.md),
+    paddingHorizontal: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["2"]),
+    backgroundColor: colors.semantic.background.elevated,
+    borderColor: hasError ? colors.color.danger : colors.semantic.border.default,
+    opacity: disabled ? 0.6 : 1
+  };
+  const textStyle = {
+    flex: 1,
+    fontFamily: colors.fontFamily.body,
+    fontSize: px(colors.fontSize.md),
+    color: displayValue ? colors.semantic.text.default : colors.semantic.text.muted
+  };
+  const triggerExtraProps = {
+    role: "combobox",
+    accessibilityRole: "button",
+    "aria-haspopup": "dialog",
+    "aria-expanded": open,
+    ...triggerAriaProps
+  };
+  if (id !== void 0) {
+    triggerExtraProps.id = id;
+    triggerExtraProps.nativeID = id;
+  }
+  if (testID !== void 0) {
+    triggerExtraProps.testID = testID;
+  }
+  if (hasError) {
+    triggerExtraProps["aria-invalid"] = true;
+  }
+  if (ariaProps["aria-required"]) {
+    triggerExtraProps["aria-required"] = true;
+  }
+  if (disabled) {
+    triggerExtraProps["aria-disabled"] = true;
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(Popover, { open, onOpenChange: handleOpenChange, children: [
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Trigger, { asChild: false, className: cn(className), children: /* @__PURE__ */ jsxRuntime.jsxs(
       reactNative.Pressable,
       {
-        onPress,
-        role: "button",
-        accessibilityRole: "button",
-        accessibilityLabel,
-        "aria-label": accessibilityLabel,
-        ...testID !== void 0 ? { testID } : {},
-        ...className !== void 0 ? { className } : {},
-        children: wrapStringChildren4(children)
+        onPress: disabled ? void 0 : () => setOpen(!open),
+        disabled,
+        className: cn(
+          "flex-row items-center rounded-md border px-3 py-2",
+          hasError ? "border-semantic-interactive-destructive" : "border-semantic-border-default",
+          disabled ? "opacity-60" : void 0,
+          className
+        ),
+        style: pressableStyle,
+        ...triggerExtraProps,
+        children: [
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: textStyle, numberOfLines: 1, children: displayValue ?? placeholder ?? "" }),
+          /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginLeft: px(colors.spacing["2"]) }, children: /* @__PURE__ */ jsxRuntime.jsx(CalendarIcon, { size: 16, color: colors.semantic.text.muted }) })
+        ]
       }
-    );
-  }
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.Pressable,
-    {
-      onPress,
-      role: "button",
-      accessibilityRole: "button",
-      accessibilityLabel,
-      "aria-label": accessibilityLabel,
-      ...testID !== void 0 ? { testID } : {},
-      className: cn("absolute right-3 top-3 w-8 h-8 items-center justify-center rounded-md", className),
-      style: {
-        position: "absolute",
-        right: px(colors.spacing["3"]),
-        top: px(colors.spacing["3"]),
-        // 32×32 close hit target — component-density literal — not from theme
-        width: 32,
-        height: 32,
-        alignItems: "center",
-        justifyContent: "center",
-        borderRadius: px(colors.radius.md)
-      },
-      children: /* @__PURE__ */ jsxRuntime.jsx(defaultSemanticIcons.close, { size: 18, color: colors.semantic.text.muted })
-    }
-  );
-}, "DialogClose");
-var DialogFooter = /* @__PURE__ */ __name(({ children, className }) => {
-  const colors = useThemeColors();
-  return /* @__PURE__ */ jsxRuntime.jsx(
-    reactNative.View,
-    {
-      className: cn("mt-4 flex-row items-center justify-end gap-2", className),
-      style: {
-        marginTop: px(colors.spacing["4"]),
-        flexDirection: "row",
-        alignItems: "center",
-        justifyContent: "flex-end",
-        gap: px(colors.spacing["2"])
-      },
-      children
-    }
-  );
-}, "DialogFooter");
-var Dialog = Object.assign(DialogRoot, {
-  Trigger: DialogTrigger,
-  Content: DialogContent,
-  Title: DialogTitle,
-  Description: DialogDescription,
-  Footer: DialogFooter,
-  Close: DialogClose
+    ) }),
+    /* @__PURE__ */ jsxRuntime.jsx(Popover.Content, { "aria-label": "Date range picker", side: "bottom", align: "start", children: /* @__PURE__ */ jsxRuntime.jsx(
+      Calendar,
+      {
+        mode: "range",
+        value: calendarValue,
+        onChange: (range2) => {
+          handleChange(range2);
+        },
+        locale,
+        ...calendarOptional
+      }
+    ) })
+  ] });
+}, "DatePickerRange");
+var DatePicker = Object.assign(DatePickerRoot, {
+  Range: DatePickerRange
 });
 var Empty = /* @__PURE__ */ __name(({ icon, title, description, action, className, testID }) => {
   const colors = useThemeColors();
@@ -9374,9 +10104,164 @@ function withAlpha(color, alpha) {
     const b = Number.parseInt(expanded.slice(5, 7), 16);
     return `rgba(${r}, ${g}, ${b}, ${alpha})`;
   }
-  return color;
-}
-__name(withAlpha, "withAlpha");
+  return color;
+}
+__name(withAlpha, "withAlpha");
+var HoverCardContext = React.createContext(null);
+function useHoverCardContext(caller) {
+  const ctx = React.useContext(HoverCardContext);
+  if (!ctx) {
+    throw new Error(`<${caller}> must be rendered inside <HoverCard>.`);
+  }
+  return ctx;
+}
+__name(useHoverCardContext, "useHoverCardContext");
+var DEFAULT_OPEN_DELAY = 300;
+var DEFAULT_CLOSE_DELAY = 200;
+var HoverCardRoot = /* @__PURE__ */ __name(({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  openDelay = DEFAULT_OPEN_DELAY,
+  closeDelay = DEFAULT_CLOSE_DELAY,
+  children
+}) => {
+  const [inner, setInner] = React.useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : inner;
+  const id = React.useId();
+  const setOpen = React.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      onOpenChange?.(next);
+    },
+    [isControlled, onOpenChange]
+  );
+  const openTimer = React.useRef(null);
+  const closeTimer = React.useRef(null);
+  const cancelTimers = React.useCallback(() => {
+    if (openTimer.current) {
+      clearTimeout(openTimer.current);
+      openTimer.current = null;
+    }
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+  }, []);
+  const requestOpen = React.useCallback(() => {
+    if (closeTimer.current) {
+      clearTimeout(closeTimer.current);
+      closeTimer.current = null;
+    }
+    if (openTimer.current) {
+      return;
+    }
+    if (openDelay <= 0) {
+      setOpen(true);
+      return;
+    }
+    openTimer.current = setTimeout(() => {
+      openTimer.current = null;
+      setOpen(true);
+    }, openDelay);
+  }, [openDelay, setOpen]);
+  const requestClose = React.useCallback(() => {
+    if (openTimer.current) {
+      clearTimeout(openTimer.current);
+      openTimer.current = null;
+    }
+    if (closeTimer.current) {
+      return;
+    }
+    if (closeDelay <= 0) {
+      setOpen(false);
+      return;
+    }
+    closeTimer.current = setTimeout(() => {
+      closeTimer.current = null;
+      setOpen(false);
+    }, closeDelay);
+  }, [closeDelay, setOpen]);
+  React.useEffect(() => () => cancelTimers(), [cancelTimers]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    HoverCardContext.Provider,
+    {
+      value: { open, requestOpen, requestClose, cancelTimers, contentId: `hc-content-${id}` },
+      children: /* @__PURE__ */ jsxRuntime.jsx(Popover, { open, onOpenChange: setOpen, children })
+    }
+  );
+}, "HoverCardRoot");
+var HoverCardTrigger = /* @__PURE__ */ __name(({ asChild = true, children, className, testID }) => {
+  const ctx = useHoverCardContext("HoverCard.Trigger");
+  const handleMouseEnter = React.useCallback(() => {
+    ctx.cancelTimers();
+    ctx.requestOpen();
+  }, [ctx]);
+  const handleMouseLeave = React.useCallback(() => {
+    ctx.requestClose();
+  }, [ctx]);
+  const handlers = {
+    onMouseEnter: handleMouseEnter,
+    onMouseLeave: handleMouseLeave,
+    "aria-haspopup": "dialog",
+    "aria-expanded": ctx.open
+  };
+  if (asChild && React.isValidElement(children)) {
+    const child = children;
+    const compose = /* @__PURE__ */ __name((existing, next) => (event) => {
+      existing?.(event);
+      next(event);
+    }, "compose");
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      Slot,
+      {
+        ...handlers,
+        onMouseEnter: compose(child.props.onMouseEnter, handleMouseEnter),
+        onMouseLeave: compose(child.props.onMouseLeave, handleMouseLeave),
+        ...className !== void 0 ? { className } : {},
+        ...testID !== void 0 ? { "data-testid": testID } : {},
+        children: child
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx("span", { ...handlers, className, ...testID !== void 0 ? { "data-testid": testID } : {}, children });
+}, "HoverCardTrigger");
+var HoverCardContent = /* @__PURE__ */ __name(({ side = "bottom", align = "start", children, className, testID }) => {
+  const ctx = useHoverCardContext("HoverCard.Content");
+  const handleMouseEnter = React.useCallback(() => {
+    ctx.cancelTimers();
+  }, [ctx]);
+  const handleMouseLeave = React.useCallback(() => {
+    ctx.requestClose();
+  }, [ctx]);
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    Popover.Content,
+    {
+      side,
+      align,
+      ...className !== void 0 ? { className } : {},
+      ...testID !== void 0 ? { testID } : {},
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        "div",
+        {
+          id: ctx.contentId,
+          role: "dialog",
+          "aria-label": "Hover card",
+          onMouseEnter: handleMouseEnter,
+          onMouseLeave: handleMouseLeave,
+          children
+        }
+      )
+    }
+  );
+}, "HoverCardContent");
+var HoverCard = Object.assign(HoverCardRoot, {
+  Trigger: HoverCardTrigger,
+  Content: HoverCardContent
+});
 var ALIGN_CLASS = {
   start: "items-start",
   center: "items-center",
@@ -9749,6 +10634,250 @@ var InputGroup = Object.assign(InputGroupRoot, {
   Addon: InputGroupAddon,
   Input: InputGroupInput
 });
+function isAllowed(char, pattern) {
+  if (pattern === "numeric") {
+    return /^\d$/.test(char);
+  }
+  return /^[a-zA-Z0-9]$/.test(char);
+}
+__name(isAllowed, "isAllowed");
+function filterValue(value, pattern, length) {
+  return value.split("").filter((c) => isAllowed(c, pattern)).slice(0, length).join("");
+}
+__name(filterValue, "filterValue");
+var InputOTP = /* @__PURE__ */ __name(({
+  value = "",
+  onChange,
+  onComplete,
+  length = 6,
+  placeholder = "\xB7",
+  pattern = "numeric",
+  disabled = false,
+  autoFocus = false,
+  id,
+  name,
+  "aria-label": ariaLabel = "One-time code",
+  "aria-labelledby": ariaLabelledBy,
+  "aria-describedby": ariaDescribedBy,
+  "aria-invalid": ariaInvalid,
+  className,
+  testID
+}) => {
+  const colors = useThemeColors();
+  const [cells, setCells] = React.useState(() => {
+    const filtered = filterValue(value, pattern, length);
+    return Array.from({ length }, (_, i) => filtered[i] ?? "");
+  });
+  const prevValue = React.useRef(value);
+  React.useEffect(() => {
+    if (value !== prevValue.current) {
+      prevValue.current = value;
+      const filtered = filterValue(value, pattern, length);
+      setCells(Array.from({ length }, (_, i) => filtered[i] ?? ""));
+    }
+  }, [value, pattern, length]);
+  const inputRefs = React.useRef([]);
+  const focusCell = React.useCallback(
+    (idx) => {
+      if (idx >= 0 && idx < length) {
+        inputRefs.current[idx]?.focus();
+      }
+    },
+    [length]
+  );
+  const updateCells = React.useCallback(
+    (next) => {
+      setCells(next);
+      const joined = next.join("");
+      onChange?.(joined);
+      if (joined.length === length && !next.includes("")) {
+        onComplete?.(joined);
+      }
+    },
+    [onChange, onComplete, length]
+  );
+  const onContainerPaste = React.useCallback(
+    (e) => {
+      e.preventDefault();
+      const text = e.clipboardData.getData("text/plain") ?? "";
+      const filtered = filterValue(text, pattern, length);
+      const next = Array.from({ length }, (_, i) => filtered[i] ?? "");
+      updateCells(next);
+      const nextEmpty = next.indexOf("");
+      focusCell(nextEmpty === -1 ? length - 1 : nextEmpty);
+    },
+    [pattern, length, updateCells, focusCell]
+  );
+  const handleChangeText = React.useCallback(
+    (text, idx) => {
+      if (text.length > 1) {
+        const filtered = filterValue(text, pattern, length);
+        const next2 = Array.from({ length }, (_, i) => filtered[i] ?? "");
+        updateCells(next2);
+        const nextEmpty = next2.indexOf("");
+        focusCell(nextEmpty === -1 ? length - 1 : nextEmpty);
+        return;
+      }
+      const char = text.slice(-1);
+      if (char && !isAllowed(char, pattern)) {
+        return;
+      }
+      const next = [...cells];
+      next[idx] = char;
+      updateCells(next);
+      if (char) {
+        focusCell(idx + 1);
+      }
+    },
+    [cells, pattern, length, updateCells, focusCell]
+  );
+  const handleWebKeyDown = React.useCallback(
+    (e, idx) => {
+      if (e.key === "Backspace") {
+        if (cells[idx] !== "") {
+          const next = [...cells];
+          next[idx] = "";
+          updateCells(next);
+        } else {
+          focusCell(idx - 1);
+        }
+        e.preventDefault();
+      } else if (e.key === "ArrowLeft") {
+        focusCell(idx - 1);
+        e.preventDefault();
+      } else if (e.key === "ArrowRight") {
+        focusCell(idx + 1);
+        e.preventDefault();
+      } else if (e.key.length === 1 && isAllowed(e.key, pattern)) {
+        const next = [...cells];
+        next[idx] = e.key;
+        updateCells(next);
+        focusCell(idx + 1);
+        e.preventDefault();
+      }
+    },
+    [cells, pattern, focusCell, updateCells]
+  );
+  const handleNativeKeyPress = React.useCallback(
+    (e, idx) => {
+      if (e.nativeEvent.key === "Backspace") {
+        if (cells[idx] !== "") {
+          const next = [...cells];
+          next[idx] = "";
+          updateCells(next);
+        } else {
+          focusCell(idx - 1);
+        }
+      }
+    },
+    [cells, focusCell, updateCells]
+  );
+  const cellStyle = [
+    styles2.cell,
+    {
+      width: px(48),
+      height: px(56),
+      borderRadius: px(colors.radius.md),
+      borderColor: colors.semantic.border.default,
+      backgroundColor: colors.semantic.background.elevated,
+      color: colors.semantic.text.default,
+      fontSize: px(colors.fontSize.xl),
+      fontFamily: colors.fontFamily.body
+    },
+    disabled ? styles2.disabled : null,
+    ariaInvalid === true || ariaInvalid === "true" ? { borderColor: colors.color.danger } : null
+  ];
+  const isWeb3 = reactNative.Platform.OS === "web";
+  const containerProps = isWeb3 ? {
+    onPaste: onContainerPaste,
+    role: "group",
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy
+  } : {};
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      testID,
+      ...isWeb3 ? {} : { accessible: true, accessibilityLabel: ariaLabel },
+      ...containerProps,
+      className: cn("flex-row items-center gap-2", className),
+      style: styles2.container,
+      children: [
+        Array.from({ length }, (_, idx) => {
+          const cellValue = cells[idx] ?? "";
+          const cellRef = /* @__PURE__ */ __name((el) => {
+            inputRefs.current[idx] = el;
+          }, "cellRef");
+          const webProps = isWeb3 ? {
+            onKeyDown: /* @__PURE__ */ __name((e) => handleWebKeyDown(e, idx), "onKeyDown"),
+            // id only on the first cell
+            ...idx === 0 && id ? { id, nativeID: id } : {},
+            ...idx === 0 && name ? { name } : {},
+            ...idx === 0 && ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : {},
+            ...idx === 0 && ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : {},
+            ...idx === 0 && ariaInvalid !== void 0 ? { "aria-invalid": ariaInvalid } : {},
+            inputMode: pattern === "numeric" ? "numeric" : "text"
+          } : {};
+          const nativeOnlyProps = isWeb3 ? {} : {
+            keyboardType: pattern === "numeric" ? "number-pad" : "default",
+            textAlign: "center",
+            selectTextOnFocus: true,
+            onKeyPress: /* @__PURE__ */ __name((e) => handleNativeKeyPress(e, idx), "onKeyPress")
+          };
+          return /* @__PURE__ */ jsxRuntime.jsx(
+            reactNative.TextInput,
+            {
+              ref: cellRef,
+              value: cellValue,
+              placeholder: placeholder,
+              maxLength: 1,
+              editable: !disabled,
+              autoFocus: autoFocus && idx === 0,
+              testID: testID ? `${testID}-cell-${idx}` : void 0,
+              onChangeText: (text) => handleChangeText(text, idx),
+              accessibilityLabel: `Digit ${idx + 1} of ${length}`,
+              ...nativeOnlyProps,
+              ...webProps,
+              style: cellStyle
+            },
+            idx
+          );
+        }),
+        isWeb3 && name ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.TextInput,
+          {
+            style: styles2.hidden,
+            value: cells.join(""),
+            "aria-hidden": true,
+            tabIndex: -1,
+            ...{ name }
+          }
+        ) : null
+      ]
+    }
+  );
+}, "InputOTP");
+var styles2 = reactNative.StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 8
+  },
+  cell: {
+    borderWidth: 1,
+    textAlign: "center"
+  },
+  disabled: {
+    opacity: 0.6
+  },
+  hidden: {
+    position: "absolute",
+    width: 0,
+    height: 0,
+    opacity: 0
+  }
+});
 var Item = /* @__PURE__ */ __name(({
   leading,
   title,
@@ -11848,6 +12977,344 @@ function translateOffscreen(side) {
   }
 }
 __name(translateOffscreen, "translateOffscreen");
+var SidebarContext = React.createContext(null);
+function useSidebarContext(caller) {
+  const ctx = React.useContext(SidebarContext);
+  if (!ctx) {
+    throw new Error(`<${caller}> must be rendered inside <Sidebar>.`);
+  }
+  return ctx;
+}
+__name(useSidebarContext, "useSidebarContext");
+var EXPANDED_WIDTH = 240;
+var COLLAPSED_WIDTH = 56;
+var SidebarRoot = /* @__PURE__ */ __name(({
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  side = "left",
+  variant = "standard",
+  children,
+  className,
+  testID
+}) => {
+  const [inner, setInner] = React.useState(defaultCollapsed);
+  const isControlled = collapsed !== void 0;
+  const current = isControlled ? collapsed : inner;
+  const navId = React.useId();
+  const colors = useThemeColors();
+  const setCollapsed = React.useCallback(
+    (next) => {
+      if (!isControlled) {
+        setInner(next);
+      }
+      onCollapsedChange?.(next);
+    },
+    [isControlled, onCollapsedChange]
+  );
+  const toggleCollapsed = React.useCallback(() => {
+    setCollapsed(!current);
+  }, [current, setCollapsed]);
+  const ctxValue = {
+    collapsed: current,
+    setCollapsed,
+    toggleCollapsed,
+    navId
+  };
+  const width = current ? COLLAPSED_WIDTH : EXPANDED_WIDTH;
+  const containerStyle = reactNative.Platform.OS === "web" ? {
+    position: "fixed",
+    top: 0,
+    bottom: 0,
+    [side]: 0,
+    width,
+    transitionProperty: "width",
+    transitionDuration: "200ms",
+    transitionTimingFunction: "cubic-bezier(0.16, 1, 0.3, 1)",
+    display: "flex",
+    flexDirection: "column",
+    overflow: "hidden",
+    zIndex: 40
+  } : {
+    width,
+    flexDirection: "column",
+    overflow: "hidden"
+  };
+  const variantStyle = reactNative.Platform.OS === "web" ? variant === "floating" ? {
+    margin: 8,
+    borderRadius: colors.radius.lg,
+    top: 8,
+    bottom: 8,
+    height: "auto"
+  } : variant === "inset" ? {
+    boxShadow: "4px 0 16px rgba(0,0,0,0.08)"
+  } : {} : {};
+  const rootStyle = {
+    ...containerStyle,
+    ...variantStyle,
+    backgroundColor: colors.semantic.background.elevated,
+    borderRightWidth: variant !== "floating" ? 1 : 0,
+    borderRightColor: colors.semantic.border.default
+  };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx(
+      "nav",
+      {
+        id: navId,
+        "aria-label": "Sidebar",
+        "data-collapsed": current,
+        "data-side": side,
+        "data-variant": variant,
+        "data-testid": testID,
+        className: cn(
+          "nori-sidebar flex flex-col overflow-hidden transition-[width] duration-200",
+          className
+        ),
+        style: rootStyle,
+        children
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(SidebarContext.Provider, { value: ctxValue, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: rootStyle, testID, accessibilityRole: "menu", accessibilityLabel: "Sidebar", children }) });
+}, "SidebarRoot");
+var SidebarHeader = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const colors = useThemeColors();
+  const style = {
+    padding: px(colors.spacing["4"]),
+    borderBottomWidth: 1,
+    borderBottomColor: colors.semantic.border.default,
+    flexDirection: "row",
+    alignItems: "center",
+    gap: px(colors.spacing["2"]),
+    overflow: "hidden"
+  };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": testID,
+        className: cn("nori-sidebar-header", className),
+        style,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style, testID, children });
+}, "SidebarHeader");
+var SidebarContent = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const style = { flex: 1, overflow: "hidden" };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": testID,
+        className: cn("nori-sidebar-content", className),
+        style: { flex: 1, overflowY: "auto", overflowX: "hidden" },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.ScrollView, { style, testID, contentContainerStyle: { flexGrow: 1 }, children });
+}, "SidebarContent");
+var SidebarFooter = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const colors = useThemeColors();
+  const style = {
+    padding: px(colors.spacing["4"]),
+    borderTopWidth: 1,
+    borderTopColor: colors.semantic.border.default,
+    overflow: "hidden"
+  };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": testID,
+        className: cn("nori-sidebar-footer", className),
+        style,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style, testID, children });
+}, "SidebarFooter");
+var SidebarGroup = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const colors = useThemeColors();
+  const style = {
+    paddingTop: px(colors.spacing["2"]),
+    paddingBottom: px(colors.spacing["2"])
+  };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": testID,
+        className: cn("nori-sidebar-group", className),
+        style,
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style, testID, children });
+}, "SidebarGroup");
+var SidebarGroupLabel = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const ctx = useSidebarContext("Sidebar.GroupLabel");
+  const colors = useThemeColors();
+  if (ctx.collapsed) {
+    return null;
+  }
+  const style = {
+    paddingHorizontal: px(colors.spacing["4"]),
+    paddingVertical: px(colors.spacing["1"])
+  };
+  const textStyle = {
+    fontSize: 11,
+    fontWeight: "600",
+    letterSpacing: 0.5,
+    textTransform: "uppercase",
+    color: colors.semantic.text.muted
+  };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "div",
+      {
+        "data-testid": testID,
+        className: cn("nori-sidebar-group-label", className),
+        style,
+        children: /* @__PURE__ */ jsxRuntime.jsx("span", { style: textStyle, children })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style, testID, children: /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: textStyle, children }) });
+}, "SidebarGroupLabel");
+var SidebarMenu = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const colors = useThemeColors();
+  const style = {
+    paddingHorizontal: px(colors.spacing["2"]),
+    gap: px(colors.spacing["1"])
+  };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      "ul",
+      {
+        "data-testid": testID,
+        className: cn("nori-sidebar-menu", className),
+        style: {
+          ...style,
+          listStyle: "none",
+          margin: 0,
+          padding: `0 ${colors.spacing["2"]}px`
+        },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style, testID, children });
+}, "SidebarMenu");
+var SidebarMenuItem = /* @__PURE__ */ __name(({
+  icon,
+  active = false,
+  disabled = false,
+  onPress,
+  children,
+  className,
+  testID
+}) => {
+  const ctx = useSidebarContext("Sidebar.MenuItem");
+  const colors = useThemeColors();
+  const itemStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    borderRadius: px(colors.radius.md),
+    paddingHorizontal: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["2"]),
+    gap: px(colors.spacing["3"]),
+    opacity: disabled ? 0.5 : 1,
+    ...ctx.collapsed ? { justifyContent: "center", paddingHorizontal: px(colors.spacing["2"]) } : {}
+  };
+  const activeBg = colors.semantic.interactive.primary;
+  const labelStr = typeof children === "string" ? children : void 0;
+  const labelTextStyle = {
+    fontSize: 14,
+    fontWeight: active ? "600" : "400",
+    color: active ? colors.semantic.text.default : colors.semantic.text.muted,
+    flex: 1
+  };
+  if (reactNative.Platform.OS === "web") {
+    return /* @__PURE__ */ jsxRuntime.jsx("li", { style: { listStyle: "none" }, children: /* @__PURE__ */ jsxRuntime.jsxs(
+      "button",
+      {
+        type: "button",
+        "data-testid": testID,
+        "aria-current": active ? "page" : void 0,
+        "aria-disabled": disabled,
+        title: ctx.collapsed && labelStr ? labelStr : void 0,
+        disabled,
+        onClick: disabled ? void 0 : onPress,
+        className: cn("nori-sidebar-menu-item", className),
+        style: {
+          display: "flex",
+          alignItems: "center",
+          gap: colors.spacing["3"],
+          width: "100%",
+          textAlign: "left",
+          border: "none",
+          cursor: disabled ? "not-allowed" : "pointer",
+          borderRadius: colors.radius.md,
+          padding: ctx.collapsed ? `${colors.spacing["2"]}px` : `${colors.spacing["2"]}px ${colors.spacing["3"]}px`,
+          justifyContent: ctx.collapsed ? "center" : "flex-start",
+          background: active ? `${activeBg}1a` : "transparent",
+          opacity: disabled ? 0.5 : 1
+        },
+        children: [
+          icon && /* @__PURE__ */ jsxRuntime.jsx("span", { className: "nori-sidebar-menu-item-icon", "aria-hidden": "true", children: icon }),
+          !ctx.collapsed && /* @__PURE__ */ jsxRuntime.jsx(
+            "span",
+            {
+              style: {
+                fontSize: 14,
+                fontWeight: active ? 600 : 400,
+                color: active ? colors.semantic.text.default : colors.semantic.text.muted,
+                flex: 1,
+                overflow: "hidden",
+                whiteSpace: "nowrap",
+                textOverflow: "ellipsis"
+              },
+              children
+            }
+          )
+        ]
+      }
+    ) });
+  }
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.Pressable,
+    {
+      testID,
+      onPress: disabled ? void 0 : onPress,
+      disabled,
+      accessibilityRole: "menuitem",
+      accessibilityState: { selected: active, disabled },
+      style: ({ pressed }) => [
+        itemStyle,
+        active ? { backgroundColor: `${activeBg}1a` } : {},
+        pressed && { opacity: 0.7 }
+      ],
+      children: [
+        icon && /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { children: icon }),
+        !ctx.collapsed && /* @__PURE__ */ jsxRuntime.jsx(reactNative.Text, { style: labelTextStyle, numberOfLines: 1, children })
+      ]
+    }
+  );
+}, "SidebarMenuItem");
+var Sidebar = Object.assign(SidebarRoot, {
+  Header: SidebarHeader,
+  Content: SidebarContent,
+  Footer: SidebarFooter,
+  Group: SidebarGroup,
+  GroupLabel: SidebarGroupLabel,
+  Menu: SidebarMenu,
+  MenuItem: SidebarMenuItem
+});
 var PULSE_DURATION_MS = 900;
 var PULSE_MIN = 0.55;
 var PULSE_MAX = 1;
@@ -14077,9 +15544,11 @@ exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.Calendar = Calendar;
 exports.Card = Card;
+exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
 exports.Collapsible = Collapsible;
 exports.Combobox = Combobox;
+exports.Command = Command;
 exports.ContextMenu = ContextMenu;
 exports.DataTable = DataTable;
 exports.DatePicker = DatePicker;
@@ -14090,8 +15559,10 @@ exports.Empty = Empty;
 exports.Field = Field;
 exports.FloatButton = FloatButton;
 exports.HStack = HStack;
+exports.HoverCard = HoverCard;
 exports.Icon = Icon;
 exports.InputGroup = InputGroup;
+exports.InputOTP = InputOTP;
 exports.Item = Item;
 exports.Kbd = Kbd;
 exports.Label = Label;
@@ -14116,6 +15587,7 @@ exports.SheetHeader = SheetHeader;
 exports.SheetPanel = SheetPanel;
 exports.SheetTitle = SheetTitle;
 exports.SheetTrigger = SheetTrigger;
+exports.Sidebar = Sidebar;
 exports.Skeleton = Skeleton;
 exports.Slider = Slider;
 exports.SliderGestureProvider = SliderGestureProvider;
@@ -14141,8 +15613,10 @@ exports.theme = theme;
 exports.themeDark = themeDark;
 exports.toast = toast2;
 exports.useCalendarCaption = useCalendarCaption;
+exports.useCommandContext = useCommandContext;
 exports.usePagination = usePagination;
 exports.usePopoverContext = usePopoverContext;
+exports.useSidebarContext = useSidebarContext;
 exports.useSliderInteractionActive = useSliderInteractionActive;
 //# sourceMappingURL=index.cjs.map
 //# sourceMappingURL=index.cjs.map