@kadoui/react 1.5.10 → 1.6.0

package/dist/components/ContextMenu/ContextMenuRoot.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from "react";
+import { getBrowserScrollbarWith } from "../../utils";
+import { ContextMenuContext } from "./ContextMenuContext";
+export function ContextMenuRoot({ onContextMenu, ...p }) {
+    const [position, setPosition] = useState(undefined);
+    const [isOpen, setOpen] = useState(false);
+    const contentRef = useRef(null);
+    const handleClickOutside = useCallback((ev) => {
+        if (!contentRef.current?.contains(ev.target)) {
+            setOpen(false);
+            setPosition(undefined);
+        }
+    }, []);
+    useEffect(() => {
+        document.addEventListener("click", handleClickOutside);
+        return () => document.removeEventListener("click", handleClickOutside);
+    }, [handleClickOutside]);
+    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 (_jsx(ContextMenuContext, { value: { contentRef, isOpen, position }, children: _jsx("div", { onContextMenu: ev => {
+                onContextMenu?.(ev);
+                handleContextMenu(ev);
+            }, ...p }) }));
+}

package/dist/components/Drawer/Drawer.d.ts

@@ -0,0 +1,10 @@
+import { DrawerBody } from "./DrawerBody";
+import { DrawerRoot } from "./DrawerRoot";
+import { DrawerPortal } from "./DrawerPortal";
+import { DrawerToggle } from "./DrawerToggle";
+export declare const Drawer: typeof DrawerRoot & {
+    Toggle: typeof DrawerToggle;
+    Portal: typeof DrawerPortal;
+    Body: typeof DrawerBody;
+};
+//# sourceMappingURL=Drawer.d.ts.map

package/dist/components/Drawer/Drawer.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Drawer.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/Drawer.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,eAAO,MAAM,MAAM;;;;CAIjB,CAAC"}

package/dist/components/Drawer/Drawer.js

@@ -0,0 +1,9 @@
+import { DrawerBody } from "./DrawerBody";
+import { DrawerRoot } from "./DrawerRoot";
+import { DrawerPortal } from "./DrawerPortal";
+import { DrawerToggle } from "./DrawerToggle";
+export const Drawer = Object.assign(DrawerRoot, {
+    Toggle: DrawerToggle,
+    Portal: DrawerPortal,
+    Body: DrawerBody
+});

package/dist/components/Drawer/DrawerBody.d.ts

@@ -0,0 +1,6 @@
+import { HTMLMotionProps } from "framer-motion";
+export type DrawerBodyPropsT = HTMLMotionProps<"div"> & {
+    position?: "top" | "right" | "bottom" | "left";
+};
+export declare function DrawerBody({ position, dir, children, ...p }: DrawerBodyPropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DrawerBody.d.ts.map

package/dist/components/Drawer/DrawerBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerBody.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerBody.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAU,eAAe,EAAE,MAAM,eAAe,CAAC;AAKxD,MAAM,MAAM,gBAAgB,GAAG,eAAe,CAAC,KAAK,CAAC,GAAG;IACtD,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;CAChD,CAAC;AAEF,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,GAAG,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAE,EAAE,gBAAgB,2CAqD7E"}

package/dist/components/Drawer/DrawerBody.js

@@ -0,0 +1,37 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { motion } from "framer-motion";
+import { use, useEffect, useRef } from "react";
+import { DrawerContext } from "./DrawerContext";
+export function DrawerBody({ position, dir, children, ...p }) {
+    const { isOpen } = use(DrawerContext);
+    const bodyRef = useRef(null);
+    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%)" : undefined;
+    const height = direction === "y" ? undefined : "50%";
+    return (_jsx(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: children }));
+}
+;

package/dist/components/Drawer/DrawerContext.d.ts

@@ -0,0 +1,7 @@
+import { Dispatch, SetStateAction } from "react";
+export type DrawerContextT = {
+    isOpen: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+};
+export declare const DrawerContext: import("react").Context<DrawerContextT>;
+//# sourceMappingURL=DrawerContext.d.ts.map

