@kadoui/react 2.1.1 → 2.1.3

package/dist/react-components/DrawerSheet/use-snap-points.js

@@ -0,0 +1,200 @@
+import React from 'react';
+import { set, isVertical } from './helpers';
+import { TRANSITIONS, VELOCITY_THRESHOLD } from './constants';
+import { useControllableState } from './use-controllable-state';
+export function useSnapPoints({ activeSnapPointProp, setActiveSnapPointProp, snapPoints, drawerRef, overlayRef, fadeFromIndex, onSnapPointChange, direction = 'bottom', container, snapToSequentialPoint, }) {
+    const [activeSnapPoint, setActiveSnapPoint] = useControllableState({
+        prop: activeSnapPointProp,
+        defaultProp: snapPoints?.[0],
+        onChange: setActiveSnapPointProp,
+    });
+    const [windowDimensions, setWindowDimensions] = React.useState(typeof window !== 'undefined'
+        ? {
+            innerWidth: window.innerWidth,
+            innerHeight: window.innerHeight,
+        }
+        : undefined);
+    React.useEffect(() => {
+        function onResize() {
+            setWindowDimensions({
+                innerWidth: window.innerWidth,
+                innerHeight: window.innerHeight,
+            });
+        }
+        window.addEventListener('resize', onResize);
+        return () => window.removeEventListener('resize', onResize);
+    }, []);
+    const isLastSnapPoint = React.useMemo(() => activeSnapPoint === snapPoints?.[snapPoints.length - 1] || null, [snapPoints, activeSnapPoint]);
+    const activeSnapPointIndex = React.useMemo(() => snapPoints?.findIndex((snapPoint) => snapPoint === activeSnapPoint) ?? null, [snapPoints, activeSnapPoint]);
+    const shouldFade = (snapPoints &&
+        snapPoints.length > 0 &&
+        (fadeFromIndex || fadeFromIndex === 0) &&
+        !Number.isNaN(fadeFromIndex) &&
+        snapPoints[fadeFromIndex] === activeSnapPoint) ||
+        !snapPoints;
+    const snapPointsOffset = React.useMemo(() => {
+        const containerSize = container
+            ? { width: container.getBoundingClientRect().width, height: container.getBoundingClientRect().height }
+            : typeof window !== 'undefined'
+                ? { width: window.innerWidth, height: window.innerHeight }
+                : { width: 0, height: 0 };
+        return (snapPoints?.map((snapPoint) => {
+            const isPx = typeof snapPoint === 'string';
+            let snapPointAsNumber = 0;
+            if (isPx) {
+                snapPointAsNumber = parseInt(snapPoint, 10);
+            }
+            if (isVertical(direction)) {
+                const height = isPx ? snapPointAsNumber : windowDimensions ? snapPoint * containerSize.height : 0;
+                if (windowDimensions) {
+                    return direction === 'bottom' ? containerSize.height - height : -containerSize.height + height;
+                }
+                return height;
+            }
+            const width = isPx ? snapPointAsNumber : windowDimensions ? snapPoint * containerSize.width : 0;
+            if (windowDimensions) {
+                return direction === 'right' ? containerSize.width - width : -containerSize.width + width;
+            }
+            return width;
+        }) ?? []);
+    }, [snapPoints, windowDimensions, container, direction]);
+    const activeSnapPointOffset = React.useMemo(() => (activeSnapPointIndex !== null ? snapPointsOffset?.[activeSnapPointIndex] : null), [snapPointsOffset, activeSnapPointIndex]);
+    const snapToPoint = React.useCallback((dimension) => {
+        const newSnapPointIndex = snapPointsOffset?.findIndex((snapPointDim) => snapPointDim === dimension) ?? null;
+        onSnapPointChange(newSnapPointIndex);
+        set(drawerRef.current, {
+            transition: `transform ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+            transform: isVertical(direction) ? `translate3d(0, ${dimension}px, 0)` : `translate3d(${dimension}px, 0, 0)`,
+        });
+        if (snapPointsOffset &&
+            newSnapPointIndex !== snapPointsOffset.length - 1 &&
+            fadeFromIndex !== undefined &&
+            newSnapPointIndex !== fadeFromIndex &&
+            newSnapPointIndex < fadeFromIndex) {
+            set(overlayRef.current, {
+                transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+                opacity: '0',
+            });
+        }
+        else {
+            set(overlayRef.current, {
+                transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+                opacity: '1',
+            });
+        }
+        setActiveSnapPoint(snapPoints?.[Math.max(newSnapPointIndex, 0)]);
+    }, [drawerRef, snapPoints, snapPointsOffset, fadeFromIndex, overlayRef, setActiveSnapPoint]);
+    React.useEffect(() => {
+        if (activeSnapPoint || activeSnapPointProp) {
+            const newIndex = snapPoints?.findIndex((snapPoint) => snapPoint === activeSnapPointProp || snapPoint === activeSnapPoint) ?? -1;
+            if (snapPointsOffset && newIndex !== -1 && typeof snapPointsOffset[newIndex] === 'number') {
+                snapToPoint(snapPointsOffset[newIndex]);
+            }
+        }
+    }, [activeSnapPoint, activeSnapPointProp, snapPoints, snapPointsOffset, snapToPoint]);
+    function onRelease({ draggedDistance, closeDrawer, velocity, dismissible, }) {
+        if (fadeFromIndex === undefined)
+            return;
+        const currentPosition = direction === 'bottom' || direction === 'right'
+            ? (activeSnapPointOffset ?? 0) - draggedDistance
+            : (activeSnapPointOffset ?? 0) + draggedDistance;
+        const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1;
+        const isFirst = activeSnapPointIndex === 0;
+        const hasDraggedUp = draggedDistance > 0;
+        if (isOverlaySnapPoint) {
+            set(overlayRef.current, {
+                transition: `opacity ${TRANSITIONS.DURATION}s cubic-bezier(${TRANSITIONS.EASE.join(',')})`,
+            });
+        }
+        if (!snapToSequentialPoint && velocity > 2 && !hasDraggedUp) {
+            if (dismissible)
+                closeDrawer();
+            else
+                snapToPoint(snapPointsOffset[0]); // snap to initial point
+            return;
+        }
+        if (!snapToSequentialPoint && velocity > 2 && hasDraggedUp && snapPointsOffset && snapPoints) {
+            snapToPoint(snapPointsOffset[snapPoints.length - 1]);
+            return;
+        }
+        // Find the closest snap point to the current position
+        const closestSnapPoint = snapPointsOffset?.reduce((prev, curr) => {
+            if (typeof prev !== 'number' || typeof curr !== 'number')
+                return prev;
+            return Math.abs(curr - currentPosition) < Math.abs(prev - currentPosition) ? curr : prev;
+        });
+        const dim = isVertical(direction) ? window.innerHeight : window.innerWidth;
+        if (velocity > VELOCITY_THRESHOLD && Math.abs(draggedDistance) < dim * 0.4) {
+            const dragDirection = hasDraggedUp ? 1 : -1; // 1 = up, -1 = down
+            // Don't do anything if we swipe upwards while being on the last snap point
+            if (dragDirection > 0 && isLastSnapPoint && snapPoints) {
+                snapToPoint(snapPointsOffset[snapPoints.length - 1]);
+                return;
+            }
+            if (isFirst && dragDirection < 0 && dismissible) {
+                closeDrawer();
+            }
+            if (activeSnapPointIndex === null)
+                return;
+            snapToPoint(snapPointsOffset[activeSnapPointIndex + dragDirection]);
+            return;
+        }
+        snapToPoint(closestSnapPoint);
+    }
+    function onDrag({ draggedDistance }) {
+        if (activeSnapPointOffset === null)
+            return;
+        const newValue = direction === 'bottom' || direction === 'right'
+            ? activeSnapPointOffset - draggedDistance
+            : activeSnapPointOffset + draggedDistance;
+        // Don't do anything if we exceed the last(biggest) snap point
+        if ((direction === 'bottom' || direction === 'right') && newValue < snapPointsOffset[snapPointsOffset.length - 1]) {
+            return;
+        }
+        if ((direction === 'top' || direction === 'left') && newValue > snapPointsOffset[snapPointsOffset.length - 1]) {
+            return;
+        }
+        set(drawerRef.current, {
+            transform: isVertical(direction) ? `translate3d(0, ${newValue}px, 0)` : `translate3d(${newValue}px, 0, 0)`,
+        });
+    }
+    function getPercentageDragged(absDraggedDistance, isDraggingDown) {
+        if (!snapPoints || typeof activeSnapPointIndex !== 'number' || !snapPointsOffset || fadeFromIndex === undefined)
+            return null;
+        // If this is true we are dragging to a snap point that is supposed to have an overlay
+        const isOverlaySnapPoint = activeSnapPointIndex === fadeFromIndex - 1;
+        const isOverlaySnapPointOrHigher = activeSnapPointIndex >= fadeFromIndex;
+        if (isOverlaySnapPointOrHigher && isDraggingDown) {
+            return 0;
+        }
+        // Don't animate, but still use this one if we are dragging away from the overlaySnapPoint
+        if (isOverlaySnapPoint && !isDraggingDown)
+            return 1;
+        if (!shouldFade && !isOverlaySnapPoint)
+            return null;
+        // Either fadeFrom index or the one before
+        const targetSnapPointIndex = isOverlaySnapPoint ? activeSnapPointIndex + 1 : activeSnapPointIndex - 1;
+        // Get the distance from overlaySnapPoint to the one before or vice-versa to calculate the opacity percentage accordingly
+        const snapPointDistance = isOverlaySnapPoint
+            ? snapPointsOffset[targetSnapPointIndex] - snapPointsOffset[targetSnapPointIndex - 1]
+            : snapPointsOffset[targetSnapPointIndex + 1] - snapPointsOffset[targetSnapPointIndex];
+        const percentageDragged = absDraggedDistance / Math.abs(snapPointDistance);
+        if (isOverlaySnapPoint) {
+            return 1 - percentageDragged;
+        }
+        else {
+            return percentageDragged;
+        }
+    }
+    return {
+        isLastSnapPoint,
+        activeSnapPoint,
+        shouldFade,
+        getPercentageDragged,
+        setActiveSnapPoint,
+        activeSnapPointIndex,
+        onRelease,
+        onDrag,
+        snapPointsOffset,
+    };
+}

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

@@ -1 +1 @@
-{"version":3,"file":"ModalBody.d.ts","sourceRoot":"","sources":["../../../src/react-components/Modal/ModalBody.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEpD,wBAAgB,SAAS,CAAC,CAAC,EAAE,eAAe,2CA4B3C"}
+{"version":3,"file":"ModalBody.d.ts","sourceRoot":"","sources":["../../../src/react-components/Modal/ModalBody.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGpD,wBAAgB,SAAS,CAAC,CAAC,EAAE,eAAe,2CA4B3C"}

package/dist/react-components/Modal/ModalBody.js

@@ -2,8 +2,8 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { use, useEffect, useRef } from "react";
 import { AnimatePresence, motion } from "framer-motion";
-import { FRAMER_MOTION_DURATION } from "../../configs";
 import { ModalContext } from "./ModalContext";
+import { FRAMER_MOTION_DURATION } from "../../configs";
 export function ModalBody(p) {
     const { isOpen } = use(ModalContext);
     const bodyRef = useRef(null);

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

@@ -1 +1 @@
-{"version":3,"file":"OtpRoot.d.ts","sourceRoot":"","sources":["../../../src/react-components/Otp/OtpRoot.tsx"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAEhD,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,CAAC,EAAE,EAAE,aAAa,2CAqBzD"}
+{"version":3,"file":"OtpRoot.d.ts","sourceRoot":"","sources":["../../../src/react-components/Otp/OtpRoot.tsx"],"names":[],"mappings":"AAKA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,YAAY,CAAC;AAGhD,wBAAgB,OAAO,CAAC,EAAE,SAAS,EAAE,GAAG,CAAC,EAAE,EAAE,aAAa,2CAsBzD"}

package/dist/react-components/Otp/OtpRoot.js

@@ -1,8 +1,8 @@
 "use client";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect, useRef } from "react";
-import { AccessNavigation } from "../AccessNavigation/AccessNavigation";
 import { OtpContext } from "./OtpContext";
+import { AccessNavigation } from "../AccessNavigation/AccessNavigation";
 export function OtpRoot({ autoFocus, ...p }) {
     const inputs = useRef([]);
     useEffect(() => {
@@ -13,5 +13,5 @@ export function OtpRoot({ autoFocus, ...p }) {
     const getInputsValue = () => {
         return inputs?.current.map((input) => input?.value || "").join("") || "";
     };
-    return (_jsx(OtpContext, { value: { inputs, getInputsValue }, children: _jsx(AccessNavigation, { direction: "x", ...p }) }));
+    return (_jsx(OtpContext, { value: { inputs, getInputsValue }, children: _jsx(AccessNavigation, { dir: "ltr", direction: "x", ...p }) }));
 }

package/dist/react-components/Otp/otpTypes.d.ts

@@ -4,7 +4,7 @@ export type OtpContextT = {
     inputs?: RefObject<(HTMLInputElement | null)[]>;
     getInputsValue: () => string;
 };
-export type OtpRootPropsT = Omit<AccessNavigationPropsT, "direction"> & {
+export type OtpRootPropsT = Omit<AccessNavigationPropsT, "direction" | "dir"> & {
     autoFocus?: boolean;
 };
 export type OtpInputsPropsT = ComponentProps<"input"> & {

package/dist/react-components/Otp/otpTypes.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"otpTypes.d.ts","sourceRoot":"","sources":["../../../src/react-components/Otp/otpTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAEnF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IAChD,cAAc,EAAE,MAAM,MAAM,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,sBAAsB,EAAE,WAAW,CAAC,GAAG;IACtE,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC"}
+{"version":3,"file":"otpTypes.d.ts","sourceRoot":"","sources":["../../../src/react-components/Otp/otpTypes.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvD,OAAO,KAAK,EAAE,sBAAsB,EAAE,MAAM,sCAAsC,CAAC;AAEnF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,SAAS,CAAC,CAAC,gBAAgB,GAAG,IAAI,CAAC,EAAE,CAAC,CAAC;IAChD,cAAc,EAAE,MAAM,MAAM,CAAC;CAC9B,CAAC;AAEF,MAAM,MAAM,aAAa,GAAG,IAAI,CAAC,sBAAsB,EAAE,WAAW,GAAG,KAAK,CAAC,GAAG;IAC9E,SAAS,CAAC,EAAE,OAAO,CAAC;CACrB,CAAC;AAEF,MAAM,MAAM,eAAe,GAAG,cAAc,CAAC,OAAO,CAAC,GAAG;IACtD,MAAM,EAAE,MAAM,CAAC;IACf,YAAY,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,IAAI,CAAC;CACtC,CAAC;AAEF,MAAM,MAAM,oBAAoB,GAAG,cAAc,CAAC,OAAO,CAAC,CAAC"}

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

@@ -0,0 +1,23 @@
+import { DrawerSheetBody } from "./DrawerSheetBody";
+import { DrawerSheetRoot } from "./DrawerSheetRoot";
+import { DrawerSheetHeader } from "./DrawerSheetHeader";
+import { DrawerSheetPortal } from "./DrawerSheetPortal";
+import { DrawerSheetToggle } from "./DrawerSheetToggle";
+import { DrawerSheetContent } from "./DrawerSheetContent";
+import { DrawerSheetHandlebar } from "./DrawerSheetHandlebar";
+import { DrawerSheetProvider } from "./DrawerSheetProvider";
+import { DrawerSheetViewport } from "./DrawerSheetViewport";
+import { DrawerSheetBackdrop } from "./DrawerSheetBackdrop";
+export declare const DrawerSheet: typeof DrawerSheetRoot & {
+    Provider: typeof DrawerSheetProvider;
+    Portal: typeof DrawerSheetPortal;
+    Viewport: typeof DrawerSheetViewport;
+    Backdrop: typeof DrawerSheetBackdrop;
+    Body: typeof DrawerSheetBody;
+    Header: typeof DrawerSheetHeader;
+    Handlebar: typeof DrawerSheetHandlebar;
+    Content: typeof DrawerSheetContent;
+    Toggle: typeof DrawerSheetToggle;
+};
+export * from "./drawerSheetTypes";
+//# sourceMappingURL=DrawerSheet.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerSheet.d.ts","sourceRoot":"","sources":["../../../src/react-components/drawer-sheet/DrawerSheet.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,eAAe,EAAE,MAAM,mBAAmB,CAAC;AACpD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,iBAAiB,EAAE,MAAM,qBAAqB,CAAC;AACxD,OAAO,EAAE,kBAAkB,EAAE,MAAM,sBAAsB,CAAC;AAC1D,OAAO,EAAE,oBAAoB,EAAE,MAAM,wBAAwB,CAAC;AAC9D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAC5D,OAAO,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAE5D,eAAO,MAAM,WAAW;;;;;;;;;;CAUtB,CAAC;AAEH,cAAc,oBAAoB,CAAC"}

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

@@ -0,0 +1,22 @@
+import { DrawerSheetBody } from "./DrawerSheetBody";
+import { DrawerSheetRoot } from "./DrawerSheetRoot";
+import { DrawerSheetHeader } from "./DrawerSheetHeader";
+import { DrawerSheetPortal } from "./DrawerSheetPortal";
+import { DrawerSheetToggle } from "./DrawerSheetToggle";
+import { DrawerSheetContent } from "./DrawerSheetContent";
+import { DrawerSheetHandlebar } from "./DrawerSheetHandlebar";
+import { DrawerSheetProvider } from "./DrawerSheetProvider";
+import { DrawerSheetViewport } from "./DrawerSheetViewport";
+import { DrawerSheetBackdrop } from "./DrawerSheetBackdrop";
+export const DrawerSheet = Object.assign(DrawerSheetRoot, {
+    Provider: DrawerSheetProvider,
+    Portal: DrawerSheetPortal,
+    Viewport: DrawerSheetViewport,
+    Backdrop: DrawerSheetBackdrop,
+    Body: DrawerSheetBody,
+    Header: DrawerSheetHeader,
+    Handlebar: DrawerSheetHandlebar,
+    Content: DrawerSheetContent,
+    Toggle: DrawerSheetToggle,
+});
+export * from "./drawerSheetTypes";

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerSheetBackdrop.d.ts","sourceRoot":"","sources":["../../../src/react-components/drawer-sheet/DrawerSheetBackdrop.tsx"],"names":[],"mappings":"AAQA,OAAO,KAAK,EAAE,yBAAyB,EAAE,MAAM,oBAAoB,CAAC;AAEpE,wBAAgB,mBAAmB,CAAC,CAAC,EAAE,yBAAyB,2CAwB/D"}

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

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ClientOnly } from "../ClientOnly/ClientOnly";
+import { Portal } from "../Portal/Portal";
+import { DrawerSheetContext } from "./DrawerSheetContext";
+export function DrawerSheetBackdrop(p) {
+    const { isOpen, closeHandler: handleClose, nestedDrawerCount } = use(DrawerSheetContext);
+    // Adjust z-index based on nested drawer count
+    const zIndex = 49 + (nestedDrawerCount || 0);
+    return (_jsx(ClientOnly, { children: _jsx(Portal, { children: _jsx(AnimatePresence, { children: isOpen ? (_jsx(motion.div, { onClick: handleClose, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, style: { zIndex }, ...p })) : null }) }) }));
+}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerSheetBody.d.ts","sourceRoot":"","sources":["../../../src/react-components/drawer-sheet/DrawerSheetBody.tsx"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,oBAAoB,CAAC;AAEhE,wBAAgB,eAAe,CAAC,EAAE,aAAa,EAAE,GAAG,CAAC,EAAE,EAAE,qBAAqB,2CAsN7E"}

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

@@ -0,0 +1,165 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use, useEffect, useRef, useLayoutEffect, useState } from "react";
+import { motion, useDragControls, AnimatePresence } from "framer-motion";
+import { FRAMER_MOTION_DURATION } from "../../configs";
+import { DrawerSheetContext } from "./DrawerSheetContext";
+export function DrawerSheetBody({ onPointerDown, ...p }) {
+    const controls = useDragControls();
+    const { isOpen, y, x, closeHandler: handleClose, position, swipeDirection, drawerId, hasNestedDrawer, nestedDrawerCount, frontmostHeight, updateDrawerHeight } = use(DrawerSheetContext);
+    const bodyRef = useRef(null);
+    // Measure and update drawer height
+    useLayoutEffect(() => {
+        if (!isOpen || !bodyRef.current)
+            return;
+        const measureHeight = () => {
+            const element = bodyRef.current;
+            if (!element)
+                return;
+            const height = element.offsetHeight;
+            setDrawerHeight(height);
+            updateDrawerHeight?.(drawerId, height);
+        };
+        measureHeight();
+        if (typeof ResizeObserver !== "undefined") {
+            const resizeObserver = new ResizeObserver(measureHeight);
+            resizeObserver.observe(bodyRef.current);
+            return () => resizeObserver.disconnect();
+        }
+    }, [isOpen, drawerId, updateDrawerHeight]);
+    useEffect(() => {
+        if (isOpen) {
+            setTimeout(() => {
+                const focusableElement = bodyRef.current?.querySelector("[data-drawer-sheet='focus']");
+                focusableElement?.focus();
+            }, FRAMER_MOTION_DURATION);
+        }
+    }, [isOpen]);
+    // Determine drag direction and initial/exit values based on position
+    const getDragDirection = () => {
+        if (position === "top" || position === "bottom")
+            return "y";
+        return "x";
+    };
+    const getInitialValue = () => {
+        if (position === "top")
+            return "-100%";
+        if (position === "bottom")
+            return "100%";
+        if (position === "left")
+            return "-100%";
+        if (position === "right")
+            return "100%";
+        return "100%";
+    };
+    const getExitValue = () => {
+        return getInitialValue();
+    };
+    const getStyleValue = () => {
+        if (position === "top" || position === "bottom")
+            return y;
+        return x;
+    };
+    const getPositionStyles = () => {
+        const baseStyles = {};
+        if (position === "top") {
+            baseStyles.top = 0;
+            baseStyles.left = 0;
+            baseStyles.right = 0;
+            baseStyles.width = "100%";
+            baseStyles.height = "auto";
+            baseStyles.maxHeight = "90vh";
+        }
+        else if (position === "bottom") {
+            baseStyles.bottom = 0;
+            baseStyles.left = 0;
+            baseStyles.right = 0;
+            baseStyles.width = "100%";
+            baseStyles.height = "auto";
+            baseStyles.maxHeight = "90vh";
+        }
+        else if (position === "left") {
+            baseStyles.top = 0;
+            baseStyles.bottom = 0;
+            baseStyles.left = 0;
+            baseStyles.width = "clamp(300px, 30vw, 400px)";
+            baseStyles.height = "100%";
+        }
+        else if (position === "right") {
+            baseStyles.top = 0;
+            baseStyles.bottom = 0;
+            baseStyles.right = 0;
+            baseStyles.width = "clamp(300px, 30vw, 400px)";
+            baseStyles.height = "100%";
+        }
+        return baseStyles;
+    };
+    const dragDirection = getDragDirection();
+    const initialValue = getInitialValue();
+    const exitValue = getExitValue();
+    const styleValue = getStyleValue();
+    const positionStyles = getPositionStyles();
+    const getDragConstraints = () => {
+        if (dragDirection === "y") {
+            return {
+                top: 0,
+                bottom: 0,
+            };
+        }
+        return {
+            left: 0,
+            right: 0,
+        };
+    };
+    const getDragElastic = () => {
+        if (position === "top") {
+            return { top: 0.5, bottom: 0 };
+        }
+        if (position === "bottom") {
+            return { top: 0, bottom: 0.5 };
+        }
+        if (position === "left") {
+            return { left: 0.5, right: 0 };
+        }
+        if (position === "right") {
+            return { left: 0, right: 0.5 };
+        }
+        return { top: 0, bottom: 0.5 };
+    };
+    const handleDragEnd = () => {
+        const currentValue = styleValue?.get() || 0;
+        const threshold = 100;
+        if ((position === "bottom" && currentValue >= threshold) ||
+            (position === "top" && currentValue <= -threshold) ||
+            (position === "right" && currentValue >= threshold) ||
+            (position === "left" && currentValue <= -threshold)) {
+            handleClose();
+        }
+    };
+    // Adjust z-index based on nested drawer count
+    const zIndex = 50 + (nestedDrawerCount || 0);
+    // Track drawer height for CSS variable
+    const [drawerHeight, setDrawerHeight] = useState(0);
+    return (_jsx(AnimatePresence, { children: isOpen ? (_jsx(motion.div, { id: `drawer-sheet-${drawerId}`, ref: bodyRef, onClick: (ev) => ev.stopPropagation(), "data-nested-drawer-open": hasNestedDrawer ? "" : undefined, initial: dragDirection === "y"
+                ? { y: initialValue }
+                : { x: initialValue }, animate: dragDirection === "y"
+                ? { y: 0 }
+                : { x: 0 }, exit: dragDirection === "y"
+                ? { y: exitValue }
+                : { x: exitValue }, style: {
+                ...positionStyles,
+                [dragDirection === "y" ? "y" : "x"]: styleValue,
+                zIndex,
+                // CSS variables for nested drawer styling
+                ["--nested-drawers"]: nestedDrawerCount,
+                ["--drawer-height"]: drawerHeight > 0 ? `${drawerHeight}px` : "auto",
+                ["--drawer-frontmost-height"]: frontmostHeight > 0 ? `${frontmostHeight}px` : undefined,
+            }, drag: dragDirection, dragListener: false, dragControls: controls, onPointerDown: (ev) => {
+                ev.stopPropagation();
+                controls?.start(ev);
+                onPointerDown?.(ev);
+            }, transition: {
+                ease: "easeInOut",
+                duration: FRAMER_MOTION_DURATION
+            }, onDragEnd: handleDragEnd, dragConstraints: getDragConstraints(), dragElastic: getDragElastic(), ...p })) : null }));
+}

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

@@ -0,0 +1,3 @@
+import type { DrawerSheetContentPropsT } from "./drawerSheetTypes";
+export declare function DrawerSheetContent({ style, onScroll, ...p }: DrawerSheetContentPropsT): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=DrawerSheetContent.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerSheetContent.d.ts","sourceRoot":"","sources":["../../../src/react-components/drawer-sheet/DrawerSheetContent.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,wBAAwB,EAAE,MAAM,oBAAoB,CAAC;AAEnE,wBAAgB,kBAAkB,CAAC,EAAE,KAAK,EAAE,QAAQ,EAAE,GAAG,CAAC,EAAE,EAAE,wBAAwB,2CAmBrF"}

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

@@ -0,0 +1,16 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+export function DrawerSheetContent({ style, onScroll, ...p }) {
+    return (_jsx("div", { style: {
+            touchAction: "pan-down",
+            ...style,
+        }, onScroll: (ev) => {
+            if (ev.currentTarget.scrollTop > 0) {
+                ev.currentTarget.style.touchAction = "pan-y";
+            }
+            else {
+                ev.currentTarget.style.touchAction = "pan-down";
+            }
+            onScroll?.(ev);
+        }, ...p }));
+}

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

@@ -0,0 +1,3 @@
+import type { DrawerSheetContextT } from "./drawerSheetTypes";
+export declare const DrawerSheetContext: import("react").Context<DrawerSheetContextT>;
+//# sourceMappingURL=DrawerSheetContext.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerSheetContext.d.ts","sourceRoot":"","sources":["../../../src/react-components/drawer-sheet/DrawerSheetContext.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,oBAAoB,CAAC;AAE9D,eAAO,MAAM,kBAAkB,8CAAgE,CAAC"}

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

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

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerSheetHandlebar.d.ts","sourceRoot":"","sources":["../../../src/react-components/drawer-sheet/DrawerSheetHandlebar.tsx"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,0BAA0B,EAAE,MAAM,oBAAoB,CAAC;AAErE,wBAAgB,oBAAoB,CAAC,EAAE,GAAG,CAAC,EAAE,EAAE,0BAA0B,2CAExE"}

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

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

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

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

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

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

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

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

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

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

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

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

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

@@ -0,0 +1,13 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+import { use } from "react";
+import { AnimatePresence, motion } from "framer-motion";
+import { ClientOnly } from "../ClientOnly/ClientOnly";
+import { Portal } from "../Portal/Portal";
+import { DrawerSheetContext } from "./DrawerSheetContext";
+export function DrawerSheetPortal(p) {
+    const { isOpen, closeHandler: handleClose, scope, nestedDrawerCount } = use(DrawerSheetContext);
+    // Adjust z-index based on nested drawer count
+    const zIndex = 49 + (nestedDrawerCount || 0);
+    return (_jsx(ClientOnly, { children: _jsx(Portal, { children: _jsx(AnimatePresence, { children: isOpen ? (_jsx(motion.div, { ref: scope, onClick: handleClose, initial: { opacity: 0 }, animate: { opacity: 1 }, exit: { opacity: 0 }, style: { zIndex }, ...p })) : null }) }) }));
+}

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

@@ -0,0 +1,15 @@
+type DrawerSheetProviderContextT = {
+    registerDrawer: (id: string, isOpen: boolean, height?: number) => void;
+    unregisterDrawer: (id: string) => void;
+    updateDrawerHeight: (id: string, height: number) => void;
+    hasOpenDrawer: boolean;
+    nestedDrawerCount: number;
+    frontmostHeight: number;
+    getDrawerHeight: (id: string) => number | undefined;
+};
+export declare function DrawerSheetProvider({ children }: {
+    children: React.ReactNode;
+}): import("react/jsx-runtime").JSX.Element;
+export declare function useDrawerSheetProvider(): DrawerSheetProviderContextT | null;
+export {};
+//# sourceMappingURL=DrawerSheetProvider.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DrawerSheetProvider.d.ts","sourceRoot":"","sources":["../../../src/react-components/drawer-sheet/DrawerSheetProvider.tsx"],"names":[],"mappings":"AAIA,KAAK,2BAA2B,GAAG;IACjC,cAAc,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,CAAC,EAAE,MAAM,KAAK,IAAI,CAAC;IACvE,gBAAgB,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,IAAI,CAAC;IACvC,kBAAkB,EAAE,CAAC,EAAE,EAAE,MAAM,EAAE,MAAM,EAAE,MAAM,KAAK,IAAI,CAAC;IACzD,aAAa,EAAE,OAAO,CAAC;IACvB,iBAAiB,EAAE,MAAM,CAAC;IAC1B,eAAe,EAAE,MAAM,CAAC;IACxB,eAAe,EAAE,CAAC,EAAE,EAAE,MAAM,KAAK,MAAM,GAAG,SAAS,CAAC;CACrD,CAAC;AASF,wBAAgB,mBAAmB,CAAC,EAAE,QAAQ,EAAE,EAAE;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,2CAiF9E;AAED,wBAAgB,sBAAsB,uCAGrC"}