@alexandregme/zljs 1.18.0 → 1.19.0

package/CHANGELOG.md

@@ -8,6 +8,39 @@ A change that needs action in an app has a **Migration** note. When updating, re
 
 ## [Unreleased]
 
+## [1.19.0] - 2026-11-02
+
+### Added
+
+- `label` on `Spinner`: the name screen readers announce, `Loading` by default
+
+### Changed
+
+- `Spinner` is a status with a name (`role="status"`) and has no color of its own. It was always white, and now inherits the color from around it
+- `Loader` draws its spinner in the `primary` color, which holds 3:1 over the overlay on a white page. It was white, at 1.6:1. The `status` role moved from the overlay to the spinner, which takes the `label`
+
+#### Migration
+
+Search the app for `<Spinner`. On a dark surface, set a light text color around it, such as `text-white`. Remove a `role="status"` the app put around a `Spinner`, so there aren't two. `Loader` needs no change.
+
+### Fixed
+
+- `Loader` covers the whole page. It had no position of its own, so it started where it was rendered, below anything before it
+
+## [1.18.1] - 2026-11-02
+
+### Removed
+
+- Parameters in the hash, in `splitURLasPath` and the `query` of `useRouterStore`: `/orders#id=7` now returns `{}`
+
+#### Migration
+
+Search the app for `splitURLasPath` and `setRoute`. A URL with its parameters after `#` now reads them from `window.location.hash`.
+
+### Fixed
+
+- `splitURLasPath` and the `query` of `useRouterStore` lost the query when the URL also had a hash: `/orders?id=7#top` returned `{ top: "" }` and now returns `{ id: "7" }`
+
 ## [1.18.0] - 2026-11-02
 
 ### Added
