@enigmax/primitives 0.6.0 → 0.7.0

package/dist/react/index.js

@@ -1,6 +1,9 @@
-import { createMarquee, createInput, createButton } from '../chunk-WCB7V7XO.js';
+"use client";
+import { generatePassword, estimatePasswordStrength, INPUT_ICON_PATHS, createMarquee, createInput, createButton } from '../chunk-42Y7OOJM.js';
+export { estimatePasswordStrength, generatePassword } from '../chunk-42Y7OOJM.js';
 import { createSearch } from '../chunk-UZFEEFMF.js';
-import { useRef, useState, useMemo, useEffect, useCallback, useLayoutEffect } from 'react';
+import { forwardRef, useRef, useState, useId, useCallback, useEffect, useMemo, useLayoutEffect } from 'react';
+import { jsx, jsxs } from 'react/jsx-runtime';
 
 var useIsomorphicLayoutEffect = typeof window === "undefined" ? useEffect : useLayoutEffect;
 function useMarquee(options = {}) {
@@ -182,5 +185,250 @@ function useButton(options = {}) {
     }
   };
 }
+var ICON_PROPS = {
+  viewBox: "0 0 24 24",
+  width: "1em",
+  height: "1em",
+  fill: "none",
+  stroke: "currentColor",
+  strokeWidth: 2,
+  strokeLinecap: "round",
+  strokeLinejoin: "round",
+  "aria-hidden": true
+};
+function Icon({ paths }) {
+  return /* @__PURE__ */ jsx("svg", { ...ICON_PROPS, children: paths.map((path) => /* @__PURE__ */ jsx("path", { d: path }, path)) });
+}
+function writeValue(input, next) {
+  const setter = Object.getOwnPropertyDescriptor(HTMLInputElement.prototype, "value")?.set;
+  if (setter) setter.call(input, next);
+  else input.value = next;
+  input.dispatchEvent(new Event("input", { bubbles: true }));
+}
+var Input = forwardRef(function Input2({
+  reveal,
+  revealLabels,
+  generate = false,
+  generateLabel = "Generate a password",
+  revealOnGenerate = true,
+  copyOnGenerate = false,
+  onGenerate,
+  actions = [],
+  position = "end",
+  strength = false,
+  onStrengthChange,
+  breach,
+  breachDelay = 500,
+  onBreachChange,
+  wrapperProps,
+  fieldProps,
+  classNames,
+  children,
+  type = "text",
+  onChange,
+  ...props
+}, forwardedRef) {
+  const innerRef = useRef(null);
+  const [revealed, setRevealed] = useState(false);
+  const describedBy = useId();
+  const isPassword = type === "password";
+  const showReveal = reveal ?? isPassword;
+  const showGenerate = generate !== false && isPassword;
+  const controlled = props.value !== void 0;
+  const [ownValue, setOwnValue] = useState(String(props.defaultValue ?? ""));
+  const value = controlled ? String(props.value ?? "") : ownValue;
+  const handleChange = useCallback((event) => {
+    if (!controlled) setOwnValue(event.target.value);
+    onChange?.(event);
+  }, [controlled, onChange]);
+  const caret = useRef(null);
+  const toggleReveal = useCallback(() => {
+    const input = innerRef.current;
+    if (input && typeof document !== "undefined" && document.activeElement === input) {
+      try {
+        const { selectionStart, selectionEnd } = input;
+        caret.current = selectionStart === null || selectionEnd === null ? null : [selectionStart, selectionEnd];
+      } catch {
+        caret.current = null;
+      }
+    }
+    setRevealed((current) => !current);
+  }, []);
+  useEffect(() => {
+    const selection = caret.current;
+    if (!selection) return;
+    caret.current = null;
+    const restore = () => {
+      const input = innerRef.current;
+      if (!input || document.activeElement !== input) return;
+      try {
+        input.setSelectionRange(selection[0], selection[1]);
+      } catch {
+      }
+    };
+    restore();
+    const timer = setTimeout(restore, 0);
+    return () => clearTimeout(timer);
+  }, [revealed]);
+  const handleGenerate = useCallback(() => {
+    const input = innerRef.current;
+    if (!input) return;
+    const password = generatePassword(typeof generate === "object" ? generate : {});
+    writeValue(input, password);
+    if (revealOnGenerate) setRevealed(true);
+    if (copyOnGenerate) void navigator.clipboard?.writeText(password).catch(() => {
+    });
+    input.focus();
+    onGenerate?.(password);
+  }, [generate, revealOnGenerate, copyOnGenerate, onGenerate]);
+  const estimateOptions = typeof strength === "object" ? strength : void 0;
+  const userInputs = estimateOptions?.userInputs;
+  const report = useMemo(
+    () => strength === false ? null : estimatePasswordStrength(value, { userInputs }),
+    // The array is compared by identity, so a literal would re-estimate every render.
+    [strength, value, userInputs]
+  );
+  const strengthListener = useRef(onStrengthChange);
+  strengthListener.current = onStrengthChange;
+  useEffect(() => {
+    if (report) strengthListener.current?.(report);
+  }, [report]);
+  const [breachState, setBreachState] = useState({ status: "idle", count: 0, error: null });
+  const breachListener = useRef(onBreachChange);
+  breachListener.current = onBreachChange;
+  useEffect(() => {
+    if (!breach || !value) {
+      setBreachState({ status: "idle", count: 0, error: null });
+      return;
+    }
+    const controller = new AbortController();
+    const timer = setTimeout(() => {
+      setBreachState({ status: "checking", count: 0, error: null });
+      breach(value, { signal: controller.signal }).then((result) => {
+        if (controller.signal.aborted) return;
+        setBreachState({ status: result.breached ? "breached" : "safe", count: result.count, error: null });
+      }).catch((error) => {
+        if (controller.signal.aborted) return;
+        setBreachState({ status: "error", count: 0, error });
+      });
+    }, breachDelay);
+    return () => {
+      clearTimeout(timer);
+      controller.abort();
+    };
+  }, [breach, value, breachDelay]);
+  useEffect(() => {
+    breachListener.current?.(breachState);
+  }, [breachState]);
+  const builtIn = [];
+  if (showGenerate) {
+    builtIn.push({
+      name: "generate",
+      label: generateLabel,
+      icon: /* @__PURE__ */ jsx(Icon, { paths: INPUT_ICON_PATHS.generate }),
+      onSelect: handleGenerate
+    });
+  }
+  if (showReveal) {
+    builtIn.push({
+      name: "reveal",
+      label: revealed ? revealLabels?.hide ?? "Hide password" : revealLabels?.show ?? "Show password",
+      icon: /* @__PURE__ */ jsx(Icon, { paths: revealed ? INPUT_ICON_PATHS.eyeOff : INPUT_ICON_PATHS.eye }),
+      pressed: revealed,
+      onSelect: toggleReveal
+    });
+  }
+  const overridden = new Set(actions.map((action) => action.name));
+  const rendered = [...builtIn.filter((action) => !overridden.has(action.name)), ...actions].filter((action) => action.visible !== false);
+  const locked = props.disabled === true || props.readOnly === true;
+  const buttons = rendered.length === 0 ? null : /* @__PURE__ */ jsx("span", { "data-enigma-input-actions": "", "data-position": position, className: classNames?.actions, children: rendered.map((action) => /* @__PURE__ */ jsx(
+    "button",
+    {
+      type: "button",
+      "data-enigma-input-action": action.name,
+      className: classNames?.action,
+      "aria-label": action.label,
+      title: action.label,
+      "aria-pressed": action.pressed,
+      disabled: locked,
+      onMouseDown: (event) => event.preventDefault(),
+      onClick: action.onSelect,
+      children: action.icon
+    },
+    action.name
+  )) });
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...wrapperProps,
+      "data-enigma-input-root": "",
+      "data-revealed": revealed ? "" : void 0,
+      "data-breached": breachState.status === "breached" ? "" : void 0,
+      "data-score": report && !report.empty ? report.score : void 0,
+      children: [
+        /* @__PURE__ */ jsxs("div", { ...fieldProps, "data-enigma-input-field": "", children: [
+          position === "start" && buttons,
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ...props,
+              ref: (node) => {
+                innerRef.current = node;
+                if (typeof forwardedRef === "function") forwardedRef(node);
+                else if (forwardedRef) forwardedRef.current = node;
+              },
+              type: revealed && isPassword ? "text" : type,
+              onChange: handleChange,
+              "data-enigma-input": "",
+              "aria-describedby": report ? describedBy : props["aria-describedby"]
+            }
+          ),
+          position === "end" && buttons
+        ] }),
+        report && /* @__PURE__ */ jsx(PasswordStrength, { id: describedBy, report, classNames: classNames?.strength }),
+        children
+      ]
+    }
+  );
+});
+var SCORE_LABELS = ["Very weak", "Weak", "Fair", "Strong", "Very strong"];
+function PasswordStrength({
+  value = "",
+  report,
+  userInputs,
+  segments = 5,
+  labels = SCORE_LABELS,
+  showWarning = true,
+  classNames,
+  ...props
+}) {
+  const computed = useMemo(
+    () => report ?? estimatePasswordStrength(value, { userInputs }),
+    [report, value, userInputs]
+  );
+  const score = computed.score;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ...props,
+      "data-enigma-password-strength": "",
+      "data-score": computed.empty ? void 0 : score,
+      "data-empty": computed.empty ? "" : void 0,
+      children: [
+        /* @__PURE__ */ jsx("div", { "data-enigma-password-strength-track": "", "aria-hidden": "true", className: classNames?.track, children: Array.from({ length: segments }, (unused, index) => /* @__PURE__ */ jsx(
+          "span",
+          {
+            "data-enigma-password-strength-segment": "",
+            className: classNames?.segment,
+            "data-filled": !computed.empty && index <= score ? "" : void 0
+          },
+          index
+        )) }),
+        /* @__PURE__ */ jsx("p", { "data-enigma-password-strength-label": "", role: "status", "aria-live": "polite", className: classNames?.label, children: computed.empty ? "" : labels[score] ?? "" }),
+        showWarning && !computed.empty && computed.warnings.length > 0 && /* @__PURE__ */ jsx("p", { "data-enigma-password-strength-warning": "", className: classNames?.warning, children: computed.warnings[0] })
+      ]
+    }
+  );
+}
 
