@nori-ui/core 1.6.0 → 1.8.0

package/dist/index.cjs

@@ -1649,6 +1649,24 @@ var AlertDialog = Object.assign(AlertDialogRoot, {
   Action: AlertDialogAction,
   Cancel: AlertDialogCancel
 });
+var BASE_STYLE = {
+  overflow: "hidden"
+};
+var AspectRatio = /* @__PURE__ */ __name(({ ratio, children, className, testID }) => {
+  const containerStyle = {
+    ...BASE_STYLE,
+    aspectRatio: ratio
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("overflow-hidden", className),
+      style: containerStyle,
+      children
+    }
+  );
+}, "AspectRatio");
 var SIZE_PX = {
   sm: 32,
   md: 40,
@@ -3487,7 +3505,7 @@ var SIZE_KEYS = {
   md: { padX: "4", font: "md" },
   lg: { padX: "5", font: "lg" }
 };
-var BASE_STYLE = {
+var BASE_STYLE2 = {
   flexDirection: "row",
   alignItems: "center",
   justifyContent: "center"
@@ -3578,7 +3596,7 @@ var Button = /* @__PURE__ */ __name(({
   };
   const sizeFontSize = px(colors.fontSize[sizeKeys.font]);
   const inlineBase = [
-    BASE_STYLE,
+    BASE_STYLE2,
     { backgroundColor: stateBg },
     sizeContainer,
     { opacity: isInoperative ? 0.6 : stateInteractionOpacity }
@@ -3658,6 +3676,39 @@ var Button = /* @__PURE__ */ __name(({
     }
   );
 }, "Button");
+var ButtonGroup = /* @__PURE__ */ __name(({ children, orientation = "horizontal", size, className, testID }) => {
+  const isHorizontal = orientation === "horizontal";
+  const containerStyle = {
+    flexDirection: isHorizontal ? "row" : "column",
+    // gap: 0 so buttons touch; shared-border effect comes from CSS on web
+    // and from touching edges on native.
+    gap: 0,
+    alignSelf: "flex-start",
+    overflow: "hidden"
+  };
+  const childArray = React.Children.toArray(children).filter(React.isValidElement);
+  const total = childArray.length;
+  const clonedChildren = childArray.map((child, index) => {
+    const position = index === 0 ? "first" : index === total - 1 ? "last" : "middle";
+    const extraProps = {
+      "data-position": position,
+      "data-group-orientation": orientation
+    };
+    if (size !== void 0) {
+      extraProps["data-group-size"] = size;
+    }
+    return React.cloneElement(child, extraProps);
+  });
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn(isHorizontal ? "flex-row" : "flex-col", "self-start overflow-hidden", className),
+      style: containerStyle,
+      children: clonedChildren
+    }
+  );
+}, "ButtonGroup");
 var detectLocale = /* @__PURE__ */ __name(() => {
   try {
     return new Intl.DateTimeFormat().resolvedOptions().locale;
@@ -6438,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";
 
@@ -6592,6 +6891,182 @@ var Checkbox = /* @__PURE__ */ __name(({
     }
   );
 }, "Checkbox");
+var CollapsibleContext = React.createContext(null);
+var useCollapsibleContext = /* @__PURE__ */ __name((label) => {
+  const ctx = React.useContext(CollapsibleContext);
+  if (!ctx) {
+    throw new Error(`<${label}> must be rendered inside a <Collapsible>.`);
+  }
+  return ctx;
+}, "useCollapsibleContext");
+var CollapsibleRoot = /* @__PURE__ */ __name(({
+  open: controlledOpen,
+  defaultOpen = false,
+  onOpenChange,
+  children,
+  className,
+  testID
+}) => {
+  const baseId = React.useId();
+  const [innerOpen, setInnerOpen] = React.useState(defaultOpen);
+  const isControlled = controlledOpen !== void 0;
+  const open = isControlled ? controlledOpen : innerOpen;
+  const toggle = React.useCallback(() => {
+    const next = !open;
+    if (!isControlled) {
+      setInnerOpen(next);
+    }
+    onOpenChange?.(next);
+  }, [open, isControlled, onOpenChange]);
+  const ctx = React.useMemo(
+    () => ({
+      open,
+      toggle,
+      contentId: `${baseId}-content`,
+      triggerId: `${baseId}-trigger`
+    }),
+    [open, toggle, baseId]
+  );
+  return /* @__PURE__ */ jsxRuntime.jsx(CollapsibleContext.Provider, { value: ctx, children: /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-col", className),
+      style: { flexDirection: "column" },
+      children
+    }
+  ) });
+}, "CollapsibleRoot");
+var CollapsibleTrigger = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const { open, toggle, contentId, triggerId } = useCollapsibleContext("Collapsible.Trigger");
+  const colors = useThemeColors();
+  const triggerStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    paddingVertical: px(colors.spacing["2"]),
+    paddingHorizontal: px(colors.spacing["1"])
+  };
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.Pressable,
+    {
+      id: triggerId,
+      ...testID !== void 0 ? { testID } : {},
+      role: "button",
+      accessibilityRole: "button",
+      "aria-expanded": open,
+      "aria-controls": contentId,
+      onPress: toggle,
+      className: cn("flex-row items-center py-2 px-1", className),
+      style: triggerStyle,
+      children: typeof children === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            color: colors.semantic.text.default,
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.sm),
+            fontWeight: colors.fontWeight.medium
+          },
+          children
+        }
+      ) : children
+    }
+  );
+}, "CollapsibleTrigger");
+var CollapsibleContent = /* @__PURE__ */ __name(({ children, className, testID }) => {
+  const { open, contentId, triggerId } = useCollapsibleContext("Collapsible.Content");
+  const wrapperRef = React.useRef(null);
+  const innerRef = React.useRef(null);
+  React.useEffect(() => {
+    if (reactNative.Platform.OS !== "web") {
+      return;
+    }
+    const wrapper = wrapperRef.current;
+    const inner = innerRef.current;
+    if (!wrapper || !inner) {
+      return;
+    }
+    const isFirstPaint = wrapper.dataset.noriPainted !== "1";
+    wrapper.dataset.noriPainted = "1";
+    wrapper.style.overflow = "hidden";
+    wrapper.style.transitionProperty = "max-height, opacity";
+    wrapper.style.transitionDuration = "200ms";
+    wrapper.style.transitionTimingFunction = "cubic-bezier(0.16, 1, 0.3, 1)";
+    if (open) {
+      const target = inner.scrollHeight;
+      if (isFirstPaint) {
+        wrapper.style.maxHeight = `${target}px`;
+        wrapper.style.opacity = "1";
+        return;
+      }
+      wrapper.style.maxHeight = "0px";
+      wrapper.style.opacity = "0";
+      void wrapper.offsetHeight;
+      requestAnimationFrame(() => {
+        wrapper.style.maxHeight = `${target}px`;
+        wrapper.style.opacity = "1";
+      });
+    } else {
+      if (isFirstPaint) {
+        wrapper.style.maxHeight = "0px";
+        wrapper.style.opacity = "0";
+        return;
+      }
+      const current = inner.scrollHeight;
+      wrapper.style.maxHeight = `${current}px`;
+      wrapper.style.opacity = "1";
+      void wrapper.offsetHeight;
+      requestAnimationFrame(() => {
+        wrapper.style.maxHeight = "0px";
+        wrapper.style.opacity = "0";
+      });
+    }
+  }, [open]);
+  if (reactNative.Platform.OS !== "web") {
+    if (!open) {
+      return null;
+    }
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        ...testID !== void 0 ? { testID } : {},
+        id: contentId,
+        "aria-labelledby": triggerId,
+        className: cn("flex-col", className),
+        style: { flexDirection: "column" },
+        children
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ref: (node) => {
+        wrapperRef.current = node;
+      },
+      ...testID !== void 0 ? { testID } : {},
+      id: contentId,
+      "aria-labelledby": triggerId,
+      "aria-hidden": !open,
+      className: cn("overflow-hidden", className),
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.View,
+        {
+          ref: (node) => {
+            innerRef.current = node;
+          },
+          className: "flex-col",
+          style: { flexDirection: "column" },
+          children
+        }
+      )
+    }
+  );
+}, "CollapsibleContent");
+var Collapsible = Object.assign(CollapsibleRoot, {
+  Trigger: CollapsibleTrigger,
+  Content: CollapsibleContent
+});
 var Combobox = /* @__PURE__ */ __name((props) => {
   return /* @__PURE__ */ jsxRuntime.jsx(Select, { searchable: true, ...props });
 }, "Combobox");
