@kadoui/react 1.0.0

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, className, ...props }: DrawerBodyPropsT): import("react").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":"AAGA,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,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,gBAAgB,+BAsD5F"}

package/dist/components/Drawer/DrawerBody.jsx

@@ -0,0 +1,39 @@
+"use client";
+import { cn } from "kadoui-utils";
+import { motion } from "framer-motion";
+import { use, useEffect, useRef } from "react";
+import { DrawerContext } from "./DrawerContext";
+export function DrawerBody({ position, dir, children, className, ...props }) {
+    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 (<motion.div ref={bodyRef} onClick={ev => ev.stopPropagation()} className={cn("absolute bg-background p-3 overflow-y-auto", className)} 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" }} {...props}>
+      {children}
+    </motion.div>);
+}
+;

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, className, ...props }: DrawerPortalPropsT): import("react").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":"AAIA,OAAO,EAA2B,eAAe,EAAE,MAAM,eAAe,CAAC;AAMzE,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAExD,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BA2BhF"}

package/dist/components/Drawer/DrawerPortal.jsx

@@ -0,0 +1,20 @@
+"use client";
+import { use } from "react";
+import { cn } from "kadoui-utils";
+import { motion, AnimatePresence } from "framer-motion";
+import { Portal } from "../Portal/Portal";
+import { DrawerContext } from "./DrawerContext";
+import { ClientOnly } from "../ClientOnly/ClientOnly";
+export function DrawerPortal({ onClick, className, ...props }) {
+    const { isOpen, setOpen } = use(DrawerContext);
+    return (<ClientOnly>
+      <Portal>
+        <AnimatePresence>
+          {isOpen ? (<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={ev => {
+                onClick?.(ev);
+                setOpen(false);
+            }} className={cn("fixed inset-0 z-50 bg-foreground/50", className)} {...props}/>) : null}
+        </AnimatePresence>
+      </Portal>
+    </ClientOnly>);
+}

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.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,+BAmCxD"}

package/dist/components/Drawer/DrawerRoot.jsx

@@ -0,0 +1,35 @@
+"use client";
+import { getBrowserScrollbarWith } from "kadoui-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 (<DrawerContext value={{ isOpen, setOpen }}>
+      {children}
+    </DrawerContext>);
+}

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.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,+BAYrE"}

package/dist/components/Drawer/DrawerToggle.jsx

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

package/dist/components/Dropdown/Dropdown.d.ts

@@ -0,0 +1,8 @@
+import { DropdownMenu } from "./DropdownMenu";
+import { DropdownRoot } from "./DropdownRoot";
+import { DropdownToggle } from "./DropdownToggle";
+export declare const Dropdown: typeof DropdownRoot & {
+    Toggle: typeof DropdownToggle;
+    Menu: typeof DropdownMenu;
+};
+//# sourceMappingURL=Dropdown.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Dropdown.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/Dropdown.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,YAAY,EAAE,MAAM,gBAAgB,CAAC;AAC9C,OAAO,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AAElD,eAAO,MAAM,QAAQ;;;CAGnB,CAAC"}

package/dist/components/Dropdown/Dropdown.js

@@ -0,0 +1,7 @@
+import { DropdownMenu } from "./DropdownMenu";
+import { DropdownRoot } from "./DropdownRoot";
+import { DropdownToggle } from "./DropdownToggle";
+export const Dropdown = Object.assign(DropdownRoot, {
+    Toggle: DropdownToggle,
+    Menu: DropdownMenu
+});

package/dist/components/Dropdown/DropdownContext.d.ts

@@ -0,0 +1,9 @@
+import { Dispatch, RefObject, SetStateAction } from "react";
+export type DropdownContextT = {
+    isOpen: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+    toggleRef: RefObject<HTMLButtonElement | null>;
+    menuRef: RefObject<HTMLDivElement | null>;
+};
+export declare const DropdownContext: import("react").Context<DropdownContextT>;
+//# sourceMappingURL=DropdownContext.d.ts.map

