@alexandregme/zljs 1.13.0 → 1.14.0

package/CHANGELOG.md

@@ -8,6 +8,28 @@ A change that needs action in an app has a **Migration** note. When updating, re
 
 ## [Unreleased]
 
+## [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 +184,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/v1.13.0...HEAD
+[Unreleased]: https://github.com/alexandregme/zljs/compare/v1.14.0...HEAD
+[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/{chunk-2RTPRD3E.js → chunk-VW4GICIJ.js}

@@ -23,7 +23,7 @@ var FormProvider = ({
 import { useFormContext } from "react-hook-form";
 
 // core/forms/input/input.tsx
-import { forwardRef, useId } from "react";
+import { useId } from "react";
 
 // core/forms/error/error.styles.ts
 import { tv } from "tailwind-variants";
@@ -54,51 +54,50 @@ var input = tv2({
 
 // core/forms/input/input.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
-var Input = forwardRef(
-  ({
-    label: labelText,
-    "aria-label": ariaLabel,
-    name,
-    type = "text",
-    placeholder,
-    autoComplete,
-    value,
-    error: error2,
-    disabled,
-    required,
-    onChange,
-    onBlur,
-    onKeyDown
-  }, ref) => {
-    const id = useId();
-    const errorId = `${id}-error`;
-    return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
-      labelText && /* @__PURE__ */ jsx3("label", { htmlFor: id, className: label(), children: labelText }),
-      /* @__PURE__ */ jsx3(
-        "input",
-        {
-          ref,
-          id,
-          name,
-          type,
-          placeholder,
-          autoComplete,
-          value,
-          disabled,
-          required,
-          onChange,
-          onBlur,
-          onKeyDown,
-          "aria-label": ariaLabel,
-          "aria-invalid": error2 ? true : void 0,
-          "aria-describedby": error2 ? errorId : void 0,
-          className: input()
-        }
-      ),
-      error2 && /* @__PURE__ */ jsx3(Error, { id: errorId, message: error2 })
-    ] });
-  }
-);
+var Input = ({
+  label: labelText,
+  "aria-label": ariaLabel,
+  name,
+  type = "text",
+  placeholder,
+  autoComplete,
+  value,
+  error: error2,
+  disabled,
+  required,
+  onChange,
+  onBlur,
+  onKeyDown,
+  ref
+}) => {
+  const id = useId();
+  const errorId = `${id}-error`;
+  return /* @__PURE__ */ jsxs("div", { className: wrapper(), children: [
+    labelText && /* @__PURE__ */ jsx3("label", { htmlFor: id, className: label(), children: labelText }),
+    /* @__PURE__ */ jsx3(
+      "input",
+      {
+        ref,
+        id,
+        name,
+        type,
+        placeholder,
+        autoComplete,
+        value,
+        disabled,
+        required,
+        onChange,
+        onBlur,
+        onKeyDown,
+        "aria-label": ariaLabel,
+        "aria-invalid": error2 ? true : void 0,
+        "aria-describedby": error2 ? errorId : void 0,
+        className: input()
+      }
+    ),
+    error2 && /* @__PURE__ */ jsx3(Error, { id: errorId, message: error2 })
+  ] });
+};
 
 // core/rhf/form-input/form-input.tsx
 import { jsx as jsx4 } from "react/jsx-runtime";

package/dist/index.d.ts

@@ -117,9 +117,10 @@ type InputProps = InputName & {
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
     onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
     onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    ref?: Ref<HTMLInputElement>;
 };
 
-declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
+declare const Input: ({ label: labelText, "aria-label": ariaLabel, name, type, placeholder, autoComplete, value, error, disabled, required, onChange, onBlur, onKeyDown, ref, }: InputProps) => react.JSX.Element;
 
 type RadioName = {
     label: string;

package/dist/index.js

@@ -4,7 +4,7 @@ import {
   FormInput,
   FormProvider,
   Input
-} from "./chunk-2RTPRD3E.js";
+} from "./chunk-VW4GICIJ.js";
 
 // core/icon/icon.tsx
 import * as LucideIcons from "lucide-react";
@@ -224,7 +224,7 @@ var innerWrapper = tv2({
   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: {
@@ -232,7 +232,7 @@ var innerWrapper = tv2({
   }
 });
 var checkbox = tv2({
-  base: "shrink-0 text-blue-600 border-gray-300 rounded focus:ring-2 focus:ring-blue-500 disabled:cursor-not-allowed",
+  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",

package/dist/rhf/index.js

@@ -2,7 +2,7 @@
 import {
   FormInput,
   FormProvider
-} from "../chunk-2RTPRD3E.js";
+} from "../chunk-VW4GICIJ.js";
 export {
   FormInput,
   FormProvider

package/package.json

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