@alexandregme/zljs 1.19.1 → 2.0.1

package/CHANGELOG.md

@@ -8,6 +8,39 @@ 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
+
+- Auxiliary colors `orange`, `pink` and `purple`, with the `AuxiliaryColor` type and the `--color-zl-<color>` and `--color-zl-<color>-strong` theme values. They have no meaning of their own and only `Tag` takes them
+- `TagColor` type, and `Tag` takes `primary`, `success`, `danger`, `warning`, `info` and `muted`
+- `removeLabel` on `Tag`, to name the remove button when several tags show at once. It defaults to `Remover`
+
+### Changed
+
+- `Tag` follows the `--color-zl-*` theme values: its background is the color at 15% and its text is the `-strong` value. Its default color is `primary`, no longer `blue`
+- The remove button of `Tag` takes the text color of the `Tag`, for its icon and its focus outline
+
+### Removed
+
+- The `blue`, `green`, `red`, `yellow` and `gray` colors of `Tag`. `orange` stays. `StatsCard` and `DataColor` keep them
+
+#### Migration
+
+Search the app for `<Tag` and read its props, which can sit on the next lines (`grep -rn -A3 "<Tag"`). Replace `color`: `blue` → `primary`, `green` → `success`, `red` → `danger`, `yellow` → `warning`, `gray` → `muted`. A variable typed `DataColor` that reaches a `Tag` becomes `TagColor`. A test that asserts `bg-*-100` or `text-*-700` on a `Tag` moves to `bg-zl-<color>/15` and `text-zl-<color>-strong`. Don't change `StatsCard`.
+
 ## [1.19.1] - 2026-11-03
 
 ### Changed
@@ -302,7 +335,9 @@ 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/v1.19.1...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
 [1.18.1]: https://github.com/alexandregme/zljs/compare/v1.18.0...v1.18.1

package/README.md

@@ -58,12 +58,14 @@ The components work with no setup, using the default colors. To use your own, re
 
 `primary`, `success`, `danger`, `warning`, `info` and `muted` each take one value (`--color-zl-<color>`), used for text and the focus outline. The others follow it, and you can redefine them too:
 
-| Value                       | Used for               | Default                                    |
-| --------------------------- | ---------------------- | ------------------------------------------ |
-| `--color-zl-<color>-strong` | Link hover             | 30% darker                                 |
-| `--color-zl-<color>-bg`     | Button background      | The color itself (`warning`: `yellow-500`) |
-| `--color-zl-<color>-hover`  | Button hover           | The background, 15% darker                 |
-| `--color-zl-<color>-on`     | Text on the background | White (`warning`: `gray-900`)              |
+| Value                       | Used for                | Default                                    |
+| --------------------------- | ----------------------- | ------------------------------------------ |
+| `--color-zl-<color>-strong` | Link hover and Tag text | 30% darker                                 |
+| `--color-zl-<color>-bg`     | Button background       | The color itself (`warning`: `yellow-500`) |
+| `--color-zl-<color>-hover`  | Button hover            | The background, 15% darker                 |
+| `--color-zl-<color>-on`     | Text on the background  | White (`warning`: `gray-900`)              |
+
+A `Tag` also takes the auxiliary colors `orange`, `pink` and `purple`, which have no meaning of their own: use them to tell categories apart. Each has only `--color-zl-<color>` and `--color-zl-<color>-strong`. The first, at 15%, is the `Tag` background, and the second is its text.
 
 Only the defaults are checked for contrast. Check your own choice: 4.5:1 for text, on `--color-zl-<color>` against the page and on `-on` against `-bg`, and 3:1 for the focus outline. A value set on a nested element doesn't reach the values derived from it, so set them in `@theme` or `:root`.
 

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.d.ts

@@ -1,6 +1,6 @@
 import * as react from 'react';
 import { ReactNode, ChangeEvent, FormEvent, HTMLInputAutoCompleteAttribute, FocusEvent, KeyboardEvent, Ref } from 'react';
-import { S as SemanticColor, D as DataColor, R as ReduxProviderProps } from './redux-provider.interface-BmROR8Ev.js';
+import { S as SemanticColor, D as DataColor, A as AuxiliaryColor, R as ReduxProviderProps } from './redux-provider.interface-DXOZKAMA.js';
 export { FormInput, FormInputProps, FormProvider, FormProviderProps } from './rhf/index.js';
 export { toast } from 'sonner';
 import * as zustand from 'zustand';
