@g4rcez/components 2.0.32 → 2.0.33

package/dist/components/floating/modal.jsx

@@ -0,0 +1,240 @@
+"use client";
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { cva } from "class-variance-authority";
+import { XIcon } from "lucide-react";
+import { AnimatePresence, motion, MotionConfig, useMotionValue } from "motion/react";
+import { Slot } from "../core/slot";
+import React, { forwardRef, Fragment, useEffect, useId, useImperativeHandle, useRef } from "react";
+import { useMediaQuery } from "../../hooks/use-media-query";
+import { css, mergeRefs } from "../../lib/dom";
+const animationDuration = "500ms";
+const drawerLeft = {
+    exit: { x: ["0%", "-30%"], opacity: 0, animationDuration },
+    enter: { x: ["-30%", "0%"], opacity: 1, animationDuration },
+    initial: { x: ["-30%", "0%"], opacity: 0.8, animationDuration },
+};
+const drawerRight = {
+    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: {
+        enter: { opacity: 1, y: "0%", 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 },
+        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", {
+    variants: {
+        type: {
+            drawer: "max-h-screen max-w-[90%] absolute w-fit h-screen min-h-0",
+            dialog: "max-h-[calc(100lvh-10%)] relative container h-min rounded-lg py-4",
+            sheet: "w-screen absolute bottom-0 max-h-[calc(100vh-15%)] max-h-[calc(100svh-5%)] h-screen pt-6 pb-4 rounded-t-lg",
+        },
+        position: {
+            none: "",
+            right: "py-4 absolute right-0 top-0 rounded-l-lg",
+            left: "py-4 absolute left-0 top-0 rounded-r-lg",
+        },
+    },
+    defaultVariants: { position: "right", type: "dialog" },
+});
+const dragConstraints = { top: 0, left: 0, right: 0, bottom: 0 };
+const calculateClose = (n) => n * 0.6;
+const Draggable = (props) => {
+    const onDrag = (e, info) => {
+        if (props.parent.current) {
+            e.stopPropagation();
+            e.stopImmediatePropagation();
+            if (props.sheet) {
+                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 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);
+        }
+    };
+    return (<motion.button draggable dragListener dragMomentum type="button" animate={false} dragElastic={0} dragPropagation initial={false} onDrag={onDrag} dragSnapToOrigin dragDirectionLock 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"
+                : "left-2 top-1/2 h-10 w-2")}>
+      {props.sheet ? <div className="w-1/4 h-2 rounded-lg bg-floating-border"/> : null}
+    </motion.button>);
+};
+const positions = { drawer: "right", sheet: "none", dialog: "none" };
+const fetchPosition = (isDesktop, forceType, propsType, propsPosition) => {
+    const type = propsType || "dialog";
+    if (isDesktop)
+        return propsType === "drawer" ? (propsPosition ?? positions.drawer) : positions[type];
+    return forceType ? positions[type] : positions.sheet;
+};
+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 = useRef(null);
+    const headingId = useId();
+    const descriptionId = useId();
+    const isDesktop = useMediaQuery("(min-width: 64rem)");
+    const position = fetchPosition(isDesktop, forceType, _type, propsPosition);
+    const func = isDesktop ? animations[_type] : forceType ? animations[_type] : animations.sheet;
+    const animation = typeof func === "function" ? func(position) : func;
+    const type = isDesktop ? _type : forceType ? _type : "sheet";
+    const useResizer = type !== "dialog";
+    const floating = useFloating({ open, onOpenChange: onChange, strategy: "fixed" });
+    const click = useClick(floating.context, {});
+    const role = useRole(floating.context, { role: roleName });
+    const dismiss = useDismiss(floating.context, {
+        bubbles: true,
+        escapeKey: true,
+        ancestorScroll: true,
+        outsidePress: overlayClickClose,
+    });
+    const interactions = useInteractions([click, dismiss, role].concat(outInteractions));
+    const Trigger = trigger;
+    const floatingSize = useMotionValue(undefined);
+    useEffect(() => floatingSize.set(undefined), [type, floatingSize]);
+    const onClose = () => onChange(false);
+    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);
+        if (result >= screenHeightToClose)
+            return floatingSize.set(result);
+        if (document.activeElement instanceof HTMLElement) {
+            document.activeElement?.blur();
+        }
+        onChange?.(false);
+        return setTimeout(() => floatingSize.set(undefined), 350);
+    };
+    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;
+        }
+        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);
+    const Component = asChild ? Slot : motion.button;
+    return (<Fragment>
+        {trigger ? (<Component ref={floating.refs.setReference} {...interactions.getReferenceProps()} layoutId={layoutId} type="button">
+            {Trigger}
+          </Component>) : null}
+        <FloatingPortal preserveTabOrder>
+          <AnimatePresence custom presenceAffectsLayout propagate mode="sync" initial={false}>
+            {open ? (<FloatingOverlay lockScroll className={css("inset-0 flex isolate bg-floating-overlay/70 z-overlay h-[100dvh] !overflow-clip", type === "drawer" ? "" : "items-start justify-center p-10", overlayClassName)}>
+                <MotionConfig reducedMotion={animated ? "user" : "always"}>
+                  <FloatingFocusManager guards visuallyHiddenDismiss modal closeOnFocusOut context={floating.context}>
+                    <motion.div {...props} {...(title
+            ? {
+                "aria-labelledby": headingId,
+                "aria-describedby": descriptionId,
+            }
+            : { "aria-label": ariaTitle })} {...interactions.getFloatingProps({
+            "aria-modal": open,
+            ref: mergeRefs(floating.refs.setFloating, removeScrollRef),
+            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 }}>
+                      {useResizer && resizer ? (<Draggable onChange={onChange} value={floatingSize} sheet={type === "sheet"} position={position} parent={floating.refs.floating}/>) : null}
+                      {title ? (<motion.header {...draggableMotionProps} className="relative w-full isolate">
+                          {title ? (<h2 id={headingId} className="block px-8 pb-2 text-3xl font-medium leading-relaxed border-b select-text border-floating-border">
+                              {title}
+                            </h2>) : null}
+                        </motion.header>) : null}
+                      <motion.section ref={innerContent} data-component="modal-body" dragConstraints={dragConstraints} drag={isDesktop ? undefined : "y"} onDrag={type === "sheet" ? (isDesktop ? undefined : onDragBody) : 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}
+                      </motion.section>
+                      {footer ? (<footer className="px-8 pt-4 w-full border-t select-text border-floating-border">{footer}</footer>) : null}
+                      {closable ? (<nav className="absolute top-1 right-4 z-floating">
+                          <button type="button" onClick={onClose} className="p-1 opacity-70 transition-colors hover:opacity-100 hover:text-danger focus:text-danger">
+                            <XIcon />
+                          </button>
+                        </nav>) : null}
+                    </motion.div>
+                  </FloatingFocusManager>
+                </MotionConfig>
+              </FloatingOverlay>) : null}
+          </AnimatePresence>
+        </FloatingPortal>
+      </Fragment>);
+});

