@pihanga2/shadcn 0.2.20 → 0.2.21

package/AGENT.using-cards.md

@@ -976,7 +976,7 @@ search box, a settings field) is **`pi/input`** — *not* `pi/text-input`, which
 does not exist.  You do **not** need to write your own local card.
 
 ```ts
-import {PiInput, onPiInputChanged} from "@/cards/input";
+import {Input, onPiInputChanged} from "@/cards/input";
 import type {AppState} from "@/app.state";
 
 register((r) => {
@@ -985,7 +985,7 @@ register((r) => {
   });
 });
 
-registerCard("myApp/jwtField", PiInput({
+registerCard("myApp/jwtField", Input({
   label:       "JWT token",
   value:       memo((s: AppState) => s.jwtToken),   // ← bound to Redux state
   placeholder: "Paste your bearer token here…",

package/cards/button/button.component.js

@@ -2,70 +2,72 @@ import { getIcon as e } from "../icons.js";
 import { Button as t, LinkButton as n } from "../../components/ui/button.js";
 import { Tooltip as r, TooltipContent as i, TooltipTrigger as a } from "../../components/ui/tooltip.js";
 import { useDropdownOpen as o } from "../dropDownMenu/dropdown-context.js";
+import { useFormContext as s } from "../form/form.context.js";
 import "react";
-import { Card as s } from "@pihanga2/core";
-import { Fragment as c, jsx as l, jsxs as u } from "react/jsx-runtime";
+import { Card as c } from "@pihanga2/core";
+import { Fragment as l, jsx as u, jsxs as d } from "react/jsx-runtime";
 //#region src/cards/button/button.component.tsx
-function d(t) {
+function f(t) {
 	return t ? e(t) : null;
 }
-var f = (e) => {
-	let { opts: f, ariaLabel: p, label: m, iconLabel: h, contentCard: g, href: _, target: v, tooltip: y, tooltipCard: b, tooltipMode: x, tooltipPlacement: S, className: C, id: w, onClicked: T, cardName: E, _cls: D, active: O, focused: k, disabled: A, loading: j, isPending: M } = e, N = o(), P = d(f?.beforeIcon), F = d(f?.afterIcon), I = /* @__PURE__ */ u(c, { children: [
-		P,
-		h ? d(h) : g ? /* @__PURE__ */ l(s, {
-			cardName: g,
-			parentCard: E
-		}) : m,
-		F
-	] }), L = {
-		active: O,
-		focused: k,
-		isMenu: f?.isMenu,
-		truncate: f?.truncate,
-		variant: f?.variant,
-		size: f?.size,
-		disabled: A,
-		loading: j,
-		isPending: M,
-		loadingClassName: f?.loadingClassName,
-		className: `${D("root")} ${C || ""}`.trim()
-	}, R = () => {
-		T({ id: w });
-	}, z = () => _ ? /* @__PURE__ */ l(n, {
-		...L,
-		href: _,
-		target: v,
-		"data-pihanga": E,
-		label: p ?? m,
-		onClick: R,
-		children: I
-	}) : /* @__PURE__ */ l(t, {
-		...L,
-		"data-pihanga": E,
-		label: p ?? m,
-		onClick: R,
-		children: I
+var p = (e) => {
+	let { opts: p, ariaLabel: m, label: h, iconLabel: g, contentCard: _, href: v, target: y, tooltip: b, tooltipCard: x, tooltipMode: S, tooltipPlacement: C, className: w, id: T, onClicked: E, cardName: D, _cls: O, active: k, focused: A, disabled: j, loading: M, isPending: N, formAction: P } = e, F = o(), I = s(), L = f(p?.beforeIcon), R = f(p?.afterIcon), z = /* @__PURE__ */ d(l, { children: [
+		L,
+		g ? f(g) : _ ? /* @__PURE__ */ u(c, {
+			cardName: _,
+			parentCard: D
+		}) : h,
+		R
+	] }), B = {
+		active: k,
+		focused: A,
+		isMenu: p?.isMenu,
+		truncate: p?.truncate,
+		variant: p?.variant,
+		size: p?.size,
+		disabled: j,
+		loading: M,
+		isPending: N,
+		loadingClassName: p?.loadingClassName,
+		className: `${O("root")} ${w || ""}`.trim()
+	}, V = !!P && I.isInForm, H = () => {
+		V ? I.requestAction(P) : E({ id: T });
+	}, U = P === "submit" ? "submit" : "button", W = () => v ? /* @__PURE__ */ u(n, {
+		...B,
+		href: v,
+		target: y,
+		"data-pihanga": D,
+		label: m ?? h,
+		onClick: H,
+		children: z
+	}) : /* @__PURE__ */ u(t, {
+		...B,
+		type: U,
+		"data-pihanga": D,
+		label: m ?? h,
+		onClick: H,
+		children: z
 	});
-	if (!y && !b) return z();
-	let B = N ? !1 : x === "open" ? !0 : x === "closed" ? !1 : void 0, V = b ? /* @__PURE__ */ l(s, {
-		cardName: b,
-		parentCard: E
-	}) : /* @__PURE__ */ l("p", {
-		"data-pihanga": `${E}-tooltip`,
-		children: y
+	if (!b && !x) return W();
+	let G = F ? !1 : S === "open" ? !0 : S === "closed" ? !1 : void 0, K = x ? /* @__PURE__ */ u(c, {
+		cardName: x,
+		parentCard: D
+	}) : /* @__PURE__ */ u("p", {
+		"data-pihanga": `${D}-tooltip`,
+		children: b
 	});
-	return /* @__PURE__ */ u(r, {
-		open: B,
-		children: [/* @__PURE__ */ l(a, {
+	return /* @__PURE__ */ d(r, {
+		open: G,
+		children: [/* @__PURE__ */ u(a, {
 			asChild: !0,
-			children: z()
-		}), /* @__PURE__ */ l(i, {
-			side: S,
-			children: V
+			children: W()
+		}), /* @__PURE__ */ u(i, {
+			side: C,
+			children: K
 		})]
 	});
 };
 //#endregion
-export { f as ButtonComponent };
+export { p as ButtonComponent };
 
 //# sourceMappingURL=button.component.js.map

package/cards/button/button.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.component.js","names":[],"sources":["../../../src/cards/button/button.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\n\nimport {Button, LinkButton} from \"@/registry/ui/button\";\nimport {Tooltip, TooltipContent, TooltipTrigger} from \"@/registry/ui/tooltip\";\nimport {getIcon} from \"@/cards/icons\";\nimport {useDropdownOpen} from \"@/cards/dropDownMenu/dropdown-context\";\n\nimport type {PiButtonEvents, PiButtonProps} from \"./button.types\";\n\nfunction resolveIconByName(name?: string): React.ReactNode {\n  if (!name) return null;\n  return getIcon(name);\n}\n\nexport const ButtonComponent = (\n  props: PiCardProps<PiButtonProps, PiButtonEvents>,\n): React.ReactNode => {\n  const {\n    opts,\n    ariaLabel,\n    label,\n    iconLabel,\n    contentCard: content,\n    href,\n    target,\n    tooltip,\n    tooltipCard,\n    tooltipMode,\n    tooltipPlacement,\n    className,\n    id,\n    onClicked,\n    cardName,\n    _cls,\n    active,\n    focused,\n    disabled,\n    loading,\n    isPending,\n  } = props;\n\n  // Check if this button is inside an open dropdown menu\n  const isInsideOpenDropdown = useDropdownOpen();\n\n  const beforeIcon = resolveIconByName(opts?.beforeIcon);\n  const afterIcon = resolveIconByName(opts?.afterIcon);\n\n  // Determine base content: iconLabel takes precedence, then contentCard, then label\n  const baseContent = iconLabel ? (\n    resolveIconByName(iconLabel)\n  ) : content ? (\n    <Card cardName={content} parentCard={cardName} />\n  ) : (\n    label\n  );\n\n  // Render icons as children following shadcn/ui pattern\n  const children = (\n    <>\n      {beforeIcon}\n      {baseContent}\n      {afterIcon}\n    </>\n  );\n\n  const common = {\n    active,\n    focused,\n    isMenu: opts?.isMenu,\n    truncate: opts?.truncate,\n    variant: opts?.variant,\n    size: opts?.size,\n\n    disabled,\n    loading,\n    isPending,\n    loadingClassName: opts?.loadingClassName,\n\n    className: `${_cls(\"root\")} ${className || \"\"}`.trim(),\n  };\n\n  const handleClick = () => {\n    onClicked({id});\n  };\n\n  const renderButton = () => {\n    if (href) {\n      return (\n        <LinkButton\n          {...common}\n          href={href}\n          target={target}\n          data-pihanga={cardName}\n          label={ariaLabel ?? label}\n          onClick={handleClick}\n        >\n          {children}\n        </LinkButton>\n      );\n    }\n\n    return (\n      <Button\n        {...common}\n        data-pihanga={cardName}\n        label={ariaLabel ?? label}\n        onClick={handleClick}\n      >\n        {children}\n      </Button>\n    );\n  };\n\n  if (!tooltip && !tooltipCard) return renderButton();\n\n  // Determine tooltip open state based on mode.\n  // If the button is inside an open dropdown, force the tooltip closed\n  // to avoid UI conflicts (dropdown menu should take precedence).\n  const tooltipOpen = isInsideOpenDropdown\n    ? false\n    : tooltipMode === \"open\"\n      ? true\n      : tooltipMode === \"closed\"\n        ? false\n        : undefined; // 'auto' or undefined = uncontrolled\n\n  // Render tooltip content: use tooltipCard if provided, otherwise use tooltip string\n  const tooltipContent = tooltipCard ? (\n    <Card cardName={tooltipCard} parentCard={cardName} />\n  ) : (\n    <p data-pihanga={`${cardName}-tooltip`}>{tooltip}</p>\n  );\n\n  return (\n    <Tooltip open={tooltipOpen}>\n      <TooltipTrigger asChild>{renderButton()}</TooltipTrigger>\n      <TooltipContent side={tooltipPlacement}>{tooltipContent}</TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":";;;;;;;;AAUA,SAAS,EAAkB,GAAgC;CAEzD,OADK,IACE,EAAQ,CAAI,IADD;AAEpB;AAEA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,cACA,UACA,cACA,aAAa,GACb,SACA,WACA,YACA,gBACA,gBACA,qBACA,cACA,OACA,cACA,aACA,SACA,WACA,YACA,aACA,YACA,iBACE,GAGE,IAAuB,EAAgB,GAEvC,IAAa,EAAkB,GAAM,UAAU,GAC/C,IAAY,EAAkB,GAAM,SAAS,GAY7C,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG;EAXe,IAClB,EAAkB,CAAS,IACzB,IACF,kBAAC,GAAD;GAAM,UAAU;GAAS,YAAY;EAAW,CAAA,IAEhD;EAQG;CACD,EAAA,CAAA,GAGE,IAAS;EACb;EACA;EACA,QAAQ,GAAM;EACd,UAAU,GAAM;EAChB,SAAS,GAAM;EACf,MAAM,GAAM;EAEZ;EACA;EACA;EACA,kBAAkB,GAAM;EAExB,WAAW,GAAG,EAAK,MAAM,EAAE,GAAG,KAAa,KAAK,KAAK;CACvD,GAEM,UAAoB;EACxB,EAAU,EAAC,MAAE,CAAC;CAChB,GAEM,UACA,IAEA,kBAAC,GAAD;EACE,GAAI;EACE;EACE;EACR,gBAAc;EACd,OAAO,KAAa;EACpB,SAAS;EAER;CACS,CAAA,IAKd,kBAAC,GAAD;EACE,GAAI;EACJ,gBAAc;EACd,OAAO,KAAa;EACpB,SAAS;EAER;CACK,CAAA;CAIZ,IAAI,CAAC,KAAW,CAAC,GAAa,OAAO,EAAa;CAKlD,IAAM,IAAc,IAChB,KACA,MAAgB,SACd,KACA,MAAgB,WACd,KACA,KAAA,GAGF,IAAiB,IACrB,kBAAC,GAAD;EAAM,UAAU;EAAa,YAAY;CAAW,CAAA,IAEpD,kBAAC,KAAD;EAAG,gBAAc,GAAG,EAAS;YAAY;CAAW,CAAA;CAGtD,OACE,kBAAC,GAAD;EAAS,MAAM;YAAf,CACE,kBAAC,GAAD;GAAgB,SAAA;aAAS,EAAa;EAAkB,CAAA,GACxD,kBAAC,GAAD;GAAgB,MAAM;aAAmB;EAA+B,CAAA,CACjE;;AAEb"}
+{"version":3,"file":"button.component.js","names":[],"sources":["../../../src/cards/button/button.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\n\nimport {Button, LinkButton} from \"@/registry/ui/button\";\nimport {Tooltip, TooltipContent, TooltipTrigger} from \"@/registry/ui/tooltip\";\nimport {getIcon} from \"@/cards/icons\";\nimport {useDropdownOpen} from \"@/cards/dropDownMenu/dropdown-context\";\nimport {useFormContext} from \"@/cards/form/form.context\";\n\nimport type {PiButtonEvents, PiButtonProps} from \"./button.types\";\n\nfunction resolveIconByName(name?: string): React.ReactNode {\n  if (!name) return null;\n  return getIcon(name);\n}\n\nexport const ButtonComponent = (\n  props: PiCardProps<PiButtonProps, PiButtonEvents>,\n): React.ReactNode => {\n  const {\n    opts,\n    ariaLabel,\n    label,\n    iconLabel,\n    contentCard: content,\n    href,\n    target,\n    tooltip,\n    tooltipCard,\n    tooltipMode,\n    tooltipPlacement,\n    className,\n    id,\n    onClicked,\n    cardName,\n    _cls,\n    active,\n    focused,\n    disabled,\n    loading,\n    isPending,\n    formAction,\n  } = props;\n\n  // Check if this button is inside an open dropdown menu\n  const isInsideOpenDropdown = useDropdownOpen();\n\n  // Detect if we are inside a pi/form card via React context, so\n  // `formAction` can request a form-level action instead of onClicked.\n  const form = useFormContext();\n\n  const beforeIcon = resolveIconByName(opts?.beforeIcon);\n  const afterIcon = resolveIconByName(opts?.afterIcon);\n\n  // Determine base content: iconLabel takes precedence, then contentCard, then label\n  const baseContent = iconLabel ? (\n    resolveIconByName(iconLabel)\n  ) : content ? (\n    <Card cardName={content} parentCard={cardName} />\n  ) : (\n    label\n  );\n\n  // Render icons as children following shadcn/ui pattern\n  const children = (\n    <>\n      {beforeIcon}\n      {baseContent}\n      {afterIcon}\n    </>\n  );\n\n  const common = {\n    active,\n    focused,\n    isMenu: opts?.isMenu,\n    truncate: opts?.truncate,\n    variant: opts?.variant,\n    size: opts?.size,\n\n    disabled,\n    loading,\n    isPending,\n    loadingClassName: opts?.loadingClassName,\n\n    className: `${_cls(\"root\")} ${className || \"\"}`.trim(),\n  };\n\n  // When `formAction` is set and this button is inside a pi/form, clicking\n  // it requests that form-level action instead of firing this button's own\n  // onClicked.\n  const useFormAction = Boolean(formAction) && form.isInForm;\n\n  const handleClick = () => {\n    if (useFormAction) {\n      form.requestAction(formAction!);\n    } else {\n      onClicked({id});\n    }\n  };\n\n  // Native <button type> mirrors `formAction` so the button can never\n  // accidentally submit a form it isn't supposed to: \"submit\" is the only\n  // value that should trigger the browser's native form submit; everything\n  // else (including no formAction at all) is a plain, non-submitting button.\n  const htmlType = formAction === \"submit\" ? \"submit\" : \"button\";\n\n  const renderButton = () => {\n    if (href) {\n      return (\n        <LinkButton\n          {...common}\n          href={href}\n          target={target}\n          data-pihanga={cardName}\n          label={ariaLabel ?? label}\n          onClick={handleClick}\n        >\n          {children}\n        </LinkButton>\n      );\n    }\n\n    return (\n      <Button\n        {...common}\n        type={htmlType}\n        data-pihanga={cardName}\n        label={ariaLabel ?? label}\n        onClick={handleClick}\n      >\n        {children}\n      </Button>\n    );\n  };\n\n  if (!tooltip && !tooltipCard) return renderButton();\n\n  // Determine tooltip open state based on mode.\n  // If the button is inside an open dropdown, force the tooltip closed\n  // to avoid UI conflicts (dropdown menu should take precedence).\n  const tooltipOpen = isInsideOpenDropdown\n    ? false\n    : tooltipMode === \"open\"\n      ? true\n      : tooltipMode === \"closed\"\n        ? false\n        : undefined; // 'auto' or undefined = uncontrolled\n\n  // Render tooltip content: use tooltipCard if provided, otherwise use tooltip string\n  const tooltipContent = tooltipCard ? (\n    <Card cardName={tooltipCard} parentCard={cardName} />\n  ) : (\n    <p data-pihanga={`${cardName}-tooltip`}>{tooltip}</p>\n  );\n\n  return (\n    <Tooltip open={tooltipOpen}>\n      <TooltipTrigger asChild>{renderButton()}</TooltipTrigger>\n      <TooltipContent side={tooltipPlacement}>{tooltipContent}</TooltipContent>\n    </Tooltip>\n  );\n};\n"],"mappings":";;;;;;;;;AAWA,SAAS,EAAkB,GAAgC;CAEzD,OADK,IACE,EAAQ,CAAI,IADD;AAEpB;AAEA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,cACA,UACA,cACA,aAAa,GACb,SACA,WACA,YACA,gBACA,gBACA,qBACA,cACA,OACA,cACA,aACA,SACA,WACA,YACA,aACA,YACA,cACA,kBACE,GAGE,IAAuB,EAAgB,GAIvC,IAAO,EAAe,GAEtB,IAAa,EAAkB,GAAM,UAAU,GAC/C,IAAY,EAAkB,GAAM,SAAS,GAY7C,IACJ,kBAAA,GAAA,EAAA,UAAA;EACG;EAXe,IAClB,EAAkB,CAAS,IACzB,IACF,kBAAC,GAAD;GAAM,UAAU;GAAS,YAAY;EAAW,CAAA,IAEhD;EAQG;CACD,EAAA,CAAA,GAGE,IAAS;EACb;EACA;EACA,QAAQ,GAAM;EACd,UAAU,GAAM;EAChB,SAAS,GAAM;EACf,MAAM,GAAM;EAEZ;EACA;EACA;EACA,kBAAkB,GAAM;EAExB,WAAW,GAAG,EAAK,MAAM,EAAE,GAAG,KAAa,KAAK,KAAK;CACvD,GAKM,IAAgB,EAAQ,KAAe,EAAK,UAE5C,UAAoB;EACxB,AAAI,IACF,EAAK,cAAc,CAAW,IAE9B,EAAU,EAAC,MAAE,CAAC;CAElB,GAMM,IAAW,MAAe,WAAW,WAAW,UAEhD,UACA,IAEA,kBAAC,GAAD;EACE,GAAI;EACE;EACE;EACR,gBAAc;EACd,OAAO,KAAa;EACpB,SAAS;EAER;CACS,CAAA,IAKd,kBAAC,GAAD;EACE,GAAI;EACJ,MAAM;EACN,gBAAc;EACd,OAAO,KAAa;EACpB,SAAS;EAER;CACK,CAAA;CAIZ,IAAI,CAAC,KAAW,CAAC,GAAa,OAAO,EAAa;CAKlD,IAAM,IAAc,IAChB,KACA,MAAgB,SACd,KACA,MAAgB,WACd,KACA,KAAA,GAGF,IAAiB,IACrB,kBAAC,GAAD;EAAM,UAAU;EAAa,YAAY;CAAW,CAAA,IAEpD,kBAAC,KAAD;EAAG,gBAAc,GAAG,EAAS;YAAY;CAAW,CAAA;CAGtD,OACE,kBAAC,GAAD;EAAS,MAAM;YAAf,CACE,kBAAC,GAAD;GAAgB,SAAA;aAAS,EAAa;EAAkB,CAAA,GACxD,kBAAC,GAAD;GAAgB,MAAM;aAAmB;EAA+B,CAAA,CACjE;;AAEb"}

package/cards/button/button.types.d.ts

@@ -1,4 +1,5 @@
 import { PiCardRef } from '@pihanga2/core';
+import { FormAction } from '../form/form.types';
 export declare const PI_BUTTON_CARD = "pi/button";
 export declare const Button: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiButtonProps, S, PiButtonEvents>) => import('@pihanga2/core').PiCardDef;
 export declare const PI_BUTTON_ACTION: {
@@ -100,6 +101,29 @@ export type PiButtonProps = {
     loading?: boolean;
     /** If true, indicates an async operation is pending (similar to loading but distinct). */
     isPending?: boolean;
+    /**
+     * When set and this button is rendered inside a `pi/form` card, clicking
+     * it requests that top-level form action instead of firing this button's
+     * own `onClicked`:
+     *
+     * - `"submit"` — same as pressing the form's native submit button; fires
+     *   the Form's `onSubmitted` event with a snapshot of the current field
+     *   values.
+     * - `"cancel"` — fires the Form's `onCancelled` event. Never submits or
+     *   resets the form.
+     *
+     * The button's native `<button type>` is derived from this prop so it can
+     * never accidentally submit a form it isn't supposed to: `"submit"` →
+     * `type="submit"`, `"cancel"` (or unset) → `type="button"`.
+     *
+     * Has no effect when the button is used outside a `pi/form` — in that case
+     * `onClicked` always fires as usual, and the native type is `"button"`.
+     *
+     * This is the button-specific counterpart of `FormFieldProps`/`name` used
+     * by form-bindable fields (`pi/input`, `pi/switch`, …) — together they
+     * form the complete `pi/form` interaction contract.
+     */
+    formAction?: FormAction;
     className?: string;
 };
 export type PiButtonClickedEvent = {

package/cards/button/button.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"button.types.js","names":[],"sources":["../../../src/cards/button/button.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_BUTTON_CARD = \"pi/button\";\n\nexport const Button = createCardDeclaration<PiButtonProps, PiButtonEvents>(\n  PI_BUTTON_CARD,\n);\n\nexport const PI_BUTTON_ACTION = registerActions(PI_BUTTON_CARD, [\"clicked\"]);\n\nexport const onButtonClicked = createOnAction<PiButtonClickedEvent>(\n  PI_BUTTON_ACTION.CLICKED,\n);\n\n/** @deprecated Use `onButtonClicked` instead. */\nexport const onPiButtonClicked = onButtonClicked;\n\n/**\n * Declarative \"opts\" subset based on `src/registry/ui/button.tsx`.\n *\n * Notes:\n * - Any icon is referenced by name and resolved via `src/pihanga/icons.ts`.\n * - `children` are provided via `label` (simple) or `content` (card ref).\n */\nexport type PiButtonOpts = {\n  /**\n   * Visual style variant of the button.\n   * Determines the button's appearance (colors, borders, etc.).\n   */\n  variant?:\n    | \"default\"\n    | \"destructive\"\n    | \"outline\"\n    | \"secondary\"\n    | \"ghost\"\n    | \"ghost2\"\n    | \"ghost3\"\n    | \"ghostActive\"\n    | \"brand\"\n    | \"nav\"\n    | \"navAction\"\n    | \"menuAction\"\n    | \"blockAction\"\n    | \"blockActionSecondary\"\n    | \"primaryOutline\"\n    | \"radio\"\n    | \"none\";\n\n  /**\n   * Size of the button.\n   * Controls padding, font size, and overall dimensions.\n   */\n  size?:\n    | \"default\"\n    | \"xs\"\n    | \"sm\"\n    | \"md\"\n    | \"lg\"\n    | \"icon\"\n    | \"iconSm\"\n    | \"navAction\"\n    | \"menuAction\"\n    | \"blockAction\"\n    | \"none\";\n\n  /** Truncate button content with ellipsis if it overflows. */\n  truncate?: boolean;\n\n  /** If true, button is rendered as a menu trigger button. */\n  isMenu?: boolean;\n\n  /** Custom CSS class to apply to the loading spinner/indicator. */\n  loadingClassName?: string;\n\n  /** Icon to display before the button content. Set 'size' to 'icon' if ONLY show icon */\n  beforeIcon?: string;\n\n  /** Icon to display after the button content */\n  afterIcon?: string;\n};\n\nexport type PiButtonProps = {\n  id?: string; // optional 'id' to be added to events\n\n  /**\n   * Optional explicit aria-label.\n   *\n   * Useful for icon-only / letter-only buttons where the visible content\n   * shouldn't be used as the accessible name.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Declarative options; maps closely to `@/registry/ui/button`.\n   */\n  opts?: PiButtonOpts;\n\n  /** Simple label; used as children and aria-label fallback. */\n  label?: string;\n\n  /**\n   * Icon name to use as the main button content (instead of text label).\n   * Resolved via `src/pihanga/icons.ts`.\n   * Takes precedence over `label` and `contentCard`.\n   */\n  iconLabel?: string;\n\n  /**\n   * If set, renders this card as the content instead of `label`.\n   * (Useful for rich content.)\n   */\n  contentCard?: PiCardRef;\n\n  /** When provided, button will render as an anchor. */\n  href?: string;\n  target?: string;\n\n  tooltip?: string;\n\n  /**\n   * If set, renders this card as the tooltip content instead of `tooltip`.\n   * (Useful for rich tooltip content.)\n   */\n  tooltipCard?: PiCardRef;\n\n  /**\n   * Controls tooltip visibility mode.\n   * - 'auto' (default): Normal hover behavior\n   * - 'open': Force tooltip to be visible\n   * - 'closed': Force tooltip to be hidden\n   */\n  tooltipMode?: \"auto\" | \"open\" | \"closed\";\n\n  /**\n   * Controls tooltip placement/position.\n   * - 'top': Tooltip appears above the button (default)\n   * - 'right': Tooltip appears to the right of the button\n   * - 'bottom': Tooltip appears below the button\n   * - 'left': Tooltip appears to the left of the button\n   */\n  tooltipPlacement?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\n  /** Indicates whether the button is in an active/selected state. */\n  active?: boolean;\n\n  /** Indicates whether the button has focus state styling applied. */\n  focused?: boolean;\n\n  /** If true, disables the button and prevents interaction. */\n  disabled?: boolean;\n\n  /** If true, shows loading state and typically disables interaction. */\n  loading?: boolean;\n\n  /** If true, indicates an async operation is pending (similar to loading but distinct). */\n  isPending?: boolean;\n\n  className?: string;\n};\n\nexport type PiButtonClickedEvent = {\n  id?: string;\n};\n\nexport type PiButtonEvents = {\n  onClicked: PiButtonClickedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAiB,aAEjB,IAAS,EACpB,CACF,GAEa,IAAmB,EAAgB,GAAgB,CAAC,SAAS,CAAC,GAE9D,IAAkB,EAC7B,EAAiB,OACnB,GAGa,IAAoB"}
+{"version":3,"file":"button.types.js","names":[],"sources":["../../../src/cards/button/button.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\nimport type {FormAction} from \"@/cards/form/form.types\";\n\nexport const PI_BUTTON_CARD = \"pi/button\";\n\nexport const Button = createCardDeclaration<PiButtonProps, PiButtonEvents>(\n  PI_BUTTON_CARD,\n);\n\nexport const PI_BUTTON_ACTION = registerActions(PI_BUTTON_CARD, [\"clicked\"]);\n\nexport const onButtonClicked = createOnAction<PiButtonClickedEvent>(\n  PI_BUTTON_ACTION.CLICKED,\n);\n\n/** @deprecated Use `onButtonClicked` instead. */\nexport const onPiButtonClicked = onButtonClicked;\n\n/**\n * Declarative \"opts\" subset based on `src/registry/ui/button.tsx`.\n *\n * Notes:\n * - Any icon is referenced by name and resolved via `src/pihanga/icons.ts`.\n * - `children` are provided via `label` (simple) or `content` (card ref).\n */\nexport type PiButtonOpts = {\n  /**\n   * Visual style variant of the button.\n   * Determines the button's appearance (colors, borders, etc.).\n   */\n  variant?:\n    | \"default\"\n    | \"destructive\"\n    | \"outline\"\n    | \"secondary\"\n    | \"ghost\"\n    | \"ghost2\"\n    | \"ghost3\"\n    | \"ghostActive\"\n    | \"brand\"\n    | \"nav\"\n    | \"navAction\"\n    | \"menuAction\"\n    | \"blockAction\"\n    | \"blockActionSecondary\"\n    | \"primaryOutline\"\n    | \"radio\"\n    | \"none\";\n\n  /**\n   * Size of the button.\n   * Controls padding, font size, and overall dimensions.\n   */\n  size?:\n    | \"default\"\n    | \"xs\"\n    | \"sm\"\n    | \"md\"\n    | \"lg\"\n    | \"icon\"\n    | \"iconSm\"\n    | \"navAction\"\n    | \"menuAction\"\n    | \"blockAction\"\n    | \"none\";\n\n  /** Truncate button content with ellipsis if it overflows. */\n  truncate?: boolean;\n\n  /** If true, button is rendered as a menu trigger button. */\n  isMenu?: boolean;\n\n  /** Custom CSS class to apply to the loading spinner/indicator. */\n  loadingClassName?: string;\n\n  /** Icon to display before the button content. Set 'size' to 'icon' if ONLY show icon */\n  beforeIcon?: string;\n\n  /** Icon to display after the button content */\n  afterIcon?: string;\n};\n\nexport type PiButtonProps = {\n  id?: string; // optional 'id' to be added to events\n\n  /**\n   * Optional explicit aria-label.\n   *\n   * Useful for icon-only / letter-only buttons where the visible content\n   * shouldn't be used as the accessible name.\n   */\n  ariaLabel?: string;\n\n  /**\n   * Declarative options; maps closely to `@/registry/ui/button`.\n   */\n  opts?: PiButtonOpts;\n\n  /** Simple label; used as children and aria-label fallback. */\n  label?: string;\n\n  /**\n   * Icon name to use as the main button content (instead of text label).\n   * Resolved via `src/pihanga/icons.ts`.\n   * Takes precedence over `label` and `contentCard`.\n   */\n  iconLabel?: string;\n\n  /**\n   * If set, renders this card as the content instead of `label`.\n   * (Useful for rich content.)\n   */\n  contentCard?: PiCardRef;\n\n  /** When provided, button will render as an anchor. */\n  href?: string;\n  target?: string;\n\n  tooltip?: string;\n\n  /**\n   * If set, renders this card as the tooltip content instead of `tooltip`.\n   * (Useful for rich tooltip content.)\n   */\n  tooltipCard?: PiCardRef;\n\n  /**\n   * Controls tooltip visibility mode.\n   * - 'auto' (default): Normal hover behavior\n   * - 'open': Force tooltip to be visible\n   * - 'closed': Force tooltip to be hidden\n   */\n  tooltipMode?: \"auto\" | \"open\" | \"closed\";\n\n  /**\n   * Controls tooltip placement/position.\n   * - 'top': Tooltip appears above the button (default)\n   * - 'right': Tooltip appears to the right of the button\n   * - 'bottom': Tooltip appears below the button\n   * - 'left': Tooltip appears to the left of the button\n   */\n  tooltipPlacement?: \"top\" | \"right\" | \"bottom\" | \"left\";\n\n  /** Indicates whether the button is in an active/selected state. */\n  active?: boolean;\n\n  /** Indicates whether the button has focus state styling applied. */\n  focused?: boolean;\n\n  /** If true, disables the button and prevents interaction. */\n  disabled?: boolean;\n\n  /** If true, shows loading state and typically disables interaction. */\n  loading?: boolean;\n\n  /** If true, indicates an async operation is pending (similar to loading but distinct). */\n  isPending?: boolean;\n\n  /**\n   * When set and this button is rendered inside a `pi/form` card, clicking\n   * it requests that top-level form action instead of firing this button's\n   * own `onClicked`:\n   *\n   * - `\"submit\"` — same as pressing the form's native submit button; fires\n   *   the Form's `onSubmitted` event with a snapshot of the current field\n   *   values.\n   * - `\"cancel\"` — fires the Form's `onCancelled` event. Never submits or\n   *   resets the form.\n   *\n   * The button's native `<button type>` is derived from this prop so it can\n   * never accidentally submit a form it isn't supposed to: `\"submit\"` →\n   * `type=\"submit\"`, `\"cancel\"` (or unset) → `type=\"button\"`.\n   *\n   * Has no effect when the button is used outside a `pi/form` — in that case\n   * `onClicked` always fires as usual, and the native type is `\"button\"`.\n   *\n   * This is the button-specific counterpart of `FormFieldProps`/`name` used\n   * by form-bindable fields (`pi/input`, `pi/switch`, …) — together they\n   * form the complete `pi/form` interaction contract.\n   */\n  formAction?: FormAction;\n\n  className?: string;\n};\n\nexport type PiButtonClickedEvent = {\n  id?: string;\n};\n\nexport type PiButtonEvents = {\n  onClicked: PiButtonClickedEvent;\n};\n"],"mappings":";;AAQA,IAAa,IAAiB,aAEjB,IAAS,EACpB,CACF,GAEa,IAAmB,EAAgB,GAAgB,CAAC,SAAS,CAAC,GAE9D,IAAkB,EAC7B,EAAiB,OACnB,GAGa,IAAoB"}

package/cards/checkbox/checkbox.types.d.ts

@@ -1,3 +1,4 @@
+import { FormFieldProps } from '../form/form.types';
 export declare const PI_CHECKBOX_CARD = "pi/checkbox";
 export declare const Checkbox: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiCheckboxProps, S, PiCheckboxEvents>) => import('@pihanga2/core').PiCardDef;
 export declare const PI_CHECKBOX_ACTION: {
@@ -10,13 +11,7 @@ export declare const onCheckboxChanged: <S extends import('@pihanga2/core').Redu
 export declare const onPiCheckboxChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiCheckboxChangedEvent>) => void;
-export type PiCheckboxProps = {
-    /**
-     * Field name used to bind to FormContext when inside a pi/form card.
-     * When provided the component reads its checked state from form data and
-     * writes back via form.handleChange.
-     */
-    name?: string;
+export type PiCheckboxProps = FormFieldProps & {
     /**
      * Controlled checked state used in standalone mode (outside a Form).
      * Ignored when `name` is set and the component is inside a pi/form.

package/cards/checkbox/checkbox.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"checkbox.types.js","names":[],"sources":["../../../src/cards/checkbox/checkbox.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_CHECKBOX_CARD = \"pi/checkbox\";\n\nexport const Checkbox = createCardDeclaration<\n  PiCheckboxProps,\n  PiCheckboxEvents\n>(PI_CHECKBOX_CARD);\n\nexport const PI_CHECKBOX_ACTION = registerActions(PI_CHECKBOX_CARD, [\n  \"changed\",\n]);\n\nexport const onCheckboxChanged = createOnAction<PiCheckboxChangedEvent>(\n  PI_CHECKBOX_ACTION.CHANGED,\n);\n\n/** @deprecated Use `onCheckboxChanged` instead. */\nexport const onPiCheckboxChanged = onCheckboxChanged;\n\nexport type PiCheckboxProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its checked state from form data and\n   * writes back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled checked state used in standalone mode (outside a Form).\n   * Ignored when `name` is set and the component is inside a pi/form.\n   */\n  checked?: boolean;\n\n  /** When true, the checkbox is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /**\n   * Optional label text rendered next to the checkbox.\n   * The label is automatically associated with the input via `htmlFor`.\n   */\n  label?: string;\n};\n\nexport type PiCheckboxChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New checked state after the change. */\n  checked: boolean;\n};\n\nexport type PiCheckboxEvents = {\n  onChanged: PiCheckboxChangedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAmB,eAEnB,IAAW,EAGtB,CAAgB,GAEL,IAAqB,EAAgB,GAAkB,CAClE,SACF,CAAC,GAEY,IAAoB,EAC/B,EAAmB,OACrB,GAGa,IAAsB"}
+{"version":3,"file":"checkbox.types.js","names":[],"sources":["../../../src/cards/checkbox/checkbox.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\nimport type {FormFieldProps} from \"@/cards/form/form.types\";\n\nexport const PI_CHECKBOX_CARD = \"pi/checkbox\";\n\nexport const Checkbox = createCardDeclaration<\n  PiCheckboxProps,\n  PiCheckboxEvents\n>(PI_CHECKBOX_CARD);\n\nexport const PI_CHECKBOX_ACTION = registerActions(PI_CHECKBOX_CARD, [\n  \"changed\",\n]);\n\nexport const onCheckboxChanged = createOnAction<PiCheckboxChangedEvent>(\n  PI_CHECKBOX_ACTION.CHANGED,\n);\n\n/** @deprecated Use `onCheckboxChanged` instead. */\nexport const onPiCheckboxChanged = onCheckboxChanged;\n\nexport type PiCheckboxProps = FormFieldProps & {\n  /**\n   * Controlled checked state used in standalone mode (outside a Form).\n   * Ignored when `name` is set and the component is inside a pi/form.\n   */\n  checked?: boolean;\n\n  /** When true, the checkbox is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /**\n   * Optional label text rendered next to the checkbox.\n   * The label is automatically associated with the input via `htmlFor`.\n   */\n  label?: string;\n};\n\nexport type PiCheckboxChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New checked state after the change. */\n  checked: boolean;\n};\n\nexport type PiCheckboxEvents = {\n  onChanged: PiCheckboxChangedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAmB,eAEnB,IAAW,EAGtB,CAAgB,GAEL,IAAqB,EAAgB,GAAkB,CAClE,SACF,CAAC,GAEY,IAAoB,EAC/B,EAAmB,OACrB,GAGa,IAAsB"}

package/cards/field/field.component.js

@@ -22,7 +22,7 @@ var d = (d) => {
 		className: e(_),
 		"data-pihanga": v,
 		children: [
-			/* @__PURE__ */ l(a, {
+			f && /* @__PURE__ */ l(a, {
 				htmlFor: x,
 				children: f
 			}),

package/cards/field/field.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.component.js","names":[],"sources":["../../../src/cards/field/field.component.tsx"],"sourcesContent":["import React, {useMemo} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/components/ui/field\";\nimport {cn} from \"@/lib/utils\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiFieldProps} from \"./field.types\";\n\nexport const FieldCardComponent = (\n  props: PiCardProps<PiFieldProps>,\n): React.ReactNode => {\n  const {\n    label,\n    fieldCard,\n    name,\n    description,\n    error: propError,\n    className,\n    cardName,\n  } = props;\n\n  // When name is provided and we're inside a pi/form, use the form error.\n  const form = useFormContext();\n  const error = form.isInForm && name ? form.errors[name] : propError;\n\n  // Stable id that links <FieldLabel htmlFor> to the inner control's id.\n  const fieldId = React.useId();\n\n  // Memoize the extra props forwarded to the inner card so that Pihanga does\n  // not see a brand-new object on every render (which would cause it to treat\n  // the inner card as a new/changed card and unmount/remount it).\n  const isInvalid = Boolean(error);\n  /*\n      Pihanga's Card forwards every prop other than cardName / parentCard to\n      the bound component.  We inject `id` (so the control's element gets\n      the id that FieldLabel points at) and `invalid` (so the control can\n      set aria-invalid without needing its own error/label logic).\n    */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const fieldCardProps = useMemo<any>(\n    () => ({\n      cardName: fieldCard,\n      parentCard: cardName,\n      id: fieldId,\n      invalid: isInvalid,\n    }),\n    [cardName, fieldCard, fieldId, isInvalid],\n  );\n\n  return (\n    <Field\n      data-invalid={Boolean(error) || undefined}\n      className={cn(className)}\n      data-pihanga={cardName}\n    >\n      <FieldLabel htmlFor={fieldId}>{label}</FieldLabel>\n\n      <Card {...fieldCardProps} />\n\n      {description && <FieldDescription>{description}</FieldDescription>}\n      <FieldError>{error}</FieldError>\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;AAYA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,UACA,cACA,SACA,gBACA,OAAO,GACP,cACA,gBACE,GAGE,IAAO,EAAe,GACtB,IAAQ,EAAK,YAAY,IAAO,EAAK,OAAO,KAAQ,GAGpD,IAAU,EAAM,MAAM,GAKtB,IAAY,EAAQ,GAQpB,IAAiB,SACd;EACL,UAAU;EACV,YAAY;EACZ,IAAI;EACJ,SAAS;CACX,IACA;EAAC;EAAU;EAAW;EAAS;CAAS,CAC1C;CAEA,OACE,kBAAC,GAAD;EACE,gBAAc,EAAQ,KAAU,KAAA;EAChC,WAAW,EAAG,CAAS;EACvB,gBAAc;YAHhB;GAKE,kBAAC,GAAD;IAAY,SAAS;cAAU;GAAkB,CAAA;GAEjD,kBAAC,GAAD,EAAM,GAAI,EAAiB,CAAA;GAE1B,KAAe,kBAAC,GAAD,EAAA,UAAmB,EAA8B,CAAA;GACjE,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;EAC1B;;AAEX"}
+{"version":3,"file":"field.component.js","names":[],"sources":["../../../src/cards/field/field.component.tsx"],"sourcesContent":["import React, {useMemo} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/components/ui/field\";\nimport {cn} from \"@/lib/utils\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiFieldProps} from \"./field.types\";\n\nexport const FieldCardComponent = (\n  props: PiCardProps<PiFieldProps>,\n): React.ReactNode => {\n  const {\n    label,\n    fieldCard,\n    name,\n    description,\n    error: propError,\n    className,\n    cardName,\n  } = props;\n\n  // When name is provided and we're inside a pi/form, use the form error.\n  const form = useFormContext();\n  const error = form.isInForm && name ? form.errors[name] : propError;\n\n  // Stable id that links <FieldLabel htmlFor> to the inner control's id.\n  const fieldId = React.useId();\n\n  // Memoize the extra props forwarded to the inner card so that Pihanga does\n  // not see a brand-new object on every render (which would cause it to treat\n  // the inner card as a new/changed card and unmount/remount it).\n  const isInvalid = Boolean(error);\n  /*\n      Pihanga's Card forwards every prop other than cardName / parentCard to\n      the bound component.  We inject `id` (so the control's element gets\n      the id that FieldLabel points at) and `invalid` (so the control can\n      set aria-invalid without needing its own error/label logic).\n    */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const fieldCardProps = useMemo<any>(\n    () => ({\n      cardName: fieldCard,\n      parentCard: cardName,\n      id: fieldId,\n      invalid: isInvalid,\n    }),\n    [cardName, fieldCard, fieldId, isInvalid],\n  );\n\n  return (\n    <Field\n      data-invalid={Boolean(error) || undefined}\n      className={cn(className)}\n      data-pihanga={cardName}\n    >\n      {label && <FieldLabel htmlFor={fieldId}>{label}</FieldLabel>}\n\n      <Card {...fieldCardProps} />\n\n      {description && <FieldDescription>{description}</FieldDescription>}\n      <FieldError>{error}</FieldError>\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;AAYA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,UACA,cACA,SACA,gBACA,OAAO,GACP,cACA,gBACE,GAGE,IAAO,EAAe,GACtB,IAAQ,EAAK,YAAY,IAAO,EAAK,OAAO,KAAQ,GAGpD,IAAU,EAAM,MAAM,GAKtB,IAAY,EAAQ,GAQpB,IAAiB,SACd;EACL,UAAU;EACV,YAAY;EACZ,IAAI;EACJ,SAAS;CACX,IACA;EAAC;EAAU;EAAW;EAAS;CAAS,CAC1C;CAEA,OACE,kBAAC,GAAD;EACE,gBAAc,EAAQ,KAAU,KAAA;EAChC,WAAW,EAAG,CAAS;EACvB,gBAAc;YAHhB;GAKG,KAAS,kBAAC,GAAD;IAAY,SAAS;cAAU;GAAkB,CAAA;GAE3D,kBAAC,GAAD,EAAM,GAAI,EAAiB,CAAA;GAE1B,KAAe,kBAAC,GAAD,EAAA,UAAmB,EAA8B,CAAA;GACjE,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;EAC1B;;AAEX"}

package/cards/form/form.component.js

@@ -1,21 +1,32 @@
 import { cn as e } from "../../lib/utils.js";
 import { FormContext as t } from "./form.context.js";
-import { useCallback as n, useState as r } from "react";
-import { Card as i } from "@pihanga2/core";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { Card as o } from "@pihanga2/core";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/cards/form/form.component.tsx
-var s = (s) => {
-	let { id: c, content: l = [], initialValues: u = {}, submitLabel: d = "Submit", className: f, cardName: p, onSubmitted: m } = s, [h, g] = r(() => ({ ...u })), [_, v] = r({}), y = n((e, t) => {
-		g((n) => ({
+var l = (l) => {
+	let { id: u, content: d = [], initialValues: f = {}, submitLabel: p = "Submit", hideSubmit: m = !1, className: h, cardName: g, onSubmitted: _, onCancelled: v, onAbandoned: y } = l, [b, x] = a(() => ({ ...f })), [S, C] = a({}), w = i(!1), T = i(u);
+	T.current = u;
+	let E = i(b);
+	E.current = b;
+	let D = i(y);
+	D.current = y, r(() => () => {
+		w.current || D.current({
+			id: T.current,
+			formData: E.current
+		});
+	}, []);
+	let O = n((e, t) => {
+		x((n) => ({
 			...n,
 			[e]: t
-		})), v((t) => {
+		})), C((t) => {
 			if (!t[e]) return t;
 			let n = { ...t };
 			return delete n[e], n;
 		});
-	}, []), b = n((e, t) => {
-		v((n) => {
+	}, []), k = n((e, t) => {
+		C((n) => {
 			if (t === null) {
 				let t = { ...n };
 				return delete t[e], t;
@@ -25,40 +36,54 @@ var s = (s) => {
 				[e]: t
 			};
 		});
-	}, []), x = n((e) => {
-		e.preventDefault(), m({
-			id: c,
-			formData: h
+	}, []), A = n(() => {
+		w.current = !0, _({
+			id: u,
+			formData: b
+		});
+	}, [
+		u,
+		b,
+		_
+	]), j = n(() => {
+		w.current = !0, v({
+			id: u,
+			formData: b
 		});
 	}, [
-		c,
-		h,
-		m
-	]), S = {
-		formData: h,
-		errors: _,
-		handleChange: y,
-		setError: b,
+		u,
+		b,
+		v
+	]), M = n((e) => {
+		e.preventDefault(), A();
+	}, [A]), N = {
+		formData: b,
+		errors: S,
+		handleChange: O,
+		setError: k,
+		requestAction: n((e) => {
+			e === "submit" ? A() : j();
+		}, [A, j]),
 		isInForm: !0
 	};
-	return /* @__PURE__ */ a(t.Provider, {
-		value: S,
-		children: /* @__PURE__ */ o("form", {
-			onSubmit: x,
-			className: e("flex flex-col gap-4", f),
-			"data-pihanga": p,
-			children: [l.map((e, t) => /* @__PURE__ */ a(i, {
+	return /* @__PURE__ */ s(t.Provider, {
+		value: N,
+		children: /* @__PURE__ */ c("form", {
+			onSubmit: M,
+			className: e("flex flex-col gap-4", h),
+			"data-pihanga": g,
+			children: [d.map((e, t) => /* @__PURE__ */ s(o, {
 				cardName: e,
-				parentCard: p
-			}, t)), /* @__PURE__ */ a("button", {
+				parentCard: g
+			}, t)), !m && /* @__PURE__ */ s("button", {
 				type: "submit",
 				className: "inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-				children: d
+				children: p
 			})]
 		})
 	});
 };
 //#endregion
-export { s as FormComponent };
+export { l as FormComponent };
 
 //# sourceMappingURL=form.component.js.map

package/cards/form/form.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.component.js","names":[],"sources":["../../../src/cards/form/form.component.tsx"],"sourcesContent":["import React, {useState, useCallback} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport {FormContext, type FormContextValue} from \"./form.context\";\nimport type {PiFormEvents, PiFormProps} from \"./form.types\";\n\nexport const FormComponent = (\n  props: PiCardProps<PiFormProps, PiFormEvents>,\n): React.ReactNode => {\n  const {\n    id,\n    content = [],\n    initialValues = {},\n    submitLabel = \"Submit\",\n    className,\n    cardName,\n    onSubmitted,\n  } = props;\n\n  const [formData, setFormData] = useState<Record<string, unknown>>(() => ({\n    ...initialValues,\n  }));\n  const [errors, setErrors] = useState<Record<string, string>>({});\n\n  const handleChange = useCallback((fieldName: string, value: unknown) => {\n    setFormData((prev) => ({...prev, [fieldName]: value}));\n    // Clear validation error when the user modifies the field\n    setErrors((prev) => {\n      if (!prev[fieldName]) return prev;\n      const next = {...prev};\n      delete next[fieldName];\n      return next;\n    });\n  }, []);\n\n  const setError = useCallback((fieldName: string, error: string | null) => {\n    setErrors((prev) => {\n      if (error === null) {\n        const next = {...prev};\n        delete next[fieldName];\n        return next;\n      }\n      return {...prev, [fieldName]: error};\n    });\n  }, []);\n\n  const handleSubmit = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault();\n      onSubmitted({id, formData});\n    },\n    [id, formData, onSubmitted],\n  );\n\n  const contextValue: FormContextValue = {\n    formData,\n    errors,\n    handleChange,\n    setError,\n    isInForm: true,\n  };\n\n  return (\n    <FormContext.Provider value={contextValue}>\n      <form\n        onSubmit={handleSubmit}\n        className={cn(\"flex flex-col gap-4\", className)}\n        data-pihanga={cardName}\n      >\n        {content.map((cref, idx) => (\n          <Card key={idx} cardName={cref} parentCard={cardName} />\n        ))}\n        <button\n          type=\"submit\"\n          className=\"inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\"\n        >\n          {submitLabel}\n        </button>\n      </form>\n    </FormContext.Provider>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,OACA,aAAU,CAAC,GACX,mBAAgB,CAAC,GACjB,iBAAc,UACd,cACA,aACA,mBACE,GAEE,CAAC,GAAU,KAAe,SAAyC,EACvE,GAAG,EACL,EAAE,GACI,CAAC,GAAQ,KAAa,EAAiC,CAAC,CAAC,GAEzD,IAAe,GAAa,GAAmB,MAAmB;EAGtE,AAFA,GAAa,OAAU;GAAC,GAAG;IAAO,IAAY;EAAK,EAAE,GAErD,GAAW,MAAS;GAClB,IAAI,CAAC,EAAK,IAAY,OAAO;GAC7B,IAAM,IAAO,EAAC,GAAG,EAAI;GAErB,OADA,OAAO,EAAK,IACL;EACT,CAAC;CACH,GAAG,CAAC,CAAC,GAEC,IAAW,GAAa,GAAmB,MAAyB;EACxE,GAAW,MAAS;GAClB,IAAI,MAAU,MAAM;IAClB,IAAM,IAAO,EAAC,GAAG,EAAI;IAErB,OADA,OAAO,EAAK,IACL;GACT;GACA,OAAO;IAAC,GAAG;KAAO,IAAY;GAAK;EACrC,CAAC;CACH,GAAG,CAAC,CAAC,GAEC,IAAe,GAClB,MAAuB;EAEtB,AADA,EAAE,eAAe,GACjB,EAAY;GAAC;GAAI;EAAQ,CAAC;CAC5B,GACA;EAAC;EAAI;EAAU;CAAW,CAC5B,GAEM,IAAiC;EACrC;EACA;EACA;EACA;EACA,UAAU;CACZ;CAEA,OACE,kBAAC,EAAY,UAAb;EAAsB,OAAO;YAC3B,kBAAC,QAAD;GACE,UAAU;GACV,WAAW,EAAG,uBAAuB,CAAS;GAC9C,gBAAc;aAHhB,CAKG,EAAQ,KAAK,GAAM,MAClB,kBAAC,GAAD;IAAgB,UAAU;IAAM,YAAY;GAAW,GAA5C,CAA4C,CACxD,GACD,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;cAET;GACK,CAAA,CACJ;;CACc,CAAA;AAE1B"}
+{"version":3,"file":"form.component.js","names":[],"sources":["../../../src/cards/form/form.component.tsx"],"sourcesContent":["import React, {useState, useCallback, useRef, useEffect} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport {FormContext, type FormContextValue} from \"./form.context\";\nimport type {FormAction, PiFormEvents, PiFormProps} from \"./form.types\";\n\nexport const FormComponent = (\n  props: PiCardProps<PiFormProps, PiFormEvents>,\n): React.ReactNode => {\n  const {\n    id,\n    content = [],\n    initialValues = {},\n    submitLabel = \"Submit\",\n    hideSubmit = false,\n    className,\n    cardName,\n    onSubmitted,\n    onCancelled,\n    onAbandoned,\n  } = props;\n\n  const [formData, setFormData] = useState<Record<string, unknown>>(() => ({\n    ...initialValues,\n  }));\n  const [errors, setErrors] = useState<Record<string, string>>({});\n\n  // Tracks whether the form reached a \"final\" state (submitted or\n  // explicitly cancelled) so the unmount effect below can tell the\n  // difference between that and being torn down some other way (e.g. its\n  // parent pi/dialog was dismissed) — the latter fires `onAbandoned`.\n  const finalizedRef = useRef(false);\n  // Mirrors state in refs so the unmount effect (which only runs once) can\n  // read the latest values without re-subscribing on every keystroke.\n  const idRef = useRef(id);\n  idRef.current = id;\n  const formDataRef = useRef(formData);\n  formDataRef.current = formData;\n  const onAbandonedRef = useRef(onAbandoned);\n  onAbandonedRef.current = onAbandoned;\n\n  useEffect(() => {\n    return () => {\n      if (!finalizedRef.current) {\n        onAbandonedRef.current({id: idRef.current, formData: formDataRef.current});\n      }\n    };\n    // Intentionally run only on mount/unmount.\n     \n  }, []);\n\n  const handleChange = useCallback((fieldName: string, value: unknown) => {\n    setFormData((prev) => ({...prev, [fieldName]: value}));\n    // Clear validation error when the user modifies the field\n    setErrors((prev) => {\n      if (!prev[fieldName]) return prev;\n      const next = {...prev};\n      delete next[fieldName];\n      return next;\n    });\n  }, []);\n\n  const setError = useCallback((fieldName: string, error: string | null) => {\n    setErrors((prev) => {\n      if (error === null) {\n        const next = {...prev};\n        delete next[fieldName];\n        return next;\n      }\n      return {...prev, [fieldName]: error};\n    });\n  }, []);\n\n  const doSubmit = useCallback(() => {\n    finalizedRef.current = true;\n    onSubmitted({id, formData});\n  }, [id, formData, onSubmitted]);\n\n  const doCancel = useCallback(() => {\n    finalizedRef.current = true;\n    onCancelled({id, formData});\n  }, [id, formData, onCancelled]);\n\n  const handleSubmit = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault();\n      doSubmit();\n    },\n    [doSubmit],\n  );\n\n  // Single entry point for any control nested in the form's content to\n  // trigger a top-level form action (Button's `formAction`, a field's\n  // `submitOnEnter`, etc.) — keeps all form-bindable controls consistent.\n  const requestAction = useCallback(\n    (action: FormAction) => {\n      if (action === \"submit\") {\n        doSubmit();\n      } else {\n        doCancel();\n      }\n    },\n    [doSubmit, doCancel],\n  );\n\n  const contextValue: FormContextValue = {\n    formData,\n    errors,\n    handleChange,\n    setError,\n    requestAction,\n    isInForm: true,\n  };\n\n  return (\n    <FormContext.Provider value={contextValue}>\n      <form\n        onSubmit={handleSubmit}\n        className={cn(\"flex flex-col gap-4\", className)}\n        data-pihanga={cardName}\n      >\n        {content.map((cref, idx) => (\n          <Card key={idx} cardName={cref} parentCard={cardName} />\n        ))}\n        {!hideSubmit && (\n          <button\n            type=\"submit\"\n            className=\"inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\"\n          >\n            {submitLabel}\n          </button>\n        )}\n      </form>\n    </FormContext.Provider>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,OACA,aAAU,CAAC,GACX,mBAAgB,CAAC,GACjB,iBAAc,UACd,gBAAa,IACb,cACA,aACA,gBACA,gBACA,mBACE,GAEE,CAAC,GAAU,KAAe,SAAyC,EACvE,GAAG,EACL,EAAE,GACI,CAAC,GAAQ,KAAa,EAAiC,CAAC,CAAC,GAMzD,IAAe,EAAO,EAAK,GAG3B,IAAQ,EAAO,CAAE;CACvB,EAAM,UAAU;CAChB,IAAM,IAAc,EAAO,CAAQ;CACnC,EAAY,UAAU;CACtB,IAAM,IAAiB,EAAO,CAAW;CAGzC,AAFA,EAAe,UAAU,GAEzB,cACe;EACX,AAAK,EAAa,WAChB,EAAe,QAAQ;GAAC,IAAI,EAAM;GAAS,UAAU,EAAY;EAAO,CAAC;CAE7E,GAGC,CAAC,CAAC;CAEL,IAAM,IAAe,GAAa,GAAmB,MAAmB;EAGtE,AAFA,GAAa,OAAU;GAAC,GAAG;IAAO,IAAY;EAAK,EAAE,GAErD,GAAW,MAAS;GAClB,IAAI,CAAC,EAAK,IAAY,OAAO;GAC7B,IAAM,IAAO,EAAC,GAAG,EAAI;GAErB,OADA,OAAO,EAAK,IACL;EACT,CAAC;CACH,GAAG,CAAC,CAAC,GAEC,IAAW,GAAa,GAAmB,MAAyB;EACxE,GAAW,MAAS;GAClB,IAAI,MAAU,MAAM;IAClB,IAAM,IAAO,EAAC,GAAG,EAAI;IAErB,OADA,OAAO,EAAK,IACL;GACT;GACA,OAAO;IAAC,GAAG;KAAO,IAAY;GAAK;EACrC,CAAC;CACH,GAAG,CAAC,CAAC,GAEC,IAAW,QAAkB;EAEjC,AADA,EAAa,UAAU,IACvB,EAAY;GAAC;GAAI;EAAQ,CAAC;CAC5B,GAAG;EAAC;EAAI;EAAU;CAAW,CAAC,GAExB,IAAW,QAAkB;EAEjC,AADA,EAAa,UAAU,IACvB,EAAY;GAAC;GAAI;EAAQ,CAAC;CAC5B,GAAG;EAAC;EAAI;EAAU;CAAW,CAAC,GAExB,IAAe,GAClB,MAAuB;EAEtB,AADA,EAAE,eAAe,GACjB,EAAS;CACX,GACA,CAAC,CAAQ,CACX,GAgBM,IAAiC;EACrC;EACA;EACA;EACA;EACA,eAhBoB,GACnB,MAAuB;GACtB,AAAI,MAAW,WACb,EAAS,IAET,EAAS;EAEb,GACA,CAAC,GAAU,CAAQ,CAQnB;EACA,UAAU;CACZ;CAEA,OACE,kBAAC,EAAY,UAAb;EAAsB,OAAO;YAC3B,kBAAC,QAAD;GACE,UAAU;GACV,WAAW,EAAG,uBAAuB,CAAS;GAC9C,gBAAc;aAHhB,CAKG,EAAQ,KAAK,GAAM,MAClB,kBAAC,GAAD;IAAgB,UAAU;IAAM,YAAY;GAAW,GAA5C,CAA4C,CACxD,GACA,CAAC,KACA,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;cAET;GACK,CAAA,CAEN;;CACc,CAAA;AAE1B"}

package/cards/form/form.context.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { FormAction } from './form.types';
 /**
  * Shape of the data provided by FormContext.
  * When inside a <Form> card, isInForm is true and all fields are populated.
@@ -9,6 +10,16 @@ export interface FormContextValue {
     errors: Record<string, string>;
     handleChange: (fieldName: string, value: unknown) => void;
     setError: (fieldName: string, error: string | null) => void;
+    /**
+     * Call from within form content to request that the enclosing Form
+     * perform a top-level action:
+     * - `"submit"` — same as pressing the form's native submit button; fires
+     *   `onSubmitted`. Used by `Button` (`formAction: "submit"`) and by
+     *   form-bindable fields' `submitOnEnter` prop.
+     * - `"cancel"` — fires `onCancelled` without submitting or resetting the
+     *   form's field values. Used by `Button` (`formAction: "cancel"`).
+     */
+    requestAction: (action: FormAction) => void;
     isInForm: boolean;
 }
 export declare const FormContext: React.Context<FormContextValue | null>;

package/cards/form/form.context.js

@@ -5,6 +5,7 @@ var n = {
 	errors: {},
 	handleChange: () => {},
 	setError: () => {},
+	requestAction: () => {},
 	isInForm: !1
 }, r = e.createContext(null), i = () => t(r) ?? n;
 //#endregion

package/cards/form/form.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.context.js","names":[],"sources":["../../../src/cards/form/form.context.tsx"],"sourcesContent":["import React, {useContext} from \"react\";\n\n/**\n * Shape of the data provided by FormContext.\n * When inside a <Form> card, isInForm is true and all fields are populated.\n * When outside (fallback), isInForm is false.\n */\nexport interface FormContextValue {\n  formData: Record<string, unknown>;\n  errors: Record<string, string>;\n  handleChange: (fieldName: string, value: unknown) => void;\n  setError: (fieldName: string, error: string | null) => void;\n  isInForm: boolean;\n}\n\nconst FALLBACK_CONTEXT: FormContextValue = {\n  formData: {},\n  errors: {},\n  handleChange: () => {},\n  setError: () => {},\n  isInForm: false,\n};\n\nexport const FormContext = React.createContext<FormContextValue | null>(null);\n\n/**\n * Hook that reads the nearest FormContext.\n * Returns a fallback (isInForm=false) when called outside a <Form> card.\n *\n * Usage in field components:\n *   const form = useFormContext();\n *   const value = form.isInForm && name ? form.formData[name] ?? '' : propValue;\n */\nexport const useFormContext = (): FormContextValue => {\n  const ctx = useContext(FormContext);\n  return ctx ?? FALLBACK_CONTEXT;\n};\n"],"mappings":";;AAeA,IAAM,IAAqC;CACzC,UAAU,CAAC;CACX,QAAQ,CAAC;CACT,oBAAoB,CAAC;CACrB,gBAAgB,CAAC;CACjB,UAAU;AACZ,GAEa,IAAc,EAAM,cAAuC,IAAI,GAU/D,UACC,EAAW,CAChB,KAAO"}
+{"version":3,"file":"form.context.js","names":[],"sources":["../../../src/cards/form/form.context.tsx"],"sourcesContent":["import React, {useContext} from \"react\";\nimport type {FormAction} from \"./form.types\";\n\n/**\n * Shape of the data provided by FormContext.\n * When inside a <Form> card, isInForm is true and all fields are populated.\n * When outside (fallback), isInForm is false.\n */\nexport interface FormContextValue {\n  formData: Record<string, unknown>;\n  errors: Record<string, string>;\n  handleChange: (fieldName: string, value: unknown) => void;\n  setError: (fieldName: string, error: string | null) => void;\n  /**\n   * Call from within form content to request that the enclosing Form\n   * perform a top-level action:\n   * - `\"submit\"` — same as pressing the form's native submit button; fires\n   *   `onSubmitted`. Used by `Button` (`formAction: \"submit\"`) and by\n   *   form-bindable fields' `submitOnEnter` prop.\n   * - `\"cancel\"` — fires `onCancelled` without submitting or resetting the\n   *   form's field values. Used by `Button` (`formAction: \"cancel\"`).\n   */\n  requestAction: (action: FormAction) => void;\n  isInForm: boolean;\n}\n\nconst FALLBACK_CONTEXT: FormContextValue = {\n  formData: {},\n  errors: {},\n  handleChange: () => {},\n  setError: () => {},\n  requestAction: () => {},\n  isInForm: false,\n};\n\nexport const FormContext = React.createContext<FormContextValue | null>(null);\n\n/**\n * Hook that reads the nearest FormContext.\n * Returns a fallback (isInForm=false) when called outside a <Form> card.\n *\n * Usage in field components:\n *   const form = useFormContext();\n *   const value = form.isInForm && name ? form.formData[name] ?? '' : propValue;\n */\nexport const useFormContext = (): FormContextValue => {\n  const ctx = useContext(FormContext);\n  return ctx ?? FALLBACK_CONTEXT;\n};\n"],"mappings":";;AA0BA,IAAM,IAAqC;CACzC,UAAU,CAAC;CACX,QAAQ,CAAC;CACT,oBAAoB,CAAC;CACrB,gBAAgB,CAAC;CACjB,qBAAqB,CAAC;CACtB,UAAU;AACZ,GAEa,IAAc,EAAM,cAAuC,IAAI,GAU/D,UACC,EAAW,CAChB,KAAO"}

package/cards/form/form.types.d.ts

@@ -3,6 +3,8 @@ export declare const PI_FORM_CARD = "pi/form";
 export declare const Form: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiFormProps, S, PiFormEvents>) => import('@pihanga2/core').PiCardDef;
 export declare const PI_FORM_ACTION: {
     SUBMITTED: string;
+    CANCELLED: string;
+    ABANDONED: string;
 };
 export declare const onFormSubmitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
@@ -11,6 +13,60 @@ export declare const onFormSubmitted: <S extends import('@pihanga2/core').ReduxS
 export declare const onPiFormSubmitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiFormSubmittedEvent>) => void;
+/**
+ * Fires when a control inside the form's content explicitly requests
+ * cancellation — see `FormContext.requestAction("cancel")` (wired up
+ * automatically for any `Button` card with `formAction: "cancel"`).
+ * Does not submit the form and does not reset its field values.
+ */
+export declare const onFormCancelled: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiFormCancelledEvent>) => void;
+/**
+ * Fires automatically when the Form card is removed from the screen
+ * (unmounted) *without* having been submitted or explicitly cancelled first
+ * — e.g. a parent `pi/dialog` is dismissed via the X button, Escape, or an
+ * outside click while the form is still open. Use this to clean up any
+ * related state (drafts, optimistic UI, etc.) regardless of how the host
+ * container went away.
+ *
+ * Never fires after `onSubmitted` or `onCancelled` for the same form
+ * instance.
+ */
+export declare const onFormAbandoned: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiFormAbandonedEvent>) => void;
+/**
+ * Shared props for any card that binds a single value to a `pi/form`'s
+ * state (text inputs, toggles, selects, etc.).
+ *
+ * All form-bindable field cards (`pi/input`, `pi/text-field`,
+ * `pi/text-area`, `pi/switch`, `pi/checkbox`, `pi/toggle-group`,
+ * `pi/select`, …) extend this so the binding contract stays identical
+ * everywhere: set `name` to read/write the field via `FormContext` when
+ * rendered inside a `pi/form`; omit it (or render outside a form) to fall
+ * back to the card's own standalone `value`/`checked` prop + `onChanged`
+ * event.
+ */
+export type FormFieldProps = {
+    /**
+     * Field name used to bind to FormContext when inside a pi/form card.
+     * When provided the component reads its value from form state and writes
+     * back via form.handleChange.
+     */
+    name?: string;
+};
+/**
+ * Actions a control nested inside a `pi/form` can request via
+ * `FormContext.requestAction()` — currently used by `Button`'s
+ * `formAction` prop, and by form-bindable fields' `submitOnEnter` prop.
+ *
+ * - `"submit"` — triggers the form's real submit flow (same as pressing its
+ *   native submit button), which fires `onSubmitted`.
+ * - `"cancel"` — fires `onCancelled` without submitting or resetting the
+ *   form.
+ */
+export type FormAction = "submit" | "cancel";
 export type PiFormProps = {
     /**
      * Optional id passed through to events for identification.
@@ -36,12 +92,31 @@ export type PiFormProps = {
      * Additional CSS classes for the <form> element.
      */
     className?: string;
+    /**
+     * When true, the default footer "Submit" button is not rendered.
+     * Use this when the form's own content already provides a way to submit
+     * (e.g. a `Button` with `formAction: "submit"`).
+     * @default false
+     */
+    hideSubmit?: boolean;
 };
 export type PiFormSubmittedEvent = {
     id?: string;
     /** Snapshot of form state at the time of submission. */
     formData: Record<string, unknown>;
 };
+export type PiFormCancelledEvent = {
+    id?: string;
+    /** Snapshot of form state at the time of cancellation. */
+    formData: Record<string, unknown>;
+};
+export type PiFormAbandonedEvent = {
+    id?: string;
+    /** Snapshot of form state at the time the form was removed. */
+    formData: Record<string, unknown>;
+};
 export type PiFormEvents = {
     onSubmitted: PiFormSubmittedEvent;
+    onCancelled: PiFormCancelledEvent;
+    onAbandoned: PiFormAbandonedEvent;
 };

package/cards/form/form.types.js

@@ -1,7 +1,11 @@
 import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
 //#region src/cards/form/form.types.ts
-var r = "pi/form", i = e(r), a = n(r, ["submitted"]), o = t(a.SUBMITTED), s = o;
+var r = "pi/form", i = e(r), a = n(r, [
+	"submitted",
+	"cancelled",
+	"abandoned"
+]), o = t(a.SUBMITTED), s = o, c = t(a.CANCELLED), l = t(a.ABANDONED);
 //#endregion
-export { i as Form, a as PI_FORM_ACTION, r as PI_FORM_CARD, o as onFormSubmitted, s as onPiFormSubmitted };
+export { i as Form, a as PI_FORM_ACTION, r as PI_FORM_CARD, l as onFormAbandoned, c as onFormCancelled, o as onFormSubmitted, s as onPiFormSubmitted };
 
 //# sourceMappingURL=form.types.js.map