@@ -8190,11 +8665,60 @@ var Dialog = Object.assign(DialogRoot, {
   Footer: DialogFooter,
   Close: DialogClose
 });
-var FieldContext = React.createContext(null);
-var useFieldContextStrict = /* @__PURE__ */ __name((caller) => {
-  const ctx = React.useContext(FieldContext);
-  if (!ctx) {
-    throw new Error(`[Field] ${caller} must be used inside <Field> or <Field.Group>.`);
+var Empty = /* @__PURE__ */ __name(({ icon, title, description, action, className, testID }) => {
+  const colors = useThemeColors();
+  const containerStyle = {
+    flexDirection: "column",
+    alignItems: "center",
+    justifyContent: "center",
+    gap: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["8"]),
+    paddingHorizontal: px(colors.spacing["4"])
+  };
+  return /* @__PURE__ */ jsxRuntime.jsxs(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-col items-center justify-center gap-3 py-8 px-4", className),
+      style: containerStyle,
+      children: [
+        icon != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginBottom: px(colors.spacing["1"]) }, children: icon }) : null,
+        /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              color: colors.semantic.text.default,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.md),
+              fontWeight: colors.fontWeight.semibold,
+              textAlign: "center"
+            },
+            children: title
+          }
+        ),
+        description != null ? /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            style: {
+              color: colors.semantic.text.muted,
+              fontFamily: colors.fontFamily.body,
+              fontSize: px(colors.fontSize.sm),
+              lineHeight: px(colors.fontSize.sm) * Number(colors.lineHeight.normal),
+              textAlign: "center"
+            },
+            children: description
+          }
+        ) : null,
+        action != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { marginTop: px(colors.spacing["1"]) }, children: action }) : null
+      ]
+    }
+  );
+}, "Empty");
+var FieldContext = React.createContext(null);
+var useFieldContextStrict = /* @__PURE__ */ __name((caller) => {
+  const ctx = React.useContext(FieldContext);
+  if (!ctx) {
+    throw new Error(`[Field] ${caller} must be used inside <Field> or <Field.Group>.`);
   }
   return ctx;
 }, "useFieldContextStrict");
