@agentaily/design-system 0.1.0

package/dist/components/display/Tabs.js

@@ -0,0 +1,47 @@
+import { jsx, jsxs } from "react/jsx-runtime";
+import "react";
+const AX_TABS_CSS = `
+.ax-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--border-default); }
+.ax-tabs__tab {
+  appearance: none; background: none; border: none; cursor: pointer;
+  padding: 0 2px 10px; margin-bottom: -1px; position: relative;
+  font-family: var(--font-body); font-size: var(--text-sm);
+  font-weight: var(--weight-medium); color: var(--text-faint);
+  border-bottom: 1px solid transparent;
+  transition: color var(--dur-1) var(--ease-out);
+}
+.ax-tabs__tab:hover { color: var(--text-muted); }
+.ax-tabs__tab:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-1); }
+.ax-tabs__tab--active { color: var(--text-body); border-bottom-color: var(--text-body); }
+.ax-tabs__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); margin-left: 6px; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-tabs-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-tabs-css";
+  s.textContent = AX_TABS_CSS;
+  document.head.appendChild(s);
+}
+function Tabs({ items = [], active, onChange, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("div", { role: "tablist", className: ["ax-tabs", className].filter(Boolean).join(" "), ...rest, children: items.map((item) => {
+    const it = typeof item === "string" ? { id: item, label: item } : item;
+    const isActive = it.id === active;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        role: "tab",
+        "aria-selected": isActive,
+        className: "ax-tabs__tab" + (isActive ? " ax-tabs__tab--active" : ""),
+        onClick: () => onChange && onChange(it.id),
+        children: [
+          it.label,
+          it.count != null ? /* @__PURE__ */ jsx("span", { className: "ax-tabs__count", children: it.count }) : null
+        ]
+      },
+      it.id
+    );
+  }) });
+}
+export {
+  Tabs
+};
+//# sourceMappingURL=Tabs.js.map

package/dist/components/display/Tabs.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tabs.js","sources":["../../../src/components/display/Tabs.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_TABS_CSS = `\n.ax-tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--border-default); }\n.ax-tabs__tab {\n  appearance: none; background: none; border: none; cursor: pointer;\n  padding: 0 2px 10px; margin-bottom: -1px; position: relative;\n  font-family: var(--font-body); font-size: var(--text-sm);\n  font-weight: var(--weight-medium); color: var(--text-faint);\n  border-bottom: 1px solid transparent;\n  transition: color var(--dur-1) var(--ease-out);\n}\n.ax-tabs__tab:hover { color: var(--text-muted); }\n.ax-tabs__tab:focus-visible { outline: none; box-shadow: var(--ring); border-radius: var(--radius-1); }\n.ax-tabs__tab--active { color: var(--text-body); border-bottom-color: var(--text-body); }\n.ax-tabs__count { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--text-faint); margin-left: 6px; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-tabs-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-tabs-css\";\n  s.textContent = AX_TABS_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Tabs({ items = [], active, onChange, className = \"\", ...rest }) {\n  return (\n    <div role=\"tablist\" className={[\"ax-tabs\", className].filter(Boolean).join(\" \")} {...rest}>\n      {items.map((item) => {\n        const it = typeof item === \"string\" ? { id: item, label: item } : item;\n        const isActive = it.id === active;\n        return (\n          <button\n            key={it.id}\n            role=\"tab\"\n            aria-selected={isActive}\n            className={\"ax-tabs__tab\" + (isActive ? \" ax-tabs__tab--active\" : \"\")}\n            onClick={() => onChange && onChange(it.id)}\n          >\n            {it.label}\n            {it.count != null ? <span className=\"ax-tabs__count\">{it.count}</span> : null}\n          </button>\n        );\n      })}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,cAAc;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBpB,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;AAEO,SAAS,KAAK,EAAE,QAAQ,CAAA,GAAI,QAAQ,UAAU,YAAY,IAAI,GAAG,QAAQ;AAC9E,SACE,oBAAC,SAAI,MAAK,WAAU,WAAW,CAAC,WAAW,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAClF,UAAA,MAAM,IAAI,CAAC,SAAS;AACnB,UAAM,KAAK,OAAO,SAAS,WAAW,EAAE,IAAI,MAAM,OAAO,KAAA,IAAS;AAClE,UAAM,WAAW,GAAG,OAAO;AAC3B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QAEC,MAAK;AAAA,QACL,iBAAe;AAAA,QACf,WAAW,kBAAkB,WAAW,0BAA0B;AAAA,QAClE,SAAS,MAAM,YAAY,SAAS,GAAG,EAAE;AAAA,QAExC,UAAA;AAAA,UAAA,GAAG;AAAA,UACH,GAAG,SAAS,OAAO,oBAAC,UAAK,WAAU,kBAAkB,UAAA,GAAG,MAAA,CAAM,IAAU;AAAA,QAAA;AAAA,MAAA;AAAA,MAPpE,GAAG;AAAA,IAAA;AAAA,EAUd,CAAC,EAAA,CACH;AAEJ;"}

package/dist/components/display/Typography.d.ts

@@ -0,0 +1,5 @@
+/** Prose wrapper (styles raw HTML headings/lists/code) + Text helper with variants. */
+export interface ProseProps { children?: React.ReactNode; }
+export declare function Prose(props: ProseProps): JSX.Element;
+export interface TextProps { as?: string; variant?: "mono" | "muted" | "faint" | "label" | "display"; children?: React.ReactNode; }
+export declare function Text(props: TextProps): JSX.Element;

package/dist/components/display/Typography.js

