@alexandregme/zljs 1.14.0 → 1.16.0

package/CHANGELOG.md

@@ -8,6 +8,29 @@ A change that needs action in an app has a **Migration** note. When updating, re
 
 ## [Unreleased]
 
+## [1.16.0] - 2026-11-02
+
+### Added
+
+- `Link` in `@alexandregme/zljs/next`: navigates with `next/link` and takes `children`, `href` and `color`, with the `SemanticColor` values. It is always underlined, inherits the font size around it and has a 44px touch target, so keep at least 20px between stacked links
+- `NotFound` takes `backLabel`. "Go back home" was fixed, so an app in another language couldn't translate it
+
+### Changed
+
+- `RootLayout` takes the height of the visible screen, with `min-h-dvh` instead of `min-h-screen`, so it doesn't scroll on a phone
+- `NotFound` is built with `Heading`, `Text` and `Link`: the title goes from `text-2xl` semibold to `text-3xl` bold, the message uses the theme's `muted`, and the link follows the theme and is always underlined. It navigates with `next/link` instead of reloading the page
+- `NotFound` takes the height of the visible screen, with `min-h-dvh` instead of `min-h-screen`, so it doesn't scroll on a phone
+
+### Fixed
+
+- The `404` of `NotFound` had 1.47:1 contrast on white with `text-gray-300`. It now uses the theme's `muted`, which is 4.84:1
+
+## [1.15.0] - 2026-11-02
+
+### Added
+
+- `Icon` takes `color`, with the same `SemanticColor` values as `Text` and `Heading`. With no `color`, or with `none`, it still inherits the color around it
+
 ## [1.14.0] - 2026-11-02
 
 ### Changed
@@ -184,7 +207,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.14.0...HEAD
+[Unreleased]: https://github.com/alexandregme/zljs/compare/v1.16.0...HEAD
+[1.16.0]: https://github.com/alexandregme/zljs/compare/v1.15.0...v1.16.0
+[1.15.0]: https://github.com/alexandregme/zljs/compare/v1.14.0...v1.15.0
 [1.14.0]: https://github.com/alexandregme/zljs/compare/v1.13.0...v1.14.0
 [1.13.0]: https://github.com/alexandregme/zljs/compare/v1.12.0...v1.13.0
 [1.12.0]: https://github.com/alexandregme/zljs/compare/v1.11.0...v1.12.0

package/dist/chunk-CXA5QIHP.js

@@ -0,0 +1,83 @@
+"use client";
+
+// core/text/text.styles.ts
+import { tv } from "tailwind-variants";
+
+// core/types/colors/colors.const.ts
+var semanticTextColors = {
+  primary: "text-zl-primary",
+  success: "text-zl-success",
+  danger: "text-zl-danger",
+  warning: "text-zl-warning",
+  info: "text-zl-info",
+  muted: "text-zl-muted",
+  none: ""
+};
+
+// core/text/text.styles.ts
+var text = tv({
+  variants: {
+    variant: {
+      body: "text-base",
+      caption: "text-sm",
+      display: "text-3xl font-bold"
+    },
+    color: semanticTextColors
+  },
+  defaultVariants: {
+    variant: "body"
+  }
+});
+
+// core/text/text.tsx
+import { jsx } from "react/jsx-runtime";
+var Text = ({
+  children,
+  as: Tag = "p",
+  variant = "body",
+  color
+}) => {
+  return /* @__PURE__ */ jsx(Tag, { "data-testid": "text", className: text({ variant, color }), children });
+};
+
+// core/heading/heading.const.ts
+var headingTags = {
+  1: "h1",
+  2: "h2",
+  3: "h3",
+  4: "h4",
+  5: "h5",
+  6: "h6"
+};
+
+// core/heading/heading.styles.ts
+import { tv as tv2 } from "tailwind-variants";
+var heading = tv2({
+  variants: {
+    level: {
+      1: "text-3xl font-bold",
+      2: "text-2xl font-bold",
+      3: "text-xl font-semibold",
+      4: "text-lg font-semibold",
+      5: "text-base font-medium",
+      6: "text-sm font-medium"
+    },
+    color: semanticTextColors
+  },
+  defaultVariants: {
+    level: 1
+  }
+});
+
+// core/heading/heading.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Heading = ({ children, level = 1, color }) => {
+  const Tag = headingTags[level];
+  return /* @__PURE__ */ jsx2(Tag, { className: heading({ level, color }), children });
+};
+
+export {
+  semanticTextColors,
+  Text,
+  Heading
+};

package/dist/colors-CvgrDPVc.d.ts

@@ -0,0 +1,10 @@
+/**
+ * Semantic colors for action-oriented components (Button, Heading, etc.)
+ */
+type SemanticColor = "primary" | "success" | "danger" | "warning" | "info" | "muted" | "none";
+/**
+ * Literal colors for data visualization components (StatsCard, etc.)
+ */
+type DataColor = "blue" | "red" | "yellow" | "green" | "gray" | "orange";
+
+export type { DataColor as D, SemanticColor as S };

package/dist/index.d.ts

