@kadoui/react 2.1.1 → 2.1.3

package/dist/react-components/drawer-sheet/DrawerSheetProvider.js

@@ -0,0 +1,75 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, useContext, useMemo, useState, useCallback, useRef } from "react";
+const DrawerSheetProviderContext = createContext(null);
+export function DrawerSheetProvider({ children }) {
+    const [drawerStates, setDrawerStates] = useState(new Map());
+    const registerDrawer = useCallback((id, isOpen, height) => {
+        setDrawerStates((prev) => {
+            const next = new Map(prev);
+            next.set(id, { isOpen, height });
+            return next;
+        });
+    }, []);
+    const unregisterDrawer = useCallback((id) => {
+        setDrawerStates((prev) => {
+            const next = new Map(prev);
+            next.delete(id);
+            return next;
+        });
+    }, []);
+    const updateDrawerHeight = useCallback((id, height) => {
+        setDrawerStates((prev) => {
+            const next = new Map(prev);
+            const current = next.get(id);
+            if (current) {
+                next.set(id, { ...current, height });
+            }
+            return next;
+        });
+    }, []);
+    const hasOpenDrawer = useMemo(() => {
+        for (const state of drawerStates.values()) {
+            if (state.isOpen)
+                return true;
+        }
+        return false;
+    }, [drawerStates]);
+    const nestedDrawerCount = useMemo(() => {
+        let count = 0;
+        for (const state of drawerStates.values()) {
+            if (state.isOpen)
+                count++;
+        }
+        return count;
+    }, [drawerStates]);
+    const frontmostHeight = useMemo(() => {
+        let maxHeight = 0;
+        for (const state of drawerStates.values()) {
+            if (state.isOpen && state.height && state.height > maxHeight) {
+                maxHeight = state.height;
+            }
+        }
+        return maxHeight;
+    }, [drawerStates]);
+    // Use ref to access latest drawerStates without causing re-renders
+    const drawerStatesRef = useRef(drawerStates);
+    drawerStatesRef.current = drawerStates;
+    const getDrawerHeight = useCallback((id) => {
+        return drawerStatesRef.current.get(id)?.height;
+    }, []);
+    const contextValue = useMemo(() => ({
+        registerDrawer,
+        unregisterDrawer,
+        updateDrawerHeight,
+        hasOpenDrawer,
+        nestedDrawerCount,
+        frontmostHeight,
+        getDrawerHeight,
+    }), [registerDrawer, unregisterDrawer, updateDrawerHeight, hasOpenDrawer, nestedDrawerCount, frontmostHeight, getDrawerHeight]);
+    return (_jsx(DrawerSheetProviderContext.Provider, { value: contextValue, children: children }));
+}
+export function useDrawerSheetProvider() {
+    const context = useContext(DrawerSheetProviderContext);
+    return context;
+}

package/dist/react-components/drawer-sheet/DrawerSheetRoot.d.ts

