@g4rcez/components 5.0.1 → 5.0.2

package/dist/components/floating/menu.jsx

@@ -0,0 +1,165 @@
+"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 { CaretRightIcon } from "@phosphor-icons/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-none p-menu-item-p 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-menu-radius last-of-type:rounded-b-menu-radius", "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);
+            },
+        }))} 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}>
+                            {label}
+                        </Slot>) : (<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>
+                                    <CaretRightIcon 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-menu-max-h flex-col items-start overflow-y-auto rounded-menu-radius border border-floating-border bg-floating-background text-left shadow-shadow-floating outline-none", 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.d.ts

@@ -0,0 +1,60 @@
+import { type ElementProps, type FloatingContext } from "@floating-ui/react";
+import { HTMLMotionProps } from "motion/react";
+import React from "react";
+import { Label, Override } from "../../types";
+import { ButtonProps } from "../core/button";
+export declare const useConfirm: () => (options: ConfirmOptions) => Promise<boolean>;
+export type ModalType = "dialog" | "drawer" | "sheet";
+export type DrawerPosition = "left" | "right";
+export type ModalProps = Override<HTMLMotionProps<"div">, ({
+    title: Label;
+    ariaTitle?: string;
+} | {
+    ariaTitle: string;
+    title?: Label;
+}) & {
+    open: boolean;
+    onChange: (nextState: boolean) => void;
+} & Partial<{
+    footer: Label;
+    type: ModalType;
+    animated: boolean;
+    asChild: boolean;
+    layoutId: string;
+    resizer: boolean;
+    className: string;
+    closable: boolean;
+    forceType: boolean;
+    bodyClassName: string;
+    overlayClassName: string;
+    position: DrawerPosition;
+    overlayClickClose: boolean;
+    closeOnFocusOut: boolean;
+    role: "dialog";
+    interactions: ElementProps[];
+    trigger: Label;
+}>>;
+export type ModalRef = {
+    context: FloatingContext;
+    floating: HTMLElement | null;
+};
+type ModalComponent = React.FC<ModalProps> & {
+    confirm: <T>(options: ConfirmOptions) => Promise<T>;
+};
+export declare const Modal: ModalComponent;
+type ButtonConfirmationAction = {
+    value?: unknown;
+    text?: Label;
+    theme?: ButtonProps["theme"];
+};
+export type ConfirmOptions = {
+    title?: Label;
+    description?: Label;
+    cancel?: ButtonConfirmationAction;
+    confirm?: ButtonConfirmationAction;
+};
+export declare const ModalConfirmProvider: ({ children }: {
+    children: React.ReactNode;
+}) => React.JSX.Element;
+export {};
+//# sourceMappingURL=modal.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EASH,KAAK,YAAY,EACjB,KAAK,eAAe,EACvB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAEH,eAAe,EAQlB,MAAM,cAAc,CAAC;AAEtB,OAAO,KAWN,MAAM,OAAO,CAAC;AAGf,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGnD,OAAO,EAAU,WAAW,EAAE,MAAM,gBAAgB,CAAC;AAMrD,eAAO,MAAM,UAAU,kBAF8B,cAAc,KAAK,OAAO,CAAC,OAAO,CAEvB,CAAC;AAEjE,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AA2E9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC7B,eAAe,CAAC,KAAK,CAAC,EACtB,CAAC;IAAE,KAAK,EAAE,KAAK,CAAC;IAAC,SAAS,CAAC,EAAE,MAAM,CAAA;CAAE,GAAG;IAAE,SAAS,EAAE,MAAM,CAAC;IAAC,KAAK,CAAC,EAAE,KAAK,CAAA;CAAE,CAAC,GAAG;IAC5E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CAC1C,GAAG,OAAO,CAAC;IACJ,MAAM,EAAE,KAAK,CAAC;IACd,IAAI,EAAE,SAAS,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;IACjB,OAAO,EAAE,OAAO,CAAC;IACjB,SAAS,EAAE,MAAM,CAAC;IAClB,QAAQ,EAAE,OAAO,CAAC;IAClB,SAAS,EAAE,OAAO,CAAC;IACnB,aAAa,EAAE,MAAM,CAAC;IACtB,gBAAgB,EAAE,MAAM,CAAC;IACzB,QAAQ,EAAE,cAAc,CAAC;IACzB,iBAAiB,EAAE,OAAO,CAAC;IAC3B,eAAe,EAAE,OAAO,CAAC;IACzB,IAAI,EAAE,QAAQ,CAAC;IACf,YAAY,EAAE,YAAY,EAAE,CAAC;IAC7B,OAAO,EAAE,KAAK,CAAC;CAClB,CAAC,CACT,CAAC;AAkFF,MAAM,MAAM,QAAQ,GAAG;IACnB,OAAO,EAAE,eAAe,CAAC;IACzB,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAC;CAChC,CAAC;AAIF,KAAK,cAAc,GAAG,KAAK,CAAC,EAAE,CAAC,UAAU,CAAC,GAAG;IACzC,OAAO,EAAE,CAAC,CAAC,EAAE,OAAO,EAAE,cAAc,KAAK,OAAO,CAAC,CAAC,CAAC,CAAC;CACvD,CAAC;AAEF,eAAO,MAAM,KAAK,EAAE,cA4QU,CAAC;AAE/B,KAAK,wBAAwB,GAAG;IAC5B,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,IAAI,CAAC,EAAE,KAAK,CAAC;IACb,KAAK,CAAC,EAAE,WAAW,CAAC,OAAO,CAAC,CAAC;CAChC,CAAC;AAEF,MAAM,MAAM,cAAc,GAAG;IACzB,KAAK,CAAC,EAAE,KAAK,CAAC;IACd,WAAW,CAAC,EAAE,KAAK,CAAC;IACpB,MAAM,CAAC,EAAE,wBAAwB,CAAC;IAClC,OAAO,CAAC,EAAE,wBAAwB,CAAC;CACtC,CAAC;AAaF,eAAO,MAAM,oBAAoB,GAAI,cAAc;IAAE,QAAQ,EAAE,KAAK,CAAC,SAAS,CAAA;CAAE,sBA2D/E,CAAC"}

package/dist/components/floating/modal.jsx

@@ -0,0 +1,336 @@
+"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-modal-gap 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-modal-dialog-max-w-mobile",
+            dialog: "container relative h-min max-h-modal-sheet-max-h-lvh rounded-modal-radius py-modal-padding-y",
+            sheet: "absolute bottom-0 h-screen max-h-modal-sheet-max-h-svh max-h-modal-sheet-max-h-vh w-screen rounded-t-modal-radius pb-modal-sheet-pb pt-modal-sheet-pt",
+        },
+        position: {
+            none: "",
+            right: "absolute right-0 top-0 rounded-l-modal-radius py-modal-padding-y",
+            left: "absolute left-0 top-0 rounded-r-modal-radius py-modal-padding-y",
+        },
+    },
+    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-modal-resizer-radius", props.sheet ? "cursor-row-resize" : "cursor-col-resize bg-floating-border", props.sheet
+            ? "top-1 flex h-modal-sheet-handle-h w-full justify-center py-modal-sheet-handle-py"
+            : props.position === "left"
+                ? "right-5 top-1/2 h-modal-drawer-resizer-h w-modal-drawer-resizer-w"
+                : "left-2 top-1/2 h-modal-drawer-resizer-h w-modal-drawer-resizer-w")}>
+            {props.sheet ? <div className="rounded-modal-sheet-pill-radius h-modal-sheet-pill-h w-modal-sheet-pill-w 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-modal-overlay-h !overflow-clip bg-floating-overlay/80", type === "drawer" ? "" : "items-start justify-center pt-modal-overlay-pt lg:p-modal-overlay-p", 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-modal-padding-x pb-modal-title-pb text-modal-title-text 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-modal-padding-x py-modal-body-py", 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-modal-padding-x pt-modal-footer-pt">
+                                                        {footer}
+                                                    </footer>) : null}
+                                                {closable ? (<div className="absolute right-modal-close-right top-modal-close-top z-floating">
+                                                        <button type="button" onClick={onClose} aria-label={t.closeButton} className="p-modal-close-p 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 confirmRef = useRef(null);
+    useEffect(() => {
+        if (open)
+            confirmRef.current?.focus();
+    }, [open]);
+    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-modal-footer-gap">
+                        <Button theme={options.cancel?.theme || "ghost-muted"} onClick={onCancel}>
+                            {options.cancel?.text || "Cancel"}
+                        </Button>
+                        <Button ref={confirmRef} theme={options.confirm?.theme || "primary"} onClick={onConfirm}>
+                            {options.confirm?.text || "Confirm"}
+                        </Button>
+                    </div>}>
+                <div className="py-modal-confirm-py text-foreground">{options.description}</div>
+            </Modal>
+        </ConfirmContext.Provider>);
+};

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

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

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

@@ -0,0 +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,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-toolbar-bottom flex items-center justify-center rounded-toolbar-radius border border-card-border bg-background p-toolbar-p">
+        {props.children}
+    </motion.div>);

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

@@ -0,0 +1,17 @@
+import { type Placement } from "@floating-ui/react";
+import React from "react";
+import { PolymorphicProps } from "../../components/core/polymorph";
+import { ComponentLike, Label } from "../../types";
+export type TooltipProps<T extends React.ElementType = "span"> = PolymorphicProps<{
+    title: Label;
+    open?: boolean;
+    focus?: boolean;
+    hover?: boolean;
+    enabled?: boolean;
+    popover?: boolean;
+    placement?: Placement;
+    followCursor?: boolean;
+    onChange?: (b: boolean) => void;
+}, T>;
+export declare const Tooltip: <T extends ComponentLike = "span">(_: TooltipProps<T>) => React.ReactElement;
+//# sourceMappingURL=tooltip.d.ts.map

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

@@ -0,0 +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,YA4FM,CAAC"}