@@ -1,20 +1,12 @@
 import * as react from 'react';
 import { ReactNode, ChangeEvent, FormEvent, HTMLInputAutoCompleteAttribute, FocusEvent, KeyboardEvent, Ref } from 'react';
+import { S as SemanticColor, D as DataColor } from './colors-CvgrDPVc.js';
 export { FormInput, FormInputProps, FormProvider, FormProviderProps } from './rhf/index.js';
 export { toast } from 'sonner';
 import * as zustand from 'zustand';
 import { Store, Reducer, Middleware, Dispatch } from '@reduxjs/toolkit';
 import 'react-hook-form';
 
-/**
- * Semantic colors for action-oriented components (Button, Heading, etc.)
- */
-type SemanticColor = "primary" | "success" | "danger" | "warning" | "info" | "muted" | "none";
-/**
- * Literal colors for data visualization components (StatsCard, etc.)
- */
-type DataColor = "blue" | "red" | "yellow" | "green" | "gray" | "orange";
-
 /**
  * Sizes shared by every sized component (Icon, Button, Input, etc.)
  */
@@ -26,6 +18,7 @@ type IconName = (typeof iconNames)[number];
 interface IconProps {
     name: IconName;
     size?: Size;
+    color?: SemanticColor;
     "aria-label"?: string;
 }
 
