@alexandregme/zljs 2.0.0 → 2.0.1

package/CHANGELOG.md

@@ -8,6 +8,18 @@ A change that needs action in an app has a **Migration** note. When updating, re
 
 ## [Unreleased]
 
+## [2.0.1] - 2026-11-03
+
+### Changed
+
+- The colored toasts of `Toaster` follow the `--color-zl-*` theme values: the text is the `-strong` value, the background is the color at 15% over white and the border is the color at 30%. `error` uses `danger`
+
+### Fixed
+
+- `Toaster` holds 4.5:1 on the text of each toast type. The rich colors of Sonner stayed under it on their light backgrounds
+- A toast from `useToastStore` no longer replaces a toast from `toast()` that is showing. Both numbered their toasts from 1
+- A toast and its close button draw a real focus outline in the text color. Their `box-shadow` ring was about 1.6:1 and disappeared in forced colors mode
+
 ## [2.0.0] - 2026-11-03
 
 ### Added
@@ -323,7 +335,8 @@ Replace the shade with the class of the `color` being tested, for example `/(^|\
 
 The message of `Error` is `text-zl-danger`. `none` and `ghost` didn't change.
 
-[Unreleased]: https://github.com/alexandregme/zljs/compare/v2.0.0...HEAD
+[Unreleased]: https://github.com/alexandregme/zljs/compare/v2.0.1...HEAD
+[2.0.1]: https://github.com/alexandregme/zljs/compare/v2.0.0...v2.0.1
 [2.0.0]: https://github.com/alexandregme/zljs/compare/v1.19.1...v2.0.0
 [1.19.1]: https://github.com/alexandregme/zljs/compare/v1.19.0...v1.19.1
 [1.19.0]: https://github.com/alexandregme/zljs/compare/v1.18.1...v1.19.0

package/dist/{chunk-O6UAZGBC.js → chunk-5VIR5UAF.js}

@@ -166,16 +166,40 @@ var useToastStore = create()(
 // core/toaster/toaster.tsx
 import { useEffect } from "react";
 import { Toaster as SonnerToaster, toast } from "sonner";
+
+// core/toaster/toaster.styles.ts
+import { tv as tv4 } from "tailwind-variants";
+var focusOutline = "focus-visible:outline-2! focus-visible:outline-offset-2! focus-visible:outline-current!";
+var toaster = tv4({
+  slots: {
+    toast: focusOutline,
+    closeButton: focusOutline
+  }
+});
+var toasterColors = {
+  "--success-text": "var(--color-zl-success-strong)",
+  "--success-bg": "color-mix(in oklab, var(--color-zl-success) 15%, white)",
+  "--success-border": "color-mix(in oklab, var(--color-zl-success) 30%, white)",
+  "--info-text": "var(--color-zl-info-strong)",
+  "--info-bg": "color-mix(in oklab, var(--color-zl-info) 15%, white)",
+  "--info-border": "color-mix(in oklab, var(--color-zl-info) 30%, white)",
+  "--warning-text": "var(--color-zl-warning-strong)",
+  "--warning-bg": "color-mix(in oklab, var(--color-zl-warning) 15%, white)",
+  "--warning-border": "color-mix(in oklab, var(--color-zl-warning) 30%, white)",
+  "--error-text": "var(--color-zl-danger-strong)",
+  "--error-bg": "color-mix(in oklab, var(--color-zl-danger) 15%, white)",
+  "--error-border": "color-mix(in oklab, var(--color-zl-danger) 30%, white)"
+};
+
+// core/toaster/toaster.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";
 var Toaster = () => {
   const toasts = useToastStore((s) => s.toasts);
   const removeToast = useToastStore((s) => s.removeToast);
+  const { toast: toastStyles, closeButton } = toaster();
   useEffect(() => {
     toasts.forEach((t) => {
-      toast[t.type](t.message, {
-        id: t.id,
-        onDismiss: () => removeToast(t.id)
-      });
+      toast[t.type](t.message, { id: `store-${t.id}` });
       removeToast(t.id);
     });
   }, [toasts, removeToast]);
@@ -187,7 +211,11 @@ var Toaster = () => {
       closeButton: true,
       duration: 4e3,
       expand: true,
-      visibleToasts: 5
+      visibleToasts: 5,
+      style: toasterColors,
+      toastOptions: {
+        classNames: { toast: toastStyles(), closeButton: closeButton() }
+      }
     }
   );
 };
@@ -350,8 +378,8 @@ var spinnerIcons = {
 };
 
 // core/spinner/spinner.styles.ts
-import { tv as tv4 } from "tailwind-variants";
-var spinner = tv4({
+import { tv as tv5 } from "tailwind-variants";
+var spinner = tv5({
   base: "inline-flex animate-spin"
 });
 
@@ -373,8 +401,8 @@ var Spinner = ({
 );
 
 // core/loader/loader.styles.ts
-import { tv as tv5 } from "tailwind-variants";
-var loader = tv5({
+import { tv as tv6 } from "tailwind-variants";
+var loader = tv6({
   base: "flex fixed inset-0 justify-center items-center bg-black/20 text-zl-primary z-50"
 });
 

package/dist/index.js

@@ -12,7 +12,7 @@ import {
   usePageStore,
   useRouterStore,
   useToastStore
-} from "./chunk-O6UAZGBC.js";
+} from "./chunk-5VIR5UAF.js";
 import {
   Error,
   FormInput,

package/dist/next/index.js

@@ -7,7 +7,7 @@ import {
   Toaster,
   usePageStore,
   useRouterStore
-} from "../chunk-O6UAZGBC.js";
+} from "../chunk-5VIR5UAF.js";
 
 // core/next/root-layout/root-layout.styles.ts
 import { tv } from "tailwind-variants";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@alexandregme/zljs",
-  "version": "2.0.0",
+  "version": "2.0.1",
   "description": "Opinionated, accessible React component library for enterprise apps (Next.js, Tailwind CSS v4).",
   "keywords": [
     "react",