@doscientos/ui 0.1.12 → 0.1.13

package/dist/index.d.cts

@@ -566,13 +566,12 @@ type ToastPromiseOptions<T> = {
     description?: string;
     position?: ToastPosition;
 };
-declare function dismiss(id: string): void;
 declare const toast: ((options: ToastOptions) => string) & {
     success: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
     error: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
     warning: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
     info: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
-    dismiss: typeof dismiss;
+    dismiss: (id: string) => void;
     promise: <T>(promise: Promise<T>, options: ToastPromiseOptions<T>) => Promise<T>;
 };
 declare function useToast(): ((options: ToastOptions) => string) & {
@@ -580,7 +579,7 @@ declare function useToast(): ((options: ToastOptions) => string) & {
     error: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
     warning: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
     info: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
-    dismiss: typeof dismiss;
+    dismiss: (id: string) => void;
     promise: <T>(promise: Promise<T>, options: ToastPromiseOptions<T>) => Promise<T>;
 };
 declare function ToastProvider({ children }: {
@@ -594,9 +593,9 @@ declare function ToastViewport({ position, visiblePosition, className }: {
     visiblePosition?: ToastPosition;
     className?: string;
 }): React$1.JSX.Element | null;
-declare function Toast({ id, title, description, variant, action, state, duration, onDismiss }: ToastData & {
+declare function Toast({ id, title, description, variant, action, state, duration, position, onDismiss }: ToastData & {
     onDismiss?: () => void;
-}): React$1.JSX.Element;
+}): null;
 
 declare function Toolbar({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
 declare function ToolbarGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;

package/dist/index.d.ts

@@ -566,13 +566,12 @@ type ToastPromiseOptions<T> = {
     description?: string;
     position?: ToastPosition;
 };
-declare function dismiss(id: string): void;
 declare const toast: ((options: ToastOptions) => string) & {
     success: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
     error: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
     warning: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
     info: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
-    dismiss: typeof dismiss;
+    dismiss: (id: string) => void;
     promise: <T>(promise: Promise<T>, options: ToastPromiseOptions<T>) => Promise<T>;
 };
 declare function useToast(): ((options: ToastOptions) => string) & {
@@ -580,7 +579,7 @@ declare function useToast(): ((options: ToastOptions) => string) & {
     error: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
     warning: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
     info: (title: string, options?: Omit<ToastOptions, "title" | "variant">) => string;
-    dismiss: typeof dismiss;
+    dismiss: (id: string) => void;
     promise: <T>(promise: Promise<T>, options: ToastPromiseOptions<T>) => Promise<T>;
 };
 declare function ToastProvider({ children }: {
@@ -594,9 +593,9 @@ declare function ToastViewport({ position, visiblePosition, className }: {
     visiblePosition?: ToastPosition;
     className?: string;
 }): React$1.JSX.Element | null;
-declare function Toast({ id, title, description, variant, action, state, duration, onDismiss }: ToastData & {
+declare function Toast({ id, title, description, variant, action, state, duration, position, onDismiss }: ToastData & {
     onDismiss?: () => void;
-}): React$1.JSX.Element;
+}): null;
 
 declare function Toolbar({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;
 declare function ToolbarGroup({ className, ...props }: React$1.ComponentProps<"div">): React$1.JSX.Element;

package/dist/index.js

@@ -32,12 +32,12 @@ function useAutosave({
   }, []);
   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]);
@@ -2609,47 +2609,41 @@ function TabsContent({ className, ...props }) {
 }
 
 // src/ui/toast/toast.tsx
-import { useEffect as useEffect5, useSyncExternalStore } from "react";
-import { CheckCircle as CheckCircle2, Info, CircleAlert as CircleAlert2, XCircle, X as X3 } from "lucide-react";
+import { useEffect as useEffect5 } from "react";
+import { sileo, Toaster as SileoToaster } from "sileo";
 import { Fragment as Fragment11, jsx as jsx45, jsxs as jsxs21 } from "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 sileo.action(sileoOptions);
+  if (options.variant === "success") return sileo.success(sileoOptions);
+  if (options.variant === "error") return sileo.error(sileoOptions);
+  if (options.variant === "warning") return sileo.warning(sileoOptions);
+  if (options.variant === "info") return sileo.info(sileoOptions);
+  return 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) => 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 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() {
@@ -2661,38 +2655,24 @@ function ToastProvider({ children }) {
     /* @__PURE__ */ jsx45(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__ */ jsx45(Fragment11, { children: Object.keys(positionClasses).map((item) => /* @__PURE__ */ jsx45(ToastViewport, { position: item, visiblePosition: position }, item)) });
+function Toaster({ position }) {
+  return /* @__PURE__ */ jsx45(SileoToaster, { position });
 }
 function ToastViewport({ position, visiblePosition, className }) {
-  const toasts = useSyncExternalStore(subscribe, snapshot, snapshot).filter((item) => item.position === position);
-  if (visiblePosition && position !== visiblePosition && toasts.length === 0) return null;
-  return /* @__PURE__ */ jsx45("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__ */ jsx45(Toast, { ...item, onDismiss: () => dismiss(item.id) }, item.id)) });
+  void className;
+  if (visiblePosition && visiblePosition !== position) return null;
+  return /* @__PURE__ */ jsx45(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 }) {
   useEffect5(() => {
-    if (state !== "open" || duration <= 0) return;
-    const timeout = window.setTimeout(() => dismiss(id), duration);
-    return () => window.clearTimeout(timeout);
-  }, [duration, id, state]);
-  const Icon = variant === "success" ? CheckCircle2 : variant === "error" ? XCircle : variant === "warning" ? CircleAlert2 : variant === "info" ? Info : Info;
-  return /* @__PURE__ */ jsx45("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__ */ jsxs21("div", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ jsx45(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__ */ jsxs21("div", { className: "min-w-0 flex-1", children: [
-      /* @__PURE__ */ jsx45("p", { className: "animate-ui-toast-title text-sm font-semibold", children: title }),
-      description && /* @__PURE__ */ jsx45("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__ */ jsx45(Button, { size: "sm", variant: "link", onPress: action.onPress, className: "mt-1 h-auto px-0", children: action.label })
-    ] }),
-    /* @__PURE__ */ jsx45(Button, { "aria-label": "Cerrar notificaci\xF3n", onPress: onDismiss, size: "icon", variant: "ghost", className: "-mr-2 -mt-2 size-7", children: /* @__PURE__ */ jsx45(X3, {}) })
-  ] }) });
+    if (state !== "open") return;
+    const toastId = create({ title, description, variant, action, duration, position });
+    return () => {
+      sileo.dismiss(toastId);
+      onDismiss?.();
+    };
+  }, [action, description, duration, id, onDismiss, position, state, title, variant]);
+  return null;
 }
 
 // src/ui/toolbar/toolbar.tsx