@kadoui/react 1.4.9 → 1.5.10

package/dist/index.cjs

@@ -0,0 +1,1824 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  AccessNavigation: () => AccessNavigation,
+  Accordion: () => Accordion,
+  Affix: () => Affix,
+  Breadcrumbs: () => Breadcrumbs,
+  Carousel: () => Carousel,
+  ClientOnly: () => ClientOnly,
+  Clipboard: () => Clipboard,
+  ContextMenu: () => ContextMenu,
+  Drawer: () => Drawer,
+  LoaderLink: () => LoaderLink,
+  Modal: () => Modal,
+  Otp: () => Otp,
+  PaginationWithSearchParams: () => PaginationWithSearchParams,
+  PaginationWithState: () => PaginationWithState,
+  PasswordInput: () => PasswordInput,
+  Popover: () => Popover,
+  Portal: () => Portal,
+  Progress: () => Progress,
+  QrCode: () => QrCode,
+  Rating: () => Rating,
+  Sheet: () => Sheet,
+  ShowMore: () => ShowMore,
+  Spoiler: () => Spoiler,
+  StepsWithSearchParams: () => StepsWithSearchParams,
+  StepsWithState: () => StepsWithState,
+  Submit: () => Submit,
+  Swap: () => Swap,
+  Tabs: () => Tabs
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/utils/browser.ts
+var getBrowserScrollbarWith = () => {
+  const outer = document.createElement("div");
+  outer.style.visibility = "hidden";
+  outer.style.overflow = "scroll";
+  document.body.appendChild(outer);
+  const inner = document.createElement("div");
+  outer.appendChild(inner);
+  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth;
+  outer.parentNode?.removeChild(outer);
+  return scrollbarWidth;
+};
+var selectAccessibleChildren = (parent) => {
+  const children = Array.from(
+    parent.querySelectorAll(`
+      a:not([tabindex="-1"]),
+      input:not([disabled],[tabindex="-1"]),
+      select:not([disabled],[tabindex="-1"]),
+      textarea:not([disabled],[tabindex="-1"]),
+      button:not([disabled],[tabindex="-1"])
+    `)
+  );
+  return children;
+};
+
+// src/utils/cn.ts
+var import_tailwind_merge = require("tailwind-merge");
+var import_clsx = require("clsx");
+var cn = (...inputs) => (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+
+// src/components/AccessNavigation/AccessNavigation.tsx
+var import_jsx_runtime = require("react/jsx-runtime");
+function AccessNavigation({ direction = "y", dir, onKeyDown, ...p }) {
+  const handleKeyDown = (ev) => {
+    const focusableChildren = selectAccessibleChildren(ev.currentTarget);
+    if (!focusableChildren.length) {
+      return;
+    }
+    const currentDir = dir || document.documentElement.getAttribute("dir") || "ltr";
+    const currentIndex = focusableChildren.findIndex((item) => item === document.activeElement);
+    if (ev.key === (direction === "y" ? "ArrowDown" : currentDir === "ltr" ? "ArrowRight" : "ArrowLeft")) {
+      ev.preventDefault();
+      const nextIndex = currentIndex === -1 || currentIndex === focusableChildren.length - 1 ? 0 : currentIndex + 1;
+      focusableChildren[nextIndex]?.focus();
+    }
+    if (ev.key === (direction === "y" ? "ArrowUp" : currentDir === "ltr" ? "ArrowLeft" : "ArrowRight")) {
+      ev.preventDefault();
+      const prevIndex = currentIndex <= 0 ? focusableChildren.length - 1 : currentIndex - 1;
+      focusableChildren[prevIndex]?.focus();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      dir,
+      onKeyDown: (ev) => {
+        onKeyDown?.(ev);
+        handleKeyDown(ev);
+      },
+      ...p
+    }
+  );
+}
+
+// src/components/Accordion/AccordionBody.tsx
+var import_react2 = require("react");
+var import_framer_motion = require("framer-motion");
+
+// src/components/Accordion/AccordionContext.ts
+var import_react = require("react");
+var AccordionContext = (0, import_react.createContext)({});
+
+// src/components/Accordion/AccordionBody.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+function AccordionBody({ children, ...props }) {
+  const { isOpen } = (0, import_react2.use)(AccordionContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(import_framer_motion.AnimatePresence, { children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    import_framer_motion.motion.div,
+    {
+      initial: { height: 0, opacity: 0 },
+      animate: { height: "auto", opacity: 1 },
+      exit: { height: 0, opacity: 0 },
+      ...props,
+      children
+    }
+  ) : null });
+}
+
+// src/components/Accordion/AccordionRoot.tsx
+var import_react3 = require("react");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+function AccordionRoot({ children }) {
+  const [isOpen, setOpen] = (0, import_react3.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(AccordionContext, { value: { isOpen, setOpen }, children });
+}
+
+// src/components/Accordion/AccordionToggle.tsx
+var import_react4 = require("react");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function AccordionToggle({ className, onClick, ...props }) {
+  const { isOpen, setOpen } = (0, import_react4.use)(AccordionContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    "button",
+    {
+      onClick: (ev) => {
+        onClick?.(ev);
+        setOpen((prev) => !prev);
+      },
+      className: cn(
+        isOpen ? "accordion-active" : null,
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/components/Accordion/Accordion.ts
+var Accordion = Object.assign(AccordionRoot, {
+  Toggle: AccordionToggle,
+  Body: AccordionBody
+});
+
+// src/components/Affix/Affix.tsx
+var import_react5 = require("react");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var Affix = ({ className, onClick, ...p }) => {
+  const [isVisible, setIsVisible] = (0, import_react5.useState)(false);
+  const [lastScrollY, setLastScrollY] = (0, import_react5.useState)(0);
+  (0, import_react5.useEffect)(() => {
+    const handleScroll = () => {
+      const currentScrollY = window.scrollY;
+      const viewportHeight = window.innerHeight;
+      const scrollThreshold = viewportHeight * 0.5;
+      if (currentScrollY > scrollThreshold && currentScrollY > lastScrollY) {
+        setIsVisible(true);
+      } else if (currentScrollY < lastScrollY && currentScrollY < scrollThreshold) {
+        setIsVisible(false);
+      }
+      setLastScrollY(currentScrollY);
+    };
+    window.addEventListener("scroll", handleScroll, {
+      passive: true
+    });
+    return () => window.removeEventListener("scroll", handleScroll);
+  }, [lastScrollY]);
+  const scrollToTop = () => {
+    window.scrollTo({
+      top: 0,
+      behavior: "smooth"
+    });
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    "button",
+    {
+      onClick: (ev) => {
+        onClick?.(ev);
+        scrollToTop();
+      },
+      className: cn(
+        isVisible ? "affix-active" : null,
+        className
+      ),
+      ...p
+    }
+  );
+};
+
+// src/components/Breadcrumbs/BreadcrumbsItem.tsx
+var import_react7 = require("react");
+
+// src/components/Breadcrumbs/BreadcrumbsContext.ts
+var import_react6 = require("react");
+var BreadcrumbsContext = (0, import_react6.createContext)({});
+
+// src/components/Breadcrumbs/BreadcrumbsItem.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function BreadcrumbsItem({ isLast = false, children, ...p }) {
+  const { separator } = (0, import_react7.use)(BreadcrumbsContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("div", { ...p, children: [
+    children,
+    !isLast && separator
+  ] });
+}
+
+// src/components/Breadcrumbs/BreadcrumbsRoot.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+function BreadcrumbsRoot({ separator = "/", ...p }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(BreadcrumbsContext, { value: { separator }, children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)("nav", { ...p }) });
+}
+
+// src/components/Breadcrumbs/Breadcrumbs.ts
+var Breadcrumbs = Object.assign(BreadcrumbsRoot, {
+  Item: BreadcrumbsItem
+});
+
+// src/components/Carousel/CarouselRoot.tsx
+var import_react9 = require("react");
+
+// src/components/Carousel/CarouselContext.ts
+var import_react8 = require("react");
+var CarouselContext = (0, import_react8.createContext)({});
+
+// src/components/Carousel/CarouselRoot.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+function CarouselRoot({ dir, ...p }) {
+  const scrollRef = (0, import_react9.useRef)(null);
+  const [leftOpacity, setLeftOpacity] = (0, import_react9.useState)(0);
+  const [rightOpacity, setRightOpacity] = (0, import_react9.useState)(1);
+  const updateFade = () => {
+    const el = scrollRef.current;
+    if (!el) return;
+    const { scrollLeft, scrollWidth, clientWidth } = el;
+    const maxScroll = scrollWidth - clientWidth;
+    if (maxScroll <= 0) {
+      setLeftOpacity(0);
+      setRightOpacity(0);
+      return;
+    }
+    const scrollRatio = Math.abs(+(scrollLeft / maxScroll));
+    const left = +Math.min(1, scrollRatio * 2).toFixed(1);
+    const right = +Math.min(1, (1 - scrollRatio) * 2).toFixed(1);
+    const currentDir = dir || document.documentElement.getAttribute("dir") || "ltr";
+    setLeftOpacity(currentDir === "ltr" ? right : left);
+    setRightOpacity(currentDir === "ltr" ? left : right);
+  };
+  (0, import_react9.useEffect)(() => {
+    const el = scrollRef.current;
+    if (!el) return;
+    updateFade();
+    el.addEventListener("scroll", updateFade);
+    window.addEventListener("resize", updateFade);
+    return () => {
+      el.removeEventListener("scroll", updateFade);
+      window.removeEventListener("resize", updateFade);
+    };
+  }, []);
+  return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CarouselContext, { value: { scrollRef, leftOpacity, rightOpacity }, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("div", { ...p }) });
+}
+
+// src/components/Carousel/CarouselLeftFade.tsx
+var import_react10 = require("react");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function CarouselLeftFade({ style, ...p }) {
+  const { leftOpacity } = (0, import_react10.use)(CarouselContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+    "div",
+    {
+      style: {
+        opacity: leftOpacity,
+        ...style
+      },
+      ...p
+    }
+  );
+}
+
+// src/components/Carousel/CarouselContainer.tsx
+var import_react11 = require("react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function CarouselContainer({ children, ...p }) {
+  const { scrollRef } = (0, import_react11.use)(CarouselContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { ref: scrollRef, ...p, children });
+}
+
+// src/components/Carousel/CarouselRightFade.tsx
+var import_react12 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+function CarouselRightFade({ style, ...p }) {
+  const { rightOpacity } = (0, import_react12.use)(CarouselContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+    "div",
+    {
+      style: {
+        opacity: rightOpacity,
+        ...style
+      },
+      ...p
+    }
+  );
+}
+
+// src/components/Carousel/Carousel.ts
+var Carousel = Object.assign(CarouselRoot, {
+  Container: CarouselContainer,
+  LeftFade: CarouselLeftFade,
+  RightFade: CarouselRightFade
+});
+
+// src/components/ClientOnly/ClientOnly.tsx
+var import_hooks = require("@mantine/hooks");
+function ClientOnly({ children }) {
+  const mounted = (0, import_hooks.useMounted)();
+  return mounted ? children : null;
+}
+
+// src/components/Clipboard/Clipboard.tsx
+var import_hooks2 = require("@mantine/hooks");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+function Clipboard({ copiedChildren, onClick, children, text, timeout = 3e3, ...props }) {
+  const { copy, copied } = (0, import_hooks2.useClipboard)({ timeout });
+  const handleClick = (ev) => {
+    onClick?.(ev);
+    copy(text.trim());
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+    "button",
+    {
+      "aria-label": text,
+      onClick: handleClick,
+      ...props,
+      children: copiedChildren && copied ? copiedChildren : children
+    }
+  );
+}
+
+// src/components/ContextMenu/ContextMenuRoot.tsx
+var import_react14 = require("react");
+
+// src/components/ContextMenu/ContextMenuContext.ts
+var import_react13 = require("react");
+var ContextMenuContext = (0, import_react13.createContext)({});
+
+// src/components/ContextMenu/ContextMenuRoot.tsx
+var import_jsx_runtime13 = require("react/jsx-runtime");
+function ContextMenuRoot({ onContextMenu, ...p }) {
+  const [position, setPosition] = (0, import_react14.useState)(void 0);
+  const [isOpen, setOpen] = (0, import_react14.useState)(false);
+  const contentRef = (0, import_react14.useRef)(null);
+  const handleClickOutside = (0, import_react14.useCallback)((ev) => {
+    if (!contentRef.current?.contains(ev.target)) {
+      setOpen(false);
+      setPosition(void 0);
+    }
+  }, []);
+  (0, import_react14.useEffect)(() => {
+    document.addEventListener("click", handleClickOutside);
+    return () => document.removeEventListener("click", handleClickOutside);
+  }, [handleClickOutside]);
+  (0, import_react14.useEffect)(() => {
+    const scrollbarWidth = getBrowserScrollbarWith();
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    } else {
+      document.body.style.overflow = "unset";
+      document.body.style.paddingRight = "0px";
+    }
+    ;
+  }, [isOpen]);
+  const handleContextMenu = (ev) => {
+    if (!contentRef.current) return;
+    ev.preventDefault();
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+    const menuWidth = contentRef.current.scrollWidth;
+    const menuHeight = contentRef.current.scrollHeight;
+    let x = ev.clientX;
+    let y = ev.clientY;
+    if (x + menuWidth > viewportWidth) {
+      x = viewportWidth - menuWidth - 10;
+    }
+    if (y + menuHeight > viewportHeight) {
+      y = viewportHeight - menuHeight - 10;
+    }
+    setPosition({ x, y });
+    setOpen(true);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(ContextMenuContext, { value: { contentRef, isOpen, position }, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      onContextMenu: (ev) => {
+        onContextMenu?.(ev);
+        handleContextMenu(ev);
+      },
+      ...p
+    }
+  ) });
+}
+
+// src/components/ContextMenu/ContextMenuContent.tsx
+var import_react15 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function ContextMenuContent({ onContextMenu, className, ...p }) {
+  const { contentRef, position, isOpen } = (0, import_react15.use)(ContextMenuContext);
+  (0, import_react15.useEffect)(() => {
+    if (!contentRef.current) {
+      return;
+    }
+    if (isOpen) {
+      const children = selectAccessibleChildren(contentRef.current);
+      const firstChild = children[0];
+      if (!firstChild) {
+        return;
+      }
+      firstChild.focus();
+    }
+  }, [isOpen, position, contentRef]);
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      ref: contentRef,
+      onContextMenu: (ev) => {
+        ev.stopPropagation();
+        ev.preventDefault();
+        onContextMenu?.(ev);
+      },
+      className: cn(
+        isOpen ? "context-menu-active" : null,
+        className
+      ),
+      style: {
+        top: position?.y,
+        left: position?.x
+      },
+      ...p
+    }
+  );
+}
+
+// src/components/ContextMenu/ContextMenu.ts
+var ContextMenu = Object.assign(ContextMenuRoot, {
+  Content: ContextMenuContent
+});
+
+// src/components/Drawer/DrawerBody.tsx
+var import_framer_motion2 = require("framer-motion");
+var import_react17 = require("react");
+
+// src/components/Drawer/DrawerContext.ts
+var import_react16 = require("react");
+var DrawerContext = (0, import_react16.createContext)({});
+
+// src/components/Drawer/DrawerBody.tsx
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function DrawerBody({ position, dir, children, ...p }) {
+  const { isOpen } = (0, import_react17.use)(DrawerContext);
+  const bodyRef = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
+    if (isOpen) {
+      const indexElement = bodyRef.current?.querySelector("[data-drawer='index']");
+      indexElement?.focus();
+    }
+    ;
+  }, [isOpen]);
+  const currentDir = dir || document.documentElement.getAttribute("dir") || "ltr";
+  const currentPosition = position || (currentDir === "ltr" ? "left" : "right");
+  const direction = ["right", "left"].includes(currentPosition) ? "y" : "x";
+  const width = direction === "y" ? "clamp(300px,30%,30%)" : void 0;
+  const height = direction === "y" ? void 0 : "50%";
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    import_framer_motion2.motion.div,
+    {
+      ref: bodyRef,
+      onClick: (ev) => ev.stopPropagation(),
+      initial: direction === "y" ? { x: currentPosition === "left" ? "-100%" : "100%" } : { y: currentPosition === "top" ? "-100%" : "100%" },
+      animate: { y: 0, x: 0 },
+      exit: direction === "y" ? { x: currentPosition === "left" ? "-100%" : "100%" } : { y: currentPosition === "top" ? "-100%" : "100%" },
+      style: {
+        width,
+        height,
+        ...currentPosition === "top" ? { top: 0, left: 0, right: 0 } : currentPosition === "right" ? { top: 0, bottom: 0, right: 0 } : currentPosition === "bottom" ? { bottom: 0, left: 0, right: 0 } : { top: 0, bottom: 0, left: 0 }
+      },
+      transition: { ease: "easeInOut" },
+      ...p,
+      children
+    }
+  );
+}
+
+// src/components/Drawer/DrawerRoot.tsx
+var import_react18 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+function DrawerRoot({ children }) {
+  const [isOpen, setOpen] = (0, import_react18.useState)(false);
+  (0, import_react18.useEffect)(() => {
+    const handleEscape = (ev) => {
+      if (ev.key === "Escape") {
+        setOpen(false);
+      }
+      ;
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, []);
+  (0, import_react18.useEffect)(() => {
+    const scrollbarWidth = getBrowserScrollbarWith();
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    } else {
+      document.body.style.overflow = "unset";
+      document.body.style.paddingRight = "0px";
+    }
+    ;
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(DrawerContext, { value: { isOpen, setOpen }, children });
+}
+
+// src/components/Drawer/DrawerPortal.tsx
+var import_react19 = require("react");
+var import_framer_motion3 = require("framer-motion");
+
+// src/components/Portal/Portal.tsx
+var import_react_dom = require("react-dom");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+function Portal({ children, container }) {
+  return (0, import_react_dom.createPortal)(
+    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_jsx_runtime17.Fragment, { children }),
+    container || document.body
+  );
+}
+
+// src/components/Drawer/DrawerPortal.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+function DrawerPortal({ onClick, ...p }) {
+  const { isOpen, setOpen } = (0, import_react19.use)(DrawerContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(ClientOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_framer_motion3.AnimatePresence, { children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    import_framer_motion3.motion.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      onClick: (ev) => {
+        onClick?.(ev);
+        setOpen(false);
+      },
+      ...p
+    }
+  ) : null }) }) });
+}
+
+// src/components/Drawer/DrawerToggle.tsx
+var import_react20 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function DrawerToggle({ onClick, ...props }) {
+  const { setOpen } = (0, import_react20.use)(DrawerContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+    "button",
+    {
+      onClick: (ev) => {
+        onClick?.(ev);
+        setOpen((prev) => !prev);
+      },
+      ...props
+    }
+  );
+}
+
+// src/components/Drawer/Drawer.ts
+var Drawer = Object.assign(DrawerRoot, {
+  Toggle: DrawerToggle,
+  Portal: DrawerPortal,
+  Body: DrawerBody
+});
+
+// src/components/LoaderLink/LoaderLink.tsx
+var import_link = require("next/link");
+function LoaderLink({ loader, children }) {
+  const { pending } = (0, import_link.useLinkStatus)();
+  return pending ? loader : children;
+}
+
+// src/components/Modal/ModalRoot.tsx
+var import_react22 = require("react");
+
+// src/components/Modal/ModalContext.ts
+var import_react21 = require("react");
+var ModalContext = (0, import_react21.createContext)({});
+
+// src/components/Modal/ModalRoot.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+function ModalRoot({ children, defaultOpen = false }) {
+  const [isOpen, setOpen] = (0, import_react22.useState)(defaultOpen);
+  (0, import_react22.useEffect)(() => {
+    const handleEscape = (e) => {
+      if (e.key === "Escape") {
+        setOpen(false);
+      }
+      ;
+    };
+    document.addEventListener("keydown", handleEscape);
+    return () => {
+      document.removeEventListener("keydown", handleEscape);
+      document.body.style.overflow = "unset";
+    };
+  }, []);
+  (0, import_react22.useEffect)(() => {
+    const scrollbarWidth = getBrowserScrollbarWith();
+    if (isOpen) {
+      document.body.style.overflow = "hidden";
+      document.body.style.paddingRight = `${scrollbarWidth}px`;
+    } else {
+      document.body.style.overflow = "unset";
+      document.body.style.paddingRight = "0px";
+    }
+    ;
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(ModalContext, { value: { isOpen, setOpen }, children });
+}
+
+// src/components/Modal/ModalBody.tsx
+var import_react23 = require("react");
+var import_framer_motion4 = require("framer-motion");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function ModalBody({ onClick, ...props }) {
+  const { isOpen } = (0, import_react23.use)(ModalContext);
+  const contentRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useEffect)(() => {
+    if (isOpen) {
+      const indexElement = contentRef.current?.querySelector("[data-modal='index']");
+      indexElement?.focus();
+    }
+    ;
+  }, [isOpen]);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_framer_motion4.AnimatePresence, { children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_framer_motion4.motion.div,
+    {
+      ref: contentRef,
+      initial: { opacity: 0, scale: 0.9 },
+      animate: { opacity: 1, scale: 1 },
+      exit: { opacity: 0, scale: 0.9 },
+      transition: { ease: "easeInOut" },
+      onClick: (ev) => {
+        onClick?.(ev);
+        ev.stopPropagation();
+      },
+      ...props
+    }
+  ) : null });
+}
+
+// src/components/Modal/ModalHeader.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function ModalHeader(p) {
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { ...p });
+}
+
+// src/components/Modal/ModalPortal.tsx
+var import_react24 = require("react");
+var import_framer_motion5 = require("framer-motion");
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function ModalPortal({ onClick, ...p }) {
+  const { isOpen, setOpen } = (0, import_react24.use)(ModalContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ClientOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_framer_motion5.AnimatePresence, { children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    import_framer_motion5.motion.div,
+    {
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      onClick: (ev) => {
+        onClick?.(ev);
+        setOpen(false);
+      },
+      ...p
+    }
+  ) : null }) }) });
+}
+
+// src/components/Modal/ModalTrigger.tsx
+var import_react25 = require("react");
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function ModalToggle({ onClick, ...props }) {
+  const { setOpen } = (0, import_react25.use)(ModalContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    "button",
+    {
+      onClick: (ev) => {
+        onClick?.(ev);
+        setOpen((prev) => !prev);
+      },
+      ...props
+    }
+  );
+}
+
+// src/components/Modal/ModalContent.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function ModalContent(p) {
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { ...p });
+}
+
+// src/components/Modal/Modal.ts
+var Modal = Object.assign(ModalRoot, {
+  Toggle: ModalToggle,
+  Portal: ModalPortal,
+  Body: ModalBody,
+  Header: ModalHeader,
+  Content: ModalContent
+});
+
+// src/components/Otp/OtpRoot.tsx
+var import_react27 = require("react");
+
+// src/components/Otp/OtpContext.ts
+var import_react26 = require("react");
+var OtpContext = (0, import_react26.createContext)({
+  getInputsValue: () => ""
+});
+
+// src/components/Otp/OtpRoot.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function OtpRoot(p) {
+  const inputs = (0, import_react27.useRef)([]);
+  (0, import_react27.useEffect)(() => {
+    inputs.current[0]?.focus();
+  }, []);
+  const getInputsValue = () => {
+    return inputs?.current.map((input) => input?.value || "").join("") || "";
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(OtpContext, { value: { inputs, getInputsValue }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { ...p }) });
+}
+
+// src/components/Otp/OtpInputs.tsx
+var import_react28 = require("react");
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function OtpInputs({ name, length, onLastChange, ...props }) {
+  const { inputs, getInputsValue } = (0, import_react28.use)(OtpContext);
+  const handlePaste = (ev, startIndex) => {
+    ev.preventDefault();
+    const pastedData = ev.clipboardData.getData("text").replace(/\s/g, "");
+    if (!pastedData) return;
+    for (let i = 0; i < pastedData.length; i++) {
+      const inputIndex = startIndex + i;
+      if (inputIndex >= length) break;
+      const input = inputs?.current[inputIndex];
+      const indexedPastedData = pastedData[i];
+      if (input && indexedPastedData) {
+        input.value = indexedPastedData;
+      }
+    }
+    const nextIndex = Math.min(startIndex + pastedData.length, length - 1);
+    inputs?.current[nextIndex]?.focus();
+    const otpValue = getInputsValue();
+    if (otpValue.length === length) {
+      onLastChange?.(otpValue);
+    }
+  };
+  const handleInputChange = (value, index) => {
+    if (value) {
+      const currentInput = inputs?.current[index];
+      const currentValue = currentInput?.value[currentInput.value.length - 1];
+      if (currentValue) {
+        currentInput.value = currentValue;
+      }
+      const nextInput = inputs?.current[index + 1];
+      if (nextInput) {
+        nextInput.value = "";
+        nextInput.focus();
+        return;
+      }
+      onLastChange?.(getInputsValue());
+    }
+  };
+  const handleBackspace = (e, index) => {
+    if (e.key === "Backspace" && !e.currentTarget.value && index > 0) {
+      inputs?.current[index - 1]?.focus();
+    }
+  };
+  return Array.from({ length }).map(
+    (_, index) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+      "input",
+      {
+        autoComplete: "off",
+        name: `${name || "otp"}-${index}`,
+        onPaste: (ev) => handlePaste(ev, index),
+        onKeyDown: (ev) => handleBackspace(ev, index),
+        onChange: (ev) => handleInputChange(ev.target.value, index),
+        ref: (el) => {
+          if (inputs) {
+            inputs.current[index] = el;
+          }
+        },
+        ...props
+      },
+      index
+    )
+  );
+}
+
+// src/components/Otp/OtpHiddenInput.tsx
+var import_react29 = require("react");
+var import_jsx_runtime28 = require("react/jsx-runtime");
+function OtpHiddenInput({ name, ...p }) {
+  const { getInputsValue } = (0, import_react29.use)(OtpContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("input", { type: "hidden", tabIndex: -1, name: name || "otp", value: getInputsValue(), ...p });
+}
+
+// src/components/Otp/Otp.ts
+var Otp = Object.assign(OtpRoot, {
+  Inputs: OtpInputs,
+  HiddenInput: OtpHiddenInput
+});
+
+// src/components/Pagination/PaginationCounts.tsx
+var import_react31 = require("react");
+
+// src/components/Pagination/PaginationContext.tsx
+var import_react30 = require("react");
+var PaginationContext = (0, import_react30.createContext)({});
+
+// src/components/Pagination/PaginationCounts.tsx
+var import_jsx_runtime29 = require("react/jsx-runtime");
+function PaginationCounts(props) {
+  const { page, pageLength } = (0, import_react31.use)(PaginationContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("p", { ...props, children: [
+    "Page ",
+    page,
+    " / ",
+    pageLength
+  ] });
+}
+
+// src/components/Pagination/PaginationNextBtn.tsx
+var import_react32 = require("react");
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function PaginationNextBtn({ onClick, disabled, ...p }) {
+  const { page, pageLength, nextPage } = (0, import_react32.use)(PaginationContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    "button",
+    {
+      disabled: disabled || page === pageLength,
+      onClick: (ev) => {
+        onClick?.(ev);
+        nextPage();
+      },
+      ...p
+    }
+  );
+}
+
+// src/components/Pagination/PaginationPrevBtn.tsx
+var import_react33 = require("react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function PaginationPrevBtn({ onClick, disabled, ...p }) {
+  const { page, prevPage } = (0, import_react33.use)(PaginationContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "button",
+    {
+      disabled: disabled || page === 1,
+      onClick: (ev) => {
+        onClick?.(ev);
+        prevPage();
+      },
+      ...p
+    }
+  );
+}
+
+// src/components/Pagination/PaginationStateRoot.tsx
+var import_react34 = require("react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function PaginationStateRoot({ pageLength, children }) {
+  const [page, setPage] = (0, import_react34.useState)(1);
+  const nextPage = () => setPage((prev) => prev < pageLength ? prev + 1 : prev);
+  const prevPage = () => setPage((prev) => prev > 1 ? prev - 1 : prev);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(PaginationContext.Provider, { value: { page, pageLength, nextPage, prevPage }, children });
+}
+
+// src/components/Pagination/PaginationSearchParamsRoot.tsx
+var import_navigation = require("next/navigation");
+var import_react35 = require("react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function PaginationSearchParamsRoot({ pageKey, pageLength, children }) {
+  const router = (0, import_navigation.useRouter)();
+  const searchParams = (0, import_navigation.useSearchParams)();
+  const [currentPage, setCurrentPage] = (0, import_react35.useState)(1);
+  (0, import_react35.useEffect)(() => {
+    setCurrentPage(+(searchParams.get(pageKey || "page") || "1"));
+  }, [pageKey, searchParams]);
+  const pushRouter = (page) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set(pageKey || "page", page.toString());
+    router.push("?" + params.toString());
+  };
+  const nextPage = () => {
+    if (currentPage < pageLength) {
+      pushRouter(currentPage + 1);
+    }
+  };
+  const prevPage = () => {
+    if (currentPage > 1) {
+      pushRouter(currentPage - 1);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PaginationContext.Provider, { value: { page: currentPage, pageLength, nextPage, prevPage }, children });
+}
+
+// src/components/Pagination/Pagination.ts
+var baseComponents = {
+  Counts: PaginationCounts,
+  NextBtn: PaginationNextBtn,
+  PrevBtn: PaginationPrevBtn
+};
+var PaginationWithState = Object.assign(PaginationStateRoot, baseComponents);
+var PaginationWithSearchParams = Object.assign(PaginationSearchParamsRoot, baseComponents);
+
+// src/components/PasswordInput/PasswordInputRoot.tsx
+var import_react37 = require("react");
+
+// src/components/PasswordInput/PasswordInputContext.tsx
+var import_react36 = require("react");
+var PasswordInputContext = (0, import_react36.createContext)({});
+
+// src/components/PasswordInput/PasswordInputRoot.tsx
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function PasswordInputRoot(props) {
+  const [isVisible, setIsVisible] = (0, import_react37.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(PasswordInputContext, { value: { isVisible, setIsVisible }, children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("label", { ...props }) });
+}
+
+// src/components/PasswordInput/PasswordInputField.tsx
+var import_react38 = require("react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function PasswordInputField(props) {
+  const { isVisible } = (0, import_react38.use)(PasswordInputContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("input", { type: isVisible ? "text" : "password", ...props });
+}
+
+// src/components/PasswordInput/PasswordInputToggle.tsx
+var import_react39 = require("react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function PasswordInputToggle({ visibleChildren, onClick, children, ...props }) {
+  const { isVisible, setIsVisible } = (0, import_react39.use)(PasswordInputContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick: (ev) => {
+        setIsVisible((prev) => !prev);
+        onClick?.(ev);
+      },
+      ...props,
+      children: isVisible ? visibleChildren : children
+    }
+  );
+}
+
+// src/components/PasswordInput/PasswordInput.ts
+var PasswordInput = Object.assign(PasswordInputRoot, {
+  Field: PasswordInputField,
+  Toggle: PasswordInputToggle
+});
+
+// src/components/Popover/PopoverBody.tsx
+var import_react41 = require("react");
+
+// src/components/Popover/PopoverContext.ts
+var import_react40 = require("react");
+var PopoverContext = (0, import_react40.createContext)({});
+
+// src/components/Popover/PopoverBody.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function PopoverBody({ preventClose, onClick, ...p }) {
+  const { bodyRef, isOpen } = (0, import_react41.use)(PopoverContext);
+  return isOpen ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "div",
+    {
+      ref: bodyRef,
+      "data-state": isOpen ? "active" : "inactive",
+      onClick: (ev) => {
+        if (preventClose) {
+          ev.stopPropagation();
+        }
+        onClick?.(ev);
+      },
+      ...p
+    }
+  ) : null;
+}
+
+// src/components/Popover/PopoverRoot.tsx
+var import_react42 = require("react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function PopoverRoot({ mode = "click", accessHorizontalArrows, onKeyDown, onMouseEnter, onMouseLeave, ...p }) {
+  const [isOpen, setOpen] = (0, import_react42.useState)(false);
+  const toggleRef = (0, import_react42.useRef)(null);
+  const bodyRef = (0, import_react42.useRef)(null);
+  (0, import_react42.useEffect)(() => {
+    const closeHandler = () => {
+      setOpen(false);
+    };
+    window.addEventListener("click", closeHandler);
+    return () => window.removeEventListener("click", closeHandler);
+  }, []);
+  (0, import_react42.useEffect)(() => {
+    if (isOpen) {
+      selectFirstMenuChild();
+    }
+  }, [isOpen]);
+  const selectFirstMenuChild = () => {
+    if (!bodyRef.current) {
+      return;
+    }
+    const children = selectAccessibleChildren(bodyRef.current);
+    const firstChild = children[0];
+    if (!firstChild) {
+      return;
+    }
+    firstChild.focus();
+  };
+  const handleKeyDown = (ev) => {
+    if (!accessHorizontalArrows) {
+      return null;
+    }
+    if (ev.key === "ArrowRight") {
+      if (accessHorizontalArrows === "ArrowRight") {
+        setOpen(true);
+        selectFirstMenuChild();
+      } else {
+        setOpen(false);
+        toggleRef.current?.focus();
+      }
+    }
+    if (ev.key === "ArrowLeft") {
+      if (accessHorizontalArrows === "ArrowLeft") {
+        setOpen(true);
+        selectFirstMenuChild();
+      } else {
+        setOpen(false);
+        toggleRef.current?.focus();
+      }
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(PopoverContext, { value: { isOpen, setOpen, toggleRef, bodyRef, mode }, children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    "div",
+    {
+      "data-state": isOpen ? "active" : "inactive",
+      onKeyDown: (ev) => {
+        onKeyDown?.(ev);
+        handleKeyDown(ev);
+      },
+      onMouseEnter: (ev) => {
+        onMouseEnter?.(ev);
+        if (["hover", "both"].includes(mode)) {
+          ev.stopPropagation();
+          setOpen(true);
+        }
+      },
+      onMouseLeave: (ev) => {
+        onMouseLeave?.(ev);
+        if (["hover", "both"].includes(mode)) {
+          ev.stopPropagation();
+          setOpen(false);
+        }
+      },
+      ...p
+    }
+  ) });
+}
+
+// src/components/Popover/PopoverToggle.tsx
+var import_react43 = require("react");
+var import_jsx_runtime39 = require("react/jsx-runtime");
+function PopoverToggle({ onClick, ...props }) {
+  const { mode, toggleRef, isOpen, setOpen } = (0, import_react43.use)(PopoverContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    "button",
+    {
+      ref: toggleRef,
+      "data-state": isOpen ? "active" : "inactive",
+      onClick: (ev) => {
+        onClick?.(ev);
+        ev.stopPropagation();
+        if (["click", "both"].includes(mode)) {
+          setOpen((prev) => !prev);
+        }
+      },
+      ...props
+    }
+  );
+}
+
+// src/components/Popover/Popover.ts
+var Popover = Object.assign(PopoverRoot, {
+  Toggle: PopoverToggle,
+  Body: PopoverBody
+});
+
+// src/components/Progress/ProgressBar.tsx
+var import_react45 = require("react");
+var import_framer_motion6 = require("framer-motion");
+
+// src/components/Progress/ProgressContext.ts
+var import_react44 = require("react");
+var ProgressContext = (0, import_react44.createContext)({});
+
+// src/components/Progress/ProgressBar.tsx
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function ProgressBar({ duration, children, ...p }) {
+  const { value, maxValue } = (0, import_react45.use)(ProgressContext);
+  const percentage = Math.min(100, Math.max(0, value / maxValue * 100));
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    import_framer_motion6.motion.div,
+    {
+      initial: { width: 0 },
+      whileInView: { width: `${percentage}%` },
+      transition: { duration: duration || 3 },
+      ...p,
+      children: children || /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "text-xs", children: [
+        percentage,
+        "%"
+      ] })
+    }
+  );
+}
+
+// src/components/Progress/ProgressRoot.tsx
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function ProgressRoot({ value, maxValue = 100, ...p }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(ProgressContext, { value: { value, maxValue }, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ...p }) });
+}
+
+// src/components/Progress/Progress.ts
+var Progress = Object.assign(ProgressRoot, {
+  Bar: ProgressBar
+});
+
+// src/components/QrCode/QrCode.tsx
+var import_qrcode = __toESM(require("qrcode"), 1);
+var import_react46 = require("react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function QrCode({ value, options, ...props }) {
+  const canvasRef = (0, import_react46.useRef)(null);
+  (0, import_react46.useEffect)(() => {
+    console.log(value);
+    import_qrcode.default.toCanvas(canvasRef.current, value, options, function(error) {
+      if (error) console.error(error);
+    });
+  }, [value, options]);
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("canvas", { ref: canvasRef, ...props });
+}
+
+// src/components/Rating/RatingRoot.tsx
+var import_react48 = require("react");
+
+// src/components/Rating/RatingContext.ts
+var import_react47 = require("react");
+var RatingContext = (0, import_react47.createContext)({});
+
+// src/components/Rating/RatingRoot.tsx
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var RatingRoot = (p) => {
+  const [hoverValue, setHoverValue] = (0, import_react48.useState)(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(RatingContext, { value: { hoverValue, setHoverValue }, children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "div",
+    {
+      onMouseLeave: () => setHoverValue(null),
+      ...p
+    }
+  ) });
+};
+
+// src/components/Rating/RatingItems.tsx
+var import_react49 = require("react");
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function RatingItems({ count, value, onValueChange, element, activeElement, ...p }) {
+  const { hoverValue, setHoverValue } = (0, import_react49.use)(RatingContext);
+  const displayValue = hoverValue !== null ? hoverValue : value;
+  return Array.from({ length: count }).map((_, index) => {
+    const itemValue = index + 1;
+    const isActive = itemValue <= displayValue;
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      "button",
+      {
+        role: "radio",
+        type: "button",
+        "aria-checked": itemValue === value,
+        onClick: () => onValueChange(itemValue),
+        onMouseEnter: () => setHoverValue(itemValue),
+        "aria-label": `${itemValue} out of ${count} stars`,
+        ...p,
+        children: isActive ? activeElement : element
+      },
+      index
+    );
+  });
+}
+
+// src/components/Rating/Rating.ts
+var Rating = Object.assign(RatingRoot, {
+  Items: RatingItems
+});
+
+// src/components/Sheet/SheetBody.tsx
+var import_react51 = require("react");
+var import_framer_motion7 = require("framer-motion");
+
+// src/components/Sheet/SheetContext.ts
+var import_react50 = require("react");
+var SheetContext = (0, import_react50.createContext)({});
+
+// src/components/Sheet/SheetBody.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function SheetBody(p) {
+  const { controls, y, closeHandler: handleClose } = (0, import_react51.use)(SheetContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_framer_motion7.motion.div,
+    {
+      id: "sheet",
+      onClick: (ev) => ev.stopPropagation(),
+      initial: { y: "100%" },
+      animate: { y: "0%" },
+      exit: { y: "100%" },
+      style: { y },
+      drag: "y",
+      dragControls: controls,
+      dragListener: false,
+      transition: {
+        ease: "easeInOut"
+      },
+      onDragEnd: () => {
+        if ((y?.get() || 0) >= 100) {
+          handleClose();
+        }
+      },
+      dragConstraints: {
+        top: 0,
+        bottom: 0
+      },
+      dragElastic: {
+        top: 0,
+        bottom: 0.5
+      },
+      ...p
+    }
+  );
+}
+
+// src/components/Sheet/SheetRoot.tsx
+var import_react52 = require("react");
+var import_framer_motion8 = require("framer-motion");
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function SheetRoot({ children }) {
+  const y = (0, import_framer_motion8.useMotionValue)(0);
+  const controls = (0, import_framer_motion8.useDragControls)();
+  const [scope, animate] = (0, import_framer_motion8.useAnimate)();
+  const [isOpen, setOpen] = (0, import_react52.useState)(false);
+  (0, import_react52.useEffect)(() => {
+    const bodyElem = document.body;
+    const removeOverflow = () => {
+      bodyElem.style.overflow = "unset";
+    };
+    if (isOpen) {
+      bodyElem.style.overflow = "hidden";
+    } else {
+      removeOverflow();
+    }
+    return () => removeOverflow();
+  }, [isOpen]);
+  const closeHandler = async () => {
+    animate(scope.current, {
+      opacity: [1, 0]
+    });
+    const yStart = typeof y.get() === "number" ? y.get() : 0;
+    await animate("#sheet", {
+      y: [yStart, "100%"]
+    });
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(SheetContext, { value: { isOpen, setOpen, closeHandler, scope, controls, y }, children });
+}
+
+// src/components/Sheet/SheetHeader.tsx
+var import_react53 = require("react");
+var import_jsx_runtime47 = require("react/jsx-runtime");
+function SheetHeader({ onPointerDown, ...p }) {
+  const { controls } = (0, import_react53.use)(SheetContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    "div",
+    {
+      onPointerDown: (ev) => {
+        controls?.start(ev);
+        onPointerDown?.(ev);
+      },
+      ...p
+    }
+  );
+}
+
+// src/components/Sheet/SheetPortal.tsx
+var import_react54 = require("react");
+var import_framer_motion9 = require("framer-motion");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function SheetPortal(p) {
+  const { isOpen, closeHandler: handleClose, scope } = (0, import_react54.use)(SheetContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(ClientOnly, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(Portal, { children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(import_framer_motion9.AnimatePresence, { children: isOpen ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    import_framer_motion9.motion.div,
+    {
+      ref: scope,
+      onClick: handleClose,
+      initial: { opacity: 0 },
+      animate: { opacity: 1 },
+      exit: { opacity: 0 },
+      ...p
+    }
+  ) : null }) }) });
+}
+
+// src/components/Sheet/SheetToggle.tsx
+var import_react55 = require("react");
+var import_jsx_runtime49 = require("react/jsx-runtime");
+function SheetToggle({ onClick, ...props }) {
+  const { setOpen } = (0, import_react55.use)(SheetContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    "button",
+    {
+      onClick: (ev) => {
+        onClick?.(ev);
+        setOpen((prev) => !prev);
+      },
+      ...props
+    }
+  );
+}
+
+// src/components/Sheet/SheetContent.tsx
+var import_jsx_runtime50 = require("react/jsx-runtime");
+function SheetContent(p) {
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { ...p });
+}
+
+// src/components/Sheet/Sheet.ts
+var Sheet = Object.assign(SheetRoot, {
+  Portal: SheetPortal,
+  Body: SheetBody,
+  Header: SheetHeader,
+  Content: SheetContent,
+  Toggle: SheetToggle
+});
+
+// src/components/ShowMore/ShowMoreRoot.tsx
+var import_react57 = require("react");
+
+// src/components/ShowMore/ShowMoreContext.ts
+var import_react56 = require("react");
+var ShowMoreContext = (0, import_react56.createContext)({});
+
+// src/components/ShowMore/ShowMoreRoot.tsx
+var import_jsx_runtime51 = require("react/jsx-runtime");
+function ShowMoreRoot({ maxLines, defaultExpanded = false, style, ...p }) {
+  const [shouldShowMore, setShouldShowMore] = (0, import_react57.useState)(false);
+  const [isShowMore, setIsShowMore] = (0, import_react57.useState)(defaultExpanded);
+  const [maxHeight, setMaxHeight] = (0, import_react57.useState)(0);
+  const contentRef = (0, import_react57.useRef)(null);
+  (0, import_react57.useEffect)(() => {
+    if (contentRef.current) {
+      const element = contentRef.current;
+      const lineHeight = Number.parseInt(window.getComputedStyle(element).lineHeight);
+      const maxHeight2 = lineHeight * (maxLines || 3);
+      const actualHeight = element.scrollHeight;
+      setMaxHeight(maxHeight2);
+      setShouldShowMore(actualHeight > maxHeight2);
+    }
+  }, [maxLines]);
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ShowMoreContext, { value: { contentRef, isShowMore, setIsShowMore, maxHeight, shouldShowMore }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { style: { position: "relative", ...style }, ...p }) });
+}
+
+// src/components/ShowMore/ShowMoreFade.tsx
+var import_react58 = require("react");
+var import_jsx_runtime52 = require("react/jsx-runtime");
+function ShowMoreFade(p) {
+  const { shouldShowMore, isShowMore } = (0, import_react58.use)(ShowMoreContext);
+  return shouldShowMore && !isShowMore ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { ...p }) : null;
+}
+
+// src/components/ShowMore/ShowMoreContent.tsx
+var import_react59 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
+function ShowMoreContent({ children, style, ...props }) {
+  const { contentRef, shouldShowMore, isShowMore, maxHeight } = (0, import_react59.use)(ShowMoreContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    "div",
+    {
+      ref: contentRef,
+      style: {
+        overflow: "hidden",
+        transition: "all 150ms ease",
+        height: shouldShowMore ? isShowMore ? contentRef.current?.scrollHeight ? `${contentRef.current.scrollHeight}px` : "auto" : maxHeight : "auto",
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+
+// src/components/ShowMore/ShowMoreTrigger.tsx
+var import_react60 = require("react");
+var import_jsx_runtime54 = require("react/jsx-runtime");
+function ShowMoreTrigger({ onClick, style, ...p }) {
+  const { setIsShowMore } = (0, import_react60.use)(ShowMoreContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(
+    "button",
+    {
+      style: {
+        position: "relative",
+        ...style
+      },
+      onClick: (ev) => {
+        onClick?.(ev);
+        setIsShowMore((prev) => !prev);
+      },
+      ...p
+    }
+  );
+}
+
+// src/components/ShowMore/ShowMore.ts
+var ShowMore = Object.assign(ShowMoreRoot, {
+  Content: ShowMoreContent,
+  Trigger: ShowMoreTrigger,
+  Fade: ShowMoreFade
+});
+
+// src/components/Spoiler/SpoilerBlur.tsx
+var import_react62 = require("react");
+
+// src/components/Spoiler/SpoilerContext.ts
+var import_react61 = require("react");
+var SpoilerContext = (0, import_react61.createContext)({});
+
+// src/components/Spoiler/SpoilerBlur.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+function SpoilerBlur({ className, ...p }) {
+  const { isOpen } = (0, import_react62.use)(SpoilerContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+    "span",
+    {
+      className: cn(
+        isOpen ? "spoiler-active" : null,
+        className
+      ),
+      ...p
+    }
+  );
+}
+
+// src/components/Spoiler/SpoilerRoot.tsx
+var import_react63 = require("react");
+var import_jsx_runtime56 = require("react/jsx-runtime");
+function SpoilerRoot({ className, ...p }) {
+  const [isOpen, setOpen] = (0, import_react63.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(SpoilerContext, { value: { isOpen, setOpen }, children: /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+    "span",
+    {
+      onClick: () => setOpen(true),
+      className: cn(
+        isOpen ? "spoiler-active" : null,
+        className
+      ),
+      ...p
+    }
+  ) });
+}
+
+// src/components/Spoiler/Spoiler.ts
+var Spoiler = Object.assign(SpoilerRoot, {
+  Blur: SpoilerBlur
+});
+
+// src/components/Steps/StepsRender.tsx
+var import_react65 = require("react");
+
+// src/components/Steps/StepsContext.ts
+var import_react64 = require("react");
+var StepsContext = (0, import_react64.createContext)({});
+
+// src/components/Steps/StepsRender.tsx
+function StepsRender() {
+  const { step, steps } = (0, import_react65.use)(StepsContext);
+  return steps.find((_, index) => index + 1 === step)?.component;
+}
+
+// src/components/Steps/StepsPrevBtn.tsx
+var import_react66 = require("react");
+var import_jsx_runtime57 = require("react/jsx-runtime");
+function StepsPrevBtn({ onClick, disabled, ...p }) {
+  const { step, prevStep } = (0, import_react66.use)(StepsContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(
+    "button",
+    {
+      disabled: disabled || step === 1,
+      onClick: (ev) => {
+        onClick?.(ev);
+        prevStep();
+      },
+      ...p
+    }
+  );
+}
+
+// src/components/Steps/StepsNextBtn.tsx
+var import_react67 = require("react");
+var import_jsx_runtime58 = require("react/jsx-runtime");
+function StepsNextBtn({ onClick, disabled, ...p }) {
+  const { step, steps, nextStep } = (0, import_react67.use)(StepsContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(
+    "button",
+    {
+      disabled: disabled || step === steps.length,
+      onClick: (ev) => {
+        onClick?.(ev);
+        nextStep();
+      },
+      ...p
+    }
+  );
+}
+
+// src/components/Steps/StepsIndexBtn.tsx
+var import_react68 = require("react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
+function StepsIndexBtn({ index, onClick, ...p }) {
+  const { step, setStep } = (0, import_react68.use)(StepsContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+    "button",
+    {
+      disabled: step < index,
+      onClick: (ev) => {
+        onClick?.(ev);
+        setStep(index);
+      },
+      ...p
+    }
+  );
+}
+
+// src/components/Steps/StepsStateRoot.tsx
+var import_react69 = require("react");
+var import_jsx_runtime60 = require("react/jsx-runtime");
+function StepsStateRoot({ children, steps }) {
+  const [step, setStep] = (0, import_react69.useState)(1);
+  const nextStep = () => setStep((prev) => prev + 1);
+  const prevStep = () => setStep((prev) => prev - 1);
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(StepsContext.Provider, { value: { step, setStep, steps, nextStep, prevStep }, children });
+}
+
+// src/components/Steps/StepsSearchParamsRoot.tsx
+var import_navigation2 = require("next/navigation");
+var import_react70 = require("react");
+var import_jsx_runtime61 = require("react/jsx-runtime");
+function StepsSearchParamsRoot({ children, steps, stepKey }) {
+  const router = (0, import_navigation2.useRouter)();
+  const searchParams = (0, import_navigation2.useSearchParams)();
+  const [currentStep, setCurrentStep] = (0, import_react70.useState)(1);
+  (0, import_react70.useEffect)(() => {
+    setCurrentStep(+(searchParams.get(stepKey || "step") || "1"));
+  }, [stepKey, searchParams]);
+  const pushRouter = (page) => {
+    const params = new URLSearchParams(searchParams.toString());
+    params.set(stepKey || "step", page.toString());
+    router.push("?" + params.toString());
+  };
+  const nextStep = () => {
+    if (currentStep < steps.length) {
+      pushRouter(currentStep + 1);
+    }
+  };
+  const prevStep = () => {
+    if (currentStep > 1) {
+      pushRouter(currentStep - 1);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(StepsContext.Provider, { value: { step: currentStep, setStep: setCurrentStep, steps, nextStep, prevStep }, children });
+}
+
+// src/components/Steps/Steps.ts
+var baseComponents2 = {
+  Render: StepsRender,
+  IndexBtn: StepsIndexBtn,
+  PrevBtn: StepsPrevBtn,
+  NextBtn: StepsNextBtn
+};
+var StepsWithState = Object.assign(StepsStateRoot, baseComponents2);
+var StepsWithSearchParams = Object.assign(StepsSearchParamsRoot, baseComponents2);
+
+// src/components/Swap/SwapItem.tsx
+var import_framer_motion10 = require("framer-motion");
+var import_jsx_runtime62 = require("react/jsx-runtime");
+function SwapItem(p) {
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    import_framer_motion10.motion.span,
+    {
+      initial: { rotate: 90, opacity: 0 },
+      animate: { rotate: 0, opacity: 1 },
+      exit: { rotate: 90, opacity: 0 },
+      ...p
+    }
+  );
+}
+
+// src/components/Swap/SwapRoot.tsx
+var import_framer_motion11 = require("framer-motion");
+var import_react72 = require("react");
+
+// src/components/Swap/SwapContext.ts
+var import_react71 = require("react");
+var SwapContext = (0, import_react71.createContext)({});
+
+// src/components/Swap/SwapRoot.tsx
+var import_jsx_runtime63 = require("react/jsx-runtime");
+function SwapRoot({ items, defaultItem, onSwap, ...p }) {
+  const [activeItem, setActiveItem] = (0, import_react72.useState)(defaultItem || items[1]);
+  const handleSwap = (newItem) => {
+    setActiveItem(newItem);
+    onSwap?.(newItem);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(SwapContext, { value: { items, activeItem, handleSwap }, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(import_framer_motion11.AnimatePresence, { mode: "wait", children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { ...p }) }) });
+}
+
+// src/components/Swap/SwapTrigger.tsx
+var import_react73 = require("react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
+function SwapTrigger({ item, onClick, ...p }) {
+  const { items, activeItem, handleSwap } = (0, import_react73.use)(SwapContext);
+  return activeItem === item ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+    "button",
+    {
+      onClick: (ev) => {
+        onClick?.(ev);
+        {
+          const nextIndex = items.indexOf(item) + 1 >= items.length ? 0 : items.indexOf(item) + 1;
+          const nextItem = items[nextIndex];
+          if (nextItem !== void 0) {
+            handleSwap(nextItem);
+          }
+        }
+      },
+      ...p
+    }
+  ) : null;
+}
+
+// src/components/Swap/Swap.ts
+var Swap = Object.assign(SwapRoot, {
+  Trigger: SwapTrigger,
+  Item: SwapItem
+});
+
+// src/components/Tabs/TabsTab.tsx
+var import_react75 = require("react");
+
+// src/components/Tabs/TabsContext.ts
+var import_react74 = require("react");
+var TabsContext = (0, import_react74.createContext)({
+  activeTab: "",
+  setActiveTab: () => {
+  }
+});
+
+// src/components/Tabs/TabsTab.tsx
+var import_jsx_runtime65 = require("react/jsx-runtime");
+function TabsTab({ value, onClick, ...props }) {
+  const { setActiveTab } = (0, import_react75.use)(TabsContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+    "button",
+    {
+      onClick: (ev) => {
+        onClick?.(ev);
+        setActiveTab(value);
+      },
+      ...props
+    }
+  );
+}
+
+// src/components/Tabs/TabsList.tsx
+var import_jsx_runtime66 = require("react/jsx-runtime");
+function TabsList(p) {
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("div", { ...p });
+}
+
+// src/components/Tabs/TabsRoot.tsx
+var import_jsx_runtime67 = require("react/jsx-runtime");
+function TabsRoot({ activeTab, setActiveTab, children }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(TabsContext, { value: { activeTab, setActiveTab }, children });
+}
+
+// src/components/Tabs/TabsPanel.tsx
+var import_react76 = require("react");
+var import_jsx_runtime68 = require("react/jsx-runtime");
+function TabsPanel({ value, ...p }) {
+  const { activeTab } = (0, import_react76.use)(TabsContext);
+  const isActive = activeTab === value;
+  return isActive ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ...p }) : null;
+}
+
+// src/components/Tabs/Tabs.ts
+var Tabs = Object.assign(TabsRoot, {
+  List: TabsList,
+  Tab: TabsTab,
+  Panel: TabsPanel
+});
+
+// src/components/Submit/SubmitRoot.tsx
+var import_react_dom2 = require("react-dom");
+
+// src/components/Submit/SubmitContext.ts
+var import_react77 = require("react");
+var SubmitContext = (0, import_react77.createContext)({});
+
+// src/components/Submit/SubmitRoot.tsx
+var import_jsx_runtime69 = require("react/jsx-runtime");
+function SubmitRoot({ disabled, ...p }) {
+  const { pending } = (0, import_react_dom2.useFormStatus)();
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(SubmitContext, { value: { pending }, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    "button",
+    {
+      disabled: disabled || pending,
+      ...p
+    }
+  ) });
+}
+
+// src/components/Submit/SubmitLoader.tsx
+var import_react78 = require("react");
+function SubmitLoader({ children, loader }) {
+  const { pending } = (0, import_react78.use)(SubmitContext);
+  return pending ? loader : children;
+}
+
+// src/components/Submit/Submit.ts
+var Submit = Object.assign(SubmitRoot, {
+  Loader: SubmitLoader
+});
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AccessNavigation,
+  Accordion,
+  Affix,
+  Breadcrumbs,
+  Carousel,
+  ClientOnly,
+  Clipboard,
+  ContextMenu,
+  Drawer,
+  LoaderLink,
+  Modal,
+  Otp,
+  PaginationWithSearchParams,
+  PaginationWithState,
+  PasswordInput,
+  Popover,
+  Portal,
+  Progress,
+  QrCode,
+  Rating,
+  Sheet,
+  ShowMore,
+  Spoiler,
+  StepsWithSearchParams,
+  StepsWithState,
+  Submit,
+  Swap,
+  Tabs
+});
+//# sourceMappingURL=index.cjs.map