@byline/ui 6.4.0 → 6.6.0

package/dist/components/inputs/input-password.d.ts

@@ -1,2 +1,18 @@
 import type { InputProps } from './input.js';
-export declare function InputPassword({ ...props }: InputProps): import("react").JSX.Element;
+/**
+ * `type` and `endAdornment` are the two props this component exists to
+ * control, so they are removed from the public surface rather than left
+ * to be overridden.
+ *
+ * They used to be overridable by accident: props were spread AFTER them,
+ * so a caller passing the obvious `type="password"` silently defeated the
+ * toggle — the icon swapped, the field stayed masked. Omitting them turns
+ * that into a compile error instead of a bug someone has to notice.
+ */
+export interface InputPasswordProps extends Omit<InputProps, 'type' | 'endAdornment'> {
+    /** Accessible name for the reveal control while the password is hidden. */
+    showPasswordLabel?: string;
+    /** Accessible name for the reveal control while the password is shown. */
+    hidePasswordLabel?: string;
+}
+export declare function InputPassword({ showPasswordLabel, hidePasswordLabel, ...props }: InputPasswordProps): import("react").JSX.Element;

package/dist/components/inputs/input-password.js

@@ -1,22 +1,30 @@
 import { jsx } from "react/jsx-runtime";
 import { useState } from "react";
+import clsx from "clsx";
 import { EyeClosedIcon } from "../../icons/eye-closed-icon.js";
 import { EyeOpenIcon } from "../../icons/eye-open-icon.js";
 import { Input } from "./input.js";
-function InputPassword({ ...props }) {
+import input_password_module from "./input-password.module.js";
+function InputPassword({ showPasswordLabel = 'Show password', hidePasswordLabel = 'Hide password', ...props }) {
     const [visible, setVisible] = useState(false);
     return /*#__PURE__*/ jsx(Input, {
+        ...props,
         type: visible ? 'text' : 'password',
-        endAdornment: visible ? /*#__PURE__*/ jsx(EyeOpenIcon, {
-            width: "18px",
-            height: "18px",
-            onClick: ()=>setVisible(!visible)
-        }) : /*#__PURE__*/ jsx(EyeClosedIcon, {
-            width: "18px",
-            height: "18px",
-            onClick: ()=>setVisible(!visible)
-        }),
-        ...props
+        endAdornment: /*#__PURE__*/ jsx("button", {
+            type: "button",
+            className: clsx('byline-input-password-toggle', input_password_module.toggle),
+            "aria-label": visible ? hidePasswordLabel : showPasswordLabel,
+            "aria-pressed": visible,
+            onMouseDown: (event)=>event.preventDefault(),
+            onClick: ()=>setVisible((current)=>!current),
+            children: visible ? /*#__PURE__*/ jsx(EyeOpenIcon, {
+                width: "18px",
+                height: "18px"
+            }) : /*#__PURE__*/ jsx(EyeClosedIcon, {
+                width: "18px",
+                height: "18px"
+            })
+        })
     });
 }
 export { InputPassword };

package/dist/components/inputs/input-password.module.js

@@ -0,0 +1,5 @@
+import "./input-password_module.css";
+const input_password_module = {
+    toggle: "toggle-bNQhst"
+};
+export default input_password_module;

package/dist/components/inputs/input-password_module.css

@@ -0,0 +1,21 @@
+@layer byline-components {
+  :is(.toggle-bNQhst, .byline-input-password-toggle) {
+    color: inherit;
+    cursor: pointer;
+    background: none;
+    border: none;
+    justify-content: center;
+    align-items: center;
+    min-width: 1.375rem;
+    min-height: 1.375rem;
+    padding: 0;
+    display: flex;
+  }
+
+  :is(.toggle-bNQhst:focus-visible, .byline-input-password-toggle:focus-visible) {
+    outline: 1px solid oklch(from var(--field-ring, var(--blue-500)) l c h / .6);
+    outline-offset: 1px;
+    border-radius: var(--border-radius-sm, 3px);
+  }
+}
+

package/package.json

@@ -3,7 +3,7 @@
   "private": false,
   "type": "module",
   "license": "MPL-2.0",
-  "version": "6.4.0",
+  "version": "6.6.0",
   "engines": {
     "node": ">=20.9.0"
   },
@@ -55,7 +55,7 @@
     "@dnd-kit/sortable": "^10.0.0",
     "clsx": "^2.1.1",
     "date-fns": "^4.4.0",
-    "motion": "^13.3.0",
+    "motion": "^13.4.0",
     "react-day-picker": "^10.0.1",
     "zod": "^4.6.5"
   },
@@ -64,10 +64,10 @@
     "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "@biomejs/biome": "2.5.13",
