@pihanga2/shadcn 0.2.20 → 0.2.22

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"}