@g4rcez/components 2.0.11 → 2.0.13

package/dist/components/floating/modal.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EACH,KAAK,YAAY,EASpB,MAAM,oBAAoB,CAAC;AAI5B,OAAO,EAAmB,eAAe,EAAqE,MAAM,cAAc,CAAC;AACnI,OAAO,KAAkH,MAAM,OAAO,CAAC;AAIvI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAMnD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAuD9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,KAAK,CAAC,EACtB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG;IAC5E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,GAAG,OAAO,CAAC;IACR,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,cAAc,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,OAAO,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAClC,CAAC,CACL,CAAC;AA6EF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WAtGJ,KAAK;gBAAc,MAAM;;UACzB,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;UACpB,QAAQ,GAAG,SAAS;kBACZ,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;;eAnBmB,MAAM;YAAU,KAAK;;UAChE,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;UACpB,QAAQ,GAAG,SAAS;kBACZ,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;2CAgSrC,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EASH,KAAK,YAAY,EACpB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAmB,eAAe,EAAqE,MAAM,cAAc,CAAC;AAEnI,OAAO,KAA+G,MAAM,OAAO,CAAC;AAIpI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAMnD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAuD9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,KAAK,CAAC,EACtB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG;IAC5E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,GAAG,OAAO,CAAC;IACR,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,cAAc,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,IAAI,EAAE,QAAQ,GAAG,SAAS,CAAC;IAC3B,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,OAAO,EAAE,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAClC,CAAC,CACL,CAAC;AAgFF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WAzGJ,KAAK;gBAAc,MAAM;;UACzB,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;UACpB,QAAQ,GAAG,SAAS;kBACZ,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;;eAnBmB,MAAM;YAAU,KAAK;;UAChE,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;UACpB,QAAQ,GAAG,SAAS;kBACZ,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;2CA4UrC,CAAC"}

package/dist/components/floating/modal.js

@@ -1,11 +1,11 @@
 "use client";
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
-import { Slot as RadixSlot } from "radix-ui";
 import { cva } from "class-variance-authority";
 import { XIcon } from "lucide-react";
 import { AnimatePresence, motion, useMotionValue } from "motion/react";
-import { forwardRef, Fragment, useId, useImperativeHandle, useEffect } from "react";
+import { Slot as RadixSlot } from "radix-ui";
+import { forwardRef, Fragment, useEffect, useId, useImperativeHandle, useRef } from "react";
 import { useMediaQuery } from "../../hooks/use-media-query";
 import { useRemoveScroll } from "../../hooks/use-remove-scroll";
 import { css, mergeRefs } from "../../lib/dom";
