@g4rcez/components 2.2.3 → 2.2.4

package/dist/components/display/notifications.d.ts

@@ -5,9 +5,11 @@ declare const variants: (props?: ({
     theme?: "info" | "warn" | "muted" | "danger" | "success" | "secondary" | "default" | null | undefined;
 } & import("class-variance-authority/dist/types").ClassProp) | undefined) => string;
 type NotificationOptions = Partial<{
+    id: string;
     title: Label;
     timeout: number;
     closable: boolean;
+    loading: boolean;
     theme: VariantProps<typeof variants>["theme"];
 }>;
 type NotificationSubscriber = {

package/dist/components/display/notifications.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AACA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AAIlE,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAE/F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;mFAgBb,CAAC;AAEF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IACjC,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CAC/C,CAAC,CAAC;AAIH,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEvE,KAAK,eAAe,GAAG,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,mBAAmB,KAAK,sBAAsB,CAAC;AAMlG,eAAO,MAAM,eAAe,uBAAwC,CAAC;AAwDrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAqE1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,OAAc,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,+BAMxG"}
+{"version":3,"file":"notifications.d.ts","sourceRoot":"","sources":["../../../src/components/display/notifications.tsx"],"names":[],"mappings":"AAEA,OAAO,EAAO,KAAK,YAAY,EAAE,MAAM,0BAA0B,CAAC;AASlE,OAAO,EAAiB,KAAK,iBAAiB,EAAmC,MAAM,OAAO,CAAC;AAG/F,OAAO,EAAE,KAAK,EAAE,MAAM,aAAa,CAAC;AAEpC,QAAA,MAAM,QAAQ;;mFAgBb,CAAC;AAYF,KAAK,mBAAmB,GAAG,OAAO,CAAC;IACjC,EAAE,EAAE,MAAM,CAAC;IACX,KAAK,EAAE,KAAK,CAAC;IACb,OAAO,EAAE,MAAM,CAAC;IAChB,QAAQ,EAAE,OAAO,CAAC;IAClB,OAAO,EAAE,OAAO,CAAC;IACjB,KAAK,EAAE,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC,OAAO,CAAC,CAAC;CAC/C,CAAC,CAAC;AAQH,KAAK,sBAAsB,GAAG;IAAE,KAAK,EAAE,MAAM,IAAI,CAAC;IAAC,KAAK,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AAEvE,KAAK,eAAe,GAAG,CAAC,WAAW,EAAE,KAAK,EAAE,IAAI,CAAC,EAAE,mBAAmB,KAAK,sBAAsB,CAAC;AAMlG,eAAO,MAAM,eAAe,uBAAwC,CAAC;AAoDrE,MAAM,MAAM,iBAAiB,GAAG,OAAO,CAAC;IAAE,GAAG,EAAE,MAAM,CAAC;IAAC,OAAO,EAAE,MAAM,CAAA;CAAE,CAAC,CAAC;AAyF1E,wBAAgB,aAAa,CAAC,EAAE,QAAQ,EAAE,GAAO,EAAE,OAAc,EAAE,EAAE,iBAAiB,CAAC,iBAAiB,CAAC,+BAMxG"}

package/dist/components/display/notifications.jsx

@@ -1,14 +1,15 @@
 "use client";
+import { Toast as Base } from "@base-ui/react/toast";
 import { cva } from "class-variance-authority";
-import { XIcon } from "lucide-react";
+import { XIcon, CheckCircleIcon, TriangleAlertIcon, InfoIcon, Loader2Icon, } from "lucide-react";
 import { AnimatePresence, motion } from "motion/react";
-import { Toast as Base } from "@base-ui/react/toast";
 import { createContext, useCallback, useContext, useRef } from "react";
 import { useHover } from "../../hooks/use-hover";
-const variants = cva("relative isolate z-tooltip flex justify-between overflow-hidden whitespace-wrap rounded-lg border text-sm shadow-shadow-notification", {
+import { css } from "../../lib/dom";
+const variants = cva("relative isolate z-tooltip flex w-full flex-col overflow-hidden rounded-xl border bg-card-background backdrop-blur-md text-sm shadow-notification transition-all duration-300", {
     variants: {
         theme: {
-            default: "border-card-border bg-card-background text-foreground",
+            default: "border-card-border text-foreground shadow-black/5",
             info: "bg-alert-info-bg text-alert-info-text border-alert-info-border",
             warn: "bg-alert-warn-bg text-alert-warn-text border-alert-warn-border",
             muted: "bg-alert-muted-bg text-alert-muted-text border-alert-muted-border",
@@ -19,34 +20,46 @@ const variants = cva("relative isolate z-tooltip flex justify-between overflow-h
     },
     defaultVariants: { theme: "default" },
 });
+const themeIcons = {
+    default: InfoIcon,
+    info: InfoIcon,
+    warn: TriangleAlertIcon,
+    muted: InfoIcon,
+    danger: TriangleAlertIcon,
+    success: CheckCircleIcon,
+    secondary: InfoIcon,
+};
 const NotificationContext = createContext(() => {
     throw new Error("Not implemented");
 });
 export const useNotification = () => useContext(NotificationContext);
-const animatedIndex = {
-    0: { opacity: 1, y: [10, 15], scale: [1, 0.98] },
-    1: { opacity: 1, y: [15, 20], scale: [1, 0.97] },
-    2: { opacity: 1, y: [20, 25], scale: [1, 0.96] },
-    default: { opacity: 1, y: [25, 30], scale: [1, 0.95] },
-};
 function Notification(props) {
     const closable = props.toast.data?.closable ?? true;
-    const variant = props.hover ? "hover" : props.isLast ? "isLast" : "other";
-    const className = variants({ theme: props.toast.data?.theme || "default" });
-    return (<Base.Root toast={props.toast} swipeDirection={["down", "right"]}>
-      <motion.li layout layoutScroll animate={variant} data-index={props.index} initial={{ y: -100, zIndex: -1 }} className="absolute top-0 right-0 w-80 pointer-events-auto text-select" transition={{ type: "spring", mass: 1.2, damping: 30, stiffness: 200 }} exit={{ opacity: [0.9, 0], transition: { opacity: { bounce: 0.25, duration: 0.3 } } }} variants={{
-            isLast: { y: 10, scale: 1, animationDuration: "300ms", opacity: 1 },
-            hover: { y: 0, position: "static", scale: 1, opacity: 1 },
-            other: animatedIndex[props.reversedIndex] || animatedIndex.default,
-        }}>
-        <Base.Content className={className}>
-          <div className="flex flex-col p-4">
-            {props.toast.title ? (<Base.Title className="text-lg font-medium leading-relaxed select-text"/>) : null}
-            <Base.Description className="select-text"/>
+    const loading = props.toast.data?.loading ?? false;
+    const theme = props.toast.data?.theme || "default";
+    const className = variants({ theme });
+    const Icon = loading ? Loader2Icon : (themeIcons[theme] || InfoIcon);
+    return (<Base.Root toast={props.toast} swipeDirection="right">
+      <motion.li layout initial={{ opacity: 0, y: -20, scale: 0.95 }} animate={{ opacity: 1, y: 0, scale: 1 }} exit={{ opacity: 0, scale: 0.9, y: -20, transition: { duration: 0.2 } }} transition={{
+            type: "spring",
+            damping: 25,
+            stiffness: 300,
+        }} className="pointer-events-auto list-none w-full">
+        <Base.Content className={css(className, "shadow-lg")}>
+          <div className="flex items-start gap-3 p-4">
+            <div className={css("mt-0.5 shrink-0 opacity-80", loading && "animate-spin")}>
+              <Icon className="size-4"/>
+            </div>
+
+            <div className="flex flex-1 flex-col gap-1 overflow-hidden">
+              {props.toast.title ? (<Base.Title className="truncate font-semibold leading-tight tracking-tight select-text"/>) : null}
+              <Base.Description className="text-xs font-medium opacity-90 select-text leading-relaxed line-clamp-2"/>
+            </div>
+
+            {closable && !loading ? (<Base.Close className="shrink-0 -mr-1 -mt-1 p-1.5 rounded-lg text-foreground/40 transition hover:bg-foreground/10 hover:text-foreground">
+                <XIcon className="size-3.5"/>
+              </Base.Close>) : null}
           </div>
-          {closable ? (<Base.Close className="absolute top-2 right-2 p-1 rounded-full transition text-foreground hover:bg-danger/10 hover:text-danger-hover">
-              <XIcon className="size-5"/>
-            </Base.Close>) : null}
         </Base.Content>
       </motion.li>
     </Base.Root>);
@@ -55,16 +68,17 @@ function NotificationsViewport({ max = 5 }) {
     const ref = useRef(null);
     const hover = useHover(ref);
     const toastManager = Base.useToastManager();
-    const toasts = toastManager.toasts.slice(-max);
-    return (<Base.Viewport ref={ref} data-items={toasts.length} style={{
-            justifyContent: "start",
-            height: `${(hover ? toasts.length : Math.min(1, toasts.length)) * 7}rem`,
-        }} className="fixed right-4 top-10 flex w-80 list-none flex-col-reverse items-end gap-4 overflow-y-clip overflow-x-visible data-[items=true]:pb-8 max-sm:top-20">
-      <motion.ol className="flex flex-col gap-4">
-        <AnimatePresence presenceAffectsLayout mode="popLayout">
-          {toasts.reverse().map((toast, index, list) => (<Notification toast={toast} hover={hover} index={index} key={toast.id} isLast={list.length - 1 === index} reversedIndex={list.length - (index + 1)}/>))}
-        </AnimatePresence>
-      </motion.ol>
+    const allToasts = max ? toastManager.toasts.slice(0, max) : toastManager.toasts;
+    const visibleToasts = hover ? allToasts : allToasts.slice(0, 3);
+    const hiddenCount = allToasts.length - visibleToasts.length;
+    return (<Base.Viewport ref={ref} className="fixed left-1/2 top-6 z-[100] flex w-full max-w-[380px] -translate-x-1/2 flex-col gap-3 outline-none pointer-events-none overflow-visible">
+      <AnimatePresence mode="popLayout" initial={false}>
+        {visibleToasts.map((toast) => (<Notification key={toast.id} toast={toast}/>))}
+      </AnimatePresence>
+
+      {!hover && hiddenCount > 0 && (<motion.div layout initial={{ opacity: 0, y: -10 }} animate={{ opacity: 1, y: 0 }} exit={{ opacity: 0, y: -10 }} className="self-center px-3 py-1 text-[10px] font-bold tracking-wider uppercase bg-card-background/80 backdrop-blur shadow-sm border border-card-border rounded-full text-foreground/50 pointer-events-auto cursor-default transition-all hover:bg-card-background hover:text-foreground/80">
+          +{hiddenCount} more
+        </motion.div>)}
     </Base.Viewport>);
 }
 function NotificationsInner({ children, max = 5 }) {
@@ -73,11 +87,25 @@ function NotificationsInner({ children, max = 5 }) {
         toastManager.toasts.forEach((t) => toastManager.close(t.id));
     }, [toastManager]);
     const notify = useCallback((description, args) => {
+        const data = { theme: args?.theme, closable: args?.closable, loading: args?.loading };
+        if (args?.id) {
+            const existing = toastManager.toasts.find((t) => t.id === args.id);
+            if (existing) {
+                toastManager.update(args.id, {
+                    description,
+                    title: args.title,
+                    timeout: args.timeout,
+                    data,
+                });
+                return { close: () => toastManager.close(args.id), clear };
+            }
+        }
         const id = toastManager.add({
             description,
+            id: args?.id,
             title: args?.title,
             timeout: args?.timeout,
-            data: { theme: args?.theme, closable: args?.closable },
+            data,
         });
         return {
             close: () => toastManager.close(id),

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

@@ -22,7 +22,7 @@ type MenuItemProps = {
     Right?: React.FC<LucideProps>;
 };
 export declare const MenuItem: React.ForwardRefExoticComponent<Omit<React.ButtonHTMLAttributes<HTMLButtonElement>, keyof MenuItemProps> & MenuItemProps & React.RefAttributes<HTMLButtonElement>>;
-export declare const Menu: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "children" | "hover" | "open" | "restoreFocus" | "nested" | "asChild" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
+export declare const Menu: React.ForwardRefExoticComponent<(Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "children" | "hover" | "open" | "asChild" | "restoreFocus" | "nested" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
     hover: boolean;
     open?: boolean;
     nested: boolean;
@@ -34,7 +34,7 @@ export declare const Menu: React.ForwardRefExoticComponent<(Omit<Omit<React.Deta
     FloatingComponent: React.ElementType;
 } & {
     label: string;
-}>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "children" | "hover" | "open" | "restoreFocus" | "nested" | "asChild" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
+}>, "ref"> | Omit<Omit<React.DetailedHTMLProps<React.ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>, "label" | "children" | "hover" | "open" | "asChild" | "restoreFocus" | "nested" | "isParent" | "floatingClassName" | "FloatingComponent"> & Partial<{
     hover: boolean;
     open?: boolean;
     nested: boolean;

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

@@ -2,6 +2,8 @@ import { type ElementProps } 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">, ({
@@ -32,11 +34,22 @@ export type ModalProps = Override<HTMLMotionProps<"div">, ({
     interactions: ElementProps[];
     trigger: Label | React.FC<any>;
 }>>;
-type ModalRef = {
+export type ModalRef = {
     context: any;
     floating: HTMLElement | null;
 };
-export declare const Modal: React.ForwardRefExoticComponent<(Omit<Omit<HTMLMotionProps<"div">, "footer" | "title" | "className" | "role" | "onChange" | "position" | "open" | "resizer" | "type" | "layoutId" | "trigger" | "closeOnFocusOut" | "asChild" | "animated" | "closable" | "forceType" | "bodyClassName" | "overlayClassName" | "overlayClickClose" | "interactions" | "ariaTitle"> & {
+type ButtonConfirmationAction = {
+    value?: any;
+    text?: Label;
+    theme?: ButtonProps["theme"];
+};
+export type ConfirmOptions = {
+    title?: Label;
+    description?: Label;
+    cancel?: ButtonConfirmationAction;
+    confirm?: ButtonConfirmationAction;
+};
+export declare const Modal: React.ForwardRefExoticComponent<(Omit<Omit<HTMLMotionProps<"div">, "footer" | "title" | "className" | "role" | "onChange" | "position" | "open" | "resizer" | "type" | "layoutId" | "animated" | "asChild" | "closable" | "forceType" | "bodyClassName" | "overlayClassName" | "overlayClickClose" | "closeOnFocusOut" | "interactions" | "trigger" | "ariaTitle"> & {
     title: Label;
     ariaTitle?: string;
 } & {
@@ -62,7 +75,7 @@ export declare const Modal: React.ForwardRefExoticComponent<(Omit<Omit<HTMLMotio
     trigger: Label | React.FC<any>;
 }> & {
     children?: React.ReactNode | undefined;
-}, "ref"> | Omit<Omit<HTMLMotionProps<"div">, "footer" | "title" | "className" | "role" | "onChange" | "position" | "open" | "resizer" | "type" | "layoutId" | "trigger" | "closeOnFocusOut" | "asChild" | "animated" | "closable" | "forceType" | "bodyClassName" | "overlayClassName" | "overlayClickClose" | "interactions" | "ariaTitle"> & {
+}, "ref"> | Omit<Omit<HTMLMotionProps<"div">, "footer" | "title" | "className" | "role" | "onChange" | "position" | "open" | "resizer" | "type" | "layoutId" | "animated" | "asChild" | "closable" | "forceType" | "bodyClassName" | "overlayClassName" | "overlayClickClose" | "closeOnFocusOut" | "interactions" | "trigger" | "ariaTitle"> & {
     ariaTitle: string;
     title?: Label;
 } & {
@@ -88,6 +101,11 @@ export declare const Modal: React.ForwardRefExoticComponent<(Omit<Omit<HTMLMotio
     trigger: Label | React.FC<any>;
 }> & {
     children?: React.ReactNode | undefined;
-}, "ref">) & React.RefAttributes<ModalRef>>;
+}, "ref">) & React.RefAttributes<ModalRef>> & {
+    confirm: (options: ConfirmOptions) => Promise<boolean>;
+};
+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

@@ -1 +1 @@
-{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"AACA,OAAO,EASL,KAAK,YAAY,EAClB,MAAM,oBAAoB,CAAC;AAG5B,OAAO,EAAmB,eAAe,EAA4F,MAAM,cAAc,CAAC;AAE1J,OAAO,KAA+G,MAAM,OAAO,CAAC;AAGpI,OAAO,EAAE,KAAK,EAAO,QAAQ,EAAE,MAAM,aAAa,CAAC;AAKnD,MAAM,MAAM,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,OAAO,CAAC;AAEtD,MAAM,MAAM,cAAc,GAAG,MAAM,GAAG,OAAO,CAAC;AAuD9C,MAAM,MAAM,UAAU,GAAG,QAAQ,CAC/B,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;IAC9E,IAAI,EAAE,OAAO,CAAC;IACd,QAAQ,EAAE,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI,CAAC;CACxC,GAAG,OAAO,CAAC;IACV,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,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC,CAAC;CAChC,CAAC,CACH,CAAC;AAgFF,KAAK,QAAQ,GAAG;IAAE,OAAO,EAAE,GAAG,CAAC;IAAC,QAAQ,EAAE,WAAW,GAAG,IAAI,CAAA;CAAE,CAAC;AAI/D,eAAO,MAAM,KAAK;WA1GN,KAAK;gBAAc,MAAM;;UAC3B,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;qBACT,OAAO;UAClB,QAAQ;kBACA,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;;eApBqB,MAAM;YAAU,KAAK;;UAClE,OAAO;cACH,CAAC,SAAS,EAAE,OAAO,KAAK,IAAI;;YAE9B,KAAK;UACP,SAAS;cACL,OAAO;aACR,OAAO;cACN,MAAM;aACP,OAAO;eACL,MAAM;cACP,OAAO;eACN,OAAO;mBACH,MAAM;sBACH,MAAM;cACd,cAAc;uBACL,OAAO;qBACT,OAAO;UAClB,QAAQ;kBACA,YAAY,EAAE;aACnB,KAAK,GAAG,KAAK,CAAC,EAAE,CAAC,GAAG,CAAC;;;2CA8UjC,CAAC"}
+{"version":3,"file":"modal.d.ts","sourceRoot":"","sources":["../../../src/components/floating/modal.tsx"],"names":[],"mappings":"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"}

package/dist/components/floating/modal.jsx

@@ -4,10 +4,13 @@ import { cva } from "class-variance-authority";
 import { XIcon } from "lucide-react";
 import { AnimatePresence, motion, MotionConfig, useMotionValue, animate } from "motion/react";
 import { Slot } from "../core/slot";
-import React, { forwardRef, Fragment, useEffect, useId, useImperativeHandle, useRef } from "react";
+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 { 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 },
@@ -92,7 +95,7 @@ const fetchPosition = (isDesktop, forceType, propsType, propsPosition) => {
     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 InternalModal = 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);
@@ -243,3 +246,50 @@ export const Modal = forwardRef(({ open, title, footer, asChild, trigger, childr
         </MotionConfig>
       </Fragment>);
 });
+let confirmGlobal = async () => {
+    if (typeof window !== "undefined") {
+        console.warn("ConfirmationProvider is not mounted");
+    }
+    return false;
+};
+export const Modal = Object.assign(InternalModal, {
+    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}
+      <InternalModal 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 gap-2 justify-end">
+            <Button theme={options.cancel?.theme || "ghost-muted"} onClick={onCancel}>
+              {options.cancel?.text || "Cancel"}
+            </Button>
+            <Button theme={options.confirm?.theme || "primary"} onClick={onConfirm}>
+              {options.confirm?.text || "Confirm"}
+            </Button>
+          </div>}>
+        <div className="py-2 text-foreground">{options.description}</div>
+      </InternalModal>
+    </ConfirmContext.Provider>);
+};

package/dist/hooks/use-components-provider.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"use-components-provider.d.ts","sourceRoot":"","sources":["../../src/hooks/use-components-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAW,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAuB,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnF,OAAO,EAAiB,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAEjE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,YAAY,CAAC;IAClB,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAClC,CAAC,CAAC;AAEH,eAAO,MAAM,kBAAkB,GAAI,OAAO,iBAAiB,CAAC,YAAY,CAAC,sBAYxE,CAAC"}
+{"version":3,"file":"use-components-provider.d.ts","sourceRoot":"","sources":["../../src/hooks/use-components-provider.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAE,iBAAiB,EAAW,MAAM,OAAO,CAAC;AAC1D,OAAO,EAAE,OAAO,EAAE,MAAM,gBAAgB,CAAC;AACzC,OAAO,EAAE,OAAO,EAAE,MAAM,yBAAyB,CAAC;AAClD,OAAO,EAAW,YAAY,EAAE,MAAM,mBAAmB,CAAC;AAC1D,OAAO,EAAuB,YAAY,EAAE,MAAM,gCAAgC,CAAC;AACnF,OAAO,EAAiB,MAAM,EAAE,MAAM,0BAA0B,CAAC;AAGjE,MAAM,MAAM,WAAW,GAAG,OAAO,CAAC;IAChC,MAAM,EAAE,MAAM,CAAC;IACf,GAAG,EAAE,YAAY,CAAC;IAClB,MAAM,EAAE,OAAO,GAAG,SAAS,CAAC;IAC5B,MAAM,EAAE,OAAO,OAAO,CAAC,IAAI,CAAC;IAC5B,WAAW,CAAC,EAAE,WAAW,GAAG,IAAI,CAAC;CAClC,CAAC,CAAC;AAEH,eAAO,MAAM,kBAAkB,GAAI,OAAO,iBAAiB,CAAC,YAAY,CAAC,sBAgBxE,CAAC"}

package/dist/hooks/use-components-provider.jsx

@@ -4,6 +4,7 @@ import { parsers } from "../styles/design-tokens";
 import { Context } from "../config/context";
 import { defaultTranslations } from "../config/default-translations";
 import { defaultTweaks } from "../config/default-tweaks";
+import { ModalConfirmProvider } from "../components/floating/modal";
 export const ComponentsProvider = (props) => {
     const memoMap = useMemo(() => ({
         locale: props.locale,
@@ -12,5 +13,7 @@ export const ComponentsProvider = (props) => {
         parser: props.parser || parsers.hsla,
         map: { ...defaultTranslations, ...props.map },
     }), [props]);
-    return <Context.Provider value={memoMap}>{props.children}</Context.Provider>;
+    return (<Context.Provider value={memoMap}>
+      <ModalConfirmProvider>{props.children}</ModalConfirmProvider>
+    </Context.Provider>);
 };