@agentaily/design-system 0.1.1 → 0.3.0

package/dist/components/inputs/Form.js

@@ -0,0 +1,484 @@
+import { jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useMemo } from "react";
+const AX_FORM_CSS = `
+.ax-form { display: flex; flex-direction: column; gap: var(--space-5, 20px); }
+.ax-form--tight { gap: var(--space-3, 12px); }
+.ax-form--loose { gap: var(--space-6, 28px); }
+.ax-form__actions {
+  display: flex; align-items: center; gap: var(--space-3, 12px);
+  padding-top: var(--space-2, 8px);
+}
+.ax-form__actions--end { justify-content: flex-end; }
+.ax-form__actions--start { justify-content: flex-start; }
+.ax-form__actions--between { justify-content: space-between; }
+.ax-form__actions--full > * { flex: 1; }
+.ax-form__actions--bordered {
+  border-top: 1px solid var(--border-default);
+  margin-top: var(--space-2, 8px); padding-top: var(--space-5, 20px);
+}
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-form-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-form-css";
+  s.textContent = AX_FORM_CSS;
+  document.head.appendChild(s);
+}
+function Form({ gap = "normal", onSubmit, children, className = "", ...rest }) {
+  const cls = [
+    "ax-form",
+    gap === "tight" ? "ax-form--tight" : gap === "loose" ? "ax-form--loose" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("form", { className: cls, onSubmit, noValidate: true, ...rest, children });
+}
+function FormActions({
+  align = "end",
+  bordered = false,
+  full = false,
+  children,
+  className = "",
+  ...rest
+}) {
+  const cls = [
+    "ax-form__actions",
+    "ax-form__actions--" + align,
+    bordered ? "ax-form__actions--bordered" : "",
+    full ? "ax-form__actions--full" : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx("div", { className: cls, ...rest, children });
+}
+const isEmpty = (v) => v === void 0 || v === null || v === "" || Array.isArray(v) && v.length === 0;
+async function evalRules(rules, value, values) {
+  if (!rules) return void 0;
+  const { required, minLength, maxLength, min, max, pattern, validate } = rules;
+  if (required && (isEmpty(value) || value === false)) {
+    return typeof required === "string" ? required : "This field is required.";
+  }
+  if (isEmpty(value)) return void 0;
+  const num = (r) => typeof r === "object" ? r : { value: r, message: void 0 };
+  if (minLength != null) {
+    const { value: n, message } = num(minLength);
+    if (String(value).length < n) return message || `Must be at least ${n} characters.`;
+  }
+  if (maxLength != null) {
+    const { value: n, message } = num(maxLength);
+    if (String(value).length > n) return message || `Must be at most ${n} characters.`;
+  }
+  if (min != null) {
+    const { value: n, message } = num(min);
+    if (Number(value) < n) return message || `Must be ${n} or more.`;
+  }
+  if (max != null) {
+    const { value: n, message } = num(max);
+    if (Number(value) > n) return message || `Must be ${n} or less.`;
+  }
+  if (pattern) {
+    const re = pattern instanceof RegExp ? pattern : pattern.value;
+    const message = pattern instanceof RegExp ? void 0 : pattern.message;
+    if (re && !re.test(String(value))) return message || "Invalid format.";
+  }
+  if (validate) {
+    const fns = typeof validate === "function" ? { _: validate } : validate;
+    for (const key of Object.keys(fns)) {
+      const res = await fns[key](value, values);
+      if (res === false) return "Invalid value.";
+      if (typeof res === "string") return res;
+    }
+  }
+  return void 0;
+}
+function useForm(config = {}) {
+  const {
+    initialValues = {},
+    defaultValues,
+    // RHF alias
+    validate,
+    // schema-style: (values) => ({ field: message }) | Promise
+    mode = "onSubmit",
+    // onSubmit | onBlur | onChange | onTouched | all
+    reValidateMode = "onChange",
+    // onChange | onBlur (after first submit)
+    onSubmit: onSubmitCfg,
+    onInvalid: onInvalidCfg,
+    shouldFocusError = true
+  } = config;
+  const defaults = defaultValues || initialValues;
+  const [values, setValuesState] = useState(defaults);
+  const [errors, setErrors] = useState({});
+  const [touched, setTouched] = useState({});
+  const [dirtyFields, setDirtyFields] = useState({});
+  const [isSubmitting, setSubmitting] = useState(false);
+  const [isSubmitted, setSubmitted] = useState(false);
+  const [isSubmitSuccessful, setSubmitSuccessful] = useState(false);
+  const [submitCount, setSubmitCount] = useState(0);
+  const [isValidating, setValidating] = useState(false);
+  const valuesRef = useRef(values);
+  valuesRef.current = values;
+  const errorsRef = useRef(errors);
+  errorsRef.current = errors;
+  const rulesRef = useRef({});
+  const defaultsRef = useRef(defaults);
+  const formElRef = useRef(null);
+  const writeValues = useCallback((updater) => {
+    setValuesState((prev) => {
+      const next = typeof updater === "function" ? updater(prev) : updater;
+      valuesRef.current = next;
+      return next;
+    });
+  }, []);
+  const runValidation = useCallback(
+    async (only) => {
+      const vals = valuesRef.current;
+      const out = {};
+      const names = only ? [only] : Object.keys(rulesRef.current);
+      for (const name of names) {
+        const msg = await evalRules(rulesRef.current[name], vals[name], vals);
+        if (msg) out[name] = msg;
+      }
+      if (validate) {
+        const schema = await validate(vals) || {};
+        for (const k of Object.keys(schema)) {
+          if (only && k !== only) continue;
+          if (!out[k] && schema[k]) out[k] = schema[k];
+        }
+      }
+      return out;
+    },
+    [validate]
+  );
+  const revalidateField = useCallback(
+    async (name) => {
+      setValidating(true);
+      const partial = await runValidation(name);
+      setErrors((prev) => {
+        const next = { ...prev };
+        if (partial[name]) next[name] = partial[name];
+        else delete next[name];
+        errorsRef.current = next;
+        return next;
+      });
+      setValidating(false);
+    },
+    [runValidation]
+  );
+  const shouldValidateOn = useCallback(
+    (event, name) => {
+      if (isSubmitted) return reValidateMode === event;
+      switch (mode) {
+        case "all":
+          return true;
+        case "onChange":
+          return event === "change";
+        case "onBlur":
+          return event === "blur";
+        case "onTouched":
+          return event === "blur" || event === "change" && touched[name];
+        case "onSubmit":
+        default:
+          return false;
+      }
+    },
+    [isSubmitted, reValidateMode, mode, touched]
+  );
+  const setValue = useCallback(
+    (name, value, opts = {}) => {
+      writeValues((prev) => ({ ...prev, [name]: value }));
+      if (opts.shouldDirty !== false) {
+        setDirtyFields((p) => defaultsRef.current[name] === value ? p : { ...p, [name]: true });
+      }
+      if (opts.shouldTouch) setTouched((p) => ({ ...p, [name]: true }));
+      if (opts.shouldValidate) revalidateField(name);
+    },
+    [writeValues, revalidateField]
+  );
+  const register = useCallback(
+    (name, rules) => {
+      if (rules) rulesRef.current[name] = rules;
+      else if (!(name in rulesRef.current)) rulesRef.current[name] = void 0;
+      const isCheckbox = rules && rules.type === "checkbox";
+      const onChange = (e) => {
+        const t = e && e.target;
+        const next = t ? t.type === "checkbox" ? t.checked : t.value : e;
+        writeValues((prev) => ({ ...prev, [name]: next }));
+        setDirtyFields((p) => ({ ...p, [name]: true }));
+        if (shouldValidateOn("change", name)) revalidateField(name);
+      };
+      const onBlur = () => {
+        setTouched((p) => ({ ...p, [name]: true }));
+        if (shouldValidateOn("blur", name)) revalidateField(name);
+      };
+      const base = { name, onChange, onBlur };
+      if (isCheckbox) base.checked = !!values[name];
+      else base.value = values[name] ?? "";
+      return base;
+    },
+    [values, writeValues, shouldValidateOn, revalidateField]
+  );
+  const field = useCallback(
+    (name, opts) => {
+      const props = register(name, opts);
+      props.error = errors[name];
+      return props;
+    },
+    [register, errors]
+  );
+  const trigger = useCallback(
+    async (name) => {
+      setValidating(true);
+      const errs = await runValidation(name);
+      if (name) {
+        setErrors((prev) => {
+          const next = { ...prev };
+          if (errs[name]) next[name] = errs[name];
+          else delete next[name];
+          errorsRef.current = next;
+          return next;
+        });
+        setValidating(false);
+        return !errs[name];
+      }
+      setErrors(errs);
+      errorsRef.current = errs;
+      setValidating(false);
+      return Object.keys(errs).length === 0;
+    },
+    [runValidation]
+  );
+  const setError = useCallback((name, message) => {
+    setErrors((prev) => {
+      const n = { ...prev, [name]: message };
+      errorsRef.current = n;
+      return n;
+    });
+  }, []);
+  const clearErrors = useCallback((name) => {
+    setErrors((prev) => {
+      if (!name) {
+        errorsRef.current = {};
+        return {};
+      }
+      const next = { ...prev };
+      delete next[name];
+      errorsRef.current = next;
+      return next;
+    });
+  }, []);
+  const getValues = useCallback((name) => name ? valuesRef.current[name] : valuesRef.current, []);
+  const watch = useCallback((name) => name ? values[name] : values, [values]);
+  const focusError = useCallback(
+    (errs) => {
+      if (!shouldFocusError || typeof document === "undefined") return;
+      const first = Object.keys(errs)[0];
+      if (!first) return;
+      const el = (formElRef.current || document).querySelector(`[name="${first}"]`);
+      if (el && el.focus) el.focus();
+    },
+    [shouldFocusError]
+  );
+  const handleSubmit = useCallback(
+    (onValidArg, onInvalidArg) => {
+      const runner = async (e) => {
+        if (e && e.preventDefault) e.preventDefault();
+        if (e && e.currentTarget && e.currentTarget.tagName === "FORM")
+          formElRef.current = e.currentTarget;
+        setSubmitting(true);
+        setValidating(true);
+        const errs = await runValidation();
+        setErrors(errs);
+        errorsRef.current = errs;
+        setTouched(() => {
+          const all = {};
+          [...Object.keys(rulesRef.current), ...Object.keys(valuesRef.current)].forEach(
+            (k) => all[k] = true
+          );
+          return all;
+        });
+        setSubmitted(true);
+        setSubmitCount((c) => c + 1);
+        setValidating(false);
+        const valid = Object.keys(errs).length === 0;
+        if (valid) {
+          try {
+            await (typeof onValidArg === "function" ? onValidArg : onSubmitCfg)?.(
+              valuesRef.current
+            );
+            setSubmitSuccessful(true);
+          } catch (err) {
+            setSubmitSuccessful(false);
+            throw err;
+          } finally {
+            setSubmitting(false);
+          }
+        } else {
+          setSubmitSuccessful(false);
+          setSubmitting(false);
+          (onInvalidArg || onInvalidCfg)?.(errs);
+          focusError(errs);
+        }
+      };
+      if (typeof onValidArg === "function") return runner;
+      return runner(onValidArg);
+    },
+    [runValidation, onSubmitCfg, onInvalidCfg, focusError]
+  );
+  const reset = useCallback(
+    (next, opts = {}) => {
+      const target = next || defaultsRef.current;
+      if (opts.keepDefaultValues !== true) defaultsRef.current = target;
+      writeValues(target);
+      if (!opts.keepErrors) {
+        setErrors({});
+        errorsRef.current = {};
+      }
+      if (!opts.keepTouched) setTouched({});
+      if (!opts.keepDirty) setDirtyFields({});
+      if (!opts.keepIsSubmitted) {
+        setSubmitted(false);
+        setSubmitSuccessful(false);
+      }
+    },
+    [writeValues]
+  );
+  const isDirty = Object.keys(dirtyFields).length > 0;
+  const isValid = Object.keys(errors).length === 0;
+  const formState = useMemo(
+    () => ({
+      errors,
+      touched,
+      dirtyFields,
+      isDirty,
+      isValid,
+      isValidating,
+      isSubmitting,
+      isSubmitted,
+      isSubmitSuccessful,
+      submitCount
+    }),
+    [
+      errors,
+      touched,
+      dirtyFields,
+      isDirty,
+      isValid,
+      isValidating,
+      isSubmitting,
+      isSubmitted,
+      isSubmitSuccessful,
+      submitCount
+    ]
+  );
+  return {
+    // state
+    values,
+    errors,
+    touched,
+    dirtyFields,
+    isDirty,
+    isValid,
+    isValidating,
+    isSubmitting,
+    isSubmitted,
+    isSubmitSuccessful,
+    submitCount,
+    submitted: isSubmitted,
+    formState,
+    // binding
+    register,
+    field,
+    // imperative
+    setValue,
+    setValues: writeValues,
+    getValues,
+    watch,
+    setError,
+    clearErrors,
+    trigger,
+    handleSubmit,
+    reset,
+    // internal-ish (handy for custom layouts)
+    _formElRef: formElRef
+  };
+}
+let _faKey = 0;
+function useFieldArray({ form, name }) {
+  const keysRef = useRef([]);
+  const list = form.getValues(name) || [];
+  while (keysRef.current.length < list.length) keysRef.current.push(++_faKey);
+  if (keysRef.current.length > list.length) keysRef.current = keysRef.current.slice(0, list.length);
+  const fields = list.map((item, i) => ({ ...item, id: keysRef.current[i] }));
+  const commit = (next, keys) => {
+    keysRef.current = keys;
+    form.setValue(name, next, { shouldDirty: true });
+  };
+  const append = useCallback(
+    (item) => {
+      const cur = form.getValues(name) || [];
+      commit([...cur, item], [...keysRef.current, ++_faKey]);
+    },
+    [form, name]
+  );
+  const prepend = useCallback(
+    (item) => {
+      const cur = form.getValues(name) || [];
+      commit([item, ...cur], [++_faKey, ...keysRef.current]);
+    },
+    [form, name]
+  );
+  const remove = useCallback(
+    (index) => {
+      const cur = form.getValues(name) || [];
+      commit(
+        cur.filter((_, i) => i !== index),
+        keysRef.current.filter((_, i) => i !== index)
+      );
+    },
+    [form, name]
+  );
+  const insert = useCallback(
+    (index, item) => {
+      const cur = (form.getValues(name) || []).slice();
+      const keys = keysRef.current.slice();
+      cur.splice(index, 0, item);
+      keys.splice(index, 0, ++_faKey);
+      commit(cur, keys);
+    },
+    [form, name]
+  );
+  const move = useCallback(
+    (from, to) => {
+      const cur = (form.getValues(name) || []).slice();
+      const keys = keysRef.current.slice();
+      cur.splice(to, 0, cur.splice(from, 1)[0]);
+      keys.splice(to, 0, keys.splice(from, 1)[0]);
+      commit(cur, keys);
+    },
+    [form, name]
+  );
+  const replace = useCallback(
+    (items) => {
+      commit(
+        items,
+        items.map(() => ++_faKey)
+      );
+    },
+    [form, name]
+  );
+  const update = useCallback(
+    (index, item) => {
+      const cur = (form.getValues(name) || []).slice();
+      cur[index] = item;
+      commit(cur, keysRef.current.slice());
+    },
+    [form, name]
+  );
+  return { fields, append, prepend, remove, insert, move, replace, update };
+}
+Form.useForm = useForm;
+Form.useFieldArray = useFieldArray;
+Form.Actions = FormActions;
+export {
+  Form,
+  FormActions
+};
+//# sourceMappingURL=Form.js.map

package/dist/components/inputs/Form.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Form.js","sources":["../../../src/components/inputs/Form.jsx"],"sourcesContent":["import React, { useState, useCallback, useRef, useMemo } from \"react\";\n\nconst AX_FORM_CSS = `\n.ax-form { display: flex; flex-direction: column; gap: var(--space-5, 20px); }\n.ax-form--tight { gap: var(--space-3, 12px); }\n.ax-form--loose { gap: var(--space-6, 28px); }\n.ax-form__actions {\n  display: flex; align-items: center; gap: var(--space-3, 12px);\n  padding-top: var(--space-2, 8px);\n}\n.ax-form__actions--end { justify-content: flex-end; }\n.ax-form__actions--start { justify-content: flex-start; }\n.ax-form__actions--between { justify-content: space-between; }\n.ax-form__actions--full > * { flex: 1; }\n.ax-form__actions--bordered {\n  border-top: 1px solid var(--border-default);\n  margin-top: var(--space-2, 8px); padding-top: var(--space-5, 20px);\n}\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-form-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-form-css\";\n  s.textContent = AX_FORM_CSS;\n  document.head.appendChild(s);\n}\n\n/**\n * Form — a thin structural <form> wrapper. Pure layout, no state.\n * Pass form.handleSubmit (from Form.useForm) as onSubmit, then compose controls.\n */\nexport function Form({ gap = \"normal\", onSubmit, children, className = \"\", ...rest }) {\n  const cls = [\n    \"ax-form\",\n    gap === \"tight\" ? \"ax-form--tight\" : gap === \"loose\" ? \"ax-form--loose\" : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n  return (\n    <form className={cls} onSubmit={onSubmit} noValidate {...rest}>\n      {children}\n    </form>\n  );\n}\n\n/** FormActions — right-aligned footer row for submit/cancel buttons. */\nexport function FormActions({\n  align = \"end\",\n  bordered = false,\n  full = false,\n  children,\n  className = \"\",\n  ...rest\n}) {\n  const cls = [\n    \"ax-form__actions\",\n    \"ax-form__actions--\" + align,\n    bordered ? \"ax-form__actions--bordered\" : \"\",\n    full ? \"ax-form__actions--full\" : \"\",\n    className,\n  ]\n    .filter(Boolean)\n    .join(\" \");\n  return (\n    <div className={cls} {...rest}>\n      {children}\n    </div>\n  );\n}\n\n/* ============================================================\n   useForm — production controlled form hook (RHF-aligned API).\n   Exposed as Form.useForm. Drop it for react-hook-form / TanStack;\n   the presentational components never depend on it.\n   ============================================================ */\n\nconst isEmpty = (v) =>\n  v === undefined || v === null || v === \"\" || (Array.isArray(v) && v.length === 0);\n\n// Evaluate one field's built-in rules. Returns a message string or undefined.\nasync function evalRules(rules, value, values) {\n  if (!rules) return undefined;\n  const { required, minLength, maxLength, min, max, pattern, validate } = rules;\n\n  if (required && (isEmpty(value) || value === false)) {\n    return typeof required === \"string\" ? required : \"This field is required.\";\n  }\n  if (isEmpty(value)) return undefined; // other rules don't apply to empty optional fields\n\n  const num = (r) => (typeof r === \"object\" ? r : { value: r, message: undefined });\n\n  if (minLength != null) {\n    const { value: n, message } = num(minLength);\n    if (String(value).length < n) return message || `Must be at least ${n} characters.`;\n  }\n  if (maxLength != null) {\n    const { value: n, message } = num(maxLength);\n    if (String(value).length > n) return message || `Must be at most ${n} characters.`;\n  }\n  if (min != null) {\n    const { value: n, message } = num(min);\n    if (Number(value) < n) return message || `Must be ${n} or more.`;\n  }\n  if (max != null) {\n    const { value: n, message } = num(max);\n    if (Number(value) > n) return message || `Must be ${n} or less.`;\n  }\n  if (pattern) {\n    const re = pattern instanceof RegExp ? pattern : pattern.value;\n    const message = pattern instanceof RegExp ? undefined : pattern.message;\n    if (re && !re.test(String(value))) return message || \"Invalid format.\";\n  }\n  if (validate) {\n    const fns = typeof validate === \"function\" ? { _: validate } : validate;\n    for (const key of Object.keys(fns)) {\n      const res = await fns[key](value, values);\n      if (res === false) return \"Invalid value.\";\n      if (typeof res === \"string\") return res;\n    }\n  }\n  return undefined;\n}\n\nfunction useForm(config = {}) {\n  const {\n    initialValues = {},\n    defaultValues, // RHF alias\n    validate, // schema-style: (values) => ({ field: message }) | Promise\n    mode = \"onSubmit\", // onSubmit | onBlur | onChange | onTouched | all\n    reValidateMode = \"onChange\", // onChange | onBlur (after first submit)\n    onSubmit: onSubmitCfg,\n    onInvalid: onInvalidCfg,\n    shouldFocusError = true,\n  } = config;\n\n  const defaults = defaultValues || initialValues;\n  const [values, setValuesState] = useState(defaults);\n  const [errors, setErrors] = useState({});\n  const [touched, setTouched] = useState({});\n  const [dirtyFields, setDirtyFields] = useState({});\n  const [isSubmitting, setSubmitting] = useState(false);\n  const [isSubmitted, setSubmitted] = useState(false);\n  const [isSubmitSuccessful, setSubmitSuccessful] = useState(false);\n  const [submitCount, setSubmitCount] = useState(0);\n  const [isValidating, setValidating] = useState(false);\n\n  const valuesRef = useRef(values);\n  valuesRef.current = values;\n  const errorsRef = useRef(errors);\n  errorsRef.current = errors;\n  const rulesRef = useRef({}); // name -> rules registered via register/field\n  const defaultsRef = useRef(defaults);\n  const formElRef = useRef(null);\n\n  const writeValues = useCallback((updater) => {\n    setValuesState((prev) => {\n      const next = typeof updater === \"function\" ? updater(prev) : updater;\n      valuesRef.current = next;\n      return next;\n    });\n  }, []);\n\n  // Validate the whole form (or a single field). Returns a fresh errors map.\n  const runValidation = useCallback(\n    async (only) => {\n      const vals = valuesRef.current;\n      const out = {};\n      const names = only ? [only] : Object.keys(rulesRef.current);\n      for (const name of names) {\n        const msg = await evalRules(rulesRef.current[name], vals[name], vals);\n        if (msg) out[name] = msg;\n      }\n      if (validate) {\n        const schema = (await validate(vals)) || {};\n        for (const k of Object.keys(schema)) {\n          if (only && k !== only) continue;\n          if (!out[k] && schema[k]) out[k] = schema[k];\n        }\n      }\n      return out;\n    },\n    [validate],\n  );\n\n  // Recompute one field's error and merge into state (preserving others).\n  const revalidateField = useCallback(\n    async (name) => {\n      setValidating(true);\n      const partial = await runValidation(name);\n      setErrors((prev) => {\n        const next = { ...prev };\n        if (partial[name]) next[name] = partial[name];\n        else delete next[name];\n        errorsRef.current = next;\n        return next;\n      });\n      setValidating(false);\n    },\n    [runValidation],\n  );\n\n  const shouldValidateOn = useCallback(\n    (event, name) => {\n      if (isSubmitted) return reValidateMode === event;\n      switch (mode) {\n        case \"all\":\n          return true;\n        case \"onChange\":\n          return event === \"change\";\n        case \"onBlur\":\n          return event === \"blur\";\n        case \"onTouched\":\n          return event === \"blur\" || (event === \"change\" && touched[name]);\n        case \"onSubmit\":\n        default:\n          return false;\n      }\n    },\n    [isSubmitted, reValidateMode, mode, touched],\n  );\n\n  const setValue = useCallback(\n    (name, value, opts = {}) => {\n      writeValues((prev) => ({ ...prev, [name]: value }));\n      if (opts.shouldDirty !== false) {\n        setDirtyFields((p) => (defaultsRef.current[name] === value ? p : { ...p, [name]: true }));\n      }\n      if (opts.shouldTouch) setTouched((p) => ({ ...p, [name]: true }));\n      if (opts.shouldValidate) revalidateField(name);\n    },\n    [writeValues, revalidateField],\n  );\n\n  // Build the props for a control. `register` is RHF-compatible; `field` adds `error`.\n  const register = useCallback(\n    (name, rules) => {\n      if (rules) rulesRef.current[name] = rules;\n      else if (!(name in rulesRef.current)) rulesRef.current[name] = undefined;\n      const isCheckbox = rules && rules.type === \"checkbox\";\n      const onChange = (e) => {\n        const t = e && e.target;\n        const next = t ? (t.type === \"checkbox\" ? t.checked : t.value) : e;\n        writeValues((prev) => ({ ...prev, [name]: next }));\n        setDirtyFields((p) => ({ ...p, [name]: true }));\n        if (shouldValidateOn(\"change\", name)) revalidateField(name);\n      };\n      const onBlur = () => {\n        setTouched((p) => ({ ...p, [name]: true }));\n        if (shouldValidateOn(\"blur\", name)) revalidateField(name);\n      };\n      const base = { name, onChange, onBlur };\n      if (isCheckbox) base.checked = !!values[name];\n      else base.value = values[name] ?? \"\";\n      return base;\n    },\n    [values, writeValues, shouldValidateOn, revalidateField],\n  );\n\n  const field = useCallback(\n    (name, opts) => {\n      const props = register(name, opts);\n      props.error = errors[name];\n      return props;\n    },\n    [register, errors],\n  );\n\n  const trigger = useCallback(\n    async (name) => {\n      setValidating(true);\n      const errs = await runValidation(name);\n      if (name) {\n        setErrors((prev) => {\n          const next = { ...prev };\n          if (errs[name]) next[name] = errs[name];\n          else delete next[name];\n          errorsRef.current = next;\n          return next;\n        });\n        setValidating(false);\n        return !errs[name];\n      }\n      setErrors(errs);\n      errorsRef.current = errs;\n      setValidating(false);\n      return Object.keys(errs).length === 0;\n    },\n    [runValidation],\n  );\n\n  const setError = useCallback((name, message) => {\n    setErrors((prev) => {\n      const n = { ...prev, [name]: message };\n      errorsRef.current = n;\n      return n;\n    });\n  }, []);\n\n  const clearErrors = useCallback((name) => {\n    setErrors((prev) => {\n      if (!name) {\n        errorsRef.current = {};\n        return {};\n      }\n      const next = { ...prev };\n      delete next[name];\n      errorsRef.current = next;\n      return next;\n    });\n  }, []);\n\n  const getValues = useCallback((name) => (name ? valuesRef.current[name] : valuesRef.current), []);\n  const watch = useCallback((name) => (name ? values[name] : values), [values]);\n\n  const focusError = useCallback(\n    (errs) => {\n      if (!shouldFocusError || typeof document === \"undefined\") return;\n      const first = Object.keys(errs)[0];\n      if (!first) return;\n      const el = (formElRef.current || document).querySelector(`[name=\"${first}\"]`);\n      if (el && el.focus) el.focus();\n    },\n    [shouldFocusError],\n  );\n\n  const handleSubmit = useCallback(\n    (onValidArg, onInvalidArg) => {\n      const runner = async (e) => {\n        if (e && e.preventDefault) e.preventDefault();\n        if (e && e.currentTarget && e.currentTarget.tagName === \"FORM\")\n          formElRef.current = e.currentTarget;\n        setSubmitting(true);\n        setValidating(true);\n        const errs = await runValidation();\n        setErrors(errs);\n        errorsRef.current = errs;\n        setTouched(() => {\n          const all = {};\n          [...Object.keys(rulesRef.current), ...Object.keys(valuesRef.current)].forEach(\n            (k) => (all[k] = true),\n          );\n          return all;\n        });\n        setSubmitted(true);\n        setSubmitCount((c) => c + 1);\n        setValidating(false);\n        const valid = Object.keys(errs).length === 0;\n        if (valid) {\n          try {\n            await (typeof onValidArg === \"function\" ? onValidArg : onSubmitCfg)?.(\n              valuesRef.current,\n            );\n            setSubmitSuccessful(true);\n          } catch (err) {\n            setSubmitSuccessful(false);\n            throw err;\n          } finally {\n            setSubmitting(false);\n          }\n        } else {\n          setSubmitSuccessful(false);\n          setSubmitting(false);\n          (onInvalidArg || onInvalidCfg)?.(errs);\n          focusError(errs);\n        }\n      };\n      // Dual API: handleSubmit(onValid[, onInvalid]) returns a handler (RHF style);\n      // handleSubmit(event) runs immediately (use as onSubmit/onClick directly).\n      if (typeof onValidArg === \"function\") return runner;\n      return runner(onValidArg);\n    },\n    [runValidation, onSubmitCfg, onInvalidCfg, focusError],\n  );\n\n  const reset = useCallback(\n    (next, opts = {}) => {\n      const target = next || defaultsRef.current;\n      if (opts.keepDefaultValues !== true) defaultsRef.current = target;\n      writeValues(target);\n      if (!opts.keepErrors) {\n        setErrors({});\n        errorsRef.current = {};\n      }\n      if (!opts.keepTouched) setTouched({});\n      if (!opts.keepDirty) setDirtyFields({});\n      if (!opts.keepIsSubmitted) {\n        setSubmitted(false);\n        setSubmitSuccessful(false);\n      }\n    },\n    [writeValues],\n  );\n\n  const isDirty = Object.keys(dirtyFields).length > 0;\n  const isValid = Object.keys(errors).length === 0;\n\n  const formState = useMemo(\n    () => ({\n      errors,\n      touched,\n      dirtyFields,\n      isDirty,\n      isValid,\n      isValidating,\n      isSubmitting,\n      isSubmitted,\n      isSubmitSuccessful,\n      submitCount,\n    }),\n    [\n      errors,\n      touched,\n      dirtyFields,\n      isDirty,\n      isValid,\n      isValidating,\n      isSubmitting,\n      isSubmitted,\n      isSubmitSuccessful,\n      submitCount,\n    ],\n  );\n\n  return {\n    // state\n    values,\n    errors,\n    touched,\n    dirtyFields,\n    isDirty,\n    isValid,\n    isValidating,\n    isSubmitting,\n    isSubmitted,\n    isSubmitSuccessful,\n    submitCount,\n    submitted: isSubmitted,\n    formState,\n    // binding\n    register,\n    field,\n    // imperative\n    setValue,\n    setValues: writeValues,\n    getValues,\n    watch,\n    setError,\n    clearErrors,\n    trigger,\n    handleSubmit,\n    reset,\n    // internal-ish (handy for custom layouts)\n    _formElRef: formElRef,\n  };\n}\n\n/* ============================================================\n   useFieldArray — dynamic list fields, RHF-aligned.\n   const ta = Form.useFieldArray({ form, name: \"members\" });\n   ============================================================ */\nlet _faKey = 0;\nfunction useFieldArray({ form, name }) {\n  const keysRef = useRef([]);\n  const list = form.getValues(name) || [];\n  // keep a stable key per row\n  while (keysRef.current.length < list.length) keysRef.current.push(++_faKey);\n  if (keysRef.current.length > list.length) keysRef.current = keysRef.current.slice(0, list.length);\n\n  const fields = list.map((item, i) => ({ ...item, id: keysRef.current[i] }));\n\n  const commit = (next, keys) => {\n    keysRef.current = keys;\n    form.setValue(name, next, { shouldDirty: true });\n  };\n\n  const append = useCallback(\n    (item) => {\n      const cur = form.getValues(name) || [];\n      commit([...cur, item], [...keysRef.current, ++_faKey]);\n    },\n    [form, name],\n  );\n  const prepend = useCallback(\n    (item) => {\n      const cur = form.getValues(name) || [];\n      commit([item, ...cur], [++_faKey, ...keysRef.current]);\n    },\n    [form, name],\n  );\n  const remove = useCallback(\n    (index) => {\n      const cur = form.getValues(name) || [];\n      commit(\n        cur.filter((_, i) => i !== index),\n        keysRef.current.filter((_, i) => i !== index),\n      );\n    },\n    [form, name],\n  );\n  const insert = useCallback(\n    (index, item) => {\n      const cur = (form.getValues(name) || []).slice();\n      const keys = keysRef.current.slice();\n      cur.splice(index, 0, item);\n      keys.splice(index, 0, ++_faKey);\n      commit(cur, keys);\n    },\n    [form, name],\n  );\n  const move = useCallback(\n    (from, to) => {\n      const cur = (form.getValues(name) || []).slice();\n      const keys = keysRef.current.slice();\n      cur.splice(to, 0, cur.splice(from, 1)[0]);\n      keys.splice(to, 0, keys.splice(from, 1)[0]);\n      commit(cur, keys);\n    },\n    [form, name],\n  );\n  const replace = useCallback(\n    (items) => {\n      commit(\n        items,\n        items.map(() => ++_faKey),\n      );\n    },\n    [form, name],\n  );\n  const update = useCallback(\n    (index, item) => {\n      const cur = (form.getValues(name) || []).slice();\n      cur[index] = item;\n      commit(cur, keysRef.current.slice());\n    },\n    [form, name],\n  );\n\n  return { fields, append, prepend, remove, insert, move, replace, update };\n}\n\nForm.useForm = useForm;\nForm.useFieldArray = useFieldArray;\nForm.Actions = FormActions;\n"],"names":[],"mappings":"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"}