package/dist/components/Drawer/DrawerContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerContext.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhE,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAC5C,CAAC;AAEF,eAAO,MAAM,aAAa,yCAAsD,CAAC"}

package/dist/components/Drawer/DrawerContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const DrawerContext = createContext({});

package/dist/components/Drawer/DrawerPortal.d.ts

@@ -0,0 +1,4 @@
+import { HTMLMotionProps } from "framer-motion";
+export type DrawerPortalPropsT = HTMLMotionProps<"div">;
+export declare function DrawerPortal({ onClick, ...p }: DrawerPortalPropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DrawerPortal.d.ts.map

package/dist/components/Drawer/DrawerPortal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerPortal.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerPortal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA2B,eAAe,EAAE,MAAM,eAAe,CAAC;AAMzE,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAExD,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,EAAE,kBAAkB,2CAuBjE"}

package/dist/components/Drawer/DrawerPortal.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Portal } from "../Portal/Portal";
+import { DrawerContext } from "./DrawerContext";
+import { ClientOnly } from "../ClientOnly/ClientOnly";
+export function DrawerPortal({ onClick, ...p }) {
+    const { isOpen, setOpen } = use(DrawerContext);
+    return (_jsx(ClientOnly, { children: _jsx(Portal, { children: _jsx(AnimatePresence, { children: isOpen ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: ev => {
+                        onClick?.(ev);
+                        setOpen(false);
+                    }, ...p })) : null }) }) }));
+}

package/dist/components/Drawer/DrawerRoot.d.ts

@@ -0,0 +1,4 @@
+import { PropsWithChildren } from "react";
+export type DrawerRootPropsT = PropsWithChildren;
+export declare function DrawerRoot({ children }: DrawerRootPropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DrawerRoot.d.ts.map

package/dist/components/Drawer/DrawerRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerRoot.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerRoot.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAuB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/D,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,CAAC;AAEjD,wBAAgB,UAAU,CAAC,EAAE,QAAQ,EAAE,EAAE,gBAAgB,2CAmCxD"}

package/dist/components/Drawer/DrawerRoot.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getBrowserScrollbarWith } from "../../utils";
+import { useState, useEffect } from "react";
+import { DrawerContext } from "./DrawerContext";
+export function DrawerRoot({ children }) {
+    const [isOpen, setOpen] = useState(false);
+    useEffect(() => {
+        const handleEscape = (ev) => {
+            if (ev.key === "Escape") {
+                setOpen(false);
+            }
+            ;
+        };
+        document.addEventListener("keydown", handleEscape);
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+            document.body.style.overflow = "unset";
+        };
+    }, []);
+    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 (_jsx(DrawerContext, { value: { isOpen, setOpen }, children: children }));
+}

package/dist/components/Drawer/DrawerToggle.d.ts

@@ -0,0 +1,4 @@
+import { ButtonHTMLAttributes } from "react";
+export type DrawerTogglePropsT = ButtonHTMLAttributes<HTMLButtonElement>;
+export declare function DrawerToggle({ onClick, ...props }: DrawerTogglePropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DrawerToggle.d.ts.map

package/dist/components/Drawer/DrawerToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerToggle.d.ts","sourceRoot":"","sources":["../../../src/components/Drawer/DrawerToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAO,MAAM,OAAO,CAAC;AAIlD,MAAM,MAAM,kBAAkB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAEzE,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,2CAYrE"}

package/dist/components/Drawer/DrawerToggle.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use } from "react";
+import { DrawerContext } from "./DrawerContext";
+export function DrawerToggle({ onClick, ...props }) {
+    const { setOpen } = use(DrawerContext);
+    return (_jsx("button", { onClick: (ev) => {
+            onClick?.(ev);
+            setOpen(prev => !prev);
+        }, ...props }));
+}

