@agentaily/design-system 0.1.0

package/dist/components/inputs/Checkbox.js

@@ -0,0 +1,42 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_CHECKBOX_CSS = `
+.ax-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }
+.ax-check input { position: absolute; opacity: 0; width: 0; height: 0; }
+.ax-check__box {
+  width: 16px; height: 16px; flex: none; position: relative;
+  background: var(--surface-card); border: 1px solid var(--border-strong);
+  border-radius: var(--radius-1);
+  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);
+}
+.ax-check__box::after {
+  content: ""; position: absolute; left: 4.5px; top: 1.5px;
+  width: 4px; height: 8px; opacity: 0;
+  border-right: 2px solid var(--accent-fg);
+  border-bottom: 2px solid var(--accent-fg);
+  transform: rotate(45deg);
+  transition: opacity var(--dur-1) var(--ease-out);
+}
+.ax-check input:checked + .ax-check__box { background: var(--accent); border-color: var(--accent); }
+.ax-check input:checked + .ax-check__box::after { opacity: 1; }
+.ax-check input:focus-visible + .ax-check__box { box-shadow: var(--ring); }
+.ax-check input:disabled + .ax-check__box { opacity: 0.4; }
+.ax-check__label { font-size: var(--text-sm); color: var(--text-body); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-checkbox-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-checkbox-css";
+  s.textContent = AX_CHECKBOX_CSS;
+  document.head.appendChild(s);
+}
+function Checkbox({ label, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("label", { className: ["ax-check", className].filter(Boolean).join(" "), children: [
+    /* @__PURE__ */ jsx("input", { type: "checkbox", ...rest }),
+    /* @__PURE__ */ jsx("span", { className: "ax-check__box" }),
+    label ? /* @__PURE__ */ jsx("span", { className: "ax-check__label", children: label }) : null
+  ] });
+}
+export {
+  Checkbox
+};
+//# sourceMappingURL=Checkbox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Checkbox.js","sources":["../../../src/components/inputs/Checkbox.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_CHECKBOX_CSS = `\n.ax-check { display: inline-flex; align-items: center; gap: 10px; cursor: pointer; user-select: none; }\n.ax-check input { position: absolute; opacity: 0; width: 0; height: 0; }\n.ax-check__box {\n  width: 16px; height: 16px; flex: none; position: relative;\n  background: var(--surface-card); border: 1px solid var(--border-strong);\n  border-radius: var(--radius-1);\n  transition: background var(--dur-1) var(--ease-out), border-color var(--dur-1) var(--ease-out);\n}\n.ax-check__box::after {\n  content: \"\"; position: absolute; left: 4.5px; top: 1.5px;\n  width: 4px; height: 8px; opacity: 0;\n  border-right: 2px solid var(--accent-fg);\n  border-bottom: 2px solid var(--accent-fg);\n  transform: rotate(45deg);\n  transition: opacity var(--dur-1) var(--ease-out);\n}\n.ax-check input:checked + .ax-check__box { background: var(--accent); border-color: var(--accent); }\n.ax-check input:checked + .ax-check__box::after { opacity: 1; }\n.ax-check input:focus-visible + .ax-check__box { box-shadow: var(--ring); }\n.ax-check input:disabled + .ax-check__box { opacity: 0.4; }\n.ax-check__label { font-size: var(--text-sm); color: var(--text-body); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-checkbox-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-checkbox-css\";\n  s.textContent = AX_CHECKBOX_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Checkbox({ label, className = \"\", ...rest }) {\n  return (\n    <label className={[\"ax-check\", className].filter(Boolean).join(\" \")}>\n      <input type=\"checkbox\" {...rest} />\n      <span className=\"ax-check__box\"></span>\n      {label ? <span className=\"ax-check__label\">{label}</span> : null}\n    </label>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,kBAAkB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAwBxB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,iBAAiB,GAAG;AAClF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,SAAS,EAAE,OAAO,YAAY,IAAI,GAAG,QAAQ;AAC3D,SACE,qBAAC,SAAA,EAAM,WAAW,CAAC,YAAY,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAChE,UAAA;AAAA,IAAA,oBAAC,SAAA,EAAM,MAAK,YAAY,GAAG,KAAA,CAAM;AAAA,IACjC,oBAAC,QAAA,EAAK,WAAU,gBAAA,CAAgB;AAAA,IAC/B,QAAQ,oBAAC,QAAA,EAAK,WAAU,mBAAmB,iBAAM,IAAU;AAAA,EAAA,GAC9D;AAEJ;"}

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

@@ -0,0 +1,3 @@
+/** Searchable single-select with keyboard nav and a check on the chosen option. */
+export interface ComboboxProps { value?: string; options: Array<string | { value: string; label: string }>; placeholder?: string; searchPlaceholder?: string; onChange?: (value: string) => void; }
+export declare function Combobox(props: ComboboxProps): JSX.Element;

package/dist/components/inputs/Combobox.js