+    "@biomejs/biome": "2.5.14",
     "@rsbuild/plugin-react": "^2.1.0",
     "@rslib/core": "^1.0.1",
-    "@types/node": "^26.6.1",
+    "@types/node": "^26.6.2",
     "@types/react": "19.3.0",
     "@types/react-dom": "19.3.0",
     "@vitejs/plugin-react": "^6.1.1",

package/src/components/inputs/input-password.module.css

@@ -0,0 +1,43 @@
+/**
+ * InputPassword — the reveal toggle inside the input's end adornment.
+ *
+ * Override handle:
+ *   .byline-input-password-toggle — the reveal/hide button
+ *
+ * It is a `<button>` so it is keyboard reachable and announced, which
+ * means the browser's default button chrome has to be stripped back to
+ * what the bare icon used to look like.
+ */
+
+@layer byline-components {
+  .toggle,
+  :global(.byline-input-password-toggle) {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0;
+    border: none;
+    background: none;
+    color: inherit;
+    cursor: pointer;
+    /* The icon is 18px; the box is padded out to a comfortable target
+       without changing where the icon sits. */
+    min-width: 1.375rem;
+    min-height: 1.375rem;
+  }
+
+  /*
+   * A hairline ring at reduced opacity. The control is a 22px box sitting
+   * inside a 36px field, so the 2px ring this started as, at full
+   * `--primary-500`, read as heavier than the input's own border and drew
+   * the eye away from the field. Thickness and offset both drop to 1px,
+   * which pulls the outer edge in by 4px without touching the button box —
+   * so the 18px icon and the click target are unchanged.
+   */
+  .toggle:focus-visible,
+  :global(.byline-input-password-toggle):focus-visible {
+    outline: 1px solid oklch(from var(--field-ring, var(--blue-500)) l c h / 0.6);
+    outline-offset: 1px;
+    border-radius: var(--border-radius-sm, 3px);
+  }
+}

package/src/components/inputs/input-password.tsx

@@ -1,24 +1,66 @@
 import { useState } from 'react'
 
+import cx from 'clsx'
+
 import { EyeClosedIcon } from '../../icons/eye-closed-icon.jsx'
 import { EyeOpenIcon } from '../../icons/eye-open-icon.jsx'
 import { Input } from './input.jsx'
+import styles from './input-password.module.css'
 import type { InputProps } from './input.jsx'
 
-export function InputPassword({ ...props }: InputProps) {
+/**
+ * `type` and `endAdornment` are the two props this component exists to
+ * control, so they are removed from the public surface rather than left
+ * to be overridden.
+ *
+ * They used to be overridable by accident: props were spread AFTER them,
+ * so a caller passing the obvious `type="password"` silently defeated the
+ * toggle — the icon swapped, the field stayed masked. Omitting them turns
+ * that into a compile error instead of a bug someone has to notice.
+ */
+export interface InputPasswordProps extends Omit<InputProps, 'type' | 'endAdornment'> {
+  /** Accessible name for the reveal control while the password is hidden. */
+  showPasswordLabel?: string
+  /** Accessible name for the reveal control while the password is shown. */
+  hidePasswordLabel?: string
+}
+
+export function InputPassword({
+  showPasswordLabel = 'Show password',
+  hidePasswordLabel = 'Hide password',
+  ...props
+}: InputPasswordProps) {
   const [visible, setVisible] = useState(false)
 
   return (
     <Input
+      // Spread first: `type` below is the whole point of the component and
+      // must win over anything a caller passes.
+      {...props}
       type={visible ? 'text' : 'password'}
       endAdornment={
-        visible ? (
-          <EyeOpenIcon width="18px" height="18px" onClick={() => setVisible(!visible)} />
-        ) : (
-          <EyeClosedIcon width="18px" height="18px" onClick={() => setVisible(!visible)} />
-        )
+        <button
+          type="button"
+          className={cx('byline-input-password-toggle', styles.toggle)}
+          // A real button, not a div: the control has to be reachable by
+          // keyboard and announced by a screen reader. The icons are
+          // `aria-hidden`, so without a name here the control is silent.
+          aria-label={visible ? hidePasswordLabel : showPasswordLabel}
+          aria-pressed={visible}
+          // Clicking the toggle must not blur the field. Beyond keeping the
+          // caret where the user left it, a blur fires the form's validation
+          // and the re-render that follows can replace this element between
+          // mousedown and mouseup — which loses the click entirely.
+          onMouseDown={(event) => event.preventDefault()}
+          onClick={() => setVisible((current) => !current)}
+        >
+          {visible ? (
+            <EyeOpenIcon width="18px" height="18px" />
+          ) : (
+            <EyeClosedIcon width="18px" height="18px" />
+          )}
+        </button>
       }
-      {...props}
     />
   )
 }