package/dist/components/Dropdown/DropdownContext.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownContext.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownContext.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiB,QAAQ,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE3E,MAAM,MAAM,gBAAgB,GAAG;IAC7B,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3C,SAAS,EAAE,SAAS,CAAC,iBAAiB,GAAG,IAAI,CAAC,CAAC;IAC/C,OAAO,EAAE,SAAS,CAAC,cAAc,GAAG,IAAI,CAAC,CAAC;CAC3C,CAAA;AAED,eAAO,MAAM,eAAe,2CAA0D,CAAC"}

package/dist/components/Dropdown/DropdownContext.js

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

package/dist/components/Dropdown/DropdownMenu.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+export type DropdownMenuPropsT = HTMLAttributes<HTMLDivElement> & {
+    preventClose?: boolean;
+};
+export declare function DropdownMenu({ preventClose, onClick, className, ...p }: DropdownMenuPropsT): import("react").JSX.Element | null;
+//# sourceMappingURL=DropdownMenu.d.ts.map

package/dist/components/Dropdown/DropdownMenu.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownMenu.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownMenu.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAAO,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAChE,YAAY,CAAC,EAAE,OAAO,CAAC;CACxB,CAAA;AAED,wBAAgB,YAAY,CAAC,EAAE,YAAY,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,CAAC,EAAE,EAAE,kBAAkB,sCAsB1F"}

package/dist/components/Dropdown/DropdownMenu.jsx

@@ -0,0 +1,13 @@
+"use client";
+import { cn } from "kadoui-utils";
+import { use } from "react";
+import { DropdownContext } from "./DropdownContext";
+export function DropdownMenu({ preventClose, onClick, className, ...p }) {
+    const { menuRef, isOpen } = use(DropdownContext);
+    return (isOpen ? (<div ref={menuRef} onClick={ev => {
+            if (preventClose) {
+                ev.stopPropagation();
+            }
+            onClick?.(ev);
+        }} className={cn("absolute w-max z-10", className)} {...p}/>) : null);
+}

package/dist/components/Dropdown/DropdownRoot.d.ts

@@ -0,0 +1,6 @@
+import { HTMLAttributes } from "react";
+export type DropdownRootPropsT = HTMLAttributes<HTMLDivElement> & {
+    accessHorizontalArrows?: "ArrowRight" | "ArrowLeft";
+};
+export declare function DropdownRoot({ accessHorizontalArrows, onKeyDown, className, ...p }: DropdownRootPropsT): import("react").JSX.Element;
+//# sourceMappingURL=DropdownRoot.d.ts.map

package/dist/components/Dropdown/DropdownRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownRoot.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownRoot.tsx"],"names":[],"mappings":"AAGA,OAAO,EAAE,cAAc,EAA8C,MAAM,OAAO,CAAC;AAKnF,MAAM,MAAM,kBAAkB,GAAG,cAAc,CAAC,cAAc,CAAC,GAAG;IAChE,sBAAsB,CAAC,EAAE,YAAY,GAAG,WAAW,CAAC;CACrD,CAAA;AAED,wBAAgB,YAAY,CAAC,EAAE,sBAAsB,EAAE,SAAS,EAAE,SAAS,EAAE,GAAG,CAAC,EAAE,EAAE,kBAAkB,+BA6EtG"}

package/dist/components/Dropdown/DropdownRoot.jsx