@@ -0,0 +1,94 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useMemo, useCallback, useEffect } from "react";
+const AX_COMBOBOX_CSS = `
+.ax-combobox { position: relative; display: inline-flex; flex-direction: column; min-width: 220px; }
+.ax-combobox__trigger { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; cursor: pointer; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-2); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); transition: border-color var(--dur-1) var(--ease-out); }
+.ax-combobox__trigger:hover { border-color: var(--border-strong); }
+.ax-combobox__trigger:focus-visible { outline: none; box-shadow: var(--ring); }
+.ax-combobox__value { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ax-combobox__value--empty { color: var(--text-faint); }
+.ax-combobox__chev { width: 14px; height: 14px; color: var(--text-faint); }
+.ax-combobox__panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-3); box-shadow: var(--shadow-2); overflow: hidden; animation: ax-combobox-in var(--dur-2) var(--ease-out); }
+.ax-combobox__search { width: 100%; height: 38px; padding: 0 12px; background: none; border: none; border-bottom: 1px solid var(--border-default); outline: none; color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); }
+.ax-combobox__search::placeholder { color: var(--text-faint); }
+.ax-combobox__list { max-height: 200px; overflow-y: auto; padding: var(--space-1); }
+.ax-combobox__opt { display: flex; align-items: center; gap: 8px; width: 100%; appearance: none; background: none; border: none; text-align: left; cursor: pointer; padding: 8px 10px; border-radius: var(--radius-2); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); }
+.ax-combobox__opt--active { background: var(--surface-raised); }
+.ax-combobox__check { width: 14px; flex: none; color: var(--accent); }
+.ax-combobox__empty { padding: 20px; text-align: center; color: var(--text-faint); font-size: var(--text-sm); }
+@keyframes ax-combobox-in { from { opacity: 0; transform: translateY(-4px); } }
+@media (prefers-reduced-motion: reduce) { .ax-combobox__panel { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-combobox-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-combobox-css";
+  s.textContent = AX_COMBOBOX_CSS;
+  document.head.appendChild(s);
+}
+const Chev = /* @__PURE__ */ jsx("svg", { className: "ax-combobox__chev", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "m7 15 5 5 5-5M7 9l5-5 5 5" }) });
+const Check = /* @__PURE__ */ jsx("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2.5", strokeLinecap: "round", strokeLinejoin: "round", children: /* @__PURE__ */ jsx("path", { d: "M20 6 9 17l-5-5" }) });
+function Combobox({ value, options = [], placeholder = "Select…", searchPlaceholder = "Search…", onChange, className = "", ...rest }) {
+  const [open, setOpen] = useState(false);
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const ref = useRef(null);
+  const searchRef = useRef(null);
+  const norm = (o) => typeof o === "string" ? { value: o, label: o } : o;
+  const filtered = useMemo(() => {
+    const q = query.trim().toLowerCase();
+    return options.map(norm).filter((o) => !q || o.label.toLowerCase().includes(q));
+  }, [options, query]);
+  const current = options.map(norm).find((o) => o.value === value);
+  const onDoc = useCallback((e) => {
+    if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      document.addEventListener("mousedown", onDoc);
+      if (searchRef.current) searchRef.current.focus();
+      return () => document.removeEventListener("mousedown", onDoc);
+    } else {
+      setQuery("");
+      setActive(0);
+    }
+  }, [open, onDoc]);
+  const choose = (o) => {
+    onChange && onChange(o.value);
+    setOpen(false);
+  };
+  const onKey = (e) => {
+    if (e.key === "ArrowDown") {
+      e.preventDefault();
+      setActive((a) => Math.min(a + 1, filtered.length - 1));
+    } else if (e.key === "ArrowUp") {
+      e.preventDefault();
+      setActive((a) => Math.max(a - 1, 0));
+    } else if (e.key === "Enter") {
+      e.preventDefault();
+      if (filtered[active]) choose(filtered[active]);
+    } else if (e.key === "Escape") setOpen(false);
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-combobox", className].filter(Boolean).join(" "), ref, ...rest, children: [
+    /* @__PURE__ */ jsxs("button", { className: "ax-combobox__trigger", onClick: () => setOpen((o) => !o), children: [
+      /* @__PURE__ */ jsx("span", { className: "ax-combobox__value" + (current ? "" : " ax-combobox__value--empty"), children: current ? current.label : placeholder }),
+      Chev
+    ] }),
+    open ? /* @__PURE__ */ jsxs("div", { className: "ax-combobox__panel", children: [
+      /* @__PURE__ */ jsx("input", { ref: searchRef, className: "ax-combobox__search", placeholder: searchPlaceholder, value: query, onChange: (e) => {
+        setQuery(e.target.value);
+        setActive(0);
+      }, onKeyDown: onKey }),
+      /* @__PURE__ */ jsxs("div", { className: "ax-combobox__list", children: [
+        filtered.length === 0 ? /* @__PURE__ */ jsx("div", { className: "ax-combobox__empty", children: "No match." }) : null,
+        filtered.map((o, i) => /* @__PURE__ */ jsxs("button", { className: "ax-combobox__opt" + (i === active ? " ax-combobox__opt--active" : ""), onMouseEnter: () => setActive(i), onClick: () => choose(o), children: [
+          /* @__PURE__ */ jsx("span", { className: "ax-combobox__check", children: o.value === value ? Check : null }),
+          o.label
+        ] }, o.value))
+      ] })
+    ] }) : null
+  ] });
+}
+export {
+  Combobox
+};
+//# sourceMappingURL=Combobox.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Combobox.js","sources":["../../../src/components/inputs/Combobox.jsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback, useMemo } from \"react\";\n\nconst AX_COMBOBOX_CSS = `\n.ax-combobox { position: relative; display: inline-flex; flex-direction: column; min-width: 220px; }\n.ax-combobox__trigger { display: flex; align-items: center; gap: 8px; height: 36px; padding: 0 10px 0 12px; cursor: pointer; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-2); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); transition: border-color var(--dur-1) var(--ease-out); }\n.ax-combobox__trigger:hover { border-color: var(--border-strong); }\n.ax-combobox__trigger:focus-visible { outline: none; box-shadow: var(--ring); }\n.ax-combobox__value { flex: 1; text-align: left; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }\n.ax-combobox__value--empty { color: var(--text-faint); }\n.ax-combobox__chev { width: 14px; height: 14px; color: var(--text-faint); }\n.ax-combobox__panel { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; background: var(--surface-panel); border: 1px solid var(--border-strong); border-radius: var(--radius-3); box-shadow: var(--shadow-2); overflow: hidden; animation: ax-combobox-in var(--dur-2) var(--ease-out); }\n.ax-combobox__search { width: 100%; height: 38px; padding: 0 12px; background: none; border: none; border-bottom: 1px solid var(--border-default); outline: none; color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); }\n.ax-combobox__search::placeholder { color: var(--text-faint); }\n.ax-combobox__list { max-height: 200px; overflow-y: auto; padding: var(--space-1); }\n.ax-combobox__opt { display: flex; align-items: center; gap: 8px; width: 100%; appearance: none; background: none; border: none; text-align: left; cursor: pointer; padding: 8px 10px; border-radius: var(--radius-2); color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); }\n.ax-combobox__opt--active { background: var(--surface-raised); }\n.ax-combobox__check { width: 14px; flex: none; color: var(--accent); }\n.ax-combobox__empty { padding: 20px; text-align: center; color: var(--text-faint); font-size: var(--text-sm); }\n@keyframes ax-combobox-in { from { opacity: 0; transform: translateY(-4px); } }\n@media (prefers-reduced-motion: reduce) { .ax-combobox__panel { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-combobox-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-combobox-css\";\n  s.textContent = AX_COMBOBOX_CSS;\n  document.head.appendChild(s);\n}\n\nconst Chev = <svg className=\"ax-combobox__chev\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"m7 15 5 5 5-5M7 9l5-5 5 5\"></path></svg>;\nconst Check = <svg width=\"14\" height=\"14\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2.5\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><path d=\"M20 6 9 17l-5-5\"></path></svg>;\n\nexport function Combobox({ value, options = [], placeholder = \"Select…\", searchPlaceholder = \"Search…\", onChange, className = \"\", ...rest }) {\n  const [open, setOpen] = useState(false);\n  const [query, setQuery] = useState(\"\");\n  const [active, setActive] = useState(0);\n  const ref = useRef(null);\n  const searchRef = useRef(null);\n\n  const norm = (o) => (typeof o === \"string\" ? { value: o, label: o } : o);\n  const filtered = useMemo(() => {\n    const q = query.trim().toLowerCase();\n    return options.map(norm).filter((o) => !q || o.label.toLowerCase().includes(q));\n  }, [options, query]);\n\n  const current = options.map(norm).find((o) => o.value === value);\n\n  const onDoc = useCallback((e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }, []);\n  useEffect(() => {\n    if (open) {\n      document.addEventListener(\"mousedown\", onDoc);\n      if (searchRef.current) searchRef.current.focus();\n      return () => document.removeEventListener(\"mousedown\", onDoc);\n    } else { setQuery(\"\"); setActive(0); }\n  }, [open, onDoc]);\n\n  const choose = (o) => { onChange && onChange(o.value); setOpen(false); };\n  const onKey = (e) => {\n    if (e.key === \"ArrowDown\") { e.preventDefault(); setActive((a) => Math.min(a + 1, filtered.length - 1)); }\n    else if (e.key === \"ArrowUp\") { e.preventDefault(); setActive((a) => Math.max(a - 1, 0)); }\n    else if (e.key === \"Enter\") { e.preventDefault(); if (filtered[active]) choose(filtered[active]); }\n    else if (e.key === \"Escape\") setOpen(false);\n  };\n\n  return (\n    <div className={[\"ax-combobox\", className].filter(Boolean).join(\" \")} ref={ref} {...rest}>\n      <button className=\"ax-combobox__trigger\" onClick={() => setOpen((o) => !o)}>\n        <span className={\"ax-combobox__value\" + (current ? \"\" : \" ax-combobox__value--empty\")}>{current ? current.label : placeholder}</span>\n        {Chev}\n      </button>\n      {open ? (\n        <div className=\"ax-combobox__panel\">\n          <input ref={searchRef} className=\"ax-combobox__search\" placeholder={searchPlaceholder} value={query} onChange={(e) => { setQuery(e.target.value); setActive(0); }} onKeyDown={onKey} />\n          <div className=\"ax-combobox__list\">\n            {filtered.length === 0 ? <div className=\"ax-combobox__empty\">No match.</div> : null}\n            {filtered.map((o, i) => (\n              <button key={o.value} className={\"ax-combobox__opt\" + (i === active ? \" ax-combobox__opt--active\" : \"\")} onMouseEnter={() => setActive(i)} onClick={() => choose(o)}>\n                <span className=\"ax-combobox__check\">{o.value === value ? Check : null}</span>\n                {o.label}\n              </button>\n            ))}\n          </div>\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,3 @@
+/** Date field that opens a Calendar in a popover. */
+export interface DatePickerProps { value?: Date; onChange?: (date: Date) => void; placeholder?: string; }
+export declare function DatePicker(props: DatePickerProps): JSX.Element;

package/dist/components/inputs/DatePicker.js

@@ -0,0 +1,56 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { Calendar } from "./Calendar.js";
+const AX_DATEPICKER_CSS = `
+.ax-datepicker { position: relative; display: inline-flex; }
+.ax-datepicker__trigger { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; cursor: pointer; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-2); color: var(--text-body); font-family: var(--font-mono); font-size: var(--text-sm); transition: border-color var(--dur-1) var(--ease-out); }
+.ax-datepicker__trigger:hover { border-color: var(--border-strong); }
+.ax-datepicker__trigger:focus-visible { outline: none; box-shadow: var(--ring); }
+.ax-datepicker__icon { width: 15px; height: 15px; color: var(--text-faint); }
+.ax-datepicker__value--empty { color: var(--text-faint); }
+.ax-datepicker__pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; animation: ax-datepicker-in var(--dur-2) var(--ease-out); }
+@keyframes ax-datepicker-in { from { opacity: 0; transform: translateY(-4px); } }
+@media (prefers-reduced-motion: reduce) { .ax-datepicker__pop { animation: none; } }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-datepicker-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-datepicker-css";
+  s.textContent = AX_DATEPICKER_CSS;
+  document.head.appendChild(s);
+}
+const CalIcon = /* @__PURE__ */ jsxs("svg", { className: "ax-datepicker__icon", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", strokeLinecap: "round", strokeLinejoin: "round", children: [
+  /* @__PURE__ */ jsx("rect", { x: "3", y: "4", width: "18", height: "18", rx: "2" }),
+  /* @__PURE__ */ jsx("path", { d: "M16 2v4M8 2v4M3 10h18" })
+] });
+function format(d) {
+  if (!d) return null;
+  const p = (n) => String(n).padStart(2, "0");
+  return d.getFullYear() + "-" + p(d.getMonth() + 1) + "-" + p(d.getDate());
+}
+function DatePicker({ value, onChange, placeholder = "Pick a date", className = "", ...rest }) {
+  const [open, setOpen] = useState(false);
+  const ref = useRef(null);
+  const onDoc = useCallback((e) => {
+    if (ref.current && !ref.current.contains(e.target)) setOpen(false);
+  }, []);
+  useEffect(() => {
+    if (open) {
+      document.addEventListener("mousedown", onDoc);
+      return () => document.removeEventListener("mousedown", onDoc);
+    }
+  }, [open, onDoc]);
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-datepicker", className].filter(Boolean).join(" "), ref, ...rest, children: [
+    /* @__PURE__ */ jsxs("button", { className: "ax-datepicker__trigger", onClick: () => setOpen((o) => !o), children: [
+      CalIcon,
+      /* @__PURE__ */ jsx("span", { className: value ? "" : "ax-datepicker__value--empty", children: value ? format(value) : placeholder })
+    ] }),
+    open ? /* @__PURE__ */ jsx("div", { className: "ax-datepicker__pop", children: /* @__PURE__ */ jsx(Calendar, { value, onChange: (d) => {
+      onChange && onChange(d);
+      setOpen(false);
+    } }) }) : null
+  ] });
+}
+export {
+  DatePicker
+};
+//# sourceMappingURL=DatePicker.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"DatePicker.js","sources":["../../../src/components/inputs/DatePicker.jsx"],"sourcesContent":["import React, { useState, useRef, useEffect, useCallback } from \"react\";\nimport { Calendar } from \"./Calendar.jsx\";\n\nconst AX_DATEPICKER_CSS = `\n.ax-datepicker { position: relative; display: inline-flex; }\n.ax-datepicker__trigger { display: inline-flex; align-items: center; gap: 10px; height: 36px; padding: 0 12px; cursor: pointer; background: var(--surface-card); border: 1px solid var(--border-default); border-radius: var(--radius-2); color: var(--text-body); font-family: var(--font-mono); font-size: var(--text-sm); transition: border-color var(--dur-1) var(--ease-out); }\n.ax-datepicker__trigger:hover { border-color: var(--border-strong); }\n.ax-datepicker__trigger:focus-visible { outline: none; box-shadow: var(--ring); }\n.ax-datepicker__icon { width: 15px; height: 15px; color: var(--text-faint); }\n.ax-datepicker__value--empty { color: var(--text-faint); }\n.ax-datepicker__pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; animation: ax-datepicker-in var(--dur-2) var(--ease-out); }\n@keyframes ax-datepicker-in { from { opacity: 0; transform: translateY(-4px); } }\n@media (prefers-reduced-motion: reduce) { .ax-datepicker__pop { animation: none; } }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-datepicker-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-datepicker-css\";\n  s.textContent = AX_DATEPICKER_CSS;\n  document.head.appendChild(s);\n}\n\nconst CalIcon = <svg className=\"ax-datepicker__icon\" viewBox=\"0 0 24 24\" fill=\"none\" stroke=\"currentColor\" strokeWidth=\"2\" strokeLinecap=\"round\" strokeLinejoin=\"round\"><rect x=\"3\" y=\"4\" width=\"18\" height=\"18\" rx=\"2\"></rect><path d=\"M16 2v4M8 2v4M3 10h18\"></path></svg>;\n\nfunction format(d) {\n  if (!d) return null;\n  const p = (n) => String(n).padStart(2, \"0\");\n  return d.getFullYear() + \"-\" + p(d.getMonth() + 1) + \"-\" + p(d.getDate());\n}\n\nexport function DatePicker({ value, onChange, placeholder = \"Pick a date\", className = \"\", ...rest }) {\n  const [open, setOpen] = useState(false);\n  const ref = useRef(null);\n  const onDoc = useCallback((e) => { if (ref.current && !ref.current.contains(e.target)) setOpen(false); }, []);\n  useEffect(() => {\n    if (open) { document.addEventListener(\"mousedown\", onDoc); return () => document.removeEventListener(\"mousedown\", onDoc); }\n  }, [open, onDoc]);\n  return (\n    <div className={[\"ax-datepicker\", className].filter(Boolean).join(\" \")} ref={ref} {...rest}>\n      <button className=\"ax-datepicker__trigger\" onClick={() => setOpen((o) => !o)}>\n        {CalIcon}\n        <span className={value ? \"\" : \"ax-datepicker__value--empty\"}>{value ? format(value) : placeholder}</span>\n      </button>\n      {open ? (\n        <div className=\"ax-datepicker__pop\">\n          <Calendar value={value} onChange={(d) => { onChange && onChange(d); setOpen(false); }} />\n        </div>\n      ) : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;;AAGA,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAY1B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,mBAAmB,GAAG;AACpF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEA,MAAM,UAAU,qBAAC,OAAA,EAAI,WAAU,uBAAsB,SAAQ,aAAY,MAAK,QAAO,QAAO,gBAAe,aAAY,KAAI,eAAc,SAAQ,gBAAe,SAAQ,UAAA;AAAA,EAAA,oBAAC,QAAA,EAAK,GAAE,KAAI,GAAE,KAAI,OAAM,MAAK,QAAO,MAAK,IAAG,IAAA,CAAI;AAAA,EAAO,oBAAC,QAAA,EAAK,GAAE,wBAAA,CAAwB;AAAA,GAAO;AAEtQ,SAAS,OAAO,GAAG;AACjB,MAAI,CAAC,EAAG,QAAO;AACf,QAAM,IAAI,CAAC,MAAM,OAAO,CAAC,EAAE,SAAS,GAAG,GAAG;AAC1C,SAAO,EAAE,YAAA,IAAgB,MAAM,EAAE,EAAE,aAAa,CAAC,IAAI,MAAM,EAAE,EAAE,SAAS;AAC1E;AAEO,SAAS,WAAW,EAAE,OAAO,UAAU,cAAc,eAAe,YAAY,IAAI,GAAG,QAAQ;AACpG,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,KAAK;AACtC,QAAM,MAAM,OAAO,IAAI;AACvB,QAAM,QAAQ,YAAY,CAAC,MAAM;AAAE,QAAI,IAAI,WAAW,CAAC,IAAI,QAAQ,SAAS,EAAE,MAAM,EAAG,SAAQ,KAAK;AAAA,EAAG,GAAG,CAAA,CAAE;AAC5G,YAAU,MAAM;AACd,QAAI,MAAM;AAAE,eAAS,iBAAiB,aAAa,KAAK;AAAG,aAAO,MAAM,SAAS,oBAAoB,aAAa,KAAK;AAAA,IAAG;AAAA,EAC5H,GAAG,CAAC,MAAM,KAAK,CAAC;AAChB,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,iBAAiB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAG,KAAW,GAAG,MACpF,UAAA;AAAA,IAAA,qBAAC,UAAA,EAAO,WAAU,0BAAyB,SAAS,MAAM,QAAQ,CAAC,MAAM,CAAC,CAAC,GACxE,UAAA;AAAA,MAAA;AAAA,MACD,oBAAC,QAAA,EAAK,WAAW,QAAQ,KAAK,+BAAgC,UAAA,QAAQ,OAAO,KAAK,IAAI,YAAA,CAAY;AAAA,IAAA,GACpG;AAAA,IACC,OACC,oBAAC,OAAA,EAAI,WAAU,sBACb,8BAAC,UAAA,EAAS,OAAc,UAAU,CAAC,MAAM;AAAE,kBAAY,SAAS,CAAC;AAAG,cAAQ,KAAK;AAAA,IAAG,EAAA,CAAG,GACzF,IACE;AAAA,EAAA,GACN;AAEJ;"}

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

