@alexandregme/zljs 1.10.0 → 1.12.0

package/CHANGELOG.md

@@ -8,6 +8,63 @@ A change that needs action in an app has a **Migration** note. When updating, re
 
 ## [Unreleased]
 
+## [1.12.0] - 2026-11-02
+
+### Added
+
+- `TextArea` takes `aria-label`, `name`, `autoComplete`, `required`, `onBlur`, `onKeyDown` and `ref`, as `Input` and `Select` do, so it works with `register` from `react-hook-form`
+
+### Changed
+
+- `TextArea` requires `label` or `aria-label` in its type, instead of always `label`
+- `TextArea` 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, and an app's own color reaches it
+- `TextArea` border is now `gray-500` instead of `gray-300`, for 3:1 contrast, and its placeholder is `gray-500`, for 4.5:1
+
+### Fixed
+
+- `TextArea` with `error` sets `aria-invalid` and points `aria-describedby` to the message, so a screen reader announces both
+- `TextArea` uses `resize-y`. It had a class that doesn't exist in Tailwind, so it only resized vertically in apps with Tailwind's base styles
+
+#### Migration
+
+Only code that extends `TextAreaProps` and tests that assert its old classes need a change. To find them, run the commands below from the app's root:
+
+```sh
+grep -rnE "\bTextAreaProps\b" . --include='*.ts' --include='*.tsx' --exclude-dir=node_modules --exclude-dir=.next
+grep -rnE "border-gray-300|focus:ring-blue-500|focus:border-transparent|resize-vertical" . --include='*.test.*' --exclude-dir=node_modules --exclude-dir=.next
+```
+
+Replace `interface X extends TextAreaProps` with `type X = TextAreaProps & { ... }`, because `TextAreaProps` is now a union. In tests, replace those classes with `focus-visible:outline-zl-primary`, `border-gray-500` and `resize-y`.
+
+## [1.11.0] - 2026-11-02
+
+### Added
+
+- `Select` takes `aria-label`, `name`, `autoComplete`, `required`, `onBlur` and `onKeyDown`, and forwards `ref`, as `Input` does, so it works with `register` from `react-hook-form`
+
+### Changed
+
+- `Select` requires `label` or `aria-label` in its type, instead of always `label`
+- `Select` 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, and an app's own color reaches it
+- `Select` border is now `gray-500` instead of `gray-300`, for 3:1 contrast
+
+### Fixed
+
+- `Select` shows its `placeholder` when there is no `value`. It used to start on the first option, so the `placeholder` never showed
+- `Select` with `error` sets `aria-invalid` and points `aria-describedby` to the message, so a screen reader announces both
+
+#### Migration
+
+Only a `Select` with a `placeholder` and no `value`, code that extends `SelectProps`, and tests that assert its old classes need a change. To find them, run the commands below from the app's root. The first also finds other components named `Select`, and those stay as they are:
+
+```sh
+grep -rnE -A6 "<Select([[:space:]/>]|$)" . --include='*.tsx' --exclude-dir=node_modules --exclude-dir=.next | grep -E "placeholder"
+grep -rnE "\bSelectProps\b" . --include='*.ts' --include='*.tsx' --exclude-dir=node_modules --exclude-dir=.next
+grep -rnE "border-gray-300|focus:ring-blue-500|focus:border-transparent" . --include='*.test.*' --exclude-dir=node_modules --exclude-dir=.next
+```
+
+That `Select` now starts empty, so `onChange` runs only after the user picks an option. If the app counted on the first option being selected, pass it as `value`. Replace `interface X extends SelectProps` with `type X = SelectProps & { ... }`, because `SelectProps` is now a union. In tests, replace those classes with `focus-visible:outline-zl-primary` and `border-gray-500`.
+
 ## [1.10.0] - 2026-11-02
 
 ### Added