@@ -249,7 +282,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.18.0...HEAD
+[Unreleased]: https://github.com/alexandregme/zljs/compare/v1.19.0...HEAD
+[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
 [1.18.0]: https://github.com/alexandregme/zljs/compare/v1.17.0...v1.18.0
 [1.17.0]: https://github.com/alexandregme/zljs/compare/v1.16.0...v1.17.0
 [1.16.0]: https://github.com/alexandregme/zljs/compare/v1.15.0...v1.16.0

package/dist/{chunk-BYW2ZJKS.js → chunk-O6UAZGBC.js}

@@ -124,14 +124,22 @@ var Heading = ({ children, level = 1, color }) => {
   return /* @__PURE__ */ jsx3(Tag, { className: heading({ level, color }), children });
 };
 
-// core/state/toast/toast.store.ts
+// core/state/zustand/toast/toast.store.ts
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
+
+// core/state/zustand/toast/toast.const.ts
+var toastInitialState = {
+  toasts: []
+};
+var toastDevtools = { name: "zljs", store: "toast" };
+
+// core/state/zustand/toast/toast.store.ts
 var toastId = 0;
 var useToastStore = create()(
   devtools(
     (set, get) => ({
-      toasts: [],
+      ...toastInitialState,
       addToast: (message, type = "error") => {
         const id = ++toastId;
         set(
@@ -151,7 +159,7 @@ var useToastStore = create()(
       info: (message) => get().addToast(message, "info"),
       warning: (message) => get().addToast(message, "warning")
     }),
-    { name: "zljs", store: "toast" }
+    toastDevtools
   )
 );
 
@@ -187,14 +195,22 @@ var Toaster = () => {
 // core/toaster/index.ts
 import { toast as toast2 } from "sonner";
 
-// core/state/app/app.store.ts
+// core/state/zustand/app/app.store.ts
 import { create as create2 } from "zustand";
 import { devtools as devtools2 } from "zustand/middleware";
+
+// core/state/zustand/app/app.const.ts
+var appInitialState = {
+  fetchingCalls: 0,
+  fetching: false
+};
+var appDevtools = { name: "zljs", store: "app" };
+
+// core/state/zustand/app/app.store.ts
 var useAppStore = create2()(
   devtools2(
     (set) => ({
-      fetchingCalls: 0,
-      fetching: false,
+      ...appInitialState,
       startFetching: () => set(
         (s) => {
           const fetchingCalls = s.fetchingCalls + 1;
@@ -212,15 +228,15 @@ var useAppStore = create2()(
         "finishFetching"
       )
     }),
-    { name: "zljs", store: "app" }
+    appDevtools
   )
 );
 
-// core/redux/redux-provider/redux-provider.tsx
+// core/state/redux/redux-provider/redux-provider.tsx
 import { useState } from "react";
 import { Provider } from "react-redux";
 
-// core/redux/store/store.ts
+// core/state/redux/store/store.ts
 import {
   combineReducers,
   configureStore
@@ -249,7 +265,7 @@ var createReduxStore = ({
   return store;
 };
 
-// core/redux/redux-provider/redux-provider.tsx
+// core/state/redux/redux-provider/redux-provider.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
 var ReduxProvider = ({
   children,
@@ -269,53 +285,60 @@ var ReduxProvider = ({
   return /* @__PURE__ */ jsx5(Provider, { store, children });
 };
 
-// core/state/router/router.utils.ts
+// core/state/zustand/router/router.utils.ts
 var splitURLasPath = (urlAsPath) => {
-  let queryWithoutPath = "";
-  if (urlAsPath?.indexOf("?") >= 0) {
-    const [, query] = urlAsPath.split("?");
-    queryWithoutPath = query ?? "";
-  }
-  if (urlAsPath?.indexOf("#") >= 0) {
-    const [, query] = urlAsPath.split("#");
-    queryWithoutPath = query ?? "";
-  }
+  const [pathAndQuery = ""] = urlAsPath?.split("#") ?? [];
+  const [, query = ""] = pathAndQuery.split("?");
   const parametersAsObject = {};
-  if (queryWithoutPath.length > 0) {
-    queryWithoutPath.split("&").forEach((p) => {
-      const [parameter, value] = p.split("=");
-      if (parameter) {
-        parametersAsObject[parameter] = value ?? "";
-      }
-    });
-  }
+  query.split("&").forEach((p) => {
+    const [parameter, value] = p.split("=");
+    if (parameter) {
+      parametersAsObject[parameter] = value ?? "";
+    }
+  });
   return parametersAsObject;
 };
 
-// core/state/router/router.store.ts
+// core/state/zustand/router/router.store.ts
 import { create as create3 } from "zustand";
 import { devtools as devtools3 } from "zustand/middleware";
+
+// core/state/zustand/router/router.const.ts
+var routerInitialState = {
+  urlAsPath: "/",
+  query: {}
+};
+var routerDevtools = { name: "zljs", store: "router" };
+
+// core/state/zustand/router/router.store.ts
 var useRouterStore = create3()(
   devtools3(
     (set) => ({
-      urlAsPath: "/",
-      query: {},
+      ...routerInitialState,
       setRoute: (urlAsPath) => set({ urlAsPath, query: splitURLasPath(urlAsPath) }, false, "setRoute")
     }),
-    { name: "zljs", store: "router" }
+    routerDevtools
   )
 );
 
-// core/state/page/page.store.ts
+// core/state/zustand/page/page.store.ts
 import { create as create4 } from "zustand";
 import { devtools as devtools4 } from "zustand/middleware";
+
+// core/state/zustand/page/page.const.ts
+var pageInitialState = {
+  title: ""
+};
+var pageDevtools = { name: "zljs", store: "page" };
+
+// core/state/zustand/page/page.store.ts
 var usePageStore = create4()(
   devtools4(
     (set) => ({
-      title: "",
+      ...pageInitialState,
       setTitle: (title) => set({ title }, false, "setTitle")
     }),
-    { name: "zljs", store: "page" }
+    pageDevtools
   )
 );
 
@@ -329,17 +352,30 @@ var spinnerIcons = {
 // core/spinner/spinner.styles.ts
 import { tv as tv4 } from "tailwind-variants";
 var spinner = tv4({
-  base: "inline-flex animate-spin text-white"
+  base: "inline-flex animate-spin"
 });
 
 // core/spinner/spinner.tsx
 import { jsx as jsx6 } from "react/jsx-runtime";
-var Spinner = ({ variant = "circle", size = "md" }) => /* @__PURE__ */ jsx6("span", { "data-testid": "spinner", className: spinner(), children: /* @__PURE__ */ jsx6(Icon, { name: spinnerIcons[variant], size }) });
+var Spinner = ({
+  variant = "circle",
+  size = "md",
+  label = "Loading"
+}) => /* @__PURE__ */ jsx6(
+  "span",
+  {
+    "data-testid": "spinner",
+    role: "status",
+    "aria-label": label,
+    className: spinner(),
+    children: /* @__PURE__ */ jsx6(Icon, { name: spinnerIcons[variant], size })
+  }
+);
 
 // core/loader/loader.styles.ts
 import { tv as tv5 } from "tailwind-variants";
-var overlay = tv5({
-  base: "flex fixed justify-center items-center w-full h-full bg-black/20 z-50"
+var loader = tv5({
+  base: "flex fixed inset-0 justify-center items-center bg-black/20 text-zl-primary z-50"
 });
 
 // core/loader/loader.tsx
@@ -347,7 +383,7 @@ import { jsx as jsx7 } from "react/jsx-runtime";
 var Loader = ({ label = "Loading" }) => {
   const fetching = useAppStore((s) => s.fetching);
   if (!fetching) return null;
-  return /* @__PURE__ */ jsx7("div", { role: "status", "aria-label": label, className: overlay(), children: /* @__PURE__ */ jsx7(Spinner, { size: "lg" }) });
+  return /* @__PURE__ */ jsx7("div", { className: loader(), children: /* @__PURE__ */ jsx7(Spinner, { size: "lg", label }) });
 };
 
 export {

package/dist/index.d.ts

@@ -431,9 +431,10 @@ type SpinnerVariant = "circle" | "dots" | "refresh";
 interface SpinnerProps {
     variant?: SpinnerVariant;
     size?: Size;
+    label?: string;
 }
 
-declare const Spinner: ({ variant, size }: SpinnerProps) => react.JSX.Element;
+declare const Spinner: ({ variant, size, label, }: SpinnerProps) => react.JSX.Element;
 
 interface LoaderProps {
     label?: string;

package/dist/index.js

@@ -12,7 +12,7 @@ import {
   usePageStore,
   useRouterStore,
   useToastStore
-} from "./chunk-BYW2ZJKS.js";
+} from "./chunk-O6UAZGBC.js";
 import {
   Error,
   FormInput,
@@ -977,13 +977,21 @@ var Sidebar = ({
 // core/index.ts
 import { toast } from "sonner";
 
-// core/state/modal/modal.store.ts
+// core/state/zustand/modal/modal.store.ts
 import { create } from "zustand";
 import { devtools } from "zustand/middleware";
+
+// core/state/zustand/modal/modal.const.ts
+var modalInitialState = {
+  modals: []
+};
+var modalDevtools = { name: "zljs", store: "modal" };
+
+// core/state/zustand/modal/modal.store.ts
 var useModalStore = create()(
   devtools(
     (set, get) => ({
-      modals: [],
+      ...modalInitialState,
       openModal: (name) => set((s) => ({ modals: [...s.modals, { name }] }), false, "openModal"),
       openModalWithPayload: (name, payload) => set(
         (s) => ({ modals: [...s.modals, { name, payload }] }),
@@ -998,7 +1006,7 @@ var useModalStore = create()(
       isOpen: (name) => get().modals.some((m) => m.name === name),
       getPayload: (name) => get().modals.find((m) => m.name === name)?.payload
     }),
-    { name: "zljs", store: "modal" }
+    modalDevtools
   )
 );
 

package/dist/next/index.js

@@ -7,7 +7,7 @@ import {
   Toaster,
   usePageStore,
   useRouterStore
-} from "../chunk-BYW2ZJKS.js";
+} from "../chunk-O6UAZGBC.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": "1.18.0",
+  "version": "1.19.0",
   "description": "Opinionated, accessible React component library for enterprise apps (Next.js, Tailwind CSS v4).",
   "keywords": [
     "react",