@@ -0,0 +1,5 @@
+/** Field wrapper (label + control + hint/error) and FieldGroup (stack or bordered fieldset). */
+export interface FieldProps { label?: React.ReactNode; required?: boolean; hint?: React.ReactNode; error?: React.ReactNode; row?: boolean; children?: React.ReactNode; }
+export declare function Field(props: FieldProps): JSX.Element;
+export interface FieldGroupProps { legend?: React.ReactNode; children?: React.ReactNode; }
+export declare function FieldGroup(props: FieldGroupProps): JSX.Element;

package/dist/components/inputs/Field.js

@@ -0,0 +1,44 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_FIELD_GRP_CSS = `
+.ax-field-group { display: flex; flex-direction: column; gap: 18px; }
+.ax-field2 { display: flex; flex-direction: column; gap: 6px; }
+.ax-field2__label { 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); display: flex; align-items: center; gap: 6px; }
+.ax-field2__req { color: var(--danger); }
+.ax-field2__hint { font-size: var(--text-xs); color: var(--text-faint); }
+.ax-field2__error { font-size: var(--text-xs); color: var(--danger); }
+.ax-field2--row { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }
+.ax-field2--row .ax-field2__control { flex: none; }
+.ax-fieldset { border: 1px solid var(--border-default); border-radius: var(--radius-3); padding: 16px; display: flex; flex-direction: column; gap: 16px; }
+.ax-fieldset__legend { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); padding: 0 4px; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-field-grp-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-field-grp-css";
+  s.textContent = AX_FIELD_GRP_CSS;
+  document.head.appendChild(s);
+}
+function Field({ label, required, hint, error, row = false, children, className = "", ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-field2", row ? "ax-field2--row" : "", className].filter(Boolean).join(" "), ...rest, children: [
+    label ? /* @__PURE__ */ jsxs("span", { className: "ax-field2__label", children: [
+      label,
+      required ? /* @__PURE__ */ jsx("span", { className: "ax-field2__req", children: "*" }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx("div", { className: "ax-field2__control", children }),
+    error ? /* @__PURE__ */ jsx("span", { className: "ax-field2__error", children: error }) : hint ? /* @__PURE__ */ jsx("span", { className: "ax-field2__hint", children: hint }) : null
+  ] });
+}
+function FieldGroup({ legend, children, className = "", ...rest }) {
+  if (legend) {
+    return /* @__PURE__ */ jsxs("fieldset", { className: ["ax-fieldset", className].filter(Boolean).join(" "), ...rest, children: [
+      /* @__PURE__ */ jsx("legend", { className: "ax-fieldset__legend", children: legend }),
+      children
+    ] });
+  }
+  return /* @__PURE__ */ jsx("div", { className: ["ax-field-group", className].filter(Boolean).join(" "), ...rest, children });
+}
+export {
+  Field,
+  FieldGroup
+};
+//# sourceMappingURL=Field.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Field.js","sources":["../../../src/components/inputs/Field.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_FIELD_GRP_CSS = `\n.ax-field-group { display: flex; flex-direction: column; gap: 18px; }\n.ax-field2 { display: flex; flex-direction: column; gap: 6px; }\n.ax-field2__label { 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); display: flex; align-items: center; gap: 6px; }\n.ax-field2__req { color: var(--danger); }\n.ax-field2__hint { font-size: var(--text-xs); color: var(--text-faint); }\n.ax-field2__error { font-size: var(--text-xs); color: var(--danger); }\n.ax-field2--row { flex-direction: row; align-items: center; justify-content: space-between; gap: 16px; }\n.ax-field2--row .ax-field2__control { flex: none; }\n.ax-fieldset { border: 1px solid var(--border-default); border-radius: var(--radius-3); padding: 16px; display: flex; flex-direction: column; gap: 16px; }\n.ax-fieldset__legend { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-muted); padding: 0 4px; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-field-grp-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-field-grp-css\";\n  s.textContent = AX_FIELD_GRP_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Field({ label, required, hint, error, row = false, children, className = \"\", ...rest }) {\n  return (\n    <div className={[\"ax-field2\", row ? \"ax-field2--row\" : \"\", className].filter(Boolean).join(\" \")} {...rest}>\n      {label ? <span className=\"ax-field2__label\">{label}{required ? <span className=\"ax-field2__req\">*</span> : null}</span> : null}\n      <div className=\"ax-field2__control\">{children}</div>\n      {error ? <span className=\"ax-field2__error\">{error}</span> : hint ? <span className=\"ax-field2__hint\">{hint}</span> : null}\n    </div>\n  );\n}\n\nexport function FieldGroup({ legend, children, className = \"\", ...rest }) {\n  if (legend) {\n    return (\n      <fieldset className={[\"ax-fieldset\", className].filter(Boolean).join(\" \")} {...rest}>\n        <legend className=\"ax-fieldset__legend\">{legend}</legend>\n        {children}\n      </fieldset>\n    );\n  }\n  return <div className={[\"ax-field-group\", className].filter(Boolean).join(\" \")} {...rest}>{children}</div>;\n}\n"],"names":[],"mappings":";;AAEA,MAAM,mBAAmB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAazB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,kBAAkB,GAAG;AACnF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,MAAM,EAAE,OAAO,UAAU,MAAM,OAAO,MAAM,OAAO,UAAU,YAAY,IAAI,GAAG,QAAQ;AACtG,8BACG,OAAA,EAAI,WAAW,CAAC,aAAa,MAAM,mBAAmB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAClG,UAAA;AAAA,IAAA,QAAQ,qBAAC,QAAA,EAAK,WAAU,oBAAoB,UAAA;AAAA,MAAA;AAAA,MAAO,WAAW,oBAAC,QAAA,EAAK,WAAU,kBAAiB,eAAC,IAAU;AAAA,IAAA,EAAA,CAAK,IAAU;AAAA,IAC1H,oBAAC,OAAA,EAAI,WAAU,sBAAsB,SAAA,CAAS;AAAA,IAC7C,QAAQ,oBAAC,QAAA,EAAK,WAAU,oBAAoB,UAAA,MAAA,CAAM,IAAU,OAAO,oBAAC,QAAA,EAAK,WAAU,mBAAmB,gBAAK,IAAU;AAAA,EAAA,GACxH;AAEJ;AAEO,SAAS,WAAW,EAAE,QAAQ,UAAU,YAAY,IAAI,GAAG,QAAQ;AACxE,MAAI,QAAQ;AACV,WACE,qBAAC,YAAA,EAAS,WAAW,CAAC,eAAe,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAC7E,UAAA;AAAA,MAAA,oBAAC,UAAA,EAAO,WAAU,uBAAuB,UAAA,QAAO;AAAA,MAC/C;AAAA,IAAA,GACH;AAAA,EAEJ;AACA,SAAO,oBAAC,OAAA,EAAI,WAAW,CAAC,kBAAkB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAAO,UAAS;AACtG;"}

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