@@ -0,0 +1,65 @@
+"use client";
+import { cn, selectAccessibleChildren } from "kadoui-utils";
+import { useEffect, useRef, useState } from "react";
+import { DropdownContext } from "./DropdownContext";
+export function DropdownRoot({ accessHorizontalArrows, onKeyDown, className, ...p }) {
+    const [isOpen, setOpen] = useState(false);
+    const toggleRef = useRef(null);
+    const menuRef = useRef(null);
+    useEffect(() => {
+        const closeHandler = () => {
+            setOpen(false);
+        };
+        window.addEventListener("click", closeHandler);
+        return () => window.removeEventListener("click", closeHandler);
+    }, []);
+    useEffect(() => {
+        if (isOpen) {
+            selectFirstMenuChild();
+        }
+    }, [isOpen]);
+    const selectFirstMenuChild = () => {
+        if (!menuRef.current) {
+            return;
+        }
+        const children = selectAccessibleChildren(menuRef.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 (<DropdownContext value={{
+            isOpen, setOpen, toggleRef, menuRef
+        }}>
+      <div className={cn("relative w-fit max-w-full", className)} onKeyDown={ev => {
+            onKeyDown?.(ev);
+            handleKeyDown(ev);
+        }} {...p}/>
+    </DropdownContext>);
+}

package/dist/components/Dropdown/DropdownToggle.d.ts

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

package/dist/components/Dropdown/DropdownToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DropdownToggle.d.ts","sourceRoot":"","sources":["../../../src/components/Dropdown/DropdownToggle.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,cAAc,EAAO,MAAM,OAAO,CAAC;AAI5C,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,iBAAiB,CAAC,CAAC;AAErE,wBAAgB,cAAc,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,oBAAoB,+BAczE"}

package/dist/components/Dropdown/DropdownToggle.jsx

@@ -0,0 +1,11 @@
+"use client";
+import { use } from "react";
+import { DropdownContext } from "./DropdownContext";
+export function DropdownToggle({ onClick, ...props }) {
+    const { toggleRef, setOpen } = use(DropdownContext);
+    return (<button ref={toggleRef} onClick={ev => {
+            ev.stopPropagation();
+            onClick?.(ev);
+            setOpen(prev => !prev);
+        }} {...props}/>);
+}

package/dist/components/LinkLoader/LinkLoader.d.ts

@@ -0,0 +1,6 @@
+import { PropsWithChildren } from "react";
+export type LinkLoaderPropsT = PropsWithChildren & {
+    className?: string;
+};
+export declare function LinkLoader({ children, className }: LinkLoaderPropsT): string | number | bigint | boolean | import("react").JSX.Element | Iterable<import("react").ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<import("react").ReactNode> | null | undefined> | null | undefined;
+//# sourceMappingURL=LinkLoader.d.ts.map

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

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

package/dist/components/LinkLoader/LinkLoader.jsx

@@ -0,0 +1,8 @@
+"use client";
+import { cn } from "kadoui-utils";
+import { LoaderIcon } from "lucide-react";
+import { useLinkStatus } from "next/link";
+export function LinkLoader({ children, className }) {
+    const { pending } = useLinkStatus();
+    return pending ? <LoaderIcon className={cn("compatible-icon animate-spin", className)}/> : children;
+}

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

@@ -0,0 +1,14 @@
+import { ModalBody } from "./ModalBody";
+import { ModalRoot } from "./ModalRoot";
+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;
+    Content: typeof ModalContent;
+    Header: typeof ModalHeader;
+    Body: typeof ModalBody;
+};
+//# 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 { ModalBody } from "./ModalBody";
+import { ModalRoot } from "./ModalRoot";
+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,
+    Content: ModalContent,
+    Header: ModalHeader,
+    Body: ModalBody
+});

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

@@ -0,0 +1,4 @@
+import type { HTMLAttributes } from "react";
+export type ModalBodyPropsT = HTMLAttributes<HTMLDivElement>;
+export declare function ModalBody({ children, className, ...props }: ModalBodyPropsT): import("react").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":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE7D,wBAAgB,SAAS,CAAC,EAAE,QAAQ,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,eAAe,+BAM3E"}

package/dist/components/Modal/ModalBody.jsx

@@ -0,0 +1,6 @@
+import { cn } from "kadoui-utils";
+export function ModalBody({ children, className, ...props }) {
+    return (<div className={cn("py-3 px-1.5 mx-1.5 max-h-[calc(100%-4rem)] overflow-y-auto", className)} {...props}>
+      {children}
+    </div>);
+}

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