package/dist/components/floating/toolbar.d.ts

@@ -2,5 +2,5 @@ import { PropsWithChildren } from "react";
 export type ToolbarProps = {
     root?: HTMLElement;
 };
-export declare const Toolbar: (props: PropsWithChildren<ToolbarProps>) => import("react/jsx-runtime").JSX.Element;
+export declare const Toolbar: (props: PropsWithChildren<ToolbarProps>) => import("react").JSX.Element;
 //# sourceMappingURL=toolbar.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/floating/toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,YAAY,GAAG;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,OAAO,iBAAiB,CAAC,YAAY,CAAC,4CAI7D,CAAC"}
+{"version":3,"file":"toolbar.d.ts","sourceRoot":"","sources":["../../../src/components/floating/toolbar.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE1C,MAAM,MAAM,YAAY,GAAG;IACvB,IAAI,CAAC,EAAE,WAAW,CAAC;CACtB,CAAC;AAEF,eAAO,MAAM,OAAO,GAAI,OAAO,iBAAiB,CAAC,YAAY,CAAC,gCAI7D,CAAC"}

package/dist/components/floating/toolbar.jsx

@@ -0,0 +1,5 @@
+"use client";
+import { motion } from "motion/react";
+export const Toolbar = (props) => (<motion.div className="sticky bottom-4 flex items-center justify-center rounded-lg border border-card-border bg-background p-4">
+        {props.children}
+    </motion.div>);

package/dist/components/floating/{tooltip.js → tooltip.jsx}

@@ -1,7 +1,6 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { arrow, autoPlacement, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, safePolygon, shift, useClick, useClientPoint, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from "@floating-ui/react";
-import { forwardRef, Fragment, useEffect, useRef, useState } from "react";
+import React, { forwardRef, Fragment, useEffect, useRef, useState } from "react";
 import { Polymorph } from "../../components/core/polymorph";
 import { FLOATING_DELAY } from "../../constants";
 import { mergeRefs } from "../../lib/dom";
@@ -51,5 +50,15 @@ export const Tooltip = forwardRef(function Tooltip({ as, open, title, children,
             return setInnerOpen(false);
         return setInnerOpen(open);
     }, [open]);
-    return (_jsxs(Fragment, { children: [_jsx(Component, { ...getReferenceProps(props), ref: mergeRefs(refs.setReference, outerRef), children: title }), innerOpen && (_jsx(FloatingPortal, { children: _jsxs(Polymorph, { ...getFloatingProps(), ref: refs.setFloating, style: floatingStyles, className: "p-3 rounded-lg border isolate z-tooltip border-tooltip-border bg-tooltip-background text-tooltip-foreground shadow-shadow-floating", children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, strokeWidth: 0.1, className: "fill-tooltip-background stroke-tooltip-border" }), children] }) }))] }));
+    return (<Fragment>
+                <Component {...getReferenceProps(props)} ref={mergeRefs(refs.setReference, outerRef)}>
+                    {title}
+                </Component>
+                {innerOpen && (<FloatingPortal>
+                        <Polymorph {...getFloatingProps()} ref={refs.setFloating} style={floatingStyles} className="p-3 rounded-lg border isolate z-tooltip border-tooltip-border bg-tooltip-background text-tooltip-foreground shadow-shadow-floating">
+                            <FloatingArrow ref={arrowRef} context={context} strokeWidth={0.1} className="fill-tooltip-background stroke-tooltip-border"/>
+                            {children}
+                        </Polymorph>
+                    </FloatingPortal>)}
+            </Fragment>);
 });