@@ -0,0 +1,19 @@
+/**
+ * Single-line text field with optional mono ALL-CAPS label, hint and error.
+ */
+export interface InputProps {
+  /** Field label, rendered as a mono uppercase eyebrow. */
+  label?: string;
+  /** Helper text below the field. */
+  hint?: string;
+  /** Error message; also paints the border red. */
+  error?: string;
+  /** Use the mono font for the value (ids, keys, code). @default false */
+  mono?: boolean;
+  placeholder?: string;
+  value?: string;
+  disabled?: boolean;
+  type?: string;
+  onChange?: (e: any) => void;
+}
+export declare function Input(props: InputProps): JSX.Element;

package/dist/components/inputs/Input.js

@@ -0,0 +1,72 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_FIELD_CSS = `
+.ax-field { display: flex; flex-direction: column; gap: 6px; }
+.ax-field__label {
+  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);
+}
+/* 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
+   slotting a layer, not by patching every other rule. */
+@layer ax-base, ax-hover, ax-focus, ax-error, ax-disabled;
+
+@layer ax-base {
+  .ax-input {
+    height: 36px; padding: 0 12px; width: 100%;
+    background: var(--surface-card); color: var(--text-body);
+    border: 1px solid var(--border-default); border-radius: var(--radius-2);
+    font-family: var(--font-body); font-size: var(--text-sm);
+    transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out), background var(--dur-1) var(--ease-out);
+  }
+  .ax-input::placeholder { color: var(--text-faint); }
+  .ax-input--mono { font-family: var(--font-mono); }
+}
+@layer ax-hover {
+  .ax-input:hover { border-color: var(--border-strong); }
+}
+@layer ax-focus {
+  .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); }
+}
+@layer ax-disabled {
+  .ax-input:disabled { opacity: 0.4; cursor: not-allowed; border-color: var(--border-default); }
+}
+.ax-field__hint { font-size: var(--text-xs); color: var(--text-faint); }
+.ax-field__hint--error { color: var(--danger); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-field-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-field-css";
+  s.textContent = AX_FIELD_CSS;
+  document.head.appendChild(s);
+}
+function Input({
+  label,
+  hint,
+  error,
+  mono = false,
+  className = "",
+  ...rest
+}) {
+  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 }),
+    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
+  ] });
+}
+export {
+  Input
+};
+//# sourceMappingURL=Input.js.map

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

@@ -0,0 +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;"}

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

@@ -0,0 +1,3 @@
+/** Input with prefix/suffix addons and an optional attached button. */
+export interface InputGroupProps { prefix?: React.ReactNode; suffix?: React.ReactNode; button?: React.ReactNode; onButtonClick?: () => void; inputProps?: Record<string, any>; }
+export declare function InputGroup(props: InputGroupProps): JSX.Element;

package/dist/components/inputs/InputGroup.js

@@ -0,0 +1,32 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_INPUTGROUP_CSS = `
+.ax-inputgroup { display: flex; align-items: stretch; border: 1px solid var(--border-default); border-radius: var(--radius-2); background: var(--surface-card); overflow: hidden; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
+.ax-inputgroup:focus-within { border-color: var(--fg-2); box-shadow: 0 0 0 3px var(--focus-soft); }
+.ax-inputgroup__input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; background: none; border: none; outline: none; color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); }
+.ax-inputgroup__input::placeholder { color: var(--text-faint); }
+.ax-inputgroup__addon { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-sm); background: var(--surface-raised); white-space: nowrap; }
+.ax-inputgroup__addon--start { border-right: 1px solid var(--border-default); }
+.ax-inputgroup__addon--end { border-left: 1px solid var(--border-default); }
+.ax-inputgroup__addon svg { width: 15px; height: 15px; }
+.ax-inputgroup__btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; cursor: pointer; border: none; background: var(--accent); color: var(--accent-fg); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); }
+.ax-inputgroup__btn:hover { background: var(--accent-hover); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-inputgroup-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-inputgroup-css";
+  s.textContent = AX_INPUTGROUP_CSS;
+  document.head.appendChild(s);
+}
+function InputGroup({ prefix, suffix, button, onButtonClick, className = "", inputProps = {}, ...rest }) {
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-inputgroup", className].filter(Boolean).join(" "), ...rest, children: [
+    prefix ? /* @__PURE__ */ jsx("span", { className: "ax-inputgroup__addon ax-inputgroup__addon--start", children: prefix }) : null,
+    /* @__PURE__ */ jsx("input", { className: "ax-inputgroup__input", ...inputProps }),
+    suffix ? /* @__PURE__ */ jsx("span", { className: "ax-inputgroup__addon ax-inputgroup__addon--end", children: suffix }) : null,
+    button ? /* @__PURE__ */ jsx("button", { type: "button", className: "ax-inputgroup__btn", onClick: onButtonClick, children: button }) : null
+  ] });
+}
+export {
+  InputGroup
+};
+//# sourceMappingURL=InputGroup.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputGroup.js","sources":["../../../src/components/inputs/InputGroup.jsx"],"sourcesContent":["import React, { useRef, useState, useEffect } from \"react\";\n\nconst AX_INPUTGROUP_CSS = `\n.ax-inputgroup { display: flex; align-items: stretch; border: 1px solid var(--border-default); border-radius: var(--radius-2); background: var(--surface-card); overflow: hidden; transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }\n.ax-inputgroup:focus-within { border-color: var(--fg-2); box-shadow: 0 0 0 3px var(--focus-soft); }\n.ax-inputgroup__input { flex: 1; min-width: 0; height: 36px; padding: 0 12px; background: none; border: none; outline: none; color: var(--text-body); font-family: var(--font-body); font-size: var(--text-sm); }\n.ax-inputgroup__input::placeholder { color: var(--text-faint); }\n.ax-inputgroup__addon { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; color: var(--text-faint); font-family: var(--font-mono); font-size: var(--text-sm); background: var(--surface-raised); white-space: nowrap; }\n.ax-inputgroup__addon--start { border-right: 1px solid var(--border-default); }\n.ax-inputgroup__addon--end { border-left: 1px solid var(--border-default); }\n.ax-inputgroup__addon svg { width: 15px; height: 15px; }\n.ax-inputgroup__btn { display: inline-flex; align-items: center; gap: 6px; padding: 0 12px; cursor: pointer; border: none; background: var(--accent); color: var(--accent-fg); font-family: var(--font-body); font-size: var(--text-sm); font-weight: var(--weight-medium); }\n.ax-inputgroup__btn:hover { background: var(--accent-hover); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-inputgroup-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-inputgroup-css\";\n  s.textContent = AX_INPUTGROUP_CSS;\n  document.head.appendChild(s);\n}\n\nexport function InputGroup({ prefix, suffix, button, onButtonClick, className = \"\", inputProps = {}, ...rest }) {\n  return (\n    <div className={[\"ax-inputgroup\", className].filter(Boolean).join(\" \")} {...rest}>\n      {prefix ? <span className=\"ax-inputgroup__addon ax-inputgroup__addon--start\">{prefix}</span> : null}\n      <input className=\"ax-inputgroup__input\" {...inputProps} />\n      {suffix ? <span className=\"ax-inputgroup__addon ax-inputgroup__addon--end\">{suffix}</span> : null}\n      {button ? <button type=\"button\" className=\"ax-inputgroup__btn\" onClick={onButtonClick}>{button}</button> : null}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAa1B,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,mBAAmB,GAAG;AACpF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,WAAW,EAAE,QAAQ,QAAQ,QAAQ,eAAe,YAAY,IAAI,aAAa,IAAI,GAAG,QAAQ;AAC9G,SACE,qBAAC,OAAA,EAAI,WAAW,CAAC,iBAAiB,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MACzE,UAAA;AAAA,IAAA,SAAS,oBAAC,QAAA,EAAK,WAAU,oDAAoD,kBAAO,IAAU;AAAA,IAC/F,oBAAC,SAAA,EAAM,WAAU,wBAAwB,GAAG,WAAA,CAAY;AAAA,IACvD,SAAS,oBAAC,QAAA,EAAK,WAAU,kDAAkD,kBAAO,IAAU;AAAA,IAC5F,SAAS,oBAAC,UAAA,EAAO,MAAK,UAAS,WAAU,sBAAqB,SAAS,eAAgB,UAAA,OAAA,CAAO,IAAY;AAAA,EAAA,GAC7G;AAEJ;"}

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

