@handamade/psi-react 0.8.1 → 0.9.0

package/dist/IconButton/IconButton.d.ts

@@ -2,6 +2,10 @@ import type { ButtonHTMLAttributes, Ref } from "react";
 type Variant = "accent" | "neutral" | "ghost" | "danger";
 type Size = 24 | 32 | 40 | 48;
 export interface IconButtonProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Accessible name for the icon-only control. Required: an IconButton has
+     * no text to name it, so omitting this ships an unnameable button (D60).
+     * If you also pass `aria-labelledby`, that wins per the accname algorithm. */
+    "aria-label": string;
     /** Visual variant. @default "neutral" */
     variant?: Variant;
     /** Square size in px (24 | 32 | 40 | 48). @default 32 */

package/dist/IconButton/IconButton.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,oBAAoB,EAEpB,GAAG,EACJ,MAAM,OAAO,CAAC;AAGf,KAAK,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AACzD,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9B,MAAM,WAAW,eACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;kDAC8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAgBD;gDACgD;AAChD,wBAAgB,UAAU,CAAC,EACzB,OAAmB,EACnB,IAAS,EACT,IAAI,EACJ,MAAM,EACN,GAAG,EACH,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA0CjB"}
+{"version":3,"file":"IconButton.d.ts","sourceRoot":"","sources":["../../src/IconButton/IconButton.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAEV,oBAAoB,EAEpB,GAAG,EACJ,MAAM,OAAO,CAAC;AAGf,KAAK,OAAO,GAAG,QAAQ,GAAG,SAAS,GAAG,OAAO,GAAG,QAAQ,CAAC;AACzD,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9B,MAAM,WAAW,eACf,SAAQ,oBAAoB,CAAC,iBAAiB,CAAC;IAC/C;;kFAE8E;IAC9E,YAAY,EAAE,MAAM,CAAC;IACrB,yCAAyC;IACzC,OAAO,CAAC,EAAE,OAAO,CAAC;IAClB,yDAAyD;IACzD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ;kDAC8C;IAC9C,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,0CAA0C;IAC1C,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,uCAAuC;IACvC,GAAG,CAAC,EAAE,MAAM,CAAC;IACb,+CAA+C;IAC/C,GAAG,CAAC,EAAE,GAAG,CAAC,iBAAiB,GAAG,iBAAiB,CAAC,CAAC;CAClD;AAgBD;gDACgD;AAChD,wBAAgB,UAAU,CAAC,EACzB,OAAmB,EACnB,IAAS,EACT,IAAI,EACJ,MAAM,EACN,GAAG,EACH,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,EACH,GAAG,IAAI,EACR,EAAE,eAAe,+BA0CjB"}

package/dist/Input/Input.d.ts

@@ -1,6 +1,12 @@
 import type { InputHTMLAttributes, Ref } from "react";
 type Size = 24 | 32 | 40 | 48;
-export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
+/** Input types Psi's Input supports. Deliberately narrower than the native
+ * `HTMLInputTypeAttribute`: checkbox/radio/file/submit are separate controls
+ * (Checkbox, Switch, Button), not variants of a text field (D60). */
+export type InputType = "text" | "search" | "email" | "tel" | "url" | "password" | "number" | "date";
+export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>, "type"> {
+    /** Input type. @default "text" */
+    type?: InputType;
     /** Height in px (24 | 32 | 40 | 48). @default 32 */
     size?: Size;
     /** Show error styling. Inside a Field, the Field's error also lights this. @default false */
@@ -11,6 +17,6 @@ export interface InputProps extends InputHTMLAttributes<HTMLInputElement> {
 /** Single-line text input with pixel-true heights (24–48) and an error state.
  * Inside a Field, id/aria-describedby/aria-invalid/required are wired
  * automatically (D49). */
-export declare function Input({ size, error, className, ref, ...rest }: InputProps): import("react").JSX.Element;
+export declare function Input({ size, error, type, className, ref, ...rest }: InputProps): import("react").JSX.Element;
 export {};
 //# sourceMappingURL=Input.d.ts.map

package/dist/Input/Input.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAItD,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9B,MAAM,WAAW,UAAW,SAAQ,mBAAmB,CAAC,gBAAgB,CAAC;IACvE,oDAAoD;IACpD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,6FAA6F;IAC7F,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AASD;;0BAE0B;AAC1B,wBAAgB,KAAK,CAAC,EAAE,IAAS,EAAE,KAAa,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,+BAqBtF"}
+{"version":3,"file":"Input.d.ts","sourceRoot":"","sources":["../../src/Input/Input.tsx"],"names":[],"mappings":"AACA,OAAO,KAAK,EAAE,mBAAmB,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAItD,KAAK,IAAI,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,GAAG,EAAE,CAAC;AAE9B;;qEAEqE;AACrE,MAAM,MAAM,SAAS,GACjB,MAAM,GACN,QAAQ,GACR,OAAO,GACP,KAAK,GACL,KAAK,GACL,UAAU,GACV,QAAQ,GACR,MAAM,CAAC;AAEX,MAAM,WAAW,UAAW,SAAQ,IAAI,CAAC,mBAAmB,CAAC,gBAAgB,CAAC,EAAE,MAAM,CAAC;IACrF,kCAAkC;IAClC,IAAI,CAAC,EAAE,SAAS,CAAC;IACjB,oDAAoD;IACpD,IAAI,CAAC,EAAE,IAAI,CAAC;IACZ,6FAA6F;IAC7F,KAAK,CAAC,EAAE,OAAO,CAAC;IAChB,yDAAyD;IACzD,GAAG,CAAC,EAAE,GAAG,CAAC,gBAAgB,CAAC,CAAC;CAC7B;AASD;;0BAE0B;AAC1B,wBAAgB,KAAK,CAAC,EAAE,IAAS,EAAE,KAAa,EAAE,IAAa,EAAE,SAAS,EAAE,GAAG,EAAE,GAAG,IAAI,EAAE,EAAE,UAAU,+BAsBrG"}

package/dist/index.js

@@ -33,42 +33,42 @@ const O = "_button_c94w9_3", X = "_disabled_c94w9_30", J = "_size24_c94w9_44", Q
 function un({
   variant: e = "neutral",
   size: t = 32,
-  href: i,
+  href: s,
   target: a,
   rel: c,
-  disabled: o,
-  className: r,
+  disabled: r,
+  className: o,
   onClick: l,
   ref: d,
-  ...s
+  ...i
 }) {
   const u = [
     f.button,
     ue[e],
     de[t],
-    i !== void 0 && o ? f.disabled : void 0,
-    r
+    s !== void 0 && r ? f.disabled : void 0,
+    o
   ].filter(Boolean).join(" ");
-  return i !== void 0 ? /* @__PURE__ */ n(
+  return s !== void 0 ? /* @__PURE__ */ n(
     "a",
     {
       ref: d,
       className: u,
-      href: o ? void 0 : i,
+      href: r ? void 0 : s,
       target: a,
       rel: c,
-      "aria-disabled": o || void 0,
-      onClick: o ? void 0 : l,
-      ...s
+      "aria-disabled": r || void 0,
+      onClick: r ? void 0 : l,
+      ...i
     }
   ) : /* @__PURE__ */ n(
     "button",
     {
       ref: d,
       className: u,
-      disabled: o,
+      disabled: r,
       onClick: l,
-      ...s
+      ...i
     }
   );
 }
@@ -97,42 +97,42 @@ const _e = "_iconButton_129ca_3", he = "_disabled_129ca_29", pe = "_size24_129ca
 function Ce({
   variant: e = "neutral",
   size: t = 32,
-  href: i,
+  href: s,
   target: a,
   rel: c,
-  disabled: o,
-  className: r,
+  disabled: r,
+  className: o,
   onClick: l,
   ref: d,
-  ...s
+  ...i
 }) {
   const u = [
     w.iconButton,
     ke[e],
     xe[t],
-    i !== void 0 && o ? w.disabled : void 0,
-    r
+    s !== void 0 && r ? w.disabled : void 0,
+    o
   ].filter(Boolean).join(" ");
-  return i !== void 0 ? /* @__PURE__ */ n(
+  return s !== void 0 ? /* @__PURE__ */ n(
     "a",
     {
       ref: d,
       className: u,
-      href: o ? void 0 : i,
+      href: r ? void 0 : s,
       target: a,
       rel: c,
-      "aria-disabled": o || void 0,
-      onClick: o ? void 0 : l,
-      ...s
+      "aria-disabled": r || void 0,
+      onClick: r ? void 0 : l,
+      ...i
     }
   ) : /* @__PURE__ */ n(
     "button",
     {
       ref: d,
       className: u,
-      disabled: o,
+      disabled: r,
       onClick: l,
-      ...s
+      ...i
     }
   );
 }
@@ -147,19 +147,19 @@ const ze = "_card_1btb3_1", Le = "_stacked_1btb3_8", $e = "_featured_1btb3_10",
 function dn({
   variant: e = "stacked",
   media: t,
-  hoverLift: i = !1,
+  hoverLift: s = !1,
   className: a,
   children: c,
-  ref: o,
-  ...r
+  ref: r,
+  ...o
 }) {
   const l = [
     $.card,
     e === "featured" ? $.featured : $.stacked,
-    i ? $.hoverLift : void 0,
+    s ? $.hoverLift : void 0,
     a
   ].filter(Boolean).join(" ");
-  return /* @__PURE__ */ h("div", { ref: o, className: l, ...r, children: [
+  return /* @__PURE__ */ h("div", { ref: r, className: l, ...o, children: [
     t != null && /* @__PURE__ */ n("div", { className: $.media, children: t }),
     /* @__PURE__ */ n("div", { className: $.body, children: c })
   ] });
@@ -168,9 +168,9 @@ const Ne = "_panel_jn8w4_1", Ie = "_padding16_jn8w4_8", q = {
   panel: Ne,
   padding16: Ie
 };
-function _n({ padding: e = 24, className: t, children: i, ref: a, ...c }) {
-  const o = [q.panel, e === 16 ? q.padding16 : void 0, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("div", { ref: a, className: o, ...c, children: i });
+function _n({ padding: e = 24, className: t, children: s, ref: a, ...c }) {
+  const r = [q.panel, e === 16 ? q.padding16 : void 0, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("div", { ref: a, className: r, ...c, children: s });
 }
 const Me = "_navbar_1gyow_1", Ee = "_inner_1gyow_12", We = "_brand_1gyow_19", Ae = "_links_1gyow_20", De = "_actions_1gyow_50", M = {
   navbar: Me,
@@ -179,20 +179,20 @@ const Me = "_navbar_1gyow_1", Ee = "_inner_1gyow_12", We = "_brand_1gyow_19", Ae
   links: Ae,
   actions: De
 };
-function hn({ brand: e, actions: t, children: i, className: a, ref: c, ...o }) {
-  const r = [M.navbar, a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("header", { ref: c, className: r, ...o, children: /* @__PURE__ */ h("div", { className: `psi-container ${M.inner}`, children: [
+function hn({ brand: e, actions: t, children: s, className: a, ref: c, ...r }) {
+  const o = [M.navbar, a].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("header", { ref: c, className: o, ...r, children: /* @__PURE__ */ h("div", { className: `psi-container ${M.inner}`, children: [
     e != null && /* @__PURE__ */ n("div", { className: M.brand, children: e }),
-    /* @__PURE__ */ n("nav", { className: M.links, children: i }),
+    /* @__PURE__ */ n("nav", { className: M.links, children: s }),
     t != null && /* @__PURE__ */ n("div", { className: M.actions, children: t })
   ] }) });
 }
 const He = "_frame_et4fc_1", Ve = {
   frame: He
 };
-function pn({ ratio: e, className: t, style: i, children: a, ref: c, ...o }) {
-  const r = [Ve.frame, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("div", { ref: c, className: r, style: { aspectRatio: String(e), ...i }, ...o, children: a });
+function pn({ ratio: e, className: t, style: s, children: a, ref: c, ...r }) {
+  const o = [Ve.frame, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("div", { ref: c, className: o, style: { aspectRatio: String(e), ...s }, ...r, children: a });
 }
 const Pe = "_field_lplye_1", Te = "_label_lplye_10", Re = "_marker_lplye_16", qe = "_message_lplye_20", Ke = "_invalid_lplye_26", j = {
   field: Pe,
@@ -204,16 +204,16 @@ const Pe = "_field_lplye_1", Te = "_label_lplye_10", Re = "_marker_lplye_16", qe
 function gn({
   label: e,
   description: t,
-  error: i,
+  error: s,
   required: a = !1,
   group: c = !1,
-  htmlFor: o,
-  className: r,
+  htmlFor: r,
+  className: o,
   children: l,
   ref: d,
-  ...s
+  ...i
 }) {
-  const u = H(), p = o ?? u, _ = !!i, b = _ ? i : t, m = b != null && b !== !1 ? `${p}-message` : void 0, L = [j.field, _ && j.invalid, r].filter(Boolean).join(" "), g = e != null ? /* @__PURE__ */ h(V, { children: [
+  const u = H(), p = r ?? u, _ = !!s, b = _ ? s : t, m = b != null && b !== !1 ? `${p}-message` : void 0, L = [j.field, _ && j.invalid, o].filter(Boolean).join(" "), g = e != null ? /* @__PURE__ */ h(V, { children: [
     e,
     a && /* @__PURE__ */ n("span", { "aria-hidden": "true", className: j.marker, children: " *" })
   ] }) : null, W = /* @__PURE__ */ h(V, { children: [
@@ -227,10 +227,10 @@ function gn({
       ref: d,
       className: L,
       "aria-describedby": m,
-      ...s,
+      ...i,
       children: W
     }
-  ) : /* @__PURE__ */ n("div", { ref: d, className: L, ...s, children: W });
+  ) : /* @__PURE__ */ n("div", { ref: d, className: L, ...i, children: W });
 }
 function fn({ size: e = 20, ...t }) {
   return /* @__PURE__ */ h("svg", { width: e, height: e, viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": "true", ...t, children: [
@@ -370,14 +370,14 @@ const Ue = "_dialog_l23jf_2", Ye = "_w400_l23jf_31", Ze = "_w560_l23jf_32", Ge =
 function Dn({
   open: e,
   onClose: t,
-  title: i,
+  title: s,
   footer: a,
   width: c = 560,
-  dismissible: o = !0,
-  className: r,
+  dismissible: r = !0,
+  className: o,
   children: l,
   ref: d,
-  ...s
+  ...i
 }) {
   const u = z(null), p = H(), _ = (g) => {
     u.current = g, typeof d == "function" ? d(g) : d && (d.current = g);
@@ -393,23 +393,23 @@ function Dn({
     };
   }, [e]);
   const b = (g) => {
-    g.preventDefault(), o && t("esc");
+    g.preventDefault(), r && t("esc");
   }, m = (g) => {
-    o && g.target === u.current && t("backdrop");
-  }, L = [C.dialog, et[c], r].filter(Boolean).join(" ");
+    r && g.target === u.current && t("backdrop");
+  }, L = [C.dialog, et[c], o].filter(Boolean).join(" ");
   return /* @__PURE__ */ n(
     "dialog",
     {
       ref: _,
       className: L,
-      "aria-labelledby": i != null ? p : void 0,
+      "aria-labelledby": s != null ? p : void 0,
       onCancel: b,
       onClick: m,
-      ...s,
+      ...i,
       children: /* @__PURE__ */ h("div", { className: C.panel, children: [
-        (i != null || o) && /* @__PURE__ */ h("div", { className: C.header, children: [
-          i != null && /* @__PURE__ */ n("h2", { id: p, className: C.title, children: i }),
-          o && /* @__PURE__ */ n(
+        (s != null || r) && /* @__PURE__ */ h("div", { className: C.header, children: [
+          s != null && /* @__PURE__ */ n("h2", { id: p, className: C.title, children: s }),
+          r && /* @__PURE__ */ n(
             Ce,
             {
               variant: "ghost",
@@ -439,18 +439,19 @@ const tt = "_input_hpei8_3", nt = "_size24_hpei8_37", ot = "_size32_hpei8_43", r
   40: S.size40,
   48: S.size48
 };
-function Hn({ size: e = 32, error: t = !1, className: i, ref: a, ...c }) {
-  const o = P(T), r = t || ((o == null ? void 0 : o.invalid) ?? !1), l = [o == null ? void 0 : o.describedBy, c["aria-describedby"]].filter(Boolean).join(" ") || void 0, d = [S.input, at[e], r && S.error, i].filter(Boolean).join(" ");
+function Hn({ size: e = 32, error: t = !1, type: s = "text", className: a, ref: c, ...r }) {
+  const o = P(T), l = t || ((o == null ? void 0 : o.invalid) ?? !1), d = [o == null ? void 0 : o.describedBy, r["aria-describedby"]].filter(Boolean).join(" ") || void 0, i = [S.input, at[e], l && S.error, a].filter(Boolean).join(" ");
   return /* @__PURE__ */ n(
     "input",
     {
-      ref: a,
-      className: d,
-      id: c.id ?? (o == null ? void 0 : o.id),
-      required: c.required ?? ((o == null ? void 0 : o.required) || void 0),
+      ref: c,
+      className: i,
+      id: r.id ?? (o == null ? void 0 : o.id),
+      required: r.required ?? ((o == null ? void 0 : o.required) || void 0),
       "aria-invalid": (o == null ? void 0 : o.invalid) || void 0,
-      ...c,
-      "aria-describedby": l
+      type: s,
+      ...r,
+      "aria-describedby": d
     }
   );
 }
@@ -470,26 +471,26 @@ const ct = "_select_4x9ck_3", lt = "_size24_4x9ck_37", ut = "_size32_4x9ck_45",
 function Vn({
   size: e = 32,
   error: t = !1,
-  className: i,
+  className: s,
   ref: a,
   children: c,
-  ...o
+  ...r
 }) {
-  const r = P(T), l = t || ((r == null ? void 0 : r.invalid) ?? !1), d = [r == null ? void 0 : r.describedBy, o["aria-describedby"]].filter(Boolean).join(" ") || void 0, s = [
+  const o = P(T), l = t || ((o == null ? void 0 : o.invalid) ?? !1), d = [o == null ? void 0 : o.describedBy, r["aria-describedby"]].filter(Boolean).join(" ") || void 0, i = [
     N.select,
     pt[e],
     l && N.error,
-    i
+    s
   ].filter(Boolean).join(" ");
   return /* @__PURE__ */ n(
     "select",
     {
       ref: a,
-      className: s,
-      id: o.id ?? (r == null ? void 0 : r.id),
-      required: o.required ?? ((r == null ? void 0 : r.required) || void 0),
-      "aria-invalid": (r == null ? void 0 : r.invalid) || void 0,
-      ...o,
+      className: i,
+      id: r.id ?? (o == null ? void 0 : o.id),
+      required: r.required ?? ((o == null ? void 0 : o.required) || void 0),
+      "aria-invalid": (o == null ? void 0 : o.invalid) || void 0,
+      ...r,
       "aria-describedby": d,
       children: c
     }
@@ -505,19 +506,19 @@ const gt = "_label_1v4vv_3", ft = "_disabled_1v4vv_13", vt = "_input_1v4vv_20",
 function Pn({
   children: e,
   className: t,
-  disabled: i,
+  disabled: s,
   ref: a,
   ...c
 }) {
-  const o = [E.label, i && E.disabled, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ h("label", { className: o, children: [
+  const r = [E.label, s && E.disabled, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ h("label", { className: r, children: [
     /* @__PURE__ */ n(
       "input",
       {
         ref: a,
         type: "checkbox",
         className: E.input,
-        disabled: i,
+        disabled: s,
         ...c
       }
     ),
@@ -536,12 +537,12 @@ const mt = "_label_jru2c_3", wt = "_disabled_jru2c_13", kt = "_input_jru2c_20",
 function Tn({
   children: e,
   className: t,
-  disabled: i,
+  disabled: s,
   ref: a,
   ...c
 }) {
-  const o = [B.label, i && B.disabled, t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ h("label", { className: o, children: [
+  const r = [B.label, s && B.disabled, t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ h("label", { className: r, children: [
     /* @__PURE__ */ n(
       "input",
       {
@@ -549,7 +550,7 @@ function Tn({
         type: "checkbox",
         role: "switch",
         className: B.input,
-        disabled: i,
+        disabled: s,
         ...c
       }
     ),
@@ -586,21 +587,21 @@ const Lt = "_tag_3oysa_3", $t = "_dismiss_3oysa_17", jt = "_neutral_3oysa_43", B
 function Rn({
   variant: e = "neutral",
   subtle: t = !1,
-  onDismiss: i,
+  onDismiss: s,
   className: a,
   children: c,
-  ref: o,
-  ...r
+  ref: r,
+  ...o
 }) {
   const l = t ? Vt : Ht, d = [y.tag, l[e], a].filter(Boolean).join(" ");
-  return /* @__PURE__ */ h("span", { ref: o, className: d, ...r, children: [
+  return /* @__PURE__ */ h("span", { ref: r, className: d, ...o, children: [
     c,
-    i && /* @__PURE__ */ n(
+    s && /* @__PURE__ */ n(
       "button",
       {
         type: "button",
         className: y.dismiss,
-        onClick: i,
+        onClick: s,
         "aria-label": "Dismiss",
         children: /* @__PURE__ */ h(
           "svg",
@@ -640,27 +641,27 @@ const Pt = "_wrapper_1eu6z_3", Tt = "_tooltip_1eu6z_10", Rt = "_top_1eu6z_24", q
 function qn({
   content: e,
   children: t,
-  placement: i = "top"
+  placement: s = "top"
 }) {
-  const [a, c] = Z(!1), o = H(), r = z(void 0), l = k(() => {
-    r.current !== void 0 && (window.clearTimeout(r.current), r.current = void 0);
-  }, []), d = k(() => c(!0), []), s = k(() => c(!1), []);
+  const [a, c] = Z(!1), r = H(), o = z(void 0), l = k(() => {
+    o.current !== void 0 && (window.clearTimeout(o.current), o.current = void 0);
+  }, []), d = k(() => c(!0), []), i = k(() => c(!1), []);
   x(() => l, [l]), x(() => {
     if (!a) return;
     const p = (_) => {
-      _.key === "Escape" && s();
+      _.key === "Escape" && i();
     };
     return document.addEventListener("keydown", p), () => document.removeEventListener("keydown", p);
-  }, [a, s]);
+  }, [a, i]);
   const u = U(t, {
-    "aria-describedby": a ? o : void 0,
+    "aria-describedby": a ? r : void 0,
     onMouseEnter: (p) => {
-      l(), r.current = window.setTimeout(d, Yt);
+      l(), o.current = window.setTimeout(d, Yt);
       const _ = t.props.onMouseEnter;
       _ == null || _(p);
     },
     onMouseLeave: (p) => {
-      l(), s();
+      l(), i();
       const _ = t.props.onMouseLeave;
       _ == null || _(p);
     },
@@ -670,7 +671,7 @@ function qn({
       _ == null || _(p);
     },
     onBlur: (p) => {
-      l(), s();
+      l(), i();
       const _ = t.props.onBlur;
       _ == null || _(p);
     }
@@ -680,9 +681,9 @@ function qn({
     a && /* @__PURE__ */ n(
       "span",
       {
-        id: o,
+        id: r,
         role: "tooltip",
-        className: [I.tooltip, Ut[i]].filter(Boolean).join(" "),
+        className: [I.tooltip, Ut[s]].filter(Boolean).join(" "),
         children: e
       }
     )
@@ -694,9 +695,9 @@ const Zt = "_toolbar_1i848_1", Gt = "_gap8_1i848_7", Ot = "_gap12_1i848_8", Xt =
   gap12: Ot,
   gap16: Xt
 }, Jt = { 8: A.gap8, 12: A.gap12, 16: A.gap16 };
-function Kn({ gap: e = 8, className: t, children: i, ref: a, ...c }) {
-  const o = [A.toolbar, Jt[e], t].filter(Boolean).join(" ");
-  return /* @__PURE__ */ n("div", { ref: a, role: c["aria-label"] != null ? "group" : void 0, className: o, ...c, children: i });
+function Kn({ gap: e = 8, className: t, children: s, ref: a, ...c }) {
+  const r = [A.toolbar, Jt[e], t].filter(Boolean).join(" ");
+  return /* @__PURE__ */ n("div", { ref: a, role: c["aria-label"] != null ? "group" : void 0, className: r, ...c, children: s });
 }
 const Qt = "_trigger_vpa0u_4", en = "_menu_vpa0u_16", tn = "_item_vpa0u_37", nn = "_separator_vpa0u_74", D = {
   trigger: Qt,
@@ -704,85 +705,85 @@ const Qt = "_trigger_vpa0u_4", en = "_menu_vpa0u_16", tn = "_item_vpa0u_37", nn
   item: tn,
   separator: nn
 }, on = 500;
-function rn({ popoverRef: e, triggerRef: t, open: i, onEsc: a }) {
-  const c = z(""), o = z(0), r = k(() => {
-    const s = e.current;
-    return s ? Array.from(
-      s.querySelectorAll('[data-psi-menu-item]:not([aria-disabled="true"])')
+function rn({ popoverRef: e, triggerRef: t, open: s, onEsc: a }) {
+  const c = z(""), r = z(0), o = k(() => {
+    const i = e.current;
+    return i ? Array.from(
+      i.querySelectorAll('[data-psi-menu-item]:not([aria-disabled="true"])')
     ) : [];
   }, [e]), l = k(
-    (s) => {
-      if (s) {
-        for (const u of r()) u.tabIndex = u === s ? 0 : -1;
-        s.focus();
+    (i) => {
+      if (i) {
+        for (const u of o()) u.tabIndex = u === i ? 0 : -1;
+        i.focus();
       }
     },
-    [r]
+    [o]
   ), d = k(() => {
     var u;
-    const s = (u = t.current) == null ? void 0 : u.querySelector("button, a, [tabindex]");
-    s == null || s.focus();
+    const i = (u = t.current) == null ? void 0 : u.querySelector("button, a, [tabindex]");
+    i == null || i.focus();
   }, [t]);
   return x(() => {
-    if (!i) return;
-    const s = r();
-    return l(s[0]), () => {
+    if (!s) return;
+    const i = o();
+    return l(i[0]), () => {
       var u;
       (u = e.current) != null && u.contains(document.activeElement) && d();
     };
-  }, [i, e, r, l, d]), k(
-    (s) => {
-      if (s.key === "Escape") {
-        s.preventDefault(), a();
+  }, [s, e, o, l, d]), k(
+    (i) => {
+      if (i.key === "Escape") {
+        i.preventDefault(), a();
         return;
       }
-      const u = r();
+      const u = o();
       if (u.length === 0) return;
       const p = u.indexOf(document.activeElement);
-      switch (s.key) {
+      switch (i.key) {
         case "ArrowDown":
-          s.preventDefault(), l(u[(p + 1 + u.length) % u.length]);
+          i.preventDefault(), l(u[(p + 1 + u.length) % u.length]);
           return;
         case "ArrowUp":
-          s.preventDefault(), l(u[p <= 0 ? u.length - 1 : p - 1]);
+          i.preventDefault(), l(u[p <= 0 ? u.length - 1 : p - 1]);
           return;
         case "Home":
-          s.preventDefault(), l(u[0]);
+          i.preventDefault(), l(u[0]);
           return;
         case "End":
-          s.preventDefault(), l(u[u.length - 1]);
+          i.preventDefault(), l(u[u.length - 1]);
           return;
       }
-      if (s.key.length !== 1 || s.metaKey || s.ctrlKey || s.altKey) return;
+      if (i.key.length !== 1 || i.metaKey || i.ctrlKey || i.altKey) return;
       const _ = Date.now();
-      c.current = _ - o.current > on ? s.key.toLowerCase() : c.current + s.key.toLowerCase(), o.current = _;
+      c.current = _ - r.current > on ? i.key.toLowerCase() : c.current + i.key.toLowerCase(), r.current = _;
       const b = u.find(
         (m) => (m.textContent ?? "").trim().toLowerCase().startsWith(c.current)
       );
-      b && (s.preventDefault(), l(b));
+      b && (i.preventDefault(), l(b));
     },
-    [r, l, a]
+    [o, l, a]
   );
 }
 function sn() {
   return typeof CSS < "u" && CSS.supports("anchor-name", "--x");
 }
-function an({ popoverRef: e, triggerRef: t, open: i, placement: a, anchorName: c }) {
+function an({ popoverRef: e, triggerRef: t, open: s, placement: a, anchorName: c }) {
   x(() => {
-    const o = t.current, r = e.current;
-    !o || !r || (o.style.setProperty("anchor-name", c), r.style.setProperty("position-anchor", c));
+    const r = t.current, o = e.current;
+    !r || !o || (r.style.setProperty("anchor-name", c), o.style.setProperty("position-anchor", c));
   }, [e, t, c]), x(() => {
-    if (!i || sn()) return;
-    const o = t.current, r = e.current;
-    if (!o || !r) return;
+    if (!s || sn()) return;
+    const r = t.current, o = e.current;
+    if (!r || !o) return;
     const l = () => {
-      const d = o.getBoundingClientRect(), s = a.startsWith("bottom"), u = a.endsWith("end"), p = getComputedStyle(o).direction === "rtl", _ = u !== p;
-      r.style.position = "fixed", r.style.top = s ? `${d.bottom}px` : "", r.style.bottom = s ? "" : `${window.innerHeight - d.top}px`, r.style.left = _ ? "" : `${d.left}px`, r.style.right = _ ? `${window.innerWidth - d.right}px` : "";
+      const d = r.getBoundingClientRect(), i = a.startsWith("bottom"), u = a.endsWith("end"), p = getComputedStyle(r).direction === "rtl", _ = u !== p;
+      o.style.position = "fixed", o.style.top = i ? `${d.bottom}px` : "", o.style.bottom = i ? "" : `${window.innerHeight - d.top}px`, o.style.left = _ ? "" : `${d.left}px`, o.style.right = _ ? `${window.innerWidth - d.right}px` : "";
     };
     return l(), window.addEventListener("scroll", l, !0), window.addEventListener("resize", l), () => {
       window.removeEventListener("scroll", l, !0), window.removeEventListener("resize", l);
     };
-  }, [i, a, e, t]);
+  }, [s, a, e, t]);
 }
 const Y = F({ close: () => {
 } });
@@ -792,17 +793,17 @@ function K(e) {
 function Fn({
   open: e,
   onClose: t,
-  trigger: i,
+  trigger: s,
   placement: a = "bottom-start",
   children: c,
-  className: o,
-  ref: r,
+  className: r,
+  ref: o,
   ...l
 }) {
-  const d = z(null), s = z(null), u = z(!1), p = `--psi-menu-${H().replace(/:/g, "")}`;
-  an({ popoverRef: d, triggerRef: s, open: e, placement: a, anchorName: p });
+  const d = z(null), i = z(null), u = z(!1), p = `--psi-menu-${H().replace(/:/g, "")}`;
+  an({ popoverRef: d, triggerRef: i, open: e, placement: a, anchorName: p });
   const _ = (v) => {
-    d.current = v, typeof r == "function" ? r(v) : r && (r.current = v);
+    d.current = v, typeof o == "function" ? o(v) : o && (o.current = v);
   };
   x(() => {
     const v = d.current;
@@ -821,7 +822,7 @@ function Fn({
     }
   }, [t, e]), m = rn({
     popoverRef: d,
-    triggerRef: s,
+    triggerRef: i,
     open: e,
     onEsc: () => t("esc")
   }), L = k(
@@ -829,15 +830,15 @@ function Fn({
       t(v);
     },
     [t]
-  ), g = G(i);
+  ), g = G(s);
   x(() => {
     g || console.warn(
       "Psi Menu: `trigger` must be a single React element that forwards props to a focusable node. Menu clones it to attach aria-haspopup and aria-expanded; a string, fragment or array cannot carry them, so the menu renders without its trigger ARIA."
     );
   }, [g]);
-  const W = g ? U(i, { "aria-haspopup": "menu", "aria-expanded": e }) : i;
+  const W = g ? U(s, { "aria-haspopup": "menu", "aria-expanded": e }) : s;
   return /* @__PURE__ */ h(V, { children: [
-    /* @__PURE__ */ n("div", { ref: s, className: D.trigger, "data-psi-menu-trigger": !0, children: W }),
+    /* @__PURE__ */ n("div", { ref: i, className: D.trigger, "data-psi-menu-trigger": !0, children: W }),
     /* @__PURE__ */ n(
       "div",
       {
@@ -847,7 +848,7 @@ function Fn({
         role: "menu",
         "data-psi-menu": !0,
         "data-placement": a,
-        className: [D.menu, o].filter(Boolean).join(" "),
+        className: [D.menu, r].filter(Boolean).join(" "),
         onToggle: b,
         onKeyDown: m,
         children: /* @__PURE__ */ n(Y.Provider, { value: { close: L }, children: c })
@@ -855,7 +856,7 @@ function Fn({
     )
   ] });
 }
-function Un({ children: e, onSelect: t, variant: i = "neutral", disabled: a = !1 }) {
+function Un({ children: e, onSelect: t, variant: s = "neutral", disabled: a = !1 }) {
   const { close: c } = P(Y);
   return /* @__PURE__ */ n(
     "button",
@@ -863,7 +864,7 @@ function Un({ children: e, onSelect: t, variant: i = "neutral", disabled: a = !1
       type: "button",
       role: "menuitem",
       "data-psi-menu-item": !0,
-      "data-variant": i,
+      "data-variant": s,
       "aria-disabled": a || void 0,
       tabIndex: -1,
       className: D.item,

package/dist/manifest.json

@@ -61,6 +61,13 @@
       "description": "Square icon-only button; same variant/size/href contract as Button. Give it an accessible name (`aria-label`).",
       "slots": [],
       "props": [
+        {
+          "name": "aria-label",
+          "type": "string",
+          "required": true,
+          "default": null,
+          "description": "Accessible name for the icon-only control. Required: an IconButton has\nno text to name it, so omitting this ships an unnameable button (D60).\nIf you also pass `aria-labelledby`, that wins per the accname algorithm."
+        },
         {
           "name": "variant",
           "type": "\"accent\" | \"neutral\" | \"ghost\" | \"danger\"",
@@ -194,6 +201,13 @@
       "description": "Single-line text input with pixel-true heights (24–48) and an error state. Inside a Field, id/aria-describedby/aria-invalid/required are wired automatically (D49).",
       "slots": [],
       "props": [
+        {
+          "name": "type",
+          "type": "\"number\" | \"text\" | \"search\" | \"email\" | \"tel\" | \"url\" | \"password\" | \"date\"",
+          "required": false,
+          "default": "text",
+          "description": "Input type."
+        },
         {
           "name": "size",
           "type": "24 | 32 | 40 | 48",

package/dist/patterns.json

@@ -1,5 +1,215 @@
 {
   "patterns": [
+    {
+      "id": "action-feedback",
+      "intent": "Transient confirmation after a completed action, with an optional undo affordance",
+      "match": [
+        "toast",
+        "snackbar",
+        "action feedback",
+        "confirmation message",
+        "undo toast"
+      ],
+      "compose": {
+        "component": "Toast",
+        "props": {
+          "variant": "{param:variant}"
+        },
+        "slots": {
+          "body": [
+            "{content:message}"
+          ],
+          "action": [
+            {
+              "component": "Button",
+              "props": {
+                "variant": "ghost"
+              },
+              "content": "undo-label"
+            }
+          ]
+        }
+      },
+      "parameters": [
+        {
+          "key": "variant",
+          "ask": "What kind of outcome is being confirmed?",
+          "options": [
+            "success",
+            "danger",
+            "neutral"
+          ],
+          "default": "success"
+        }
+      ],
+      "content": {
+        "message": "[what just happened]",
+        "undo-label": "Undo"
+      },
+      "gaps": [
+        "Toast"
+      ],
+      "blocked": true,
+      "preset": null
+    },
+    {
+      "id": "bulk-action-bar",
+      "intent": "Bar that appears when table rows are selected: selection count, bulk actions, and a clear-selection control",
+      "match": [
+        "bulk actions",
+        "selection bar",
+        "batch actions",
+        "selected rows toolbar"
+      ],
+      "compose": {
+        "component": "Toolbar",
+        "props": {
+          "gap": 12
+        },
+        "slots": {
+          "body": [
+            {
+              "component": "Tag",
+              "props": {
+                "variant": "accent",
+                "subtle": true
+              },
+              "content": "count-label"
+            },
+            {
+              "component": "Button",
+              "props": {
+                "variant": "neutral"
+              },
+              "content": "export-label"
+            },
+            {
+              "component": "Button",
+              "props": {
+                "variant": "danger-subtle"
+              },
+              "content": "delete-label"
+            },
+            {
+              "component": "Button",
+              "props": {
+                "variant": "ghost"
+              },
+              "content": "clear-label"
+            }
+          ]
+        }
+      },
+      "parameters": [],
+      "content": {
+        "count-label": "[n] selected",
+        "export-label": "Export",
+        "delete-label": "Delete",
+        "clear-label": "Clear selection"
+      },
+      "gaps": [],
+      "blocked": false,
+      "preset": "<Toolbar\n  gap={12}\n>\n  <Tag subtle={true} variant=\"accent\">[n] selected</Tag>\n  <Button variant=\"neutral\">Export</Button>\n  <Button variant=\"danger-subtle\">Delete</Button>\n  <Button variant=\"ghost\">Clear selection</Button>\n</Toolbar>\n"
+    },
+    {
+      "id": "data-table",
+      "intent": "Sortable, selectable table of records with numeric columns and a per-row actions menu — compose the row menu from the row-actions pattern",
+      "match": [
+        "data table",
+        "transactions table",
+        "sortable table",
+        "records table",
+        "list of transactions"
+      ],
+      "compose": {
+        "component": "Table",
+        "props": {
+          "selectable": true,
+          "sortable": true
+        },
+        "slots": {
+          "head": [
+            "{content:columns-note}"
+          ],
+          "body": [
+            "{content:rows-note}"
+          ]
+        }
+      },
+      "parameters": [],
+      "content": {
+        "columns-note": "[one header cell per column; numeric columns align right]",
+        "rows-note": "[one row per record; put the row-actions menu in the last cell]"
+      },
+      "gaps": [
+        "Table"
+      ],
+      "blocked": true,
+      "preset": null
+    },
+    {
+      "id": "date-range-filter",
+      "intent": "From/to date pair for narrowing a dated list — native date inputs, no calendar widget",
+      "match": [
+        "date range filter",
+        "from to date",
+        "date filter",
+        "period filter",
+        "filter by date"
+      ],
+      "compose": {
+        "component": "Toolbar",
+        "props": {
+          "gap": 12
+        },
+        "slots": {
+          "body": [
+            {
+              "component": "Field",
+              "slots": {
+                "label": [
+                  "{content:from-label}"
+                ],
+                "body": [
+                  {
+                    "component": "Input",
+                    "props": {
+                      "type": "date",
+                      "size": 32
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              "component": "Field",
+              "slots": {
+                "label": [
+                  "{content:to-label}"
+                ],
+                "body": [
+                  {
+                    "component": "Input",
+                    "props": {
+                      "type": "date",
+                      "size": 32
+                    }
+                  }
+                ]
+              }
+            }
+          ]
+        }
+      },
+      "parameters": [],
+      "content": {
+        "from-label": "From",
+        "to-label": "To"
+      },
+      "gaps": [],
+      "blocked": false,
+      "preset": "<Toolbar\n  gap={12}\n>\n  <Field\n    label=\"From\"\n  >\n    <Input size={32} type=\"date\" />\n  </Field>\n  <Field\n    label=\"To\"\n  >\n    <Input size={32} type=\"date\" />\n  </Field>\n</Toolbar>\n"
+    },
     {
       "id": "destructive-confirm",
       "intent": "Dialog confirming a destructive action",
@@ -59,6 +269,108 @@
       "blocked": false,
       "preset": "<Dialog\n  footer={<>\n    <Button size={32} variant=\"ghost\">Cancel</Button>\n    <Button size={32} variant=\"danger\">[verb the object]</Button>\n  </>}\n  title=\"[Delete the object?]\"\n>\n  [what is permanently lost]\n</Dialog>\n"
     },
+    {
+      "id": "detail-drawer",
+      "intent": "Side sheet showing one record's detail, opened from a table row, with its primary actions in a footer",
+      "match": [
+        "detail drawer",
+        "side sheet",
+        "row detail",
+        "slide-over",
+        "record detail panel"
+      ],
+      "compose": {
+        "component": "Drawer",
+        "props": {
+          "side": "{param:side}"
+        },
+        "slots": {
+          "title": [
+            "{content:title}"
+          ],
+          "body": [
+            "{content:body-note}"
+          ],
+          "footer": [
+            {
+              "component": "Button",
+              "props": {
+                "variant": "accent"
+              },
+              "content": "primary-label"
+            },
+            {
+              "component": "Button",
+              "props": {
+                "variant": "neutral"
+              },
+              "content": "dismiss-label"
+            }
+          ]
+        }
+      },
+      "parameters": [
+        {
+          "key": "side",
+          "ask": "Which edge should the drawer open from?",
+          "options": [
+            "end",
+            "start"
+          ],
+          "default": "end"
+        }
+      ],
+      "content": {
+        "title": "[record title]",
+        "body-note": "[key-value summary of the selected record]",
+        "primary-label": "Save",
+        "dismiss-label": "Close"
+      },
+      "gaps": [
+        "Drawer"
+      ],
+      "blocked": true,
+      "preset": null
+    },
+    {
+      "id": "empty-state",
+      "intent": "Placeholder shown when a list has no results, distinguishing an empty filter from an empty dataset",
+      "match": [
+        "empty state",
+        "no results",
+        "nothing here",
+        "zero state",
+        "no data"
+      ],
+      "compose": {
+        "component": "Panel",
+        "props": {
+          "padding": 24
+        },
+        "slots": {
+          "body": [
+            "{content:headline}",
+            "{content:explanation}",
+            {
+              "component": "Button",
+              "props": {
+                "variant": "neutral"
+              },
+              "content": "reset-label"
+            }
+          ]
+        }
+      },
+      "parameters": [],
+      "content": {
+        "headline": "[nothing matches these filters]",
+        "explanation": "[say whether the dataset is empty or the filters are too narrow]",
+        "reset-label": "Clear filters"
+      },
+      "gaps": [],
+      "blocked": false,
+      "preset": "<Panel\n  padding={24}\n>\n  [nothing matches these filters]\n  [say whether the dataset is empty or the filters are too narrow]\n  <Button variant=\"neutral\">Clear filters</Button>\n</Panel>\n"
+    },
     {
       "id": "filter-toolbar",
       "intent": "Toolbar of filter controls: search, category select, active-filter tags",
@@ -95,7 +407,7 @@
     },
     {
       "id": "row-actions",
-      "intent": "List or table row with a labelled actions menu, including a destructive item — hand the destructive item's confirmation off to the destructive-confirm pattern. The trigger is a text Button, not an icon-only kebab: IconButton cannot carry an accessible name through the manifest, so it is not composable in a pattern yet",
+      "intent": "List or table row with an icon-only actions menu, including a destructive item — hand the destructive item's confirmation off to the destructive-confirm pattern",
       "match": [
         "row actions",
         "per-row actions",
@@ -112,11 +424,12 @@
         "slots": {
           "trigger": [
             {
-              "component": "Button",
+              "component": "IconButton",
               "props": {
-                "variant": "ghost"
+                "variant": "ghost",
+                "aria-label": "{content:trigger-label}"
               },
-              "content": "trigger-label"
+              "content": "trigger-icon"
             }
           ],
           "body": [
@@ -154,13 +467,14 @@
       ],
       "content": {
         "trigger-label": "Actions",
+        "trigger-icon": "[icon]",
         "edit-label": "Edit",
         "duplicate-label": "Duplicate",
         "delete-label": "Delete"
       },
       "gaps": [],
       "blocked": false,
-      "preset": "<Menu\n  aria-label=\"Actions\"\n  placement=\"bottom-end\"\n  trigger={<Button variant=\"ghost\">Actions</Button>}\n>\n  <MenuItem>Edit</MenuItem>\n  <MenuItem>Duplicate</MenuItem>\n  <MenuSeparator />\n  <MenuItem variant=\"danger\">Delete</MenuItem>\n</Menu>\n"
+      "preset": "<Menu\n  aria-label=\"Actions\"\n  placement=\"bottom-end\"\n  trigger={<IconButton aria-label=\"Actions\" variant=\"ghost\">[icon]</IconButton>}\n>\n  <MenuItem>Edit</MenuItem>\n  <MenuItem>Duplicate</MenuItem>\n  <MenuSeparator />\n  <MenuItem variant=\"danger\">Delete</MenuItem>\n</Menu>\n"
     },
     {
       "id": "settings-form-row",
@@ -201,6 +515,142 @@
       "gaps": [],
       "blocked": false,
       "preset": "<Field\n  description=\"[one-line consequence of the setting]\"\n  group={true}\n  label=\"[setting name]\"\n>\n  <Switch>[what turning it on does]</Switch>\n</Field>\n"
+    },
+    {
+      "id": "summary-tiles",
+      "intent": "Row of headline figures above a ledger — balances or totals, one Card per figure",
+      "match": [
+        "summary tiles",
+        "stat cards",
+        "kpi row",
+        "balance cards",
+        "totals row"
+      ],
+      "compose": {
+        "component": "Toolbar",
+        "props": {
+          "gap": 16
+        },
+        "slots": {
+          "body": [
+            {
+              "component": "Card",
+              "props": {
+                "variant": "stacked"
+              },
+              "content": "tile-note"
+            },
+            {
+              "component": "Card",
+              "props": {
+                "variant": "stacked"
+              },
+              "content": "tile-note"
+            }
+          ]
+        }
+      },
+      "parameters": [],
+      "content": {
+        "tile-note": "[label above, figure below]"
+      },
+      "gaps": [],
+      "blocked": false,
+      "preset": "<Toolbar\n  gap={16}\n>\n  <Card variant=\"stacked\">[label above, figure below]</Card>\n  <Card variant=\"stacked\">[label above, figure below]</Card>\n</Toolbar>\n"
+    },
+    {
+      "id": "tabbed-workspace",
+      "intent": "Tab set switching between sibling views of the same workspace, such as accounts or saved filters",
+      "match": [
+        "tabs",
+        "tabbed view",
+        "switch between accounts",
+        "tab bar",
+        "segmented views"
+      ],
+      "compose": {
+        "component": "Tabs",
+        "props": {
+          "orientation": "{param:orientation}"
+        },
+        "slots": {
+          "list": [
+            "{content:tabs-note}"
+          ],
+          "panels": [
+            "{content:panels-note}"
+          ]
+        }
+      },
+      "parameters": [
+        {
+          "key": "orientation",
+          "ask": "How should the tab list be laid out?",
+          "options": [
+            "horizontal",
+            "vertical"
+          ],
+          "default": "horizontal"
+        }
+      ],
+      "content": {
+        "tabs-note": "[one tab per view; keep labels to one or two words]",
+        "panels-note": "[one panel per tab, in the same order]"
+      },
+      "gaps": [
+        "Tabs"
+      ],
+      "blocked": true,
+      "preset": null
+    },
+    {
+      "id": "table-pagination",
+      "intent": "Page-size selector and page range control beneath a data table",
+      "match": [
+        "pagination",
+        "table pagination",
+        "page controls",
+        "rows per page",
+        "paging"
+      ],
+      "compose": {
+        "component": "Toolbar",
+        "props": {
+          "gap": 12
+        },
+        "slots": {
+          "body": [
+            {
+              "component": "Field",
+              "slots": {
+                "label": [
+                  "{content:page-size-label}"
+                ],
+                "body": [
+                  {
+                    "component": "Select",
+                    "props": {
+                      "size": 32
+                    }
+                  }
+                ]
+              }
+            },
+            {
+              "component": "Pagination"
+            }
+          ]
+        }
+      },
+      "parameters": [],
+      "content": {
+        "page-size-label": "Rows per page"
+      },
+      "gaps": [
+        "Pagination"
+      ],
+      "blocked": true,
+      "preset": null
     }
   ]
 }

package/docs/IconButton.md

@@ -7,6 +7,7 @@ Square icon-only button; same variant/size/href contract as Button. Give it an a
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `aria-label` | `string` | — | yes | Accessible name for the icon-only control. Required: an IconButton has no text to name it, so omitting this ships an unnameable button (D60). If you also pass `aria-labelledby`, that wins per the accname algorithm. |
 | `variant` | `"accent" \| "neutral" \| "ghost" \| "danger"` | neutral | no | Visual variant. |
 | `size` | `24 \| 32 \| 40 \| 48` | 32 | no | Square size in px (24 \| 32 \| 40 \| 48). |
 | `href` | `string` | — | no | Render as an anchor with this href (D33). disabled → aria-disabled, no href attribute, pointer-events: none. |

package/docs/Input.md

@@ -7,6 +7,7 @@ Single-line text input with pixel-true heights (24–48) and an error state. Ins
 
 | Prop | Type | Default | Required | Description |
 |---|---|---|---|---|
+| `type` | `"number" \| "text" \| "search" \| "email" \| "tel" \| "url" \| "password" \| "date"` | text | no | Input type. |
 | `size` | `24 \| 32 \| 40 \| 48` | 32 | no | Height in px (24 \| 32 \| 40 \| 48). |
 | `error` | `boolean` | false | no | Show error styling. Inside a Field, the Field's error also lights this. |
 | `ref` | `Ref<HTMLInputElement>` | — | no | Forwarded ref to the underlying `<input>` element. |

package/llms.txt

@@ -4,7 +4,7 @@
 
 ## Machine-readable artifacts
 - dist/manifest.json: full component/prop inventory with types and defaults
-- dist/patterns.json: 4 composition patterns (D47) — gap-annotated recipes with clarifying parameters; presets are generated JSX, never hand-written
+- dist/patterns.json: 13 composition patterns (D47) — gap-annotated recipes with clarifying parameters; presets are generated JSX, never hand-written
 - docs/{Component}.md: per-component docs (props, theming, variant guidance)
 
 ## Rules for generated code

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@handamade/psi-react",
-  "version": "0.8.1",
+  "version": "0.9.0",
   "license": "MIT",
   "type": "module",
   "main": "dist/index.js",
@@ -40,7 +40,7 @@
     "tsx": "^4.22.4",
     "vite": "^6.0.0",
     "vitest": "^3.2.6",
-    "@handamade/psi-tokens": "0.8.1"
+    "@handamade/psi-tokens": "0.9.0"
   },
   "scripts": {
     "build": "vite build && tsc -p tsconfig.build.json && tsx scripts/emit-manifest.ts && tsx scripts/emit-patterns.ts && tsx scripts/emit-docs.ts",