@@ -262,13 +262,15 @@ interface SidebarProps {
 
 declare const Sidebar: ({ sections, user, activeHref, defaultCollapsed, collapseLabel, homeHref, homeLabel, onLogout, }: SidebarProps) => react.JSX.Element;
 
+type TagColor = Exclude<SemanticColor, "none"> | AuxiliaryColor;
 interface TagProps {
     children: ReactNode;
-    color?: DataColor;
+    color?: TagColor;
     onRemove?: () => void;
+    removeLabel?: string;
 }
 
-declare const Tag: ({ children, color, onRemove }: TagProps) => react.JSX.Element;
+declare const Tag: ({ children, color, onRemove, removeLabel, }: TagProps) => react.JSX.Element;
 
 declare const Toaster: () => react.JSX.Element;
 
@@ -465,5 +467,5 @@ declare class HTTPClient {
     patch<T = unknown>(url: string, config?: HttpRequestConfig): Promise<T | undefined>;
 }
 
-export { Button, Checkbox, ConnectedModal, DataColor, DataGrid, Error, Form, HTTPClient, Heading, Icon, Input, Loader, Modal, Radio, ReduxProvider, ReduxProviderProps, Select, SemanticColor, Sidebar, Spinner, StatsCard, Tag, Text, TextArea, Toaster, WhatsAppButton, splitURLasPath, useAppStore, useModalStore, usePageStore, useRouterStore, useToastStore };
-export type { AppState, ButtonColor, ButtonProps, ButtonVariant, CheckboxProps, CheckboxVariant, ConnectedModalProps, DataGridColumn, DataGridProps, ErrorProps, FormProps, HeadingProps, HttpClientConfig, HttpRequestConfig, IconName, IconProps, InputProps, LoaderProps, ModalEntry, ModalProps, ModalState, PageState, RadioProps, ReduxStore, RouterState, SelectOption, SelectProps, SidebarItem, SidebarProps, SidebarSection, SidebarUser, Size, SpinnerProps, SpinnerVariant, StatsCardProps, TagProps, TextAreaProps, TextProps, TextVariant, Toast, ToastState, ToastType, WhatsAppButtonProps };
+export { AuxiliaryColor, Button, Checkbox, ConnectedModal, DataColor, DataGrid, Error, Form, HTTPClient, Heading, Icon, Input, Loader, Modal, Radio, ReduxProvider, ReduxProviderProps, Select, SemanticColor, Sidebar, Spinner, StatsCard, Tag, Text, TextArea, Toaster, WhatsAppButton, splitURLasPath, useAppStore, useModalStore, usePageStore, useRouterStore, useToastStore };
+export type { AppState, ButtonColor, ButtonProps, ButtonVariant, CheckboxProps, CheckboxVariant, ConnectedModalProps, DataGridColumn, DataGridProps, ErrorProps, FormProps, HeadingProps, HttpClientConfig, HttpRequestConfig, IconName, IconProps, InputProps, LoaderProps, ModalEntry, ModalProps, ModalState, PageState, RadioProps, ReduxStore, RouterState, SelectOption, SelectProps, SidebarItem, SidebarProps, SidebarSection, SidebarUser, Size, SpinnerProps, SpinnerVariant, StatsCardProps, TagColor, TagProps, TextAreaProps, TextProps, TextVariant, Toast, ToastState, ToastType, WhatsAppButtonProps };

package/dist/index.js

@@ -12,7 +12,7 @@ import {
   usePageStore,
   useRouterStore,
   useToastStore
-} from "./chunk-O6UAZGBC.js";
+} from "./chunk-5VIR5UAF.js";
 import {
   Error,
   FormInput,
@@ -502,25 +502,42 @@ var tag = tv7({
   base: "inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium",
   variants: {
     color: {
-      blue: "bg-blue-100 text-blue-700",
-      green: "bg-green-100 text-green-700",
-      red: "bg-red-100 text-red-700",
-      yellow: "bg-yellow-100 text-yellow-700",
-      gray: "bg-slate-100 text-slate-700",
-      orange: "bg-orange-100 text-orange-700"
+      primary: "bg-zl-primary/15 text-zl-primary-strong",
+      success: "bg-zl-success/15 text-zl-success-strong",
+      danger: "bg-zl-danger/15 text-zl-danger-strong",
+      warning: "bg-zl-warning/15 text-zl-warning-strong",
+      info: "bg-zl-info/15 text-zl-info-strong",
+      muted: "bg-zl-muted/15 text-zl-muted-strong",
+      orange: "bg-zl-orange/15 text-zl-orange-strong",
+      pink: "bg-zl-pink/15 text-zl-pink-strong",
+      purple: "bg-zl-purple/15 text-zl-purple-strong"
     }
   },
   defaultVariants: {
-    color: "blue"
+    color: "primary"
   }
 });
 
 // core/tag/tag.tsx
 import { jsx as jsx8, jsxs as jsxs7 } from "react/jsx-runtime";
-var Tag = ({ children, color = "blue", onRemove }) => {
+var Tag = ({
+  children,
+  color = "primary",
+  onRemove,
+  removeLabel = "Remover"
+}) => {
   return /* @__PURE__ */ jsxs7("span", { "data-testid": "tag", className: tag({ color }), children: [
     children,
-    onRemove && /* @__PURE__ */ jsx8(Button, { size: "sm", icon: "X", "aria-label": "Remover", onClick: onRemove })
+    onRemove && /* @__PURE__ */ jsx8(
+      Button,
+      {
+        color: "ghost",
+        size: "sm",
+        icon: "X",
+        "aria-label": removeLabel,
+        onClick: onRemove
+      }
+    )
   ] });
 };
 
@@ -564,7 +581,6 @@ var DataGridStatusBar = ({
         activeFilters.map((filter) => /* @__PURE__ */ jsxs8(
           Tag,
           {
-            color: "blue",
             onRemove: () => handleClearFilter(filter.column),
             children: [
               /* @__PURE__ */ jsxs8("span", { className: "font-medium", children: [

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/dist/{redux-provider.interface-BmROR8Ev.d.ts → redux-provider.interface-DXOZKAMA.d.ts}

@@ -9,6 +9,10 @@ type SemanticColor = "primary" | "success" | "danger" | "warning" | "info" | "mu
  * Literal colors for data visualization components (StatsCard, etc.)
  */
 type DataColor = "blue" | "red" | "yellow" | "green" | "gray" | "orange";
+/**
+ * Extra colors with no meaning of their own, to tell categories apart (Tag)
+ */
+type AuxiliaryColor = "orange" | "pink" | "purple";
 
 interface ReduxProviderProps {
     children: ReactNode;
@@ -18,4 +22,4 @@ interface ReduxProviderProps {
     coreReducers?: Record<string, Reducer>;
 }
 
-export type { DataColor as D, ReduxProviderProps as R, SemanticColor as S };
+export type { AuxiliaryColor as A, DataColor as D, ReduxProviderProps as R, SemanticColor as S };

package/dist/styles/colors.css

@@ -3,12 +3,17 @@
    the styles. Only the defaults are checked for contrast.
 
    Each color has five values, and the others follow the first unless redefined:
-     --color-zl-<color>         text and focus outline
-     --color-zl-<color>-strong  link hover
+     --color-zl-<color>         text, focus outline and tag background, at 15%
+     --color-zl-<color>-strong  link hover and tag text
      --color-zl-<color>-bg      button background
      --color-zl-<color>-hover   button hover
      --color-zl-<color>-on      text on the background
 
+   The auxiliary colors (orange, pink, purple) have no meaning of their own. Tag
+   is their only user, so they have two values:
+     --color-zl-<color>         tag background, at 15%
+     --color-zl-<color>-strong  tag text
+
    Prettier is off for this block to keep one value per line. */
 
 /* prettier-ignore */
@@ -54,4 +59,16 @@
   --color-zl-muted-bg:     var(--color-zl-muted);
   --color-zl-muted-hover:  color-mix(in oklab, var(--color-zl-muted-bg), black 15%);
   --color-zl-muted-on:     var(--color-white);
+
+  /* Orange */
+  --color-zl-orange:        var(--color-orange-700);
+  --color-zl-orange-strong: color-mix(in oklab, var(--color-zl-orange), black 30%);
+
+  /* Pink */
+  --color-zl-pink:        var(--color-pink-700);
+  --color-zl-pink-strong: color-mix(in oklab, var(--color-zl-pink), black 30%);
+
+  /* Purple */
+  --color-zl-purple:        var(--color-purple-700);
+  --color-zl-purple-strong: color-mix(in oklab, var(--color-zl-purple), black 30%);
 }

package/package.json

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