framepexls-ui-lib 0.1.13 → 0.1.15

package/dist/TimeRangeField.js

@@ -36,6 +36,7 @@ var import_jsx_runtime = require("react/jsx-runtime");
 var import_react = require("react");
 var import_react_dom = require("react-dom");
 var import_Input = __toESM(require("./Input"));
+var import_Button = __toESM(require("./Button"));
 var import_TimePopover = __toESM(require("./TimePopover"));
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
 function parseHHmm(v) {
@@ -149,8 +150,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-center justify-between gap-2 px-3 py-2 text-sm", children: [
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "font-medium", children: "Selecciona horario" }),
       /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-        "button",
+        import_Button.default,
         {
+          unstyled: true,
           type: "button",
           className: "rounded-xl bg-slate-900 px-3 py-1.5 text-white hover:opacity-95 active:scale-[0.98] dark:bg-white dark:text-slate-900",
           onClick: () => setOpen(false),
@@ -162,8 +164,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1 text-xs text-slate-500 dark:text-slate-300", children: "Desde" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
+            unstyled: true,
             type: "button",
             className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => setShowFromPop((v) => !v),
@@ -172,8 +175,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
+            unstyled: true,
             type: "button",
             className: "ml-2 rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => {
@@ -188,8 +192,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
       /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { children: [
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mb-1 text-xs text-slate-500 dark:text-slate-300", children: "Hasta" }),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
+            unstyled: true,
             type: "button",
             className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => setShowToPop((v) => !v),
@@ -198,8 +203,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
           }
         ),
         /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
+            unstyled: true,
             type: "button",
             className: "ml-2 rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => {
@@ -229,8 +235,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
         },
         disabled,
         rightSlot: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
