@enigmax/primitives 0.6.0 → 0.8.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, createButton, createMarquee, createInput } 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, createElement, 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,275 @@ function useButton(options = {}) {
     }
   };
 }
+var Button = forwardRef(function Button2({
+  as,
+  children,
+  pending,
+  href,
+  disabled,
+  loading,
+  cooldown,
+  shortcut,
+  onPress,
+  onChange,
+  type = "button",
+  ...rest
+}, ref) {
+  const button = useButton({ href, disabled, loading, cooldown, shortcut, onPress, onChange });
+  const state = button;
+  const Tag = as ?? state.element;
+  const native = Tag === "button" ? { type } : {};
+  const label = typeof children === "function" ? children(state) : children;
+  return createElement(
+    Tag,
+    { ref, ...button.props, ...native, ...rest },
+    state.loading && pending !== void 0 ? pending : label
+  );
+});
+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 { Button, Input, PasswordStrength, useButton, useInput, useMarquee, useSearch };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@enigmax/primitives",
-  "version": "0.6.0",
+  "version": "0.8.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/recipes/{marquee.css.tsx → marquee/css.tsx}

@@ -1,4 +1,4 @@
-import "./marquee.css";
+import "./styles.css";
 import type { ReactNode, Ref } from "react";
 import { useMarquee, type MarqueeHover } from "@enigmax/primitives/react";