@@ -77,7 +134,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.10.0...HEAD
+[Unreleased]: https://github.com/alexandregme/zljs/compare/v1.12.0...HEAD
+[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
 [1.9.0]: https://github.com/alexandregme/zljs/compare/v1.8.0...v1.9.0
 [1.8.0]: https://github.com/alexandregme/zljs/compare/v1.7.0...v1.8.0

package/dist/index.d.ts

@@ -1,5 +1,5 @@
 import * as react from 'react';
-import { ReactNode, ChangeEvent, FormEvent, HTMLInputAutoCompleteAttribute, FocusEvent, KeyboardEvent } from 'react';
+import { ReactNode, ChangeEvent, FormEvent, HTMLInputAutoCompleteAttribute, FocusEvent, KeyboardEvent, Ref } from 'react';
 export { FormInput, FormInputProps, FormProvider, FormProviderProps } from './rhf/index.js';
 export { toast } from 'sonner';
 import * as zustand from 'zustand';
@@ -136,29 +136,53 @@ interface SelectOption {
     value: string;
     label: string;
 }
-interface SelectProps {
+type SelectName = {
     label: string;
+    "aria-label"?: string;
+} | {
+    label?: undefined;
+    "aria-label": string;
+};
+type SelectProps = SelectName & {
+    name?: string;
     options: SelectOption[];
-    value?: string;
     placeholder?: string;
-    disabled?: boolean;
+    autoComplete?: HTMLInputAutoCompleteAttribute;
+    value?: string;
     error?: string;
+    disabled?: boolean;
+    required?: boolean;
     onChange?: (event: ChangeEvent<HTMLSelectElement>) => void;
-}
+    onBlur?: (event: FocusEvent<HTMLSelectElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLSelectElement>) => void;
+    ref?: Ref<HTMLSelectElement>;
+};
 
-declare const Select: ({ label: labelText, options, value, placeholder, disabled, error, onChange, }: SelectProps) => react.JSX.Element;
+declare const Select: ({ label: labelText, "aria-label": ariaLabel, name, options, placeholder, autoComplete, value, error, disabled, required, onChange, onBlur, onKeyDown, ref, }: SelectProps) => react.JSX.Element;
 
-interface TextAreaProps {
+type TextAreaName = {
     label: string;
+    "aria-label"?: string;
+} | {
+    label?: undefined;
+    "aria-label": string;
+};
+type TextAreaProps = TextAreaName & {
+    name?: string;
     placeholder?: string;
+    autoComplete?: HTMLInputAutoCompleteAttribute;
     value?: string;
     rows?: number;
     error?: string;
     disabled?: boolean;
+    required?: boolean;
     onChange?: (event: ChangeEvent<HTMLTextAreaElement>) => void;
-}
+    onBlur?: (event: FocusEvent<HTMLTextAreaElement>) => void;
+    onKeyDown?: (event: KeyboardEvent<HTMLTextAreaElement>) => void;
+    ref?: Ref<HTMLTextAreaElement>;
+};
 
-declare const TextArea: ({ label: labelText, placeholder, value, rows, error, disabled, onChange, }: TextAreaProps) => react.JSX.Element;
+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;
 

package/dist/index.js

@@ -356,30 +356,48 @@ var label3 = tv5({
   base: "text-sm font-medium text-gray-700"
 });
 var select = tv5({
-  base: "px-3 py-2 border border-gray-300 rounded-md text-sm bg-white focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+  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"
 });
 
 // core/forms/select/select.tsx
 import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
 var Select = ({
   label: labelText,
+  "aria-label": ariaLabel,
+  name,
   options,
-  value,
   placeholder,
-  disabled,
+  autoComplete,
+  value,
   error,
-  onChange
+  disabled,
+  required,
+  onChange,
+  onBlur,
+  onKeyDown,
+  ref
 }) => {
   const id = useId3();
+  const errorId = `${id}-error`;
   return /* @__PURE__ */ jsxs4("div", { className: wrapper3(), children: [
-    /* @__PURE__ */ jsx6("label", { htmlFor: id, className: label3(), children: labelText }),
+    labelText && /* @__PURE__ */ jsx6("label", { htmlFor: id, className: label3(), children: labelText }),
     /* @__PURE__ */ jsxs4(
       "select",
       {
+        ref,
         id,
+        name,
+        autoComplete,
         value,
+        defaultValue: placeholder && value === void 0 ? "" : void 0,
         disabled,
+        required,
         onChange,
+        onBlur,
+        onKeyDown,
+        "aria-label": ariaLabel,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? errorId : void 0,
         className: select(),
         children: [
           placeholder && /* @__PURE__ */ jsx6("option", { value: "", disabled: true, children: placeholder }),
@@ -387,7 +405,7 @@ var Select = ({
         ]
       }
     ),
-    error && /* @__PURE__ */ jsx6(Error, { message: error })
+    error && /* @__PURE__ */ jsx6(Error, { id: errorId, message: error })
   ] });
 };
 
@@ -403,36 +421,53 @@ var label4 = tv6({
   base: "text-sm font-medium text-gray-700"
 });
 var textarea = tv6({
-  base: "px-3 py-2 border border-gray-300 rounded-md text-sm resize-vertical focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent disabled:bg-gray-100 disabled:cursor-not-allowed"
+  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"
 });
 
 // core/forms/text-area/text-area.tsx
 import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
 var TextArea = ({
   label: labelText,
+  "aria-label": ariaLabel,
+  name,
   placeholder,
+  autoComplete,
   value,
   rows = 3,
   error,
   disabled,
-  onChange
+  required,
+  onChange,
+  onBlur,
+  onKeyDown,
+  ref
 }) => {
   const id = useId4();
+  const errorId = `${id}-error`;
   return /* @__PURE__ */ jsxs5("div", { className: wrapper4(), children: [
-    /* @__PURE__ */ jsx7("label", { htmlFor: id, className: label4(), children: labelText }),
+    labelText && /* @__PURE__ */ jsx7("label", { htmlFor: id, className: label4(), children: labelText }),
     /* @__PURE__ */ jsx7(
       "textarea",
       {
+        ref,
         id,
+        name,
         placeholder,
+        autoComplete,
         value,
         rows,
         disabled,
+        required,
         onChange,
+        onBlur,
+        onKeyDown,
+        "aria-label": ariaLabel,
+        "aria-invalid": error ? true : void 0,
+        "aria-describedby": error ? errorId : void 0,
         className: textarea()
       }
     ),
-    error && /* @__PURE__ */ jsx7(Error, { message: error })
+    error && /* @__PURE__ */ jsx7(Error, { id: errorId, message: error })
   ] });
 };
 

package/package.json

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