@agentaily/design-system 0.1.0 → 0.2.0

package/DESIGN.md

@@ -88,7 +88,7 @@ Examples — ✓ "Rate limited. Retry in 18s." ✗ "Oops! Something went wrong
 | `guidelines/` | 17 specimen cards (Colors ×4, Type ×4, Spacing ×5, Brand ×4) |
 | `states/` | 5 interaction-state matrices (buttons, form controls, selection/nav, loading/streaming, status/feedback) — force-rendered hover/focus/active/disabled |
 | `components/buttons/` | Button, IconButton, **ButtonGroup** |
-| `components/inputs/` | Input, Textarea, Select, Switch, Checkbox, Label, RadioGroup, Slider, Toggle, ToggleGroup, **Field, FieldGroup, InputGroup, InputOTP, Combobox, Calendar, DatePicker** |
+| `components/inputs/` | Input, Textarea, Select, Switch, Checkbox, Label, RadioGroup, Slider, Toggle, ToggleGroup, **Field, FieldGroup, InputGroup, InputOTP, Combobox, Calendar, DatePicker, Form (+FormActions, Form.useForm)** |
 | `components/display/` | Card, Badge, Avatar, Tabs, Kbd, Separator, Skeleton, Progress, Accordion, Breadcrumb, Table, Pagination, Empty, **Collapsible, Item, Carousel, Chart (BarChart/LineChart), DataTable, Typography (Prose/Text)** |
 | `components/feedback/` | Spinner, Toast, Tooltip, Dialog, Alert |
 | `components/overlay/` | Popover, DropdownMenu, Command, Sheet, **HoverCard, ContextMenu, Menubar, NavigationMenu, AlertDialog** |
@@ -104,7 +104,9 @@ Examples — ✓ "Rate limited. Retry in 18s." ✗ "Oops! Something went wrong
 | `ui_kits/docs/` | Documentation site (interactive) |
 | `SKILL.md` | Agent-skill entry point |
 
-Every component ships `<Name>.jsx` + `<Name>.d.ts` (props) + `<Name>.prompt.md` (usage) — **116 component exports across 11 categories** (buttons, inputs, display, feedback, overlay, layout, chat, ai, code, voice, workflow, utilities). This is a deliberately exhaustive set covering shadcn/ui primitives + AI-native surfaces (reasoning, tools, agents, voice, workflow graphs). Consume via the compiled bundle: `window.AxiomDesignSystem_7fc962`. Read each component's `.prompt.md` for copy-paste usage.
+Every component ships `<Name>.jsx` + `<Name>.d.ts` (props) + `<Name>.prompt.md` (usage) — **118 component exports across 11 categories** (buttons, inputs, display, feedback, overlay, layout, chat, ai, code, voice, workflow, utilities). This is a deliberately exhaustive set covering shadcn/ui primitives + AI-native surfaces (reasoning, tools, agents, voice, workflow graphs). Consume via the compiled bundle: `window.AxiomDesignSystem_7fc962`. Read each component's `.prompt.md` for copy-paste usage.
+
+**Forms are layered, not monolithic.** Presentational controls (Input/Select/Field…) own layout and never depend on a form engine. `Form` + `FormActions` add pure structure. `Form.useForm` is an **optional**, zero-dependency orchestration hook (values/errors/touched/validate/submit) exposed off the capitalized `Form` export — drop it for react-hook-form or TanStack and the controls still work. Errors surface only after blur or submit; spread `form.field(name)` onto any value control, or `form.field(name, {type:"checkbox"})` for boolean ones.
 
 ## CAVEATS
 - **Fonts are CDN substitutions:** Space Grotesk + JetBrains Mono via Google Fonts `@import` (no binaries shipped). Replace `tokens/fonts.css` with real `@font-face` + files for offline/production use.

package/README.md

@@ -55,7 +55,11 @@ import { Button, Composer, Reasoning } from "@agentaily/design-system";
 
 ### ③ Agent Skill
 
-仓库根目录的 `SKILL.md` 让整个目录可作为 Claude Code / Agent Skill 分发,供 AI 按 Agentaily 品牌产出设计稿或生产代码。
+`skill/SKILL.md` 是一个自包含的 Claude Code / Agent Skill —— 面向**消费者**的使用指南(品牌规则 + 如何用 `@agentaily/design-system` 包 + Storybook 目录链接),不含仓库内部实现。把 `skill/` 软链到 `~/.claude/skills/agentaily-design` 即可全局调用:
+
+```bash
+ln -s "$PWD/skill" ~/.claude/skills/agentaily-design
+```
 
 ## 结构
 

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

