@doscientos/ui 0.1.12 → 0.1.13

package/dist/index.cjs

@@ -254,12 +254,12 @@ function useAutosave({
   }, []);
   (0, import_react.useEffect)(() => {
     if (!enabled) return;
-    const snapshot2 = serializeRef.current(data);
+    const snapshot = serializeRef.current(data);
     if (lastSaved.current === null) {
-      lastSaved.current = snapshot2;
+      lastSaved.current = snapshot;
       return;
     }
-    if (snapshot2 === lastSaved.current) return;
+    if (snapshot === lastSaved.current) return;
     const timeout = window.setTimeout(() => void save(data), debounceMs);
     return () => window.clearTimeout(timeout);
   }, [data, debounceMs, enabled, save]);
@@ -2744,46 +2744,40 @@ function TabsContent({ className, ...props }) {
 
 // src/ui/toast/toast.tsx
 var import_react12 = require("react");
-var import_lucide_react14 = require("lucide-react");
+var import_sileo = require("sileo");
 var import_jsx_runtime45 = require("react/jsx-runtime");
-var records = [];
-var listeners = /* @__PURE__ */ new Set();
-var snapshot = () => records;
-var emit = () => listeners.forEach((listener) => listener());
-var subscribe = (listener) => {
-  listeners.add(listener);
-  return () => listeners.delete(listener);
-};
-var remove = (id) => {
-  records = records.filter((record) => record.id !== id);
-  emit();
-};
-function create(options) {
-  const id = `${Date.now()}-${Math.random().toString(36).slice(2)}`;
-  records = [...records, { ...options, id, state: "open", variant: options.variant ?? "default", duration: options.duration ?? 5e3, position: options.position ?? "bottom-right" }];
-  emit();
-  return id;
-}
-function dismiss(id) {
-  if (!records.some((record) => record.id === id && record.state === "open")) return;
-  records = records.map((record) => record.id === id ? { ...record, state: "closing" } : record);
-  emit();
-  window.setTimeout(() => remove(id), 180);
+function toSileoOptions({ title, description, duration, position, action }) {
+  return {
+    title,
+    description,
+    duration: duration === 0 ? null : duration,
+    position,
+    button: action ? { title: action.label, onClick: action.onPress } : void 0
+  };
 }
-function update(id, patch) {
-  records = records.map((record) => record.id === id ? { ...record, ...patch, state: "open" } : record);
-  emit();
+function create(options) {
+  const sileoOptions = toSileoOptions(options);
+  if (options.action) return import_sileo.sileo.action(sileoOptions);
+  if (options.variant === "success") return import_sileo.sileo.success(sileoOptions);
+  if (options.variant === "error") return import_sileo.sileo.error(sileoOptions);
+  if (options.variant === "warning") return import_sileo.sileo.warning(sileoOptions);
+  if (options.variant === "info") return import_sileo.sileo.info(sileoOptions);
+  return import_sileo.sileo.show(sileoOptions);
 }
 var toast = Object.assign((options) => create(options), {
   success: (title, options) => create({ ...options, title, variant: "success" }),
   error: (title, options) => create({ ...options, title, variant: "error" }),
   warning: (title, options) => create({ ...options, title, variant: "warning" }),
   info: (title, options) => create({ ...options, title, variant: "info" }),
-  dismiss,
+  dismiss: (id) => import_sileo.sileo.dismiss(id),
   promise: (promise, options) => {
-    const id = create({ title: options.loading, description: options.description, variant: "default", duration: 0, position: options.position });
-    promise.then((value) => update(id, { title: typeof options.success === "function" ? options.success(value) : options.success, variant: "success", duration: 4e3 })).catch((error) => update(id, { title: typeof options.error === "function" ? options.error(error) : options.error, variant: "error", duration: 6e3 }));
-    return promise;
+    const shared = { description: options.description, position: options.position };
+    return import_sileo.sileo.promise(promise, {
+      loading: { ...shared, title: options.loading },
+      success: (value) => ({ ...shared, title: typeof options.success === "function" ? options.success(value) : options.success }),
+      error: (error) => ({ ...shared, title: typeof options.error === "function" ? options.error(error) : options.error }),
+      position: options.position
+    });
   }
 });
 function useToast() {
@@ -2795,38 +2789,24 @@ function ToastProvider({ children }) {
     /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Toaster, {})
   ] });
 }