@@ -0,0 +1,4 @@
+import { HTMLMotionProps } from "framer-motion";
+export type ModalContentPropsT = HTMLMotionProps<"div">;
+export declare function ModalContent({ onClick, className, ...props }: ModalContentPropsT): import("react").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":"AAIA,OAAO,EAAmB,eAAe,EAAU,MAAM,eAAe,CAAC;AAIzE,MAAM,MAAM,kBAAkB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAExD,wBAAgB,YAAY,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,kBAAkB,+BAiChF"}

package/dist/components/Modal/ModalContent.jsx

@@ -0,0 +1,22 @@
+"use client";
+import { cn } from "kadoui-utils";
+import { use, useEffect, useRef } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ModalContext } from "./ModalContext";
+export function ModalContent({ onClick, className, ...props }) {
+    const { isOpen } = use(ModalContext);
+    const contentRef = useRef(null);
+    useEffect(() => {
+        if (isOpen) {
+            const indexElement = contentRef.current?.querySelector("[data-modal='index']");
+            indexElement?.focus();
+        }
+        ;
+    }, [isOpen]);
+    return (<AnimatePresence>
+      {isOpen ? (<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();
+            }} className={cn("bg-background rounded-2xl w-max max-w-[90%] h-full max-h-[90%]", className)} {...props}/>) : null}
+    </AnimatePresence>);
+}

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({ className, ...props }: ModalHeaderPropsT): import("react").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":"AACA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,iBAAiB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC;AAE/D,wBAAgB,WAAW,CAAC,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BAIrE"}

package/dist/components/Modal/ModalHeader.jsx

@@ -0,0 +1,4 @@
+import { cn } from "kadoui-utils";
+export function ModalHeader({ className, ...props }) {
+    return (<div className={cn("h-16 f-align px-3 bg-background rounded-t-2xl border-b border-separator sticky top-0", className)} {...props}/>);
+}

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, className, ...props }: ModalPortalPropsT): import("react").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":"AAIA,OAAO,EAA2B,eAAe,EAAE,MAAM,eAAe,CAAC;AAMzE,MAAM,MAAM,iBAAiB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAEvD,wBAAgB,WAAW,CAAC,EAAE,OAAO,EAAE,SAAS,EAAE,GAAG,KAAK,EAAE,EAAE,iBAAiB,+BA2B9E"}

package/dist/components/Modal/ModalPortal.jsx

@@ -0,0 +1,20 @@
+"use client";
+import { use } from "react";
+import { cn } from "kadoui-utils";
+import { motion, AnimatePresence } from "framer-motion";
+import { Portal } from "../Portal/Portal";
+import { ModalContext } from "./ModalContext";
+import { ClientOnly } from "../ClientOnly/ClientOnly";
+export function ModalPortal({ onClick, className, ...props }) {
+    const { isOpen, setOpen } = use(ModalContext);
+    return (<ClientOnly>
+      <Portal>
+        <AnimatePresence>
+          {isOpen ? (<motion.div initial={{ opacity: 0 }} animate={{ opacity: 1 }} exit={{ opacity: 0 }} onClick={ev => {
+                onClick?.(ev);
+                setOpen(false);
+            }} className={cn("fixed inset-0 z-50 f-center bg-foreground/10", className)} {...props}/>) : null}
+        </AnimatePresence>
+      </Portal>
+    </ClientOnly>);
+}

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.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":"AAGA,OAAO,EAAuB,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAI/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,+BAmC3E"}

package/dist/components/Modal/ModalRoot.jsx

@@ -0,0 +1,35 @@
+"use client";
+import { getBrowserScrollbarWith } from "kadoui-utils";
+import { useState, useEffect } from "react";
+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 (<ModalContext value={{ isOpen, setOpen }}>
+      {children}
+    </ModalContext>);
+}

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.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,+BAYnE"}

package/dist/components/Modal/ModalTrigger.jsx

@@ -0,0 +1,10 @@
+"use client";
+import { use } from "react";
+import { ModalContext } from "./ModalContext";
+export function ModalToggle({ onClick, ...props }) {
+    const { setOpen } = use(ModalContext);
+    return (<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
+});