@pihanga2/shadcn 0.2.1 → 0.2.3

package/cards/dialog/dialog.component.js

@@ -1,12 +1,12 @@
 import { Button as e } from "../../components/ui/button.js";
 import { Dialog as t, DialogBody as n, DialogContent as r, DialogDescription as i, DialogFooter as a, DialogHeader as o, DialogTitle as s, DialogTrigger as c } from "../../components/ui/dialog.js";
-import { Card as l } from "@pihanga2/core";
-import u from "react";
+import l from "react";
+import { Card as u } from "@pihanga2/core";
 import { jsx as d, jsxs as f } from "react/jsx-runtime";
 //#region src/cards/dialog/dialog.component.tsx
 var p = (p) => {
-	let { id: m, trigger: h, content: g, title: _, description: v, open: y, size: b, variant: x, desktopVariant: S, mobileVariant: C, dismissible: w, hideClose: T, className: E, footer: D, footerCloseButtonText: O, cardName: k, onOpened: A, onClosed: j, onOpenChanged: M } = p, N = O === void 0 ? "Close" : O, [P, F] = u.useState(!1), I = y ?? P, L = u.useRef(y);
-	u.useEffect(() => {
+	let { id: m, trigger: h, content: g, title: _, description: v, open: y, size: b, variant: x, desktopVariant: S, mobileVariant: C, dismissible: w, hideClose: T, className: E, footer: D, footerCloseButtonText: O, cardName: k, onOpened: A, onClosed: j, onOpenChanged: M } = p, N = O === void 0 ? "Close" : O, [P, F] = l.useState(!1), I = y ?? P, L = l.useRef(y);
+	l.useEffect(() => {
 		L.current === !0 && y === !1 && I === !1 && j({
 			id: m,
 			reason: "programmatic"
@@ -30,7 +30,7 @@ var p = (p) => {
 		return h ? /* @__PURE__ */ d("span", {
 			className: "inline-flex",
 			"data-pihanga-trigger-wrapper": !0,
-			children: /* @__PURE__ */ d(l, {
+			children: /* @__PURE__ */ d(u, {
 				cardName: h,
 				parentCard: k
 			})
@@ -42,7 +42,7 @@ var p = (p) => {
 	function V() {
 		return D ? /* @__PURE__ */ d(a, {
 			className: "bg-muted/50",
-			children: /* @__PURE__ */ d(l, {
+			children: /* @__PURE__ */ d(u, {
 				cardName: D,
 				parentCard: k
 			})
@@ -74,7 +74,7 @@ var p = (p) => {
 			className: E,
 			children: [
 				B(),
-				/* @__PURE__ */ d(n, { children: /* @__PURE__ */ d(l, {
+				/* @__PURE__ */ d(n, { children: /* @__PURE__ */ d(u, {
 					cardName: g,
 					parentCard: k
 				}) }),

package/cards/dropDownMenu/drop-down.component.js

@@ -1,11 +1,11 @@
 import { DropdownOpenContext as e } from "./dropdown-context.js";
 import { DropdownMenu as t, DropdownMenuCheckboxItem as n, DropdownMenuContent as r, DropdownMenuGroup as i, DropdownMenuItem as a, DropdownMenuLabel as o, DropdownMenuRadioGroup as s, DropdownMenuRadioItem as c, DropdownMenuSeparator as l, DropdownMenuShortcut as u, DropdownMenuSub as d, DropdownMenuSubContent as f, DropdownMenuSubTrigger as p, DropdownMenuTrigger as m } from "./dropdown-menu.ui.js";
-import { Card as h } from "@pihanga2/core";
-import g from "react";
+import h from "react";
+import { Card as g } from "@pihanga2/core";
 import { Fragment as _, jsx as v, jsxs as y } from "react/jsx-runtime";
 //#region src/cards/dropDownMenu/drop-down.component.tsx
 var b = (b) => {
-	let { trigger: x, menuLabel: S, menuAlign: C, items: w, cardName: T, checkboxCloseDelayMs: E } = b, [D, O] = g.useState(!1), k = g.useRef(null), [A, j] = g.useState({}), M = g.useCallback((e, t) => [...e, t].join("::"), []), N = g.useCallback((e, t = []) => {
+	let { trigger: x, menuLabel: S, menuAlign: C, items: w, cardName: T, checkboxCloseDelayMs: E } = b, [D, O] = h.useState(!1), k = h.useRef(null), [A, j] = h.useState({}), M = h.useCallback((e, t) => [...e, t].join("::"), []), N = h.useCallback((e, t = []) => {
 		let n = {};
 		if (!e?.length) return n;
 		for (let r of e) if (!(!r || typeof r == "string")) {
@@ -36,9 +36,9 @@ var b = (b) => {
 			k.current = null, O(!1);
 		}, e);
 	}
-	g.useEffect(() => () => {
+	h.useEffect(() => () => {
 		P();
-	}, []), g.useEffect(() => {
+	}, []), h.useEffect(() => {
 		D && j(N(w));
 	}, [
 		D,
@@ -51,7 +51,7 @@ var b = (b) => {
 			"data-pihanga-trigger-wrapper": !0,
 			children: /* @__PURE__ */ v(e.Provider, {
 				value: D,
-				children: /* @__PURE__ */ v(h, {
+				children: /* @__PURE__ */ v(g, {
 					cardName: x,
 					parentCard: T
 				})
@@ -62,7 +62,7 @@ var b = (b) => {
 		return S ? /* @__PURE__ */ y(_, { children: [/* @__PURE__ */ v(o, { children: S }), /* @__PURE__ */ v(l, {})] }) : null;
 	}
 	function z(e) {
-		return typeof e == "string" ? e : /* @__PURE__ */ v(h, {
+		return typeof e == "string" ? e : /* @__PURE__ */ v(g, {
 			cardName: e,
 			parentCard: T
 		});

package/cards/field/field.component.js

@@ -1,12 +1,12 @@
 import { cn as e } from "../../lib/utils.js";
 import { useFormContext as t } from "../form/form.context.js";
 import { Field as n, FieldDescription as r, FieldError as i, FieldLabel as a } from "../../components/ui/field.js";
-import { Card as o } from "@pihanga2/core";
-import s, { useMemo as c } from "react";
+import o, { useMemo as s } from "react";
+import { Card as c } from "@pihanga2/core";
 import { jsx as l, jsxs as u } from "react/jsx-runtime";
 //#region src/cards/field/field.component.tsx
 var d = (d) => {
-	let { label: f, fieldCard: p, name: m, description: h, error: g, className: _, cardName: v } = d, y = t(), b = y.isInForm && m ? y.errors[m] : g, x = s.useId(), S = !!b, C = c(() => ({
+	let { label: f, fieldCard: p, name: m, description: h, error: g, className: _, cardName: v } = d, y = t(), b = y.isInForm && m ? y.errors[m] : g, x = o.useId(), S = !!b, C = s(() => ({
 		cardName: p,
 		parentCard: v,
 		id: x,
@@ -26,7 +26,7 @@ var d = (d) => {
 				htmlFor: x,
 				children: f
 			}),
-			/* @__PURE__ */ l(o, { ...C }),
+			/* @__PURE__ */ l(c, { ...C }),
 			h && /* @__PURE__ */ l(r, { children: h }),
 			/* @__PURE__ */ l(i, { children: b })
 		]

package/cards/field/field.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.types.js","names":[],"sources":["../../../src/cards/field/field.types.ts"],"sourcesContent":["import {createCardDeclaration, PiCardRef} from \"@pihanga2/core\";\n\nexport const PI_FIELD_CARD = \"pi/field\";\n\nexport const Field = createCardDeclaration<PiFieldProps>(PI_FIELD_CARD);\n\nexport type PiFieldProps = {\n  /** Visible label rendered above the control. */\n  label: string;\n\n  /**\n   * The Pihanga card reference for the plain control to render\n   * (e.g. pi/text-field, pi/select, pi/checkbox, …).\n   *\n   * The field card will forward an `id` prop and an `invalid` boolean to the\n   * inner card via Pihanga's standard prop-passing mechanism so the control\n   * can wire up accessibility attributes without needing its own label logic.\n   */\n  fieldCard: PiCardRef;\n\n  /**\n   * Field name — when provided the card reads the current error from\n   * FormContext (when inside a pi/form) to decide whether to show an error.\n   */\n  name?: string;\n\n  /** Secondary help text rendered below the control. */\n  description?: string;\n\n  /**\n   * Static error message.  Overridden by the form-context error when `name`\n   * is provided and the card is inside a pi/form.\n   */\n  error?: string;\n\n  /** Additional CSS classes applied to the outer Field wrapper. */\n  className?: string;\n};\n"],"mappings":";;AAEA,IAAa,IAAgB,YAEhB,IAAQ,EAAoC,CAAa"}
+{"version":3,"file":"field.types.js","names":[],"sources":["../../../src/cards/field/field.types.ts"],"sourcesContent":["import {createCardDeclaration, type PiCardRef} from \"@pihanga2/core\";\n\nexport const PI_FIELD_CARD = \"pi/field\";\n\nexport const Field = createCardDeclaration<PiFieldProps>(PI_FIELD_CARD);\n\nexport type PiFieldProps = {\n  /** Visible label rendered above the control. */\n  label: string;\n\n  /**\n   * The Pihanga card reference for the plain control to render\n   * (e.g. pi/text-field, pi/select, pi/checkbox, …).\n   *\n   * The field card will forward an `id` prop and an `invalid` boolean to the\n   * inner card via Pihanga's standard prop-passing mechanism so the control\n   * can wire up accessibility attributes without needing its own label logic.\n   */\n  fieldCard: PiCardRef;\n\n  /**\n   * Field name — when provided the card reads the current error from\n   * FormContext (when inside a pi/form) to decide whether to show an error.\n   */\n  name?: string;\n\n  /** Secondary help text rendered below the control. */\n  description?: string;\n\n  /**\n   * Static error message.  Overridden by the form-context error when `name`\n   * is provided and the card is inside a pi/form.\n   */\n  error?: string;\n\n  /** Additional CSS classes applied to the outer Field wrapper. */\n  className?: string;\n};\n"],"mappings":";;AAEA,IAAa,IAAgB,YAEhB,IAAQ,EAAoC,CAAa"}

package/cards/fileDrop/fileDrop.component.js

@@ -0,0 +1,90 @@
+import { DEF_FILE_DROP_FILE_TYPES as e } from "./fileDrop.types.js";
+/* empty css         */
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+import { FileUploader as r } from "react-drag-drop-files";
+//#region src/cards/fileDrop/fileDrop.component.tsx
+var i = Symbol.for("pihanga.card.FileDrop.LastDropped"), a = globalThis;
+function o(e) {
+	let t = a[i] ??= null;
+	return t?.name === e ? t.file : null;
+}
+function s(e) {
+	a[i] = e;
+}
+function c() {
+	a[i] = null;
+}
+var l = (i) => {
+	let { fileTypes: a = e, title: o = "Click or drop a file right here", description: l, showProgress: u = !1, progress: d = 0, progressStyle: f = {}, dropStyle: p = {}, onFileDropped: m, onError: h, cardName: g, className: _, _cls: v } = i;
+	function y(e) {
+		let t = Array.isArray(e) ? e[0] : e;
+		if (!t) return;
+		let { name: n, size: r, type: i } = t;
+		s({
+			name: n,
+			file: t
+		}), m({
+			name: n,
+			size: r,
+			type: i
+		}), setTimeout(c, 2e3);
+	}
+	function b(e) {
+		h({ error: String(e) });
+	}
+	function x() {
+		let e = `${d}%`, r = `${e} Complete`, i = {
+			width: "50%",
+			...f
+		};
+		return /* @__PURE__ */ n("div", {
+			className: "pi-progress",
+			children: [/* @__PURE__ */ t("div", {
+				className: "pi-progress-label",
+				children: e
+			}), /* @__PURE__ */ t("div", {
+				className: "pi-progress-container",
+				style: i,
+				children: /* @__PURE__ */ t("div", {
+					className: "pi-progress-bar",
+					style: { width: e },
+					role: "progressbar",
+					"aria-label": r
+				})
+			})]
+		});
+	}
+	function S() {
+		return /* @__PURE__ */ n("div", {
+			className: "dropzone-msg",
+			style: p,
+			children: [o && /* @__PURE__ */ t("h3", {
+				className: "dropzone-msg-title",
+				children: o
+			}), l && /* @__PURE__ */ t("span", {
+				className: "dropzone-msg-desc",
+				children: l
+			})]
+		});
+	}
+	function C() {
+		return /* @__PURE__ */ t(r, {
+			handleChange: y,
+			onTypeError: b,
+			name: "file",
+			types: a,
+			hoverTitle: " ",
+			children: S()
+		});
+	}
+	return /* @__PURE__ */ t("div", {
+		className: v("root", _),
+		"data-pihanga": g,
+		children: u ? x() : C()
+	});
+};
+//#endregion
+export { l as FileDropComponent, o as get_last_dropped };
+
+//# sourceMappingURL=fileDrop.component.js.map

package/cards/fileDrop/fileDrop.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileDrop.component.js","names":[],"sources":["../../../src/cards/fileDrop/fileDrop.component.tsx"],"sourcesContent":["import React from \"react\";\nimport type {PiCardProps} from \"@pihanga2/core\";\nimport {FileUploader} from \"react-drag-drop-files\";\nimport {\n  DEF_FILE_DROP_FILE_TYPES,\n  type FileDropEvents,\n  type FileDropProps,\n} from \"./fileDrop.types\";\nimport \"./fileDrop.css\";\n\ntype LastDropped = {name: string; file: File};\n\nconst KEY = Symbol.for(\"pihanga.card.FileDrop.LastDropped\");\n\nconst globalForCache = globalThis as unknown as Record<\n  symbol,\n  LastDropped | null | undefined\n>;\n\nexport function get_last_dropped(name: string): File | null {\n  const slot = (globalForCache[KEY] ??= null);\n  if (slot?.name === name) {\n    return slot.file;\n  }\n  return null;\n}\n\nfunction setLastDropped(value: LastDropped): void {\n  globalForCache[KEY] = value;\n}\n\nfunction clearLastDropped(): void {\n  globalForCache[KEY] = null;\n}\n\nexport const FileDropComponent = (\n  props: PiCardProps<FileDropProps, FileDropEvents>,\n): React.ReactNode => {\n  const {\n    fileTypes = DEF_FILE_DROP_FILE_TYPES,\n    title = \"Click or drop a file right here\",\n    description,\n    showProgress = false,\n    progress = 0,\n    progressStyle = {},\n    dropStyle = {},\n    onFileDropped,\n    onError,\n    cardName,\n    className,\n    _cls,\n  } = props;\n\n  function handleChange(file: File | File[]): void {\n    const f = Array.isArray(file) ? file[0] : file;\n    if (!f) return;\n    const {name, size, type} = f;\n    setLastDropped({name, file: f});\n    onFileDropped({name, size, type});\n    // clean up reference to File in a few sec to avoid dangling reference\n    setTimeout(clearLastDropped, 2000);\n  }\n\n  function handleTypeError(err: unknown): void {\n    onError({error: String(err)});\n  }\n\n  function renderProgress(): React.ReactNode {\n    const label = `${progress}%`;\n    const msg = `${label} Complete`;\n    const containerStyle = {width: \"50%\", ...progressStyle};\n    return (\n      <div className=\"pi-progress\">\n        <div className=\"pi-progress-label\">{label}</div>\n        <div\n          className=\"pi-progress-container\"\n          style={containerStyle as React.CSSProperties}\n        >\n          <div\n            className=\"pi-progress-bar\"\n            style={{width: label}}\n            role=\"progressbar\"\n            aria-label={msg}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  function renderDropZone(): React.ReactElement {\n    return (\n      <div className=\"dropzone-msg\" style={dropStyle as React.CSSProperties}>\n        {title && <h3 className=\"dropzone-msg-title\">{title}</h3>}\n        {description && (\n          <span className=\"dropzone-msg-desc\">{description}</span>\n        )}\n      </div>\n    );\n  }\n\n  function renderFileUploader(): React.ReactNode {\n    return (\n      <FileUploader\n        handleChange={handleChange}\n        onTypeError={handleTypeError}\n        name=\"file\"\n        types={fileTypes}\n        hoverTitle=\" \"\n      >\n        {renderDropZone()}\n      </FileUploader>\n    );\n  }\n\n  const cn = _cls(\"root\", className);\n  return (\n    <div className={cn} data-pihanga={cardName}>\n      {showProgress ? renderProgress() : renderFileUploader()}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAYA,IAAM,IAAM,OAAO,IAAI,mCAAmC,GAEpD,IAAiB;AAKvB,SAAgB,EAAiB,GAA2B;CAC1D,IAAM,IAAQ,EAAe,OAAS;CAItC,OAHI,GAAM,SAAS,IACV,EAAK,OAEP;AACT;AAEA,SAAS,EAAe,GAA0B;CAChD,EAAe,KAAO;AACxB;AAEA,SAAS,IAAyB;CAChC,EAAe,KAAO;AACxB;AAEA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,eAAY,GACZ,WAAQ,mCACR,gBACA,kBAAe,IACf,cAAW,GACX,mBAAgB,CAAC,GACjB,eAAY,CAAC,GACb,kBACA,YACA,aACA,cACA,YACE;CAEJ,SAAS,EAAa,GAA2B;EAC/C,IAAM,IAAI,MAAM,QAAQ,CAAI,IAAI,EAAK,KAAK;EAC1C,IAAI,CAAC,GAAG;EACR,IAAM,EAAC,SAAM,SAAM,YAAQ;EAI3B,AAHA,EAAe;GAAC;GAAM,MAAM;EAAC,CAAC,GAC9B,EAAc;GAAC;GAAM;GAAM;EAAI,CAAC,GAEhC,WAAW,GAAkB,GAAI;CACnC;CAEA,SAAS,EAAgB,GAAoB;EAC3C,EAAQ,EAAC,OAAO,OAAO,CAAG,EAAC,CAAC;CAC9B;CAEA,SAAS,IAAkC;EACzC,IAAM,IAAQ,GAAG,EAAS,IACpB,IAAM,GAAG,EAAM,YACf,IAAiB;GAAC,OAAO;GAAO,GAAG;EAAa;EACtD,OACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAqB;GAAW,CAAA,GAC/C,kBAAC,OAAD;IACE,WAAU;IACV,OAAO;cAEP,kBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAC,OAAO,EAAK;KACpB,MAAK;KACL,cAAY;IACb,CAAA;GACE,CAAA,CACF;;CAET;CAEA,SAAS,IAAqC;EAC5C,OACE,kBAAC,OAAD;GAAK,WAAU;GAAe,OAAO;aAArC,CACG,KAAS,kBAAC,MAAD;IAAI,WAAU;cAAsB;GAAU,CAAA,GACvD,KACC,kBAAC,QAAD;IAAM,WAAU;cAAqB;GAAkB,CAAA,CAEtD;;CAET;CAEA,SAAS,IAAsC;EAC7C,OACE,kBAAC,GAAD;GACgB;GACd,aAAa;GACb,MAAK;GACL,OAAO;GACP,YAAW;aAEV,EAAe;EACJ,CAAA;CAElB;CAGA,OACE,kBAAC,OAAD;EAAK,WAFI,EAAK,QAAQ,CAEN;EAAI,gBAAc;YAC/B,IAAe,EAAe,IAAI,EAAmB;CACnD,CAAA;AAET"}

package/cards/fileDrop/fileDrop.types.js

@@ -0,0 +1,11 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/fileDrop/fileDrop.types.ts
+var r = "shad/file-drop", i = e(r), a = n(r, ["file_dropped", "error"]), o = t(a.FILE_DROPPED), s = t(a.ERROR), c = [
+	"JPG",
+	"PNG",
+	"GIF"
+];
+//#endregion
+export { c as DEF_FILE_DROP_FILE_TYPES, a as FILE_DROP_ACTION, r as FILE_DROP_CARD, i as FileDrop, s as onFileDropError, o as onFileDropped };
+
+//# sourceMappingURL=fileDrop.types.js.map

package/cards/fileDrop/fileDrop.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileDrop.types.js","names":[],"sources":["../../../src/cards/fileDrop/fileDrop.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const FILE_DROP_CARD = \"shad/file-drop\";\n\nexport const FileDrop = createCardDeclaration<FileDropProps, FileDropEvents>(\n  FILE_DROP_CARD,\n);\n\nexport const FILE_DROP_ACTION = registerActions(FILE_DROP_CARD, [\n  \"file_dropped\",\n  \"error\",\n]);\n\nexport const onFileDropped = createOnAction<FileDroppedEvent>(\n  FILE_DROP_ACTION.FILE_DROPPED,\n);\n\nexport const onFileDropError = createOnAction<FileDropErrorEvent>(\n  FILE_DROP_ACTION.ERROR,\n);\n\nexport type FileDropProps<S = Record<string, unknown>> = {\n  /** Accepted file extensions, e.g. [\"JPG\", \"PNG\", \"PDF\"]. Defaults to [\"JPG\", \"PNG\", \"GIF\"]. */\n  fileTypes?: string[];\n  /** Heading shown inside the drop zone. */\n  title?: string;\n  /** Secondary text shown inside the drop zone. */\n  description?: string;\n  /** When true, shows a progress bar instead of the drop zone. */\n  showProgress?: boolean;\n  /** Inline styles applied to the drop zone wrapper. */\n  dropStyle?: Record<string, unknown>;\n  /** Inline styles applied to the progress bar container. */\n  progressStyle?: Record<string, unknown>;\n  /** Current upload progress (0–100). Only used when `showProgress` is true. */\n  progress?: number;\n\n  style?: S;\n  className?: string;\n};\n\nexport const DEF_FILE_DROP_FILE_TYPES = [\"JPG\", \"PNG\", \"GIF\"];\n\nexport type FileDroppedEvent = {\n  name: string;\n  size: number;\n  type: string;\n};\n\nexport type FileDropErrorEvent = {\n  error: string;\n};\n\nexport type FileDropEvents = {\n  onFileDropped: FileDroppedEvent;\n  onError: FileDropErrorEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAiB,kBAEjB,IAAW,EACtB,CACF,GAEa,IAAmB,EAAgB,GAAgB,CAC9D,gBACA,OACF,CAAC,GAEY,IAAgB,EAC3B,EAAiB,YACnB,GAEa,IAAkB,EAC7B,EAAiB,KACnB,GAsBa,IAA2B;CAAC;CAAO;CAAO;AAAK"}

package/cards/fileDrop/index.js

@@ -0,0 +1,13 @@
+import { DEF_FILE_DROP_FILE_TYPES as e, FILE_DROP_ACTION as t, FILE_DROP_CARD as n, FileDrop as r, onFileDropError as i, onFileDropped as a } from "./fileDrop.types.js";
+import { FileDropComponent as o, get_last_dropped as s } from "./fileDrop.component.js";
+import { actionTypesToEvents as c, registerCardComponent as l } from "@pihanga2/core";
+//#region src/cards/fileDrop/index.ts
+l({
+	name: n,
+	component: o,
+	events: c(t)
+});
+//#endregion
+export { e as DEF_FILE_DROP_FILE_TYPES, t as FILE_DROP_ACTION, n as FILE_DROP_CARD, r as FileDrop, s as get_last_dropped, i as onFileDropError, a as onFileDropped };
+
+//# sourceMappingURL=index.js.map

package/cards/fileDrop/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/fileDrop/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {FileDropComponent} from \"./fileDrop.component\";\nimport {FILE_DROP_ACTION, FILE_DROP_CARD} from \"./fileDrop.types\";\n\nexport * from \"./fileDrop.types\";\nexport {get_last_dropped} from \"./fileDrop.component\";\n\nregisterCardComponent({\n  name: FILE_DROP_CARD,\n  component: FileDropComponent,\n  events: actionTypesToEvents(FILE_DROP_ACTION),\n});\n"],"mappings":";;;;AAQA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAgB;AAC9C,CAAC"}

package/cards/flexGrid/flexGrid.component.js

@@ -1,5 +1,5 @@
-import { Card as e } from "@pihanga2/core";
 import "react";
+import { Card as e } from "@pihanga2/core";
 import t from "clsx";
 import { jsx as n } from "react/jsx-runtime";
 //#region src/cards/flexGrid/flexGrid.component.tsx

package/cards/flexGrid/flexGrid.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"flexGrid.types.js","names":[],"sources":["../../../src/cards/flexGrid/flexGrid.types.ts"],"sourcesContent":["import { createCardDeclaration, PiCardRef } from \"@pihanga2/core\"\n\nexport const FLEX_GRID_CARD = \"flex_grid\"\nexport const FlexGrid = createCardDeclaration<FlexGridProps>(FLEX_GRID_CARD)\n\nexport type FlexGridProps = {\n  cards: { [name: string]: PiCardRef }\n  template: TemplateT\n  height?: string\n  margin?: string\n  overflow?: string\n\n  style?: {\n    root?: React.CSSProperties\n    item?: React.CSSProperties\n  }\n  className?: string\n}\n\n// body {\n//   display: grid;\n//   grid-template-areas:\n//     \"header header header\"\n//     \"nav article ads\"\n//     \"footer footer footer\";\n//   grid-template-rows: 60px 1fr 60px;\n//   grid-template-columns: 20% 1fr 15%;\n//   grid-gap: 10px;\n//   height: 100vh;\n//   margin: 0;\n//   }\n\n// https://css-tricks.com/snippets/css/complete-guide-grid/\nexport type TemplateT = {\n  area?: string[][] // name of card dict\n  rows?: string[] // grid-template-rows (e.g [\"min-content\", \"1fr\",  \"min-content\"])\n  columns?: string[] // grid-template-cols (e.g. [\"1fr\", \"50px\", \"1fr\", \"1fr\"])\n  gap?: string\n}\n"],"mappings":";;AAEA,IAAa,IAAiB,aACjB,IAAW,EAAqC,CAAc"}
+{"version":3,"file":"flexGrid.types.js","names":[],"sources":["../../../src/cards/flexGrid/flexGrid.types.ts"],"sourcesContent":["import {createCardDeclaration, type PiCardRef} from \"@pihanga2/core\";\n\nexport const FLEX_GRID_CARD = \"flex_grid\";\nexport const FlexGrid = createCardDeclaration<FlexGridProps>(FLEX_GRID_CARD);\n\nexport type FlexGridProps = {\n  cards: {[name: string]: PiCardRef};\n  template: TemplateT;\n  height?: string;\n  margin?: string;\n  overflow?: string;\n\n  style?: {\n    root?: React.CSSProperties;\n    item?: React.CSSProperties;\n  };\n  className?: string;\n};\n\n// body {\n//   display: grid;\n//   grid-template-areas:\n//     \"header header header\"\n//     \"nav article ads\"\n//     \"footer footer footer\";\n//   grid-template-rows: 60px 1fr 60px;\n//   grid-template-columns: 20% 1fr 15%;\n//   grid-gap: 10px;\n//   height: 100vh;\n//   margin: 0;\n//   }\n\n// https://css-tricks.com/snippets/css/complete-guide-grid/\nexport type TemplateT = {\n  area?: string[][]; // name of card dict\n  rows?: string[]; // grid-template-rows (e.g [\"min-content\", \"1fr\",  \"min-content\"])\n  columns?: string[]; // grid-template-cols (e.g. [\"1fr\", \"50px\", \"1fr\", \"1fr\"])\n  gap?: string;\n};\n"],"mappings":";;AAEA,IAAa,IAAiB,aACjB,IAAW,EAAqC,CAAc"}

package/cards/form/form.component.js

@@ -1,11 +1,11 @@
 import { cn as e } from "../../lib/utils.js";
 import { FormContext as t } from "./form.context.js";
-import { Card as n } from "@pihanga2/core";
-import { useCallback as r, useState as i } from "react";
+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";
 //#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] = i(() => ({ ...u })), [_, v] = i({}), y = r((e, t) => {
+	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) => ({
 			...n,
 			[e]: t
@@ -14,7 +14,7 @@ var s = (s) => {
 			let n = { ...t };
 			return delete n[e], n;
 		});
-	}, []), b = r((e, t) => {
+	}, []), b = n((e, t) => {
 		v((n) => {
 			if (t === null) {
 				let t = { ...n };
@@ -25,7 +25,7 @@ var s = (s) => {
 				[e]: t
 			};
 		});
-	}, []), x = r((e) => {
+	}, []), x = n((e) => {
 		e.preventDefault(), m({
 			id: c,
 			formData: h
@@ -47,7 +47,7 @@ var s = (s) => {
 			onSubmit: x,
 			className: e("flex flex-col gap-4", f),
 			"data-pihanga": p,
-			children: [l.map((e, t) => /* @__PURE__ */ a(n, {
+			children: [l.map((e, t) => /* @__PURE__ */ a(i, {
 				cardName: e,
 				parentCard: p
 			}, t)), /* @__PURE__ */ a("button", {

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

@@ -4,6 +4,10 @@ export declare const Form: <S extends import('@pihanga2/core').ReduxState>(p: im
 export declare const PI_FORM_ACTION: {
     SUBMITTED: string;
 };
+export declare const onFormSubmitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiFormSubmittedEvent>) => void;
+/** @deprecated Use `onFormSubmitted` instead. */
 export declare const onPiFormSubmitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiFormSubmittedEvent>) => void;

package/cards/form/form.types.js

@@ -1,7 +1,7 @@
 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);
+var r = "pi/form", i = e(r), a = n(r, ["submitted"]), o = t(a.SUBMITTED), s = o;
 //#endregion
-export { i as Form, a as PI_FORM_ACTION, r as PI_FORM_CARD, o as onPiFormSubmitted };
+export { i as Form, a as PI_FORM_ACTION, r as PI_FORM_CARD, o as onFormSubmitted, s as onPiFormSubmitted };
 
 //# sourceMappingURL=form.types.js.map

package/cards/form/form.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.types.js","names":[],"sources":["../../../src/cards/form/form.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_FORM_CARD = \"pi/form\";\n\nexport const Form = createCardDeclaration<PiFormProps, PiFormEvents>(\n  PI_FORM_CARD,\n);\n\nexport const PI_FORM_ACTION = registerActions(PI_FORM_CARD, [\"submitted\"]);\n\nexport const onPiFormSubmitted = createOnAction<PiFormSubmittedEvent>(\n  PI_FORM_ACTION.SUBMITTED,\n);\n\nexport type PiFormProps = {\n  /**\n   * Optional id passed through to events for identification.\n   */\n  id?: string;\n\n  /**\n   * Ordered list of field card refs to render inside the form.\n   * Each card (e.g. TextField, Checkbox, FormSelect) will be rendered\n   * in order and wrapped by a FormContext.Provider so they can read\n   * and write shared form state.\n   */\n  content?: PiCardRef[];\n\n  /**\n   * Initial values for the form fields, keyed by field name.\n   */\n  initialValues?: Record<string, unknown>;\n\n  /**\n   * Label for the submit button.\n   * @default \"Submit\"\n   */\n  submitLabel?: string;\n\n  /**\n   * Additional CSS classes for the <form> element.\n   */\n  className?: string;\n};\n\nexport type PiFormSubmittedEvent = {\n  id?: string;\n  /** Snapshot of form state at the time of submission. */\n  formData: Record<string, unknown>;\n};\n\nexport type PiFormEvents = {\n  onSubmitted: PiFormSubmittedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAe,WAEf,IAAO,EAClB,CACF,GAEa,IAAiB,EAAgB,GAAc,CAAC,WAAW,CAAC,GAE5D,IAAoB,EAC/B,EAAe,SACjB"}
+{"version":3,"file":"form.types.js","names":[],"sources":["../../../src/cards/form/form.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_FORM_CARD = \"pi/form\";\n\nexport const Form = createCardDeclaration<PiFormProps, PiFormEvents>(\n  PI_FORM_CARD,\n);\n\nexport const PI_FORM_ACTION = registerActions(PI_FORM_CARD, [\"submitted\"]);\n\nexport const onFormSubmitted = createOnAction<PiFormSubmittedEvent>(\n  PI_FORM_ACTION.SUBMITTED,\n);\n\n/** @deprecated Use `onFormSubmitted` instead. */\nexport const onPiFormSubmitted = onFormSubmitted;\n\nexport type PiFormProps = {\n  /**\n   * Optional id passed through to events for identification.\n   */\n  id?: string;\n\n  /**\n   * Ordered list of field card refs to render inside the form.\n   * Each card (e.g. TextField, Checkbox, FormSelect) will be rendered\n   * in order and wrapped by a FormContext.Provider so they can read\n   * and write shared form state.\n   */\n  content?: PiCardRef[];\n\n  /**\n   * Initial values for the form fields, keyed by field name.\n   */\n  initialValues?: Record<string, unknown>;\n\n  /**\n   * Label for the submit button.\n   * @default \"Submit\"\n   */\n  submitLabel?: string;\n\n  /**\n   * Additional CSS classes for the <form> element.\n   */\n  className?: string;\n};\n\nexport type PiFormSubmittedEvent = {\n  id?: string;\n  /** Snapshot of form state at the time of submission. */\n  formData: Record<string, unknown>;\n};\n\nexport type PiFormEvents = {\n  onSubmitted: PiFormSubmittedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAe,WAEf,IAAO,EAClB,CACF,GAEa,IAAiB,EAAgB,GAAc,CAAC,WAAW,CAAC,GAE5D,IAAkB,EAC7B,EAAe,SACjB,GAGa,IAAoB"}

package/cards/form/index.js

@@ -1,14 +1,14 @@
 import { FormContext as e, useFormContext as t } from "./form.context.js";
 import { FormComponent as n } from "./form.component.js";
-import { Form as r, PI_FORM_ACTION as i, PI_FORM_CARD as a, onPiFormSubmitted as o } from "./form.types.js";
-import { actionTypesToEvents as s, registerCardComponent as c } from "@pihanga2/core";
+import { Form as r, PI_FORM_ACTION as i, PI_FORM_CARD as a, onFormSubmitted as o, onPiFormSubmitted as s } from "./form.types.js";
+import { actionTypesToEvents as c, registerCardComponent as l } from "@pihanga2/core";
 //#region src/cards/form/index.ts
-c({
+l({
 	name: a,
 	component: n,
-	events: s(i)
+	events: c(i)
 });
 //#endregion
-export { r as Form, e as FormContext, i as PI_FORM_ACTION, a as PI_FORM_CARD, o as onPiFormSubmitted, t as useFormContext };
+export { r as Form, e as FormContext, i as PI_FORM_ACTION, a as PI_FORM_CARD, o as onFormSubmitted, s as onPiFormSubmitted, t as useFormContext };
 
 //# sourceMappingURL=index.js.map

package/cards/framework/framework.component.js

@@ -1,15 +1,15 @@
 import { TooltipProvider as e } from "../../components/ui/tooltip.js";
 import { ThemeProvider as t } from "../../components/theme-provider/theme-provider.component.js";
-import { Card as n } from "@pihanga2/core";
-import { StrictMode as r } from "react";
+import { StrictMode as n } from "react";
+import { Card as r } from "@pihanga2/core";
 import { jsx as i } from "react/jsx-runtime";
 //#region src/cards/framework/framework.component.tsx
 var a = (a) => {
 	let { page: o, theme: s = "dark", cardName: c } = a;
-	return /* @__PURE__ */ i(r, { children: /* @__PURE__ */ i(t, {
+	return /* @__PURE__ */ i(n, { children: /* @__PURE__ */ i(t, {
 		defaultTheme: s,
 		storageKey: "shadcn-ui-theme",
-		children: /* @__PURE__ */ i(e, { children: /* @__PURE__ */ i(n, {
+		children: /* @__PURE__ */ i(e, { children: /* @__PURE__ */ i(r, {
 			cardName: o,
 			parentCard: c
 		}) })

package/cards/graphin/graphin.types.d.ts

@@ -226,6 +226,20 @@ export type GraphinTooltip = {
      * @default 4
      */
     offset?: number | [number, number];
+    /**
+     * Extra CSS class name(s) applied to the tooltip wrapper `<div>`.
+     * Use this to override the default background / border / shadow via
+     * Tailwind utilities or your own CSS classes.
+     *
+     * @example "rounded-xl shadow-lg border-primary"
+     */
+    className?: string;
+    /**
+     * Inline style overrides for the tooltip wrapper `<div>`.
+     * Merged on top of the built-in positioning / pointer-events styles so
+     * you can safely override individual properties (e.g. `padding`, `zIndex`).
+     */
+    style?: React.CSSProperties;
 };
 export type GraphinContextMenu = {
     /** Registered card name whose component is rendered inside the click panel. */
@@ -239,6 +253,20 @@ export type GraphinContextMenu = {
      * @default 4
      */
     offset?: number | [number, number];
+    /**
+     * Extra CSS class name(s) applied to the context-menu wrapper `<div>`.
+     * Use this to override the default background / border / shadow via
+     * Tailwind utilities or your own CSS classes.
+     *
+     * @example "rounded-xl shadow-lg border-primary"
+     */
+    className?: string;
+    /**
+     * Inline style overrides for the context-menu wrapper `<div>`.
+     * Merged on top of the built-in positioning / pointer-events styles so
+     * you can safely override individual properties (e.g. `padding`, `zIndex`).
+     */
+    style?: React.CSSProperties;
 };
 /**
  * Node shape types supported by G6 v5.
@@ -256,8 +284,10 @@ export type GraphinNodeStyleDef = {
     fill?: string;
     /** Border colour. */
     stroke?: string;
-    /** Border thickness in pixels. */
+    /** Border thickness in pixels. Alias: `strokeWidth` (takes precedence). */
     lineWidth?: number;
+    /** Border thickness in pixels. Takes precedence over `lineWidth`. */
+    strokeWidth?: number;
     /**
      * Node size in pixels.
      * Pass a number for a square/circle; pass `[width, height]` for a rectangle.
@@ -322,10 +352,13 @@ export declare const GRAPHIN_OP_ACTION: {
 export type GraphinSetNodeStylesAction = {
     cardName: string;
     /**
-     * Map of `nodeId` → style name (must be a key in the card's `nodeStyles` map).
-     * @example { n1: "failed", n2: "degraded", n3: "ok" }
+     * Map of `nodeId` → style name or ordered list of style names to merge
+     * (each must be a key in the card's `nodeStyles` map).
+     * When an array is given, styles are merged left-to-right with later entries
+     * overriding duplicate properties from earlier ones.
+     * @example { n1: "failed", n2: ["base", "degraded"], n3: "ok" }
      */
-    nodeStyles: Record<string, string>;
+    nodeStyles: Record<string, string | string[]>;
 };
 /**
  * Payload for `GRAPHIN_OP_ACTION.CLEAR_NODE_STYLES`.

package/cards/input/index.js

@@ -1,13 +1,13 @@
 import { InputComponent as e } from "./input.component.js";
-import { PI_INPUT_ACTION as t, PI_INPUT_CARD as n, PiInput as r, onPiInputChanged as i, onPiInputCommitted as a } from "./input.types.js";
-import { actionTypesToEvents as o, registerCardComponent as s } from "@pihanga2/core";
+import { PI_INPUT_ACTION as t, PI_INPUT_CARD as n, PiInput as r, onInputChanged as i, onInputCommitted as a, onPiInputChanged as o, onPiInputCommitted as s } from "./input.types.js";
+import { actionTypesToEvents as c, registerCardComponent as l } from "@pihanga2/core";
 //#region src/cards/input/index.ts
-s({
+l({
 	name: n,
 	component: e,
-	events: o(t)
+	events: c(t)
 });
 //#endregion
-export { t as PI_INPUT_ACTION, n as PI_INPUT_CARD, r as PiInput, i as onPiInputChanged, a as onPiInputCommitted };
+export { t as PI_INPUT_ACTION, n as PI_INPUT_CARD, r as PiInput, i as onInputChanged, a as onInputCommitted, o as onPiInputChanged, s as onPiInputCommitted };
 
 //# sourceMappingURL=index.js.map

package/cards/input/input.component.js

@@ -2,6 +2,7 @@ import { useFormContext as e } from "../form/form.context.js";
 import { Label as t } from "../../components/ui/label.js";
 import { Input as n } from "../../components/ui/input.js";
 import r from "react";
+import "@pihanga2/core";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
 //#region src/cards/input/input.component.tsx
 var o = (o) => {

package/cards/input/input.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.component.js","names":[],"sources":["../../../src/cards/input/input.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Input} from \"@/components/ui/input\";\nimport {Label} from \"@/components/ui/label\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiInputEvents, PiInputProps} from \"./input.types\";\n\nexport const InputComponent = (\n  props: PiCardProps<PiInputProps, PiInputEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue = \"\",\n    type = \"text\",\n    placeholder,\n    disabled,\n    label,\n    description,\n    className,\n    cardName,\n    onChanged,\n    onCommitted,\n  } = props;\n\n  // `id` and `invalid` may be injected by a parent pi/field card via\n  // Pihanga's extra-prop forwarding.  They are not in the official type so\n  // we read them through an escape hatch.\n  const injectedId = (props as {id?: string}).id;\n  const invalid = Boolean((props as {invalid?: boolean}).invalid);\n\n  // Detect if we are inside a pi/form card via React context.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  // Local display state — lets the user type freely without triggering Redux\n  // on every keystroke.  Only `onCommitted` (blur / Enter) writes back to\n  // Redux, so callers that use `onCommitted` instead of `onChanged` avoid\n  // per-keystroke panel rebuilds.\n  const [localValue, setLocalValue] = React.useState<string>(\n    type === \"file\" ? \"\" : propValue,\n  );\n\n  // Sync local value when the prop changes from outside (e.g. when a different\n  // card is selected in the playground, resetting the controls panel).\n  React.useEffect(() => {\n    if (!useFormData && type !== \"file\") {\n      setLocalValue(propValue);\n    }\n  }, [propValue, useFormData, type]);\n\n  // Derive the effective value for the controlled <Input>:\n  //   - inside a form → read from form.formData[name]\n  //   - standalone   → use localValue (updated on every keystroke locally)\n  //   - file inputs  → uncontrolled (no value binding)\n  const inputValue =\n    type === \"file\"\n      ? undefined\n      : useFormData\n        ? ((form.formData[name!] as string | undefined) ?? \"\")\n        : localValue;\n\n  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const newValue =\n      type === \"file\" ? (e.target.files?.[0]?.name ?? \"\") : e.target.value;\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      setLocalValue(newValue);\n      onChanged({name, value: newValue});\n    }\n  }\n\n  // Fire onCommitted when the user leaves the field or presses Enter.\n  function handleBlur() {\n    if (!useFormData && type !== \"file\") {\n      onCommitted({name, value: localValue});\n    }\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n    if (e.key === \"Enter\" && !useFormData && type !== \"file\") {\n      onCommitted({name, value: localValue});\n    }\n  }\n\n  // Use the id injected by pi/field (for label↔control linking); fall back\n  // to a locally-generated id when used standalone.\n  const selfId = `${cardName}-${name ?? \"input\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <div data-pihanga={cardName} className=\"grid w-full gap-1.5\">\n      {label && <Label htmlFor={fieldId}>{label}</Label>}\n      <Input\n        id={fieldId}\n        type={type}\n        value={inputValue}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        disabled={disabled}\n        className={className}\n        aria-invalid={invalid || undefined}\n        aria-describedby={description ? `${fieldId}-desc` : undefined}\n      />\n      {description && (\n        <p id={`${fieldId}-desc`} className=\"text-sm text-muted-foreground\">\n          {description}\n        </p>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAOA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,IAAY,IACnB,UAAO,QACP,gBACA,aACA,UACA,gBACA,cACA,aACA,cACA,mBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAMvC,CAAC,GAAY,KAAiB,EAAM,SACxC,MAAS,SAAS,KAAK,CACzB;CAIA,EAAM,gBAAgB;EACpB,AAAI,CAAC,KAAe,MAAS,UAC3B,EAAc,CAAS;CAE3B,GAAG;EAAC;EAAW;EAAa;CAAI,CAAC;CAMjC,IAAM,IACJ,MAAS,SACL,KAAA,IACA,IACI,EAAK,SAAS,MAAiC,KACjD;CAER,SAAS,EAAa,GAAwC;EAC5D,IAAM,IACJ,MAAS,SAAU,EAAE,OAAO,QAAQ,IAAI,QAAQ,KAAM,EAAE,OAAO;EACjE,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAEjC,EAAc,CAAQ,GACtB,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAGA,SAAS,IAAa;EACpB,AAAI,CAAC,KAAe,MAAS,UAC3B,EAAY;GAAC;GAAM,OAAO;EAAU,CAAC;CAEzC;CAEA,SAAS,EAAc,GAA0C;EAC/D,AAAI,EAAE,QAAQ,WAAW,CAAC,KAAe,MAAS,UAChD,EAAY;GAAC;GAAM,OAAO;EAAU,CAAC;CAEzC;CAIA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ,WAChC,IAAU,KAAc;CAE9B,OACE,kBAAC,OAAD;EAAK,gBAAc;EAAU,WAAU;YAAvC;GACG,KAAS,kBAAC,GAAD;IAAO,SAAS;cAAU;GAAa,CAAA;GACjD,kBAAC,GAAD;IACE,IAAI;IACE;IACN,OAAO;IACP,UAAU;IACV,QAAQ;IACR,WAAW;IACE;IACH;IACC;IACX,gBAAc,KAAW,KAAA;IACzB,oBAAkB,IAAc,GAAG,EAAQ,SAAS,KAAA;GACrD,CAAA;GACA,KACC,kBAAC,KAAD;IAAG,IAAI,GAAG,EAAQ;IAAQ,WAAU;cACjC;GACA,CAAA;EAEF;;AAET"}
+{"version":3,"file":"input.component.js","names":[],"sources":["../../../src/cards/input/input.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Input} from \"@/components/ui/input\";\nimport {Label} from \"@/components/ui/label\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiInputEvents, PiInputProps} from \"./input.types\";\n\nexport const InputComponent = (\n  props: PiCardProps<PiInputProps, PiInputEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue = \"\",\n    type = \"text\",\n    placeholder,\n    disabled,\n    label,\n    description,\n    className,\n    cardName,\n    onChanged,\n    onCommitted,\n  } = props;\n\n  // `id` and `invalid` may be injected by a parent pi/field card via\n  // Pihanga's extra-prop forwarding.  They are not in the official type so\n  // we read them through an escape hatch.\n  const injectedId = (props as {id?: string}).id;\n  const invalid = Boolean((props as {invalid?: boolean}).invalid);\n\n  // Detect if we are inside a pi/form card via React context.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  // Local display state — lets the user type freely without triggering Redux\n  // on every keystroke.  Only `onCommitted` (blur / Enter) writes back to\n  // Redux, so callers that use `onCommitted` instead of `onChanged` avoid\n  // per-keystroke panel rebuilds.\n  const [localValue, setLocalValue] = React.useState<string>(\n    type === \"file\" ? \"\" : propValue,\n  );\n\n  // Sync local value when the prop changes from outside (e.g. when a different\n  // card is selected in the playground, resetting the controls panel).\n  React.useEffect(() => {\n    if (!useFormData && type !== \"file\") {\n      setLocalValue(propValue);\n    }\n  }, [propValue, useFormData, type]);\n\n  // Derive the effective value for the controlled <Input>:\n  //   - inside a form → read from form.formData[name]\n  //   - standalone   → use localValue (updated on every keystroke locally)\n  //   - file inputs  → uncontrolled (no value binding)\n  const inputValue =\n    type === \"file\"\n      ? undefined\n      : useFormData\n        ? ((form.formData[name!] as string | undefined) ?? \"\")\n        : localValue;\n\n  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const newValue =\n      type === \"file\" ? (e.target.files?.[0]?.name ?? \"\") : e.target.value;\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      setLocalValue(newValue);\n      onChanged({name, value: newValue});\n    }\n  }\n\n  // Fire onCommitted when the user leaves the field or presses Enter.\n  function handleBlur() {\n    if (!useFormData && type !== \"file\") {\n      onCommitted({name, value: localValue});\n    }\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent<HTMLInputElement>) {\n    if (e.key === \"Enter\" && !useFormData && type !== \"file\") {\n      onCommitted({name, value: localValue});\n    }\n  }\n\n  // Use the id injected by pi/field (for label↔control linking); fall back\n  // to a locally-generated id when used standalone.\n  const selfId = `${cardName}-${name ?? \"input\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <div data-pihanga={cardName} className=\"grid w-full gap-1.5\">\n      {label && <Label htmlFor={fieldId}>{label}</Label>}\n      <Input\n        id={fieldId}\n        type={type}\n        value={inputValue}\n        onChange={handleChange}\n        onBlur={handleBlur}\n        onKeyDown={handleKeyDown}\n        placeholder={placeholder}\n        disabled={disabled}\n        className={className}\n        aria-invalid={invalid || undefined}\n        aria-describedby={description ? `${fieldId}-desc` : undefined}\n      />\n      {description && (\n        <p id={`${fieldId}-desc`} className=\"text-sm text-muted-foreground\">\n          {description}\n        </p>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAOA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,IAAY,IACnB,UAAO,QACP,gBACA,aACA,UACA,gBACA,cACA,aACA,cACA,mBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAMvC,CAAC,GAAY,KAAiB,EAAM,SACxC,MAAS,SAAS,KAAK,CACzB;CAIA,EAAM,gBAAgB;EACpB,AAAI,CAAC,KAAe,MAAS,UAC3B,EAAc,CAAS;CAE3B,GAAG;EAAC;EAAW;EAAa;CAAI,CAAC;CAMjC,IAAM,IACJ,MAAS,SACL,KAAA,IACA,IACI,EAAK,SAAS,MAAiC,KACjD;CAER,SAAS,EAAa,GAAwC;EAC5D,IAAM,IACJ,MAAS,SAAU,EAAE,OAAO,QAAQ,IAAI,QAAQ,KAAM,EAAE,OAAO;EACjE,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,KAEjC,EAAc,CAAQ,GACtB,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAGA,SAAS,IAAa;EACpB,AAAI,CAAC,KAAe,MAAS,UAC3B,EAAY;GAAC;GAAM,OAAO;EAAU,CAAC;CAEzC;CAEA,SAAS,EAAc,GAA0C;EAC/D,AAAI,EAAE,QAAQ,WAAW,CAAC,KAAe,MAAS,UAChD,EAAY;GAAC;GAAM,OAAO;EAAU,CAAC;CAEzC;CAIA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ,WAChC,IAAU,KAAc;CAE9B,OACE,kBAAC,OAAD;EAAK,gBAAc;EAAU,WAAU;YAAvC;GACG,KAAS,kBAAC,GAAD;IAAO,SAAS;cAAU;GAAa,CAAA;GACjD,kBAAC,GAAD;IACE,IAAI;IACE;IACN,OAAO;IACP,UAAU;IACV,QAAQ;IACR,WAAW;IACE;IACH;IACC;IACX,gBAAc,KAAW,KAAA;IACzB,oBAAkB,IAAc,GAAG,EAAQ,SAAS,KAAA;GACrD,CAAA;GACA,KACC,kBAAC,KAAD;IAAG,IAAI,GAAG,EAAQ;IAAQ,WAAU;cACjC;GACA,CAAA;EAEF;;AAET"}

package/cards/input/input.types.d.ts

@@ -4,15 +4,23 @@ export declare const PI_INPUT_ACTION: {
     CHANGED: string;
     COMMITTED: string;
 };
+export declare const onInputChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiInputChangedEvent>) => void;
+/** @deprecated Use `onInputChanged` instead. */
 export declare const onPiInputChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiInputChangedEvent>) => void;
 /**
  * Subscribe to "committed" events — fired when the user finishes editing
- * (blur or Enter key).  Unlike `onChanged` (which fires on every keystroke),
- * `onCommitted` only fires once per editing session, making it the preferred
+ * (blur or Enter key).  Unlike `onInputChanged` (which fires on every keystroke),
+ * `onInputCommitted` only fires once per editing session, making it the preferred
  * handler for controlled inputs that trigger expensive downstream work.
  */
+export declare const onInputCommitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiInputCommittedEvent>) => void;
+/** @deprecated Use `onInputCommitted` instead. */
 export declare const onPiInputCommitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiInputCommittedEvent>) => void;

package/cards/input/input.types.js

@@ -1,7 +1,7 @@
 import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
 //#region src/cards/input/input.types.ts
-var r = "pi/input", i = e(r), a = n(r, ["changed", "committed"]), o = t(a.CHANGED), s = t(a.COMMITTED);
+var r = "pi/input", i = e(r), a = n(r, ["changed", "committed"]), o = t(a.CHANGED), s = o, c = t(a.COMMITTED), l = c;
 //#endregion
-export { a as PI_INPUT_ACTION, r as PI_INPUT_CARD, i as PiInput, o as onPiInputChanged, s as onPiInputCommitted };
+export { a as PI_INPUT_ACTION, r as PI_INPUT_CARD, i as PiInput, o as onInputChanged, c as onInputCommitted, s as onPiInputChanged, l as onPiInputCommitted };
 
 //# sourceMappingURL=input.types.js.map

package/cards/input/input.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"input.types.js","names":[],"sources":["../../../src/cards/input/input.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_INPUT_CARD = \"pi/input\";\n\nexport const PiInput = createCardDeclaration<PiInputProps, PiInputEvents>(\n  PI_INPUT_CARD,\n);\n\nexport const PI_INPUT_ACTION = registerActions(PI_INPUT_CARD, [\n  \"changed\",\n  \"committed\",\n]);\n\nexport const onPiInputChanged = createOnAction<PiInputChangedEvent>(\n  PI_INPUT_ACTION.CHANGED,\n);\n\n/**\n * Subscribe to \"committed\" events — fired when the user finishes editing\n * (blur or Enter key).  Unlike `onChanged` (which fires on every keystroke),\n * `onCommitted` only fires once per editing session, making it the preferred\n * handler for controlled inputs that trigger expensive downstream work.\n */\nexport const onPiInputCommitted = createOnAction<PiInputCommittedEvent>(\n  PI_INPUT_ACTION.COMMITTED,\n);\n\n// ---------------------------------------------------------------------------\n// Props & Events\n// ---------------------------------------------------------------------------\n\nexport type PiInputProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its value from form state and writes\n   * back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled value used in standalone mode (outside a Form).\n   * Ignored when `name` is set and the component is inside a pi/form.\n   */\n  value?: string;\n\n  /**\n   * HTML input type.\n   * Common values: \"text\" | \"email\" | \"password\" | \"number\" | \"search\" |\n   * \"url\" | \"tel\" | \"date\" | \"file\".\n   * Defaults to \"text\".\n   */\n  type?: string;\n\n  /** Placeholder text shown when the input is empty. */\n  placeholder?: string;\n\n  /** When true, the input is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /**\n   * Optional label text rendered in a `<label>` element above the input.\n   * The label is automatically associated with the input via `htmlFor`.\n   */\n  label?: string;\n\n  /**\n   * Optional helper / description text rendered below the input.\n   * Use this for hints, formatting guidance, or validation feedback.\n   */\n  description?: string;\n\n  /** Extra Tailwind / CSS classes forwarded to the underlying <input> element. */\n  className?: string;\n};\n\nexport type PiInputChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New value after the change. */\n  value: string;\n};\n\n/**\n * Payload for the `onCommitted` event (blur / Enter key).\n * Same shape as `PiInputChangedEvent`.\n */\nexport type PiInputCommittedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** Final committed value. */\n  value: string;\n};\n\nexport type PiInputEvents = {\n  /** Fires on every keystroke. */\n  onChanged: PiInputChangedEvent;\n  /**\n   * Fires once when the user finishes editing (blur or Enter key).\n   * Use this instead of `onChanged` when each change triggers expensive\n   * downstream work (e.g. rebuilding a panel).\n   */\n  onCommitted: PiInputCommittedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAgB,YAEhB,IAAU,EACrB,CACF,GAEa,IAAkB,EAAgB,GAAe,CAC5D,WACA,WACF,CAAC,GAEY,IAAmB,EAC9B,EAAgB,OAClB,GAQa,IAAqB,EAChC,EAAgB,SAClB"}
+{"version":3,"file":"input.types.js","names":[],"sources":["../../../src/cards/input/input.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_INPUT_CARD = \"pi/input\";\n\nexport const PiInput = createCardDeclaration<PiInputProps, PiInputEvents>(\n  PI_INPUT_CARD,\n);\n\nexport const PI_INPUT_ACTION = registerActions(PI_INPUT_CARD, [\n  \"changed\",\n  \"committed\",\n]);\n\nexport const onInputChanged = createOnAction<PiInputChangedEvent>(\n  PI_INPUT_ACTION.CHANGED,\n);\n\n/** @deprecated Use `onInputChanged` instead. */\nexport const onPiInputChanged = onInputChanged;\n\n/**\n * Subscribe to \"committed\" events — fired when the user finishes editing\n * (blur or Enter key).  Unlike `onInputChanged` (which fires on every keystroke),\n * `onInputCommitted` only fires once per editing session, making it the preferred\n * handler for controlled inputs that trigger expensive downstream work.\n */\nexport const onInputCommitted = createOnAction<PiInputCommittedEvent>(\n  PI_INPUT_ACTION.COMMITTED,\n);\n\n/** @deprecated Use `onInputCommitted` instead. */\nexport const onPiInputCommitted = onInputCommitted;\n\n// ---------------------------------------------------------------------------\n// Props & Events\n// ---------------------------------------------------------------------------\n\nexport type PiInputProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its value from form state and writes\n   * back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled value used in standalone mode (outside a Form).\n   * Ignored when `name` is set and the component is inside a pi/form.\n   */\n  value?: string;\n\n  /**\n   * HTML input type.\n   * Common values: \"text\" | \"email\" | \"password\" | \"number\" | \"search\" |\n   * \"url\" | \"tel\" | \"date\" | \"file\".\n   * Defaults to \"text\".\n   */\n  type?: string;\n\n  /** Placeholder text shown when the input is empty. */\n  placeholder?: string;\n\n  /** When true, the input is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /**\n   * Optional label text rendered in a `<label>` element above the input.\n   * The label is automatically associated with the input via `htmlFor`.\n   */\n  label?: string;\n\n  /**\n   * Optional helper / description text rendered below the input.\n   * Use this for hints, formatting guidance, or validation feedback.\n   */\n  description?: string;\n\n  /** Extra Tailwind / CSS classes forwarded to the underlying <input> element. */\n  className?: string;\n};\n\nexport type PiInputChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New value after the change. */\n  value: string;\n};\n\n/**\n * Payload for the `onCommitted` event (blur / Enter key).\n * Same shape as `PiInputChangedEvent`.\n */\nexport type PiInputCommittedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** Final committed value. */\n  value: string;\n};\n\nexport type PiInputEvents = {\n  /** Fires on every keystroke. */\n  onChanged: PiInputChangedEvent;\n  /**\n   * Fires once when the user finishes editing (blur or Enter key).\n   * Use this instead of `onChanged` when each change triggers expensive\n   * downstream work (e.g. rebuilding a panel).\n   */\n  onCommitted: PiInputCommittedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAgB,YAEhB,IAAU,EACrB,CACF,GAEa,IAAkB,EAAgB,GAAe,CAC5D,WACA,WACF,CAAC,GAEY,IAAiB,EAC5B,EAAgB,OAClB,GAGa,IAAmB,GAQnB,IAAmB,EAC9B,EAAgB,SAClB,GAGa,IAAqB"}