package/dist/components/inputs/Input.d.ts

@@ -8,6 +8,8 @@ export interface InputProps {
   hint?: string;
   /** Error message; also paints the border red. */
   error?: string;
+  /** Marks the field required: appends a red asterisk to the label and sets the input's required attribute. @default false */
+  required?: boolean;
   /** Use the mono font for the value (ids, keys, code). @default false */
   mono?: boolean;
   placeholder?: string;

package/dist/components/inputs/Input.js

@@ -3,10 +3,12 @@ import "react";
 const AX_FIELD_CSS = `
 .ax-field { display: flex; flex-direction: column; gap: 6px; }
 .ax-field__label {
+  display: inline-flex; align-items: center; gap: 6px;
   font-family: var(--font-mono); font-size: var(--text-xs);
   font-weight: var(--weight-medium); letter-spacing: var(--tracking-label);
   text-transform: uppercase; color: var(--text-faint);
 }
+.ax-field__req { color: var(--danger); }
 /* State priority is declared explicitly via layer order, low -> high.
    This frees each state rule from fighting specificity, so no :not() chains
    are needed and source order is no longer load-bearing. Add a new state by
@@ -31,8 +33,11 @@ const AX_FIELD_CSS = `
   .ax-input:focus { outline: none; border-color: var(--fg-2); box-shadow: 0 0 0 3px var(--focus-soft); }
 }
 @layer ax-error {
-  .ax-input--error { border-color: var(--danger); }
-  .ax-input--error:focus { box-shadow: 0 0 0 3px var(--danger-dim); }
+  /* Outline (not just border-color) so the error ring is robust: it survives
+     overlay/instrumentation layers that repaint control borders, and never
+     shifts layout. Offset -1px parks it exactly on the border edge. */
+  .ax-input--error { border-color: var(--danger); outline: 1px solid var(--danger); outline-offset: -1px; }
+  .ax-input--error:focus { box-shadow: 0 0 0 3px var(--danger-dim); outline-color: var(--danger); }
 }
 @layer ax-disabled {
   .ax-input:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--border-default); }
