@alexandregme/zljs 1.12.0 → 1.13.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.13.0] - 2026-11-02
+
+### Added
+
+- `Radio` takes `aria-label`, `required`, `onBlur`, `onKeyDown` and `ref`, as `Input` does, so it works with `register` from `react-hook-form`
+
+### Changed
+
+- `Radio` requires `label` or `aria-label` in its type, instead of always `label`
+- `Radio` input now sits inside its `<label>`, as on `Checkbox`, so the gap between the circle and the text is clickable too
+- `Radio` draws a real `focus-visible` outline in the theme's `primary` color instead of a `focus:ring`, so focus stays visible in forced colors mode
+
+### Fixed
+
+- A checked `Radio` uses the theme's `primary` color. It had `text-blue-600` and `border-gray-300`, which do nothing on a native radio, so it kept the browser's own color
+- The label of a disabled `Radio` shows the `not-allowed` cursor instead of `pointer`
+
+#### Migration
+
+Only code that extends `RadioProps`, and tests or selectors that rely on the old structure or classes, need a change. To find them, run the commands below from the app's root. The second also finds other uses of these classes, and those stay as they are:
+
+```sh
+grep -rnE "\bRadioProps\b" . --include='*.ts' --include='*.tsx' --exclude-dir=node_modules --exclude-dir=.next
+grep -rnE "text-blue-600|focus:ring-blue-500|nextSibling|previousSibling" . --include='*.test.*' --exclude-dir=node_modules --exclude-dir=.next
+```
+
+Replace `interface X extends RadioProps` with `type X = RadioProps & { ... }`, because `RadioProps` is now a union. In tests, replace those classes with `accent-zl-primary` and `focus-visible:outline-zl-primary`, and find the radio by role instead of by its position next to the label.
+
 ## [1.12.0] - 2026-11-02
 
 ### Added
@@ -134,7 +162,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.12.0...HEAD
+[Unreleased]: https://github.com/alexandregme/zljs/compare/v1.13.0...HEAD
+[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
 [1.10.0]: https://github.com/alexandregme/zljs/compare/v1.9.0...v1.10.0

package/dist/index.d.ts

@@ -121,16 +121,26 @@ type InputProps = InputName & {
 
 declare const Input: react.ForwardRefExoticComponent<InputProps & react.RefAttributes<HTMLInputElement>>;
 
-interface RadioProps {
+type RadioName = {
     label: string;
+    "aria-label"?: string;
+} | {
+    label?: undefined;
+    "aria-label": string;
+};
+type RadioProps = RadioName & {
     name: string;
     value: string;
     checked?: boolean;
     disabled?: boolean;
+    required?: boolean;
     onChange?: (event: ChangeEvent<HTMLInputElement>) => void;
-}
+    onBlur?: (event: FocusEvent<HTMLInputElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLInputElement>) => void;
+    ref?: Ref<HTMLInputElement>;
+};
 
-declare const Radio: ({ label: labelText, name, value, checked, disabled, onChange, }: RadioProps) => react.JSX.Element;
+declare const Radio: ({ label: labelText, "aria-label": ariaLabel, name, value, checked, disabled, required, onChange, onBlur, onKeyDown, ref, }: RadioProps) => react.JSX.Element;
 
 interface SelectOption {
     value: string;

package/dist/index.js

@@ -306,41 +306,51 @@ import { useId as useId2 } from "react";
 // core/forms/radio/radio.styles.ts
 import { tv as tv4 } from "tailwind-variants";
 var wrapper2 = tv4({
-  base: "flex items-center gap-2"
+  base: "flex w-fit items-center gap-2 cursor-pointer has-disabled:cursor-not-allowed"
 });
 var radio = tv4({
-  base: "w-4 h-4 text-blue-600 border-gray-300 focus:ring-2 focus:ring-blue-500 disabled:cursor-not-allowed"
+  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({
-  base: "text-sm text-gray-700 select-none cursor-pointer"
+  base: "text-sm text-gray-700 select-none"
 });
 
 // core/forms/radio/radio.tsx
 import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
 var Radio = ({
   label: labelText,
+  "aria-label": ariaLabel,
   name,
   value,
   checked,
   disabled,
-  onChange
+  required,
+  onChange,
+  onBlur,
+  onKeyDown,
+  ref
 }) => {
   const id = useId2();
-  return /* @__PURE__ */ jsxs3("div", { className: wrapper2(), children: [
+  return /* @__PURE__ */ jsxs3("label", { htmlFor: id, className: wrapper2(), children: [
     /* @__PURE__ */ jsx5(
       "input",
       {
+        ref,
         id,
         type: "radio",
         name,
         value,
         checked,
         disabled,
+        required,
         onChange,
+        onBlur,
+        onKeyDown,
+        "aria-label": ariaLabel,
         className: radio()
       }
     ),
-    /* @__PURE__ */ jsx5("label", { htmlFor: id, className: label2(), children: labelText })
+    labelText && /* @__PURE__ */ jsx5("span", { className: label2(), children: labelText })
   ] });
 };
 

package/package.json

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