@samline/notify 0.2.7 → 1.0.0

package/dist/styles.css

@@ -1,89 +1,477 @@
-:root{
-  --sileo-bg: #0f1724;
-  --sileo-foreground: #ffffff;
-  --sileo-success: #16a34a;
-  --sileo-error: #ef4444;
-  --sileo-info: #2563eb;
-  --sileo-warning: #f59e0b;
-  --sileo-gap: 0.75rem;
-}
-
-.sileo-toaster{
-  position: fixed;
-  z-index: 9999;
-  display: flex;
-  flex-direction: column;
-  gap: var(--sileo-gap);
-  pointer-events: none;
-}
-
-.sileo-toaster[data-position="top-right"]{ top: 1rem; right: 1rem; align-items:flex-end; }
-.sileo-toaster[data-position="top-left"]{ top: 1rem; left: 1rem; align-items:flex-start; }
-.sileo-toaster[data-position="bottom-right"]{ bottom: 1rem; right: 1rem; align-items:flex-end; }
-.sileo-toaster[data-position="bottom-left"]{ bottom: 1rem; left: 1rem; align-items:flex-start; }
-
-/* Soporte para posiciones centradas */
-.sileo-toaster[data-position="top-center"] {
-  top: 1rem;
-  left: 50%;
-  transform: translateX(-50%);
-  align-items: center;
-}
-.sileo-toaster[data-position="bottom-center"] {
-  bottom: 1rem;
-  left: 50%;
-  transform: translateX(-50%);
-  align-items: center;
-}
-
-.sileo-toast{
-  pointer-events: auto;
-  min-width: 13.75rem;
-  max-width: 22.5rem;
-  background: var(--sileo-bg);
-  color: var(--sileo-foreground);
-  padding: 0.75rem 0.875rem;
-  border-radius: var(--sileo-roundness, 1rem);
-  box-shadow: 0 0.375rem 1.125rem rgba(2,6,23,0.6);
-  display: flex;
-  gap: 0.5rem;
-  align-items: center;
-  position: relative;
-  overflow: hidden;
-  /* Efecto gooey visual */
-  backdrop-filter: blur(6px) saturate(1.2);
-  filter: url(#sileo-gooey);
-}
-
-.sileo-toast[data-type="success"]{ border-left: 0.25rem solid var(--sileo-success); }
-.sileo-toast[data-type="error"]{ border-left: 0.25rem solid var(--sileo-error); }
-.sileo-toast[data-type="info"]{ border-left: 0.25rem solid var(--sileo-info); }
-.sileo-toast[data-type="warning"]{ border-left: 0.25rem solid var(--sileo-warning); }
-
-.sileo-toast-header{ font-weight: 600; font-size: 0.875rem; }
-
-/* Badge circular con blur y animación */
-.sileo-toast-badge {
-  width: 2.25rem;
-  height: 2.25rem;
-  min-width: 2.25rem;
-  min-height: 2.25rem;
-  border-radius: 50%;
-  background: rgba(255,255,255,0.08);
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin-right: 0.5rem;
-  box-shadow: 0 0 0.5rem 0.1rem rgba(0,0,0,0.10);
-  backdrop-filter: blur(2.5px);
-  animation: sileo-badge-pop 0.38s cubic-bezier(.22,1,.36,1) both;
-}
-
-@keyframes sileo-badge-pop {
-  0% { transform: scale(0.7); opacity: 0; }
-  60% { transform: scale(1.15); opacity: 1; }
-  100% { transform: scale(1); opacity: 1; }
-}
-.sileo-toast-desc{ font-size: 0.8125rem; opacity: 0.85; margin-top: 0.25rem; }
-.sileo-toast-btn{ margin-left: 0.5rem; background: transparent; color: inherit; border: 1px solid rgba(255,255,255,0.08); padding: 0.375rem 0.5rem; border-radius: 0.375rem; cursor: pointer; }
-.sileo-toast-close{ position: absolute; right: 0.5rem; top: 0.375rem; background: transparent; border: none; color: inherit; font-size: 1rem; cursor: pointer; }
+/* -------------------------------- Variables ------------------------------- */
+
+ :root {
+	--notify-spring-easing: linear(
+		0,
+		0.002 0.6%,
+		0.007 1.2%,
+		0.015 1.8%,
+		0.026 2.4%,
+		0.041 3.1%,
+		0.06 3.8%,
+		0.108 5.3%,
+		0.157 6.6%,
+		0.214 8%,
+		0.467 13.7%,
+		0.577 16.3%,
+		0.631 17.7%,
+		0.682 19.1%,
+		0.73 20.5%,
+		0.771 21.8%,
+		0.808 23.1%,
+		0.844 24.5%,
+		0.874 25.8%,
+		0.903 27.2%,
+		0.928 28.6%,
+		0.952 30.1%,
+		0.972 31.6%,
+		0.988 33.1%,
+		1.01 35.7%,
+		1.025 38.5%,
+		1.034 41.6%,
+		1.038 45%,
+		1.035 50.1%,
+		1.012 64.2%,
+		1.003 73%,
+		0.999 83.7%,
+		1
+	);
+
+    --notify-duration: 600ms;
+    --notify-height: 40px;
+    --notify-width: 350px;
+
+    --notify-state-success: oklch(0.723 0.219 142.136);
+    --notify-state-loading: oklch(0.556 0 0);
+    --notify-state-error: oklch(0.637 0.237 25.331);
+    --notify-state-warning: oklch(0.795 0.184 86.047);
+    --notify-state-info: oklch(0.685 0.169 237.323);
+    --notify-state-action: oklch(0.623 0.214 259.815);
+}
+
+/* ---------------------------------- Toast --------------------------------- */
+
+ [data-notify-toast] {
+	position: relative;
+	cursor: pointer;
+	pointer-events: auto;
+	touch-action: none;
+	border: 0;
+	background: transparent;
+	padding: 0;
+	width: var(--notify-width);
+	height: var(--_h, var(--notify-height));
+	opacity: 0;
+	transform: translateZ(0) scale(0.95);
+	transform-origin: center;
+	contain: layout style;
+	overflow: visible;
+}
+
+[data-notify-toast][data-state="loading"] {
+	cursor: default;
+}
+
+ [data-notify-toast][data-ready="true"] {
+	opacity: 1;
+	transform: translateZ(0) scale(1);
+	transition:
+		transform calc(var(--notify-duration) * 0.66) var(--notify-spring-easing),
+		opacity calc(var(--notify-duration) * 0.66) var(--notify-spring-easing),
+		margin-bottom calc(var(--notify-duration) * 0.66) var(--notify-spring-easing),
+		margin-top calc(var(--notify-duration) * 0.66) var(--notify-spring-easing),
+		height var(--notify-duration) var(--notify-spring-easing);
+}
+
+/* Entry animation direction */
+ [data-notify-viewport][data-position^="top"]
+	[data-notify-toast]:not([data-ready="true"]) {
+	transform: translateY(-6px) scale(0.95);
+}
+
+ [data-notify-viewport][data-position^="bottom"]
+	[data-notify-toast]:not([data-ready="true"]) {
+	transform: translateY(6px) scale(0.95);
+}
+
+/* Exit */
+ [data-notify-toast][data-ready="true"][data-exiting="true"] {
+	opacity: 0;
+	pointer-events: none;
+}
+
+ [data-notify-viewport][data-position^="top"]
+	[data-notify-toast][data-ready="true"][data-exiting="true"] {
+	transform: translateY(-6px) scale(0.95);
+}
+
+ [data-notify-viewport][data-position^="bottom"]
+	[data-notify-toast][data-ready="true"][data-exiting="true"] {
+	transform: translateY(6px) scale(0.95);
+}
+
+/* ------------------------------- SVG Canvas ------------------------------- */
+
+ [data-notify-canvas] {
+	position: absolute;
+	left: 0;
+	right: 0;
+	pointer-events: none;
+	transform: translateZ(0);
+	contain: layout style;
+	overflow: visible;
+}
+
+[data-sileo-canvas][data-edge="top"] {
+	bottom: 0;
+	transform: scaleY(-1) translateZ(0);
+}
+
+[data-sileo-canvas][data-edge="bottom"] {
+	top: 0;
+}
+
+ [data-notify-svg] {
+	overflow: visible;
+}
+
+/* --------------------------------- Shapes --------------------------------- */
+
+/* --------------------------------- Header --------------------------------- */
+
+ [data-notify-header] {
+	position: absolute;
+	z-index: 20;
+	display: flex;
+	align-items: center;
+	padding: 0.5rem;
+	height: var(--sileo-height);
+	overflow: hidden;
+	left: var(--_px, 0px);
+	transform: var(--_ht);
+	max-width: var(--_pw);
+}
+
+ [data-notify-toast][data-ready="true"] [data-notify-header] {
+	transition:
+		transform var(--sileo-duration) var(--sileo-spring-easing),
+		left var(--sileo-duration) var(--sileo-spring-easing),
+		max-width var(--sileo-duration) var(--sileo-spring-easing);
+}
+
+ [data-notify-header][data-edge="top"] {
+	bottom: 0;
+}
+
+ [data-notify-header][data-edge="bottom"] {
+	top: 0;
+}
+
+/* Header inner morphing */
+ [data-notify-header-stack] {
+	position: relative;
+	display: inline-flex;
+	align-items: center;
+	height: 100%;
+}
+
+ [data-notify-header-inner] {
+	display: flex;
+	align-items: center;
+	gap: 0.5rem;
+	white-space: nowrap;
+	opacity: 1;
+	filter: blur(0px);
+	transform: translateZ(0);
+}
+
+ [data-notify-header-inner][data-layer="current"] {
+	position: relative;
+	z-index: 1;
+	animation: sileo-header-enter var(--sileo-duration) var(--sileo-spring-easing)
+		both;
+}
+
+ [data-notify-header-inner][data-layer="current"]:not(:only-child),
+ [data-notify-header-inner][data-exiting="true"] {
+	will-change: opacity, filter;
+}
+
+ [data-notify-header-inner][data-layer="prev"] {
+	position: absolute;
+	left: 0;
+	top: 0;
+	z-index: 0;
+	pointer-events: none;
+}
+
+ [data-notify-header-inner][data-exiting="true"] {
+	animation: notify-header-exit calc(var(--notify-duration) * 0.7) ease forwards;
+}
+
+/* ---------------------------------- Badge --------------------------------- */
+
+ [data-notify-badge] {
+	display: flex;
+	height: 24px;
+	width: 24px;
+	flex-shrink: 0;
+	align-items: center;
+	justify-content: center;
+	padding: 2px;
+	box-sizing: border-box;
+	border-radius: 9999px;
+	color: var(--sileo-tone, currentColor);
+	background-color: var(--sileo-tone-bg, transparent);
+}
+
+/* ---------------------------------- Title --------------------------------- */
+
+ [data-notify-title] {
+	font-size: 0.825rem;
+	line-height: 1rem;
+	font-weight: 500;
+	text-transform: capitalize;
+	color: var(--sileo-tone, currentColor);
+}
+
+/* ------------------------------ State Colors ------------------------------ */
+
+ :is([data-notify-badge], [data-notify-title], [data-notify-button])[data-state] {
+	--_c: var(--notify-state-success);
+}
+
+ :is(
+		[data-notify-badge],
+		[data-notify-title],
+		[data-notify-button]
+	)[data-state="loading"] {
+	--_c: var(--notify-state-loading);
+}
+
+ :is(
+		[data-notify-badge],
+		[data-notify-title],
+		[data-notify-button]
+	)[data-state="error"] {
+	--_c: var(--notify-state-error);
+}
+
+ :is(
+		[data-notify-badge],
+		[data-notify-title],
+		[data-notify-button]
+	)[data-state="warning"] {
+	--_c: var(--notify-state-warning);
+}
+
+ :is(
+		[data-notify-badge],
+		[data-notify-title],
+		[data-notify-button]
+	)[data-state="info"] {
+	--_c: var(--notify-state-info);
+}
+
+ :is(
+		[data-notify-badge],
+		[data-notify-title],
+		[data-notify-button]
+	)[data-state="action"] {
+	--_c: var(--notify-state-action);
+}
+
+ :is([data-notify-badge], [data-notify-title])[data-state] {
+	--notify-tone: var(--_c);
+	--notify-tone-bg: color-mix(in oklch, var(--_c) 20%, transparent);
+}
+
+/* --------------------------------- Content -------------------------------- */
+
+ [data-notify-content] {
+	position: absolute;
+	left: 0;
+	z-index: 10;
+	width: 100%;
+	pointer-events: none;
+	opacity: var(--_co, 0);
+}
+
+ [data-notify-content]:not([data-visible="true"]) {
+	content-visibility: hidden;
+}
+
+ [data-notify-toast][data-ready="true"] [data-notify-content] {
+	transition: opacity calc(var(--notify-duration) * 0.08) ease
+		calc(var(--notify-duration) * 0.04);
+}
+
+ [data-notify-content][data-edge="top"] {
+	top: 0;
+}
+
+ [data-notify-content][data-edge="bottom"] {
+	top: var(--sileo-height);
+}
+
+ [data-notify-content][data-visible="true"] {
+	pointer-events: auto;
+}
+
+ [data-notify-toast][data-ready="true"]
+	[data-notify-content][data-visible="true"] {
+	transition: opacity calc(var(--notify-duration) * 0.6) ease
+		calc(var(--notify-duration) * 0.3);
+}
+
+ [data-notify-description] {
+	width: 100%;
+	text-align: left;
+	padding: 1rem;
+	font-size: 0.875rem;
+	line-height: 1.25rem;
+	contain: layout style paint;
+	content-visibility: auto;
+}
+
+/* --------------------------------- Button --------------------------------- */
+
+ [data-notify-button] {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	height: 1.75rem;
+	padding: 0 0.625rem;
+	margin-top: 0.75rem;
+	border-radius: 9999px;
+	border: 0;
+	font-size: 0.75rem;
+	font-weight: 500;
+	cursor: pointer;
+	color: var(--sileo-btn-color, currentColor);
+	background-color: var(--sileo-btn-bg, transparent);
+	transition: background-color 150ms ease;
+}
+
+ [data-notify-button]:hover {
+	background-color: var(--sileo-btn-bg-hover, transparent);
+}
+
+ [data-notify-button][data-state] {
+	--notify-btn-color: var(--_c);
+	--notify-btn-bg: color-mix(in oklch, var(--_c) 15%, transparent);
+	--notify-btn-bg-hover: color-mix(in oklch, var(--_c) 25%, transparent);
+}
+
+/* -------------------------------- Animations ------------------------------ */
+
+ [data-notify-icon="spin"] {
+	animation: notify-spin 1s linear infinite;
+}
+
+@keyframes notify-spin {
+	to {
+		transform: rotate(360deg);
+	}
+}
+
+@keyframes notify-header-enter {
+	from {
+		opacity: 0;
+		filter: blur(6px);
+	}
+	to {
+		opacity: 1;
+		filter: blur(0px);
+	}
+}
+
+@keyframes notify-header-exit {
+	from {
+		opacity: 1;
+		filter: blur(0px);
+	}
+	to {
+		opacity: 0;
+		filter: blur(6px);
+	}
+}
+
+/* -------------------------------- Viewports ------------------------------- */
+
+ [data-notify-viewport] {
+	position: fixed;
+	z-index: 50;
+	display: flex;
+	gap: 0.75rem;
+	padding: 0.75rem;
+	pointer-events: none;
+	max-width: calc(100vw - 1.5rem);
+	contain: layout style;
+}
+
+ [data-notify-viewport][data-position^="top"]
+	[data-notify-toast]:not([data-ready="true"]) {
+	margin-bottom: calc(-1 * (var(--notify-height) + 0.75rem));
+}
+
+ [data-notify-viewport][data-position^="bottom"]
+	[data-notify-toast]:not([data-ready="true"]) {
+	margin-top: calc(-1 * (var(--notify-height) + 0.75rem));
+}
+
+/* Vertical edge */
+ [data-notify-viewport][data-position^="top"] {
+	top: 0;
+	flex-direction: column-reverse;
+}
+
+ [data-notify-viewport][data-position^="bottom"] {
+	bottom: 0;
+	flex-direction: column;
+}
+
+/* Horizontal alignment */
+ [data-notify-viewport][data-position$="left"] {
+	left: 0;
+	align-items: flex-start;
+}
+
+ [data-notify-viewport][data-position$="right"] {
+	right: 0;
+	align-items: flex-end;
+}
+
+ [data-notify-viewport][data-position$="center"] {
+	left: 50%;
+	transform: translateX(-50%);
+	align-items: center;
+}
+
+@media (prefers-reduced-motion: no-preference) {
+	[data-notify-toast][data-ready="true"]:hover,
+	[data-notify-toast][data-ready="true"][data-exiting="true"] {
+		will-change: transform, opacity, height;
+	}
+}
+
+@media (prefers-reduced-motion: reduce) {
+	[data-notify-viewport],
+	[data-notify-viewport] *,
+	[data-notify-viewport] *::before,
+	[data-notify-viewport] *::after {
+		animation-duration: 0.01ms;
+		animation-iteration-count: 1;
+		transition-duration: 0.01ms;
+	}
+}
+
+/* --------------------------------- Themes -------------------------------- */
+
+[data-notify-viewport][data-theme="dark"] [data-notify-description] {
+	color: rgba(0, 0, 0, 0.5);
+}
+
+[data-notify-viewport][data-theme="light"] [data-notify-description] {
+	color: rgba(255, 255, 255, 0.5);
+}

package/dist/svelte.d.mts

@@ -0,0 +1,45 @@
+import * as svelte_store from 'svelte/store';
+
+type NotifyState = "success" | "loading" | "error" | "warning" | "info" | "action";
+interface NotifyStyles {
+    title?: string;
+    description?: string;
+    badge?: string;
+    button?: string;
+}
+interface NotifyButton {
+    title: string;
+    onClick: () => void;
+}
+declare const NOTIFY_POSITIONS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
+type NotifyPosition = (typeof NOTIFY_POSITIONS)[number];
+interface NotifyOptions {
+    title?: string;
+    description?: string;
+    type?: NotifyState;
+    position?: NotifyPosition;
+    duration?: number | null;
+    icon?: any;
+    styles?: NotifyStyles;
+    fill?: string;
+    roundness?: number;
+    autopilot?: boolean | {
+        expand?: number;
+        collapse?: number;
+    };
+    button?: NotifyButton;
+}
+
+interface NotifyItem extends NotifyOptions {
+    id: string;
+    instanceId: string;
+    exiting?: boolean;
+    autoExpandDelayMs?: number;
+    autoCollapseDelayMs?: number;
+}
+
+declare const notifyToasts: svelte_store.Writable<NotifyItem[]>;
+declare function showNotifyToast(options: NotifyOptions): string;
+
+export { notifyToasts, showNotifyToast };
+//# sourceMappingURL=svelte.d.mts.map

package/dist/svelte.d.mts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte.d.mts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/svelte-notify.ts"],"mappings":";;AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACLA,cAAc,YAAY,EAAE,YAAY,CAAC,QAAQ,CAACA,UAA6B;AAC/E,iBAAiB,eAAe,UAAU,aAAa;;;;","names":["__core_notify_core.NotifyItem"]}

package/dist/svelte.d.ts

@@ -0,0 +1,45 @@
+import * as svelte_store from 'svelte/store';
+
+type NotifyState = "success" | "loading" | "error" | "warning" | "info" | "action";
+interface NotifyStyles {
+    title?: string;
+    description?: string;
+    badge?: string;
+    button?: string;
+}
+interface NotifyButton {
+    title: string;
+    onClick: () => void;
+}
+declare const NOTIFY_POSITIONS: readonly ["top-left", "top-center", "top-right", "bottom-left", "bottom-center", "bottom-right"];
+type NotifyPosition = (typeof NOTIFY_POSITIONS)[number];
+interface NotifyOptions {
+    title?: string;
+    description?: string;
+    type?: NotifyState;
+    position?: NotifyPosition;
+    duration?: number | null;
+    icon?: any;
+    styles?: NotifyStyles;
+    fill?: string;
+    roundness?: number;
+    autopilot?: boolean | {
+        expand?: number;
+        collapse?: number;
+    };
+    button?: NotifyButton;
+}
+
+interface NotifyItem extends NotifyOptions {
+    id: string;
+    instanceId: string;
+    exiting?: boolean;
+    autoExpandDelayMs?: number;
+    autoCollapseDelayMs?: number;
+}
+
+declare const notifyToasts: svelte_store.Writable<NotifyItem[]>;
+declare function showNotifyToast(options: NotifyOptions): string;
+
+export { notifyToasts, showNotifyToast };
+//# sourceMappingURL=svelte.d.ts.map

package/dist/svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"svelte.d.ts","sources":["../src/types.ts","../src/core/notify-core.ts","../src/svelte-notify.ts"],"mappings":";;AAAA,KAAK,WAAW;AAChB,UAAU,YAAY;AACtB;AACA;AACA;AACA;AACA;AACA,UAAU,YAAY;AACtB;AACA;AACA;AACA,cAAc,gBAAgB;AAC9B,KAAK,cAAc,WAAW,gBAAgB;AAC9C,UAAU,aAAa;AACvB;AACA;AACA,WAAW,WAAW;AACtB,eAAe,cAAc;AAC7B;AACA;AACA,aAAa,YAAY;AACzB;AACA;AACA;AACA;AACA;AACA;AACA,aAAa,YAAY;AACzB;;AC1BA,UAAU,UAAU,SAAS,aAAa;AAC1C;AACA;AACA;AACA;AACA;AACA;;ACLA,cAAc,YAAY,EAAE,YAAY,CAAC,QAAQ,CAACA,UAA6B;AAC/E,iBAAiB,eAAe,UAAU,aAAa;;;;","names":["__core_notify_core.NotifyItem"]}