@@ -195,7 +188,7 @@ type TextAreaProps = TextAreaName & {
 
 declare const TextArea: ({ label: labelText, "aria-label": ariaLabel, name, placeholder, autoComplete, value, rows, error, disabled, required, onChange, onBlur, onKeyDown, ref, }: TextAreaProps) => react.JSX.Element;
 
-declare const Icon: ({ name, size, "aria-label": ariaLabel, }: IconProps) => react.JSX.Element;
+declare const Icon: ({ name, size, color, "aria-label": ariaLabel, }: IconProps) => react.JSX.Element;
 
 interface StatsCardProps {
     label: string;
@@ -505,5 +498,5 @@ declare class HTTPClient {
     patch<T = unknown>(url: string, config?: HttpRequestConfig): Promise<T | undefined>;
 }
 
-export { AppWrapper, Button, Checkbox, ConnectedModal, DataGrid, DocumentWrapper, Error, Form, GlobalState, HTTPClient, Heading, Icon, Input, Loader, Modal, PageWrapper, Radio, Select, Sidebar, Spinner, StatsCard, Tag, Text, TextArea, Toaster, WhatsAppButton, splitURLasPath, useAppStore, useModalStore, usePageStore, useRouterStore, useToastStore };
-export type { AppState, AppWrapperProps, ButtonColor, ButtonProps, ButtonVariant, CheckboxProps, CheckboxVariant, ConnectedModalProps, DataColor, DataGridColumn, DataGridProps, DocumentWrapperProps, ErrorProps, ExtendedStore, FormProps, GlobalStateProps, HeadingProps, HttpClientConfig, HttpRequestConfig, IconName, IconProps, InitPageFunction, InputProps, LoaderProps, ModalEntry, ModalProps, ModalState, PageState, PageWrapperProps, RadioProps, RouterState, SelectOption, SelectProps, SemanticColor, SidebarItem, SidebarProps, SidebarSection, SidebarUser, Size, SpinnerProps, SpinnerVariant, StatsCardProps, TagProps, TextAreaProps, TextProps, TextVariant, Toast, ToastState, ToastType, WhatsAppButtonProps };
+export { AppWrapper, Button, Checkbox, ConnectedModal, DataColor, DataGrid, DocumentWrapper, Error, Form, GlobalState, HTTPClient, Heading, Icon, Input, Loader, Modal, PageWrapper, Radio, Select, SemanticColor, Sidebar, Spinner, StatsCard, Tag, Text, TextArea, Toaster, WhatsAppButton, splitURLasPath, useAppStore, useModalStore, usePageStore, useRouterStore, useToastStore };
+export type { AppState, AppWrapperProps, ButtonColor, ButtonProps, ButtonVariant, CheckboxProps, CheckboxVariant, ConnectedModalProps, DataGridColumn, DataGridProps, DocumentWrapperProps, ErrorProps, ExtendedStore, FormProps, GlobalStateProps, HeadingProps, HttpClientConfig, HttpRequestConfig, IconName, IconProps, InitPageFunction, InputProps, LoaderProps, ModalEntry, ModalProps, ModalState, PageState, PageWrapperProps, RadioProps, RouterState, SelectOption, SelectProps, SidebarItem, SidebarProps, SidebarSection, SidebarUser, Size, SpinnerProps, SpinnerVariant, StatsCardProps, TagProps, TextAreaProps, TextProps, TextVariant, Toast, ToastState, ToastType, WhatsAppButtonProps };

package/dist/index.js

@@ -1,4 +1,9 @@
 "use client";
+import {
+  Heading,
+  Text,
+  semanticTextColors
+} from "./chunk-CXA5QIHP.js";
 import {
   Error,
   FormInput,
@@ -23,11 +28,20 @@ var iconSizes = {
   lg: 24
 };
 
+// core/icon/icon.styles.ts
+import { tv } from "tailwind-variants";
+var icon = tv({
+  variants: {
+    color: semanticTextColors
+  }
+});
+
 // core/icon/icon.tsx
 import { Fragment, jsx } from "react/jsx-runtime";
 var Icon = ({
   name,
   size = "md",
+  color,
   "aria-label": ariaLabel
 }) => {
   const isBrand = name.startsWith("Si");
@@ -37,6 +51,7 @@ var Icon = ({
     "span",
     {
       "data-testid": name,
+      className: icon({ color }),
       role: ariaLabel ? "img" : void 0,
       "aria-label": ariaLabel,
       children: /* @__PURE__ */ jsx(IconComponent, { size: iconSizes[size], "aria-hidden": "true" })
@@ -45,8 +60,8 @@ var Icon = ({
 };
 
 // core/button/button.styles.ts
-import { tv } from "tailwind-variants";
-var button = tv({
+import { tv as tv2 } from "tailwind-variants";
+var button = tv2({
   // outline-current covers the colors with no outline class (ghost, none): without it, browsers keep their default focus color.
   base: "cursor-pointer font-medium focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current disabled:opacity-50 disabled:cursor-not-allowed inline-flex items-center justify-center",
   variants: {
@@ -157,19 +172,19 @@ var Button = ({
   color = "primary",
   size = "md",
   fullWidth = false,
-  icon,
+  icon: icon2,
   iconPosition = "left",
   disabled = false,
   "aria-label": ariaLabel,
   onClick
 }) => {
-  const isIconOnly = icon && !children;
+  const isIconOnly = icon2 && !children;
   const variant = variantProp ?? (isIconOnly ? "icon" : "default");
   const renderContent = () => {
-    if (!icon) {
+    if (!icon2) {
       return children;
     }
-    const iconElement = /* @__PURE__ */ jsx2(Icon, { name: icon, size });
+    const iconElement = /* @__PURE__ */ jsx2(Icon, { name: icon2, size });
     if (isIconOnly) {
       return iconElement;
     }
@@ -215,11 +230,11 @@ import { useState } from "react";
 import { useId } from "react";
 
 // core/forms/checkbox/checkbox.styles.ts
-import { tv as tv2 } from "tailwind-variants";
-var wrapper = tv2({
+import { tv as tv3 } from "tailwind-variants";
+var wrapper = tv3({
   base: "flex flex-col gap-1"
 });
-var innerWrapper = tv2({
+var innerWrapper = tv3({
   base: "flex cursor-pointer has-disabled:cursor-not-allowed",
   variants: {
     variant: {
@@ -231,7 +246,7 @@ var innerWrapper = tv2({
     variant: "default"
   }
 });
-var checkbox = tv2({
+var checkbox = tv3({
   base: "shrink-0 accent-zl-primary border-gray-300 rounded focus:ring-2 focus:ring-blue-500 disabled:cursor-not-allowed",
   variants: {
     size: {
@@ -244,7 +259,7 @@ var checkbox = tv2({
     size: "md"
   }
 });
-var label = tv2({
+var label = tv3({
   base: "min-w-0 flex-1 text-sm text-gray-700 select-none"
 });
 
@@ -285,8 +300,8 @@ var Checkbox = ({
 };
 
 // core/forms/form/form.styles.ts
-import { tv as tv3 } from "tailwind-variants";
-var fieldset = tv3({
+import { tv as tv4 } from "tailwind-variants";
+var fieldset = tv4({
   base: "border-none p-0"
 });
 
@@ -304,14 +319,14 @@ var Form = ({ children, onSubmit, disabled }) => {
 import { useId as useId2 } from "react";
 
 // core/forms/radio/radio.styles.ts
-import { tv as tv4 } from "tailwind-variants";
-var wrapper2 = tv4({
+import { tv as tv5 } from "tailwind-variants";
+var wrapper2 = tv5({
   base: "flex w-fit items-center gap-2 cursor-pointer has-disabled:cursor-not-allowed"
 });
-var radio = tv4({
+var radio = tv5({
   base: "w-4 h-4 shrink-0 accent-zl-primary focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zl-primary disabled:cursor-not-allowed"
 });
-var label2 = tv4({
+var label2 = tv5({
   base: "text-sm text-gray-700 select-none"
 });
 
@@ -358,14 +373,14 @@ var Radio = ({
 import { useId as useId3 } from "react";
 
 // core/forms/select/select.styles.ts
-import { tv as tv5 } from "tailwind-variants";
-var wrapper3 = tv5({
+import { tv as tv6 } from "tailwind-variants";
+var wrapper3 = tv6({
   base: "flex flex-col gap-1"
 });
-var label3 = tv5({
+var label3 = tv6({
   base: "text-sm font-medium text-gray-700"
 });
-var select = tv5({
+var select = tv6({
   base: "px-3 py-2 border border-gray-500 rounded-md text-sm bg-white focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zl-primary disabled:bg-gray-100 disabled:cursor-not-allowed"
 });
 
@@ -423,14 +438,14 @@ var Select = ({
 import { useId as useId4 } from "react";
 
 // core/forms/text-area/text-area.styles.ts
-import { tv as tv6 } from "tailwind-variants";
-var wrapper4 = tv6({
+import { tv as tv7 } from "tailwind-variants";
+var wrapper4 = tv7({
   base: "flex flex-col gap-1"
 });
-var label4 = tv6({
+var label4 = tv7({
   base: "text-sm font-medium text-gray-700"
 });
-var textarea = tv6({
+var textarea = tv7({
   base: "px-3 py-2 border border-gray-500 rounded-md text-sm placeholder:text-gray-500 resize-y focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-zl-primary disabled:bg-gray-100 disabled:cursor-not-allowed"
 });
 
@@ -521,8 +536,8 @@ var DataGridToolbar = ({ gridApi }) => {
 };
 
 // core/tag/tag.styles.ts
-import { tv as tv7 } from "tailwind-variants";
-var tag = tv7({
+import { tv as tv8 } from "tailwind-variants";
+var tag = tv8({
   base: "inline-flex items-center gap-1 px-2 py-0.5 rounded text-xs font-medium",
   variants: {
     color: {
@@ -721,46 +736,6 @@ var DataGrid = ({
   );
 };
 
-// core/text/text.styles.ts
-import { tv as tv8 } from "tailwind-variants";
-
-// core/types/colors/colors.const.ts
-var semanticTextColors = {
-  primary: "text-zl-primary",
-  success: "text-zl-success",
-  danger: "text-zl-danger",
-  warning: "text-zl-warning",
-  info: "text-zl-info",
-  muted: "text-zl-muted",
-  none: ""
-};
-
-// core/text/text.styles.ts
-var text = tv8({
-  variants: {
-    variant: {
-      body: "text-base",
-      caption: "text-sm",
-      display: "text-3xl font-bold"
-    },
-    color: semanticTextColors
-  },
-  defaultVariants: {
-    variant: "body"
-  }
-});
-
-// core/text/text.tsx
-import { jsx as jsx12 } from "react/jsx-runtime";
-var Text = ({
-  children,
-  as: Tag2 = "p",
-  variant = "body",
-  color
-}) => {
-  return /* @__PURE__ */ jsx12(Tag2, { "data-testid": "text", className: text({ variant, color }), children });
-};
-
 // core/stats-card/stats-card.styles.ts
 import { tv as tv9 } from "tailwind-variants";
 var statsCard = tv9({
@@ -778,11 +753,11 @@ var statsCard = tv9({
 });
 
 // core/stats-card/stats-card.tsx
-import { jsx as jsx13, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs10 } from "react/jsx-runtime";
 var StatsCard = ({ label: label5, value, color }) => {
   return /* @__PURE__ */ jsxs10("div", { "data-testid": "stats-card", className: statsCard({ color }), children: [
-    /* @__PURE__ */ jsx13(Text, { variant: "caption", children: label5 }),
-    /* @__PURE__ */ jsx13(Text, { variant: "display", children: value })
+    /* @__PURE__ */ jsx12(Text, { variant: "caption", children: label5 }),
+    /* @__PURE__ */ jsx12(Text, { variant: "display", children: value })
   ] });
 };
 
@@ -823,7 +798,7 @@ var body = tv10({
 });
 
 // core/modal/modal.tsx
-import { jsx as jsx14, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx13, jsxs as jsxs11 } from "react/jsx-runtime";
 var Modal = ({
   open,
   onClose,
@@ -832,8 +807,8 @@ var Modal = ({
   children,
   size = "md"
 }) => {
-  return /* @__PURE__ */ jsx14(Dialog.Root, { open, onOpenChange: (isOpen) => !isOpen && onClose(), children: /* @__PURE__ */ jsxs11(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx14(Dialog.Overlay, { className: overlay() }),
+  return /* @__PURE__ */ jsx13(Dialog.Root, { open, onOpenChange: (isOpen) => !isOpen && onClose(), children: /* @__PURE__ */ jsxs11(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx13(Dialog.Overlay, { className: overlay() }),
     /* @__PURE__ */ jsxs11(
       Dialog.Content,
       {
@@ -841,11 +816,11 @@ var Modal = ({
         ...!description2 && { "aria-describedby": void 0 },
         children: [
           /* @__PURE__ */ jsxs11("div", { className: header(), children: [
-            /* @__PURE__ */ jsx14(Dialog.Title, { className: title(), children: title2 }),
-            /* @__PURE__ */ jsx14(Button, { icon: "X", "aria-label": "Close", onClick: onClose })
+            /* @__PURE__ */ jsx13(Dialog.Title, { className: title(), children: title2 }),
+            /* @__PURE__ */ jsx13(Button, { icon: "X", "aria-label": "Close", onClick: onClose })
           ] }),
-          description2 && /* @__PURE__ */ jsx14(Dialog.Description, { className: description(), children: description2 }),
-          children && /* @__PURE__ */ jsx14("div", { className: body(), children })
+          description2 && /* @__PURE__ */ jsx13(Dialog.Description, { className: description(), children: description2 }),
+          children && /* @__PURE__ */ jsx13("div", { className: body(), children })
         ]
       }
     )
@@ -858,7 +833,7 @@ var whatsappBusinessUrl = "whatsapp-business://send";
 var whatsappMobileUserAgent = /Android|iPhone|iPad|iPod/i;
 
 // core/whatsapp-button/whatsapp-button.tsx
-import { jsx as jsx15 } from "react/jsx-runtime";
+import { jsx as jsx14 } from "react/jsx-runtime";
 var WhatsAppButton = ({
   phone,
   message,
@@ -883,43 +858,7 @@ var WhatsAppButton = ({
     }
     onClick?.();
   };
-  return /* @__PURE__ */ jsx15(Button, { color: "success", icon: "SiWhatsapp", onClick: handleClick, children });
-};
-
-// core/heading/heading.const.ts
-var headingTags = {
-  1: "h1",
-  2: "h2",
-  3: "h3",
-  4: "h4",
-  5: "h5",
-  6: "h6"
-};
-
-// core/heading/heading.styles.ts
-import { tv as tv11 } from "tailwind-variants";
-var heading = tv11({
-  variants: {
-    level: {
-      1: "text-3xl font-bold",
-      2: "text-2xl font-bold",
-      3: "text-xl font-semibold",
-      4: "text-lg font-semibold",
-      5: "text-base font-medium",
-      6: "text-sm font-medium"
-    },
-    color: semanticTextColors
-  },
-  defaultVariants: {
-    level: 1
-  }
-});
-
-// core/heading/heading.tsx
-import { jsx as jsx16 } from "react/jsx-runtime";
-var Heading = ({ children, level = 1, color }) => {
-  const Tag2 = headingTags[level];
-  return /* @__PURE__ */ jsx16(Tag2, { className: heading({ level, color }), children });
+  return /* @__PURE__ */ jsx14(Button, { color: "success", icon: "SiWhatsapp", onClick: handleClick, children });
 };
 
 // core/sidebar/sidebar.tsx
@@ -927,8 +866,8 @@ import { useState as useState3 } from "react";
 import Link from "next/link.js";
 
 // core/sidebar/sidebar.styles.ts
-import { tv as tv12 } from "tailwind-variants";
-var sidebar = tv12({
+import { tv as tv11 } from "tailwind-variants";
+var sidebar = tv11({
   base: "h-screen bg-neutral-800 text-neutral-300 flex flex-col overflow-hidden transition-all duration-200",
   variants: {
     collapsed: {
@@ -940,16 +879,16 @@ var sidebar = tv12({
     collapsed: false
   }
 });
-var nav = tv12({
+var nav = tv11({
   base: "flex-1 min-h-0 overflow-y-auto overflow-x-hidden"
 });
-var header2 = tv12({
+var header2 = tv11({
   base: "shrink-0 border-b border-neutral-600/50 grid p-2"
 });
-var section = tv12({
+var section = tv11({
   base: "border-b border-neutral-600/50 last:border-b-0 grid gap-1 p-2"
 });
-var item = tv12({
+var item = tv11({
   base: "flex w-full items-center rounded-md text-sm whitespace-nowrap transition-colors cursor-pointer p-1",
   variants: {
     active: {
@@ -961,10 +900,10 @@ var item = tv12({
     active: false
   }
 });
-var itemIcon = tv12({
+var itemIcon = tv11({
   base: "p-2"
 });
-var itemLabel = tv12({
+var itemLabel = tv11({
   base: "truncate transition-all duration-200",
   variants: {
     collapsed: {
@@ -976,27 +915,27 @@ var itemLabel = tv12({
     collapsed: false
   }
 });
-var footer = tv12({
+var footer = tv11({
   base: "shrink-0 border-t border-neutral-600/50 p-3 flex items-center gap-3 whitespace-nowrap"
 });
-var avatar = tv12({
+var avatar = tv11({
   base: "shrink-0 w-8 h-8 rounded-full bg-neutral-600 text-white text-xs font-medium flex items-center justify-center"
 });
-var userInfo = tv12({
+var userInfo = tv11({
   base: "flex flex-col min-w-0"
 });
-var userName = tv12({
+var userName = tv11({
   base: "text-sm text-white truncate"
 });
-var userEmail = tv12({
+var userEmail = tv11({
   base: "text-xs text-neutral-400"
 });
-var toggleButton = tv12({
+var toggleButton = tv11({
   base: "shrink-0 border-t border-neutral-600/50 grid p-2 [&>button]:justify-start [&>button]:overflow-hidden [&>button]:whitespace-nowrap"
 });
 
 // core/sidebar/sidebar.tsx
-import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs12 } from "react/jsx-runtime";
 var getInitials = (name) => {
   const parts = name.trim().split(/\s+/);
   if (parts.length >= 2) {
@@ -1017,19 +956,19 @@ var Sidebar = ({
   const [collapsed, setCollapsed] = useState3(defaultCollapsed);
   const initials = getInitials(user.name);
   return /* @__PURE__ */ jsxs12("aside", { className: sidebar({ collapsed }), children: [
-    homeHref && /* @__PURE__ */ jsx17(
+    homeHref && /* @__PURE__ */ jsx15(
       Link,
       {
         href: homeHref,
         className: header2(),
         "aria-label": homeLabel || "Home",
         children: /* @__PURE__ */ jsxs12("span", { className: item({ active: homeHref === activeHref }), children: [
-          /* @__PURE__ */ jsx17("span", { className: itemIcon(), children: /* @__PURE__ */ jsx17(Icon, { name: "Home" }) }),
-          /* @__PURE__ */ jsx17("span", { className: itemLabel({ collapsed }), children: homeLabel })
+          /* @__PURE__ */ jsx15("span", { className: itemIcon(), children: /* @__PURE__ */ jsx15(Icon, { name: "Home" }) }),
+          /* @__PURE__ */ jsx15("span", { className: itemLabel({ collapsed }), children: homeLabel })
         ] })
       }
     ),
-    /* @__PURE__ */ jsx17("nav", { "aria-label": "Main navigation", className: nav(), children: sections.map((sectionData, i) => /* @__PURE__ */ jsx17("div", { className: section(), children: sectionData.items.map((sidebarItem) => {
+    /* @__PURE__ */ jsx15("nav", { "aria-label": "Main navigation", className: nav(), children: sections.map((sectionData, i) => /* @__PURE__ */ jsx15("div", { className: section(), children: sectionData.items.map((sidebarItem) => {
       const isActive = sidebarItem.href === activeHref;
       return /* @__PURE__ */ jsxs12(
         Link,
@@ -1038,20 +977,20 @@ var Sidebar = ({
           className: item({ active: isActive }),
           ...isActive && { "aria-current": "page" },
           children: [
-            /* @__PURE__ */ jsx17("span", { className: itemIcon(), children: /* @__PURE__ */ jsx17(Icon, { name: sidebarItem.icon }) }),
-            /* @__PURE__ */ jsx17("span", { className: itemLabel({ collapsed }), children: sidebarItem.label })
+            /* @__PURE__ */ jsx15("span", { className: itemIcon(), children: /* @__PURE__ */ jsx15(Icon, { name: sidebarItem.icon }) }),
+            /* @__PURE__ */ jsx15("span", { className: itemLabel({ collapsed }), children: sidebarItem.label })
           ]
         },
         sidebarItem.href
       );
     }) }, i)) }),
     /* @__PURE__ */ jsxs12("div", { className: footer(), children: [
-      /* @__PURE__ */ jsx17("div", { className: avatar(), children: initials }),
+      /* @__PURE__ */ jsx15("div", { className: avatar(), children: initials }),
       /* @__PURE__ */ jsxs12("div", { className: userInfo(), children: [
-        /* @__PURE__ */ jsx17("span", { className: userName(), children: user.name }),
-        /* @__PURE__ */ jsx17("span", { className: userEmail(), children: user.email })
+        /* @__PURE__ */ jsx15("span", { className: userName(), children: user.name }),
+        /* @__PURE__ */ jsx15("span", { className: userEmail(), children: user.email })
       ] }),
-      /* @__PURE__ */ jsx17(
+      /* @__PURE__ */ jsx15(
         Button,
         {
           color: "ghost",
@@ -1061,7 +1000,7 @@ var Sidebar = ({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx17("div", { className: toggleButton(), children: /* @__PURE__ */ jsx17(
+    /* @__PURE__ */ jsx15("div", { className: toggleButton(), children: /* @__PURE__ */ jsx15(
       Button,
       {
         color: "ghost",
@@ -1110,7 +1049,7 @@ var useToastStore = create()(
 );
 
 // core/toaster/toaster.tsx
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx16 } from "react/jsx-runtime";
 var Toaster = () => {
   const toasts = useToastStore((s) => s.toasts);
   const removeToast = useToastStore((s) => s.removeToast);
@@ -1123,7 +1062,7 @@ var Toaster = () => {
       removeToast(t.id);
     });
   }, [toasts, removeToast]);
-  return /* @__PURE__ */ jsx18(
+  return /* @__PURE__ */ jsx16(
     SonnerToaster,
     {
       position: "bottom-right",
@@ -1202,7 +1141,7 @@ import {
   combineReducers,
   configureStore
 } from "@reduxjs/toolkit";
-import { jsx as jsx19 } from "react/jsx-runtime";
+import { jsx as jsx17 } from "react/jsx-runtime";
 var store;
 var persistentReducers = {};
 var dynamicReducers = {};
@@ -1241,7 +1180,7 @@ var GlobalState = ({
     preloadedState,
     coreReducers
   );
-  return /* @__PURE__ */ jsx19(Provider, { store: reduxStore, children });
+  return /* @__PURE__ */ jsx17(Provider, { store: reduxStore, children });
 };
 
 // core/state/router/router.store.ts
@@ -1300,7 +1239,7 @@ var usePageStore = create5()(
 import { useEffect as useEffect2 } from "react";
 import { useDispatch, useStore } from "react-redux";
 import { useRouter } from "next/compat/router.js";
-import { Fragment as Fragment4, jsx as jsx20 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx18 } from "react/jsx-runtime";
 var PageWrapper = ({
   reducers,
   title: title2,
@@ -1324,11 +1263,11 @@ var PageWrapper = ({
       initPage(dispatch);
     }
   }, []);
-  return /* @__PURE__ */ jsx20(Fragment4, { children });
+  return /* @__PURE__ */ jsx18(Fragment4, { children });
 };
 
 // core/connected-modal/connected-modal.tsx
-import { jsx as jsx21 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var ConnectedModal = ({
   modalId,
   title: title2,
@@ -1338,7 +1277,7 @@ var ConnectedModal = ({
 }) => {
   const isOpen = useModalStore((s) => s.isOpen(modalId));
   const closeModal = useModalStore((s) => s.closeModal);
-  return /* @__PURE__ */ jsx21(
+  return /* @__PURE__ */ jsx19(
     Modal,
     {
       open: isOpen,
@@ -1359,34 +1298,34 @@ var spinnerIcons = {
 };
 
 // core/spinner/spinner.styles.ts
-import { tv as tv13 } from "tailwind-variants";
-var spinner = tv13({
+import { tv as tv12 } from "tailwind-variants";
+var spinner = tv12({
   base: "inline-flex animate-spin text-white"
 });
 
 // core/spinner/spinner.tsx
-import { jsx as jsx22 } from "react/jsx-runtime";
-var Spinner = ({ variant = "circle", size = "md" }) => /* @__PURE__ */ jsx22("span", { "data-testid": "spinner", className: spinner(), children: /* @__PURE__ */ jsx22(Icon, { name: spinnerIcons[variant], size }) });
+import { jsx as jsx20 } from "react/jsx-runtime";
+var Spinner = ({ variant = "circle", size = "md" }) => /* @__PURE__ */ jsx20("span", { "data-testid": "spinner", className: spinner(), children: /* @__PURE__ */ jsx20(Icon, { name: spinnerIcons[variant], size }) });
 
 // core/loader/loader.styles.ts
-import { tv as tv14 } from "tailwind-variants";
-var overlay2 = tv14({
+import { tv as tv13 } from "tailwind-variants";
+var overlay2 = tv13({
   base: "flex fixed justify-center items-center w-full h-full bg-black/20 z-50"
 });
 
 // core/loader/loader.tsx
-import { jsx as jsx23 } from "react/jsx-runtime";
+import { jsx as jsx21 } from "react/jsx-runtime";
 var Loader = ({ label: label5 = "Loading" }) => {
   const fetching = useAppStore((s) => s.fetching);
   if (!fetching) return null;
-  return /* @__PURE__ */ jsx23("div", { role: "status", "aria-label": label5, className: overlay2(), children: /* @__PURE__ */ jsx23(Spinner, { size: "lg" }) });
+  return /* @__PURE__ */ jsx21("div", { role: "status", "aria-label": label5, className: overlay2(), children: /* @__PURE__ */ jsx21(Spinner, { size: "lg" }) });
 };
 
 // core/app-wrapper/app-wrapper.tsx
 import { useEffect as useEffect3 } from "react";
 import { useRouter as useRouter2 } from "next/compat/router.js";
 import { SessionProvider } from "next-auth/react";
-import { jsx as jsx24, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs13 } from "react/jsx-runtime";
 var AppWrapper = ({
   children,
   reducers,
@@ -1400,15 +1339,15 @@ var AppWrapper = ({
       setRoute(router.asPath);
     }
   }, [router?.isReady, router?.asPath, setRoute]);
-  return /* @__PURE__ */ jsx24(SessionProvider, { children: /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx22(SessionProvider, { children: /* @__PURE__ */ jsxs13(
     GlobalState,
     {
       reducers,
       middlewares,
       coreReducers,
       children: [
-        /* @__PURE__ */ jsx24(Loader, {}),
-        /* @__PURE__ */ jsx24(Toaster, {}),
+        /* @__PURE__ */ jsx22(Loader, {}),
+        /* @__PURE__ */ jsx22(Toaster, {}),
         children
       ]
     }
@@ -1416,13 +1355,13 @@ var AppWrapper = ({
 };
 
 // core/document-wrapper/document-wrapper.tsx
-import { jsx as jsx25 } from "react/jsx-runtime";
+import { jsx as jsx23 } from "react/jsx-runtime";
 var DocumentWrapper = ({
   children,
   lang = "pt-BR",
   className
 }) => {
-  return /* @__PURE__ */ jsx25("html", { lang, children: /* @__PURE__ */ jsx25("body", { className, children }) });
+  return /* @__PURE__ */ jsx23("html", { lang, children: /* @__PURE__ */ jsx23("body", { className, children }) });
 };
 
 // core/http/http.client.ts

package/dist/next/index.d.ts

@@ -1,5 +1,6 @@
 import * as react from 'react';
 import { ReactNode } from 'react';
+import { SemanticColor } from '../index.js';
 
 interface RootLayoutProps {
     children: ReactNode;
@@ -11,9 +12,18 @@ interface NotFoundProps {
     title?: string;
     message?: string;
     backHref?: string;
+    backLabel?: string;
 }
 
-declare const NotFound: ({ title: notFoundTitle, message: notFoundMessage, backHref, }: NotFoundProps) => react.JSX.Element;
+declare const NotFound: ({ title, message, backHref, backLabel, }: NotFoundProps) => react.JSX.Element;
 
-export { NotFound, RootLayout };
-export type { NotFoundProps, RootLayoutProps };
+interface LinkProps {
+    children: ReactNode;
+    href: string;
+    color?: SemanticColor;
+}
+
+declare const Link: ({ children, href, color }: LinkProps) => react.JSX.Element;
+
+export { Link, NotFound, RootLayout };
+export type { LinkProps, NotFoundProps, RootLayoutProps };

package/dist/next/index.js

@@ -1,50 +1,81 @@
 "use client";
+import {
+  Heading,
+  Text
+} from "../chunk-CXA5QIHP.js";
 
 // core/next/root-layout/root-layout.styles.ts
 import { tv } from "tailwind-variants";
-var body = tv({
-  base: "min-h-screen"
+var rootLayout = tv({
+  base: "min-h-dvh"
 });
 
 // core/next/root-layout/root-layout.tsx
 import { jsx } from "react/jsx-runtime";
 var RootLayout = ({ children }) => {
-  return /* @__PURE__ */ jsx("main", { className: body(), children });
+  return /* @__PURE__ */ jsx("main", { className: rootLayout(), children });
 };
 
-// core/next/not-found/not-found.styles.ts
+// core/next/link/link.tsx
+import NextLink from "next/link.js";
+
+// core/next/link/link.styles.ts
 import { tv as tv2 } from "tailwind-variants";
-var container = tv2({
-  base: "flex flex-col items-center justify-center min-h-screen p-4"
-});
-var code = tv2({
-  base: "text-6xl font-bold text-gray-300 mb-4"
-});
-var title = tv2({
-  base: "text-2xl font-semibold text-gray-900 mb-2"
-});
-var message = tv2({
-  base: "text-gray-600 mb-6 text-center max-w-md"
-});
 var link = tv2({
-  base: "text-blue-600 hover:text-blue-700 hover:underline"
+  // outline-current draws the focus in the text color. The invisible ::after grows the touch target to 44px without changing the layout.
+  base: "relative rounded-sm underline underline-offset-2 hover:decoration-2 focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-current after:absolute after:top-1/2 after:left-1/2 after:h-11 after:w-full after:min-w-11 after:-translate-x-1/2 after:-translate-y-1/2",
+  variants: {
+    color: {
+      primary: "text-zl-primary hover:text-zl-primary-strong",
+      success: "text-zl-success hover:text-zl-success-strong",
+      danger: "text-zl-danger hover:text-zl-danger-strong",
+      warning: "text-zl-warning hover:text-zl-warning-strong",
+      info: "text-zl-info hover:text-zl-info-strong",
+      muted: "text-zl-muted hover:text-zl-muted-strong",
+      none: ""
+    }
+  },
+  defaultVariants: {
+    color: "primary"
+  }
+});
+
+// core/next/link/link.tsx
+import { jsx as jsx2 } from "react/jsx-runtime";
+var Link = ({ children, href, color = "primary" }) => {
+  return /* @__PURE__ */ jsx2(NextLink, { href, className: link({ color }), children });
+};
+
+// core/next/not-found/not-found.styles.ts
+import { tv as tv3 } from "tailwind-variants";
+var notFound = tv3({
+  slots: {
+    base: "flex flex-col items-center justify-center gap-6 min-h-dvh p-4 text-center",
+    code: "text-6xl font-bold text-zl-muted",
+    content: "flex flex-col gap-2 max-w-md"
+  }
 });
 
 // core/next/not-found/not-found.tsx
-import { jsx as jsx2, jsxs } from "react/jsx-runtime";
+import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 var NotFound = ({
-  title: notFoundTitle = "Page not found",
-  message: notFoundMessage = "The page you are looking for does not exist.",
-  backHref = "/"
+  title = "Page not found",
+  message = "The page you are looking for does not exist.",
+  backHref = "/",
+  backLabel = "Go back home"
 }) => {
-  return /* @__PURE__ */ jsxs("div", { className: container(), children: [
-    /* @__PURE__ */ jsx2("span", { className: code(), children: "404" }),
-    /* @__PURE__ */ jsx2("h1", { className: title(), children: notFoundTitle }),
-    /* @__PURE__ */ jsx2("p", { className: message(), children: notFoundMessage }),
-    /* @__PURE__ */ jsx2("a", { href: backHref, className: link(), children: "Go back home" })
+  const { base, code, content } = notFound();
+  return /* @__PURE__ */ jsxs("div", { className: base(), children: [
+    /* @__PURE__ */ jsx3("span", { className: code(), children: "404" }),
+    /* @__PURE__ */ jsxs("div", { className: content(), children: [
+      /* @__PURE__ */ jsx3(Heading, { children: title }),
+      /* @__PURE__ */ jsx3(Text, { color: "muted", children: message })
+    ] }),
+    /* @__PURE__ */ jsx3(Link, { href: backHref, children: backLabel })
   ] });
 };
 export {
+  Link,
   NotFound,
   RootLayout
 };

package/package.json

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