-export { useButton, useInput, useMarquee, useSearch };
+export { Input, PasswordStrength, useButton, useInput, useMarquee, useSearch };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.6.0",
+  "version": "0.7.0",
   "description": "Headless interaction primitives: the behaviour, the timing and the accessibility of components like a draggable infinite marquee, with no styles of their own. Framework-agnostic core plus thin adapters.",
   "type": "module",
   "main": "./dist/index.js",
@@ -23,7 +23,8 @@
   "scripts": {
     "build": "tsup",
     "typecheck": "tsc --noEmit",
-    "test": "playwright test",
+    "test": "npm run test:fixtures && playwright test",
+    "test:fixtures": "esbuild test/fixture/react.tsx --bundle --format=esm --jsx=automatic --outfile=test/fixture/build/react.js --tsconfig=tsconfig.json",
     "test:install": "playwright install chromium",
     "prepublishOnly": "npm run typecheck && npm run build"
   },
@@ -36,8 +37,8 @@
     "LICENSE"
   ],
   "peerDependencies": {
-    "react": ">=18",
-    "fuse.js": ">=6"
+    "fuse.js": ">=6",
+    "react": ">=18"
   },
   "peerDependenciesMeta": {
     "react": {
@@ -50,10 +51,12 @@
   "devDependencies": {
     "@playwright/test": "^1.48.0",
     "@types/react": "^19.2.0",
+    "@types/react-dom": "^19.2.4",
+    "fuse.js": "^7.0.0",
     "react": "^19.2.0",
+    "react-dom": "^19.2.8",
     "tsup": "^8.0.0",
-    "typescript": "^5.0.0",
-    "fuse.js": "^7.0.0"
+    "typescript": "^5.0.0"
   },
   "engines": {
     "node": ">=18"

package/recipes/input/styles.css

@@ -0,0 +1,54 @@
+/* A starting point for the field, yours to edit. The primitive renders the structure and
+   publishes its state through data-* attributes; every colour below is this file's. */
+
+[data-enigma-input-root] { display: grid; gap: 0.375rem; }
+
+[data-enigma-input-field] {
+    display: flex; align-items: center; gap: 0.375rem;
+    padding: 0 0.75rem;
+    background: #171717; border: 1px solid #404040; border-radius: 0.5rem;
+}
+[data-enigma-input-field]:focus-within { border-color: #a3a3a3; }
+
+[data-enigma-input] {
+    flex: 1; min-width: 0; padding: 0.625rem 0;
+    font-size: 0.875rem; color: #f5f5f5;
+    background: transparent; border: 0; outline: none;
+}
+
+/* A breached password is worth showing on the field itself, not only in the message. */
+[data-enigma-input-root][data-breached] [data-enigma-input-field] { border-color: #dc2626; }
+
+[data-enigma-input-actions] { display: inline-flex; gap: 0.125rem; }
+[data-enigma-input-actions][data-position="start"] { order: -1; }
+
+[data-enigma-input-action] {
+    display: grid; place-items: center;
+    width: 1.75rem; height: 1.75rem;
+    color: #a3a3a3; background: none; border: 0; border-radius: 0.375rem;
+    cursor: pointer; font-size: 0.9375rem;
+}
+[data-enigma-input-action]:hover { color: #f5f5f5; background: #262626; }
+[data-enigma-input-action][aria-pressed="true"] { color: #fbbf24; }
+[data-enigma-input-action]:disabled { opacity: 0.5; cursor: default; }
+
+/* The meter. Five bars, one per score, red through green - the palette lives here because
+   a headless package has no business choosing what "strong" looks like on your brand. */
+[data-enigma-password-strength] { display: grid; gap: 0.25rem; }
+[data-enigma-password-strength-track] { display: grid; grid-template-columns: repeat(5, 1fr); gap: 0.25rem; }
+
+[data-enigma-password-strength-segment] {
+    height: 0.25rem; border-radius: 999px; background: #262626;
+    transition: background-color 120ms ease-out;
+}
+
+[data-score="0"] [data-enigma-password-strength-segment][data-filled] { background: #dc2626; }
+[data-score="1"] [data-enigma-password-strength-segment][data-filled] { background: #ea580c; }
+[data-score="2"] [data-enigma-password-strength-segment][data-filled] { background: #eab308; }
+[data-score="3"] [data-enigma-password-strength-segment][data-filled] { background: #84cc16; }
+[data-score="4"] [data-enigma-password-strength-segment][data-filled] { background: #16a34a; }
+
+[data-enigma-password-strength-label] { margin: 0; font-size: 0.75rem; color: #a3a3a3; }
+[data-enigma-password-strength-warning] { margin: 0; font-size: 0.75rem; color: #fbbf24; }
+/* An empty field is not a bad password: say nothing until there is something to say. */
+[data-enigma-password-strength][data-empty] [data-enigma-password-strength-label] { visibility: hidden; }

package/recipes/input/tailwind.tsx

@@ -0,0 +1,84 @@
+"use client";
+
+import { useState } from "react";
+import { Input, type BreachChecker, type BreachState } from "@enigmax/primitives/react";
+
+/**
+ * A registration password field, styled with Tailwind. Yours to edit.
+ *
+ * The primitive renders the structure and publishes its state on `data-*`; every colour
+ * below is this file's. The meter's five bars read the score from the ROOT, which is why
+ * they colour themselves through a group variant rather than five separate components.
+ */
+
+interface PasswordFieldProps {
+    value: string;
+    onChange: (value: string) => void;
+    /** What the visitor has already typed elsewhere, so the meter can spot it in there. */
+    userInputs?: string[];
+    /**
+     * Check the password against a breach corpus. `enigma add password-breach` gives you
+     * `checkPasswordBreach` from @enigmax/utils, which asks Have I Been Pwned without
+     * sending the password anywhere. Leave it out and the field simply does not check.
+     */
+    breach?: BreachChecker;
+    /** Your own message, from your own validation. */
+    error?: string;
+}
+
+const SEGMENT = [
+    "h-1 rounded-full bg-neutral-800 transition-colors",
+    "group-data-[score=0]/field:data-[filled]:bg-red-600",
+    "group-data-[score=1]/field:data-[filled]:bg-orange-600",
+    "group-data-[score=2]/field:data-[filled]:bg-yellow-500",
+    "group-data-[score=3]/field:data-[filled]:bg-lime-500",
+    "group-data-[score=4]/field:data-[filled]:bg-green-600"
+].join(" ");
+
+export function PasswordField({ value, onChange, userInputs, breach: check, error }: PasswordFieldProps) {
+    const [breach, setBreach] = useState<BreachState>({ status: "idle", count: 0, error: null });
+
+    return (
+        <div className="grid gap-1.5">
+            <label htmlFor="password" className="text-xs text-neutral-400">Password</label>
+
+            <Input
+                id="password"
+                type="password"
+                autoComplete="new-password"
+                value={value}
+                onChange={(event) => onChange(event.target.value)}
+                generate={{ length: 20 }}
+                strength={{ userInputs }}
+                // The check is a prop, so the network request is a decision this file makes
+                // rather than one the field takes on its own.
+                breach={check}
+                onBreachChange={setBreach}
+                wrapperProps={{ className: "group/field grid gap-1.5" }}
+                fieldProps={{
+                    className: "flex items-center gap-1.5 rounded-lg border border-neutral-700 bg-neutral-900 px-3 focus-within:border-neutral-400 group-data-[breached]/field:border-red-600"
+                }}
+                className="min-w-0 flex-1 border-0 bg-transparent py-2.5 text-sm text-neutral-100 outline-none"
+                classNames={{
+                    actions: "inline-flex gap-0.5",
+                    action: "grid h-7 w-7 place-items-center rounded-md text-neutral-400 hover:bg-neutral-800 hover:text-neutral-100 aria-pressed:text-amber-400 disabled:opacity-50",
+                    strength: {
+                        track: "grid grid-cols-5 gap-1",
+                        segment: SEGMENT,
+                        label: "m-0 text-xs text-neutral-400",
+                        warning: "m-0 text-xs text-amber-400"
+                    }
+                }}
+            >
+                {/* Whatever a breach means here is this form's decision, so this form makes
+                    it. The field reports the count and stops. */}
+                {breach.status === "breached" && (
+                    <p className="m-0 text-xs text-red-500">
+                        This password has appeared in {breach.count.toLocaleString()} breaches. Please pick another.
+                    </p>
+                )}
+                {error && <p className="m-0 text-xs text-red-500">{error}</p>}
+            </Input>
+        </div>
+    );
+}

package/registry.json

@@ -92,8 +92,8 @@
     },
     {
       "name": "input",
-      "title": "Input affordances",
-      "description": "In-field buttons with no styles of their own. A password field gets its reveal toggle automatically; the icon, label, side and container are all replaceable, and any other action plugs into the same mechanism.",
+      "title": "Input, with what a password field needs",
+      "description": "A field you pass props to, with no styles of its own. A password gets its reveal toggle automatically; a generator, a strength meter and a breach check are one prop each and off until you ask. React renders every part of it, so nothing fights your tree.",
       "targets": [
         "vanilla",
         "astro",
@@ -112,13 +112,23 @@
           "createInput"
         ],
         "react": [
-          "useInput"
+          "Input",
+          "PasswordStrength"
         ]
       },
       "files": [
         {
           "path": "src/core/input.ts",
-          "dest": "input.ts",
+          "dest": "input/input.ts",
+          "targets": [
+            "vanilla",
+            "astro",
+            "react"
+          ]
+        },
+        {
+          "path": "src/core/password.ts",
+          "dest": "input/password.ts",
           "targets": [
             "vanilla",
             "astro",
@@ -127,7 +137,7 @@
         },
         {
           "path": "src/react/use-input.ts",
-          "dest": "use-input.ts",
+          "dest": "input/use-input.ts",
           "targets": [
             "react"
           ],
@@ -136,40 +146,60 @@
           }
         },
         {
-          "path": "recipes/input.tailwind.tsx",
-          "dest": "Field.tsx",
+          "path": "recipes/input/styles.css",
+          "dest": "input/styles.css",
           "targets": [
-            "react"
+            "react",
+            "vanilla",
+            "astro"
           ],
-          "style": "tailwind"
+          "style": "css"
         },
         {
-          "path": "recipes/input.css.tsx",
-          "dest": "Field.tsx",
+          "path": "src/react/input.tsx",
+          "dest": "input/index.tsx",
+          "main": true,
           "targets": [
             "react"
           ],
-          "style": "css"
+          "rewrite": {
+            "@/core/input": "./input",
+            "@/core/password": "./password"
+          }
         },
         {
-          "path": "recipes/input.css",
-          "dest": "input.css",
+          "path": "recipes/input/tailwind.tsx",
+          "dest": "input/PasswordField.tsx",
           "targets": [
-            "react",
-            "vanilla",
-            "astro"
+            "react"
           ],
-          "style": "css"
+          "style": "tailwind",
+          "rewrite": {
+            "@enigmax/primitives/react": "./index"
+          }
         }
       ],
       "styles": false,
       "themeHooks": [
+        "[data-enigma-input-root]",
+        "[data-enigma-input-root][data-revealed]",
+        "[data-enigma-input-root][data-breached]",
+        "[data-enigma-input-root][data-score]",
+        "[data-enigma-input-field]",
         "[data-enigma-input]",
         "[data-enigma-input][data-enigma-input-reveal=on]",
         "[data-enigma-input-actions]",
         "[data-enigma-input-actions][data-position=start]",
         "[data-enigma-input-action]",
-        "[data-enigma-input-action=reveal]"
+        "[data-enigma-input-action=reveal]",
+        "[data-enigma-input-action=generate]",
+        "[data-enigma-password-strength]",
+        "[data-enigma-password-strength][data-empty]",
+        "[data-enigma-password-strength-track]",
+        "[data-enigma-password-strength-segment]",
+        "[data-enigma-password-strength-segment][data-filled]",
+        "[data-enigma-password-strength-label]",
+        "[data-enigma-password-strength-warning]"
       ],
       "docs": "docs/notes/primitives.md#input",
       "recipes": [

package/src/core/input.ts

@@ -72,9 +72,32 @@ export interface InputInstance {
     destroy(): void;
 }
 
-/** Neutral 1em glyphs that inherit `color`. Replace them with anything. */
-const EYE = '<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z"/><circle cx="12" cy="12" r="3"/></svg>';
-const EYE_OFF = '<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true"><path d="M10.6 5.2A9.8 9.8 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.2 6.2A17.7 17.7 0 0 0 2 12s3.5 7 10 7a9.6 9.6 0 0 0 4.2-.9"/><path d="m2 2 20 20"/><path d="M9.9 9.9a3 3 0 0 0 4.2 4.2"/></svg>';
+/**
+ * The built-in glyphs, as path data.
+ *
+ * Path data rather than markup because there are two renderers: this file writes an SVG
+ * string into a button it created, and the React component builds elements. Keeping the
+ * shapes here means one definition, and a theme that replaces an icon replaces it in both.
+ * Everything is stroked with `currentColor` at 1em, so an icon inherits the field's text.
+ */
+export const INPUT_ICON_PATHS = {
+    eye: ["M2 12s3.5-7 10-7 10 7 10 7-3.5 7-10 7-10-7-10-7Z", "M15 12a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z"],
+    eyeOff: [
+        "M10.6 5.2A9.8 9.8 0 0 1 12 5c6.5 0 10 7 10 7a17.6 17.6 0 0 1-3.2 4.2M6.2 6.2A17.7 17.7 0 0 0 2 12s3.5 7 10 7a9.6 9.6 0 0 0 4.2-.9",
+        "m2 2 20 20",
+        "M9.9 9.9a3 3 0 0 0 4.2 4.2"
+    ],
+    generate: ["m12 3 1.9 4.6L18.5 9.5 13.9 11.4 12 16l-1.9-4.6L5.5 9.5l4.6-1.9Z", "M19 15l.8 2.2 2.2.8-2.2.8-.8 2.2-.8-2.2-2.2-.8 2.2-.8Z"]
+} as const;
+
+/** The same shapes as a standalone SVG string, for the DOM renderer below. */
+export function iconMarkup(paths: readonly string[]): string {
+    const body = paths.map((path) => `<path d="${path}"/>`).join("");
+    return `<svg viewBox="0 0 24 24" width="1em" height="1em" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${body}</svg>`;
+}
+
+const EYE = iconMarkup(INPUT_ICON_PATHS.eye);
+const EYE_OFF = iconMarkup(INPUT_ICON_PATHS.eyeOff);
 
 function resolve<T>(value: T | ((state: InputActionState) => T), state: InputActionState): T {
     return typeof value === "function" ? (value as (state: InputActionState) => T)(state) : value;