@@ -0,0 +1,45 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const AX_TYPOGRAPHY_CSS = `
+.ax-prose { color: var(--text-body); font-size: var(--text-md); line-height: var(--leading-body); max-width: 68ch; }
+.ax-prose > * { margin: 0 0 1em; }
+.ax-prose > *:last-child { margin-bottom: 0; }
+.ax-prose h1 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0 0 0.5em; }
+.ax-prose h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); margin: 1.5em 0 0.5em; }
+.ax-prose h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); margin: 1.4em 0 0.4em; }
+.ax-prose a { color: var(--text-body); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }
+.ax-prose a:hover { text-decoration-color: var(--text-body); }
+.ax-prose strong { font-weight: var(--weight-medium); color: var(--text-body); }
+.ax-prose code { font-family: var(--font-mono); font-size: 0.88em; padding: 1px 5px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-1); }
+.ax-prose blockquote { border-left: 2px solid var(--border-strong); padding-left: 16px; color: var(--text-muted); font-style: normal; }
+.ax-prose ul, .ax-prose ol { padding-left: 20px; }
+.ax-prose li { margin-bottom: 0.4em; }
+.ax-prose hr { border: none; border-top: 1px solid var(--border-default); margin: 2em 0; }
+
+.ax-text--mono { font-family: var(--font-mono); }
+.ax-text--muted { color: var(--text-muted); }
+.ax-text--faint { color: var(--text-faint); }
+.ax-text--label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }
+.ax-text--display { font-family: var(--font-display); letter-spacing: var(--tracking-tight); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-typography-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-typography-css";
+  s.textContent = AX_TYPOGRAPHY_CSS;
+  document.head.appendChild(s);
+}
+function Prose({ children, className = "", ...rest }) {
+  return /* @__PURE__ */ jsx("div", { className: ["ax-prose", className].filter(Boolean).join(" "), ...rest, children });
+}
+function Text({ as = "span", variant, className = "", children, ...rest }) {
+  const Tag = as;
+  const cls = ["ax-text", variant ? "ax-text--" + variant : "", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsx(Tag, { className: cls, ...rest, children });
+}
+const Typography = Prose;
+export {
+  Prose,
+  Text,
+  Typography
+};
+//# sourceMappingURL=Typography.js.map

package/dist/components/display/Typography.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Typography.js","sources":["../../../src/components/display/Typography.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_TYPOGRAPHY_CSS = `\n.ax-prose { color: var(--text-body); font-size: var(--text-md); line-height: var(--leading-body); max-width: 68ch; }\n.ax-prose > * { margin: 0 0 1em; }\n.ax-prose > *:last-child { margin-bottom: 0; }\n.ax-prose h1 { font-family: var(--font-display); font-size: var(--text-2xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); line-height: var(--leading-tight); margin: 0 0 0.5em; }\n.ax-prose h2 { font-family: var(--font-display); font-size: var(--text-xl); font-weight: var(--weight-medium); letter-spacing: var(--tracking-tight); margin: 1.5em 0 0.5em; }\n.ax-prose h3 { font-family: var(--font-display); font-size: var(--text-lg); font-weight: var(--weight-medium); margin: 1.4em 0 0.4em; }\n.ax-prose a { color: var(--text-body); text-decoration: underline; text-decoration-color: var(--border-strong); text-underline-offset: 2px; }\n.ax-prose a:hover { text-decoration-color: var(--text-body); }\n.ax-prose strong { font-weight: var(--weight-medium); color: var(--text-body); }\n.ax-prose code { font-family: var(--font-mono); font-size: 0.88em; padding: 1px 5px; background: var(--surface-raised); border: 1px solid var(--border-default); border-radius: var(--radius-1); }\n.ax-prose blockquote { border-left: 2px solid var(--border-strong); padding-left: 16px; color: var(--text-muted); font-style: normal; }\n.ax-prose ul, .ax-prose ol { padding-left: 20px; }\n.ax-prose li { margin-bottom: 0.4em; }\n.ax-prose hr { border: none; border-top: 1px solid var(--border-default); margin: 2em 0; }\n\n.ax-text--mono { font-family: var(--font-mono); }\n.ax-text--muted { color: var(--text-muted); }\n.ax-text--faint { color: var(--text-faint); }\n.ax-text--label { font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }\n.ax-text--display { font-family: var(--font-display); letter-spacing: var(--tracking-tight); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-typography-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-typography-css\";\n  s.textContent = AX_TYPOGRAPHY_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Prose({ children, className = \"\", ...rest }) {\n  return <div className={[\"ax-prose\", className].filter(Boolean).join(\" \")} {...rest}>{children}</div>;\n}\n\nexport function Text({ as = \"span\", variant, className = \"\", children, ...rest }) {\n  const Tag = as;\n  const cls = [\"ax-text\", variant ? \"ax-text--\" + variant : \"\", className].filter(Boolean).join(\" \");\n  return <Tag className={cls} {...rest}>{children}</Tag>;\n}\n\n/** Namesake export — Typography is the Prose wrapper. Prose / Text are the primary exports. */\nexport const Typography = Prose;\n"],"names":[],"mappings":";;AAEA,MAAM,oBAAoB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAuB1B,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,MAAM,EAAE,UAAU,YAAY,IAAI,GAAG,QAAQ;AAC3D,SAAO,oBAAC,OAAA,EAAI,WAAW,CAAC,YAAY,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG,GAAI,GAAG,MAAO,UAAS;AAChG;AAEO,SAAS,KAAK,EAAE,KAAK,QAAQ,SAAS,YAAY,IAAI,UAAU,GAAG,QAAQ;AAChF,QAAM,MAAM;AACZ,QAAM,MAAM,CAAC,WAAW,UAAU,cAAc,UAAU,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjG,6BAAQ,KAAA,EAAI,WAAW,KAAM,GAAG,MAAO,UAAS;AAClD;AAGO,MAAM,aAAa;"}

package/dist/components/feedback/Alert.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Inline alert with a status bar (or icon) and optional title.
+ */
+export interface AlertProps {
+  /** @default "neutral" */
+  variant?: "neutral" | "ok" | "warn" | "danger";
+  /** Optional leading icon (replaces the status bar). */
+  icon?: React.ReactNode;
+  title?: React.ReactNode;
+  children?: React.ReactNode;
+}
+export declare function Alert(props: AlertProps): JSX.Element;

package/dist/components/feedback/Alert.js

