@teamofsilicons/silicon-ui 0.0.0-stage → 0.2.0

package/components/otp-input/otp-input.js

@@ -0,0 +1,129 @@
+"use client";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useId, useRef, useState } from "react";
+import { AnimatePresence, motion, useAnimate, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./otp-input.module.css";
+/** Changed words rise in and unblur while unchanged words hold still. Assistive tech reads the plain copy. */
+function MotionText({ text }) {
+    const reduced = useReducedMotion();
+    const words = text.split(" ");
+    return _jsxs(_Fragment, { children: [_jsx("span", { className: styles.srOnly, children: text }), _jsx("span", { className: styles.words, "aria-hidden": "true", children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: words.map((word, index) => _jsx(motion.span, { className: styles.word, initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: "-0.35em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, transition: reduced ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: index < words.length - 1 ? `${word} ` : word }, `${index}:${word}`)) }) })] });
+}
+/** Helper and error copy: the row opens its height on a spring, then the words settle in. */
+function FieldMessage({ id, text, className, alert }) {
+    return _jsx(AnimatePresence, { initial: false, children: text ? _jsx(MessageRow, { id: id, text: text, className: className, alert: alert }, "message") : null });
+}
+/** The row tracks the measured copy, so a longer message that wraps opens its next line instead of snapping. */
+function MessageRow({ id, text, className, alert }) {
+    const reduced = useReducedMotion();
+    const copyRef = useRef(null);
+    const [height, setHeight] = useState("auto");
+    useEffect(() => {
+        const node = copyRef.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(([entry]) => setHeight(entry?.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight));
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    return _jsx(motion.span, { className: styles.messageSlot, initial: { height: 0, opacity: 0 }, animate: { height, opacity: 1 }, exit: { height: 0, opacity: 0, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.instant } } }, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.fast } }, children: _jsx(motion.span, { ref: copyRef, id: id, className: className, role: alert ? "alert" : undefined, initial: reduced ? false : { y: "0.35em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { y: 0, filter: "blur(0px)" }, transition: { duration: reduced ? 0 : motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: _jsx(MotionText, { text: text }) }) });
+}
+export function OtpInput({ length = 6, value = "", onChange, label, description, error, autoFocus = false, disabled = false, inputMode = "numeric", className }) {
+    const generatedId = useId();
+    const reduced = useReducedMotion();
+    const [scope, animate] = useAnimate();
+    const inputRefs = useRef([]);
+    const values = Array.from({ length }, (_, index) => value[index] ?? "");
+    const hintId = description ? `${generatedId}-description` : undefined;
+    const errorId = error ? `${generatedId}-error` : undefined;
+    const describedBy = [hintId, errorId].filter(Boolean).join(" ") || undefined;
+    const focusAt = (index) => inputRefs.current[Math.max(0, Math.min(index, length - 1))]?.focus();
+    const sanitize = (next) => inputMode === "numeric" ? next.replace(/\D/g, "") : next;
+    // One ring for the whole row. It glides between slots while focus stays inside, and fades in where focus lands when it arrives from outside.
+    const [ring, setRing] = useState({ x: 0, width: 0, shown: false, glide: false });
+    // A paste fills several slots in one update; those digits land as a short left to right wave.
+    const [fill, setFill] = useState({ value, wave: false });
+    if (fill.value !== value)
+        setFill({ value, wave: Array.from({ length }, (_, index) => (fill.value[index] ?? "") !== (value[index] ?? "")).filter(Boolean).length > 1 });
+    const lastError = useRef(error);
+    useEffect(() => {
+        if (autoFocus)
+            inputRefs.current[0]?.focus();
+    }, [autoFocus]);
+    // Slots shrink at narrow widths; keep the ring on the focused slot when the row resizes.
+    useEffect(() => {
+        const row = scope.current;
+        if (!row || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(() => {
+            const slot = (row.contains(document.activeElement) ? document.activeElement?.parentElement : null);
+            if (slot)
+                setRing(current => (current.x === slot.offsetLeft && current.width === slot.offsetWidth ? current : { ...current, x: slot.offsetLeft, width: slot.offsetWidth, glide: false }));
+        });
+        observer.observe(row);
+        return () => observer.disconnect();
+    }, [scope]);
+    // A new error nudges the row side to side once, so a rejected code reads as a response to the attempt.
+    useEffect(() => {
+        if (error && error !== lastError.current && !reduced && scope.current)
+            animate(scope.current, { x: [0, -6, 5, -3, 2, 0] }, { duration: .36, ease: [...motionTokens.ease.standard] });
+        lastError.current = error;
+    }, [error, reduced, animate, scope]);
+    const updateAt = (index, raw) => {
+        const next = values.slice();
+        const clean = sanitize(raw).slice(-1);
+        next[index] = clean;
+        onChange?.(next.join(""));
+        if (clean && index < length - 1)
+            focusAt(index + 1);
+    };
+    const handleChange = (index, event) => {
+        const raw = sanitize(event.target.value);
+        if (raw.length <= 1) {
+            updateAt(index, raw);
+            return;
+        }
+        const next = values.slice();
+        raw.slice(0, length - index).split("").forEach((character, offset) => { next[index + offset] = character; });
+        onChange?.(next.join(""));
+        focusAt(Math.min(index + raw.length, length - 1));
+    };
+    const handlePaste = (index, event) => {
+        event.preventDefault();
+        const pasted = sanitize(event.clipboardData.getData("text")).slice(0, length - index);
+        if (!pasted)
+            return;
+        const next = values.slice();
+        pasted.split("").forEach((character, offset) => { next[index + offset] = character; });
+        onChange?.(next.join(""));
+        focusAt(Math.min(index + pasted.length, length - 1));
+    };
+    const handleKeyDown = (index, event) => {
+        if (event.key === "ArrowLeft") {
+            event.preventDefault();
+            focusAt(index - 1);
+        }
+        if (event.key === "ArrowRight") {
+            event.preventDefault();
+            focusAt(index + 1);
+        }
+        if (event.key === "Backspace" && !values[index] && index > 0) {
+            event.preventDefault();
+            const next = values.slice();
+            next[index - 1] = "";
+            onChange?.(next.join(""));
+            focusAt(index - 1);
+        }
+        if (event.key === "Delete" && values[index]) {
+            const next = values.slice();
+            next[index] = "";
+            onChange?.(next.join(""));
+        }
+    };
+    const handleFocus = (event) => { const slot = event.currentTarget.parentElement; setRing(current => ({ x: slot.offsetLeft, width: slot.offsetWidth, shown: true, glide: current.shown })); };
+    const handleBlur = (event) => { if (!scope.current?.contains(event.relatedTarget))
+        setRing(current => ({ ...current, shown: false, glide: false })); };
+    const glyphTransition = (index) => reduced ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter], delay: fill.wave ? index * motionTokens.stagger.item : 0 };
+    return _jsxs("div", { className: [styles.field, className].filter(Boolean).join(" "), children: [_jsx("span", { className: styles.label, children: label }), _jsxs("div", { ref: scope, className: styles.inputs, role: "group", "aria-label": label, "data-invalid": error ? "true" : undefined, children: [values.map((character, index) => _jsxs("div", { className: styles.slot, children: [_jsx("input", { ref: (node) => { inputRefs.current[index] = node; }, className: styles.input, "aria-label": `${label}, digit ${index + 1} of ${length}`, "aria-describedby": describedBy, "aria-invalid": error ? true : undefined, value: character, "data-filled": character ? "true" : undefined, maxLength: 1, inputMode: inputMode, autoComplete: index === 0 ? "one-time-code" : "off", disabled: disabled, onChange: (event) => handleChange(index, event), onPaste: (event) => handlePaste(index, event), onKeyDown: (event) => handleKeyDown(index, event), onFocus: handleFocus, onBlur: handleBlur }), _jsx(AnimatePresence, { initial: false, children: character ? _jsx(motion.span, { className: styles.glyph, "aria-hidden": "true", initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, scale: .9, filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } }, transition: glyphTransition(index), children: character }, character) : null })] }, `${generatedId}-${index}`)), _jsx(motion.span, { className: styles.ring, "aria-hidden": "true", initial: false, animate: { x: ring.x, width: ring.width, opacity: ring.shown ? 1 : 0, scale: ring.shown ? 1 : .94 }, transition: reduced ? { duration: 0 } : { x: ring.glide ? motionTokens.spring.snappy : { duration: 0 }, width: { duration: 0 }, scale: motionTokens.spring.snappy, opacity: { duration: motionTokens.duration.fast } } })] }), _jsx(FieldMessage, { id: hintId, text: description, className: styles.description }), _jsx(FieldMessage, { id: errorId, text: error, className: styles.error, alert: true })] });
+}

package/components/otp-input/otp-input.module.css

@@ -0,0 +1,28 @@
+/* No row gap: grid tracks clamp a negative margin at zero, so a closed message row would still pay the gap. Each row carries its own space instead. */
+.field { display: grid; min-width: 0; }
+.label { margin-bottom: 8px; color: var(--foreground); font-size: var(--text-sm); font-weight: 500; line-height: var(--leading-body); }
+.inputs { position: relative; display: flex; width: fit-content; max-width: 100%; gap: 8px; }
+.slot { position: relative; display: grid; width: 42px; height: 48px; min-width: 0; flex: 0 1 42px; }
+/* The native text is transparent (caret stays visible); .glyph draws the digit so it can rise in. */
+.input { width: 100%; height: 100%; min-width: 0; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); color: transparent; caret-color: var(--accent); font: inherit; font-size: var(--text-lg); font-variant-numeric: tabular-nums; text-align: center; outline: none; transition: border-color var(--duration-fast) var(--ease-standard), background-color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .input:hover:not(:disabled, [data-filled="true"], [aria-invalid="true"]) { border-color: var(--border-strong); background: var(--surface-muted); } }
+.input[data-filled="true"] { border-color: var(--accent); background: var(--accent-subtle); }
+.input:focus-visible { outline: none; }
+.input[aria-invalid="true"] { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
+.input:disabled { cursor: not-allowed; opacity: .48; background: var(--surface-muted); }
+.glyph { position: absolute; inset: 0; display: grid; place-items: center; color: var(--foreground); font-size: var(--text-lg); font-variant-numeric: tabular-nums; pointer-events: none; }
+.input:disabled ~ .glyph { opacity: .48; }
+/* One ring per field. It glides to the focused slot and morphs to the danger color with the error state. */
+.ring { position: absolute; top: 0; left: 0; height: 100%; z-index: 2; border: 1px solid var(--accent-strong); border-radius: var(--radius-control); pointer-events: none; transition: border-color var(--duration-fast) var(--ease-standard); }
+.inputs[data-invalid="true"] .ring { border-color: var(--danger); }
+/* The row's space is padding inside the clipped slot, so the height animates from a true zero. */
+.messageSlot { display: block; overflow: hidden; }
+.description, .error { display: block; padding-top: 8px; font-size: var(--text-xs); line-height: var(--leading-body); }
+.description { color: var(--text-muted); }.error { color: var(--danger); }
+/* Words are measured against this box when they pop out to leave, so it must be the positioned parent. */
+.words { position: relative; display: block; }
+.word { display: inline-block; white-space: pre; }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (max-width: 360px) { .inputs { gap: 6px; }.slot { height: 44px; } }
+@media (forced-colors: active) { .ring { display: none; } .input:focus-visible { outline: 2px solid CanvasText; outline-offset: 2px; } .input { color: CanvasText; } .glyph { display: none; } }
+@media (prefers-reduced-motion: reduce) { .input, .ring { transition: none; } }

package/components/pagination/pagination.d.ts

@@ -0,0 +1,7 @@
+export interface PaginationProps {
+    page: number;
+    pageCount: number;
+    onPageChange: (page: number) => void;
+    label?: string;
+}
+export declare function Pagination({ page, pageCount, onPageChange, label }: PaginationProps): import("react").JSX.Element;

package/components/pagination/pagination.js

@@ -0,0 +1,60 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { ChevronLeft as NavArrowLeft, ChevronRight as NavArrowRight } from "lucide-react";
+import { AnimatePresence, animate, motion, useMotionValue, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./pagination.module.css";
+/** When the five page window shifts, numbers travel like a belt: each one moves by the same number of slots. */
+const slot = 1000 / 9; // One button plus the gap (36px + 4px), as a percentage of the button width.
+const slide = {
+    enter: (shift) => ({ opacity: 0, x: `${slot * shift}%` }),
+    center: { opacity: 1, x: "0%" },
+    exit: (shift) => ({ opacity: 0, x: `${-slot * shift}%`, transition: { x: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.instant, ease: [...motionTokens.ease.standard] } } }),
+};
+export function Pagination({ page, pageCount, onPageChange, label = "Pagination" }) {
+    const reduced = useReducedMotion() ?? false;
+    const navRef = useRef(null);
+    const markX = useMotionValue(0);
+    const markY = useMotionValue(0);
+    const safePageCount = Math.max(0, Math.floor(pageCount));
+    const currentPage = safePageCount > 0 ? Math.min(Math.max(1, Math.floor(page)), safePageCount) : 0;
+    const start = safePageCount > 0 ? Math.max(1, Math.min(safePageCount - 4, currentPage - 2)) : 1;
+    const [previousStart, setPreviousStart] = useState(start);
+    const [shift, setShift] = useState(0);
+    if (previousStart !== start) {
+        setShift(start - previousStart);
+        setPreviousStart(start);
+    }
+    const visible = Array.from({ length: Math.min(safePageCount, 5) }, (_, index) => start + index);
+    // One mark travels to the current page's final slot. Until it has measured once (and during server render),
+    // the current button draws its own border so nothing flashes before hydration.
+    useLayoutEffect(() => {
+        const nav = navRef.current;
+        const current = nav?.querySelector("[aria-current='page']");
+        if (!nav || !current)
+            return;
+        const place = (instant) => {
+            const x = current.offsetLeft, y = current.offsetTop;
+            if (instant || reduced) {
+                markX.jump(x);
+                markY.jump(y);
+                return;
+            }
+            animate(markX, x, motionTokens.spring.morph);
+            animate(markY, y, motionTokens.spring.morph);
+        };
+        place(!("markReady" in nav.dataset));
+        nav.dataset.markReady = "";
+        let size = `${nav.offsetWidth}x${nav.offsetHeight}`;
+        const observer = new ResizeObserver(() => { const next = `${nav.offsetWidth}x${nav.offsetHeight}`; if (next !== size) {
+            size = next;
+            place(true);
+        } });
+        observer.observe(nav);
+        return () => observer.disconnect();
+    }, [currentPage, start, safePageCount, reduced, markX, markY]);
+    if (!safePageCount)
+        return _jsx("nav", { className: styles.nav, "aria-label": label });
+    return _jsxs("nav", { ref: navRef, className: styles.nav, "aria-label": label, children: [_jsx("button", { type: "button", className: styles.step, onClick: () => onPageChange(currentPage - 1), disabled: currentPage <= 1, "aria-label": "Previous page", children: _jsx(NavArrowLeft, { width: 16, height: 16, "aria-hidden": "true" }) }), _jsx(motion.span, { "aria-hidden": "true", className: styles.mark, style: { x: markX, y: markY } }), _jsx(AnimatePresence, { mode: "popLayout", initial: false, custom: shift, children: visible.map(number => _jsx(motion.button, { type: "button", onClick: () => onPageChange(number), "aria-label": `Page ${number}`, "aria-current": currentPage === number ? "page" : undefined, layout: reduced ? false : "position", layoutDependency: start, custom: shift, variants: slide, initial: reduced ? false : "enter", animate: "center", exit: reduced ? undefined : "exit", transition: reduced ? { duration: 0 } : { x: motionTokens.spring.smooth, layout: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] } }, children: number }, number)) }), _jsx("button", { type: "button", className: styles.step, onClick: () => onPageChange(currentPage + 1), disabled: currentPage >= safePageCount, "aria-label": "Next page", children: _jsx(NavArrowRight, { width: 16, height: 16, "aria-hidden": "true" }) })] });
+}

package/components/pagination/pagination.module.css

@@ -0,0 +1,16 @@
+.nav { position: relative; display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-tight); }
+.nav button { position: relative; display: grid; width: var(--control-height-sm); height: var(--control-height-sm); place-items: center; border: 1px solid transparent; border-radius: var(--radius-control); background: transparent; color: var(--text-secondary); font: inherit; font-size: var(--text-xs); font-variant-numeric: tabular-nums; cursor: pointer; transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard); }
+.nav button[aria-current="page"] { color: var(--foreground); }
+/* One shared mark travels between pages. Before it has measured (server render), the button draws its own. */
+.mark { position: absolute; top: 0; left: 0; width: var(--control-height-sm); height: var(--control-height-sm); box-sizing: border-box; border: 1px solid var(--border); border-radius: var(--radius-control); background: var(--surface); box-shadow: var(--shadow-resting); opacity: 0; pointer-events: none; }
+.nav[data-mark-ready] .mark { opacity: 1; }
+.nav:not([data-mark-ready]) button[aria-current="page"] { border-color: var(--border); background: var(--surface); box-shadow: var(--shadow-resting); }
+/* Only the arrows press in. Page numbers move with Motion, so they keep CSS off transform and opacity. */
+.nav .step { transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), opacity var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+.nav .step:active:not(:disabled) { transform: scale(.96); transition-duration: var(--duration-fast), var(--duration-fast), var(--duration-fast), 100ms; transition-timing-function: var(--ease-standard), var(--ease-standard), var(--ease-standard), ease-out; }
+.nav button:disabled { opacity: .4; cursor: not-allowed; }
+@media (hover: hover) and (pointer: fine) {
+  .nav button:hover:not(:disabled) { background: var(--surface-muted); color: var(--foreground); }
+  .nav[data-mark-ready] button[aria-current="page"]:hover { background: transparent; }
+}
+@media (prefers-reduced-motion: reduce) { .nav button, .nav .step { transition: none; } .nav .step:active:not(:disabled) { transform: none; } }

package/components/password-field/password-field.d.ts

@@ -0,0 +1,14 @@
+import type { InputHTMLAttributes } from "react";
+/** The toggle's names. Both have English defaults; pass the ones you translate. */
+export interface PasswordFieldMessages {
+    showPassword: string;
+    hidePassword: string;
+}
+export declare const defaultPasswordFieldMessages: PasswordFieldMessages;
+export interface PasswordFieldProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    label: string;
+    description?: string;
+    /** Translated or reworded toggle names. */
+    messages?: Partial<PasswordFieldMessages>;
+}
+export declare const PasswordField: import("react").ForwardRefExoticComponent<PasswordFieldProps & import("react").RefAttributes<HTMLInputElement>>;

package/components/password-field/password-field.js

@@ -0,0 +1,51 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { forwardRef, useEffect, useId, useRef, useState } from "react";
+import { AnimatePresence, motion, useReducedMotion } from "motion/react";
+import { motionTokens } from "../../lib/motion-tokens.js";
+import styles from "./password-field.module.css";
+export const defaultPasswordFieldMessages = { showPassword: "Show password", hidePassword: "Hide password" };
+/** One eye that a slash draws across, cutting the outline beneath it, instead of swapping two icons. */
+function EyeMorph({ slashed }) {
+    const reduced = useReducedMotion();
+    const maskId = `eye-${useId().replace(/[^a-zA-Z0-9_-]/g, "")}`;
+    const slash = { pathLength: slashed ? 1 : 0, opacity: slashed ? 1 : 0 };
+    const transition = reduced ? { duration: 0 } : { pathLength: { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.standard] }, opacity: { duration: motionTokens.duration.instant } };
+    return _jsxs("svg", { width: 18, height: 18, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", children: [_jsxs("mask", { id: maskId, maskUnits: "userSpaceOnUse", x: "0", y: "0", width: "24", height: "24", children: [_jsx("rect", { width: "24", height: "24", fill: "white", stroke: "none" }), _jsx(motion.path, { d: "M2 2l20 20", stroke: "black", strokeWidth: 5, initial: false, animate: slash, transition: transition })] }), _jsxs("g", { mask: `url(#${maskId})`, children: [_jsx("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }), _jsx("circle", { cx: "12", cy: "12", r: "3" })] }), _jsx(motion.path, { d: "M2 2l20 20", initial: false, animate: slash, transition: transition })] });
+}
+/** Changed words rise in and unblur while unchanged words hold still. Assistive tech reads the plain copy. */
+function MotionText({ text }) {
+    const reduced = useReducedMotion();
+    const words = text.split(" ");
+    return _jsxs(_Fragment, { children: [_jsx("span", { className: styles.srOnly, children: text }), _jsx("span", { className: styles.words, "aria-hidden": "true", children: _jsx(AnimatePresence, { initial: false, mode: "popLayout", children: words.map((word, index) => _jsx(motion.span, { className: styles.word, initial: reduced ? { opacity: 0 } : { opacity: 0, y: "0.35em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { opacity: 1, y: 0, filter: "blur(0px)" }, exit: reduced ? { opacity: 0, transition: { duration: 0 } } : { opacity: 0, y: "-0.35em", filter: `blur(${motionTokens.blur.subtle}px)`, transition: { duration: motionTokens.duration.exit, ease: [...motionTokens.ease.exit] } }, transition: reduced ? { duration: motionTokens.duration.instant } : { duration: motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: index < words.length - 1 ? `${word} ` : word }, `${index}:${word}`)) }) })] });
+}
+/** Helper and error copy: the row opens its height on a spring, then the words settle in. */
+function FieldMessage({ id, text, className, alert }) {
+    return _jsx(AnimatePresence, { initial: false, children: text ? _jsx(MessageRow, { id: id, text: text, className: className, alert: alert }, "message") : null });
+}
+/** The row tracks the measured copy, so a longer message that wraps opens its next line instead of snapping. */
+function MessageRow({ id, text, className, alert }) {
+    const reduced = useReducedMotion();
+    const copyRef = useRef(null);
+    const [height, setHeight] = useState("auto");
+    useEffect(() => {
+        const node = copyRef.current;
+        if (!node || typeof ResizeObserver === "undefined")
+            return;
+        const observer = new ResizeObserver(([entry]) => { if (entry)
+            setHeight(entry.borderBoxSize?.[0]?.blockSize ?? node.offsetHeight); });
+        observer.observe(node);
+        return () => observer.disconnect();
+    }, []);
+    return _jsx(motion.span, { className: styles.messageSlot, initial: { height: 0, opacity: 0 }, animate: { height, opacity: 1 }, exit: { height: 0, opacity: 0, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.instant } } }, transition: reduced ? { duration: 0 } : { height: motionTokens.spring.smooth, opacity: { duration: motionTokens.duration.fast } }, children: _jsx(motion.span, { ref: copyRef, id: id, className: className, role: alert ? "alert" : undefined, initial: reduced ? false : { y: "0.35em", filter: `blur(${motionTokens.blur.soft}px)` }, animate: { y: 0, filter: "blur(0px)" }, transition: { duration: reduced ? 0 : motionTokens.duration.standard, ease: [...motionTokens.ease.enter] }, children: _jsx(MotionText, { text: text }) }) });
+}
+export const PasswordField = forwardRef(function PasswordField({ label, description, messages: messagesProp, id, className, ...props }, ref) {
+    const messages = { ...defaultPasswordFieldMessages, ...messagesProp };
+    const generated = useId();
+    const controlId = id ?? generated;
+    const [visible, setVisible] = useState(false);
+    const [toggled, setToggled] = useState(false);
+    const hintId = description ? `${controlId}-description` : undefined;
+    // data-reveal only appears after the first toggle, so the value resolves on each change but never on mount.
+    return _jsxs("div", { className: styles.field, children: [_jsx("label", { htmlFor: controlId, children: label }), _jsxs("div", { className: styles.shell, children: [_jsx("input", { ...props, ref: ref, id: controlId, type: visible ? "text" : "password", "data-reveal": toggled ? (visible ? "shown" : "hidden") : undefined, "aria-describedby": [props["aria-describedby"], hintId].filter(Boolean).join(" ") || undefined, className: [styles.input, className].filter(Boolean).join(" ") }), _jsx("button", { type: "button", onClick: () => { setVisible(current => !current); setToggled(true); }, "aria-label": visible ? messages.hidePassword : messages.showPassword, "aria-pressed": visible, children: _jsx(EyeMorph, { slashed: visible }) })] }), _jsx(FieldMessage, { id: hintId, text: description, className: styles.hint })] });
+});

package/components/password-field/password-field.module.css

@@ -0,0 +1,27 @@
+/* No row gap: grid tracks clamp a negative margin at zero, so a closed message row would still pay the gap. Each row carries its own space instead. */
+.field { display: grid; min-width: 0; }
+.field label { margin-bottom: var(--space-related); font-size: var(--text-sm); font-weight: 500; }
+/* Focus shows as a darker border only; the shell never changes size. The toggle sits with an even inset on top, bottom and right. */
+.shell { display: flex; min-height: var(--control-height-md); align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-control); padding: 0 calc((var(--control-height-md) - 2px - 30px) / 2) 0 var(--space-group); background: var(--surface); transition: border-color var(--duration-fast) var(--ease-standard); }
+@media (hover: hover) and (pointer: fine) { .shell:hover:not(:focus-within) { border-color: var(--foreground); } }
+.shell:focus-within { border-color: var(--foreground); }
+.shell:has(.input[aria-invalid="true"]) { border-color: var(--danger); }
+.input { width: 100%; min-width: 0; border: 0; background: transparent; color: var(--foreground); font: inherit; font-size: var(--text-sm); line-height: var(--leading-body); outline: 0; }
+.input::placeholder { color: var(--text-muted); }
+/* Switching between dots and characters resolves in place instead of snapping. Swapping the keyframe name restarts it. */
+.input[data-reveal="shown"] { animation: resolve-shown var(--duration-standard) var(--ease-enter); }
+.input[data-reveal="hidden"] { animation: resolve-hidden var(--duration-standard) var(--ease-enter); }
+@keyframes resolve-shown { from { opacity: .35; filter: blur(2px); } }
+@keyframes resolve-hidden { from { opacity: .35; filter: blur(2px); } }
+.shell button { display: grid; width: 30px; height: 30px; flex: 0 0 auto; place-items: center; border: 0; border-radius: var(--radius-control); background: transparent; color: var(--text-muted); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform var(--duration-spring) var(--ease-spring); }
+@media (hover: hover) and (pointer: fine) { .shell button:hover { background: var(--surface-muted); color: var(--foreground); } }
+.shell button:active { transform: scale(.96); transition: background-color var(--duration-fast) var(--ease-standard), color var(--duration-fast) var(--ease-standard), transform 100ms var(--ease-standard); }
+.shell button[aria-pressed="true"] { color: var(--foreground); }
+/* The row's space is padding inside the clipped slot, so the height animates from a true zero. */
+.messageSlot { display: block; overflow: hidden; }
+.hint { display: block; padding-top: var(--space-related); color: var(--text-muted); font-size: var(--text-xs); line-height: var(--leading-body); }
+/* Words are measured against this box when they pop out to leave, so it must be the positioned parent. */
+.words { position: relative; display: block; }
+.word { display: inline-block; white-space: pre; }
+.srOnly { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
+@media (prefers-reduced-motion: reduce) { .shell, .shell button { transition: none; } .shell button:active { transform: none; } .input[data-reveal] { animation: none; } }

package/components/password-strength/password-strength.d.ts

@@ -0,0 +1,107 @@
+import type { InputHTMLAttributes } from "react";
+export interface PasswordRule {
+    id: string;
+    label: string;
+    test: (password: string) => boolean;
+    /** Characters still missing. Shown as a rolling count beside the rule while it is unmet. */
+    remaining?: (password: string) => number;
+}
+export interface PasswordStrengthResult {
+    level: 0 | 1 | 2 | 3 | 4;
+    label: string;
+    met: string[];
+    /** True while the password is shorter than the short length, so the meter holds at its first step. */
+    short?: boolean;
+}
+/** The strength words, one per meter step. Override them to translate the meter. */
+export interface PasswordStrengthLevels {
+    tooShort: string;
+    weak: string;
+    fair: string;
+    good: string;
+    strong: string;
+}
+/** Every user-facing string in PasswordStrength. All have English defaults; pass only the ones you change. */
+export interface PasswordStrengthMessages {
+    levels: PasswordStrengthLevels;
+    /** Name of the show password toggle. It is a pressed toggle (aria-pressed), so the name stays the same in both states. */
+    showPassword: string;
+    /** Accessible name of the strength meter. */
+    meterLabel: string;
+    /** Meter value text while the field is empty. */
+    noPassword: string;
+    /** Accessible name of the requirements list. */
+    rulesLabel: string;
+    /** Read after a rule's label for screen readers, including any leading punctuation. */
+    ruleMet: string;
+    ruleNotMet: string;
+    /** Words around the rolling count beside an unmet rule, as in "4 more". */
+    remainingPrefix: string;
+    remainingSuffix: string;
+    /** The polite live-region summary read after each change. */
+    summary: (result: {
+        label: string;
+        met: number;
+        total: number;
+    }) => string;
+}
+export declare const defaultPasswordStrengthMessages: PasswordStrengthMessages;
+/** Partial messages, with partial strength words, for the `messages` prop. */
+export type PasswordStrengthMessagesInput = Partial<Omit<PasswordStrengthMessages, "levels">> & {
+    levels?: Partial<PasswordStrengthLevels>;
+};
+/**
+ * A new password field that shows how strong the password is while it is typed: four segments fill and change tone,
+ * each rule checks off with a drawn tick, and the strength word morphs in place. Use it when creating or changing a password;
+ * use a plain password field for sign in. Scoring happens on the device, nothing is sent anywhere.
+ */
+export interface PasswordStrengthProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type" | "value" | "defaultValue" | "children"> {
+    label: string;
+    value?: string;
+    defaultValue?: string;
+    onValueChange?: (value: string, strength: PasswordStrengthResult) => void;
+    /** Rules to check. Strength is the share of rules met, spread over four steps. */
+    rules?: PasswordRule[];
+    /** Error copy tied to the field. The field shakes once each time a new error appears. */
+    error?: string;
+    revealed?: boolean;
+    onRevealedChange?: (revealed: boolean) => void;
+    /** Translated or reworded copy. Every string has an English default; see PasswordStrengthMessages. */
+    messages?: PasswordStrengthMessagesInput;
+    /** Below this many characters the meter holds at its first step and reads "Too short". Defaults to 8. */
+    shortLength?: number;
+    /** How characters are counted for shortLength. Defaults to code points, so an emoji counts once; pass `password => password.length` to count UTF-16 units like a server might. */
+    countCharacters?: (password: string) => number;
+}
+/** Counts code points, so an emoji or other astral character counts as one. */
+export declare const countCodePoints: (password: string) => number;
+/** Labels for the built-in rules. `length` receives the minimum length. */
+export interface PasswordRuleLabels {
+    length: (minLength: number) => string;
+    case: string;
+    number: string;
+    symbol: string;
+}
+export interface PasswordRuleOptions {
+    /** Characters the length rule asks for. Defaults to 12. */
+    minLength?: number;
+    /** Translated or reworded rule labels. */
+    labels?: Partial<PasswordRuleLabels>;
+    /** How the length rule counts characters. Defaults to code points. */
+    countCharacters?: (password: string) => number;
+}
+/** The built-in rules (length, mixed case, number, symbol) with your own minimum length, labels and character count. */
+export declare function createPasswordRules({ minLength, labels, countCharacters }?: PasswordRuleOptions): PasswordRule[];
+export declare const defaultPasswordRules: PasswordRule[];
+export interface EstimateStrengthOptions {
+    /** Below this many characters a password stays at the first step, however varied it is. Defaults to 8. */
+    shortLength?: number;
+    /** Strength words for the result's label. */
+    levels?: Partial<PasswordStrengthLevels>;
+    /** How characters are counted for shortLength. Defaults to code points. */
+    countCharacters?: (password: string) => number;
+}
+/** Scores a password on the device: one step per share of rules met, capped at the first step while it is shorter than the short length (8 by default). */
+export declare function estimateStrength(password: string, rules?: PasswordRule[], { shortLength, levels, countCharacters }?: EstimateStrengthOptions): PasswordStrengthResult;
+export declare const PasswordStrength: import("react").ForwardRefExoticComponent<PasswordStrengthProps & import("react").RefAttributes<HTMLInputElement>>;
+export default PasswordStrength;