@@ -0,0 +1,3 @@
+/** One-time-code input: N single-char slots with auto-advance and backspace nav. */
+export interface InputOTPProps { length?: number; value?: string; onChange?: (value: string) => void; groupSize?: number; }
+export declare function InputOTP(props: InputOTPProps): JSX.Element;

package/dist/components/inputs/InputOTP.js

@@ -0,0 +1,49 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import React, { useRef } from "react";
+const AX_OTP_CSS = `
+.ax-otp { display: inline-flex; gap: 8px; }
+.ax-otp__slot { width: 40px; height: 48px; text-align: center; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-2); color: var(--text-body); font-family: var(--font-mono); font-size: var(--text-xl); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }
+.ax-otp__slot:focus { outline: none; border-color: var(--fg-2); box-shadow: 0 0 0 3px var(--focus-soft); }
+.ax-otp__slot--filled { border-color: var(--fg-2); }
+.ax-otp__sep { display: flex; align-items: center; color: var(--text-faint); font-family: var(--font-mono); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-otp-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-otp-css";
+  s.textContent = AX_OTP_CSS;
+  document.head.appendChild(s);
+}
+function InputOTP({ length = 6, value = "", onChange, groupSize, className = "", ...rest }) {
+  const refs = useRef([]);
+  const chars = value.split("").slice(0, length);
+  while (chars.length < length) chars.push("");
+  const setChar = (i, ch) => {
+    const next = chars.slice();
+    next[i] = ch.slice(-1);
+    const joined = next.join("").slice(0, length);
+    onChange && onChange(joined);
+    if (ch && i < length - 1) refs.current[i + 1] && refs.current[i + 1].focus();
+  };
+  const onKeyDown = (i, e) => {
+    if (e.key === "Backspace" && !chars[i] && i > 0) refs.current[i - 1] && refs.current[i - 1].focus();
+  };
+  return /* @__PURE__ */ jsx("div", { className: ["ax-otp", className].filter(Boolean).join(" "), ...rest, children: chars.map((c, i) => /* @__PURE__ */ jsxs(React.Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: (el) => refs.current[i] = el,
+        className: "ax-otp__slot" + (c ? " ax-otp__slot--filled" : ""),
+        inputMode: "numeric",
+        maxLength: 1,
+        value: c,
+        onChange: (e) => setChar(i, e.target.value),
+        onKeyDown: (e) => onKeyDown(i, e)
+      }
+    ),
+    groupSize && (i + 1) % groupSize === 0 && i < length - 1 ? /* @__PURE__ */ jsx("span", { className: "ax-otp__sep", children: "·" }) : null
+  ] }, i)) });
+}
+export {
+  InputOTP
+};
+//# sourceMappingURL=InputOTP.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"InputOTP.js","sources":["../../../src/components/inputs/InputOTP.jsx"],"sourcesContent":["import React, { useRef, useState } from \"react\";\n\nconst AX_OTP_CSS = `\n.ax-otp { display: inline-flex; gap: 8px; }\n.ax-otp__slot { width: 40px; height: 48px; text-align: center; background: var(--surface-card); border: 1px solid var(--border-strong); border-radius: var(--radius-2); color: var(--text-body); font-family: var(--font-mono); font-size: var(--text-xl); transition: border-color var(--dur-1) var(--ease-out), box-shadow var(--dur-1) var(--ease-out); }\n.ax-otp__slot:focus { outline: none; border-color: var(--fg-2); box-shadow: 0 0 0 3px var(--focus-soft); }\n.ax-otp__slot--filled { border-color: var(--fg-2); }\n.ax-otp__sep { display: flex; align-items: center; color: var(--text-faint); font-family: var(--font-mono); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-otp-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-otp-css\";\n  s.textContent = AX_OTP_CSS;\n  document.head.appendChild(s);\n}\n\nexport function InputOTP({ length = 6, value = \"\", onChange, groupSize, className = \"\", ...rest }) {\n  const refs = useRef([]);\n  const chars = value.split(\"\").slice(0, length);\n  while (chars.length < length) chars.push(\"\");\n\n  const setChar = (i, ch) => {\n    const next = chars.slice();\n    next[i] = ch.slice(-1);\n    const joined = next.join(\"\").slice(0, length);\n    onChange && onChange(joined);\n    if (ch && i < length - 1) refs.current[i + 1] && refs.current[i + 1].focus();\n  };\n  const onKeyDown = (i, e) => {\n    if (e.key === \"Backspace\" && !chars[i] && i > 0) refs.current[i - 1] && refs.current[i - 1].focus();\n  };\n\n  return (\n    <div className={[\"ax-otp\", className].filter(Boolean).join(\" \")} {...rest}>\n      {chars.map((c, i) => (\n        <React.Fragment key={i}>\n          <input\n            ref={(el) => (refs.current[i] = el)}\n            className={\"ax-otp__slot\" + (c ? \" ax-otp__slot--filled\" : \"\")}\n            inputMode=\"numeric\"\n            maxLength={1}\n            value={c}\n            onChange={(e) => setChar(i, e.target.value)}\n            onKeyDown={(e) => onKeyDown(i, e)}\n          />\n          {groupSize && (i + 1) % groupSize === 0 && i < length - 1 ? <span className=\"ax-otp__sep\">·</span> : null}\n        </React.Fragment>\n      ))}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,aAAa;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAQnB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,YAAY,GAAG;AAC7E,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,SAAS,EAAE,SAAS,GAAG,QAAQ,IAAI,UAAU,WAAW,YAAY,IAAI,GAAG,KAAA,GAAQ;AACjG,QAAM,OAAO,OAAO,EAAE;AACtB,QAAM,QAAQ,MAAM,MAAM,EAAE,EAAE,MAAM,GAAG,MAAM;AAC7C,SAAO,MAAM,SAAS,OAAQ,OAAM,KAAK,EAAE;AAE3C,QAAM,UAAU,CAAC,GAAG,OAAO;AACzB,UAAM,OAAO,MAAM,MAAA;AACnB,SAAK,CAAC,IAAI,GAAG,MAAM,EAAE;AACrB,UAAM,SAAS,KAAK,KAAK,EAAE,EAAE,MAAM,GAAG,MAAM;AAC5C,gBAAY,SAAS,MAAM;AAC3B,QAAI,MAAM,IAAI,SAAS,QAAQ,QAAQ,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,CAAC,EAAE,MAAA;AAAA,EACvE;AACA,QAAM,YAAY,CAAC,GAAG,MAAM;AAC1B,QAAI,EAAE,QAAQ,eAAe,CAAC,MAAM,CAAC,KAAK,IAAI,QAAQ,QAAQ,IAAI,CAAC,KAAK,KAAK,QAAQ,IAAI,CAAC,EAAE,MAAA;AAAA,EAC9F;AAEA,SACE,oBAAC,SAAI,WAAW,CAAC,UAAU,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAClE,UAAA,MAAM,IAAI,CAAC,GAAG,MACb,qBAAC,MAAM,UAAN,EACC,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,KAAK,CAAC,OAAQ,KAAK,QAAQ,CAAC,IAAI;AAAA,QAChC,WAAW,kBAAkB,IAAI,0BAA0B;AAAA,QAC3D,WAAU;AAAA,QACV,WAAW;AAAA,QACX,OAAO;AAAA,QACP,UAAU,CAAC,MAAM,QAAQ,GAAG,EAAE,OAAO,KAAK;AAAA,QAC1C,WAAW,CAAC,MAAM,UAAU,GAAG,CAAC;AAAA,MAAA;AAAA,IAAA;AAAA,IAEjC,cAAc,IAAI,KAAK,cAAc,KAAK,IAAI,SAAS,IAAI,oBAAC,QAAA,EAAK,WAAU,eAAc,eAAC,IAAU;AAAA,EAAA,KAVlF,CAWrB,CACD,GACH;AAEJ;"}

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

