"use client"
import * as React from "react"
import { Drawer as DrawerPrimitive } from "vaul"
import { cn } from "@/lib/utils"
function parseVhToPx(vhStr) {
if (typeof vhStr === "number") return vhStr
const match = String(vhStr).match(/^([\d.]+)\s*vh$/)
if (!match) return null
return (window.innerHeight * Number(match[1])) / 100
}
function Drawer({
...props
}) {
return ;
}
function DrawerTrigger({
...props
}) {
return ;
}
function DrawerPortal({
...props
}) {
return ;
}
function DrawerClose({
...props
}) {
return ;
}
function DrawerOverlay({
className,
...props
}) {
return (
);
}
function DrawerContent({
className,
children,
defaultHeight = "77vh",
minHeight = "20vh",
maxHeight = "90vh",
...props
}) {
const [heightPx, setHeightPx] = React.useState(() =>
typeof window !== "undefined" ? parseVhToPx(defaultHeight) : null
);
const [isDragging, setIsDragging] = React.useState(false);
const dragRef = React.useRef({ startY: 0, startHeight: 0 });
const minPx = React.useMemo(() => parseVhToPx(minHeight), [minHeight]);
const maxPx = React.useMemo(() => parseVhToPx(maxHeight), [maxHeight]);
React.useEffect(() => {
const px = parseVhToPx(defaultHeight);
if (px != null) setHeightPx(px);
}, [defaultHeight]);
React.useEffect(() => {
const sync = () => {
const max = parseVhToPx(maxHeight);
const min = parseVhToPx(minHeight);
setHeightPx((prev) => {
if (prev == null) return parseVhToPx(defaultHeight);
const clamped = Math.min(prev, max ?? prev);
return Math.max(clamped, min ?? clamped);
});
};
window.addEventListener("resize", sync);
return () => window.removeEventListener("resize", sync);
}, [defaultHeight, minHeight, maxHeight]);
const handlePointerDown = React.useCallback(
(e) => {
e.preventDefault();
setIsDragging(true);
dragRef.current = { startY: e.clientY ?? e.touches?.[0]?.clientY, startHeight: heightPx ?? parseVhToPx(defaultHeight) ?? 0 };
},
[heightPx, defaultHeight]
);
React.useEffect(() => {
if (!isDragging) return;
const move = (e) => {
const clientY = e.clientY ?? e.touches?.[0]?.clientY;
const { startY, startHeight } = dragRef.current;
const delta = startY - clientY;
const next = Math.min(maxPx ?? Infinity, Math.max(minPx ?? 0, startHeight + delta));
setHeightPx(next);
};
const up = () => setIsDragging(false);
document.addEventListener("mousemove", move, { passive: true });
document.addEventListener("mouseup", up);
document.addEventListener("touchmove", move, { passive: true });
document.addEventListener("touchend", up);
return () => {
document.removeEventListener("mousemove", move);
document.removeEventListener("mouseup", up);
document.removeEventListener("touchmove", move);
document.removeEventListener("touchend", up);
};
}, [isDragging, minPx, maxPx]);
const contentStyle = React.useMemo(() => {
if (heightPx == null) return undefined;
return { height: `${heightPx}px`, maxHeight: maxPx != null ? `${maxPx}px` : undefined };
}, [heightPx, maxPx]);
return (
{children}
);
}
function DrawerHeader({
className,
...props
}) {
return (
);
}
function DrawerFooter({
className,
...props
}) {
return (
);
}
function DrawerTitle({
className,
...props
}) {
return (
);
}
function DrawerDescription({
className,
...props
}) {
return (
);
}
export {
Drawer,
DrawerPortal,
DrawerOverlay,
DrawerTrigger,
DrawerClose,
DrawerContent,
DrawerHeader,
DrawerFooter,
DrawerTitle,
DrawerDescription,
}