package/dist/components/LoaderLink/LoaderLink.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren, ReactNode } from "react";
+export type LoaderLinkPropsT = PropsWithChildren & {
+    loader: ReactNode;
+};
+export declare function LoaderLink({ loader, children }: LoaderLinkPropsT): ReactNode;
+//# sourceMappingURL=LoaderLink.d.ts.map

package/dist/components/LoaderLink/LoaderLink.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LoaderLink.d.ts","sourceRoot":"","sources":["../../../src/components/LoaderLink/LoaderLink.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,iBAAiB,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAErD,MAAM,MAAM,gBAAgB,GAAG,iBAAiB,GAAG;IACjD,MAAM,EAAE,SAAS,CAAC;CACnB,CAAA;AAED,wBAAgB,UAAU,CAAC,EAAE,MAAM,EAAE,QAAQ,EAAE,EAAE,gBAAgB,aAIhE"}

package/dist/components/LoaderLink/LoaderLink.js

@@ -0,0 +1,6 @@
+"use client";
+import { useLinkStatus } from "next/link";
+export function LoaderLink({ loader, children }) {
+    const { pending } = useLinkStatus();
+    return pending ? loader : children;
+}

package/dist/components/Modal/Modal.d.ts

@@ -0,0 +1,14 @@
+import { ModalRoot } from "./ModalRoot";
+import { ModalBody } from "./ModalBody";
+import { ModalHeader } from "./ModalHeader";
+import { ModalPortal } from "./ModalPortal";
+import { ModalToggle } from "./ModalTrigger";
+import { ModalContent } from "./ModalContent";
+export declare const Modal: typeof ModalRoot & {
+    Toggle: typeof ModalToggle;
+    Portal: typeof ModalPortal;
+    Body: typeof ModalBody;
+    Header: typeof ModalHeader;
+    Content: typeof ModalContent;
+};
+//# sourceMappingURL=Modal.d.ts.map

package/dist/components/Modal/Modal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Modal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/Modal.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAC5C,OAAO,EAAE,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAC7C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAE9C,eAAO,MAAM,KAAK;;;;;;CAMhB,CAAC"}

package/dist/components/Modal/Modal.js

@@ -0,0 +1,13 @@
+import { ModalRoot } from "./ModalRoot";
+import { ModalBody } from "./ModalBody";
+import { ModalHeader } from "./ModalHeader";
+import { ModalPortal } from "./ModalPortal";
+import { ModalToggle } from "./ModalTrigger";
+import { ModalContent } from "./ModalContent";
+export const Modal = Object.assign(ModalRoot, {
+    Toggle: ModalToggle,
+    Portal: ModalPortal,
+    Body: ModalBody,
+    Header: ModalHeader,
+    Content: ModalContent
+});

package/dist/components/Modal/ModalBody.d.ts