@@ -0,0 +1,41 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_ALERT_CSS = `
+.ax-alert {
+  display: flex; gap: 12px; padding: 14px 16px;
+  border: 1px solid var(--border-default); border-radius: var(--radius-3);
+  background: var(--surface-card);
+}
+.ax-alert__bar { width: 2px; flex: none; align-self: stretch; border-radius: 1px; background: var(--text-faint); }
+.ax-alert--ok .ax-alert__bar { background: var(--ok); }
+.ax-alert--warn .ax-alert__bar { background: var(--warn); }
+.ax-alert--danger .ax-alert__bar { background: var(--danger); }
+.ax-alert__icon { flex: none; color: var(--text-muted); margin-top: 1px; }
+.ax-alert--ok .ax-alert__icon { color: var(--ok); }
+.ax-alert--warn .ax-alert__icon { color: var(--warn); }
+.ax-alert--danger .ax-alert__icon { color: var(--danger); }
+.ax-alert__icon svg { width: 16px; height: 16px; display: block; }
+.ax-alert__body { flex: 1; min-width: 0; }
+.ax-alert__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); margin: 0; }
+.ax-alert__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 3px 0 0; line-height: var(--leading-body); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-alert-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-alert-css";
+  s.textContent = AX_ALERT_CSS;
+  document.head.appendChild(s);
+}
+function Alert({ variant = "neutral", icon, title, children, className = "", ...rest }) {
+  const cls = ["ax-alert", variant !== "neutral" ? "ax-alert--" + variant : "", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { role: "alert", className: cls, ...rest, children: [
+    icon ? /* @__PURE__ */ jsx("span", { className: "ax-alert__icon", children: icon }) : /* @__PURE__ */ jsx("span", { className: "ax-alert__bar" }),
+    /* @__PURE__ */ jsxs("div", { className: "ax-alert__body", children: [
+      title ? /* @__PURE__ */ jsx("p", { className: "ax-alert__title", children: title }) : null,
+      children ? /* @__PURE__ */ jsx("p", { className: "ax-alert__desc", children }) : null
+    ] })
+  ] });
+}
+export {
+  Alert
+};
+//# sourceMappingURL=Alert.js.map

package/dist/components/feedback/Alert.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Alert.js","sources":["../../../src/components/feedback/Alert.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_ALERT_CSS = `\n.ax-alert {\n  display: flex; gap: 12px; padding: 14px 16px;\n  border: 1px solid var(--border-default); border-radius: var(--radius-3);\n  background: var(--surface-card);\n}\n.ax-alert__bar { width: 2px; flex: none; align-self: stretch; border-radius: 1px; background: var(--text-faint); }\n.ax-alert--ok .ax-alert__bar { background: var(--ok); }\n.ax-alert--warn .ax-alert__bar { background: var(--warn); }\n.ax-alert--danger .ax-alert__bar { background: var(--danger); }\n.ax-alert__icon { flex: none; color: var(--text-muted); margin-top: 1px; }\n.ax-alert--ok .ax-alert__icon { color: var(--ok); }\n.ax-alert--warn .ax-alert__icon { color: var(--warn); }\n.ax-alert--danger .ax-alert__icon { color: var(--danger); }\n.ax-alert__icon svg { width: 16px; height: 16px; display: block; }\n.ax-alert__body { flex: 1; min-width: 0; }\n.ax-alert__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); margin: 0; }\n.ax-alert__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 3px 0 0; line-height: var(--leading-body); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-alert-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-alert-css\";\n  s.textContent = AX_ALERT_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Alert({ variant = \"neutral\", icon, title, children, className = \"\", ...rest }) {\n  const cls = [\"ax-alert\", variant !== \"neutral\" ? \"ax-alert--\" + variant : \"\", className].filter(Boolean).join(\" \");\n  return (\n    <div role=\"alert\" className={cls} {...rest}>\n      {icon ? <span className=\"ax-alert__icon\">{icon}</span> : <span className=\"ax-alert__bar\"></span>}\n      <div className=\"ax-alert__body\">\n        {title ? <p className=\"ax-alert__title\">{title}</p> : null}\n        {children ? <p className=\"ax-alert__desc\">{children}</p> : null}\n      </div>\n    </div>\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;AAoBrB,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,UAAU,WAAW,MAAM,OAAO,UAAU,YAAY,IAAI,GAAG,QAAQ;AAC7F,QAAM,MAAM,CAAC,YAAY,YAAY,YAAY,eAAe,UAAU,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACjH,8BACG,OAAA,EAAI,MAAK,SAAQ,WAAW,KAAM,GAAG,MACnC,UAAA;AAAA,IAAA,OAAO,oBAAC,UAAK,WAAU,kBAAkB,gBAAK,IAAU,oBAAC,QAAA,EAAK,WAAU,gBAAA,CAAgB;AAAA,IACzF,qBAAC,OAAA,EAAI,WAAU,kBACZ,UAAA;AAAA,MAAA,QAAQ,oBAAC,KAAA,EAAE,WAAU,mBAAmB,iBAAM,IAAO;AAAA,MACrD,WAAW,oBAAC,KAAA,EAAE,WAAU,kBAAkB,UAAS,IAAO;AAAA,IAAA,EAAA,CAC7D;AAAA,EAAA,GACF;AAEJ;"}

package/dist/components/feedback/Dialog.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Modal dialog on a blurred overlay. inline renders without the overlay (for docs).
+ */
+export interface DialogProps {
+  /** @default true */
+  open?: boolean;
+  /** Render without fixed overlay. @default false */
+  inline?: boolean;
+  /** Mono uppercase header label. */
+  title?: string;
+  /** Footer actions (right-aligned). */
+  footer?: React.ReactNode;
+  /** Called on overlay click / close button. */
+  onClose?: () => void;
+  children?: React.ReactNode;
+}
+export declare function Dialog(props: DialogProps): JSX.Element;

package/dist/components/feedback/Dialog.js