@@ -0,0 +1,164 @@
+import * as React from "react";
+
+/** Structural <form> wrapper. Pure layout — pass form.handleSubmit as onSubmit. */
+export interface FormProps extends React.FormHTMLAttributes<HTMLFormElement> {
+  /** Vertical rhythm between children. @default "normal" */
+  gap?: "tight" | "normal" | "loose";
+  onSubmit?: (e: React.FormEvent<HTMLFormElement>) => void;
+  children?: React.ReactNode;
+}
+
+/** Footer row for submit/cancel buttons. */
+export interface FormActionsProps extends React.HTMLAttributes<HTMLDivElement> {
+  /** Horizontal alignment of the buttons. @default "end" */
+  align?: "start" | "end" | "between";
+  /** Draw a separator line above the row. @default false */
+  bordered?: boolean;
+  /** Stretch buttons to fill the row equally. @default false */
+  full?: boolean;
+  children?: React.ReactNode;
+}
+
+/** A `{ value, message }` pair, or the bare value (message falls back to a default). */
+export type Rule<T> = T | { value: T; message: string };
+
+/** Built-in per-field validation rules, RHF-aligned. Pass as the 2nd arg to register/field. */
+export interface FieldRules<V = Record<string, any>> {
+  /** Non-empty (and, for checkboxes, checked). String = custom message. */
+  required?: boolean | string;
+  minLength?: Rule<number>;
+  maxLength?: Rule<number>;
+  min?: Rule<number>;
+  max?: Rule<number>;
+  pattern?: RegExp | { value: RegExp; message: string };
+  /** Custom validator(s). Return `true` (ok), a string (error message), or `false`. May be async. */
+  validate?:
+    | ((value: any, values: V) => boolean | string | Promise<boolean | string>)
+    | Record<string, (value: any, values: V) => boolean | string | Promise<boolean | string>>;
+  /** Set "checkbox" so register/field bind `checked` instead of `value`. */
+  type?: "checkbox";
+}
+
+export interface RegisterReturn {
+  name: string;
+  value?: any;
+  checked?: boolean;
+  onChange: (e: any) => void;
+  onBlur: () => void;
+}
+export interface FieldReturn extends RegisterReturn {
+  /** Current error for this field (only set once it has been validated). */
+  error?: string;
+}
+
+export interface FormState<V> {
+  errors: Record<string, string>;
+  touched: Record<string, boolean>;
+  dirtyFields: Record<string, boolean>;
+  isDirty: boolean;
+  /** True when the last validation run produced no errors. */
+  isValid: boolean;
+  isValidating: boolean;
+  isSubmitting: boolean;
+  isSubmitted: boolean;
+  isSubmitSuccessful: boolean;
+  submitCount: number;
+}
+
+export interface FormBag<V = Record<string, any>> extends FormState<V> {
+  values: V;
+  /** Alias of isSubmitted, kept for back-compat. */
+  submitted: boolean;
+  formState: FormState<V>;
+
+  /** RHF-compatible binding: `<input {...form.register("email", { required: true })} />`. */
+  register: (name: string, rules?: FieldRules<V>) => RegisterReturn;
+  /** Like register but also injects `error` for DS controls: `<Input {...form.field("email")} />`. */
+  field: (name: string, rules?: FieldRules<V>) => FieldReturn;
+
+  setValue: (
+    name: string,
+    value: any,
+    opts?: { shouldValidate?: boolean; shouldTouch?: boolean; shouldDirty?: boolean },
+  ) => void;
+  setValues: (values: V | ((prev: V) => V)) => void;
+  getValues: (name?: string) => any;
+  /** Read field value(s) reactively (re-renders on change). */
+  watch: (name?: string) => any;
+  /** Set a field error manually (e.g. a server-side error). */
+  setError: (name: string, message: string) => void;
+  clearErrors: (name?: string) => void;
+  /** Imperatively validate the form or one field. Resolves to validity. */
+  trigger: (name?: string) => Promise<boolean>;
+
+  /**
+   * Two call styles:
+   * - `onSubmit={form.handleSubmit}` (uses config.onSubmit) — works as a direct event/onClick handler.
+   * - `onSubmit={form.handleSubmit(onValid, onInvalid?)}` — RHF style, returns a handler.
+   * Always preventDefaults, validates, marks all fields touched, focuses the first error.
+   */
+  handleSubmit: {
+    (e?: React.FormEvent | React.MouseEvent): void;
+    (
+      onValid: (values: V) => void | Promise<any>,
+      onInvalid?: (errors: Record<string, string>) => void,
+    ): (e?: React.SyntheticEvent) => void;
+  };
+  reset: (
+    next?: V,
+    opts?: {
+      keepErrors?: boolean;
+      keepTouched?: boolean;
+      keepDirty?: boolean;
+      keepIsSubmitted?: boolean;
+      keepDefaultValues?: boolean;
+    },
+  ) => void;
+}
+
+export interface UseFormConfig<V = Record<string, any>> {
+  initialValues?: V;
+  /** Alias of initialValues (RHF naming). */
+  defaultValues?: V;
+  /** Schema-style validator: `(values) => ({ field: message })`. Sync or async. Composes with per-field rules. */
+  validate?: (values: V) => Record<string, string> | Promise<Record<string, string>> | undefined;
+  /** When validation first fires. @default "onSubmit" */
+  mode?: "onSubmit" | "onBlur" | "onChange" | "onTouched" | "all";
+  /** When to re-validate after the first submit. @default "onChange" */
+  reValidateMode?: "onChange" | "onBlur";
+  /** Called with values on a clean submit. May return a promise → toggles isSubmitting. */
+  onSubmit?: (values: V) => void | Promise<any>;
+  /** Called with the errors map when submit is attempted while invalid. */
+  onInvalid?: (errors: Record<string, string>) => void;
+  /** Focus the first errored `[name]` control on a failed submit. @default true */
+  shouldFocusError?: boolean;
+}
+
+export interface UseFieldArrayConfig<V = Record<string, any>> {
+  form: FormBag<V>;
+  /** Name of the array field on the form's values. */
+  name: string;
+}
+export interface FieldArrayReturn<T = any> {
+  /** Current rows, each with a stable `id`. */
+  fields: Array<T & { id: number }>;
+  append: (item: T) => void;
+  prepend: (item: T) => void;
+  remove: (index: number) => void;
+  insert: (index: number, item: T) => void;
+  move: (from: number, to: number) => void;
+  replace: (items: T[]) => void;
+  update: (index: number, item: T) => void;
+}
+
+export declare function Form(props: FormProps): JSX.Element;
+export declare namespace Form {
+  /** Production controlled form hook — RHF-aligned. Optional; drop it for RHF/TanStack. */
+  function useForm<V = Record<string, any>>(config?: UseFormConfig<V>): FormBag<V>;
+  /** Dynamic list fields. */
+  function useFieldArray<T = any, V = Record<string, any>>(
+    config: UseFieldArrayConfig<V>,
+  ): FieldArrayReturn<T>;
+  function Actions(props: FormActionsProps): JSX.Element;
+}
+export declare function FormActions(props: FormActionsProps): JSX.Element;

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":";;AAEA,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAkBpB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,aAAa,GAAG;AAC9E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAMO,SAAS,KAAK,EAAE,MAAM,UAAU,UAAU,UAAU,YAAY,IAAI,GAAG,QAAQ;AACpF,QAAM,MAAM;AAAA,IACV;AAAA,IACA,QAAQ,UAAU,mBAAmB,QAAQ,UAAU,mBAAmB;AAAA,IAC1E;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AACX,SACE,oBAAC,UAAK,WAAW,KAAK,UAAoB,YAAU,MAAE,GAAG,MACtD,SAAA,CACH;AAEJ;AAGO,SAAS,YAAY;AAAA,EAC1B,QAAQ;AAAA,EACR,WAAW;AAAA,EACX,OAAO;AAAA,EACP;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,QAAM,MAAM;AAAA,IACV;AAAA,IACA,uBAAuB;AAAA,IACvB,WAAW,+BAA+B;AAAA,IAC1C,OAAO,2BAA2B;AAAA,IAClC;AAAA,EAAA,EAEC,OAAO,OAAO,EACd,KAAK,GAAG;AACX,6BACG,OAAA,EAAI,WAAW,KAAM,GAAG,MACtB,UACH;AAEJ;AAQA,MAAM,UAAU,CAAC,MACf,MAAM,UAAa,MAAM,QAAQ,MAAM,MAAO,MAAM,QAAQ,CAAC,KAAK,EAAE,WAAW;AAGjF,eAAe,UAAU,OAAO,OAAO,QAAQ;AAC7C,MAAI,CAAC,MAAO,QAAO;AACnB,QAAM,EAAE,UAAU,WAAW,WAAW,KAAK,KAAK,SAAS,aAAa;AAExE,MAAI,aAAa,QAAQ,KAAK,KAAK,UAAU,QAAQ;AACnD,WAAO,OAAO,aAAa,WAAW,WAAW;AAAA,EACnD;AACA,MAAI,QAAQ,KAAK,EAAG,QAAO;AAE3B,QAAM,MAAM,CAAC,MAAO,OAAO,MAAM,WAAW,IAAI,EAAE,OAAO,GAAG,SAAS,OAAA;AAErE,MAAI,aAAa,MAAM;AACrB,UAAM,EAAE,OAAO,GAAG,QAAA,IAAY,IAAI,SAAS;AAC3C,QAAI,OAAO,KAAK,EAAE,SAAS,EAAG,QAAO,WAAW,oBAAoB,CAAC;AAAA,EACvE;AACA,MAAI,aAAa,MAAM;AACrB,UAAM,EAAE,OAAO,GAAG,QAAA,IAAY,IAAI,SAAS;AAC3C,QAAI,OAAO,KAAK,EAAE,SAAS,EAAG,QAAO,WAAW,mBAAmB,CAAC;AAAA,EACtE;AACA,MAAI,OAAO,MAAM;AACf,UAAM,EAAE,OAAO,GAAG,QAAA,IAAY,IAAI,GAAG;AACrC,QAAI,OAAO,KAAK,IAAI,EAAG,QAAO,WAAW,WAAW,CAAC;AAAA,EACvD;AACA,MAAI,OAAO,MAAM;AACf,UAAM,EAAE,OAAO,GAAG,QAAA,IAAY,IAAI,GAAG;AACrC,QAAI,OAAO,KAAK,IAAI,EAAG,QAAO,WAAW,WAAW,CAAC;AAAA,EACvD;AACA,MAAI,SAAS;AACX,UAAM,KAAK,mBAAmB,SAAS,UAAU,QAAQ;AACzD,UAAM,UAAU,mBAAmB,SAAS,SAAY,QAAQ;AAChE,QAAI,MAAM,CAAC,GAAG,KAAK,OAAO,KAAK,CAAC,EAAG,QAAO,WAAW;AAAA,EACvD;AACA,MAAI,UAAU;AACZ,UAAM,MAAM,OAAO,aAAa,aAAa,EAAE,GAAG,aAAa;AAC/D,eAAW,OAAO,OAAO,KAAK,GAAG,GAAG;AAClC,YAAM,MAAM,MAAM,IAAI,GAAG,EAAE,OAAO,MAAM;AACxC,UAAI,QAAQ,MAAO,QAAO;AAC1B,UAAI,OAAO,QAAQ,SAAU,QAAO;AAAA,IACtC;AAAA,EACF;AACA,SAAO;AACT;AAEA,SAAS,QAAQ,SAAS,IAAI;AAC5B,QAAM;AAAA,IACJ,gBAAgB,CAAA;AAAA,IAChB;AAAA;AAAA,IACA;AAAA;AAAA,IACA,OAAO;AAAA;AAAA,IACP,iBAAiB;AAAA;AAAA,IACjB,UAAU;AAAA,IACV,WAAW;AAAA,IACX,mBAAmB;AAAA,EAAA,IACjB;AAEJ,QAAM,WAAW,iBAAiB;AAClC,QAAM,CAAC,QAAQ,cAAc,IAAI,SAAS,QAAQ;AAClD,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAA,CAAE;AACvC,QAAM,CAAC,SAAS,UAAU,IAAI,SAAS,CAAA,CAAE;AACzC,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAA,CAAE;AACjD,QAAM,CAAC,cAAc,aAAa,IAAI,SAAS,KAAK;AACpD,QAAM,CAAC,aAAa,YAAY,IAAI,SAAS,KAAK;AAClD,QAAM,CAAC,oBAAoB,mBAAmB,IAAI,SAAS,KAAK;AAChE,QAAM,CAAC,aAAa,cAAc,IAAI,SAAS,CAAC;AAChD,QAAM,CAAC,cAAc,aAAa,IAAI,SAAS,KAAK;AAEpD,QAAM,YAAY,OAAO,MAAM;AAC/B,YAAU,UAAU;AACpB,QAAM,YAAY,OAAO,MAAM;AAC/B,YAAU,UAAU;AACpB,QAAM,WAAW,OAAO,EAAE;AAC1B,QAAM,cAAc,OAAO,QAAQ;AACnC,QAAM,YAAY,OAAO,IAAI;AAE7B,QAAM,cAAc,YAAY,CAAC,YAAY;AAC3C,mBAAe,CAAC,SAAS;AACvB,YAAM,OAAO,OAAO,YAAY,aAAa,QAAQ,IAAI,IAAI;AAC7D,gBAAU,UAAU;AACpB,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAA,CAAE;AAGL,QAAM,gBAAgB;AAAA,IACpB,OAAO,SAAS;AACd,YAAM,OAAO,UAAU;AACvB,YAAM,MAAM,CAAA;AACZ,YAAM,QAAQ,OAAO,CAAC,IAAI,IAAI,OAAO,KAAK,SAAS,OAAO;AAC1D,iBAAW,QAAQ,OAAO;AACxB,cAAM,MAAM,MAAM,UAAU,SAAS,QAAQ,IAAI,GAAG,KAAK,IAAI,GAAG,IAAI;AACpE,YAAI,IAAK,KAAI,IAAI,IAAI;AAAA,MACvB;AACA,UAAI,UAAU;AACZ,cAAM,SAAU,MAAM,SAAS,IAAI,KAAM,CAAA;AACzC,mBAAW,KAAK,OAAO,KAAK,MAAM,GAAG;AACnC,cAAI,QAAQ,MAAM,KAAM;AACxB,cAAI,CAAC,IAAI,CAAC,KAAK,OAAO,CAAC,EAAG,KAAI,CAAC,IAAI,OAAO,CAAC;AAAA,QAC7C;AAAA,MACF;AACA,aAAO;AAAA,IACT;AAAA,IACA,CAAC,QAAQ;AAAA,EAAA;AAIX,QAAM,kBAAkB;AAAA,IACtB,OAAO,SAAS;AACd,oBAAc,IAAI;AAClB,YAAM,UAAU,MAAM,cAAc,IAAI;AACxC,gBAAU,CAAC,SAAS;AAClB,cAAM,OAAO,EAAE,GAAG,KAAA;AAClB,YAAI,QAAQ,IAAI,QAAQ,IAAI,IAAI,QAAQ,IAAI;AAAA,YACvC,QAAO,KAAK,IAAI;AACrB,kBAAU,UAAU;AACpB,eAAO;AAAA,MACT,CAAC;AACD,oBAAc,KAAK;AAAA,IACrB;AAAA,IACA,CAAC,aAAa;AAAA,EAAA;AAGhB,QAAM,mBAAmB;AAAA,IACvB,CAAC,OAAO,SAAS;AACf,UAAI,oBAAoB,mBAAmB;AAC3C,cAAQ,MAAA;AAAA,QACN,KAAK;AACH,iBAAO;AAAA,QACT,KAAK;AACH,iBAAO,UAAU;AAAA,QACnB,KAAK;AACH,iBAAO,UAAU;AAAA,QACnB,KAAK;AACH,iBAAO,UAAU,UAAW,UAAU,YAAY,QAAQ,IAAI;AAAA,QAChE,KAAK;AAAA,QACL;AACE,iBAAO;AAAA,MAAA;AAAA,IAEb;AAAA,IACA,CAAC,aAAa,gBAAgB,MAAM,OAAO;AAAA,EAAA;AAG7C,QAAM,WAAW;AAAA,IACf,CAAC,MAAM,OAAO,OAAO,OAAO;AAC1B,kBAAY,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,IAAI,GAAG,MAAA,EAAQ;AAClD,UAAI,KAAK,gBAAgB,OAAO;AAC9B,uBAAe,CAAC,MAAO,YAAY,QAAQ,IAAI,MAAM,QAAQ,IAAI,EAAE,GAAG,GAAG,CAAC,IAAI,GAAG,MAAO;AAAA,MAC1F;AACA,UAAI,KAAK,YAAa,YAAW,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,IAAI,GAAG,KAAA,EAAO;AAChE,UAAI,KAAK,eAAgB,iBAAgB,IAAI;AAAA,IAC/C;AAAA,IACA,CAAC,aAAa,eAAe;AAAA,EAAA;AAI/B,QAAM,WAAW;AAAA,IACf,CAAC,MAAM,UAAU;AACf,UAAI,MAAO,UAAS,QAAQ,IAAI,IAAI;AAAA,eAC3B,EAAE,QAAQ,SAAS,SAAU,UAAS,QAAQ,IAAI,IAAI;AAC/D,YAAM,aAAa,SAAS,MAAM,SAAS;AAC3C,YAAM,WAAW,CAAC,MAAM;AACtB,cAAM,IAAI,KAAK,EAAE;AACjB,cAAM,OAAO,IAAK,EAAE,SAAS,aAAa,EAAE,UAAU,EAAE,QAAS;AACjE,oBAAY,CAAC,UAAU,EAAE,GAAG,MAAM,CAAC,IAAI,GAAG,KAAA,EAAO;AACjD,uBAAe,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,IAAI,GAAG,KAAA,EAAO;AAC9C,YAAI,iBAAiB,UAAU,IAAI,mBAAmB,IAAI;AAAA,MAC5D;AACA,YAAM,SAAS,MAAM;AACnB,mBAAW,CAAC,OAAO,EAAE,GAAG,GAAG,CAAC,IAAI,GAAG,KAAA,EAAO;AAC1C,YAAI,iBAAiB,QAAQ,IAAI,mBAAmB,IAAI;AAAA,MAC1D;AACA,YAAM,OAAO,EAAE,MAAM,UAAU,OAAA;AAC/B,UAAI,WAAY,MAAK,UAAU,CAAC,CAAC,OAAO,IAAI;AAAA,UACvC,MAAK,QAAQ,OAAO,IAAI,KAAK;AAClC,aAAO;AAAA,IACT;AAAA,IACA,CAAC,QAAQ,aAAa,kBAAkB,eAAe;AAAA,EAAA;AAGzD,QAAM,QAAQ;AAAA,IACZ,CAAC,MAAM,SAAS;AACd,YAAM,QAAQ,SAAS,MAAM,IAAI;AACjC,YAAM,QAAQ,OAAO,IAAI;AACzB,aAAO;AAAA,IACT;AAAA,IACA,CAAC,UAAU,MAAM;AAAA,EAAA;AAGnB,QAAM,UAAU;AAAA,IACd,OAAO,SAAS;AACd,oBAAc,IAAI;AAClB,YAAM,OAAO,MAAM,cAAc,IAAI;AACrC,UAAI,MAAM;AACR,kBAAU,CAAC,SAAS;AAClB,gBAAM,OAAO,EAAE,GAAG,KAAA;AAClB,cAAI,KAAK,IAAI,QAAQ,IAAI,IAAI,KAAK,IAAI;AAAA,cACjC,QAAO,KAAK,IAAI;AACrB,oBAAU,UAAU;AACpB,iBAAO;AAAA,QACT,CAAC;AACD,sBAAc,KAAK;AACnB,eAAO,CAAC,KAAK,IAAI;AAAA,MACnB;AACA,gBAAU,IAAI;AACd,gBAAU,UAAU;AACpB,oBAAc,KAAK;AACnB,aAAO,OAAO,KAAK,IAAI,EAAE,WAAW;AAAA,IACtC;AAAA,IACA,CAAC,aAAa;AAAA,EAAA;AAGhB,QAAM,WAAW,YAAY,CAAC,MAAM,YAAY;AAC9C,cAAU,CAAC,SAAS;AAClB,YAAM,IAAI,EAAE,GAAG,MAAM,CAAC,IAAI,GAAG,QAAA;AAC7B,gBAAU,UAAU;AACpB,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAA,CAAE;AAEL,QAAM,cAAc,YAAY,CAAC,SAAS;AACxC,cAAU,CAAC,SAAS;AAClB,UAAI,CAAC,MAAM;AACT,kBAAU,UAAU,CAAA;AACpB,eAAO,CAAA;AAAA,MACT;AACA,YAAM,OAAO,EAAE,GAAG,KAAA;AAClB,aAAO,KAAK,IAAI;AAChB,gBAAU,UAAU;AACpB,aAAO;AAAA,IACT,CAAC;AAAA,EACH,GAAG,CAAA,CAAE;AAEL,QAAM,YAAY,YAAY,CAAC,SAAU,OAAO,UAAU,QAAQ,IAAI,IAAI,UAAU,SAAU,CAAA,CAAE;AAChG,QAAM,QAAQ,YAAY,CAAC,SAAU,OAAO,OAAO,IAAI,IAAI,QAAS,CAAC,MAAM,CAAC;AAE5E,QAAM,aAAa;AAAA,IACjB,CAAC,SAAS;AACR,UAAI,CAAC,oBAAoB,OAAO,aAAa,YAAa;AAC1D,YAAM,QAAQ,OAAO,KAAK,IAAI,EAAE,CAAC;AACjC,UAAI,CAAC,MAAO;AACZ,YAAM,MAAM,UAAU,WAAW,UAAU,cAAc,UAAU,KAAK,IAAI;AAC5E,UAAI,MAAM,GAAG,MAAO,IAAG,MAAA;AAAA,IACzB;AAAA,IACA,CAAC,gBAAgB;AAAA,EAAA;AAGnB,QAAM,eAAe;AAAA,IACnB,CAAC,YAAY,iBAAiB;AAC5B,YAAM,SAAS,OAAO,MAAM;AAC1B,YAAI,KAAK,EAAE,eAAgB,GAAE,eAAA;AAC7B,YAAI,KAAK,EAAE,iBAAiB,EAAE,cAAc,YAAY;AACtD,oBAAU,UAAU,EAAE;AACxB,sBAAc,IAAI;AAClB,sBAAc,IAAI;AAClB,cAAM,OAAO,MAAM,cAAA;AACnB,kBAAU,IAAI;AACd,kBAAU,UAAU;AACpB,mBAAW,MAAM;AACf,gBAAM,MAAM,CAAA;AACZ,WAAC,GAAG,OAAO,KAAK,SAAS,OAAO,GAAG,GAAG,OAAO,KAAK,UAAU,OAAO,CAAC,EAAE;AAAA,YACpE,CAAC,MAAO,IAAI,CAAC,IAAI;AAAA,UAAA;AAEnB,iBAAO;AAAA,QACT,CAAC;AACD,qBAAa,IAAI;AACjB,uBAAe,CAAC,MAAM,IAAI,CAAC;AAC3B,sBAAc,KAAK;AACnB,cAAM,QAAQ,OAAO,KAAK,IAAI,EAAE,WAAW;AAC3C,YAAI,OAAO;AACT,cAAI;AACF,mBAAO,OAAO,eAAe,aAAa,aAAa;AAAA,cACrD,UAAU;AAAA,YAAA;AAEZ,gCAAoB,IAAI;AAAA,UAC1B,SAAS,KAAK;AACZ,gCAAoB,KAAK;AACzB,kBAAM;AAAA,UACR,UAAA;AACE,0BAAc,KAAK;AAAA,UACrB;AAAA,QACF,OAAO;AACL,8BAAoB,KAAK;AACzB,wBAAc,KAAK;AACnB,WAAC,gBAAgB,gBAAgB,IAAI;AACrC,qBAAW,IAAI;AAAA,QACjB;AAAA,MACF;AAGA,UAAI,OAAO,eAAe,WAAY,QAAO;AAC7C,aAAO,OAAO,UAAU;AAAA,IAC1B;AAAA,IACA,CAAC,eAAe,aAAa,cAAc,UAAU;AAAA,EAAA;AAGvD,QAAM,QAAQ;AAAA,IACZ,CAAC,MAAM,OAAO,OAAO;AACnB,YAAM,SAAS,QAAQ,YAAY;AACnC,UAAI,KAAK,sBAAsB,KAAM,aAAY,UAAU;AAC3D,kBAAY,MAAM;AAClB,UAAI,CAAC,KAAK,YAAY;AACpB,kBAAU,CAAA,CAAE;AACZ,kBAAU,UAAU,CAAA;AAAA,MACtB;AACA,UAAI,CAAC,KAAK,YAAa,YAAW,CAAA,CAAE;AACpC,UAAI,CAAC,KAAK,UAAW,gBAAe,CAAA,CAAE;AACtC,UAAI,CAAC,KAAK,iBAAiB;AACzB,qBAAa,KAAK;AAClB,4BAAoB,KAAK;AAAA,MAC3B;AAAA,IACF;AAAA,IACA,CAAC,WAAW;AAAA,EAAA;AAGd,QAAM,UAAU,OAAO,KAAK,WAAW,EAAE,SAAS;AAClD,QAAM,UAAU,OAAO,KAAK,MAAM,EAAE,WAAW;AAE/C,QAAM,YAAY;AAAA,IAChB,OAAO;AAAA,MACL;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,IAEF;AAAA,MACE;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,MACA;AAAA,IAAA;AAAA,EACF;AAGF,SAAO;AAAA;AAAA,IAEL;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA,WAAW;AAAA,IACX;AAAA;AAAA,IAEA;AAAA,IACA;AAAA;AAAA,IAEA;AAAA,IACA,WAAW;AAAA,IACX;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA;AAAA,IAEA,YAAY;AAAA,EAAA;AAEhB;AAMA,IAAI,SAAS;AACb,SAAS,cAAc,EAAE,MAAM,QAAQ;AACrC,QAAM,UAAU,OAAO,EAAE;AACzB,QAAM,OAAO,KAAK,UAAU,IAAI,KAAK,CAAA;AAErC,SAAO,QAAQ,QAAQ,SAAS,KAAK,OAAQ,SAAQ,QAAQ,KAAK,EAAE,MAAM;AAC1E,MAAI,QAAQ,QAAQ,SAAS,KAAK,OAAQ,SAAQ,UAAU,QAAQ,QAAQ,MAAM,GAAG,KAAK,MAAM;AAEhG,QAAM,SAAS,KAAK,IAAI,CAAC,MAAM,OAAO,EAAE,GAAG,MAAM,IAAI,QAAQ,QAAQ,CAAC,IAAI;AAE1E,QAAM,SAAS,CAAC,MAAM,SAAS;AAC7B,YAAQ,UAAU;AAClB,SAAK,SAAS,MAAM,MAAM,EAAE,aAAa,MAAM;AAAA,EACjD;AAEA,QAAM,SAAS;AAAA,IACb,CAAC,SAAS;AACR,YAAM,MAAM,KAAK,UAAU,IAAI,KAAK,CAAA;AACpC,aAAO,CAAC,GAAG,KAAK,IAAI,GAAG,CAAC,GAAG,QAAQ,SAAS,EAAE,MAAM,CAAC;AAAA,IACvD;AAAA,IACA,CAAC,MAAM,IAAI;AAAA,EAAA;AAEb,QAAM,UAAU;AAAA,IACd,CAAC,SAAS;AACR,YAAM,MAAM,KAAK,UAAU,IAAI,KAAK,CAAA;AACpC,aAAO,CAAC,MAAM,GAAG,GAAG,GAAG,CAAC,EAAE,QAAQ,GAAG,QAAQ,OAAO,CAAC;AAAA,IACvD;AAAA,IACA,CAAC,MAAM,IAAI;AAAA,EAAA;AAEb,QAAM,SAAS;AAAA,IACb,CAAC,UAAU;AACT,YAAM,MAAM,KAAK,UAAU,IAAI,KAAK,CAAA;AACpC;AAAA,QACE,IAAI,OAAO,CAAC,GAAG,MAAM,MAAM,KAAK;AAAA,QAChC,QAAQ,QAAQ,OAAO,CAAC,GAAG,MAAM,MAAM,KAAK;AAAA,MAAA;AAAA,IAEhD;AAAA,IACA,CAAC,MAAM,IAAI;AAAA,EAAA;AAEb,QAAM,SAAS;AAAA,IACb,CAAC,OAAO,SAAS;AACf,YAAM,OAAO,KAAK,UAAU,IAAI,KAAK,CAAA,GAAI,MAAA;AACzC,YAAM,OAAO,QAAQ,QAAQ,MAAA;AAC7B,UAAI,OAAO,OAAO,GAAG,IAAI;AACzB,WAAK,OAAO,OAAO,GAAG,EAAE,MAAM;AAC9B,aAAO,KAAK,IAAI;AAAA,IAClB;AAAA,IACA,CAAC,MAAM,IAAI;AAAA,EAAA;AAEb,QAAM,OAAO;AAAA,IACX,CAAC,MAAM,OAAO;AACZ,YAAM,OAAO,KAAK,UAAU,IAAI,KAAK,CAAA,GAAI,MAAA;AACzC,YAAM,OAAO,QAAQ,QAAQ,MAAA;AAC7B,UAAI,OAAO,IAAI,GAAG,IAAI,OAAO,MAAM,CAAC,EAAE,CAAC,CAAC;AACxC,WAAK,OAAO,IAAI,GAAG,KAAK,OAAO,MAAM,CAAC,EAAE,CAAC,CAAC;AAC1C,aAAO,KAAK,IAAI;AAAA,IAClB;AAAA,IACA,CAAC,MAAM,IAAI;AAAA,EAAA;AAEb,QAAM,UAAU;AAAA,IACd,CAAC,UAAU;AACT;AAAA,QACE;AAAA,QACA,MAAM,IAAI,MAAM,EAAE,MAAM;AAAA,MAAA;AAAA,IAE5B;AAAA,IACA,CAAC,MAAM,IAAI;AAAA,EAAA;AAEb,QAAM,SAAS;AAAA,IACb,CAAC,OAAO,SAAS;AACf,YAAM,OAAO,KAAK,UAAU,IAAI,KAAK,CAAA,GAAI,MAAA;AACzC,UAAI,KAAK,IAAI;AACb,aAAO,KAAK,QAAQ,QAAQ,MAAA,CAAO;AAAA,IACrC;AAAA,IACA,CAAC,MAAM,IAAI;AAAA,EAAA;AAGb,SAAO,EAAE,QAAQ,QAAQ,SAAS,QAAQ,QAAQ,MAAM,SAAS,OAAA;AACnE;AAEA,KAAK,UAAU;AACf,KAAK,gBAAgB;AACrB,KAAK,UAAU;"}

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/index.d.ts

