@g4rcez/components 4.0.2 → 4.1.2

package/dist/components/floating/modal.jsx

@@ -0,0 +1,301 @@
+"use client";
+import { FloatingFocusManager, FloatingOverlay, FloatingPortal, useClick, useDismiss, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { cva } from "class-variance-authority";
+import { XIcon } from "@phosphor-icons/react";
+import { AnimatePresence, motion, MotionConfig, useMotionValue, animate, } from "motion/react";
+import { Slot } from "../core/slot";
+import React, { forwardRef, Fragment, useEffect, useId, useImperativeHandle, useRef, useState, useCallback, } from "react";
+import { useMediaQuery } from "../../hooks/use-media-query";
+import { css, mergeRefs } from "../../lib/dom";
+import { useFloatingRef } from "../../hooks/use-floating-ref";
+import { useTranslations } from "../../hooks/use-translations";
+import { Button } from "../core/button";
+const ConfirmContext = React.createContext(async () => false);
+export const useConfirm = () => React.useContext(ConfirmContext);
+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 flex min-w-xs appearance-none flex-col flex-nowrap gap-4 border border-floating-border bg-floating-background outline-0 ring-0", {
+    variants: {
+        type: {
+            drawer: "absolute h-screen max-h-screen min-h-0 w-fit max-w-[90%]",
+            dialog: "container relative h-min max-h-[calc(100lvh-10%)] rounded-lg py-4",
+            sheet: "absolute bottom-0 h-screen max-h-[calc(100svh-5%)] max-h-[calc(100vh-15%)] w-screen rounded-t-lg pb-4 pt-6",
+        },
+        position: {
+            none: "",
+            right: "absolute right-0 top-0 rounded-l-lg py-4",
+            left: "absolute left-0 top-0 rounded-r-lg py-4",
+        },
+    },
+    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 tabIndex={-1} type="button" animate={false} dragElastic={0} dragPropagation initial={false} onDrag={onDrag} dragSnapToOrigin dragDirectionLock aria-hidden="true" drag={props.sheet ? "y" : "x"} dragConstraints={dragConstraints} whileDrag={{ cursor: "grabbing" }} className={css("absolute isolate z-calendar rounded-lg", 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="h-2 w-1/4 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, closeOnFocusOut = false, interactions: outInteractions = noop, ...props }, externalRef) => {
+    const t = useTranslations();
+    const root = useFloatingRef();
+    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: "dialog" });
+    const dismiss = useDismiss(floating.context, {
+        bubbles: true,
+        escapeKey: true,
+        outsidePress: (event) => {
+            const target = event.target;
+            return overlayClickClose && !!target?.isConnected;
+        },
+    });
+    const interactions = useInteractions([click, dismiss, role].concat(outInteractions));
+    const floatingSize = useMotionValue(undefined);
+    const sheetY = useMotionValue(undefined);
+    const isDragging = useRef(false);
+    const dragStart = useRef(0);
+    useEffect(() => {
+        floatingSize.set(undefined);
+        sheetY.set(undefined);
+    }, [type, floatingSize, sheetY]);
+    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 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}
+                <MotionConfig reducedMotion={animated ? "user" : "always"}>
+                    <FloatingPortal preserveTabOrder root={root}>
+                        <AnimatePresence mode="wait" propagate>
+                            {open ? (<FloatingOverlay lockScroll className={css("inset-0 isolate z-overlay flex h-[100dvh] !overflow-clip bg-floating-overlay/80", type === "drawer" ? "" : "items-start justify-center pt-10 lg:p-10", overlayClassName)}>
+                                    <FloatingFocusManager guards modal closeOnFocusOut={closeOnFocusOut} context={floating.context}>
+                                        <AnimatePresence propagate>
+                                            <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, y: sheetY }}>
+                                                {useResizer && resizer ? (<Draggable onChange={onChange} value={floatingSize} sheet={type === "sheet"} position={position} parent={floating.refs.floating}/>) : null}
+                                                {title ? (<motion.header {...draggableMotionProps} className="relative isolate w-full">
+                                                        {title ? (<h2 id={headingId} className="block select-text border-b border-floating-border px-8 pb-2 text-3xl font-medium leading-relaxed">
+                                                                {title}
+                                                            </h2>) : null}
+                                                    </motion.header>) : null}
+                                                <motion.section ref={innerContent} id={title ? descriptionId : undefined} data-component="modal-body" className={css("flex-1 select-text overflow-y-auto px-8 py-1", bodyClassName)} onTouchEnd={async () => {
+                scroll.set(undefined);
+                scrollInitial.set(undefined);
+                if (isDragging.current) {
+                    const currentY = sheetY.get() || 0;
+                    const threshold = window.innerHeight * 0.2;
+                    const sheetYNumeric = sheetY;
+                    if (currentY > threshold) {
+                        await animate(sheetYNumeric, window.innerHeight, { duration: 0.2, ease: "easeIn" })
+                            .finished;
+                        onChange(false);
+                    }
+                    else {
+                        animate(sheetYNumeric, 0, { type: "spring", bounce: 0, duration: 0.3 });
+                    }
+                    isDragging.current = false;
+                }
+            }} onTouchStart={(e) => {
+                const touch = e.changedTouches[0];
+                scrollInitial.set(touch.pageY);
+                scroll.set(touch.pageY);
+                isDragging.current = false;
+            }} onTouchMove={(e) => {
+                const touch = e.changedTouches[0];
+                const y = touch.pageY;
+                const prevY = scroll.get() || y;
+                const scrollTop = innerContent.current?.scrollTop || 0;
+                if (!isDragging.current && scrollTop <= 0 && y > prevY && type === "sheet") {
+                    isDragging.current = true;
+                    dragStart.current = y;
+                }
+                if (isDragging.current) {
+                    const delta = y - dragStart.current;
+                    if (delta < 0) {
+                        sheetY.set(delta * 0.2);
+                    }
+                    else {
+                        sheetY.set(delta);
+                    }
+                }
+                scroll.set(y);
+            }}>
+                                                    {children}
+                                                </motion.section>
+                                                {footer ? (<footer className="w-full select-text border-t border-floating-border px-8 pt-4">{footer}</footer>) : null}
+                                                {closable ? (<div className="absolute right-4 top-1 z-floating">
+                                                        <button type="button" onClick={onClose} aria-label={t.closeButton} className="p-1 opacity-70 transition-colors hover:text-danger hover:opacity-100 focus:text-danger">
+                                                            <XIcon aria-hidden="true"/>
+                                                        </button>
+                                                    </div>) : null}
+                                            </motion.div>
+                                        </AnimatePresence>
+                                    </FloatingFocusManager>
+                                </FloatingOverlay>) : null}
+                        </AnimatePresence>
+                    </FloatingPortal>
+                </MotionConfig>
+            </Fragment>);
+});
+let confirmGlobal = async (_) => {
+    if (typeof window !== "undefined") {
+        console.warn("ConfirmationProvider is not mounted");
+    }
+    return false;
+};
+Modal.confirm = (options) => confirmGlobal(options);
+export const ModalConfirmProvider = ({ children }) => {
+    const [open, setOpen] = useState(false);
+    const [options, setOptions] = useState({});
+    const [resolve, setResolve] = useState(() => { });
+    const confirmAction = useCallback((opts) => {
+        setOptions(opts);
+        setOpen(true);
+        return new Promise((res) => {
+            setResolve(() => res);
+        });
+    }, []);
+    useEffect(() => {
+        confirmGlobal = confirmAction;
+    }, [confirmAction]);
+    const onConfirm = () => {
+        setOpen(false);
+        const value = options.confirm?.value ?? true;
+        resolve(value ?? true);
+    };
+    const onCancel = () => {
+        setOpen(false);
+        const value = options.cancel?.value ?? false;
+        resolve(value ?? false);
+    };
+    return (<ConfirmContext.Provider value={confirmAction}>
+            {children}
+            <Modal open={open} type="dialog" closable={false} onChange={setOpen} overlayClickClose={false} title={options.title || "Confirmation"} className="container max-w-dialog lg:max-w-96" footer={<div className="flex justify-end gap-2">
+                        <Button theme={options.cancel?.theme || "ghost-muted"} onClick={onCancel}>
+                            {options.cancel?.text || "Cancel"}
+                        </Button>
+                        <Button autoFocus theme={options.confirm?.theme || "primary"} onClick={onConfirm}>
+                            {options.confirm?.text || "Confirm"}
+                        </Button>
+                    </div>}>
+                <div className="py-2 text-foreground">{options.description}</div>
+            </Modal>
+        </ConfirmContext.Provider>);
+};

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.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAQH,KAAK,SAAS,EAWjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAa,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAI9E,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CAC7E;IACI,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,SAAS,aAAa,GAAG,MAAM,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAmF9E,CAAC"}
+{"version":3,"file":"tooltip.d.ts","sourceRoot":"","sources":["../../../src/components/floating/tooltip.tsx"],"names":[],"mappings":"AACA,OAAO,EAQH,KAAK,SAAS,EAWjB,MAAM,oBAAoB,CAAC;AAC5B,OAAO,KAA4D,MAAM,OAAO,CAAC;AACjF,OAAO,EAAa,gBAAgB,EAAE,MAAM,iCAAiC,CAAC;AAI9E,OAAO,EAAE,aAAa,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEnD,MAAM,MAAM,YAAY,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,MAAM,IAAI,gBAAgB,CAC7E;IACI,KAAK,EAAE,KAAK,CAAC;IACb,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,SAAS,CAAC,EAAE,SAAS,CAAC;IACtB,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,QAAQ,CAAC,EAAE,CAAC,CAAC,EAAE,OAAO,KAAK,IAAI,CAAC;CACnC,EACD,CAAC,CACJ,CAAC;AAEF,eAAO,MAAM,OAAO,EAAE,CAAC,CAAC,SAAS,aAAa,GAAG,MAAM,EAAE,CAAC,EAAE,YAAY,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,YAmFM,CAAC"}