@@ -0,0 +1,3 @@
+import type { DrawerSheetRootPropsT } from "./drawerSheetTypes";
+export declare function DrawerSheetRoot({ children, position, swipeDirection }: DrawerSheetRootPropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DrawerSheetRoot.d.ts.map

package/dist/react-components/drawer-sheet/DrawerSheetRoot.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerSheetRoot.d.ts","sourceRoot":"","sources":["../../../src/react-components/drawer-sheet/DrawerSheetRoot.tsx"],"names":[],"mappings":"AASA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,wBAAgB,eAAe,CAAC,EAC9B,QAAQ,EACR,QAAiB,EACjB,cAAc,EACf,EAAE,qBAAqB,2CA2IvB"}

package/dist/react-components/drawer-sheet/DrawerSheetRoot.js

@@ -0,0 +1,130 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useEffect, useState, useId } from "react";
+import { usePathname } from "next/navigation";
+import { useMotionValue, useAnimate } from "framer-motion";
+import { getBrowserScrollbarWith } from "../../utils-exports";
+import { DrawerSheetContext } from "./DrawerSheetContext";
+import { useDrawerSheetProvider } from "./DrawerSheetProvider";
+export function DrawerSheetRoot({ children, position = "left", swipeDirection }) {
+    const pathname = usePathname();
+    const drawerId = useId();
+    const provider = useDrawerSheetProvider();
+    const y = useMotionValue(0);
+    const x = useMotionValue(0);
+    const [scope, animate] = useAnimate();
+    const [isOpen, setOpen] = useState(false);
+    // Determine swipe direction based on position if not explicitly provided
+    const resolvedSwipeDirection = swipeDirection || (position === "top" ? "down" :
+        position === "bottom" ? "up" :
+            position === "right" ? "left" :
+                "right");
+    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(() => {
+        setOpen(false);
+    }, [pathname]);
+    // Register/unregister drawer with provider (optional)
+    const registerDrawer = provider?.registerDrawer;
+    const unregisterDrawer = provider?.unregisterDrawer;
+    useEffect(() => {
+        if (!registerDrawer || !unregisterDrawer)
+            return;
+        registerDrawer(drawerId, isOpen);
+        return () => {
+            unregisterDrawer(drawerId);
+        };
+    }, [drawerId, isOpen, registerDrawer, unregisterDrawer]);
+    useEffect(() => {
+        const scrollbarWidth = getBrowserScrollbarWith();
+        const bodyElem = document.body;
+        const removeOverStyles = () => {
+            bodyElem.style.overflow = "unset";
+            bodyElem.style.paddingRight = "0px";
+        };
+        // Only lock body scroll if this is the topmost drawer
+        const isTopmost = provider ? provider.nestedDrawerCount === (isOpen ? 1 : 0) : isOpen;
+        if (isOpen && isTopmost) {
+            bodyElem.style.overflow = "hidden";
+            bodyElem.style.paddingRight = `${scrollbarWidth}px`;
+        }
+        else if (!isOpen && provider?.nestedDrawerCount === 0) {
+            removeOverStyles();
+        }
+        return () => {
+            if (provider?.nestedDrawerCount === 0) {
+                removeOverStyles();
+            }
+        };
+    }, [isOpen, provider]);
+    const closeHandler = async () => {
+        animate(scope.current, {
+            opacity: [1, 0],
+        });
+        const getInitialValue = () => {
+            if (position === "top")
+                return typeof y.get() === "number" ? y.get() : 0;
+            if (position === "bottom")
+                return typeof y.get() === "number" ? y.get() : 0;
+            if (position === "left")
+                return typeof x.get() === "number" ? x.get() : 0;
+            if (position === "right")
+                return typeof x.get() === "number" ? x.get() : 0;
+            return 0;
+        };
+        const getTargetValue = () => {
+            if (position === "top")
+                return "-100%";
+            if (position === "bottom")
+                return "100%";
+            if (position === "left")
+                return "-100%";
+            if (position === "right")
+                return "100%";
+            return "100%";
+        };
+        const initialValue = getInitialValue();
+        const targetValue = getTargetValue();
+        const drawerSelector = `#drawer-sheet-${drawerId}`;
+        if (position === "top" || position === "bottom") {
+            await animate(drawerSelector, {
+                y: [initialValue, targetValue],
+            });
+        }
+        else {
+            await animate(drawerSelector, {
+                x: [initialValue, targetValue],
+            });
+        }
+        setOpen(false);
+    };
+    const hasNestedDrawer = provider ? provider.nestedDrawerCount > (isOpen ? 1 : 0) : false;
+    const nestedDrawerCount = provider ? provider.nestedDrawerCount : 0;
+    const frontmostHeight = provider?.frontmostHeight || 0;
+    const updateDrawerHeight = provider?.updateDrawerHeight;
+    return (_jsx(DrawerSheetContext, { value: {
+            isOpen,
+            setOpen,
+            closeHandler,
+            scope,
+            y,
+            x,
+            position,
+            swipeDirection: resolvedSwipeDirection,
+            drawerId,
+            hasNestedDrawer,
+            nestedDrawerCount,
+            frontmostHeight,
+            updateDrawerHeight
+        }, children: children }));
+}

package/dist/react-components/drawer-sheet/DrawerSheetToggle.d.ts