@@ -76,6 +76,7 @@ export * from "./components/inputs/Checkbox";
 export * from "./components/inputs/Combobox";
 export * from "./components/inputs/DatePicker";
 export * from "./components/inputs/Field";
+export * from "./components/inputs/Form";
 export * from "./components/inputs/Input";
 export * from "./components/inputs/InputGroup";
 export * from "./components/inputs/InputOTP";

package/dist/index.js

@@ -61,6 +61,7 @@ import { Checkbox } from "./components/inputs/Checkbox.js";
 import { Combobox } from "./components/inputs/Combobox.js";
 import { DatePicker } from "./components/inputs/DatePicker.js";
 import { Field, FieldGroup } from "./components/inputs/Field.js";
+import { Form, FormActions } from "./components/inputs/Form.js";
 import { Input } from "./components/inputs/Input.js";
 import { InputGroup } from "./components/inputs/InputGroup.js";
 import { InputOTP } from "./components/inputs/InputOTP.js";
@@ -139,6 +140,8 @@ export {
   FieldGroup,
   FileTree,
   Flow,
+  Form,
+  FormActions,
   HoverCard,
   IconButton,
   Image,

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}
+{"version":3,"file":"index.js","sources":[],"sourcesContent":[],"names":[],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@agentaily/design-system",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "description": "Agentaily design system — dark-first monochrome React component library (116 components) + Storybook.",
   "type": "module",
   "license": "UNLICENSED",