@@ -17,21 +17,21 @@ const drawerLeft = {
     initial: { x: ["-30%", "0%"], opacity: 0.8, animationDuration },
 };
 const drawerRight = {
-    initial: { x: ["30%", "0%"], opacity: 0.8 },
     enter: { x: "0%", opacity: 1, animationDuration },
     exit: { x: ["0%", "30%"], opacity: 0, animationDuration },
+    initial: { x: ["30%", "0%"], opacity: 0.8, animationDuration },
 };
 const animations = {
     drawer: (type) => (type === "left" ? drawerLeft : drawerRight),
     sheet: {
-        initial: { opacity: 0.5, y: "25%", animationDuration, transformOrigin: "bottom" },
         enter: { opacity: 1, y: "0%", animationDuration, transformOrigin: "bottom" },
-        exit: { opacity: 0.1, y: "50%", animationDuration, transformOrigin: "bottom" },
+        exit: { opacity: 0.4, y: "10%", animationDuration, transformOrigin: "bottom" },
+        initial: { opacity: 0.7, y: "10%", animationDuration, transformOrigin: "bottom" },
     },
     dialog: {
         exit: { opacity: 0, scale: 0.95, animationDuration },
-        initial: { opacity: 0.5, scale: 0.95, animationDuration, transition: { duration: 0.5, ease: "easeInOut" } },
         enter: { opacity: 1, scale: [1.05, 1], animationDuration },
+        initial: { opacity: 0.5, scale: 0.95, animationDuration, transition: { duration: 0.5, ease: "easeInOut" } },
     },
 };
 const variants = cva("z-floating border border-card-border ring-0 outline-0 appearance-none flex flex-col gap-4 flex-nowrap min-w-xs bg-floating-background", {
@@ -52,31 +52,33 @@ const variants = cva("z-floating border border-card-border ring-0 outline-0 appe
 const dragConstraints = { top: 0, left: 0, right: 0, bottom: 0 };
 const calculateClose = (n) => n * 0.6;
 const Draggable = (props) => {
-    const onDrag = (_, info) => {
+    const onDrag = (e, info) => {
         if (props.parent.current) {
-            if (!props.sheet) {
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+            if (props.sheet) {
                 const div = props.parent.current;
-                const v = props.value.get() || div.getBoundingClientRect().width;
-                const delta = props.position === "right" ? -info.delta.x : info.delta.x;
-                const value = Math.abs(v + delta);
-                return props.value.set(value);
+                const rect = div.getBoundingClientRect();
+                const v = props.value.get() || rect.height;
+                const result = Math.abs(v - info.delta.y);
+                const max = window.outerHeight;
+                const screenHeightToClose = calculateClose(max);
+                if (result >= screenHeightToClose)
+                    return props.value.set(result);
+                if (document.activeElement instanceof HTMLElement) {
+                    document.activeElement?.blur();
+                }
+                props.onChange(false);
+                return setTimeout(() => props.value.set(undefined), 350);
             }
             const div = props.parent.current;
-            const rect = div.getBoundingClientRect();
-            const v = props.value.get() || rect.height;
-            const result = Math.abs(v - info.delta.y);
-            const max = window.outerHeight;
-            const screenHeightToClose = calculateClose(max);
-            if (result >= screenHeightToClose)
-                return props.value.set(result);
-            if (document.activeElement instanceof HTMLElement) {
-                document.activeElement?.blur();
-            }
-            props.onChange(false);
-            return setTimeout(() => props.value.set(undefined), 350);
+            const v = props.value.get() || div.getBoundingClientRect().width;
+            const delta = props.position === "right" ? -info.delta.x : info.delta.x;
+            const value = Math.abs(v + delta);
+            return props.value.set(value);
         }
     };
-    return (_jsx(motion.div, { draggable: true, dragMomentum: true, dragListener: true, dragPropagation: true, onDrag: onDrag, animate: false, initial: false, dragElastic: 0, dragDirectionLock: true, dragSnapToOrigin: true, drag: props.sheet ? "y" : "x", dragConstraints: dragConstraints, whileDrag: { cursor: "grabbing" }, className: css("absolute rounded-lg", props.sheet ? "cursor-row-resize" : "cursor-col-resize bg-floating-border", props.sheet
+    return (_jsx(motion.button, { draggable: true, dragListener: true, dragMomentum: true, type: "button", animate: false, dragElastic: 0, dragPropagation: true, initial: false, onDrag: onDrag, dragSnapToOrigin: true, dragDirectionLock: true, drag: props.sheet ? "y" : "x", dragConstraints: dragConstraints, whileDrag: { cursor: "grabbing" }, className: css("absolute rounded-lg isolate z-calendar", props.sheet ? "cursor-row-resize" : "cursor-col-resize bg-floating-border", props.sheet
             ? "top-1 flex h-3 w-full justify-center py-2"
             : props.position === "left"
                 ? "right-5 top-1/2 h-10 w-2"
@@ -91,6 +93,7 @@ const fetchPosition = (isDesktop, forceType, propsType, propsPosition) => {
 };
 const noop = [];
 export const Modal = forwardRef(({ open, title, footer, asChild, trigger, children, onChange, ariaTitle, className, bodyClassName, resizer = true, animated = true, closable = true, forceType = false, layoutId = undefined, overlayClassName = "", type: _type = "dialog", position: propsPosition, overlayClickClose = false, role: roleName = "dialog", interactions: outInteractions = noop, ...props }, externalRef) => {
+    const innerContent = useRef(null);
     const removeScrollRef = useRemoveScroll(open, "block-only");
     const headingId = useId();
     const descriptionId = useId();
@@ -110,52 +113,62 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
     const interactions = useInteractions([click, role, dismiss].concat(outInteractions));
     const Trigger = trigger;
     const floatingSize = useMotionValue(undefined);
-    useEffect(() => {
-        floatingSize.set(undefined);
-    }, [type]);
+    useEffect(() => floatingSize.set(undefined), [type]);
     const onClose = () => onChange(false);
-    useImperativeHandle(externalRef, () => {
-        return { context: floating.context, floating: removeScrollRef.current };
-    }, [floating.context, removeScrollRef]);
-    const onDrag = (_, info) => {
-        const parent = floating.refs.floating;
-        if (parent.current && type === "sheet") {
-            const div = parent.current;
-            const rect = div.getBoundingClientRect();
-            const v = floatingSize.get() || rect.height;
-            const result = Math.abs(v - info.delta.y);
-            const screenHeightToClose = calculateClose(window.outerHeight);
-            if (result < screenHeightToClose) {
-                onClose();
-                return setTimeout(() => floatingSize.set(window.outerHeight), 350);
-            }
+    useImperativeHandle(externalRef, () => ({ context: floating.context, floating: removeScrollRef.current }), [floating.context, removeScrollRef]);
+    const onDragHeader = (_, info) => {
+        const div = floating.refs.floating.current;
+        const rect = div.getBoundingClientRect();
+        const v = floatingSize.get() || rect.height;
+        const result = Math.abs(v - info.delta.y);
+        const max = window.outerHeight;
+        const screenHeightToClose = calculateClose(max);
+        console.log({ max, result, v, screenHeightToClose });
+        if (result >= screenHeightToClose)
             return floatingSize.set(result);
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement?.blur();
         }
+        onChange?.(false);
+        return setTimeout(() => floatingSize.set(undefined), 350);
     };
-    const commonAnimated = {
-        layoutId,
-        layout: true,
-        exit: "exit",
-        animate: "enter",
-        initial: "initial",
-        variants: animation,
-    };
-    const animationProps = animated && type === "sheet"
-        ? {
-            ...commonAnimated,
-            dragElastic: 0,
-            onDrag: onDrag,
-            dragConstraints,
-            dragListener: true,
-            dragMomentum: true,
-            dragPropagation: true,
-            dragSnapToOrigin: true,
-            dragDirectionLock: true,
-            draggable: type === "sheet",
-            drag: type === "sheet" ? "y" : "x",
+    const onDragBody = (_, info) => {
+        const div = floating.refs.floating.current;
+        if (info.delta.y < 0 && info.offset.y < 0) {
+            div.scrollTo({ top: div.scrollTop + Math.abs(info.offset.y), behavior: "smooth" });
+            return;
         }
-        : commonAnimated;
-    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: floating.refs.setReference, ...interactions.getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: floating.refs.setReference, ...interactions.getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(AnimatePresence, { propagate: true, mode: "wait", initial: false, children: open ? (_jsx(FloatingOverlay, { lockScroll: true, className: css("inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70", type === "drawer" ? "" : "flex items-start justify-center p-10", overlayClassName), children: _jsx(FloatingFocusManager, { guards: true, visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: floating.context, children: _jsxs(motion.div, { ...props, ...animationProps, ...(title
+        const rect = div.getBoundingClientRect();
+        const v = floatingSize.get() || rect.height;
+        const result = Math.abs(v - info.delta.y);
+        const max = window.outerHeight;
+        const screenHeightToClose = calculateClose(max);
+        if (result >= screenHeightToClose)
+            return floatingSize.set(result);
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement?.blur();
+        }
+        onChange?.(false);
+        return setTimeout(() => floatingSize.set(undefined), 350);
+    };
+    const draggableMotionProps = type === "sheet" ? {
+        drag: "y",
+        animate: false,
+        dragElastic: 0,
+        initial: false,
+        dragConstraints,
+        draggable: true,
+        dragListener: true,
+        dragMomentum: true,
+        onDrag: onDragHeader,
+        dragPropagation: true,
+        dragSnapToOrigin: true,
+        dragDirectionLock: true,
+        whileDrag: { cursor: "grabbing" },
+    } : { animate: animated, initial: false };
+    const scrollInitial = useMotionValue(undefined);
+    const scroll = useMotionValue(undefined);
+    return (_jsxs(Fragment, { children: [trigger ? (_jsx(Fragment, { children: asChild ? (_jsx(Slot, { ref: floating.refs.setReference, ...interactions.getReferenceProps({ layoutId: layoutId }), children: Trigger })) : (_jsx(motion.button, { ref: floating.refs.setReference, ...interactions.getReferenceProps(), layoutId: layoutId, type: "button", children: Trigger })) })) : null, _jsx(FloatingPortal, { preserveTabOrder: true, children: _jsx(AnimatePresence, { propagate: true, mode: "wait", initial: false, children: open ? (_jsx(FloatingOverlay, { lockScroll: true, className: css("inset-0 isolate z-overlay h-[100dvh] !overflow-clip bg-floating-overlay/70", type === "drawer" ? "" : "flex items-start justify-center p-10", overlayClassName), children: _jsx(FloatingFocusManager, { guards: true, visuallyHiddenDismiss: true, modal: true, closeOnFocusOut: true, context: floating.context, children: _jsxs(motion.div, { ...props, ...(title
                                     ? {
                                         "aria-labelledby": headingId,
                                         "aria-describedby": descriptionId,
@@ -163,9 +176,33 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
                                     : { "aria-label": ariaTitle }), ...interactions.getFloatingProps({
                                     "aria-modal": open,
                                     ref: mergeRefs(floating.refs.setFloating, removeScrollRef),
-                                    className: css(variants({
-                                        position,
-                                        type,
-                                    }), className, "overscroll-contain"),
-                                }), "data-component": "modal", style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, children: [title ? (_jsx("header", { className: "relative w-full", children: title ? (_jsx("h2", { id: headingId, className: "select-text border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed", children: title })) : null })) : null, _jsx("section", { "data-component": "modal-body", className: css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName), children: children }), footer ? (_jsx("footer", { className: "w-full select-text border-t border-floating-border px-8 pt-4", children: footer })) : null, closable ? (_jsx("nav", { className: "absolute right-4 top-1 z-floating", children: _jsx("button", { type: "button", onClick: onClose, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) })) : null, useResizer && resizer ? (_jsx(Draggable, { onChange: onChange, value: floatingSize, sheet: type === "sheet", position: position, parent: floating.refs.floating })) : null] }) }) })) : null }, headingId) })] }));
+                                    className: css(variants({ position, type }), className, "isolate overscroll-contain"),
+                                }), exit: "exit", layout: true, animate: "enter", initial: "initial", layoutId: layoutId, variants: animation, "data-component": "modal", style: type === "drawer" ? { width: floatingSize } : { height: floatingSize }, children: [useResizer && resizer ? (_jsx(Draggable, { onChange: onChange, value: floatingSize, sheet: type === "sheet", position: position, parent: floating.refs.floating })) : null, title ? (_jsx(motion.header, { ...draggableMotionProps, className: "relative isolate w-full", children: title ? (_jsx("h2", { id: headingId, className: "select-text border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed block", children: title })) : null })) : null, _jsx(motion.section, { ref: innerContent, "data-component": "modal-body", dragConstraints: dragConstraints, drag: isDesktop ? "y" : undefined, onDrag: type === "sheet" ? (isDesktop ? onDragBody : undefined) : undefined, className: css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName), onTouchEnd: () => {
+                                            scroll.set(undefined);
+                                            scrollInitial.set(undefined);
+                                        }, onTouchStart: e => {
+                                            const touch = e.changedTouches[0];
+                                            scrollInitial.set(touch.pageY);
+                                            scroll.set(touch.pageY);
+                                        }, onTouchMove: e => {
+                                            const touch = e.changedTouches[0];
+                                            const y = touch.pageY;
+                                            const initial = scrollInitial.get();
+                                            if (initial < y) {
+                                                const distanceFromTop = innerContent.current?.scrollTop;
+                                                if (distanceFromTop === 0) {
+                                                    const div = floating.refs.floating.current;
+                                                    const rect = div.getBoundingClientRect();
+                                                    const v = floatingSize.get() || rect.height;
+                                                    const diff = (initial - y) / 10;
+                                                    const down = v + diff;
+                                                    const max = window.outerHeight;
+                                                    const screenHeightToClose = calculateClose(max);
+                                                    if (down < screenHeightToClose)
+                                                        onChange?.(false);
+                                                    floatingSize.set(down);
+                                                }
+                                            }
+                                            scroll.set(touch.pageY);
+                                        }, children: children }), footer ? (_jsx("footer", { className: "w-full select-text border-t border-floating-border px-8 pt-4", children: footer })) : null, closable ? (_jsx("nav", { className: "absolute right-4 top-1 z-floating", children: _jsx("button", { type: "button", onClick: onClose, className: "p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger", children: _jsx(XIcon, {}) }) })) : null] }) }) })) : null }, headingId) })] }));
 });

package/dist/components/form/date-picker.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/form/date-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAyD,MAAM,OAAO,CAAC;AAI9E,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAY,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG;IACpE,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB,CAAC,EAAE,UAAU,CAAC,CAAA;AAiDf,eAAO,MAAM,UAAU,uGA8GtB,CAAC"}
+{"version":3,"file":"date-picker.d.ts","sourceRoot":"","sources":["../../../src/components/form/date-picker.tsx"],"names":[],"mappings":"AAGA,OAAO,KAAoE,MAAM,OAAO,CAAC;AAIzF,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AACvC,OAAO,EAAY,aAAa,EAAE,MAAM,qBAAqB,CAAC;AAE9D,OAAO,EAAS,UAAU,EAAE,MAAM,SAAS,CAAC;AAE5C,MAAM,MAAM,eAAe,GAAG,IAAI,CAAC,QAAQ,CAAC,UAAU,EAAE,aAAa,GAAG;IACpE,YAAY,CAAC,EAAE,OAAO,CAAA;CACzB,CAAC,EAAE,UAAU,CAAC,CAAA;AAiDf,eAAO,MAAM,UAAU,uGAyHtB,CAAC"}

package/dist/components/form/date-picker.js

@@ -2,7 +2,7 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { format, isValid, parse, startOfDay } from "date-fns";
 import { CalendarIcon } from "lucide-react";
-import { forwardRef, Fragment, useId, useMemo, useState } from "react";
+import { forwardRef, Fragment, useEffect, useId, useMemo, useState } from "react";
 import { Is } from "sidekicker";
 import { useLocale } from "../../hooks/use-locale";
 import { useTranslations } from "../../hooks/use-translations";
@@ -58,6 +58,7 @@ export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate,
     const [open, setOpen] = useState(false);
     const mask = formatParts(datetimeFormat, fixedDate).flatMap((x) => (Is.keyof(parts, x.type) ? parts[x.type](x.value) : []));
     const placeholder = formatParts(datetimeFormat, fixedDate).reduce((acc, x) => acc + (Is.keyof(placeholders, x.type) ? placeholders[x.type](x.value) : ""), "");
+    const isoDateEffect = date?.toISOString();
     const [value, setValue] = useState(!innerDate
         ? ""
         : formatParts(datetimeFormat, innerDate).reduce((acc, x) => acc + (Is.keyof(parts, x.type) ? partValues[x.type](innerDate, x.value) : ""), ""));
@@ -79,6 +80,12 @@ export const DatePicker = forwardRef(({ date, locale: inputLocal, disabledDate,
         setInnerDate(undefined);
         return onChange?.(undefined);
     };
+    useEffect(() => {
+        if (isValid(date)) {
+            setInnerDate(date);
+            setValue(format(date, placeholder));
+        }
+    }, [isoDateEffect]);
     const onChangeDate = (d) => {
         setInnerDate(d);
         onChange?.(d);