@kadoui/react 2.0.1 → 2.1.2

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 {};

package/dist/react-exports.d.ts

@@ -7,6 +7,7 @@ export * from "./react-components/ClientOnly/ClientOnly";
 export * from "./react-components/Clipboard/Clipboard";
 export * from "./react-components/ContextMenu/ContextMenu";
 export * from "./react-components/Drawer/Drawer";
+export { DrawerSheet } from "./react-components/DrawerSheet/index";
 export * from "./react-components/Modal/Modal";
 export * from "./react-components/Otp/Otp";
 export * from "./react-components/Pagination/Pagination";

package/dist/react-exports.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"react-exports.d.ts","sourceRoot":"","sources":["../src/react-exports.ts"],"names":[],"mappings":"AAAA,cAAc,sDAAsD,CAAC;AACrE,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0CAA0C,CAAC;AACzD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC"}
+{"version":3,"file":"react-exports.d.ts","sourceRoot":"","sources":["../src/react-exports.ts"],"names":[],"mappings":"AAAA,cAAc,sDAAsD,CAAC;AACrE,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4CAA4C,CAAC;AAC3D,cAAc,sCAAsC,CAAC;AACrD,cAAc,0CAA0C,CAAC;AACzD,cAAc,wCAAwC,CAAC;AACvD,cAAc,4CAA4C,CAAC;AAC3D,cAAc,kCAAkC,CAAC;AACjD,OAAO,EAAE,WAAW,EAAE,MAAM,sCAAsC,CAAC;AACnE,cAAc,gCAAgC,CAAC;AAC/C,cAAc,4BAA4B,CAAC;AAC3C,cAAc,0CAA0C,CAAC;AACzD,cAAc,gDAAgD,CAAC;AAC/D,cAAc,oCAAoC,CAAC;AACnD,cAAc,kCAAkC,CAAC;AACjD,cAAc,sCAAsC,CAAC;AACrD,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,wCAAwC,CAAC;AACvD,cAAc,gCAAgC,CAAC;AAC/C,cAAc,sCAAsC,CAAC;AACrD,cAAc,oCAAoC,CAAC;AACnD,cAAc,8BAA8B,CAAC;AAC7C,cAAc,8BAA8B,CAAC;AAC7C,cAAc,kCAAkC,CAAC;AACjD,cAAc,kCAAkC,CAAC;AACjD,cAAc,gCAAgC,CAAC"}

package/dist/react-exports.js

@@ -7,6 +7,7 @@ export * from "./react-components/ClientOnly/ClientOnly";
 export * from "./react-components/Clipboard/Clipboard";
 export * from "./react-components/ContextMenu/ContextMenu";
 export * from "./react-components/Drawer/Drawer";
+export { DrawerSheet } from "./react-components/DrawerSheet/index";
 export * from "./react-components/Modal/Modal";
 export * from "./react-components/Otp/Otp";
 export * from "./react-components/Pagination/Pagination";