@@ -0,0 +1,90 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_DIALOG_CSS = `
+.ax-dialog-overlay {
+  position: fixed; inset: 0; z-index: 100;
+  display: flex; align-items: center; justify-content: center;
+  background: var(--bg-overlay);
+  backdrop-filter: blur(var(--blur-overlay));
+  -webkit-backdrop-filter: blur(var(--blur-overlay));
+  animation: ax-dialog-fade var(--dur-2) var(--ease-out);
+}
+.ax-dialog {
+  width: min(480px, calc(100vw - 48px));
+  background: var(--surface-panel);
+  border: 1px solid var(--border-strong);
+  border-radius: var(--radius-3);
+  box-shadow: var(--shadow-3);
+  animation: ax-dialog-rise var(--dur-3) var(--ease-out);
+}
+.ax-dialog--inline { position: relative; animation: none; }
+.ax-dialog__head {
+  display: flex; align-items: center; justify-content: space-between;
+  padding: var(--space-4) var(--space-5);
+  border-bottom: 1px solid var(--border-default);
+}
+.ax-dialog__title {
+  margin: 0; 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-muted);
+}
+.ax-dialog__close {
+  appearance: none; background: none; border: none; cursor: pointer;
+  color: var(--text-faint); font-family: var(--font-mono); font-size: 13px;
+  padding: 2px 4px; border-radius: var(--radius-1);
+}
+.ax-dialog__close:hover { color: var(--text-body); background: var(--surface-raised); }
+.ax-dialog__body { padding: var(--space-5); }
+.ax-dialog__foot {
+  display: flex; justify-content: flex-end; gap: var(--space-2);
+  padding: var(--space-4) var(--space-5);
+  border-top: 1px solid var(--border-default);
+}
+@keyframes ax-dialog-fade { from { opacity: 0; } }
+@keyframes ax-dialog-rise { from { opacity: 0; transform: translateY(8px); } }
+@media (prefers-reduced-motion: reduce) {
+  .ax-dialog-overlay, .ax-dialog { animation: none; }
+}
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-dialog-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-dialog-css";
+  s.textContent = AX_DIALOG_CSS;
+  document.head.appendChild(s);
+}
+function Dialog({
+  open = true,
+  inline = false,
+  title,
+  footer,
+  onClose,
+  children,
+  className = "",
+  ...rest
+}) {
+  if (!open) return null;
+  const panel = /* @__PURE__ */ jsxs(
+    "div",
+    {
+      role: "dialog",
+      "aria-modal": !inline,
+      className: ["ax-dialog", inline ? "ax-dialog--inline" : "", className].filter(Boolean).join(" "),
+      onClick: (e) => e.stopPropagation(),
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "ax-dialog__head", children: [
+          /* @__PURE__ */ jsx("h2", { className: "ax-dialog__title", children: title }),
+          onClose ? /* @__PURE__ */ jsx("button", { className: "ax-dialog__close", "aria-label": "Close", onClick: onClose, children: "ESC ✕" }) : null
+        ] }),
+        /* @__PURE__ */ jsx("div", { className: "ax-dialog__body", children }),
+        footer ? /* @__PURE__ */ jsx("div", { className: "ax-dialog__foot", children: footer }) : null
+      ]
+    }
+  );
+  if (inline) return panel;
+  return /* @__PURE__ */ jsx("div", { className: "ax-dialog-overlay", onClick: onClose, children: panel });
+}
+export {
+  Dialog
+};
+//# sourceMappingURL=Dialog.js.map

package/dist/components/feedback/Dialog.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Dialog.js","sources":["../../../src/components/feedback/Dialog.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_DIALOG_CSS = `\n.ax-dialog-overlay {\n  position: fixed; inset: 0; z-index: 100;\n  display: flex; align-items: center; justify-content: center;\n  background: var(--bg-overlay);\n  backdrop-filter: blur(var(--blur-overlay));\n  -webkit-backdrop-filter: blur(var(--blur-overlay));\n  animation: ax-dialog-fade var(--dur-2) var(--ease-out);\n}\n.ax-dialog {\n  width: min(480px, calc(100vw - 48px));\n  background: var(--surface-panel);\n  border: 1px solid var(--border-strong);\n  border-radius: var(--radius-3);\n  box-shadow: var(--shadow-3);\n  animation: ax-dialog-rise var(--dur-3) var(--ease-out);\n}\n.ax-dialog--inline { position: relative; animation: none; }\n.ax-dialog__head {\n  display: flex; align-items: center; justify-content: space-between;\n  padding: var(--space-4) var(--space-5);\n  border-bottom: 1px solid var(--border-default);\n}\n.ax-dialog__title {\n  margin: 0; 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-muted);\n}\n.ax-dialog__close {\n  appearance: none; background: none; border: none; cursor: pointer;\n  color: var(--text-faint); font-family: var(--font-mono); font-size: 13px;\n  padding: 2px 4px; border-radius: var(--radius-1);\n}\n.ax-dialog__close:hover { color: var(--text-body); background: var(--surface-raised); }\n.ax-dialog__body { padding: var(--space-5); }\n.ax-dialog__foot {\n  display: flex; justify-content: flex-end; gap: var(--space-2);\n  padding: var(--space-4) var(--space-5);\n  border-top: 1px solid var(--border-default);\n}\n@keyframes ax-dialog-fade { from { opacity: 0; } }\n@keyframes ax-dialog-rise { from { opacity: 0; transform: translateY(8px); } }\n@media (prefers-reduced-motion: reduce) {\n  .ax-dialog-overlay, .ax-dialog { animation: none; }\n}\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-dialog-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-dialog-css\";\n  s.textContent = AX_DIALOG_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Dialog({\n  open = true,\n  inline = false,\n  title,\n  footer,\n  onClose,\n  children,\n  className = \"\",\n  ...rest\n}) {\n  if (!open) return null;\n  const panel = (\n    <div\n      role=\"dialog\"\n      aria-modal={!inline}\n      className={[\"ax-dialog\", inline ? \"ax-dialog--inline\" : \"\", className].filter(Boolean).join(\" \")}\n      onClick={(e) => e.stopPropagation()}\n      {...rest}\n    >\n      <div className=\"ax-dialog__head\">\n        <h2 className=\"ax-dialog__title\">{title}</h2>\n        {onClose ? <button className=\"ax-dialog__close\" aria-label=\"Close\" onClick={onClose}>ESC ✕</button> : null}\n      </div>\n      <div className=\"ax-dialog__body\">{children}</div>\n      {footer ? <div className=\"ax-dialog__foot\">{footer}</div> : null}\n    </div>\n  );\n  if (inline) return panel;\n  return (\n    <div className=\"ax-dialog-overlay\" onClick={onClose}>\n      {panel}\n    </div>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,gBAAgB;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;AAAA;AA+CtB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,eAAe,GAAG;AAChF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,OAAO;AAAA,EACrB,OAAO;AAAA,EACP,SAAS;AAAA,EACT;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,YAAY;AAAA,EACZ,GAAG;AACL,GAAG;AACD,MAAI,CAAC,KAAM,QAAO;AAClB,QAAM,QACJ;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAY,CAAC;AAAA,MACb,WAAW,CAAC,aAAa,SAAS,sBAAsB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MAC/F,SAAS,CAAC,MAAM,EAAE,gBAAA;AAAA,MACjB,GAAG;AAAA,MAEJ,UAAA;AAAA,QAAA,qBAAC,OAAA,EAAI,WAAU,mBACb,UAAA;AAAA,UAAA,oBAAC,MAAA,EAAG,WAAU,oBAAoB,UAAA,OAAM;AAAA,UACvC,UAAU,oBAAC,UAAA,EAAO,WAAU,oBAAmB,cAAW,SAAQ,SAAS,SAAS,UAAA,QAAA,CAAK,IAAY;AAAA,QAAA,GACxG;AAAA,QACA,oBAAC,OAAA,EAAI,WAAU,mBAAmB,SAAA,CAAS;AAAA,QAC1C,SAAS,oBAAC,OAAA,EAAI,WAAU,mBAAmB,kBAAO,IAAS;AAAA,MAAA;AAAA,IAAA;AAAA,EAAA;AAGhE,MAAI,OAAQ,QAAO;AACnB,6BACG,OAAA,EAAI,WAAU,qBAAoB,SAAS,SACzC,UAAA,OACH;AAEJ;"}

