@g4rcez/components 2.2.2 → 2.2.4

package/dist/components/core/button.d.ts

@@ -1,10 +1,6 @@
 import React, { PropsWithChildren } from "react";
 import { CvaVariants, type Label } from "../../types";
 import { PolymorphicProps } from "./polymorph";
-/**
- * Button variant definitions for styling
- * @internal
- */
 declare const variants: {
     size: {
         icon: string;
@@ -39,13 +35,11 @@ declare const variants: {
         "ghost-primary": string;
         "ghost-success": string;
         "ghost-secondary": string;
+        "ghost-muted": string;
+        "ghost-neutral": string;
     };
 };
 type Variants = CvaVariants<typeof variants>;
-/**
- * Props for the Button component
- * @template T - The HTML element type to render as (defaults to "button")
- */
 export type ButtonProps<T extends React.ElementType = "button"> = PropsWithChildren<PolymorphicProps<Variants & Partial<{
     /** Icon to display in the button */
     icon: Label;

package/dist/components/core/button.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/core/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D;;;GAGG;AACH,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAoCb,CAAC;AAeF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C;;;GAGG;AACH,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CAC/E,gBAAgB,CAAC,QAAQ,GAAG,OAAO,CAAC;IAChC,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC;IACZ,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAA;CACnB,CAAC,EAAE,CAAC,CAAC,CACT,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwBjF,CAAC"}
+{"version":3,"file":"button.d.ts","sourceRoot":"","sources":["../../../src/components/core/button.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,EAAc,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAE7D,OAAO,EAAE,WAAW,EAAE,KAAK,KAAK,EAAE,MAAM,aAAa,CAAC;AACtD,OAAO,EAAa,gBAAgB,EAAE,MAAM,aAAa,CAAC;AAE1D,QAAA,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAsCb,CAAC;AAUF,KAAK,QAAQ,GAAG,WAAW,CAAC,OAAO,QAAQ,CAAC,CAAC;AAE7C,MAAM,MAAM,WAAW,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,IAAI,iBAAiB,CAC/E,gBAAgB,CAAC,QAAQ,GAAG,OAAO,CAAC;IAChC,oCAAoC;IACpC,IAAI,EAAE,KAAK,CAAC;IACZ,+CAA+C;IAC/C,OAAO,EAAE,OAAO,CAAA;CACnB,CAAC,EAAE,CAAC,CAAC,CACT,CAAC;AAEF;;;;;;;;;;;;;;;;;;;;;;;;;GAyBG;AACH,eAAO,MAAM,MAAM,EAAE,CAAC,CAAC,SAAS,KAAK,CAAC,WAAW,GAAG,QAAQ,EAAE,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,KAAK,KAAK,CAAC,SAwBjF,CAAC"}

package/dist/components/core/button.jsx

@@ -2,10 +2,6 @@ import { cva } from "class-variance-authority";
 import React, { forwardRef } from "react";
 import { css } from "../../lib/dom";
 import { Polymorph } from "./polymorph";
-/**
- * Button variant definitions for styling
- * @internal
- */
 const variants = {
     size: {
         icon: "p-1",
@@ -30,23 +26,20 @@ const variants = {
         warn: "bg-button-warn-bg text-button-warn-text",
         muted: "bg-button-muted-bg text-button-muted-text",
         danger: "bg-button-danger-bg text-button-danger-text",
-        neutral: "bg-transparent border-2 border-card-border",
+        neutral: "bg-transparent border-1 border-card-border",
         primary: "bg-button-primary-bg text-button-primary-text",
         success: "bg-button-success-bg text-button-success-text",
         secondary: "bg-button-secondary-bg text-button-secondary-text",
-        "ghost-info": "bg-transparent hover:bg-info/20 border border-info text-info",
-        "ghost-warn": "bg-transparent hover:bg-warn/20 border border-warn text-warn",
-        "ghost-danger": "bg-transparent hover:bg-danger/20 border border-danger text-danger",
-        "ghost-primary": "bg-transparent hover:bg-primary/20 border border-primary text-primary",
-        "ghost-success": "bg-transparent hover:bg-success/20 border border-success text-success",
-        "ghost-secondary": "bg-transparent hover:bg-secondary/20 border border-secondary text-secondary",
+        "ghost-info": "bg-transparent hover:bg-info/20 border-0 border-transparent text-info",
+        "ghost-warn": "bg-transparent hover:bg-warn/20 border-0 border-transparent text-warn",
+        "ghost-danger": "bg-transparent hover:bg-danger/20 border-0 border-transparent text-danger",
+        "ghost-primary": "bg-transparent hover:bg-primary/20 border-0 border-transparent text-primary",
+        "ghost-success": "bg-transparent hover:bg-success/20 border-0 border-transparent text-success",
+        "ghost-secondary": "bg-transparent hover:bg-secondary/20 border-0 border-transparent text-secondary",
+        "ghost-muted": "bg-transparent hover:bg-muted/20 border-0 border-transparent text-muted-foreground",
+        "ghost-neutral": "bg-transparent border-0 border-card-border",
     },
 };
-/**
- * Class variance authority configuration for button styling
- * Handles all visual states and variants of the button component
- * @internal
- */
 const buttonVariants = cva("relative overflow-hidden inline-flex duration-500 enabled:hover:bg-opacity-70 enabled:focus:bg-opacity-70 data-[loading=true]:opacity-30 data-[loading=true]:animate-pulse gap-1.5 items-center justify-center align-middle cursor-pointer whitespace-nowrap font-medium transition-colors ease-in disabled:cursor-not-allowed disabled:bg-opacity-40 disabled:text-opacity-80 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring", {
     variants,
     defaultVariants: { theme: "main", size: "default", rounded: "default" },

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/components/floating/wizard.jsx

@@ -136,8 +136,8 @@ export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop,
                 left: "50%",
                 transform: "translate(-50%, -50%)"
             }} className="outline-none pointer-events-auto">
-              <motion.div transition={{ duration: 0.2 }} exit={{ opacity: 0, scale: 0.9 }} animate={{ opacity: 1, scale: 1 }} initial={{ opacity: 0, scale: 0.9 }} className="flex flex-col gap-3 p-4 w-80 max-w-sm rounded-lg border shadow-lg bg-card-background border-card-border">
-                {element && (<FloatingArrow ref={arrowRef} context={context} className="fill-card-background stroke-card-border"/>)}
+              <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-floating-background border-floating-border">
+                {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="flex justify-between items-center pt-2 mt-2 border-t border-floating-border">
@@ -145,7 +145,7 @@ export const Wizard = ({ steps, active = false, onClose = noop, onFinish = noop,
                     {labels.skip}
                   </Button>
                   <div className="flex gap-2">
-                    {hasPrevious && (<Button size="small" theme="neutral" onClick={handlePrevious}>
+                    {hasPrevious && (<Button size="small" theme="ghost-muted" onClick={handlePrevious}>
                         {labels.previous}
                       </Button>)}
                     <Button size="small" onClick={handleNext}>

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>);
 };