package/dist/components/floating/wizard.d.ts

@@ -22,5 +22,5 @@ export type WizardProps = {
         previous?: string;
     };
 };
-export declare const Wizard: ({ steps, active, onClose, onFinish, onChange, labels: labelsProp, }: WizardProps) => import("react/jsx-runtime").JSX.Element | null;
+export declare const Wizard: ({ steps, active, onClose, onFinish, onChange, labels: labelsProp, }: WizardProps) => React.JSX.Element | null;
 //# sourceMappingURL=wizard.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../../../src/components/floating/wizard.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,SAAS,EAKV,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAgF,MAAM,OAAO,CAAC;AAOrG,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/E,CAAC;AAiBF,eAAO,MAAM,MAAM,GAAI,qEAOpB,WAAW,mDAqLb,CAAC"}
+{"version":3,"file":"wizard.d.ts","sourceRoot":"","sources":["../../../src/components/floating/wizard.tsx"],"names":[],"mappings":"AACA,OAAO,EAOL,SAAS,EAKV,MAAM,oBAAoB,CAAC;AAE5B,OAAO,KAAgF,MAAM,OAAO,CAAC;AAOrG,MAAM,MAAM,UAAU,GAAG;IACvB,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,IAAI,CAAC;IACxB,KAAK,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACxB,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B,OAAO,EAAE,MAAM,GAAG,OAAO,GAAG,KAAK,CAAC,SAAS,CAAC,OAAO,GAAG,IAAI,CAAC,CAAC;CAC7D,CAAC;AAEF,MAAM,MAAM,WAAW,GAAG;IACxB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,UAAU,EAAE,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,IAAI,CAAC;IACrB,QAAQ,CAAC,EAAE,MAAM,IAAI,CAAC;IACtB,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IACnC,MAAM,CAAC,EAAE;QAAE,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,IAAI,CAAC,EAAE,MAAM,CAAC;QAAC,MAAM,CAAC,EAAE,MAAM,CAAC;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAA;KAAE,CAAC;CAC/E,CAAC;AAiBF,eAAO,MAAM,MAAM,GAAI,qEAOpB,WAAW,6BAgMb,CAAC"}

