@alexandregme/zljs 1.13.1 → 1.15.0

package/CHANGELOG.md

@@ -8,6 +8,34 @@ A change that needs action in an app has a **Migration** note. When updating, re
 
 ## [Unreleased]
 
+## [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
+
+- The box of a `Checkbox` with `variant="card"` is centered on the height of its content, instead of sitting at the top. With several lines, it is no longer beside the first one
+
+### Fixed
+
+- A checked `Checkbox` uses the theme's `primary` color. It had `text-blue-600`, which does nothing on a native checkbox, so it kept the browser's own color, and an app's theme only reached the border of a `card`
+
+#### Migration
+
+Every `Checkbox` with `variant="card"` looks different, so check those screens. Code only needs a change if it forces the alignment from outside, or if a test asserts `items-start` on the card. To find them, run the commands below from the app's root. The first also finds other components named `Checkbox` and any `variant`, and the last also finds `items-start` set by the app, and those stay as they are:
+
+```sh
+grep -rnE -A6 "<Checkbox([[:space:]/>]|$)" . --include='*.tsx' --exclude-dir=node_modules --exclude-dir=.next | grep -E "variant="
+grep -rnE "\[&_label\]:items-" . --include='*.ts' --include='*.tsx' --exclude-dir=node_modules --exclude-dir=.next
+grep -rnE "items-start" . --include='*.test.*' --exclude-dir=node_modules --exclude-dir=.next
+```
+
+Remove a wrapper that only sets `[&_label]:items-center`, and the test that asserts it. In tests, replace `items-start` with `items-center`.
+
 ## [1.13.0] - 2026-11-02
 
 ### Added
@@ -162,7 +190,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.13.0...HEAD
+[Unreleased]: https://github.com/alexandregme/zljs/compare/v1.15.0...HEAD
+[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
 [1.11.0]: https://github.com/alexandregme/zljs/compare/v1.10.0...v1.11.0

package/dist/index.d.ts

@@ -26,6 +26,7 @@ type IconName = (typeof iconNames)[number];
 interface IconProps {
     name: IconName;
     size?: Size;
+    color?: SemanticColor;
     "aria-label"?: string;
 }
 
@@ -195,7 +196,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;

package/dist/index.js

@@ -23,11 +23,33 @@ var iconSizes = {
   lg: 24
 };
 
+// core/icon/icon.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/icon/icon.styles.ts
+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 +59,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 +68,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 +180,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,24 +238,24 @@ 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: {
       default: "w-fit items-center gap-2",
-      card: "items-start gap-3 rounded-lg border border-gray-500 p-3 has-checked:border-zl-primary has-checked:ring-1 has-checked:ring-zl-primary has-disabled:bg-gray-100"
+      card: "items-center gap-3 rounded-lg border border-gray-500 p-3 has-checked:border-zl-primary has-checked:ring-1 has-checked:ring-zl-primary has-disabled:bg-gray-100"
     }
   },
   defaultVariants: {
     variant: "default"
   }
 });