-          "button",
+          import_Button.default,
           {
+            unstyled: true,
             type: "button",
             className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5",
             onClick: (e) => {

package/dist/TimeRangeField.mjs

@@ -3,6 +3,7 @@ import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import Input from "./Input";
+import Button from "./Button";
 import TimePopover from "./TimePopover";
 const pad2 = (n) => n < 10 ? `0${n}` : String(n);
 function parseHHmm(v) {
@@ -116,8 +117,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
     /* @__PURE__ */ jsxs("div", { className: "flex items-center justify-between gap-2 px-3 py-2 text-sm", children: [
       /* @__PURE__ */ jsx("div", { className: "font-medium", children: "Selecciona horario" }),
       /* @__PURE__ */ jsx(
-        "button",
+        Button,
         {
+          unstyled: true,
           type: "button",
           className: "rounded-xl bg-slate-900 px-3 py-1.5 text-white hover:opacity-95 active:scale-[0.98] dark:bg-white dark:text-slate-900",
           onClick: () => setOpen(false),
@@ -129,8 +131,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs text-slate-500 dark:text-slate-300", children: "Desde" }),
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            unstyled: true,
             type: "button",
             className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => setShowFromPop((v) => !v),
@@ -139,8 +142,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
           }
         ),
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            unstyled: true,
             type: "button",
             className: "ml-2 rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => {
@@ -155,8 +159,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
       /* @__PURE__ */ jsxs("div", { children: [
         /* @__PURE__ */ jsx("div", { className: "mb-1 text-xs text-slate-500 dark:text-slate-300", children: "Hasta" }),
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            unstyled: true,
             type: "button",
             className: "rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 font-medium tracking-wide hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => setShowToPop((v) => !v),
@@ -165,8 +170,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
           }
         ),
         /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            unstyled: true,
             type: "button",
             className: "ml-2 rounded-xl ring-1 ring-slate-200 px-2.5 py-1.5 hover:bg-slate-50 active:scale-[0.98] dark:ring-white/10 dark:hover:bg-white/10",
             onClick: () => {
@@ -196,8 +202,9 @@ function TimeRangeField({ value, onValueChange, portal = true, portalId, clearab
         },
         disabled,
         rightSlot: /* @__PURE__ */ jsx(
-          "button",
+          Button,
           {
+            unstyled: true,
             type: "button",
             className: "pointer-events-auto inline-flex h-7 w-7 items-center justify-center rounded-lg border border-slate-200 bg-white text-slate-600 hover:bg-slate-50 active:scale-95 dark:border-white/10 dark:bg-white/5",
             onClick: (e) => {

package/dist/Toast.d.mts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type ToastType = "default" | "success" | "error" | "warning" | "info";
+type ToastPlacement = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type ToastAction = {
+    label: string;
+    onClick?: () => void;
+};
+type ToastInput = {
+    id?: string;
+    title?: string;
+    description?: React__default.ReactNode;
+    type?: ToastType;
+    duration?: number;
+    dismissible?: boolean;
+    icon?: React__default.ReactNode;
+    action?: ToastAction;
+};
+type ToastItem = {
+    id: string;
+    title?: string;
+    description?: React__default.ReactNode;
+    type: ToastType;
+    duration: number;
+    dismissible: boolean;
+    icon?: React__default.ReactNode;
+    action?: ToastAction;
+    createdAt: number;
+};
+type ToastContextValue = {
+    add: (t: ToastInput) => string;
+    remove: (id: string) => void;
+    clear: () => void;
+    update: (id: string, patch: Partial<ToastInput>) => void;
+    success: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+    error: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+    warning: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+    info: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+};
+declare function useToast(): ToastContextValue;
+type ProviderProps = {
+    placement?: ToastPlacement;
+    max?: number;
+    duration?: number;
+    children?: React__default.ReactNode;
+};
+declare function ToastProvider({ placement, max, duration, children }: ProviderProps): react_jsx_runtime.JSX.Element;
+declare const _default: {
+    Provider: typeof ToastProvider;
+};
+
+export { type ToastAction, type ToastInput, type ToastItem, type ToastPlacement, ToastProvider, type ToastType, _default as default, useToast };

package/dist/Toast.d.ts

@@ -0,0 +1,53 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type ToastType = "default" | "success" | "error" | "warning" | "info";
+type ToastPlacement = "top-left" | "top-center" | "top-right" | "bottom-left" | "bottom-center" | "bottom-right";
+type ToastAction = {
+    label: string;
+    onClick?: () => void;
+};
+type ToastInput = {
+    id?: string;
+    title?: string;
+    description?: React__default.ReactNode;
+    type?: ToastType;
+    duration?: number;
+    dismissible?: boolean;
+    icon?: React__default.ReactNode;
+    action?: ToastAction;
+};
+type ToastItem = {
+    id: string;
+    title?: string;
+    description?: React__default.ReactNode;
+    type: ToastType;
+    duration: number;
+    dismissible: boolean;
+    icon?: React__default.ReactNode;
+    action?: ToastAction;
+    createdAt: number;
+};
+type ToastContextValue = {
+    add: (t: ToastInput) => string;
+    remove: (id: string) => void;
+    clear: () => void;
+    update: (id: string, patch: Partial<ToastInput>) => void;
+    success: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+    error: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+    warning: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+    info: (msg: string | ToastInput, opts?: Omit<ToastInput, "description" | "type">) => string;
+};
+declare function useToast(): ToastContextValue;
+type ProviderProps = {
+    placement?: ToastPlacement;
+    max?: number;
+    duration?: number;
+    children?: React__default.ReactNode;
+};
+declare function ToastProvider({ placement, max, duration, children }: ProviderProps): react_jsx_runtime.JSX.Element;
+declare const _default: {
+    Provider: typeof ToastProvider;
+};
+
+export { type ToastAction, type ToastInput, type ToastItem, type ToastPlacement, ToastProvider, type ToastType, _default as default, useToast };

package/dist/Toast.js

@@ -0,0 +1,273 @@
+"use strict";
+"use client";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+var Toast_exports = {};
+__export(Toast_exports, {
+  ToastProvider: () => ToastProvider,
+  default: () => Toast_default,
+  useToast: () => useToast
+});
+module.exports = __toCommonJS(Toast_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+var import_framer_motion = require("framer-motion");
+var import_Button = __toESM(require("./Button"));
+const ToastCtx = import_react.default.createContext(null);
+function useToast() {
+  const ctx = import_react.default.useContext(ToastCtx);
+  if (!ctx) throw new Error("useToast debe usarse dentro de <ToastProvider />");
+  return ctx;
+}
+function genId() {
+  return Math.random().toString(36).slice(2) + Date.now().toString(36);
+}
+const typeAccent = {
+  default: {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "9" }) }),
+    className: "text-slate-600 dark:text-slate-300",
+    border: "border-slate-200 dark:border-white/10",
+    progress: "bg-slate-300/70 dark:bg-white/30"
+  },
+  success: {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 6L9 17l-5-5" }) }),
+    className: "text-emerald-600 dark:text-emerald-400",
+    border: "border-emerald-200 dark:border-emerald-500/30",
+    progress: "bg-emerald-500/60"
+  },
+  error: {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 8v5M12 16h.01" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0z" })
+    ] }),
+    className: "text-rose-600 dark:text-rose-400",
+    border: "border-rose-200 dark:border-rose-500/30",
+    progress: "bg-rose-500/60"
+  },
+  warning: {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 9v4m0 4h.01" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M10.29 3.86 1.82 18a2 2 0 0 0 1.71 3h16.94a2 2 0 0 0 1.71-3L13.71 3.86a2 2 0 0 0-3.42 0z" })
+    ] }),
+    className: "text-amber-600 dark:text-amber-400",
+    border: "border-amber-200 dark:border-amber-500/30",
+    progress: "bg-amber-500/60"
+  },
+  info: {
+    icon: /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M13 16h-1v-4h-1" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M12 8h.01" }),
+      /* @__PURE__ */ (0, import_jsx_runtime.jsx)("circle", { cx: "12", cy: "12", r: "9" })
+    ] }),
+    className: "text-sky-600 dark:text-sky-400",
+    border: "border-sky-200 dark:border-sky-500/30",
+    progress: "bg-sky-500/60"
+  }
+};
+function useIsomorphicLayoutEffect(effect, deps) {
+  const useIso = typeof window !== "undefined" ? import_react.default.useLayoutEffect : import_react.default.useEffect;
+  return useIso(effect, deps);
+}
+function ToastView({ item, onClose, placement }) {
+  var _a;
+  const [hovered, setHovered] = import_react.default.useState(false);
+  const [remaining, setRemaining] = import_react.default.useState(item.duration);
+  const [startTs, setStartTs] = import_react.default.useState(null);
+  import_react.default.useEffect(() => {
+    if (hovered) return;
+    if (item.duration <= 0) return;
+    const now = Date.now();
+    setStartTs(now);
+    const id = setTimeout(() => onClose(), remaining);
+    return () => clearTimeout(id);
+  }, [hovered, remaining, item.duration, onClose]);
+  const onMouseEnter = () => {
+    setHovered(true);
+    if (startTs) {
+      const elapsed = Date.now() - startTs;
+      setRemaining((r) => Math.max(0, r - elapsed));
+      setStartTs(null);
+    }
+  };
+  const onMouseLeave = () => setHovered(false);
+  const direction = placement.startsWith("top") ? -1 : 1;
+  const accent = typeAccent[item.type];
+  const role = item.type === "error" || item.type === "warning" ? "alert" : "status";
+  const progressPct = item.duration > 0 ? Math.max(0, Math.min(100, (remaining != null ? remaining : 0) / item.duration * 100)) : 0;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(
+    import_framer_motion.motion.div,
+    {
+      role,
+      "aria-live": role === "alert" ? "assertive" : "polite",
+      initial: { opacity: 0, y: 12 * direction },
+      animate: { opacity: 1, y: 0 },
+      exit: { opacity: 0, y: 12 * direction },
+      transition: { type: "spring", stiffness: 260, damping: 26 },
+      onMouseEnter,
+      onMouseLeave,
+      className: [
+        "pointer-events-auto relative w-[380px] max-w-[92vw] overflow-hidden rounded-xl border bg-white p-3 pr-10 shadow-lg dark:bg-[#0f0d0e]",
+        accent.border
+      ].join(" "),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["mt-0.5 shrink-0", accent.className].join(" "), children: (_a = item.icon) != null ? _a : accent.icon }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "min-w-0 flex-1", children: [
+            item.title && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "text-[13px] font-semibold text-slate-900 dark:text-white", children: item.title }),
+            item.description && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-0.5 text-[13px] leading-snug text-slate-600 dark:text-slate-300", children: item.description }),
+            item.action && /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: "mt-2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+              import_Button.default,
+              {
+                unstyled: true,
+                onClick: () => {
+                  var _a2, _b;
+                  (_b = (_a2 = item.action) == null ? void 0 : _a2.onClick) == null ? void 0 : _b.call(_a2);
+                  onClose();
+                },
+                className: [
+                  "inline-flex items-center rounded-lg px-2 py-1 text-xs font-medium",
+                  "text-slate-700 hover:bg-slate-100 dark:text-slate-200 dark:hover:bg-white/10"
+                ].join(" "),
+                children: item.action.label
+              }
+            ) })
+          ] }),
+          item.dismissible && /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            import_Button.default,
+            {
+              unstyled: true,
+              "aria-label": "Cerrar",
+              onClick: onClose,
+              className: "absolute right-2 top-2 inline-flex h-7 w-7 items-center justify-center rounded-lg text-slate-500 hover:bg-slate-100 hover:text-slate-700 dark:text-slate-300 dark:hover:bg-white/10",
+              children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M6 6l12 12M18 6L6 18" }) })
+            }
+          )
+        ] }),
+        item.duration > 0 && /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("div", { className: "absolute inset-x-0 bottom-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: ["h-0.5 w-full bg-transparent"].join(" ") }),
+          /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+            "div",
+            {
+              className: ["absolute bottom-0 left-0 h-0.5", accent.progress].join(" "),
+              style: { width: `${progressPct}%`, transition: hovered ? void 0 : "width 120ms linear" }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+function getContainerClasses(placement) {
+  const base = "pointer-events-none fixed z-[2000] flex gap-2 p-4";
+  switch (placement) {
+    case "top-left":
+      return `${base} left-0 top-0 flex-col items-start`;
+    case "top-center":
+      return `${base} left-1/2 top-0 -translate-x-1/2 transform flex-col items-center`;
+    case "top-right":
+      return `${base} right-0 top-0 flex-col items-end`;
+    case "bottom-left":
+      return `${base} bottom-0 left-0 flex-col-reverse items-start`;
+    case "bottom-center":
+      return `${base} bottom-0 left-1/2 -translate-x-1/2 transform flex-col-reverse items-center`;
+    case "bottom-right":
+    default:
+      return `${base} bottom-0 right-0 flex-col-reverse items-end`;
+  }
+}
+function ToastProvider({ placement = "top-right", max = 4, duration = 5e3, children }) {
+  const [toasts, setToasts] = import_react.default.useState([]);
+  const [mounted, setMounted] = import_react.default.useState(false);
+  const portalRoot = typeof document !== "undefined" ? document.body : null;
+  const remove = import_react.default.useCallback((id) => {
+    setToasts((arr) => arr.filter((t) => t.id !== id));
+  }, []);
+  const clear = import_react.default.useCallback(() => setToasts([]), []);
+  const update = import_react.default.useCallback((id, patch) => {
+    setToasts((arr) => arr.map((t) => t.id === id ? { ...t, ...patch } : t));
+  }, []);
+  const add = import_react.default.useCallback(
+    (input) => {
+      var _a, _b, _c, _d, _e, _f, _g;
+      const id = (_a = input.id) != null ? _a : genId();
+      const item = {
+        id,
+        title: (_b = input.title) != null ? _b : void 0,
+        description: (_c = input.description) != null ? _c : void 0,
+        type: (_d = input.type) != null ? _d : "default",
+        duration: typeof input.duration === "number" ? input.duration : duration,
+        dismissible: (_e = input.dismissible) != null ? _e : true,
+        icon: (_f = input.icon) != null ? _f : void 0,
+        action: (_g = input.action) != null ? _g : void 0,
+        createdAt: Date.now()
+      };
+      setToasts((prev) => {
+        const next = [item, ...prev];
+        if (next.length > max) next.splice(max);
+        return next;
+      });
+      return id;
+    },
+    [duration, max]
+  );
+  const sugar = import_react.default.useMemo(() => {
+    const wrap = (type) => (msg, opts) => {
+      if (typeof msg === "string") {
+        return add({ description: msg, type, ...opts != null ? opts : {} });
+      }
+      return add({ ...msg, type });
+    };
+    return {
+      success: wrap("success"),
+      error: wrap("error"),
+      warning: wrap("warning"),
+      info: wrap("info")
+    };
+  }, [add]);
+  const ctx = import_react.default.useMemo(
+    () => ({ add, remove, clear, update, ...sugar }),
+    [add, remove, clear, update, sugar]
+  );
+  import_react.default.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const container = /* @__PURE__ */ (0, import_jsx_runtime.jsx)("div", { className: getContainerClasses(placement), "aria-live": "polite", children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)(import_framer_motion.AnimatePresence, { initial: false, children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ToastView, { item: t, onClose: () => remove(t.id), placement }, t.id)) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(ToastCtx.Provider, { value: ctx, children: [
+    children,
+    mounted && portalRoot ? (0, import_react_dom.createPortal)(container, portalRoot) : null
+  ] });
+}
+var Toast_default = {
+  Provider: ToastProvider
+};
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  ToastProvider,
+  useToast
+});