package/dist/components/floating/{wizard.js → wizard.jsx}

@@ -1,8 +1,7 @@
 "use client";
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { arrow, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, shift, useFloating, useInteractions, useRole, } from "@floating-ui/react";
 import { AnimatePresence, motion } from "motion/react";
-import { Fragment, useEffect, useLayoutEffect, useRef, useState } from "react";
+import React, { Fragment, useEffect, useLayoutEffect, useRef, useState } from "react";
 import { useResizeObserver } from "../../hooks/use-resize-observer";
 import { useTranslations } from "../../hooks/use-translations";
 import { useWindowSize } from "../../hooks/use-window-size";
@@ -62,10 +61,12 @@ export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop,
             return;
         const el = resolveElement(currentStep.element);
         if (el) {
-            setElement(el);
-            setRect(el.getBoundingClientRect());
-            refs.setReference(el);
             currentStep.onEnter?.();
+            setTimeout(() => {
+                setRect(el.getBoundingClientRect());
+                refs.setReference(el);
+                setElement(el);
+            }, 100);
         }
         else {
             console.warn(`Driver: Element not found:`, currentStep.element);
@@ -90,14 +91,16 @@ export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop,
     });
     const handleNext = () => {
         currentStep.onNext?.();
-        if (index < steps.length - 1) {
-            setIndex((i) => i + 1);
-            onChange(index + 1);
-        }
-        else {
-            onFinish();
-            onClose();
-        }
+        setTimeout(() => {
+            if (index < steps.length - 1) {
+                setIndex((i) => i + 1);
+                onChange(index + 1);
+            }
+            else {
+                onFinish();
+                onClose();
+            }
+        }, 0);
     };
     const handlePrevious = () => {
         currentStep.onPrevious?.();
@@ -110,10 +113,52 @@ export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop,
         return null;
     const hasNext = index < steps.length - 1;
     const hasPrevious = index > 0;
-    return (_jsx(FloatingPortal, { children: _jsxs("div", { className: "fixed inset-0 pointer-events-none z-[9999]", children: [_jsxs("svg", { className: "absolute inset-0 w-full h-full fill-current text-floating-overlay/70", xmlns: "http://www.w3.org/2000/svg", children: [_jsx("defs", { children: _jsxs("mask", { id: "driver-mask", children: [_jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", fill: "white" }), _jsx(motion.rect, { rx: "4", fill: "black", initial: false, onAnimationComplete: () => setIsOverlayReady(true), transition: { type: "spring", duration: 0.5, ease: "easeInOut" }, animate: {
-                                            x: rect.left - 5,
-                                            y: rect.top - 5,
-                                            width: rect.width + 10,
-                                            height: rect.height + 10
-                                        } })] }) }), _jsx("rect", { x: "0", y: "0", width: "100%", height: "100%", mask: "url(#driver-mask)", className: "pointer-events-auto" })] }), _jsx(AnimatePresence, { mode: "wait", children: currentStep && element && isOverlayReady && (_jsx("div", { ...getFloatingProps(), ref: refs.setFloating, style: floatingStyles, className: "outline-none pointer-events-auto", children: _jsxs(motion.div, { transition: { duration: 0.2 }, exit: { opacity: 0, scale: 0.9 }, animate: { opacity: 1, scale: 1 }, initial: { opacity: 0, scale: 0.9 }, className: "flex flex-col gap-3 p-4 w-80 max-w-sm rounded-lg border shadow-lg bg-card-background border-card-border", children: [_jsx(FloatingArrow, { ref: arrowRef, context: context, className: "fill-card-background stroke-card-border" }), currentStep.title && (_jsx("h3", { children: currentStep.title })), currentStep.description && (_jsx(Fragment, { children: currentStep.description })), _jsxs("div", { className: "flex justify-between items-center pt-2 mt-2 border-t border-floating-border", children: [_jsx(Button, { theme: "raw", size: "small", onClick: onClose, className: "text-xs text-muted-foreground hover:text-foreground", children: labels.skip }), _jsxs("div", { className: "flex gap-2", children: [hasPrevious && (_jsx(Button, { size: "small", theme: "neutral", onClick: handlePrevious, children: labels.previous })), _jsx(Button, { size: "small", onClick: handleNext, children: hasNext ? labels.next : labels.finish })] })] }), _jsxs("div", { className: "absolute top-2 right-2 text-xs text-muted-foreground", children: [index + 1, " / ", steps.length] })] }) })) })] }) }));
+    return (<FloatingPortal>
+      <div className="fixed inset-0 pointer-events-none z-[9999]">
+        <svg className="absolute inset-0 w-full h-full fill-current text-floating-overlay/70" xmlns="http://www.w3.org/2000/svg">
+          <defs>
+            <mask id="driver-mask">
+              <rect x="0" y="0" width="100%" height="100%" fill="white"/>
+              <motion.rect rx="4" fill="black" initial={false} onAnimationComplete={() => setIsOverlayReady(true)} transition={{ type: "spring", duration: 0.5, ease: "easeInOut" }} animate={{
+            x: rect.left - 5,
+            y: rect.top - 5,
+            width: rect.width + 10,
+            height: rect.height + 10
+        }}/>
+            </mask>
+          </defs>
+          <rect x="0" y="0" width="100%" height="100%" mask="url(#driver-mask)" className="pointer-events-auto"/>
+        </svg>
+        <AnimatePresence mode="wait">
+          {currentStep && isOverlayReady && (<div {...getFloatingProps()} ref={refs.setFloating} style={element ? floatingStyles : {
+                position: "fixed",
+                top: "50%",
+                left: "50%",
+                transform: "translate(-50%, -50%)"
+            }} className="outline-none pointer-events-auto">
+              <motion.div transition={{ duration: 0.2 }} exit={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} initial={{ opacity: 0, scale: 0.9 }} className="flex flex-col gap-3 p-4 w-80 max-w-sm rounded-lg border shadow-lg bg-card-background border-card-border">
+                {element && (<FloatingArrow ref={arrowRef} context={context} className="fill-card-background stroke-card-border"/>)}
+                {currentStep.title && (<h3>{currentStep.title}</h3>)}
+                {currentStep.description && (<Fragment>{currentStep.description}</Fragment>)}
+                <div className="flex justify-between items-center pt-2 mt-2 border-t border-floating-border">
+                  <Button theme="raw" size="small" onClick={onClose} className="text-xs text-muted-foreground hover:text-foreground">
+                    {labels.skip}
+                  </Button>
+                  <div className="flex gap-2">
+                    {hasPrevious && (<Button size="small" theme="neutral" onClick={handlePrevious}>
+                        {labels.previous}
+                      </Button>)}
+                    <Button size="small" onClick={handleNext}>
+                      {hasNext ? labels.next : labels.finish}
+                    </Button>
+                  </div>
+                </div>
+                <div className="absolute top-2 right-2 text-xs text-muted-foreground">
+                  {index + 1} / {steps.length}
+                </div>
+              </motion.div>
+            </div>)}
+        </AnimatePresence>
+      </div>
+    </FloatingPortal>);
 };