@g4rcez/components 3.0.0-0 → 3.0.1

package/dist/components/floating/menu.jsx

@@ -1,147 +0,0 @@
-"use client";
-import { autoUpdate, flip, FloatingFocusManager, FloatingList, FloatingNode, FloatingPortal, FloatingTree, offset, safePolygon, shift, useClick, useDismiss, useFloating, useFloatingNodeId, useFloatingParentNodeId, useFloatingTree, useHover, useInteractions, useListItem, useListNavigation, useRole, useTypeahead, } from "@floating-ui/react";
-import { Slot } from "../core/slot";
-import { ChevronRightIcon } from "lucide-react";
-import React, { createContext, Fragment, useContext, useEffect, useRef, useState } from "react";
-import { FLOATING_DELAY, TYPEAHEAD_RESET_DELAY } from "../../constants";
-import { css, mergeRefs } from "../../lib/dom";
-const menuItemClassName = (highlight = "") => css("w-full min-w-36 outline-hidden p-2.5 items-center flex justify-between text-left", "hover:bg-primary focus:bg-primary aria-expanded:opacity-80", "focus:text-primary-foreground hover:text-primary-foreground", "first-of-type:rounded-t-lg last-of-type:rounded-b-lg", "disabled:opacity-40 disabled:cursor-not-allowed", highlight);
-const MenuContext = createContext({
-    isOpen: false,
-    activeIndex: null,
-    getItemProps: () => ({}),
-    setActiveIndex: () => { },
-    setHasFocusInside: () => { },
-});
-const MenuComponent = React.forwardRef(({ children, FloatingComponent = "div", hover = true, open, isParent = false, restoreFocus = false, floatingClassName = "", label, ...props }, forwardedRef) => {
-    const [isOpen, setIsOpen] = useState(open ?? false);
-    const [hasFocusInside, setHasFocusInside] = useState(false);
-    const [activeIndex, setActiveIndex] = useState(null);
-    const elementsRef = useRef([]);
-    const labelsRef = useRef([]);
-    const parent = useContext(MenuContext);
-    const parentId = useFloatingParentNodeId();
-    const tree = useFloatingTree();
-    const nodeId = useFloatingNodeId();
-    const item = useListItem();
-    const isNested = parentId !== null;
-    const { floatingStyles, refs, context } = useFloating({
-        nodeId,
-        open: isOpen,
-        transform: true,
-        strategy: "absolute",
-        onOpenChange: setIsOpen,
-        whileElementsMounted: autoUpdate,
-        placement: isNested ? "right" : "bottom-start",
-        middleware: [offset({ mainAxis: isNested ? 0 : 4, alignmentAxis: isNested ? -4 : 0 }), flip(), shift()],
-    });
-    const role = useRole(context, { role: "menu" });
-    const dismiss = useDismiss(context, { bubbles: true });
-    const hoverModule = useHover(context, {
-        move: false,
-        enabled: hover,
-        delay: { open: FLOATING_DELAY },
-        handleClose: safePolygon({ blockPointerEvents: true, requireIntent: false }),
-    });
-    const click = useClick(context, {
-        toggle: !isNested,
-        event: "mousedown",
-        ignoreMouse: isNested,
-        keyboardHandlers: true,
-    });
-    const listNavigation = useListNavigation(context, {
-        loop: true,
-        activeIndex,
-        nested: isNested,
-        listRef: elementsRef,
-        onNavigate: setActiveIndex,
-    });
-    const typeahead = useTypeahead(context, {
-        activeIndex,
-        listRef: labelsRef,
-        resetMs: TYPEAHEAD_RESET_DELAY,
-        onMatch: isOpen ? setActiveIndex : undefined,
-    });
-    const { getReferenceProps, getFloatingProps, getItemProps } = useInteractions([hoverModule, click, role, dismiss, listNavigation, typeahead]);
-    useEffect(() => {
-        if (!tree)
-            return;
-        const handleTreeClick = () => setIsOpen(false);
-        const onSubMenuOpen = (event) => {
-            if (event.nodeId !== nodeId && event.parentId === parentId)
-                setIsOpen(false);
-        };
-        tree.events.on("click", handleTreeClick);
-        tree.events.on("menuopen", onSubMenuOpen);
-        return () => {
-            tree.events.off("click", handleTreeClick);
-            tree.events.off("menuopen", onSubMenuOpen);
-        };
-    }, [tree, nodeId, parentId]);
-    useEffect(() => {
-        if (isOpen && tree)
-            tree.events.emit("menuopen", { parentId, nodeId });
-    }, [tree, isOpen, nodeId, parentId]);
-    const className = isParent ? props.className : css(menuItemClassName(props.className));
-    return (<FloatingNode id={nodeId}>
-                <Fragment>
-                    {props.asChild ? (<Slot {...getReferenceProps(parent.getItemProps({
-            ...props,
-            onFocus(event) {
-                props.onFocus?.(event);
-                setHasFocusInside(false);
-                parent.setHasFocusInside(true);
-            },
-        }))} children={label} className={className} data-open={isOpen ? "" : undefined} data-nested={isNested ? "" : undefined} role={isNested ? "menuitem" : undefined} data-focus-inside={hasFocusInside ? "" : undefined} ref={mergeRefs(refs.setReference, item.ref, forwardedRef)} tabIndex={!isNested ? undefined : parent.activeIndex === item.index ? 0 : -1}/>) : (<button type="button" className={className} data-open={isOpen ? "" : undefined} data-nested={isNested ? "" : undefined} role={isNested ? "menuitem" : undefined} data-focus-inside={hasFocusInside ? "" : undefined} ref={mergeRefs(refs.setReference, item.ref, forwardedRef)} tabIndex={!isNested ? undefined : parent.activeIndex === item.index ? 0 : -1} {...getReferenceProps(parent.getItemProps({
-            ...props,
-            onFocus(event) {
-                props.onFocus?.(event);
-                setHasFocusInside(false);
-                parent.setHasFocusInside(true);
-            },
-        }))}>
-                            {label}
-                            {isNested && (<span style={{ marginLeft: 10, fontSize: 10 }}>
-                                    <span className="sr-only">Next menu</span>
-                                    <ChevronRightIcon size={14}/>
-                                </span>)}
-                        </button>)}
-                </Fragment>
-                <MenuContext.Provider value={{ activeIndex, setActiveIndex, getItemProps, setHasFocusInside, isOpen }}>
-                    <FloatingList elementsRef={elementsRef} labelsRef={labelsRef}>
-                        {isOpen && (<FloatingPortal>
-                                <FloatingFocusManager context={context} modal={false} initialFocus={isNested ? -1 : 0} returnFocus={isParent ? restoreFocus : !isNested}>
-                                    <FloatingComponent {...getFloatingProps()} ref={refs.setFloating} style={{ ...props.style, ...floatingStyles }} className={css("isolate z-tooltip flex max-h-80 flex-col items-start overflow-y-auto rounded-lg border border-floating-border bg-floating-background text-left shadow-shadow-floating outline-hidden", floatingClassName)}>
-                                        {children}
-                                    </FloatingComponent>
-                                </FloatingFocusManager>
-                            </FloatingPortal>)}
-                    </FloatingList>
-                </MenuContext.Provider>
-            </FloatingNode>);
-});
-export const MenuItem = React.forwardRef(({ title, Right, disabled, children, ...props }, forwardedRef) => {
-    const menu = useContext(MenuContext);
-    const item = useListItem({ label: disabled ? null : title });
-    const tree = useFloatingTree();
-    const isActive = item.index === menu.activeIndex;
-    return (<button {...props} title={title} type="button" role="menuitem" disabled={disabled} data-active={isActive} data-open={menu.isOpen} tabIndex={isActive ? 0 : -1} ref={mergeRefs(item.ref, forwardedRef)} className={menuItemClassName(`${props.className ?? ""} ${isActive ? "bg-primary text-primary-foreground" : ""}`)} {...menu.getItemProps({
-        onClick(event) {
-            props.onClick?.(event);
-            tree?.events.emit("click");
-        },
-        onFocus(event) {
-            props.onFocus?.(event);
-            menu.setHasFocusInside(true);
-        },
-    })}>
-                {children}
-                {Right ? <Right size={16}/> : null}
-            </button>);
-});
-export const Menu = React.forwardRef((props, ref) => {
-    const parentId = useFloatingParentNodeId();
-    return parentId === null ? (<FloatingTree>
-            <MenuComponent {...props} isParent ref={ref}/>
-        </FloatingTree>) : (<MenuComponent {...props} isParent={false} ref={ref}/>);
-});