package/dist/components/feedback/Spinner.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Mechanical square spinner — rotates in 8 ticks, not smoothly.
+ */
+export interface SpinnerProps {
+  /** 14 / 20 / 28px. @default "md" */
+  size?: "sm" | "md" | "lg";
+}
+export declare function Spinner(props: SpinnerProps): JSX.Element;

package/dist/components/feedback/Spinner.js

@@ -0,0 +1,39 @@
+import { jsx } from "react/jsx-runtime";
+import "react";
+const AX_SPINNER_CSS = `
+.ax-spinner {
+  display: inline-block; flex: none;
+  border: 2px solid var(--border-strong);
+  border-top-color: var(--text-body);
+  border-radius: var(--radius-1);
+  animation: ax-spin 0.9s steps(8) infinite;
+}
+.ax-spinner--sm { width: 14px; height: 14px; }
+.ax-spinner--md { width: 20px; height: 20px; }
+.ax-spinner--lg { width: 28px; height: 28px; }
+@keyframes ax-spin { to { transform: rotate(360deg); } }
+@media (prefers-reduced-motion: reduce) {
+  .ax-spinner { animation-duration: 2s; }
+}
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-spinner-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-spinner-css";
+  s.textContent = AX_SPINNER_CSS;
+  document.head.appendChild(s);
+}
+function Spinner({ size = "md", className = "", ...rest }) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      role: "status",
+      "aria-label": "Loading",
+      className: ["ax-spinner", `ax-spinner--${size}`, className].filter(Boolean).join(" "),
+      ...rest
+    }
+  );
+}
+export {
+  Spinner
+};
+//# sourceMappingURL=Spinner.js.map

package/dist/components/feedback/Spinner.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Spinner.js","sources":["../../../src/components/feedback/Spinner.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_SPINNER_CSS = `\n.ax-spinner {\n  display: inline-block; flex: none;\n  border: 2px solid var(--border-strong);\n  border-top-color: var(--text-body);\n  border-radius: var(--radius-1);\n  animation: ax-spin 0.9s steps(8) infinite;\n}\n.ax-spinner--sm { width: 14px; height: 14px; }\n.ax-spinner--md { width: 20px; height: 20px; }\n.ax-spinner--lg { width: 28px; height: 28px; }\n@keyframes ax-spin { to { transform: rotate(360deg); } }\n@media (prefers-reduced-motion: reduce) {\n  .ax-spinner { animation-duration: 2s; }\n}\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-spinner-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-spinner-css\";\n  s.textContent = AX_SPINNER_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Spinner({ size = \"md\", className = \"\", ...rest }) {\n  return (\n    <span\n      role=\"status\"\n      aria-label=\"Loading\"\n      className={[\"ax-spinner\", `ax-spinner--${size}`, className].filter(Boolean).join(\" \")}\n      {...rest}\n    ></span>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAiBvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,gBAAgB,GAAG;AACjF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,QAAQ,EAAE,OAAO,MAAM,YAAY,IAAI,GAAG,QAAQ;AAChE,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,MAAK;AAAA,MACL,cAAW;AAAA,MACX,WAAW,CAAC,cAAc,eAAe,IAAI,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AAAA,MACnF,GAAG;AAAA,IAAA;AAAA,EAAA;AAGV;"}

package/dist/components/feedback/Toast.d.ts

@@ -0,0 +1,12 @@
+/**
+ * Notification card with a thin status bar. Presentational — position it yourself.
+ */
+export interface ToastProps {
+  /** @default "neutral" */
+  variant?: "neutral" | "ok" | "warn" | "danger";
+  title: string;
+  description?: string;
+  /** Renders a ✕ button when provided. */
+  onClose?: () => void;
+}
+export declare function Toast(props: ToastProps): JSX.Element;

package/dist/components/feedback/Toast.js