package/dist/components/floating/tooltip.js

@@ -1,16 +1,16 @@
 import { jsxs as u, jsx as n } from "react/jsx-runtime";
-import { u as N, i as S, d as T, B as j, n as B, C as L, v as z, w as G, c as H, F as M, e as U, s as W, o as Y, m as _, a as q, f as J, b as K } from "../../floating-ui.react-QNHG9W4N.js";
+import { u as I, j as N, d as S, B as T, n as B, C as L, v as z, w as G, c as H, F as M, e as U, s as W, o as Y, g as _, a as q, f as J, b as K } from "../../floating-ui.react-M2PGXLDp.js";
 import { forwardRef as Q, useState as V, useRef as X, useEffect as Z, Fragment as $ } from "react";
 import { P as oo } from "../../polymorph-B5n9fs_K.js";
 import { F as eo } from "../../constants-r-AHn273.js";
-import { m as to } from "../../dom-Dl8XH0CK.js";
-import { n as so } from "../../fns-D2eyJKd5.js";
+import { m as to } from "../../dom-CyQHY7ID.js";
+import { n as so } from "../../fns-C7Dt27Qd.js";
 const mo = Q(
   function({
     as: m,
     open: t,
-    title: p,
-    children: g,
+    title: g,
+    children: p,
     placement: h,
     focus: l = !0,
     hover: a = !0,
@@ -22,33 +22,33 @@ const mo = Q(
   }, P) {
     const [i, r] = V(t ?? !1), f = X(null), b = m || "span", k = (d) => {
       r(d), F?.(d);
-    }, { refs: c, floatingStyles: R, context: o } = N({
+    }, { refs: c, floatingStyles: R, context: o } = I({
       placement: h,
       open: i,
       whileElementsMounted: K,
       onOpenChange: t ? void 0 : k,
       middleware: [W(), Y(5), _(), q({ padding: 5, element: f }), J({ fallbackAxisSideDirection: "start" })]
-    }), v = S(o, { enabled: e }), x = T(o, { role: "tooltip", enabled: e }), y = j(o, { enabled: e ? l : !1 }), A = B(o, { enabled: e ? s : !1 }), O = L(o, { enabled: !!e && !!w }), D = z(o, {
+    }), x = N(o, { enabled: e }), v = S(o, { role: s ? "dialog" : "tooltip", enabled: e }), y = T(o, { enabled: e ? l : !1 }), A = B(o, { enabled: e ? s : !1 }), O = L(o, { enabled: !!e && !!w }), j = z(o, {
       move: !0,
       delay: { open: eo },
       enabled: e ? a : !1,
       handleClose: s ? G() : null
-    }), { getReferenceProps: E, getFloatingProps: I } = H([
-      x,
+    }), { getReferenceProps: D, getFloatingProps: E } = H([
       v,
+      x,
       O,
       l ? y : void 0,
-      a ? D : void 0,
+      a ? j : void 0,
       s ? A : void 0
     ]);
     return Z(() => r(t === void 0 ? !1 : t), [t]), /* @__PURE__ */ u($, { children: [
-      /* @__PURE__ */ n(b, { ...E(C), ref: to(c.setReference, P), children: p }),
+      /* @__PURE__ */ n(b, { ...D(C), ref: to(c.setReference, P), children: g }),
       i && /* @__PURE__ */ n(M, { children: /* @__PURE__ */ u(
         oo,
         {
-          ...I(),
-          ref: c.setFloating,
+          ...E(),
           style: R,
+          ref: c.setFloating,
           className: "isolate z-tooltip rounded-lg border border-tooltip-border bg-tooltip-background p-3 text-tooltip-foreground shadow-shadow-floating",
           children: [
             /* @__PURE__ */ n(
@@ -60,7 +60,7 @@ const mo = Q(
                 className: "fill-tooltip-background stroke-tooltip-border"
               }
             ),
-            g
+            p
           ]
         }
       ) })

package/dist/components/floating/tooltip.js.map

@@ -1 +1 @@
-{"version":3,"file":"tooltip.js","sources":["../../../src/components/floating/tooltip.tsx"],"sourcesContent":["\"use client\";\nimport {\n    arrow,\n    autoPlacement,\n    autoUpdate,\n    flip,\n    FloatingArrow,\n    FloatingPortal,\n    offset,\n    type Placement,\n    safePolygon,\n    shift,\n    useClick,\n    useClientPoint,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport React, { forwardRef, Fragment, useEffect, useRef, useState } from \"react\";\nimport { Polymorph, PolymorphicProps } from \"../../components/core/polymorph\";\nimport { FLOATING_DELAY } from \"../../constants\";\nimport { mergeRefs } from \"../../lib/dom\";\nimport { noop } from \"../../lib/fns\";\nimport { ComponentLike, Label } from \"../../types\";\n\nexport type TooltipProps<T extends React.ElementType = \"span\"> = PolymorphicProps<\n    {\n        title: Label;\n        open?: boolean;\n        focus?: boolean;\n        hover?: boolean;\n        enabled?: boolean;\n        popover?: boolean;\n        placement?: Placement;\n        followCursor?: boolean;\n        onChange?: (b: boolean) => void;\n    },\n    T\n>;\n\nexport const Tooltip: <T extends ComponentLike = \"span\">(_: TooltipProps<T>) => React.ReactElement = forwardRef<HTMLSpanElement, TooltipProps>(\n    function Tooltip<T extends ComponentLike = \"span\">(\n        {\n            as,\n            open,\n            title,\n            children,\n            placement,\n            focus = true,\n            hover = true,\n            enabled = true,\n            popover = true,\n            onChange = noop,\n            followCursor = false,\n            ...props\n        }: TooltipProps<T>,\n        outerRef: any\n    ) {\n        const [innerOpen, setInnerOpen] = useState<boolean>(open ?? false);\n        const arrowRef = useRef(null);\n        const Component: any = as || \"span\";\n        const toggleBoth = (b: boolean) => {\n            setInnerOpen(b);\n            onChange?.(b);\n        };\n        const { refs, floatingStyles, context } = useFloating({\n            placement,\n            open: innerOpen,\n            whileElementsMounted: autoUpdate,\n            onOpenChange: open ? undefined : toggleBoth,\n            middleware: [shift(), offset(5), autoPlacement(), arrow({ padding: 5, element: arrowRef }), flip({ fallbackAxisSideDirection: \"start\" })],\n        });\n        const dismiss = useDismiss(context, { enabled });\n        const role = useRole(context, { role: \"tooltip\", enabled });\n        const focusController = useFocus(context, { enabled: enabled ? focus : false });\n        const clickController = useClick(context, { enabled: enabled ? popover : false });\n        const clientPoint = useClientPoint(context, { enabled: !!enabled && !!followCursor });\n        const hoverController = useHover(context, {\n            move: true,\n            delay: { open: FLOATING_DELAY },\n            enabled: enabled ? hover : false,\n            handleClose: popover ? safePolygon() : null,\n        });\n        const { getReferenceProps, getFloatingProps } = useInteractions([\n            role,\n            dismiss,\n            clientPoint,\n            focus ? focusController : undefined,\n            hover ? hoverController : undefined,\n            popover ? clickController : undefined,\n        ]);\n\n        useEffect(() => {\n            if (open === undefined) return setInnerOpen(false);\n            return setInnerOpen(open);\n        }, [open]);\n\n        return (\n            <Fragment>\n                <Component {...getReferenceProps(props)} ref={mergeRefs(refs.setReference, outerRef)}>\n                    {title}\n                </Component>\n                {innerOpen && (\n                    <FloatingPortal>\n                        <Polymorph\n                            {...getFloatingProps()}\n                            ref={refs.setFloating}\n                            style={floatingStyles}\n                            className=\"isolate z-tooltip rounded-lg border border-tooltip-border bg-tooltip-background p-3 text-tooltip-foreground shadow-shadow-floating\"\n                        >\n                            <FloatingArrow\n                                ref={arrowRef}\n                                context={context}\n                                strokeWidth={0.1}\n                                className=\"fill-tooltip-background stroke-tooltip-border\"\n                            />\n                            {children}\n                        </Polymorph>\n                    </FloatingPortal>\n                )}\n            </Fragment>\n        );\n    }\n) as any;\n"],"names":["Tooltip","forwardRef","as","open","title","children","placement","focus","hover","enabled","popover","onChange","noop","followCursor","props","outerRef","innerOpen","setInnerOpen","useState","arrowRef","useRef","Component","toggleBoth","b","refs","floatingStyles","context","useFloating","autoUpdate","shift","offset","autoPlacement","arrow","flip","dismiss","useDismiss","role","useRole","focusController","useFocus","clickController","useClick","clientPoint","useClientPoint","hoverController","useHover","FLOATING_DELAY","safePolygon","getReferenceProps","getFloatingProps","useInteractions","useEffect","Fragment","jsx","mergeRefs","FloatingPortal","jsxs","Polymorph","FloatingArrow"],"mappings":";;;;;;;AA2CO,MAAMA,KAAwFC;AAAA,EACjG,SACI;AAAA,IACI,IAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,OAAAC,IAAQ;AAAA,IACR,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAWC;AAAA,IACX,cAAAC,IAAe;AAAA,IACf,GAAGC;AAAA,EAAA,GAEPC,GACF;AACE,UAAM,CAACC,GAAWC,CAAY,IAAIC,EAAkBf,KAAQ,EAAK,GAC3DgB,IAAWC,EAAO,IAAI,GACtBC,IAAiBnB,KAAM,QACvBoB,IAAa,CAACC,MAAe;AAC/B,MAAAN,EAAaM,CAAC,GACdZ,IAAWY,CAAC;AAAA,IAAA,GAEV,EAAE,MAAAC,GAAM,gBAAAC,GAAgB,SAAAC,EAAA,IAAYC,EAAY;AAAA,MAClD,WAAArB;AAAA,MACA,MAAMU;AAAA,MACN,sBAAsBY;AAAA,MACtB,cAAczB,IAAO,SAAYmB;AAAA,MACjC,YAAY,CAACO,KAASC,EAAO,CAAC,GAAGC,EAAA,GAAiBC,EAAM,EAAE,SAAS,GAAG,SAASb,GAAU,GAAGc,EAAK,EAAE,2BAA2B,SAAS,CAAC;AAAA,IAAA,CAC3I,GACKC,IAAUC,EAAWT,GAAS,EAAE,SAAAjB,GAAS,GACzC2B,IAAOC,EAAQX,GAAS,EAAE,MAAM,WAAW,SAAAjB,GAAS,GACpD6B,IAAkBC,EAASb,GAAS,EAAE,SAASjB,IAAUF,IAAQ,IAAO,GACxEiC,IAAkBC,EAASf,GAAS,EAAE,SAASjB,IAAUC,IAAU,IAAO,GAC1EgC,IAAcC,EAAejB,GAAS,EAAE,SAAS,CAAC,CAACjB,KAAW,CAAC,CAACI,GAAc,GAC9E+B,IAAkBC,EAASnB,GAAS;AAAA,MACtC,MAAM;AAAA,MACN,OAAO,EAAE,MAAMoB,GAAA;AAAA,MACf,SAASrC,IAAUD,IAAQ;AAAA,MAC3B,aAAaE,IAAUqC,MAAgB;AAAA,IAAA,CAC1C,GACK,EAAE,mBAAAC,GAAmB,kBAAAC,EAAA,IAAqBC,EAAgB;AAAA,MAC5Dd;AAAA,MACAF;AAAA,MACAQ;AAAA,MACAnC,IAAQ+B,IAAkB;AAAA,MAC1B9B,IAAQoC,IAAkB;AAAA,MAC1BlC,IAAU8B,IAAkB;AAAA,IAAA,CAC/B;AAED,WAAAW,EAAU,MACyBlC,EAA3Bd,MAAS,SAA+B,KACxBA,CAD6B,GAElD,CAACA,CAAI,CAAC,qBAGJiD,GAAA,EACG,UAAA;AAAA,MAAA,gBAAAC,EAAChC,GAAA,EAAW,GAAG2B,EAAkBlC,CAAK,GAAG,KAAKwC,GAAU9B,EAAK,cAAcT,CAAQ,GAC9E,UAAAX,EAAA,CACL;AAAA,MACCY,uBACIuC,GAAA,EACG,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACI,GAAGR,EAAA;AAAA,UACJ,KAAKzB,EAAK;AAAA,UACV,OAAOC;AAAA,UACP,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAA4B;AAAA,cAACK;AAAA,cAAA;AAAA,gBACG,KAAKvC;AAAA,gBACL,SAAAO;AAAA,gBACA,aAAa;AAAA,gBACb,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAEbrB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EACL,CACJ;AAAA,IAAA,GAER;AAAA,EAAA;AAGZ;"}
+{"version":3,"file":"tooltip.js","sources":["../../../src/components/floating/tooltip.tsx"],"sourcesContent":["\"use client\";\nimport {\n    arrow,\n    autoPlacement,\n    autoUpdate,\n    flip,\n    FloatingArrow,\n    FloatingPortal,\n    offset,\n    type Placement,\n    safePolygon,\n    shift,\n    useClick,\n    useClientPoint,\n    useDismiss,\n    useFloating,\n    useFocus,\n    useHover,\n    useInteractions,\n    useRole,\n} from \"@floating-ui/react\";\nimport React, { forwardRef, Fragment, useEffect, useRef, useState } from \"react\";\nimport { Polymorph, PolymorphicProps } from \"../../components/core/polymorph\";\nimport { FLOATING_DELAY } from \"../../constants\";\nimport { mergeRefs } from \"../../lib/dom\";\nimport { noop } from \"../../lib/fns\";\nimport { ComponentLike, Label } from \"../../types\";\n\nexport type TooltipProps<T extends React.ElementType = \"span\"> = PolymorphicProps<\n    {\n        title: Label;\n        open?: boolean;\n        focus?: boolean;\n        hover?: boolean;\n        enabled?: boolean;\n        popover?: boolean;\n        placement?: Placement;\n        followCursor?: boolean;\n        onChange?: (b: boolean) => void;\n    },\n    T\n>;\n\nexport const Tooltip: <T extends ComponentLike = \"span\">(_: TooltipProps<T>) => React.ReactElement = forwardRef<HTMLSpanElement, TooltipProps>(\n    function Tooltip<T extends ComponentLike = \"span\">(\n        {\n            as,\n            open,\n            title,\n            children,\n            placement,\n            focus = true,\n            hover = true,\n            enabled = true,\n            popover = true,\n            onChange = noop,\n            followCursor = false,\n            ...props\n        }: TooltipProps<T>,\n        outerRef: React.ForwardedRef<HTMLSpanElement>\n    ) {\n        const [innerOpen, setInnerOpen] = useState<boolean>(open ?? false);\n        const arrowRef = useRef(null);\n        const Component: React.ElementType = as || \"span\";\n        const toggleBoth = (b: boolean) => {\n            setInnerOpen(b);\n            onChange?.(b);\n        };\n        const { refs, floatingStyles, context } = useFloating({\n            placement,\n            open: innerOpen,\n            whileElementsMounted: autoUpdate,\n            onOpenChange: open ? undefined : toggleBoth,\n            middleware: [shift(), offset(5), autoPlacement(), arrow({ padding: 5, element: arrowRef }), flip({ fallbackAxisSideDirection: \"start\" })],\n        });\n        const dismiss = useDismiss(context, { enabled });\n        const role = useRole(context, { role: popover ? \"dialog\" : \"tooltip\", enabled });\n        const focusController = useFocus(context, { enabled: enabled ? focus : false });\n        const clickController = useClick(context, { enabled: enabled ? popover : false });\n        const clientPoint = useClientPoint(context, { enabled: !!enabled && !!followCursor });\n        const hoverController = useHover(context, {\n            move: true,\n            delay: { open: FLOATING_DELAY },\n            enabled: enabled ? hover : false,\n            handleClose: popover ? safePolygon() : null,\n        });\n        const { getReferenceProps, getFloatingProps } = useInteractions([\n            role,\n            dismiss,\n            clientPoint,\n            focus ? focusController : undefined,\n            hover ? hoverController : undefined,\n            popover ? clickController : undefined,\n        ]);\n\n        useEffect(() => {\n            if (open === undefined) return setInnerOpen(false);\n            return setInnerOpen(open);\n        }, [open]);\n\n        return (\n            <Fragment>\n                <Component {...getReferenceProps(props)} ref={mergeRefs(refs.setReference, outerRef)}>\n                    {title}\n                </Component>\n                {innerOpen && (\n                    <FloatingPortal>\n                        <Polymorph\n                            {...getFloatingProps()}\n                            style={floatingStyles}\n                            ref={refs.setFloating as React.Ref<React.ElementType<any, keyof React.JSX.IntrinsicElements>>}\n                            className=\"isolate z-tooltip rounded-lg border border-tooltip-border bg-tooltip-background p-3 text-tooltip-foreground shadow-shadow-floating\"\n                        >\n                            <FloatingArrow\n                                ref={arrowRef}\n                                context={context}\n                                strokeWidth={0.1}\n                                className=\"fill-tooltip-background stroke-tooltip-border\"\n                            />\n                            {children}\n                        </Polymorph>\n                    </FloatingPortal>\n                )}\n            </Fragment>\n        );\n    }\n) as unknown as <T extends ComponentLike = \"span\">(_: TooltipProps<T>) => React.ReactElement;\n"],"names":["Tooltip","forwardRef","as","open","title","children","placement","focus","hover","enabled","popover","onChange","noop","followCursor","props","outerRef","innerOpen","setInnerOpen","useState","arrowRef","useRef","Component","toggleBoth","b","refs","floatingStyles","context","useFloating","autoUpdate","shift","offset","autoPlacement","arrow","flip","dismiss","useDismiss","role","useRole","focusController","useFocus","clickController","useClick","clientPoint","useClientPoint","hoverController","useHover","FLOATING_DELAY","safePolygon","getReferenceProps","getFloatingProps","useInteractions","useEffect","Fragment","jsx","mergeRefs","FloatingPortal","jsxs","Polymorph","FloatingArrow"],"mappings":";;;;;;;AA2CO,MAAMA,KAAwFC;AAAA,EACjG,SACI;AAAA,IACI,IAAAC;AAAA,IACA,MAAAC;AAAA,IACA,OAAAC;AAAA,IACA,UAAAC;AAAA,IACA,WAAAC;AAAA,IACA,OAAAC,IAAQ;AAAA,IACR,OAAAC,IAAQ;AAAA,IACR,SAAAC,IAAU;AAAA,IACV,SAAAC,IAAU;AAAA,IACV,UAAAC,IAAWC;AAAA,IACX,cAAAC,IAAe;AAAA,IACf,GAAGC;AAAA,EAAA,GAEPC,GACF;AACE,UAAM,CAACC,GAAWC,CAAY,IAAIC,EAAkBf,KAAQ,EAAK,GAC3DgB,IAAWC,EAAO,IAAI,GACtBC,IAA+BnB,KAAM,QACrCoB,IAAa,CAACC,MAAe;AAC/B,MAAAN,EAAaM,CAAC,GACdZ,IAAWY,CAAC;AAAA,IAAA,GAEV,EAAE,MAAAC,GAAM,gBAAAC,GAAgB,SAAAC,EAAA,IAAYC,EAAY;AAAA,MAClD,WAAArB;AAAA,MACA,MAAMU;AAAA,MACN,sBAAsBY;AAAA,MACtB,cAAczB,IAAO,SAAYmB;AAAA,MACjC,YAAY,CAACO,KAASC,EAAO,CAAC,GAAGC,EAAA,GAAiBC,EAAM,EAAE,SAAS,GAAG,SAASb,GAAU,GAAGc,EAAK,EAAE,2BAA2B,SAAS,CAAC;AAAA,IAAA,CAC3I,GACKC,IAAUC,EAAWT,GAAS,EAAE,SAAAjB,GAAS,GACzC2B,IAAOC,EAAQX,GAAS,EAAE,MAAMhB,IAAU,WAAW,WAAW,SAAAD,GAAS,GACzE6B,IAAkBC,EAASb,GAAS,EAAE,SAASjB,IAAUF,IAAQ,IAAO,GACxEiC,IAAkBC,EAASf,GAAS,EAAE,SAASjB,IAAUC,IAAU,IAAO,GAC1EgC,IAAcC,EAAejB,GAAS,EAAE,SAAS,CAAC,CAACjB,KAAW,CAAC,CAACI,GAAc,GAC9E+B,IAAkBC,EAASnB,GAAS;AAAA,MACtC,MAAM;AAAA,MACN,OAAO,EAAE,MAAMoB,GAAA;AAAA,MACf,SAASrC,IAAUD,IAAQ;AAAA,MAC3B,aAAaE,IAAUqC,MAAgB;AAAA,IAAA,CAC1C,GACK,EAAE,mBAAAC,GAAmB,kBAAAC,EAAA,IAAqBC,EAAgB;AAAA,MAC5Dd;AAAA,MACAF;AAAA,MACAQ;AAAA,MACAnC,IAAQ+B,IAAkB;AAAA,MAC1B9B,IAAQoC,IAAkB;AAAA,MAC1BlC,IAAU8B,IAAkB;AAAA,IAAA,CAC/B;AAED,WAAAW,EAAU,MACyBlC,EAA3Bd,MAAS,SAA+B,KACxBA,CAD6B,GAElD,CAACA,CAAI,CAAC,qBAGJiD,GAAA,EACG,UAAA;AAAA,MAAA,gBAAAC,EAAChC,GAAA,EAAW,GAAG2B,EAAkBlC,CAAK,GAAG,KAAKwC,GAAU9B,EAAK,cAAcT,CAAQ,GAC9E,UAAAX,EAAA,CACL;AAAA,MACCY,uBACIuC,GAAA,EACG,UAAA,gBAAAC;AAAA,QAACC;AAAA,QAAA;AAAA,UACI,GAAGR,EAAA;AAAA,UACJ,OAAOxB;AAAA,UACP,KAAKD,EAAK;AAAA,UACV,WAAU;AAAA,UAEV,UAAA;AAAA,YAAA,gBAAA6B;AAAA,cAACK;AAAA,cAAA;AAAA,gBACG,KAAKvC;AAAA,gBACL,SAAAO;AAAA,gBACA,aAAa;AAAA,gBACb,WAAU;AAAA,cAAA;AAAA,YAAA;AAAA,YAEbrB;AAAA,UAAA;AAAA,QAAA;AAAA,MAAA,EACL,CACJ;AAAA,IAAA,GAER;AAAA,EAAA;AAGZ;"}

package/dist/components/floating/tooltip.jsx

@@ -0,0 +1,58 @@
+"use client";
+import { arrow, autoPlacement, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, safePolygon, shift, useClick, useClientPoint, useDismiss, useFloating, useFocus, useHover, useInteractions, useRole, } from "@floating-ui/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";
+import { noop } from "../../lib/fns";
+export const Tooltip = forwardRef(function Tooltip({ as, open, title, children, placement, focus = true, hover = true, enabled = true, popover = true, onChange = noop, followCursor = false, ...props }, outerRef) {
+    const [innerOpen, setInnerOpen] = useState(open ?? false);
+    const arrowRef = useRef(null);
+    const Component = as || "span";
+    const toggleBoth = (b) => {
+        setInnerOpen(b);
+        onChange?.(b);
+    };
+    const { refs, floatingStyles, context } = useFloating({
+        placement,
+        open: innerOpen,
+        whileElementsMounted: autoUpdate,
+        onOpenChange: open ? undefined : toggleBoth,
+        middleware: [shift(), offset(5), autoPlacement(), arrow({ padding: 5, element: arrowRef }), flip({ fallbackAxisSideDirection: "start" })],
+    });
+    const dismiss = useDismiss(context, { enabled });
+    const role = useRole(context, { role: popover ? "dialog" : "tooltip", enabled });
+    const focusController = useFocus(context, { enabled: enabled ? focus : false });
+    const clickController = useClick(context, { enabled: enabled ? popover : false });
+    const clientPoint = useClientPoint(context, { enabled: !!enabled && !!followCursor });
+    const hoverController = useHover(context, {
+        move: true,
+        delay: { open: FLOATING_DELAY },
+        enabled: enabled ? hover : false,
+        handleClose: popover ? safePolygon() : null,
+    });
+    const { getReferenceProps, getFloatingProps } = useInteractions([
+        role,
+        dismiss,
+        clientPoint,
+        focus ? focusController : undefined,
+        hover ? hoverController : undefined,
+        popover ? clickController : undefined,
+    ]);
+    useEffect(() => {
+        if (open === undefined)
+            return setInnerOpen(false);
+        return setInnerOpen(open);
+    }, [open]);
+    return (<Fragment>
+                <Component {...getReferenceProps(props)} ref={mergeRefs(refs.setReference, outerRef)}>
+                    {title}
+                </Component>
+                {innerOpen && (<FloatingPortal>
+                        <Polymorph {...getFloatingProps()} style={floatingStyles} ref={refs.setFloating} className="isolate z-tooltip rounded-lg border border-tooltip-border bg-tooltip-background p-3 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.jsx

@@ -0,0 +1,161 @@
+"use client";
+import { arrow, autoUpdate, flip, FloatingArrow, FloatingPortal, offset, shift, useFloating, useInteractions, useRole, } from "@floating-ui/react";
+import { AnimatePresence, motion } from "motion/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";
+import { noop } from "../../lib/fns";
+import { Button } from "../core/button";
+const getRect = (element) => {
+    if (!element)
+        return { top: 0, left: 0, width: 0, height: 0, bottom: 0, right: 0 };
+    return element.getBoundingClientRect();
+};
+const resolveElement = (element) => {
+    if (typeof element === "string") {
+        return document.querySelector(element);
+    }
+    if ("current" in element) {
+        return element.current;
+    }
+    return element;
+};
+export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop, onChange = noop, labels: labelsProp }) => {
+    const translation = useTranslations();
+    const [index, setIndex] = useState(0);
+    const currentStep = steps[index];
+    const [element, setElement] = useState(null);
+    const [rect, setRect] = useState(getRect(null));
+    const [isOverlayReady, setIsOverlayReady] = useState(false);
+    const arrowRef = useRef(null);
+    const { width, height } = useWindowSize();
+    const labels = {
+        next: labelsProp?.next ?? translation.wizardNext,
+        previous: labelsProp?.previous ?? translation.wizardPrev,
+        finish: labelsProp?.finish ?? translation.wizardFinish,
+        skip: labelsProp?.skip ?? translation.wizardSkip,
+    };
+    const { refs, floatingStyles, context } = useFloating({
+        open: active && isOverlayReady,
+        placement: currentStep?.side || "bottom",
+        whileElementsMounted: autoUpdate,
+        middleware: [offset(10), flip(), shift(), arrow({ element: arrowRef })],
+    });
+    const { getFloatingProps } = useInteractions([useRole(context)]);
+    useEffect(() => {
+        if (active) {
+            setIndex(0);
+        }
+    }, [active]);
+    useEffect(() => {
+        setIsOverlayReady(false);
+    }, [index, active]);
+    useEffect(() => {
+        if (!active || !currentStep)
+            return;
+        const el = resolveElement(currentStep.element);
+        if (el) {
+            currentStep.onEnter?.();
+            setTimeout(() => {
+                setRect(el.getBoundingClientRect());
+                refs.setReference(el);
+                setElement(el);
+            }, 100);
+        }
+        else {
+            console.warn(`Driver: Element not found:`, currentStep.element);
+            setElement(null);
+            setRect({ top: 0, left: 0, width: 0, height: 0, bottom: 0, right: 0 });
+        }
+    }, [index, active, currentStep, refs]);
+    useLayoutEffect(() => {
+        if (!element)
+            return;
+        const update = () => setRect(element.getBoundingClientRect());
+        update();
+        window.addEventListener("scroll", update, { capture: true, passive: true });
+        window.addEventListener("resize", update, { capture: true, passive: true });
+        return () => {
+            window.removeEventListener("scroll", update, { capture: true });
+            window.removeEventListener("resize", update, { capture: true });
+        };
+    }, [element, width, height]);
+    useResizeObserver(element, (entry) => {
+        setRect(entry.target.getBoundingClientRect());
+    });
+    const handleNext = () => {
+        currentStep.onNext?.();
+        setTimeout(() => {
+            if (index < steps.length - 1) {
+                setIndex((i) => i + 1);
+                onChange(index + 1);
+            }
+            else {
+                onFinish();
+                onClose();
+            }
+        }, 0);
+    };
+    const handlePrevious = () => {
+        currentStep.onPrevious?.();
+        if (index > 0) {
+            setIndex((i) => i - 1);
+            onChange(index - 1);
+        }
+    };
+    if (!active)
+        return null;
+    const hasNext = index < steps.length - 1;
+    const hasPrevious = index > 0;
+    return (<FloatingPortal>
+            <div className="pointer-events-none fixed inset-0 z-wizard">
+                <svg className="absolute inset-0 h-full w-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="pointer-events-auto outline-none">
+                            <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 w-80 max-w-sm flex-col gap-3 rounded-lg border border-floating-border bg-floating-background p-4 shadow-lg">
+                                {element && (<FloatingArrow ref={arrowRef} context={context} className="fill-floating-background stroke-floating-border"/>)}
+                                {currentStep.title && <h3>{currentStep.title}</h3>}
+                                {currentStep.description && <Fragment>{currentStep.description}</Fragment>}
+                                <div className="mt-2 flex items-center justify-between border-t border-floating-border pt-2">
+                                    <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="ghost-muted" onClick={handlePrevious}>
+                                                {labels.previous}
+                                            </Button>)}
+                                        <Button size="small" onClick={handleNext}>
+                                            {hasNext ? labels.next : labels.finish}
+                                        </Button>
+                                    </div>
+                                </div>
+                                <div className="absolute right-2 top-2 text-xs text-muted-foreground">
+                                    {index + 1} / {steps.length}
+                                </div>
+                            </motion.div>
+                        </div>)}
+                </AnimatePresence>
+            </div>
+        </FloatingPortal>);
+};