@@ -0,0 +1,13 @@
+/**
+ * Form label. Defaults to the mono ALL-CAPS motif; `plain` for sentence-case.
+ */
+export interface LabelProps {
+  /** Sentence-case body label instead of mono uppercase. @default false */
+  plain?: boolean;
+  /** Append a red required asterisk. @default false */
+  required?: boolean;
+  disabled?: boolean;
+  htmlFor?: string;
+  children?: React.ReactNode;
+}
+export declare function Label(props: LabelProps): JSX.Element;

package/dist/components/inputs/Label.js

@@ -0,0 +1,33 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_LABEL_CSS = `
+.ax-lbl {
+  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-lbl--plain {
+  font-family: var(--font-body); font-size: var(--text-sm);
+  letter-spacing: 0; text-transform: none; color: var(--text-body); font-weight: var(--weight-medium);
+}
+.ax-lbl__req { color: var(--danger); }
+.ax-lbl--disabled { opacity: 0.4; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-label-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-label-css";
+  s.textContent = AX_LABEL_CSS;
+  document.head.appendChild(s);
+}
+function Label({ plain = false, required = false, disabled = false, children, className = "", ...rest }) {
+  const cls = ["ax-lbl", plain ? "ax-lbl--plain" : "", disabled ? "ax-lbl--disabled" : "", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("label", { className: cls, ...rest, children: [
+    children,
+    required ? /* @__PURE__ */ jsx("span", { className: "ax-lbl__req", children: "*" }) : null
+  ] });
+}
+export {
+  Label
+};
+//# sourceMappingURL=Label.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Label.js","sources":["../../../src/components/inputs/Label.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_LABEL_CSS = `\n.ax-lbl {\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-lbl--plain {\n  font-family: var(--font-body); font-size: var(--text-sm);\n  letter-spacing: 0; text-transform: none; color: var(--text-body); font-weight: var(--weight-medium);\n}\n.ax-lbl__req { color: var(--danger); }\n.ax-lbl--disabled { opacity: 0.4; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-label-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-label-css\";\n  s.textContent = AX_LABEL_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Label({ plain = false, required = false, disabled = false, children, className = \"\", ...rest }) {\n  const cls = [\"ax-lbl\", plain ? \"ax-lbl--plain\" : \"\", disabled ? \"ax-lbl--disabled\" : \"\", className].filter(Boolean).join(\" \");\n  return (\n    <label className={cls} {...rest}>\n      {children}\n      {required ? <span className=\"ax-lbl__req\">*</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;AAerB,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,EAAE,QAAQ,OAAO,WAAW,OAAO,WAAW,OAAO,UAAU,YAAY,IAAI,GAAG,QAAQ;AAC9G,QAAM,MAAM,CAAC,UAAU,QAAQ,kBAAkB,IAAI,WAAW,qBAAqB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAC5H,SACE,qBAAC,SAAA,EAAM,WAAW,KAAM,GAAG,MACxB,UAAA;AAAA,IAAA;AAAA,IACA,WAAW,oBAAC,QAAA,EAAK,WAAU,eAAc,eAAC,IAAU;AAAA,EAAA,GACvD;AAEJ;"}

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

@@ -0,0 +1,15 @@
+/**
+ * Square-marked radio group. Options can carry a description line.
+ */
+export interface RadioGroupProps {
+  /** Shared input name. */
+  name: string;
+  /** Selected value. */
+  value?: string;
+  /** Strings or { value, label, description?, disabled? }. */
+  options: Array<string | { value: string; label: string; description?: string; disabled?: boolean }>;
+  onChange?: (value: string) => void;
+  /** Lay options out horizontally. @default false */
+  row?: boolean;
+}
+export declare function RadioGroup(props: RadioGroupProps): JSX.Element;