@@ -0,0 +1,50 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_TOAST_CSS = `
+.ax-toast {
+  display: flex; align-items: flex-start; gap: 10px;
+  width: 340px; padding: 12px 14px;
+  background: var(--surface-card);
+  border: 1px solid var(--border-default);
+  border-radius: var(--radius-3);
+  box-shadow: var(--shadow-2);
+}
+.ax-toast__bar { width: 3px; align-self: stretch; flex: none; border-radius: 1px; background: var(--text-faint); }
+.ax-toast--ok .ax-toast__bar { background: var(--ok); }
+.ax-toast--warn .ax-toast__bar { background: var(--warn); }
+.ax-toast--danger .ax-toast__bar { background: var(--danger); }
+.ax-toast__body { flex: 1; min-width: 0; }
+.ax-toast__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); margin: 0; }
+.ax-toast__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 2px 0 0; line-height: var(--leading-snug); }
+.ax-toast__close {
+  appearance: none; background: none; border: none; cursor: pointer;
+  color: var(--text-faint); font-size: 14px; line-height: 1; padding: 2px;
+  font-family: var(--font-mono);
+}
+.ax-toast__close:hover { color: var(--text-body); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-toast-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-toast-css";
+  s.textContent = AX_TOAST_CSS;
+  document.head.appendChild(s);
+}
+function Toast({ variant = "neutral", title, description, onClose, className = "", ...rest }) {
+  const cls = [
+    "ax-toast",
+    variant !== "neutral" ? `ax-toast--${variant}` : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("div", { role: "status", className: cls, ...rest, children: [
+    /* @__PURE__ */ jsx("span", { className: "ax-toast__bar" }),
+    /* @__PURE__ */ jsxs("div", { className: "ax-toast__body", children: [
+      /* @__PURE__ */ jsx("p", { className: "ax-toast__title", children: title }),
+      description ? /* @__PURE__ */ jsx("p", { className: "ax-toast__desc", children: description }) : null
+    ] }),
+    onClose ? /* @__PURE__ */ jsx("button", { className: "ax-toast__close", "aria-label": "Dismiss", onClick: onClose, children: "✕" }) : null
+  ] });
+}
+export {
+  Toast
+};
+//# sourceMappingURL=Toast.js.map

package/dist/components/feedback/Toast.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Toast.js","sources":["../../../src/components/feedback/Toast.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_TOAST_CSS = `\n.ax-toast {\n  display: flex; align-items: flex-start; gap: 10px;\n  width: 340px; padding: 12px 14px;\n  background: var(--surface-card);\n  border: 1px solid var(--border-default);\n  border-radius: var(--radius-3);\n  box-shadow: var(--shadow-2);\n}\n.ax-toast__bar { width: 3px; align-self: stretch; flex: none; border-radius: 1px; background: var(--text-faint); }\n.ax-toast--ok .ax-toast__bar { background: var(--ok); }\n.ax-toast--warn .ax-toast__bar { background: var(--warn); }\n.ax-toast--danger .ax-toast__bar { background: var(--danger); }\n.ax-toast__body { flex: 1; min-width: 0; }\n.ax-toast__title { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); margin: 0; }\n.ax-toast__desc { font-size: var(--text-sm); color: var(--text-muted); margin: 2px 0 0; line-height: var(--leading-snug); }\n.ax-toast__close {\n  appearance: none; background: none; border: none; cursor: pointer;\n  color: var(--text-faint); font-size: 14px; line-height: 1; padding: 2px;\n  font-family: var(--font-mono);\n}\n.ax-toast__close:hover { color: var(--text-body); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-toast-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-toast-css\";\n  s.textContent = AX_TOAST_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Toast({ variant = \"neutral\", title, description, onClose, className = \"\", ...rest }) {\n  const cls = [\n    \"ax-toast\",\n    variant !== \"neutral\" ? `ax-toast--${variant}` : \"\",\n    className,\n  ].filter(Boolean).join(\" \");\n  return (\n    <div role=\"status\" className={cls} {...rest}>\n      <span className=\"ax-toast__bar\"></span>\n      <div className=\"ax-toast__body\">\n        <p className=\"ax-toast__title\">{title}</p>\n        {description ? <p className=\"ax-toast__desc\">{description}</p> : null}\n      </div>\n      {onClose ? <button className=\"ax-toast__close\" aria-label=\"Dismiss\" onClick={onClose}>✕</button> : null}\n    </div>\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;AAwBrB,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,UAAU,WAAW,OAAO,aAAa,SAAS,YAAY,IAAI,GAAG,QAAQ;AACnG,QAAM,MAAM;AAAA,IACV;AAAA,IACA,YAAY,YAAY,aAAa,OAAO,KAAK;AAAA,IACjD;AAAA,EAAA,EACA,OAAO,OAAO,EAAE,KAAK,GAAG;AAC1B,8BACG,OAAA,EAAI,MAAK,UAAS,WAAW,KAAM,GAAG,MACrC,UAAA;AAAA,IAAA,oBAAC,QAAA,EAAK,WAAU,gBAAA,CAAgB;AAAA,IAChC,qBAAC,OAAA,EAAI,WAAU,kBACb,UAAA;AAAA,MAAA,oBAAC,KAAA,EAAE,WAAU,mBAAmB,UAAA,OAAM;AAAA,MACrC,cAAc,oBAAC,KAAA,EAAE,WAAU,kBAAkB,uBAAY,IAAO;AAAA,IAAA,GACnE;AAAA,IACC,UAAU,oBAAC,UAAA,EAAO,WAAU,mBAAkB,cAAW,WAAU,SAAS,SAAS,UAAA,IAAA,CAAC,IAAY;AAAA,EAAA,GACrG;AAEJ;"}

package/dist/components/feedback/Tooltip.d.ts

@@ -0,0 +1,11 @@
+/**
+ * Hover/focus tooltip — inverted mono bubble, CSS only.
+ */
+export interface TooltipProps {
+  label: string;
+  /** @default "top" */
+  side?: "top" | "bottom";
+  /** The trigger element. */
+  children?: React.ReactNode;
+}
+export declare function Tooltip(props: TooltipProps): JSX.Element;

package/dist/components/feedback/Tooltip.js

@@ -0,0 +1,34 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import "react";
+const AX_TOOLTIP_CSS = `
+.ax-tip { position: relative; display: inline-flex; }
+.ax-tip__bubble {
+  position: absolute; left: 50%; transform: translateX(-50%) translateY(2px);
+  bottom: calc(100% + 8px); z-index: 50;
+  padding: 4px 8px; white-space: nowrap; pointer-events: none;
+  background: var(--accent); color: var(--accent-fg);
+  border-radius: var(--radius-1);
+  font-family: var(--font-mono); font-size: var(--text-xs);
+  opacity: 0;
+  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);
+}
+.ax-tip--bottom .ax-tip__bubble { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-2px); }
+.ax-tip:hover .ax-tip__bubble, .ax-tip:focus-within .ax-tip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-tooltip-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-tooltip-css";
+  s.textContent = AX_TOOLTIP_CSS;
+  document.head.appendChild(s);
+}
+function Tooltip({ label, side = "top", children, className = "", ...rest }) {
+  const cls = ["ax-tip", side === "bottom" ? "ax-tip--bottom" : "", className].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs("span", { className: cls, ...rest, children: [
+    children,
+    /* @__PURE__ */ jsx("span", { className: "ax-tip__bubble", role: "tooltip", children: label })
+  ] });
+}
+export {
+  Tooltip
+};
+//# sourceMappingURL=Tooltip.js.map

package/dist/components/feedback/Tooltip.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"Tooltip.js","sources":["../../../src/components/feedback/Tooltip.jsx"],"sourcesContent":["import React from \"react\";\n\nconst AX_TOOLTIP_CSS = `\n.ax-tip { position: relative; display: inline-flex; }\n.ax-tip__bubble {\n  position: absolute; left: 50%; transform: translateX(-50%) translateY(2px);\n  bottom: calc(100% + 8px); z-index: 50;\n  padding: 4px 8px; white-space: nowrap; pointer-events: none;\n  background: var(--accent); color: var(--accent-fg);\n  border-radius: var(--radius-1);\n  font-family: var(--font-mono); font-size: var(--text-xs);\n  opacity: 0;\n  transition: opacity var(--dur-1) var(--ease-out), transform var(--dur-1) var(--ease-out);\n}\n.ax-tip--bottom .ax-tip__bubble { bottom: auto; top: calc(100% + 8px); transform: translateX(-50%) translateY(-2px); }\n.ax-tip:hover .ax-tip__bubble, .ax-tip:focus-within .ax-tip__bubble { opacity: 1; transform: translateX(-50%) translateY(0); }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-tooltip-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-tooltip-css\";\n  s.textContent = AX_TOOLTIP_CSS;\n  document.head.appendChild(s);\n}\n\nexport function Tooltip({ label, side = \"top\", children, className = \"\", ...rest }) {\n  const cls = [\"ax-tip\", side === \"bottom\" ? \"ax-tip--bottom\" : \"\", className].filter(Boolean).join(\" \");\n  return (\n    <span className={cls} {...rest}>\n      {children}\n      <span className=\"ax-tip__bubble\" role=\"tooltip\">{label}</span>\n    </span>\n  );\n}\n"],"names":[],"mappings":";;AAEA,MAAM,iBAAiB;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAAA;AAgBvB,IAAI,OAAO,aAAa,eAAe,CAAC,SAAS,eAAe,gBAAgB,GAAG;AACjF,QAAM,IAAI,SAAS,cAAc,OAAO;AACxC,IAAE,KAAK;AACP,IAAE,cAAc;AAChB,WAAS,KAAK,YAAY,CAAC;AAC7B;AAEO,SAAS,QAAQ,EAAE,OAAO,OAAO,OAAO,UAAU,YAAY,IAAI,GAAG,QAAQ;AAClF,QAAM,MAAM,CAAC,UAAU,SAAS,WAAW,mBAAmB,IAAI,SAAS,EAAE,OAAO,OAAO,EAAE,KAAK,GAAG;AACrG,SACE,qBAAC,QAAA,EAAK,WAAW,KAAM,GAAG,MACvB,UAAA;AAAA,IAAA;AAAA,wBACA,QAAA,EAAK,WAAU,kBAAiB,MAAK,WAAW,UAAA,MAAA,CAAM;AAAA,EAAA,GACzD;AAEJ;"}

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