-var checkbox = tv2({
-  base: "shrink-0 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 disabled:cursor-not-allowed",
+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: {
       sm: "w-3.5 h-3.5",
@@ -244,7 +267,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 +308,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 +327,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 +381,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 +446,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 +544,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: {
@@ -722,21 +745,8 @@ 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({
+import { tv as tv9 } from "tailwind-variants";
+var text = tv9({
   variants: {
     variant: {
       body: "text-base",
@@ -762,8 +772,8 @@ var Text = ({
 };
 
 // core/stats-card/stats-card.styles.ts
-import { tv as tv9 } from "tailwind-variants";
-var statsCard = tv9({
+import { tv as tv10 } from "tailwind-variants";
+var statsCard = tv10({
   base: "p-4 rounded-lg",
   variants: {
     color: {
@@ -790,11 +800,11 @@ var StatsCard = ({ label: label5, value, color }) => {
 import * as Dialog from "@radix-ui/react-dialog";
 
 // core/modal/modal.styles.ts
-import { tv as tv10 } from "tailwind-variants";
-var overlay = tv10({
+import { tv as tv11 } from "tailwind-variants";
+var overlay = tv11({
   base: "fixed inset-0 bg-black/50"
 });
-var content = tv10({
+var content = tv11({
   base: "fixed top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 bg-white rounded-lg shadow-lg p-6 w-full focus:outline-none max-h-[90vh] overflow-y-auto",
   variants: {
     size: {
@@ -809,16 +819,16 @@ var content = tv10({
     size: "md"
   }
 });
-var header = tv10({
+var header = tv11({
   base: "flex items-start justify-between"
 });
-var title = tv10({
+var title = tv11({
   base: "text-lg font-semibold text-gray-900 m-0"
 });
-var description = tv10({
+var description = tv11({
   base: "text-sm text-gray-600 mt-2"
 });
-var body = tv10({
+var body = tv11({
   base: "mt-4"
 });
 
@@ -897,8 +907,8 @@ var headingTags = {
 };
 
 // core/heading/heading.styles.ts
-import { tv as tv11 } from "tailwind-variants";
-var heading = tv11({
+import { tv as tv12 } from "tailwind-variants";
+var heading = tv12({
   variants: {
     level: {
       1: "text-3xl font-bold",
@@ -927,8 +937,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 tv13 } from "tailwind-variants";
+var sidebar = tv13({
   base: "h-screen bg-neutral-800 text-neutral-300 flex flex-col overflow-hidden transition-all duration-200",
   variants: {
     collapsed: {
@@ -940,16 +950,16 @@ var sidebar = tv12({
     collapsed: false
   }
 });
-var nav = tv12({
+var nav = tv13({
   base: "flex-1 min-h-0 overflow-y-auto overflow-x-hidden"
 });
-var header2 = tv12({
+var header2 = tv13({
   base: "shrink-0 border-b border-neutral-600/50 grid p-2"
 });
-var section = tv12({
+var section = tv13({
   base: "border-b border-neutral-600/50 last:border-b-0 grid gap-1 p-2"
 });
-var item = tv12({
+var item = tv13({
   base: "flex w-full items-center rounded-md text-sm whitespace-nowrap transition-colors cursor-pointer p-1",
   variants: {
     active: {
@@ -961,10 +971,10 @@ var item = tv12({
     active: false
   }
 });
-var itemIcon = tv12({
+var itemIcon = tv13({
   base: "p-2"
 });
-var itemLabel = tv12({
+var itemLabel = tv13({
   base: "truncate transition-all duration-200",
   variants: {
     collapsed: {
@@ -976,22 +986,22 @@ var itemLabel = tv12({
     collapsed: false
   }
 });
-var footer = tv12({
+var footer = tv13({
   base: "shrink-0 border-t border-neutral-600/50 p-3 flex items-center gap-3 whitespace-nowrap"
 });
-var avatar = tv12({
+var avatar = tv13({
   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 = tv13({
   base: "flex flex-col min-w-0"
 });
-var userName = tv12({
+var userName = tv13({
   base: "text-sm text-white truncate"
 });
-var userEmail = tv12({
+var userEmail = tv13({
   base: "text-xs text-neutral-400"
 });
-var toggleButton = tv12({
+var toggleButton = tv13({
   base: "shrink-0 border-t border-neutral-600/50 grid p-2 [&>button]:justify-start [&>button]:overflow-hidden [&>button]:whitespace-nowrap"
 });
 
@@ -1359,8 +1369,8 @@ var spinnerIcons = {
 };
 
 // core/spinner/spinner.styles.ts
-import { tv as tv13 } from "tailwind-variants";
-var spinner = tv13({
+import { tv as tv14 } from "tailwind-variants";
+var spinner = tv14({
   base: "inline-flex animate-spin text-white"
 });
 
@@ -1369,8 +1379,8 @@ 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 }) });
 
 // core/loader/loader.styles.ts
-import { tv as tv14 } from "tailwind-variants";
-var overlay2 = tv14({
+import { tv as tv15 } from "tailwind-variants";
+var overlay2 = tv15({
   base: "flex fixed justify-center items-center w-full h-full bg-black/20 z-50"
 });
 

package/package.json

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