package/dist/components/floating/modal.jsx

@@ -1,241 +0,0 @@
-"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 { motion, MotionConfig, useMotionValue, animate } 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";
-import { useFloatingRef } from "../../hooks/use-floating-ref";
-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-floating-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, closeOnFocusOut = false, interactions: outInteractions = noop, ...props }, externalRef) => {
-    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 Trigger = trigger;
-    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}
-        <FloatingPortal preserveTabOrder root={root}>
-          {open ? (<FloatingOverlay lockScroll className={css("inset-0 flex isolate bg-floating-overlay/70 z-overlay h-dvh overflow-clip!", type === "drawer" ? "" : "items-start justify-center lg:p-10 pt-10", overlayClassName)}>
-              <MotionConfig reducedMotion={animated ? "user" : "always"}>
-                <FloatingFocusManager guards modal closeOnFocusOut={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, 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 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" 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;
-                    if (currentY > threshold) {
-                        await animate(sheetY, window.innerHeight, { duration: 0.2, ease: "easeIn" }).finished;
-                        onChange(false);
-                    }
-                    else {
-                        animate(sheetY, 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="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}
-        </FloatingPortal>
-      </Fragment>);
-});

package/dist/components/floating/toolbar.jsx

@@ -1,5 +0,0 @@
-"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.jsx

@@ -1,64 +0,0 @@
-"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: "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()} 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.jsx

@@ -1,164 +0,0 @@
-"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.driverNext,
-        previous: labelsProp?.previous ?? translation.driverPrevious,
-        finish: labelsProp?.finish ?? translation.driverFinish,
-        skip: labelsProp?.skip ?? translation.driverSkip,
-    };
-    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="fixed inset-0 pointer-events-none z-wizard">
-        <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-hidden 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>);
-};