@@ -0,0 +1,3 @@
+/** Month calendar grid (Monday-first), single-date selection, today marker. */
+export interface CalendarProps { value?: Date; onChange?: (date: Date) => void; month?: Date; }
+export declare function Calendar(props: CalendarProps): JSX.Element;

package/dist/components/inputs/Calendar.js

@@ -0,0 +1,81 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+const AX_CALENDAR_CSS = `
+.ax-calendar { display: inline-block; padding: 14px; background: var(--surface-panel); border: 1px solid var(--border-default); border-radius: var(--radius-3); font-family: var(--font-body); user-select: none; }
+.ax-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
+.ax-calendar__month { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); letter-spacing: 0.02em; }
+.ax-calendar__nav { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; cursor: pointer; background: none; border: 1px solid var(--border-default); border-radius: var(--radius-2); color: var(--text-muted); transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }
+.ax-calendar__nav:hover { background: var(--surface-raised); color: var(--text-body); }
+.ax-calendar__grid { display: grid; grid-template-columns: repeat(7, 32px); gap: 2px; }
+.ax-calendar__dow { height: 28px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }
+.ax-calendar__day { height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; border-radius: var(--radius-2); color: var(--text-body); font-family: var(--font-mono); font-size: var(--text-sm); transition: background var(--dur-1) var(--ease-out); }
+.ax-calendar__day:hover:not(:disabled) { background: var(--surface-raised); }
+.ax-calendar__day--muted { color: var(--text-faint); opacity: 0.5; }
+.ax-calendar__day--today { box-shadow: inset 0 0 0 1px var(--border-strong); }
+.ax-calendar__day--selected { background: var(--accent) !important; color: var(--accent-fg); }
+.ax-calendar__day:disabled { color: var(--text-faint); opacity: 0.3; cursor: not-allowed; }
+`;
+if (typeof document !== "undefined" && !document.getElementById("ax-calendar-css")) {
+  const s = document.createElement("style");
+  s.id = "ax-calendar-css";
+  s.textContent = AX_CALENDAR_CSS;
+  document.head.appendChild(s);
+}
+const MONTHS = ["January", "February", "March", "April", "May", "June", "July", "August", "September", "October", "November", "December"];
+const DOW = ["Mo", "Tu", "We", "Th", "Fr", "Sa", "Su"];
+function sameDay(a, b) {
+  return a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate();
+}
+function Calendar({ value, onChange, month: monthProp, className = "", ...rest }) {
+  const init = value || /* @__PURE__ */ new Date();
+  const [view, setView] = useState({ y: (monthProp || init).getFullYear(), m: (monthProp || init).getMonth() });
+  const today = /* @__PURE__ */ new Date();
+  const first = new Date(view.y, view.m, 1);
+  const startOffset = (first.getDay() + 6) % 7;
+  const daysInMonth = new Date(view.y, view.m + 1, 0).getDate();
+  const prevDays = new Date(view.y, view.m, 0).getDate();
+  const cells = [];
+  for (let i = 0; i < startOffset; i++) cells.push({ day: prevDays - startOffset + i + 1, muted: true });
+  for (let d = 1; d <= daysInMonth; d++) cells.push({ day: d, muted: false, date: new Date(view.y, view.m, d) });
+  while (cells.length % 7 !== 0) cells.push({ day: cells.length - startOffset - daysInMonth + 1, muted: true });
+  const shift = (delta) => {
+    let m = view.m + delta, y = view.y;
+    if (m < 0) {
+      m = 11;
+      y--;
+    }
+    if (m > 11) {
+      m = 0;
+      y++;
+    }
+    setView({ y, m });
+  };
+  return /* @__PURE__ */ jsxs("div", { className: ["ax-calendar", className].filter(Boolean).join(" "), ...rest, children: [
+    /* @__PURE__ */ jsxs("div", { className: "ax-calendar__head", children: [
+      /* @__PURE__ */ jsx("button", { className: "ax-calendar__nav", onClick: () => shift(-1), "aria-label": "Previous month", children: "‹" }),
+      /* @__PURE__ */ jsxs("span", { className: "ax-calendar__month", children: [
+        MONTHS[view.m],
+        " ",
+        view.y
+      ] }),
+      /* @__PURE__ */ jsx("button", { className: "ax-calendar__nav", onClick: () => shift(1), "aria-label": "Next month", children: "›" })
+    ] }),
+    /* @__PURE__ */ jsxs("div", { className: "ax-calendar__grid", children: [
+      DOW.map((d) => /* @__PURE__ */ jsx("span", { className: "ax-calendar__dow", children: d }, d)),
+      cells.map((c, i) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          className: ["ax-calendar__day", c.muted ? "ax-calendar__day--muted" : "", c.date && sameDay(c.date, today) ? "ax-calendar__day--today" : "", c.date && sameDay(c.date, value) ? "ax-calendar__day--selected" : ""].filter(Boolean).join(" "),
+          disabled: c.muted,
+          onClick: () => c.date && onChange && onChange(c.date),
+          children: c.day
+        },
+        i
+      ))
+    ] })
+  ] });
+}
+export {
+  Calendar
+};
+//# sourceMappingURL=Calendar.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Calendar.js","sources":["../../../src/components/inputs/Calendar.jsx"],"sourcesContent":["import React, { useState } from \"react\";\n\nconst AX_CALENDAR_CSS = `\n.ax-calendar { display: inline-block; padding: 14px; background: var(--surface-panel); border: 1px solid var(--border-default); border-radius: var(--radius-3); font-family: var(--font-body); user-select: none; }\n.ax-calendar__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }\n.ax-calendar__month { font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--text-body); letter-spacing: 0.02em; }\n.ax-calendar__nav { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; cursor: pointer; background: none; border: 1px solid var(--border-default); border-radius: var(--radius-2); color: var(--text-muted); transition: background var(--dur-1) var(--ease-out), color var(--dur-1) var(--ease-out); }\n.ax-calendar__nav:hover { background: var(--surface-raised); color: var(--text-body); }\n.ax-calendar__grid { display: grid; grid-template-columns: repeat(7, 32px); gap: 2px; }\n.ax-calendar__dow { height: 28px; display: flex; align-items: center; justify-content: center; font-family: var(--font-mono); font-size: 10px; letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); }\n.ax-calendar__day { height: 32px; display: flex; align-items: center; justify-content: center; cursor: pointer; background: none; border: none; border-radius: var(--radius-2); color: var(--text-body); font-family: var(--font-mono); font-size: var(--text-sm); transition: background var(--dur-1) var(--ease-out); }\n.ax-calendar__day:hover:not(:disabled) { background: var(--surface-raised); }\n.ax-calendar__day--muted { color: var(--text-faint); opacity: 0.5; }\n.ax-calendar__day--today { box-shadow: inset 0 0 0 1px var(--border-strong); }\n.ax-calendar__day--selected { background: var(--accent) !important; color: var(--accent-fg); }\n.ax-calendar__day:disabled { color: var(--text-faint); opacity: 0.3; cursor: not-allowed; }\n`;\n\nif (typeof document !== \"undefined\" && !document.getElementById(\"ax-calendar-css\")) {\n  const s = document.createElement(\"style\");\n  s.id = \"ax-calendar-css\";\n  s.textContent = AX_CALENDAR_CSS;\n  document.head.appendChild(s);\n}\n\nconst MONTHS = [\"January\",\"February\",\"March\",\"April\",\"May\",\"June\",\"July\",\"August\",\"September\",\"October\",\"November\",\"December\"];\nconst DOW = [\"Mo\",\"Tu\",\"We\",\"Th\",\"Fr\",\"Sa\",\"Su\"];\n\nfunction sameDay(a, b) { return a && b && a.getFullYear() === b.getFullYear() && a.getMonth() === b.getMonth() && a.getDate() === b.getDate(); }\n\nexport function Calendar({ value, onChange, month: monthProp, className = \"\", ...rest }) {\n  const init = value || new Date();\n  const [view, setView] = useState({ y: (monthProp || init).getFullYear(), m: (monthProp || init).getMonth() });\n  const today = new Date();\n\n  const first = new Date(view.y, view.m, 1);\n  const startOffset = (first.getDay() + 6) % 7; // Monday-first\n  const daysInMonth = new Date(view.y, view.m + 1, 0).getDate();\n  const prevDays = new Date(view.y, view.m, 0).getDate();\n\n  const cells = [];\n  for (let i = 0; i < startOffset; i++) cells.push({ day: prevDays - startOffset + i + 1, muted: true });\n  for (let d = 1; d <= daysInMonth; d++) cells.push({ day: d, muted: false, date: new Date(view.y, view.m, d) });\n  while (cells.length % 7 !== 0) cells.push({ day: cells.length - startOffset - daysInMonth + 1, muted: true });\n\n  const shift = (delta) => {\n    let m = view.m + delta, y = view.y;\n    if (m < 0) { m = 11; y--; } if (m > 11) { m = 0; y++; }\n    setView({ y, m });\n  };\n\n  return (\n    <div className={[\"ax-calendar\", className].filter(Boolean).join(\" \")} {...rest}>\n      <div className=\"ax-calendar__head\">\n        <button className=\"ax-calendar__nav\" onClick={() => shift(-1)} aria-label=\"Previous month\">‹</button>\n        <span className=\"ax-calendar__month\">{MONTHS[view.m]} {view.y}</span>\n        <button className=\"ax-calendar__nav\" onClick={() => shift(1)} aria-label=\"Next month\">›</button>\n      </div>\n      <div className=\"ax-calendar__grid\">\n        {DOW.map((d) => <span key={d} className=\"ax-calendar__dow\">{d}</span>)}\n        {cells.map((c, i) => (\n          <button\n            key={i}\n            className={[\"ax-calendar__day\", c.muted ? \"ax-calendar__day--muted\" : \"\", c.date && sameDay(c.date, today) ? \"ax-calendar__day--today\" : \"\", c.date && sameDay(c.date, value) ? \"ax-calendar__day--selected\" : \"\"].filter(Boolean).join(\" \")}\n            disabled={c.muted}\n            onClick={() => c.date && onChange && onChange(c.date)}\n          >{c.day}</button>\n        ))}\n      </div>\n    </div>\n  );\n}\n"],"names":[],"mappings":"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"}

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

@@ -0,0 +1,10 @@
+/**
+ * 16px square checkbox with mono-inverted checked state.
+ */
+export interface CheckboxProps {
+  label?: string;
+  checked?: boolean;
+  disabled?: boolean;
+  onChange?: (e: any) => void;
+}
+export declare function Checkbox(props: CheckboxProps): JSX.Element;