@@ -50,19 +55,18 @@ function Input({
   label,
   hint,
   error,
+  required = false,
   mono = false,
   className = "",
   ...rest
 }) {
-  const cls = [
-    "ax-input",
-    mono ? "ax-input--mono" : "",
-    error ? "ax-input--error" : "",
-    className
-  ].filter(Boolean).join(" ");
+  const cls = ["ax-input", mono ? "ax-input--mono" : "", error ? "ax-input--error" : "", className].filter(Boolean).join(" ");
   return /* @__PURE__ */ jsxs("label", { className: "ax-field", children: [
-    label ? /* @__PURE__ */ jsx("span", { className: "ax-field__label", children: label }) : null,
-    /* @__PURE__ */ jsx("input", { className: cls, ...rest }),
+    label ? /* @__PURE__ */ jsxs("span", { className: "ax-field__label", children: [
+      label,
+      required ? /* @__PURE__ */ jsx("span", { className: "ax-field__req", children: "*" }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx("input", { className: cls, required, ...rest }),
     error ? /* @__PURE__ */ jsx("span", { className: "ax-field__hint ax-field__hint--error", children: error }) : hint ? /* @__PURE__ */ jsx("span", { className: "ax-field__hint", children: hint }) : null
   ] });
 }

package/dist/components/inputs/Input.js.map

@@ -1 +1 @@
-{"version":3,"file":"Input.js","sources":["../../../src/components/inputs/Input.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_FIELD_CSS = `\n.ax-field { display: flex; flex-direction: column; gap: 6px; }\n.ax-field__label {\n  font-family: var(--font-mono); font-size: var(--text-xs);\n  font-weight: var(--weight-medium); letter-spacing: var(--tracking-label);\n  text-transform: uppercase; color: var(--text-faint);\n}\n/* State priority is declared explicitly via layer order, low -> high.\n   This frees each state rule from fighting specificity, so no :not() chains\n   are needed and source order is no longer load-bearing. Add a new state by\n   slotting a layer, not by patching every other rule. */\n@layer ax-base, ax-hover, ax-focus, ax-error, ax-disabled;\n\n@layer ax-base {\n  .ax-input {\n    height: 36px; padding: 0 12px; width: 100%;\n    background: var(--surface-card); color: var(--text-body);\n    border: 1px solid var(--border-default); border-radius: var(--radius-2);\n    font-family: var(--font-body); font-size: var(--text-sm);\n    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);\n  }\n  .ax-input::placeholder { color: var(--text-faint); }\n  .ax-input--mono { font-family: var(--font-mono); }\n}\n@layer ax-hover {\n  .ax-input:hover { border-color: var(--border-strong); }\n}\n@layer ax-focus {\n  .ax-input:focus { outline: none; border-color: var(--fg-2); box-shadow: 0 0 0 3px var(--focus-soft); }\n}\n@layer ax-error {\n  .ax-input--error { border-color: var(--danger); }\n  .ax-input--error:focus { box-shadow: 0 0 0 3px var(--danger-dim); }\n}\n@layer ax-disabled {\n  .ax-input:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--border-default); }\n}\n.ax-field__hint { font-size: var(--text-xs); color: var(--text-faint); }\n.ax-field__hint--error { color: var(--danger); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-field-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-field-css\";\n  s.textContent = AX_FIELD_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Input({\n  label,\n  hint,\n  error,\n  mono = false,\n  className = \"\",\n  ...rest\n}) {\n  const cls = [\n    \"ax-input\",\n    mono ? \"ax-input--mono\" : \"\",\n    error ? \"ax-input--error\" : \"\",\n    className,\n  ].filter(Boolean).join(\" \");\n  return (\n    <label className=\"ax-field\">\n      {label ? <span className=\"ax-field__label\">{label}</span> : null}\n      <input className={cls} {...rest} />\n      {error ? <span className=\"ax-field__hint ax-field__hint--error\">{error}</span> :\n        hint ? <span className=\"ax-field__hint\">{hint}</span> : null}\n    </label>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAyCrB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,cAAc,GAAG;AAC/E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,QAAM,MAAM;AAAA,IACV;AAAA,IACA,OAAO,mBAAmB;AAAA,IAC1B,QAAQ,oBAAoB;AAAA,IAC5B;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAC1B,SACE,qBAAC,SAAA,EAAM,WAAU,YACd,UAAA;AAAA,IAAA,QAAQ,oBAAC,QAAA,EAAK,WAAU,mBAAmB,iBAAM,IAAU;AAAA,IAC5D,oBAAC,SAAA,EAAM,WAAW,KAAM,GAAG,KAAA,CAAM;AAAA,IAChC,QAAQ,oBAAC,QAAA,EAAK,WAAU,wCAAwC,UAAA,MAAA,CAAM,IACrE,OAAO,oBAAC,QAAA,EAAK,WAAU,kBAAkB,gBAAK,IAAU;AAAA,EAAA,GAC5D;AAEJ;"}
+{"version":3,"file":"Input.js","sources":["../../../src/components/inputs/Input.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_FIELD_CSS = `\n.ax-field { display: flex; flex-direction: column; gap: 6px; }\n.ax-field__label {\n  display: inline-flex; align-items: center; gap: 6px;\n  font-family: var(--font-mono); font-size: var(--text-xs);\n  font-weight: var(--weight-medium); letter-spacing: var(--tracking-label);\n  text-transform: uppercase; color: var(--text-faint);\n}\n.ax-field__req { color: var(--danger); }\n/* State priority is declared explicitly via layer order, low -> high.\n   This frees each state rule from fighting specificity, so no :not() chains\n   are needed and source order is no longer load-bearing. Add a new state by\n   slotting a layer, not by patching every other rule. */\n@layer ax-base, ax-hover, ax-focus, ax-error, ax-disabled;\n\n@layer ax-base {\n  .ax-input {\n    height: 36px; padding: 0 12px; width: 100%;\n    background: var(--surface-card); color: var(--text-body);\n    border: 1px solid var(--border-default); border-radius: var(--radius-2);\n    font-family: var(--font-body); font-size: var(--text-sm);\n    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);\n  }\n  .ax-input::placeholder { color: var(--text-faint); }\n  .ax-input--mono { font-family: var(--font-mono); }\n}\n@layer ax-hover {\n  .ax-input:hover { border-color: var(--border-strong); }\n}\n@layer ax-focus {\n  .ax-input:focus { outline: none; border-color: var(--fg-2); box-shadow: 0 0 0 3px var(--focus-soft); }\n}\n@layer ax-error {\n  /* Outline (not just border-color) so the error ring is robust: it survives\n     overlay/instrumentation layers that repaint control borders, and never\n     shifts layout. Offset -1px parks it exactly on the border edge. */\n  .ax-input--error { border-color: var(--danger); outline: 1px solid var(--danger); outline-offset: -1px; }\n  .ax-input--error:focus { box-shadow: 0 0 0 3px var(--danger-dim); outline-color: var(--danger); }\n}\n@layer ax-disabled {\n  .ax-input:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--border-default); }\n}\n.ax-field__hint { font-size: var(--text-xs); color: var(--text-faint); }\n.ax-field__hint--error { color: var(--danger); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-field-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-field-css\";\n  s.textContent = AX_FIELD_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Input({\n  label,\n  hint,\n  error,\n  required = false,\n  mono = false,\n  className = \"\",\n  ...rest\n}) {\n  const cls = [\"ax-input\", mono ? \"ax-input--mono\" : \"\", error ? \"ax-input--error\" : \"\", className]\n    .filter(Boolean)\n    .join(\" \");\n  return (\n    <label className=\"ax-field\">\n      {label ? (\n        <span className=\"ax-field__label\">\n          {label}\n          {required ? <span className=\"ax-field__req\">*</span> : null}\n        </span>\n      ) : null}\n      <input className={cls} required={required} {...rest} />\n      {error ? (\n        <span className=\"ax-field__hint ax-field__hint--error\">{error}</span>\n      ) : hint ? (\n        <span className=\"ax-field__hint\">{hint}</span>\n      ) : null}\n    </label>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,eAAe;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AA8CrB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,cAAc,GAAG;AAC/E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,MAAM;AAAA,EACpB;AAAA,EACA;AAAA,EACA;AAAA,EACA,WAAW;AAAA,EACX,OAAO;AAAA,EACP,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,QAAM,MAAM,CAAC,YAAY,OAAO,mBAAmB,IAAI,QAAQ,oBAAoB,IAAI,SAAS,EAC7F,OAAO,OAAO,EACd,KAAK,GAAG;AACX,SACE,qBAAC,SAAA,EAAM,WAAU,YACd,UAAA;AAAA,IAAA,QACC,qBAAC,QAAA,EAAK,WAAU,mBACb,UAAA;AAAA,MAAA;AAAA,MACA,WAAW,oBAAC,QAAA,EAAK,WAAU,iBAAgB,eAAC,IAAU;AAAA,IAAA,EAAA,CACzD,IACE;AAAA,wBACH,SAAA,EAAM,WAAW,KAAK,UAAqB,GAAG,MAAM;AAAA,IACpD,QACC,oBAAC,QAAA,EAAK,WAAU,wCAAwC,UAAA,MAAA,CAAM,IAC5D,OACF,oBAAC,QAAA,EAAK,WAAU,kBAAkB,gBAAK,IACrC;AAAA,EAAA,GACN;AAEJ;"}

package/dist/components/inputs/SecretField.d.ts

@@ -0,0 +1,21 @@
+/**
+ * Masked credential input with show/hide toggle. Mono by default (keys read
+ * better in mono). Pairs with a mono ALL-CAPS label and an optional hint /
+ * error line. Built on the bundle's `.ax-input`.
+ */
+export interface SecretFieldProps {
+  /** Mono ALL-CAPS label above the field. */
+  label?: string;
+  value: string;
+  onChange?: (value: string) => void;
+  placeholder?: string;
+  /** Helper line below the field (hidden when `error` is set). */
+  hint?: React.ReactNode;
+  /** Error line below the field; also flags the input red. */
+  error?: string;
+  /** Mono input font. @default true */
+  mono?: boolean;
+  /** @default "off" */
+  autoComplete?: string;
+}
+export declare function SecretField(props: SecretFieldProps): JSX.Element;