@@ -9101,6 +9625,161 @@ function withAlpha(color, alpha) {
   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",
@@ -9473,6 +10152,417 @@ 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,
+  description,
+  trailing,
+  chevron = false,
+  onPress,
+  disabled = false,
+  className,
+  testID
+}) => {
+  const colors = useThemeColors();
+  const isTappable = onPress !== void 0;
+  const rowStyle = {
+    flexDirection: "row",
+    alignItems: "center",
+    gap: px(colors.spacing["3"]),
+    paddingVertical: px(colors.spacing["3"]),
+    paddingHorizontal: px(colors.spacing["4"]),
+    minHeight: 52,
+    opacity: disabled ? 0.5 : 1
+  };
+  const content = /* @__PURE__ */ jsxRuntime.jsxs(jsxRuntime.Fragment, { children: [
+    leading != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexShrink: 0 }, children: leading }) : null,
+    /* @__PURE__ */ jsxRuntime.jsxs(reactNative.View, { style: { flex: 1, flexDirection: "column", gap: 2 }, children: [
+      typeof title === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            color: colors.semantic.text.default,
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.sm),
+            fontWeight: colors.fontWeight.medium
+          },
+          numberOfLines: 1,
+          children: title
+        }
+      ) : title,
+      description != null ? typeof description === "string" ? /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          style: {
+            color: colors.semantic.text.muted,
+            fontFamily: colors.fontFamily.body,
+            fontSize: px(colors.fontSize.xs)
+          },
+          numberOfLines: 1,
+          children: description
+        }
+      ) : description : null
+    ] }),
+    trailing != null ? /* @__PURE__ */ jsxRuntime.jsx(reactNative.View, { style: { flexShrink: 0 }, children: trailing }) : null,
+    chevron ? /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.View,
+      {
+        style: { flexShrink: 0 },
+        "aria-hidden": true,
+        testID: testID != null ? `${testID}-chevron` : void 0,
+        children: /* @__PURE__ */ jsxRuntime.jsx(
+          reactNative.Text,
+          {
+            accessibilityElementsHidden: true,
+            importantForAccessibility: "no-hide-descendants",
+            style: {
+              fontSize: 14,
+              lineHeight: 16,
+              color: colors.semantic.text.muted,
+              // On web rn-web passes style through — transform
+              // with a rotate is the lightest-weight approach
+              // that avoids importing the full SVG icon set.
+              transform: [{ rotate: "-90deg" }]
+            },
+            children: "\u2304"
+          }
+        )
+      }
+    ) : null
+  ] });
+  if (isTappable) {
+    return /* @__PURE__ */ jsxRuntime.jsx(
+      reactNative.Pressable,
+      {
+        ...testID !== void 0 ? { testID } : {},
+        role: "button",
+        accessibilityRole: "button",
+        disabled,
+        onPress: disabled ? void 0 : onPress,
+        className: cn(
+          "flex-row items-center",
+          disabled ? "opacity-50" : "hover:bg-semantic-background-subtle active:bg-semantic-border-default",
+          className
+        ),
+        style: rowStyle,
+        children: content
+      }
+    );
+  }
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...testID !== void 0 ? { testID } : {},
+      className: cn("flex-row items-center", className),
+      style: rowStyle,
+      children: content
+    }
+  );
+}, "Item");
+var Kbd = /* @__PURE__ */ __name(({ children, className }) => {
+  const colors = useThemeColors();
+  const isDark = useColorScheme() === "dark";
+  const bgColor = isDark ? colors.color.neutral["800"] : colors.color.neutral["100"];
+  const borderColor = isDark ? colors.color.neutral["600"] : colors.color.neutral["300"];
+  const textColor = isDark ? colors.color.neutral["200"] : colors.color.neutral["700"];
+  const containerStyle = {
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    justifyContent: "center",
+    alignSelf: "center",
+    backgroundColor: bgColor,
+    borderWidth: 1,
+    borderColor,
+    borderRadius: px(colors.radius.sm),
+    paddingHorizontal: px(colors.spacing["1"]),
+    paddingVertical: 2,
+    // Subtle bottom shadow gives the classic key look.
+    ...reactNative.Platform.OS === "web" ? {
+      boxShadow: `0 1px 0 ${borderColor}`,
+      display: "inline-flex"
+    } : {}
+  };
+  const textStyle = {
+    color: textColor,
+    // Monospace font for key labels.
+    fontFamily: colors.fontFamily.mono ?? "monospace",
+    fontSize: px(colors.fontSize.xs),
+    fontWeight: colors.fontWeight.medium,
+    lineHeight: px(colors.fontSize.xs) * Number(colors.lineHeight.normal)
+  };
+  const extraWebProps = reactNative.Platform.OS === "web" ? {
+    // rn-web: 'none' skips the role attribute so the outer
+    // View is just a plain <div>; we rely on the inner
+    // <span> with data-kbd for semantic annotation.
+    accessibilityRole: "none"
+  } : {};
+  return /* @__PURE__ */ jsxRuntime.jsx(
+    reactNative.View,
+    {
+      ...extraWebProps,
+      className: cn(
+        "inline-flex flex-row items-center rounded-sm border px-1 py-0.5",
+        isDark ? "bg-neutral-800 border-neutral-600 text-neutral-200" : "bg-neutral-100 border-neutral-300 text-neutral-700",
+        className
+      ),
+      style: containerStyle,
+      children: /* @__PURE__ */ jsxRuntime.jsx(
+        reactNative.Text,
+        {
+          ...reactNative.Platform.OS === "web" ? { "data-kbd": "" } : {},
+          accessibilityRole: "none",
+          style: textStyle,
+          children
+        }
+      )
+    }
+  );
+}, "Kbd");
 var Label = /* @__PURE__ */ __name(({ htmlFor, required = false, disabled = false, children, className, testID }) => {
   const colors = useThemeColors();
   const { t } = useTranslation();
@@ -13625,14 +14715,18 @@ __name(Icon, "Icon");
 exports.Accordion = Accordion;
 exports.Alert = Alert;
 exports.AlertDialog = AlertDialog;
+exports.AspectRatio = AspectRatio;
 exports.Avatar = Avatar;
 exports.Badge = Badge;
 exports.Box = Box;
 exports.Breadcrumb = Breadcrumb;
 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.ContextMenu = ContextMenu;
 exports.DataTable = DataTable;
@@ -13640,11 +14734,16 @@ exports.DatePicker = DatePicker;
 exports.Dialog = Dialog;
 exports.Drawer = Drawer;
 exports.DropdownMenu = DropdownMenu;
+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;
 exports.MenuContent = MenuContent;
 exports.MenuItem = MenuItem;