@nori-ui/core 1.7.0 → 1.8.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";
 
@@ -9377,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",
@@ -9749,6 +10152,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,
@@ -14077,6 +14724,7 @@ exports.Button = Button;
 exports.ButtonGroup = ButtonGroup;
 exports.Calendar = Calendar;
 exports.Card = Card;
+exports.Carousel = Carousel;
 exports.Checkbox = Checkbox;
 exports.Collapsible = Collapsible;
 exports.Combobox = Combobox;
@@ -14090,8 +14738,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;