@@ -0,0 +1,3 @@
+import type { DrawerSheetTogglePropsT } from "./drawerSheetTypes";
+export declare function DrawerSheetToggle({ onClick, ...props }: DrawerSheetTogglePropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DrawerSheetToggle.d.ts.map

package/dist/react-components/drawer-sheet/DrawerSheetToggle.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerSheetToggle.d.ts","sourceRoot":"","sources":["../../../src/react-components/drawer-sheet/DrawerSheetToggle.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,uBAAuB,EAAE,MAAM,oBAAoB,CAAC;AAElE,wBAAgB,iBAAiB,CAAC,EAAE,OAAO,EAAE,GAAG,KAAK,EAAE,EAAE,uBAAuB,2CAY/E"}

package/dist/react-components/drawer-sheet/DrawerSheetToggle.js

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

package/dist/react-components/drawer-sheet/DrawerSheetViewport.d.ts

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

package/dist/react-components/drawer-sheet/DrawerSheetViewport.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerSheetViewport.d.ts","sourceRoot":"","sources":["../../../src/react-components/drawer-sheet/DrawerSheetViewport.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAE5C,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE9D,wBAAgB,mBAAmB,CAAC,EAAE,SAAS,EAAE,GAAG,CAAC,EAAE,EAAE,yBAAyB,2CAOjF"}

package/dist/react-components/drawer-sheet/DrawerSheetViewport.js

@@ -0,0 +1,5 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DrawerSheetViewport({ className, ...p }) {
+    return (_jsx("div", { className: className, ...p }));
+}

package/dist/react-components/drawer-sheet/drawerSheetTypes.d.ts

@@ -0,0 +1,30 @@
+import type { AnimationScope, MotionValue, HTMLMotionProps } from "framer-motion";
+import type { ComponentProps, Dispatch, PropsWithChildren, SetStateAction } from "react";
+export type DrawerSheetContextT = {
+    isOpen: boolean;
+    setOpen: Dispatch<SetStateAction<boolean>>;
+    closeHandler: () => void;
+    scope?: AnimationScope<any>;
+    y?: MotionValue<number>;
+    x?: MotionValue<number>;
+    position: "top" | "right" | "bottom" | "left";
+    swipeDirection: "up" | "down" | "left" | "right";
+    drawerId: string;
+    hasNestedDrawer: boolean;
+    nestedDrawerCount: number;
+    frontmostHeight: number;
+    updateDrawerHeight?: (id: string, height: number) => void;
+};
+export type DrawerSheetRootPropsT = PropsWithChildren<{
+    position?: "top" | "right" | "bottom" | "left";
+    swipeDirection?: "up" | "down" | "left" | "right";
+}>;
+export type DrawerSheetBodyPropsT = HTMLMotionProps<"div">;
+export type DrawerSheetContentPropsT = ComponentProps<"div">;
+export type DrawerSheetHeaderPropsT = ComponentProps<"div">;
+export type DrawerSheetHandlebarPropsT = ComponentProps<"div">;
+export type DrawerSheetTogglePropsT = ComponentProps<"button">;
+export type DrawerSheetPortalPropsT = HTMLMotionProps<"div">;
+export type DrawerSheetViewportPropsT = ComponentProps<"div">;
+export type DrawerSheetBackdropPropsT = HTMLMotionProps<"div">;
+//# sourceMappingURL=drawerSheetTypes.d.ts.map

package/dist/react-components/drawer-sheet/drawerSheetTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawerSheetTypes.d.ts","sourceRoot":"","sources":["../../../src/react-components/drawer-sheet/drawerSheetTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,WAAW,EAAE,eAAe,EAAE,MAAM,eAAe,CAAC;AAClF,OAAO,KAAK,EAAE,cAAc,EAAE,QAAQ,EAAE,iBAAiB,EAAE,cAAc,EAAE,MAAM,OAAO,CAAC;AAEzF,MAAM,MAAM,mBAAmB,GAAG;IAChC,MAAM,EAAE,OAAO,CAAC;IAChB,OAAO,EAAE,QAAQ,CAAC,cAAc,CAAC,OAAO,CAAC,CAAC,CAAC;IAC3C,YAAY,EAAE,MAAM,IAAI,CAAC;IACzB,KAAK,CAAC,EAAE,cAAc,CAAC,GAAG,CAAC,CAAC;IAC5B,CAAC,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACxB,CAAC,CAAC,EAAE,WAAW,CAAC,MAAM,CAAC,CAAC;IACxB,QAAQ,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC9C,cAAc,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;IACjD,QAAQ,EAAE,MAAM,CAAC;IACjB,eAAe,EAAE,OAAO,CAAC;IACzB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,kBAAkB,CAAC,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;CAC3D,CAAC;AAEF,MAAM,MAAM,qBAAqB,GAAG,iBAAiB,CAAC;IACpD,QAAQ,CAAC,EAAE,KAAK,GAAG,OAAO,GAAG,QAAQ,GAAG,MAAM,CAAC;IAC/C,cAAc,CAAC,EAAE,IAAI,GAAG,MAAM,GAAG,MAAM,GAAG,OAAO,CAAC;CACnD,CAAC,CAAC;AAEH,MAAM,MAAM,qBAAqB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE3D,MAAM,MAAM,wBAAwB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE7D,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE5D,MAAM,MAAM,0BAA0B,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE/D,MAAM,MAAM,uBAAuB,GAAG,cAAc,CAAC,QAAQ,CAAC,CAAC;AAE/D,MAAM,MAAM,uBAAuB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC;AAE7D,MAAM,MAAM,yBAAyB,GAAG,cAAc,CAAC,KAAK,CAAC,CAAC;AAE9D,MAAM,MAAM,yBAAyB,GAAG,eAAe,CAAC,KAAK,CAAC,CAAC"}

package/dist/react-components/drawer-sheet/drawerSheetTypes.js

@@ -0,0 +1 @@
+export {};