@@ -0,0 +1,4 @@
+import { HTMLMotionProps } from "framer-motion";
+export type ModalBodyPropsT = HTMLMotionProps<"div">;
+export declare function ModalBody({ onClick, ...props }: ModalBodyPropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalBody.d.ts.map

package/dist/components/Modal/ModalBody.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBody.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalBody.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAmB,eAAe,EAAU,MAAM,eAAe,CAAC;AAIzE,MAAM,MAAM,eAAe,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAErD,wBAAgB,SAAS,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,2CA6B/D"}

package/dist/components/Modal/ModalBody.js

@@ -0,0 +1,20 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use, useEffect, useRef } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ModalContext } from "./ModalContext";
+export function ModalBody({ onClick, ...props }) {
+    const { isOpen } = use(ModalContext);
+    const contentRef = useRef(null);
+    useEffect(() => {
+        if (isOpen) {
+            const indexElement = contentRef.current?.querySelector("[data-modal='index']");
+            indexElement?.focus();
+        }
+        ;
+    }, [isOpen]);
+    return (_jsx(AnimatePresence, { children: isOpen ? (_jsx(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 }));
+}

package/dist/components/Modal/ModalContent.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from "react";
+export type ModalContentPropsT = HTMLAttributes<HTMLDivElement>;
+export declare function ModalContent(p: ModalContentPropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalContent.d.ts.map

package/dist/components/Modal/ModalContent.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContent.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalContent.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAEhE,wBAAgB,YAAY,CAAC,CAAC,EAAE,kBAAkB,2CAIjD"}

package/dist/components/Modal/ModalContent.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ModalContent(p) {
+    return (_jsx("div", { ...p }));
+}

package/dist/components/Modal/ModalContext.d.ts

@@ -0,0 +1,7 @@
+import { Dispatch, SetStateAction } from "react";
+export type ModalContextT = {
+    isOpen: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+};
+export declare const ModalContext: import("react").Context<ModalContextT>;
+//# sourceMappingURL=ModalContext.d.ts.map

package/dist/components/Modal/ModalContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalContext.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEhE,MAAM,MAAM,aAAa,GAAG;IAC1B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;CAC5C,CAAA;AAED,eAAO,MAAM,YAAY,wCAAoD,CAAC"}

package/dist/components/Modal/ModalContext.js

@@ -0,0 +1,2 @@
+import { createContext } from "react";
+export const ModalContext = createContext({});

package/dist/components/Modal/ModalHeader.d.ts

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from "react";
+export type ModalHeaderPropsT = HTMLAttributes<HTMLDivElement>;
+export declare function ModalHeader(p: ModalHeaderPropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalHeader.d.ts.map

package/dist/components/Modal/ModalHeader.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalHeader.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalHeader.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE/D,wBAAgB,WAAW,CAAC,CAAC,EAAE,iBAAiB,2CAI/C"}

package/dist/components/Modal/ModalHeader.js

@@ -0,0 +1,4 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+export function ModalHeader(p) {
+    return (_jsx("div", { ...p }));
+}

package/dist/components/Modal/ModalPortal.d.ts

@@ -0,0 +1,4 @@
+import { HTMLMotionProps } from "framer-motion";
+export type ModalPortalPropsT = HTMLMotionProps<"div">;
+export declare function ModalPortal({ onClick, ...p }: ModalPortalPropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalPortal.d.ts.map

package/dist/components/Modal/ModalPortal.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalPortal.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalPortal.tsx"],"names":[],"mappings":"AAGA,OAAO,EAA2B,eAAe,EAAE,MAAM,eAAe,CAAC;AAMzE,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAEvD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,GAAG,CAAC,EAAE,EAAE,iBAAiB,2CAuB/D"}

package/dist/components/Modal/ModalPortal.js

@@ -0,0 +1,14 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use } from "react";
+import { motion, AnimatePresence } from "framer-motion";
+import { Portal } from "../Portal/Portal";
+import { ModalContext } from "./ModalContext";
+import { ClientOnly } from "../ClientOnly/ClientOnly";
+export function ModalPortal({ onClick, ...p }) {
+    const { isOpen, setOpen } = use(ModalContext);
+    return (_jsx(ClientOnly, { children: _jsx(Portal, { children: _jsx(AnimatePresence, { children: isOpen ? (_jsx(motion.div, { initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, onClick: ev => {
+                        onClick?.(ev);
+                        setOpen(false);
+                    }, ...p })) : null }) }) }));
+}

package/dist/components/Modal/ModalRoot.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from "react";
+export type ModalRootPropsT = PropsWithChildren & {
+    defaultOpen?: boolean;
+};
+export declare function ModalRoot({ children, defaultOpen }: ModalRootPropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalRoot.d.ts.map

package/dist/components/Modal/ModalRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalRoot.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAuB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAM/D,MAAM,MAAM,eAAe,GAAG,iBAAiB,GAAG;IAChD,WAAW,CAAC,EAAE,OAAO,CAAC;CACvB,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,WAAmB,EAAE,EAAE,eAAe,2CAmC3E"}

package/dist/components/Modal/ModalRoot.js

@@ -0,0 +1,34 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useState, useEffect } from "react";
+import { getBrowserScrollbarWith } from "../../utils";
+import { ModalContext } from "./ModalContext";
+export function ModalRoot({ children, defaultOpen = false }) {
+    const [isOpen, setOpen] = useState(defaultOpen);
+    useEffect(() => {
+        const handleEscape = (e) => {
+            if (e.key === "Escape") {
+                setOpen(false);
+            }
+            ;
+        };
+        document.addEventListener("keydown", handleEscape);
+        return () => {
+            document.removeEventListener("keydown", handleEscape);
+            document.body.style.overflow = "unset";
+        };
+    }, []);
+    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 (_jsx(ModalContext, { value: { isOpen, setOpen }, children: children }));
+}

package/dist/components/Modal/ModalTrigger.d.ts

@@ -0,0 +1,4 @@
+import { ButtonHTMLAttributes } from "react";
+export type ModalTogglePropsT = ButtonHTMLAttributes<HTMLButtonElement>;
+export declare function ModalToggle({ onClick, ...props }: ModalTogglePropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=ModalTrigger.d.ts.map

package/dist/components/Modal/ModalTrigger.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ModalTrigger.d.ts","sourceRoot":"","sources":["../../../src/components/Modal/ModalTrigger.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,oBAAoB,EAAO,MAAM,OAAO,CAAC;AAIlD,MAAM,MAAM,iBAAiB,GAAG,oBAAoB,CAAC,iBAAiB,CAAC,CAAC;AAExE,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,2CAYnE"}

package/dist/components/Modal/ModalTrigger.js

@@ -0,0 +1,11 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use } from "react";
+import { ModalContext } from "./ModalContext";
+export function ModalToggle({ onClick, ...props }) {
+    const { setOpen } = use(ModalContext);
+    return (_jsx("button", { onClick: (ev) => {
+            onClick?.(ev);
+            setOpen(prev => !prev);
+        }, ...props }));
+}

package/dist/components/Otp/Otp.d.ts

@@ -0,0 +1,8 @@
+import { OtpRoot } from "./OtpRoot";
+import { OtpInputs } from "./OtpInputs";
+import { OtpHiddenInput } from "./OtpHiddenInput";
+export declare const Otp: typeof OtpRoot & {
+    Inputs: typeof OtpInputs;
+    HiddenInput: typeof OtpHiddenInput;
+};
+//# sourceMappingURL=Otp.d.ts.map

package/dist/components/Otp/Otp.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Otp.d.ts","sourceRoot":"","sources":["../../../src/components/Otp/Otp.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,EAAE,MAAM,WAAW,CAAC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AACxC,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,eAAO,MAAM,GAAG;;;CAGd,CAAC"}

package/dist/components/Otp/Otp.js

@@ -0,0 +1,7 @@
+import { OtpRoot } from "./OtpRoot";
+import { OtpInputs } from "./OtpInputs";
+import { OtpHiddenInput } from "./OtpHiddenInput";
+export const Otp = Object.assign(OtpRoot, {
+    Inputs: OtpInputs,
+    HiddenInput: OtpHiddenInput
+});

package/dist/components/Otp/OtpContext.d.ts

@@ -0,0 +1,7 @@
+import { RefObject } from "react";
+export type createContextT = {
+    inputs?: RefObject<(HTMLInputElement | null)[]>;
+    getInputsValue: () => string;
+};
+export declare const OtpContext: import("react").Context<createContextT>;
+//# sourceMappingURL=OtpContext.d.ts.map

package/dist/components/Otp/OtpContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpContext.d.ts","sourceRoot":"","sources":["../../../src/components/Otp/OtpContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,SAAS,EAAE,MAAM,OAAO,CAAC;AAEjD,MAAM,MAAM,cAAc,GAAG;IAC3B,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IAChD,cAAc,EAAE,MAAM,MAAM,CAAA;CAC7B,CAAA;AAED,eAAO,MAAM,UAAU,yCAErB,CAAC"}

package/dist/components/Otp/OtpContext.js

@@ -0,0 +1,4 @@
+import { createContext } from "react";
+export const OtpContext = createContext({
+    getInputsValue: () => ""
+});

package/dist/components/Otp/OtpHiddenInput.d.ts

@@ -0,0 +1,4 @@
+import { InputHTMLAttributes } from "react";
+export type OtpHiddenInputPropsT = InputHTMLAttributes<HTMLInputElement>;
+export declare function OtpHiddenInput({ name, ...p }: OtpHiddenInputPropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OtpHiddenInput.d.ts.map

package/dist/components/Otp/OtpHiddenInput.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpHiddenInput.d.ts","sourceRoot":"","sources":["../../../src/components/Otp/OtpHiddenInput.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,mBAAmB,EAAO,MAAM,OAAO,CAAC;AAIjD,MAAM,MAAM,oBAAoB,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,CAAC;AAEzE,wBAAgB,cAAc,CAAC,EAAE,IAAI,EAAE,GAAG,CAAC,EAAE,EAAE,oBAAoB,2CAMlE"}

package/dist/components/Otp/OtpHiddenInput.js

@@ -0,0 +1,8 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use } from "react";
+import { OtpContext } from "./OtpContext";
+export function OtpHiddenInput({ name, ...p }) {
+    const { getInputsValue } = use(OtpContext);
+    return (_jsx("input", { type: "hidden", tabIndex: -1, name: name || "otp", value: getInputsValue(), ...p }));
+}

package/dist/components/Otp/OtpInputs.d.ts

@@ -0,0 +1,7 @@
+import { InputHTMLAttributes } from "react";
+export type OtpInputsPropsT = InputHTMLAttributes<HTMLInputElement> & {
+    length: number;
+    onLastChange?: (otp: string) => void;
+};
+export declare function OtpInputs({ name, length, onLastChange, ...props }: OtpInputsPropsT): import("react/jsx-runtime").JSX.Element[];
+//# sourceMappingURL=OtpInputs.d.ts.map

package/dist/components/Otp/OtpInputs.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpInputs.d.ts","sourceRoot":"","sources":["../../../src/components/Otp/OtpInputs.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAkB,mBAAmB,EAAsB,MAAM,OAAO,CAAC;AAIhF,MAAM,MAAM,eAAe,GAAG,mBAAmB,CAAC,gBAAgB,CAAC,GAAG;IACpE,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAA;AAED,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,YAAY,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,6CAwElF"}

package/dist/components/Otp/OtpInputs.js

@@ -0,0 +1,55 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use } from "react";
+import { OtpContext } from "./OtpContext";
+export function OtpInputs({ name, length, onLastChange, ...props }) {
+    const { inputs, getInputsValue } = use(OtpContext);
+    const handlePaste = (ev, startIndex) => {
+        ev.preventDefault();
+        const pastedData = ev.clipboardData.getData("text").replace(/\s/g, ""); // Remove whitespace
+        if (!pastedData)
+            return;
+        for (let i = 0; i < pastedData.length; i++) {
+            const inputIndex = startIndex + i;
+            if (inputIndex >= length)
+                break; // Don't exceed OTP length
+            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) => (_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)));
+}

package/dist/components/Otp/OtpRoot.d.ts

@@ -0,0 +1,4 @@
+import { HTMLAttributes } from "react";
+export type OtpRootPropsT = HTMLAttributes<HTMLDivElement>;
+export declare function OtpRoot(p: OtpRootPropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=OtpRoot.d.ts.map

package/dist/components/Otp/OtpRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"OtpRoot.d.ts","sourceRoot":"","sources":["../../../src/components/Otp/OtpRoot.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAqB,MAAM,OAAO,CAAC;AAI1D,MAAM,MAAM,aAAa,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE3D,wBAAgB,OAAO,CAAC,CAAC,EAAE,aAAa,2CAgBvC"}