framepexls-ui-lib 0.1.12 → 0.1.14

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

package/dist/Toast.mjs

@@ -0,0 +1,238 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import React from "react";
+import { createPortal } from "react-dom";
+import { AnimatePresence, motion } from "framer-motion";
+import Button from "./Button";
+const ToastCtx = React.createContext(null);
+function useToast() {
+  const ctx = React.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__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ 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__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ 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__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 8v5M12 16h.01" }),
+      /* @__PURE__ */ 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__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+      /* @__PURE__ */ jsx("path", { d: "M12 9v4m0 4h.01" }),
+      /* @__PURE__ */ 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__ */ jsxs("svg", { viewBox: "0 0 24 24", className: "h-5 w-5", fill: "none", stroke: "currentColor", strokeWidth: "2", children: [
+      /* @__PURE__ */ jsx("path", { d: "M13 16h-1v-4h-1" }),
+      /* @__PURE__ */ jsx("path", { d: "M12 8h.01" }),
+      /* @__PURE__ */ 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" ? React.useLayoutEffect : React.useEffect;
+  return useIso(effect, deps);
+}
+function ToastView({ item, onClose, placement }) {
+  var _a;
+  const [hovered, setHovered] = React.useState(false);
+  const [remaining, setRemaining] = React.useState(item.duration);
+  const [startTs, setStartTs] = React.useState(null);
+  React.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__ */ jsxs(
+    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__ */ jsxs("div", { className: "flex items-start gap-3", children: [
+          /* @__PURE__ */ jsx("div", { className: ["mt-0.5 shrink-0", accent.className].join(" "), children: (_a = item.icon) != null ? _a : accent.icon }),
+          /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1", children: [
+            item.title && /* @__PURE__ */ jsx("div", { className: "text-[13px] font-semibold text-slate-900 dark:text-white", children: item.title }),
+            item.description && /* @__PURE__ */ jsx("div", { className: "mt-0.5 text-[13px] leading-snug text-slate-600 dark:text-slate-300", children: item.description }),
+            item.action && /* @__PURE__ */ jsx("div", { className: "mt-2", children: /* @__PURE__ */ jsx(
+              Button,
+              {
+                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__ */ jsx(
+            Button,
+            {
+              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__ */ jsx("svg", { viewBox: "0 0 24 24", className: "h-4 w-4", fill: "none", stroke: "currentColor", strokeWidth: "2", children: /* @__PURE__ */ jsx("path", { d: "M6 6l12 12M18 6L6 18" }) })
+            }
+          )
+        ] }),
+        item.duration > 0 && /* @__PURE__ */ jsxs("div", { className: "absolute inset-x-0 bottom-0", children: [
+          /* @__PURE__ */ jsx("div", { className: ["h-0.5 w-full bg-transparent"].join(" ") }),
+          /* @__PURE__ */ 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] = React.useState([]);
+  const [mounted, setMounted] = React.useState(false);
+  const portalRoot = typeof document !== "undefined" ? document.body : null;
+  const remove = React.useCallback((id) => {
+    setToasts((arr) => arr.filter((t) => t.id !== id));
+  }, []);
+  const clear = React.useCallback(() => setToasts([]), []);
+  const update = React.useCallback((id, patch) => {
+    setToasts((arr) => arr.map((t) => t.id === id ? { ...t, ...patch } : t));
+  }, []);
+  const add = React.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 = React.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 = React.useMemo(
+    () => ({ add, remove, clear, update, ...sugar }),
+    [add, remove, clear, update, sugar]
+  );
+  React.useEffect(() => {
+    setMounted(true);
+  }, []);
+  const container = /* @__PURE__ */ jsx("div", { className: getContainerClasses(placement), "aria-live": "polite", children: /* @__PURE__ */ jsx(AnimatePresence, { initial: false, children: toasts.map((t) => /* @__PURE__ */ jsx(ToastView, { item: t, onClose: () => remove(t.id), placement }, t.id)) }) });
+  return /* @__PURE__ */ jsxs(ToastCtx.Provider, { value: ctx, children: [
+    children,
+    mounted && portalRoot ? createPortal(container, portalRoot) : null
+  ] });
+}
+var Toast_default = {
+  Provider: ToastProvider
+};
+export {
+  ToastProvider,
+  Toast_default as default,
+  useToast
+};

package/dist/Tooltip.d.mts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Placement = "top" | "bottom" | "left" | "right";
+type TooltipProps = {
+    content: React__default.ReactNode;
+    placement?: Placement;
+    delay?: number;
+    offset?: number;
+    className?: string;
+    children: React__default.ReactElement;
+};
+declare function Tooltip({ content, placement, delay, offset, className, children }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+export { type TooltipProps, Tooltip as default };

package/dist/Tooltip.d.ts

@@ -0,0 +1,15 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React__default from 'react';
+
+type Placement = "top" | "bottom" | "left" | "right";
+type TooltipProps = {
+    content: React__default.ReactNode;
+    placement?: Placement;
+    delay?: number;
+    offset?: number;
+    className?: string;
+    children: React__default.ReactElement;
+};
+declare function Tooltip({ content, placement, delay, offset, className, children }: TooltipProps): react_jsx_runtime.JSX.Element;
+
+export { type TooltipProps, Tooltip as default };

package/dist/Tooltip.js

@@ -0,0 +1,135 @@
+"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 Tooltip_exports = {};
+__export(Tooltip_exports, {
+  default: () => Tooltip
+});
+module.exports = __toCommonJS(Tooltip_exports);
+var import_jsx_runtime = require("react/jsx-runtime");
+var import_react = __toESM(require("react"));
+var import_react_dom = require("react-dom");
+function Tooltip({ content, placement = "top", delay = 80, offset = 8, className = "", children }) {
+  const [open, setOpen] = import_react.default.useState(false);
+  const [pos, setPos] = import_react.default.useState(null);
+  const [id] = import_react.default.useState(() => Math.random().toString(36).slice(2));
+  const ref = import_react.default.useRef(null);
+  const timer = import_react.default.useRef(null);
+  const attach = (el) => {
+    ref.current = el;
+  };
+  const compute = import_react.default.useCallback(() => {
+    const el = ref.current;
+    if (!el) return;
+    const r = el.getBoundingClientRect();
+    const scrollX = window.scrollX;
+    const scrollY = window.scrollY;
+    let top = 0, left = 0;
+    if (placement === "top") {
+      top = r.top + scrollY - offset;
+      left = r.left + scrollX + r.width / 2;
+    } else if (placement === "bottom") {
+      top = r.bottom + scrollY + offset;
+      left = r.left + scrollX + r.width / 2;
+    } else if (placement === "left") {
+      top = r.top + scrollY + r.height / 2;
+      left = r.left + scrollX - offset;
+    } else {
+      top = r.top + scrollY + r.height / 2;
+      left = r.right + scrollX + offset;
+    }
+    setPos({ top, left });
+  }, [placement, offset]);
+  import_react.default.useEffect(() => {
+    if (!open) return;
+    compute();
+    const onScroll = () => compute();
+    const onResize = () => compute();
+    window.addEventListener("scroll", onScroll, true);
+    window.addEventListener("resize", onResize);
+    return () => {
+      window.removeEventListener("scroll", onScroll, true);
+      window.removeEventListener("resize", onResize);
+    };
+  }, [open, compute]);
+  const show = () => {
+    if (timer.current) window.clearTimeout(timer.current);
+    timer.current = window.setTimeout(() => setOpen(true), delay);
+  };
+  const hide = () => {
+    if (timer.current) window.clearTimeout(timer.current);
+    setOpen(false);
+  };
+  const triggerProps = {
+    ref: attach,
+    onMouseEnter: (e) => {
+      var _a, _b;
+      show();
+      (_b = (_a = children.props).onMouseEnter) == null ? void 0 : _b.call(_a, e);
+    },
+    onMouseLeave: (e) => {
+      var _a, _b;
+      hide();
+      (_b = (_a = children.props).onMouseLeave) == null ? void 0 : _b.call(_a, e);
+    },
+    onFocus: (e) => {
+      var _a, _b;
+      show();
+      (_b = (_a = children.props).onFocus) == null ? void 0 : _b.call(_a, e);
+    },
+    onBlur: (e) => {
+      var _a, _b;
+      hide();
+      (_b = (_a = children.props).onBlur) == null ? void 0 : _b.call(_a, e);
+    },
+    "aria-describedby": open ? id : void 0
+  };
+  const body = open && pos && typeof document !== "undefined" ? /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    "div",
+    {
+      id,
+      role: "tooltip",
+      className: [
+        "pointer-events-none fixed z-[2000] max-w-xs rounded-xl border border-slate-200/80 bg-slate-900/95 px-2.5 py-1.5 text-[12px] text-white shadow-xl backdrop-blur",
+        "dark:border-white/10 dark:bg-white/10",
+        className != null ? className : ""
+      ].join(" "),
+      style: {
+        top: placement === "top" || placement === "bottom" ? pos.top : pos.top,
+        left: placement === "top" || placement === "bottom" ? pos.left : pos.left,
+        transform: placement === "top" || placement === "bottom" ? "translate(-50%, -100%)" : placement === "left" ? "translate(-100%, -50%)" : "translate(0, -50%)"
+      },
+      children: content
+    }
+  ) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)(import_jsx_runtime.Fragment, { children: [
+    import_react.default.cloneElement(children, triggerProps),
+    body ? (0, import_react_dom.createPortal)(body, document.body) : null
+  ] });
+}