-var positionClasses = {
-  "top-left": "top-4 left-4 items-start",
-  "top-center": "top-4 left-1/2 -translate-x-1/2 items-center",
-  "top-right": "top-4 right-4 items-end",
-  "bottom-left": "bottom-4 left-4 items-start",
-  "bottom-center": "bottom-4 left-1/2 -translate-x-1/2 items-center",
-  "bottom-right": "bottom-4 right-4 items-end"
-};
-function Toaster({ position = "bottom-right" }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_jsx_runtime45.Fragment, { children: Object.keys(positionClasses).map((item) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ToastViewport, { position: item, visiblePosition: position }, item)) });
+function Toaster({ position }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_sileo.Toaster, { position });
 }
 function ToastViewport({ position, visiblePosition, className }) {
-  const toasts = (0, import_react12.useSyncExternalStore)(subscribe, snapshot, snapshot).filter((item) => item.position === position);
-  if (visiblePosition && position !== visiblePosition && toasts.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { "aria-label": `Notificaciones ${position}`, className: cn("pointer-events-none fixed z-50 flex w-[min(24rem,calc(100vw-2rem))] flex-col gap-2", positionClasses[position], className), children: toasts.map((item) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Toast, { ...item, onDismiss: () => dismiss(item.id) }, item.id)) });
+  void className;
+  if (visiblePosition && visiblePosition !== position) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Toaster, { position });
 }
-function Toast({ id, title, description, variant = "default", action, state = "open", duration = 0, onDismiss }) {
+function Toast({ id, title, description, variant = "default", action, state = "open", duration = 0, position, onDismiss }) {
   (0, import_react12.useEffect)(() => {
-    if (state !== "open" || duration <= 0) return;
-    const timeout = window.setTimeout(() => dismiss(id), duration);
-    return () => window.clearTimeout(timeout);
-  }, [duration, id, state]);
-  const Icon = variant === "success" ? import_lucide_react14.CheckCircle : variant === "error" ? import_lucide_react14.XCircle : variant === "warning" ? import_lucide_react14.CircleAlert : variant === "info" ? import_lucide_react14.Info : import_lucide_react14.Info;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { role: variant === "error" ? "alert" : "status", "data-state": state, className: cn("pointer-events-auto w-full overflow-hidden rounded-xl border border-border/80 bg-background/95 p-3.5 text-foreground shadow-xl shadow-black/10 backdrop-blur-md animate-ui-toast-in", "data-[state=closing]:animate-ui-toast-out motion-reduce:animate-none", variant === "success" && "border-success/30", variant === "error" && "border-destructive/30", variant === "warning" && "border-warning/40"), children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { "aria-hidden": "true", className: cn("mt-0.5 size-5 shrink-0", variant === "success" && "text-success", variant === "error" && "text-destructive", variant === "warning" && "text-warning", variant === "info" && "text-primary") }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "animate-ui-toast-title text-sm font-semibold", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "mt-1 max-h-20 animate-ui-toast-description overflow-hidden text-sm leading-5 text-muted-foreground data-[state=closing]:max-h-0", "data-state": state, children: description }),
-      action && /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { size: "sm", variant: "link", onPress: action.onPress, className: "mt-1 h-auto px-0", children: action.label })
-    ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Button, { "aria-label": "Cerrar notificaci\xF3n", onPress: onDismiss, size: "icon", variant: "ghost", className: "-mr-2 -mt-2 size-7", children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_lucide_react14.X, {}) })
-  ] }) });
+    if (state !== "open") return;
+    const toastId = create({ title, description, variant, action, duration, position });
+    return () => {
+      import_sileo.sileo.dismiss(toastId);
+      onDismiss?.();
+    };
+  }, [action, description, duration, id, onDismiss, position, state, title, variant]);
+  return null;
 }
 
 // src/ui/toolbar/toolbar.tsx