@pihanga2/shadcn 0.2.18 → 0.2.19

package/cards/stack/stack.component.js

@@ -3,83 +3,96 @@ import { Card as t } from "@pihanga2/core";
 import n from "clsx";
 import { jsx as r, jsxs as i } from "react/jsx-runtime";
 //#region src/cards/stack/stack.component.tsx
-var a = (a) => {
-	let { content: o, direction: s, divider: c, spacing: l, justifyContent: u, alignItems: d, className: f, style: p, cardName: m, data: h } = a, g = [
-		f,
-		(p ?? {}).root,
+function a(e) {
+	let t = 2166136261;
+	for (let n = 0; n < e.length; n++) t ^= e.charCodeAt(n), t = Math.imul(t, 16777619);
+	return (t >>> 0).toString(36);
+}
+function o(e, t) {
+	if (typeof e == "string") return e;
+	let n = Object.keys(e).sort();
+	return `${a(JSON.stringify(e, n))}-${t}`;
+}
+var s = (a) => {
+	let { content: s, direction: c, divider: l, spacing: u, justifyContent: d, alignItems: f, className: p, style: m, cardName: h, data: g } = a, _ = [
+		p,
+		(m ?? {}).root,
 		"flex"
 	];
-	if (s) switch (s) {
+	if (c) switch (c) {
 		case "row":
-			g.push("flex-row");
+			_.push("flex-row");
 			break;
 		case "row-reverse":
-			g.push("flex-row-reverse");
+			_.push("flex-row-reverse");
 			break;
 		case "column":
-			g.push("flex-col");
+			_.push("flex-col");
 			break;
 		case "column-reverse":
-			g.push("flex-col-reverse");
+			_.push("flex-col-reverse");
 			break;
 	}
-	if (u) switch (u) {
+	if (d) switch (d) {
 		case "flex-start":
-			g.push("justify-start");
+			_.push("justify-start");
 			break;
 		case "center":
-			g.push("justify-center");
+			_.push("justify-center");
 			break;
 		case "flex-end":
-			g.push("justify-end");
+			_.push("justify-end");
 			break;
 		case "space-between":
-			g.push("justify-between");
+			_.push("justify-between");
 			break;
 		case "space-around":
-			g.push("justify-around");
+			_.push("justify-around");
 			break;
 		case "space-evenly":
-			g.push("justify-evenly");
+			_.push("justify-evenly");
 			break;
 	}
-	if (d) switch (d) {
+	if (f) switch (f) {
 		case "flex-start":
-			g.push("items-start");
+			_.push("items-start");
 			break;
 		case "center":
-			g.push("items-center");
+			_.push("items-center");
 			break;
 		case "stretch":
-			g.push("items-stretch");
+			_.push("items-stretch");
 			break;
 		case "flex-end":
-			g.push("items-end");
+			_.push("items-end");
 			break;
 		case "baseline":
-			g.push("items-baseline");
+			_.push("items-baseline");
 			break;
-		default: console.warn("stack: unsupported 'alignItems' property", d);
+		default: console.warn("stack: unsupported 'alignItems' property", f);
 	}
-	l && l > 0 && g.push(`gap-${l}`);
-	function _() {
-		return o ? o.map((n, a) => /* @__PURE__ */ i(e, { children: [/* @__PURE__ */ r(t, {
-			cardName: n,
-			parentCard: m
-		}, `item-${a}`), c && a < o.length - 1 && /* @__PURE__ */ r(t, {
-			cardName: c,
-			parentCard: m
-		}, `divider-${a}`)] }, a)) : null;
+	u && u > 0 && _.push(`gap-${u}`);
+	function v() {
+		return s ? s.map((n, a) => {
+			let c = o(n, a);
+			return /* @__PURE__ */ i(e, { children: [/* @__PURE__ */ r(t, {
+				cardName: n,
+				parentCard: h
+			}, `item-${c}`), l && a < s.length - 1 && /* @__PURE__ */ r(t, {
+				cardName: l,
+				parentCard: h
+			}, `divider-${c}`)] }, c);
+		}) : null;
 	}
-	let v = h ? Object.fromEntries(Object.entries(h).map(([e, t]) => [`data-${e}`, t])) : {};
+	let y = g ? Object.fromEntries(Object.entries(g).map(([e, t]) => [`data-${e}`, t])) : {};
 	return /* @__PURE__ */ i("div", {
-		className: n(g),
-		"data-pihanga": m,
-		...v,
-		children: [_(), a.children]
+		className: n(_),
+		"data-pihanga": h,
+		...y,
+		children: [v(), a.children]
 	});
 };
 //#endregion
-export { a as Component };
+export { s as Component };
 
 //# sourceMappingURL=stack.component.js.map

package/cards/stack/stack.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"stack.component.js","names":[],"sources":["../../../src/cards/stack/stack.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type {StackProps} from \"./stack.types\";\n\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport clsx from \"clsx\";\nimport {Fragment} from \"react\";\n\nexport type SelectSD = {\n  root?: string;\n};\n\nexport const Component = (props: PiCardProps<StackProps>): React.ReactNode => {\n  const {\n    content,\n    direction,\n    divider,\n    spacing,\n    justifyContent,\n    alignItems,\n    className,\n    style,\n    cardName,\n    data,\n  } = props;\n  const sd: SelectSD = (style as SelectSD | undefined) ?? {};\n\n  const cn = [className, sd.root, \"flex\"];\n  if (direction) {\n    switch (direction) {\n      // \"column-reverse\" | \"column\" | \"row-reverse\" | \"row\"\n      case \"row\":\n        cn.push(\"flex-row\");\n        break;\n      case \"row-reverse\":\n        cn.push(\"flex-row-reverse\");\n        break;\n      case \"column\":\n        cn.push(\"flex-col\");\n        break;\n      case \"column-reverse\":\n        cn.push(\"flex-col-reverse\");\n        break;\n    }\n  }\n  if (justifyContent) {\n    switch (justifyContent) {\n      // \"flex-start\" | \"center\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"space-evenly\"\n      case \"flex-start\":\n        cn.push(\"justify-start\");\n        break;\n      case \"center\":\n        cn.push(\"justify-center\");\n        break;\n      case \"flex-end\":\n        cn.push(\"justify-end\");\n        break;\n      case \"space-between\":\n        cn.push(\"justify-between\");\n        break;\n      case \"space-around\":\n        cn.push(\"justify-around\");\n        break;\n      case \"space-evenly\":\n        cn.push(\"justify-evenly\");\n        break;\n    }\n  }\n  if (alignItems) {\n    switch (alignItems) {\n      // \"flex-start\" | \"center\" | \"flex-end\" | \"normal\" | \"stretch\" | \"start\" | \"end\" | \"baseline\" | \"initial\" | \"inherit\"\n      case \"flex-start\":\n        cn.push(\"items-start\");\n        break;\n      case \"center\":\n        cn.push(\"items-center\");\n        break;\n      case \"stretch\":\n        cn.push(\"items-stretch\");\n        break;\n      case \"flex-end\":\n        cn.push(\"items-end\");\n        break;\n      case \"baseline\":\n        cn.push(\"items-baseline\");\n        break;\n      default:\n        console.warn(\"stack: unsupported 'alignItems' property\", alignItems);\n    }\n  }\n  if (spacing && spacing > 0) {\n    if (\n      direction === undefined ||\n      direction === \"row\" ||\n      direction === \"row-reverse\"\n    ) {\n      cn.push(`gap-${spacing}`);\n    } else {\n      cn.push(`gap-${spacing}`);\n    }\n  }\n\n  function renderContent() {\n    if (!content) return null;\n\n    return content.map((cn, i) => (\n      <Fragment key={i}>\n        <Card cardName={cn} parentCard={cardName} key={`item-${i}`} />\n        {divider && i < content.length - 1 && (\n          <Card cardName={divider} parentCard={cardName} key={`divider-${i}`} />\n        )}\n      </Fragment>\n    ));\n  }\n\n  const dataAttrs = data\n    ? Object.fromEntries(Object.entries(data).map(([k, v]) => [`data-${k}`, v]))\n    : {};\n\n  return (\n    <div className={clsx(cn)} data-pihanga={cardName} {...dataAttrs}>\n      {renderContent()}\n      {props.children}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAWA,IAAa,KAAa,MAAoD;CAC5E,IAAM,EACJ,YACA,cACA,YACA,YACA,mBACA,eACA,cACA,UACA,aACA,YACE,GAGE,IAAK;EAAC;GAFU,KAAkC,CAAC,GAE/B;EAAM;CAAM;CACtC,IAAI,GACF,QAAQ,GAAR;EAEE,KAAK;GACH,EAAG,KAAK,UAAU;GAClB;EACF,KAAK;GACH,EAAG,KAAK,kBAAkB;GAC1B;EACF,KAAK;GACH,EAAG,KAAK,UAAU;GAClB;EACF,KAAK;GACH,EAAG,KAAK,kBAAkB;GAC1B;CACJ;CAEF,IAAI,GACF,QAAQ,GAAR;EAEE,KAAK;GACH,EAAG,KAAK,eAAe;GACvB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;EACF,KAAK;GACH,EAAG,KAAK,aAAa;GACrB;EACF,KAAK;GACH,EAAG,KAAK,iBAAiB;GACzB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;CACJ;CAEF,IAAI,GACF,QAAQ,GAAR;EAEE,KAAK;GACH,EAAG,KAAK,aAAa;GACrB;EACF,KAAK;GACH,EAAG,KAAK,cAAc;GACtB;EACF,KAAK;GACH,EAAG,KAAK,eAAe;GACvB;EACF,KAAK;GACH,EAAG,KAAK,WAAW;GACnB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;EACF,SACE,QAAQ,KAAK,4CAA4C,CAAU;CACvE;CAEF,AAAI,KAAW,IAAU,KAMrB,EAAG,KAAK,OAAO,GAAS;CAM5B,SAAS,IAAgB;EAGvB,OAFK,IAEE,EAAQ,KAAK,GAAI,MACtB,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;GAAM,UAAU;GAAI,YAAY;EAA6B,GAAd,QAAQ,GAAM,GAC5D,KAAW,IAAI,EAAQ,SAAS,KAC/B,kBAAC,GAAD;GAAM,UAAU;GAAS,YAAY;EAAgC,GAAjB,WAAW,GAAM,CAE/D,EAAA,GALK,CAKL,CACX,IAToB;CAUvB;CAEA,IAAM,IAAY,IACd,OAAO,YAAY,OAAO,QAAQ,CAAI,EAAE,KAAK,CAAC,GAAG,OAAO,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,IACzE,CAAC;CAEL,OACE,kBAAC,OAAD;EAAK,WAAW,EAAK,CAAE;EAAG,gBAAc;EAAU,GAAI;YAAtD,CACG,EAAc,GACd,EAAM,QACJ;;AAET"}
+{"version":3,"file":"stack.component.js","names":[],"sources":["../../../src/cards/stack/stack.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport type {StackProps} from \"./stack.types\";\n\nimport {Card, type PiCardProps, type PiCardRef} from \"@pihanga2/core\";\nimport clsx from \"clsx\";\nimport {Fragment} from \"react\";\n\nexport type SelectSD = {\n  root?: string;\n};\n\n/**\n * Cheap, non-cryptographic FNV-1a hash — good enough to turn an arbitrary\n * string into a short, stable identifier for use as a React key.\n */\nfunction fnv1aHash(str: string): string {\n  let hash = 0x811c9dc5;\n  for (let i = 0; i < str.length; i++) {\n    hash ^= str.charCodeAt(i);\n    hash = Math.imul(hash, 0x01000193);\n  }\n  return (hash >>> 0).toString(36);\n}\n\n/**\n * Derive a stable React key for a `PiCardRef`.\n *\n * - Strings (card names) are already unique — used as-is.\n * - Inline `PiCardDef` objects have no identity of their own, and two\n *   structurally-identical defs created on different renders are different\n *   object references. We hash the (key-sorted) JSON content so that\n *   identical content maps to the same key — preserving React's\n *   reconciliation identity across re-renders/reorders — while still\n *   appending `i` so a hash collision (or two genuinely different defs\n *   that hash the same) can never produce a duplicate key within the list.\n */\nfunction cardRefKey(cn: PiCardRef, i: number): string {\n  if (typeof cn === \"string\") return cn;\n  const sortedKeys = Object.keys(cn).sort();\n  const json = JSON.stringify(cn, sortedKeys);\n  return `${fnv1aHash(json)}-${i}`;\n}\n\nexport const Component = (props: PiCardProps<StackProps>): React.ReactNode => {\n  const {\n    content,\n    direction,\n    divider,\n    spacing,\n    justifyContent,\n    alignItems,\n    className,\n    style,\n    cardName,\n    data,\n  } = props;\n  const sd: SelectSD = (style as SelectSD | undefined) ?? {};\n\n  const cn = [className, sd.root, \"flex\"];\n  if (direction) {\n    switch (direction) {\n      // \"column-reverse\" | \"column\" | \"row-reverse\" | \"row\"\n      case \"row\":\n        cn.push(\"flex-row\");\n        break;\n      case \"row-reverse\":\n        cn.push(\"flex-row-reverse\");\n        break;\n      case \"column\":\n        cn.push(\"flex-col\");\n        break;\n      case \"column-reverse\":\n        cn.push(\"flex-col-reverse\");\n        break;\n    }\n  }\n  if (justifyContent) {\n    switch (justifyContent) {\n      // \"flex-start\" | \"center\" | \"flex-end\" | \"space-between\" | \"space-around\" | \"space-evenly\"\n      case \"flex-start\":\n        cn.push(\"justify-start\");\n        break;\n      case \"center\":\n        cn.push(\"justify-center\");\n        break;\n      case \"flex-end\":\n        cn.push(\"justify-end\");\n        break;\n      case \"space-between\":\n        cn.push(\"justify-between\");\n        break;\n      case \"space-around\":\n        cn.push(\"justify-around\");\n        break;\n      case \"space-evenly\":\n        cn.push(\"justify-evenly\");\n        break;\n    }\n  }\n  if (alignItems) {\n    switch (alignItems) {\n      // \"flex-start\" | \"center\" | \"flex-end\" | \"normal\" | \"stretch\" | \"start\" | \"end\" | \"baseline\" | \"initial\" | \"inherit\"\n      case \"flex-start\":\n        cn.push(\"items-start\");\n        break;\n      case \"center\":\n        cn.push(\"items-center\");\n        break;\n      case \"stretch\":\n        cn.push(\"items-stretch\");\n        break;\n      case \"flex-end\":\n        cn.push(\"items-end\");\n        break;\n      case \"baseline\":\n        cn.push(\"items-baseline\");\n        break;\n      default:\n        console.warn(\"stack: unsupported 'alignItems' property\", alignItems);\n    }\n  }\n  if (spacing && spacing > 0) {\n    if (\n      direction === undefined ||\n      direction === \"row\" ||\n      direction === \"row-reverse\"\n    ) {\n      cn.push(`gap-${spacing}`);\n    } else {\n      cn.push(`gap-${spacing}`);\n    }\n  }\n\n  function renderContent() {\n    if (!content) return null;\n\n    return content.map((cn, i) => {\n      const key = cardRefKey(cn, i);\n      return (\n        <Fragment key={key}>\n          <Card cardName={cn} parentCard={cardName} key={`item-${key}`} />\n          {divider && i < content.length - 1 && (\n            <Card\n              cardName={divider}\n              parentCard={cardName}\n              key={`divider-${key}`}\n            />\n          )}\n        </Fragment>\n      );\n    });\n  }\n\n  const dataAttrs = data\n    ? Object.fromEntries(Object.entries(data).map(([k, v]) => [`data-${k}`, v]))\n    : {};\n\n  return (\n    <div className={clsx(cn)} data-pihanga={cardName} {...dataAttrs}>\n      {renderContent()}\n      {props.children}\n    </div>\n  );\n};\n"],"mappings":";;;;;AAeA,SAAS,EAAU,GAAqB;CACtC,IAAI,IAAO;CACX,KAAK,IAAI,IAAI,GAAG,IAAI,EAAI,QAAQ,KAE9B,AADA,KAAQ,EAAI,WAAW,CAAC,GACxB,IAAO,KAAK,KAAK,GAAM,QAAU;CAEnC,QAAQ,MAAS,GAAG,SAAS,EAAE;AACjC;AAcA,SAAS,EAAW,GAAe,GAAmB;CACpD,IAAI,OAAO,KAAO,UAAU,OAAO;CACnC,IAAM,IAAa,OAAO,KAAK,CAAE,EAAE,KAAK;CAExC,OAAO,GAAG,EADG,KAAK,UAAU,GAAI,CACZ,CAAI,EAAE,GAAG;AAC/B;AAEA,IAAa,KAAa,MAAoD;CAC5E,IAAM,EACJ,YACA,cACA,YACA,YACA,mBACA,eACA,cACA,UACA,aACA,YACE,GAGE,IAAK;EAAC;GAFU,KAAkC,CAAC,GAE/B;EAAM;CAAM;CACtC,IAAI,GACF,QAAQ,GAAR;EAEE,KAAK;GACH,EAAG,KAAK,UAAU;GAClB;EACF,KAAK;GACH,EAAG,KAAK,kBAAkB;GAC1B;EACF,KAAK;GACH,EAAG,KAAK,UAAU;GAClB;EACF,KAAK;GACH,EAAG,KAAK,kBAAkB;GAC1B;CACJ;CAEF,IAAI,GACF,QAAQ,GAAR;EAEE,KAAK;GACH,EAAG,KAAK,eAAe;GACvB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;EACF,KAAK;GACH,EAAG,KAAK,aAAa;GACrB;EACF,KAAK;GACH,EAAG,KAAK,iBAAiB;GACzB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;CACJ;CAEF,IAAI,GACF,QAAQ,GAAR;EAEE,KAAK;GACH,EAAG,KAAK,aAAa;GACrB;EACF,KAAK;GACH,EAAG,KAAK,cAAc;GACtB;EACF,KAAK;GACH,EAAG,KAAK,eAAe;GACvB;EACF,KAAK;GACH,EAAG,KAAK,WAAW;GACnB;EACF,KAAK;GACH,EAAG,KAAK,gBAAgB;GACxB;EACF,SACE,QAAQ,KAAK,4CAA4C,CAAU;CACvE;CAEF,AAAI,KAAW,IAAU,KAMrB,EAAG,KAAK,OAAO,GAAS;CAM5B,SAAS,IAAgB;EAGvB,OAFK,IAEE,EAAQ,KAAK,GAAI,MAAM;GAC5B,IAAM,IAAM,EAAW,GAAI,CAAC;GAC5B,OACE,kBAAC,GAAD,EAAA,UAAA,CACE,kBAAC,GAAD;IAAM,UAAU;IAAI,YAAY;GAA+B,GAAhB,QAAQ,GAAQ,GAC9D,KAAW,IAAI,EAAQ,SAAS,KAC/B,kBAAC,GAAD;IACE,UAAU;IACV,YAAY;GAEb,GADM,WAAW,GACjB,CAEK,EAAA,GATK,CASL;EAEd,CAAC,IAhBoB;CAiBvB;CAEA,IAAM,IAAY,IACd,OAAO,YAAY,OAAO,QAAQ,CAAI,EAAE,KAAK,CAAC,GAAG,OAAO,CAAC,QAAQ,KAAK,CAAC,CAAC,CAAC,IACzE,CAAC;CAEL,OACE,kBAAC,OAAD;EAAK,WAAW,EAAK,CAAE;EAAG,gBAAc;EAAU,GAAI;YAAtD,CACG,EAAc,GACd,EAAM,QACJ;;AAET"}

package/cards/stepper/stepper.types.d.ts

@@ -4,7 +4,7 @@ export declare const Stepper: <S extends import('@pihanga2/core').ReduxState>(p:
 export declare const STEPPER_ACTION: {
     STEPCLICKED: string;
 };
-export declare const onStepperStepClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onStepperStepClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & StepperStepClickedEvent>) => void;
 /**

package/cards/switch/switch.types.d.ts

@@ -3,11 +3,11 @@ export declare const Switch: <S extends import('@pihanga2/core').ReduxState>(p:
 export declare const PI_SWITCH_ACTION: {
     CHANGED: string;
 };
-export declare const onSwitchChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onSwitchChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiSwitchChangedEvent>) => void;
 /** @deprecated Use `onSwitchChanged` instead. */
-export declare const onPiSwitchChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onPiSwitchChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiSwitchChangedEvent>) => void;
 export type PiSwitchProps = {

package/cards/tabs/tabs.types.d.ts

@@ -6,7 +6,7 @@ export declare const SdTabs: <S extends import('@pihanga2/core').ReduxState>(p:
 export declare const TABS_ACTION: {
     TABCHANGED: string;
 };
-export declare const onTabsTabChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onTabsTabChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & TabsTabChangedEvent>) => void;
 /**

package/cards/textArea/index.d.ts

@@ -0,0 +1 @@
+export * from './textArea.types';

package/cards/textArea/index.js

@@ -0,0 +1,13 @@
+import { TextAreaComponent as e } from "./textArea.component.js";
+import { PI_TEXT_AREA_ACTION as t, PI_TEXT_AREA_CARD as n, TextArea as r, onTextAreaChanged as i, onTextAreaSubmitted as a } from "./textArea.types.js";
+import { actionTypesToEvents as o, registerCardComponent as s } from "@pihanga2/core";
+//#region src/cards/textArea/index.ts
+s({
+	name: n,
+	component: e,
+	events: o(t)
+});
+//#endregion
+export { t as PI_TEXT_AREA_ACTION, n as PI_TEXT_AREA_CARD, r as TextArea, i as onTextAreaChanged, a as onTextAreaSubmitted };
+
+//# sourceMappingURL=index.js.map

package/cards/textArea/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/textArea/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {TextAreaComponent} from \"./textArea.component\";\nimport {PI_TEXT_AREA_ACTION, PI_TEXT_AREA_CARD} from \"./textArea.types\";\n\nexport * from \"./textArea.types\";\n\nregisterCardComponent({\n  name: PI_TEXT_AREA_CARD,\n  component: TextAreaComponent,\n  events: actionTypesToEvents(PI_TEXT_AREA_ACTION),\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAmB;AACjD,CAAC"}

package/cards/textArea/textArea.component.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { PiTextAreaEvents, PiTextAreaProps } from './textArea.types';
+export declare const TextAreaComponent: (props: PiCardProps<PiTextAreaProps, PiTextAreaEvents>) => React.ReactNode;

package/cards/textArea/textArea.component.js

@@ -0,0 +1,83 @@
+import { cn as e } from "../../lib/utils.js";
+import { useFormContext as t } from "../form/form.context.js";
+import { Textarea as n } from "../../components/ui/textarea.js";
+import { useEffect as r, useRef as i, useState as ee } from "react";
+import "@pihanga2/core";
+import { jsx as a } from "react/jsx-runtime";
+//#region src/cards/textArea/textArea.component.tsx
+function o(e) {
+	if (e !== void 0) return typeof e == "number" ? `${e}px` : e;
+}
+var s = (s) => {
+	let { name: c, value: l = "", placeholder: u, disabled: d, readOnly: f, rows: p = 4, cols: m, fieldSizing: h = "fixed", resize: g, minHeight: _, maxHeight: v, width: y, height: b, maxWidth: x, dir: S, writingMode: C, submitOnEnter: w, selfManaged: T = !1, debounceMs: E = 0, className: D, style: O, autoFocus: k, cardName: A, onChanged: j, onSubmitted: M } = s, N = i(null);
+	r(() => {
+		k && N.current?.focus();
+	}, []);
+	let P = s.id, F = !!s.invalid, I = t(), L = I.isInForm && !!c, R = L ? I.formData[c] ?? "" : l, z = T && !L, [B, V] = ee(R), H = i(null), U = i(R);
+	r(() => {
+		z && V(R);
+	}, [R, z]), r(() => () => {
+		H.current != null && clearTimeout(H.current);
+	}, []);
+	let W = z ? B : R;
+	function G(e) {
+		L ? I.handleChange(c, e) : j({
+			name: c,
+			value: e
+		});
+	}
+	function K(e) {
+		let t = e.target.value;
+		if (!z) {
+			G(t);
+			return;
+		}
+		V(t), U.current = t, E > 0 && (H.current != null && clearTimeout(H.current), H.current = setTimeout(() => {
+			H.current = null, G(U.current);
+		}, E));
+	}
+	function q() {
+		z && (H.current != null && (clearTimeout(H.current), H.current = null), G(U.current));
+	}
+	function J(e) {
+		if (w && e.key === "Enter" && !e.shiftKey && !e.ctrlKey && !e.metaKey && !e.altKey) {
+			e.preventDefault();
+			let t = e.currentTarget.value;
+			z && H.current != null && (clearTimeout(H.current), H.current = null, G(t)), M({
+				name: c,
+				value: t
+			});
+		}
+	}
+	let Y = g ?? (h === "content" ? "none" : "vertical"), X = Y === "none" ? "resize-none" : Y === "vertical" ? "resize-y" : Y === "horizontal" ? "resize-x" : "resize", Z = h === "content" ? "field-sizing-content" : "field-sizing-fixed", Q = {
+		minHeight: o(_),
+		maxHeight: o(v),
+		width: o(y),
+		height: o(b),
+		maxWidth: o(x),
+		writingMode: C,
+		...O
+	}, $ = `${A}-${c ?? "field"}`;
+	return /* @__PURE__ */ a(n, {
+		ref: N,
+		id: P ?? $,
+		value: W,
+		onChange: K,
+		onBlur: q,
+		onKeyDown: J,
+		placeholder: u,
+		disabled: d,
+		readOnly: f,
+		rows: h === "fixed" ? p : void 0,
+		cols: h === "fixed" ? m : void 0,
+		dir: S,
+		"aria-invalid": F || void 0,
+		"data-pihanga": A,
+		className: e(Z, X, D),
+		style: Q
+	});
+};
+//#endregion
+export { s as TextAreaComponent };
+
+//# sourceMappingURL=textArea.component.js.map

package/cards/textArea/textArea.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textArea.component.js","names":[],"sources":["../../../src/cards/textArea/textArea.component.tsx"],"sourcesContent":["import React, {useEffect, useRef, useState} from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Textarea} from \"@/components/ui/textarea\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport {cn} from \"@/lib/utils\";\nimport type {\n  CssLength,\n  PiTextAreaEvents,\n  PiTextAreaProps,\n} from \"./textArea.types\";\n\nfunction toCssLength(v: CssLength | undefined): string | undefined {\n  if (v === undefined) return undefined;\n  return typeof v === \"number\" ? `${v}px` : v;\n}\n\nexport const TextAreaComponent = (\n  props: PiCardProps<PiTextAreaProps, PiTextAreaEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue = \"\",\n    placeholder,\n    disabled,\n    readOnly,\n    rows = 4,\n    cols,\n    fieldSizing = \"fixed\",\n    resize,\n    minHeight,\n    maxHeight,\n    width,\n    height,\n    maxWidth,\n    dir,\n    writingMode,\n    submitOnEnter,\n    selfManaged = false,\n    debounceMs = 0,\n    className,\n    style,\n    autoFocus,\n    cardName,\n    onChanged,\n    onSubmitted,\n  } = props;\n\n  // Focus the textarea once, the first time it is mounted/shown (e.g. when a\n  // dialog or drawer opens). Intentionally an empty dependency array — this\n  // must not re-fire on subsequent re-renders.\n  const textareaRef = useRef<HTMLTextAreaElement>(null);\n  useEffect(() => {\n    if (autoFocus) textareaRef.current?.focus();\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  // `id` may be injected by a parent pi/field card via Pihanga's extra-prop\n  // forwarding. Not part of the official type so read 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. When inside a\n  // form, the form itself is the source of truth and buffering mechanism\n  // (see pi/input, pi/text-field, etc.) — every keystroke writes straight to\n  // form.formData via handleChange, and `selfManaged`/`debounceMs` are\n  // ignored: there's no separate \"commit\" step to defer since the form's own\n  // submit action is that commit point.\n  const form = useFormContext();\n  const useFormData = form.isInForm && Boolean(name);\n\n  const canonicalValue = useFormData\n    ? ((form.formData[name!] as string | undefined) ?? \"\")\n    : propValue;\n\n  // Self-managed buffering only applies in standalone mode.\n  const applySelfManaged = selfManaged && !useFormData;\n\n  // ---------------------------------------------------------------------\n  // Self-managed mode (standalone only): keep an internal, always-up-to-date\n  // text buffer so typing never lags, but only dispatch the outgoing\n  // onChanged event on blur (and, optionally, after a trailing debounce\n  // window) — not on every keystroke.\n  // ---------------------------------------------------------------------\n  const [localValue, setLocalValue] = useState(canonicalValue);\n  const debounceTimer = useRef<ReturnType<typeof setTimeout> | null>(null);\n  const pendingValue = useRef<string>(canonicalValue);\n\n  // Keep the local buffer in sync if the canonical value changes from\n  // outside (e.g. a reset) while not actively editing.\n  useEffect(() => {\n    if (applySelfManaged) setLocalValue(canonicalValue);\n  }, [canonicalValue, applySelfManaged]);\n\n  useEffect(() => {\n    return () => {\n      if (debounceTimer.current != null) clearTimeout(debounceTimer.current);\n    };\n  }, []);\n\n  const value = applySelfManaged ? localValue : canonicalValue;\n\n  function commitChange(newValue: string) {\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      onChanged({name, value: newValue});\n    }\n  }\n\n  function handleChange(e: React.ChangeEvent<HTMLTextAreaElement>) {\n    const newValue = e.target.value;\n\n    if (!applySelfManaged) {\n      // Inside a form, or selfManaged not requested: commit on every\n      // keystroke, matching pi/input's default (non-onCommitted) behaviour.\n      commitChange(newValue);\n      return;\n    }\n\n    // Self-managed (standalone): update the visible text immediately, defer\n    // the outgoing event.\n    setLocalValue(newValue);\n    pendingValue.current = newValue;\n\n    if (debounceMs > 0) {\n      if (debounceTimer.current != null) clearTimeout(debounceTimer.current);\n      debounceTimer.current = setTimeout(() => {\n        debounceTimer.current = null;\n        commitChange(pendingValue.current);\n      }, debounceMs);\n    }\n  }\n\n  function handleBlur() {\n    if (!applySelfManaged) return;\n    if (debounceTimer.current != null) {\n      clearTimeout(debounceTimer.current);\n      debounceTimer.current = null;\n    }\n    commitChange(pendingValue.current);\n  }\n\n  function handleKeyDown(e: React.KeyboardEvent<HTMLTextAreaElement>) {\n    if (\n      submitOnEnter &&\n      e.key === \"Enter\" &&\n      !e.shiftKey &&\n      !e.ctrlKey &&\n      !e.metaKey &&\n      !e.altKey\n    ) {\n      e.preventDefault();\n      const currentValue = e.currentTarget.value;\n      if (applySelfManaged && debounceTimer.current != null) {\n        clearTimeout(debounceTimer.current);\n        debounceTimer.current = null;\n        commitChange(currentValue);\n      }\n      onSubmitted({name, value: currentValue});\n    }\n  }\n\n  // Default resize behaviour: content-sizing boxes shouldn't be manually\n  // resizable (dragging writes an inline width/height that permanently\n  // defeats field-sizing: content).\n  const resolvedResize =\n    resize ?? (fieldSizing === \"content\" ? \"none\" : \"vertical\");\n\n  const resizeClass =\n    resolvedResize === \"none\"\n      ? \"resize-none\"\n      : resolvedResize === \"vertical\"\n        ? \"resize-y\"\n        : resolvedResize === \"horizontal\"\n          ? \"resize-x\"\n          : \"resize\";\n\n  // `field-sizing` is expressed as a Tailwind utility class (shipped by\n  // Tailwind v4) rather than an inline style — this is both more idiomatic\n  // for this codebase (the base Textarea already defaults to\n  // `field-sizing-content`) and avoids relying on very new CSS properties\n  // being present in every CSSStyleDeclaration IDL implementation.\n  const fieldSizingClass =\n    fieldSizing === \"content\" ? \"field-sizing-content\" : \"field-sizing-fixed\";\n\n  const inlineStyle: React.CSSProperties = {\n    minHeight: toCssLength(minHeight),\n    maxHeight: toCssLength(maxHeight),\n    width: toCssLength(width),\n    height: toCssLength(height),\n    maxWidth: toCssLength(maxWidth),\n    writingMode,\n    ...style,\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 ?? \"field\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <Textarea\n      ref={textareaRef}\n      id={fieldId}\n      value={value}\n      onChange={handleChange}\n      onBlur={handleBlur}\n      onKeyDown={handleKeyDown}\n      placeholder={placeholder}\n      disabled={disabled}\n      readOnly={readOnly}\n      rows={fieldSizing === \"fixed\" ? rows : undefined}\n      cols={fieldSizing === \"fixed\" ? cols : undefined}\n      dir={dir}\n      aria-invalid={invalid || undefined}\n      data-pihanga={cardName}\n      className={cn(fieldSizingClass, resizeClass, className)}\n      style={inlineStyle}\n    />\n  );\n};\n"],"mappings":";;;;;;;AAWA,SAAS,EAAY,GAA8C;CAC7D,UAAM,KAAA,GACV,OAAO,OAAO,KAAM,WAAW,GAAG,EAAE,MAAM;AAC5C;AAEA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,IAAY,IACnB,gBACA,aACA,aACA,UAAO,GACP,SACA,iBAAc,SACd,WACA,cACA,cACA,UACA,WACA,aACA,QACA,gBACA,kBACA,iBAAc,IACd,gBAAa,GACb,cACA,UACA,cACA,aACA,cACA,mBACE,GAKE,IAAc,EAA4B,IAAI;CACpD,QAAgB;EACd,AAAI,KAAW,EAAY,SAAS,MAAM;CAE5C,GAAG,CAAC,CAAC;CAIL,IAAM,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAQjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAEvC,IAAiB,IACjB,EAAK,SAAS,MAAiC,KACjD,GAGE,IAAmB,KAAe,CAAC,GAQnC,CAAC,GAAY,KAAiB,GAAS,CAAc,GACrD,IAAgB,EAA6C,IAAI,GACjE,IAAe,EAAe,CAAc;CAQlD,AAJA,QAAgB;EACd,AAAI,KAAkB,EAAc,CAAc;CACpD,GAAG,CAAC,GAAgB,CAAgB,CAAC,GAErC,cACe;EACX,AAAI,EAAc,WAAW,QAAM,aAAa,EAAc,OAAO;CACvE,GACC,CAAC,CAAC;CAEL,IAAM,IAAQ,IAAmB,IAAa;CAE9C,SAAS,EAAa,GAAkB;EACtC,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,IAEjC,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAEA,SAAS,EAAa,GAA2C;EAC/D,IAAM,IAAW,EAAE,OAAO;EAE1B,IAAI,CAAC,GAAkB;GAGrB,EAAa,CAAQ;GACrB;EACF;EAOA,AAHA,EAAc,CAAQ,GACtB,EAAa,UAAU,GAEnB,IAAa,MACX,EAAc,WAAW,QAAM,aAAa,EAAc,OAAO,GACrE,EAAc,UAAU,iBAAiB;GAEvC,AADA,EAAc,UAAU,MACxB,EAAa,EAAa,OAAO;EACnC,GAAG,CAAU;CAEjB;CAEA,SAAS,IAAa;EACf,MACD,EAAc,WAAW,SAC3B,aAAa,EAAc,OAAO,GAClC,EAAc,UAAU,OAE1B,EAAa,EAAa,OAAO;CACnC;CAEA,SAAS,EAAc,GAA6C;EAClE,IACE,KACA,EAAE,QAAQ,WACV,CAAC,EAAE,YACH,CAAC,EAAE,WACH,CAAC,EAAE,WACH,CAAC,EAAE,QACH;GACA,EAAE,eAAe;GACjB,IAAM,IAAe,EAAE,cAAc;GAMrC,AALI,KAAoB,EAAc,WAAW,SAC/C,aAAa,EAAc,OAAO,GAClC,EAAc,UAAU,MACxB,EAAa,CAAY,IAE3B,EAAY;IAAC;IAAM,OAAO;GAAY,CAAC;EACzC;CACF;CAKA,IAAM,IACJ,MAAW,MAAgB,YAAY,SAAS,aAE5C,IACJ,MAAmB,SACf,gBACA,MAAmB,aACjB,aACA,MAAmB,eACjB,aACA,UAOJ,IACJ,MAAgB,YAAY,yBAAyB,sBAEjD,IAAmC;EACvC,WAAW,EAAY,CAAS;EAChC,WAAW,EAAY,CAAS;EAChC,OAAO,EAAY,CAAK;EACxB,QAAQ,EAAY,CAAM;EAC1B,UAAU,EAAY,CAAQ;EAC9B;EACA,GAAG;CACL,GAIM,IAAS,GAAG,EAAS,GAAG,KAAQ;CAGtC,OACE,kBAAC,GAAD;EACE,KAAK;EACL,IALY,KAAc;EAMnB;EACP,UAAU;EACV,QAAQ;EACR,WAAW;EACE;EACH;EACA;EACV,MAAM,MAAgB,UAAU,IAAO,KAAA;EACvC,MAAM,MAAgB,UAAU,IAAO,KAAA;EAClC;EACL,gBAAc,KAAW,KAAA;EACzB,gBAAc;EACd,WAAW,EAAG,GAAkB,GAAa,CAAS;EACtD,OAAO;CACR,CAAA;AAEL"}

package/cards/textArea/textArea.types.d.ts

@@ -0,0 +1,147 @@
+import { CSSProperties } from 'react';
+export declare const PI_TEXT_AREA_CARD = "pi/text-area";
+export declare const TextArea: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiTextAreaProps, S, PiTextAreaEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PI_TEXT_AREA_ACTION: {
+    CHANGED: string;
+    SUBMITTED: string;
+};
+export declare const onTextAreaChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiTextAreaChangedEvent>) => void;
+export declare const onTextAreaSubmitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiTextAreaSubmittedEvent>) => void;
+/** A CSS length. Numbers are treated as pixels, strings are used verbatim. */
+export type CssLength = number | string;
+/**
+ * How the textarea sizes itself:
+ *  - "fixed"   (default) — plain `<textarea>` behaviour. Size is governed by
+ *              `rows`/`cols` (and any explicit `width`/`height`); the user
+ *              may resize it per the `resize` prop. Never grows with content.
+ *  - "content" — uses the CSS `field-sizing: content` behaviour: the box
+ *              grows/shrinks to fit its content, clamped by any
+ *              `minHeight`/`maxHeight`/`width`/`height`/`maxWidth` you set.
+ *              `rows`/`cols` are ignored by the browser once this is active.
+ */
+export type PiTextAreaFieldSizing = "fixed" | "content";
+export type PiTextAreaResize = "none" | "vertical" | "horizontal" | "both";
+export type PiTextAreaProps = {
+    /**
+     * 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;
+    /**
+     * Controlled value used in standalone mode (outside a Form).
+     * Ignored when `name` is set and the component is inside a pi/form.
+     */
+    value?: string;
+    /** Placeholder text shown when the box is empty. May contain `\n`. */
+    placeholder?: string;
+    /** When true, the textarea is disabled and non-interactive. */
+    disabled?: boolean;
+    /** When true, the textarea's value cannot be edited by the user. */
+    readOnly?: boolean;
+    /**
+     * Number of visible text lines. Only meaningful when `fieldSizing` is
+     * `"fixed"` — browsers ignore `rows`/`cols` once `field-sizing: content`
+     * is active. Default: `4`.
+     */
+    rows?: number;
+    /** Number of visible character columns. See `rows` for caveats. */
+    cols?: number;
+    /** See `PiTextAreaFieldSizing`. Default: `"fixed"`. */
+    fieldSizing?: PiTextAreaFieldSizing;
+    /**
+     * CSS `resize` behaviour — whether/how the user can drag-resize the box.
+     * Default: `"vertical"` when `fieldSizing` is `"fixed"`, `"none"` when
+     * `fieldSizing` is `"content"` (dragging would otherwise permanently
+     * defeat the content-based sizing by writing an inline width/height).
+     */
+    resize?: PiTextAreaResize;
+    /** Minimum height. Accepts CSS units like `"2lh"`, `"4rem"`, or a number of px. */
+    minHeight?: CssLength;
+    /** Maximum height. Once reached, content scrolls instead of growing further. */
+    maxHeight?: CssLength;
+    /** Explicit width. Freezes the inline axis even when `fieldSizing="content"`. */
+    width?: CssLength;
+    /** Explicit height. Freezes the block axis even when `fieldSizing="content"`. */
+    height?: CssLength;
+    /**
+     * Maximum width — a guard against an unconstrained `fieldSizing="content"`
+     * box escaping its parent container.
+     */
+    maxWidth?: CssLength;
+    /** Text direction. Default: inherited from the document. */
+    dir?: "ltr" | "rtl";
+    /**
+     * CSS `writing-mode`. With `"vertical-rl"` the sizing axes swap: content
+     * growth under `fieldSizing="content"` runs horizontally, not vertically.
+     */
+    writingMode?: "horizontal-tb" | "vertical-rl" | "vertical-lr";
+    /**
+     * When true, pressing Enter (without Shift/Ctrl/Meta/Alt) fires
+     * `onSubmitted` with the current text instead of inserting a newline.
+     * Shift+Enter (etc.) still inserts a newline. Default: `false`.
+     */
+    submitOnEnter?: boolean;
+    /**
+     * **Standalone mode only** (ignored when used inside a `pi/form` card —
+     * see below). When true, the textarea keeps its own internal text state
+     * so the visible text always updates immediately as the user types, but
+     * the outgoing `onChanged` event is only dispatched at a "commit" point
+     * instead of on every keystroke:
+     *
+     *  - always on blur,
+     *  - and, if `debounceMs > 0`, also after that many ms of typing
+     *    inactivity (a trailing debounce), so the value is committed even if
+     *    the user never blurs the field (e.g. drives an autosave / API call).
+     *
+     * Use this to avoid flooding the host app / reducer with an event per
+     * keystroke for a card whose `onChanged` handler is expensive.
+     *
+     * When the card is used inside a `pi/form` (i.e. `name` is set and a
+     * `pi/form` ancestor is present), this prop has no effect: form fields
+     * always write back to form state on every keystroke via
+     * `form.handleChange`, exactly like `pi/input` and `pi/text-field` — the
+     * form's own submit action is the natural "commit" point in that case.
+     *
+     * Default: `false` (dispatches `onChanged` on every keystroke, as
+     * before).
+     */
+    selfManaged?: boolean;
+    /**
+     * Trailing-debounce window (ms) for committing changes while
+     * `selfManaged` is true (standalone mode only). `0` (default) means no
+     * debounce — the value is only committed on blur. Ignored when
+     * `selfManaged` is `false`, or when the card is inside a `pi/form`.
+     */
+    debounceMs?: number;
+    /** Additional class names merged onto the root `<textarea>`. */
+    className?: string;
+    /** Additional inline styles merged onto the root `<textarea>` (highest precedence). */
+    style?: CSSProperties;
+    /**
+     * When true, the textarea grabs keyboard focus the first time it is
+     * mounted/shown (e.g. when a dialog or drawer opens). Only applies once,
+     * on mount — it does not re-focus on subsequent re-renders.
+     */
+    autoFocus?: boolean;
+};
+export type PiTextAreaChangedEvent = {
+    /** Field name, mirrors the `name` prop if provided. */
+    name?: string;
+    /** New value after the change. */
+    value: string;
+};
+export type PiTextAreaSubmittedEvent = {
+    /** Field name, mirrors the `name` prop if provided. */
+    name?: string;
+    /** The current text at the time Enter was pressed. */
+    value: string;
+};
+export type PiTextAreaEvents = {
+    onChanged: PiTextAreaChangedEvent;
+    onSubmitted: PiTextAreaSubmittedEvent;
+};

package/cards/textArea/textArea.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/textArea/textArea.types.ts
+var r = "pi/text-area", i = e(r), a = n(r, ["changed", "submitted"]), o = t(a.CHANGED), s = t(a.SUBMITTED);
+//#endregion
+export { a as PI_TEXT_AREA_ACTION, r as PI_TEXT_AREA_CARD, i as TextArea, o as onTextAreaChanged, s as onTextAreaSubmitted };
+
+//# sourceMappingURL=textArea.types.js.map

package/cards/textArea/textArea.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"textArea.types.js","names":[],"sources":["../../../src/cards/textArea/textArea.types.ts"],"sourcesContent":["import type {CSSProperties} from \"react\";\nimport {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_TEXT_AREA_CARD = \"pi/text-area\";\n\nexport const TextArea = createCardDeclaration<\n  PiTextAreaProps,\n  PiTextAreaEvents\n>(PI_TEXT_AREA_CARD);\n\nexport const PI_TEXT_AREA_ACTION = registerActions(PI_TEXT_AREA_CARD, [\n  \"changed\",\n  \"submitted\",\n]);\n\nexport const onTextAreaChanged = createOnAction<PiTextAreaChangedEvent>(\n  PI_TEXT_AREA_ACTION.CHANGED,\n);\n\nexport const onTextAreaSubmitted = createOnAction<PiTextAreaSubmittedEvent>(\n  PI_TEXT_AREA_ACTION.SUBMITTED,\n);\n\n/** A CSS length. Numbers are treated as pixels, strings are used verbatim. */\nexport type CssLength = number | string;\n\n/**\n * How the textarea sizes itself:\n *  - \"fixed\"   (default) — plain `<textarea>` behaviour. Size is governed by\n *              `rows`/`cols` (and any explicit `width`/`height`); the user\n *              may resize it per the `resize` prop. Never grows with content.\n *  - \"content\" — uses the CSS `field-sizing: content` behaviour: the box\n *              grows/shrinks to fit its content, clamped by any\n *              `minHeight`/`maxHeight`/`width`/`height`/`maxWidth` you set.\n *              `rows`/`cols` are ignored by the browser once this is active.\n */\nexport type PiTextAreaFieldSizing = \"fixed\" | \"content\";\n\nexport type PiTextAreaResize = \"none\" | \"vertical\" | \"horizontal\" | \"both\";\n\nexport type PiTextAreaProps = {\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  /** Placeholder text shown when the box is empty. May contain `\\n`. */\n  placeholder?: string;\n\n  /** When true, the textarea is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /** When true, the textarea's value cannot be edited by the user. */\n  readOnly?: boolean;\n\n  /**\n   * Number of visible text lines. Only meaningful when `fieldSizing` is\n   * `\"fixed\"` — browsers ignore `rows`/`cols` once `field-sizing: content`\n   * is active. Default: `4`.\n   */\n  rows?: number;\n\n  /** Number of visible character columns. See `rows` for caveats. */\n  cols?: number;\n\n  /** See `PiTextAreaFieldSizing`. Default: `\"fixed\"`. */\n  fieldSizing?: PiTextAreaFieldSizing;\n\n  /**\n   * CSS `resize` behaviour — whether/how the user can drag-resize the box.\n   * Default: `\"vertical\"` when `fieldSizing` is `\"fixed\"`, `\"none\"` when\n   * `fieldSizing` is `\"content\"` (dragging would otherwise permanently\n   * defeat the content-based sizing by writing an inline width/height).\n   */\n  resize?: PiTextAreaResize;\n\n  /** Minimum height. Accepts CSS units like `\"2lh\"`, `\"4rem\"`, or a number of px. */\n  minHeight?: CssLength;\n\n  /** Maximum height. Once reached, content scrolls instead of growing further. */\n  maxHeight?: CssLength;\n\n  /** Explicit width. Freezes the inline axis even when `fieldSizing=\"content\"`. */\n  width?: CssLength;\n\n  /** Explicit height. Freezes the block axis even when `fieldSizing=\"content\"`. */\n  height?: CssLength;\n\n  /**\n   * Maximum width — a guard against an unconstrained `fieldSizing=\"content\"`\n   * box escaping its parent container.\n   */\n  maxWidth?: CssLength;\n\n  /** Text direction. Default: inherited from the document. */\n  dir?: \"ltr\" | \"rtl\";\n\n  /**\n   * CSS `writing-mode`. With `\"vertical-rl\"` the sizing axes swap: content\n   * growth under `fieldSizing=\"content\"` runs horizontally, not vertically.\n   */\n  writingMode?: \"horizontal-tb\" | \"vertical-rl\" | \"vertical-lr\";\n\n  /**\n   * When true, pressing Enter (without Shift/Ctrl/Meta/Alt) fires\n   * `onSubmitted` with the current text instead of inserting a newline.\n   * Shift+Enter (etc.) still inserts a newline. Default: `false`.\n   */\n  submitOnEnter?: boolean;\n\n  /**\n   * **Standalone mode only** (ignored when used inside a `pi/form` card —\n   * see below). When true, the textarea keeps its own internal text state\n   * so the visible text always updates immediately as the user types, but\n   * the outgoing `onChanged` event is only dispatched at a \"commit\" point\n   * instead of on every keystroke:\n   *\n   *  - always on blur,\n   *  - and, if `debounceMs > 0`, also after that many ms of typing\n   *    inactivity (a trailing debounce), so the value is committed even if\n   *    the user never blurs the field (e.g. drives an autosave / API call).\n   *\n   * Use this to avoid flooding the host app / reducer with an event per\n   * keystroke for a card whose `onChanged` handler is expensive.\n   *\n   * When the card is used inside a `pi/form` (i.e. `name` is set and a\n   * `pi/form` ancestor is present), this prop has no effect: form fields\n   * always write back to form state on every keystroke via\n   * `form.handleChange`, exactly like `pi/input` and `pi/text-field` — the\n   * form's own submit action is the natural \"commit\" point in that case.\n   *\n   * Default: `false` (dispatches `onChanged` on every keystroke, as\n   * before).\n   */\n  selfManaged?: boolean;\n\n  /**\n   * Trailing-debounce window (ms) for committing changes while\n   * `selfManaged` is true (standalone mode only). `0` (default) means no\n   * debounce — the value is only committed on blur. Ignored when\n   * `selfManaged` is `false`, or when the card is inside a `pi/form`.\n   */\n  debounceMs?: number;\n\n  /** Additional class names merged onto the root `<textarea>`. */\n  className?: string;\n\n  /** Additional inline styles merged onto the root `<textarea>` (highest precedence). */\n  style?: CSSProperties;\n\n  /**\n   * When true, the textarea grabs keyboard focus the first time it is\n   * mounted/shown (e.g. when a dialog or drawer opens). Only applies once,\n   * on mount — it does not re-focus on subsequent re-renders.\n   */\n  autoFocus?: boolean;\n};\n\nexport type PiTextAreaChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New value after the change. */\n  value: string;\n};\n\nexport type PiTextAreaSubmittedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** The current text at the time Enter was pressed. */\n  value: string;\n};\n\nexport type PiTextAreaEvents = {\n  onChanged: PiTextAreaChangedEvent;\n  onSubmitted: PiTextAreaSubmittedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAoB,gBAEpB,IAAW,EAGtB,CAAiB,GAEN,IAAsB,EAAgB,GAAmB,CACpE,WACA,WACF,CAAC,GAEY,IAAoB,EAC/B,EAAoB,OACtB,GAEa,IAAsB,EACjC,EAAoB,SACtB"}

package/cards/textField/textField.types.d.ts

@@ -3,11 +3,11 @@ export declare const TextField: <S extends import('@pihanga2/core').ReduxState>(
 export declare const PI_TEXT_FIELD_ACTION: {
     CHANGED: string;
 };
-export declare const onTextFieldChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onTextFieldChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiTextFieldChangedEvent>) => void;
 /** @deprecated Use `onTextFieldChanged` instead. */
-export declare const onPiTextFieldChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onPiTextFieldChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiTextFieldChangedEvent>) => void;
 export type PiTextFieldProps = {

package/cards/toast/toast.types.d.ts

@@ -38,17 +38,17 @@ export declare const dispatchShowToast: (d: DispatchF, ev: ShowToastEvent) => vo
  * });
  * ```
  */
-export declare const onShowToast: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onShowToast: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & ShowToastEvent>) => void;
 export declare const PI_TOAST_ACTION: {
     CLOSED: string;
 };
-export declare const onToastClosed: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onToastClosed: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiToastClosedEvent>) => void;
 /** @deprecated Use `onToastClosed` instead. */
-export declare const onPiToastClosed: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onPiToastClosed: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiToastClosedEvent>) => void;
 /**

package/cards/toggleGroup/toggleGroup.types.d.ts

@@ -3,11 +3,11 @@ export declare const ToggleGroup: <S extends import('@pihanga2/core').ReduxState
 export declare const PI_TOGGLE_GROUP_ACTION: {
     CHANGED: string;
 };
-export declare const onToggleGroupChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onToggleGroupChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiToggleGroupChangedEvent>) => void;
 /** @deprecated Use `onToggleGroupChanged` instead. */
-export declare const onPiToggleGroupChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+export declare const onPiToggleGroupChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiToggleGroupChangedEvent>) => void;
 export type PiToggleGroupItem = {

package/components/ui/empty.js

@@ -0,0 +1,40 @@
+import { cn as e } from "../../lib/utils.js";
+import { jsx as t } from "react/jsx-runtime";
+import { cva as n } from "class-variance-authority";
+//#region src/components/ui/empty.tsx
+function r({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "empty",
+		className: e("flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12", n),
+		...r
+	});
+}
+var i = n("mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0", {
+	variants: { variant: {
+		default: "bg-transparent",
+		icon: "bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6"
+	} },
+	defaultVariants: { variant: "default" }
+});
+function a({ className: n, variant: r = "default", ...a }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "empty-icon",
+		"data-variant": r,
+		className: e(i({
+			variant: r,
+			className: n
+		})),
+		...a
+	});
+}
+function o({ className: n, ...r }) {
+	return /* @__PURE__ */ t("div", {
+		"data-slot": "empty-content",
+		className: e("flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm", n),
+		...r
+	});
+}
+//#endregion
+export { r as Empty, o as EmptyContent, a as EmptyMedia };
+
+//# sourceMappingURL=empty.js.map

package/components/ui/empty.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"empty.js","names":[],"sources":["../../../src/components/ui/empty.tsx"],"sourcesContent":["import {cva, type VariantProps} from \"class-variance-authority\";\n\nimport {cn} from \"@/lib/utils\";\n\nfunction Empty({className, ...props}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty\"\n      className={cn(\n        \"flex min-w-0 flex-1 flex-col items-center justify-center gap-6 text-balance rounded-lg border-dashed p-6 text-center md:p-12\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyHeader({className, ...props}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-header\"\n      className={cn(\n        \"flex max-w-sm flex-col items-center gap-2 text-center\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nconst emptyMediaVariants = cva(\n  \"mb-2 flex shrink-0 items-center justify-center [&_svg]:pointer-events-none [&_svg]:shrink-0\",\n  {\n    variants: {\n      variant: {\n        default: \"bg-transparent\",\n        icon: \"bg-muted text-foreground flex size-10 shrink-0 items-center justify-center rounded-lg [&_svg:not([class*='size-'])]:size-6\",\n      },\n    },\n    defaultVariants: {\n      variant: \"default\",\n    },\n  },\n);\n\nfunction EmptyMedia({\n  className,\n  variant = \"default\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof emptyMediaVariants>) {\n  return (\n    <div\n      data-slot=\"empty-icon\"\n      data-variant={variant}\n      className={cn(emptyMediaVariants({variant, className}))}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyTitle({className, ...props}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-title\"\n      className={cn(\"text-lg font-medium tracking-tight\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyDescription({className, ...props}: React.ComponentProps<\"p\">) {\n  return (\n    <div\n      data-slot=\"empty-description\"\n      className={cn(\n        \"text-muted-foreground [&>a:hover]:text-primary text-sm/relaxed [&>a]:underline [&>a]:underline-offset-4\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction EmptyContent({className, ...props}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"empty-content\"\n      className={cn(\n        \"flex w-full min-w-0 max-w-sm flex-col items-center gap-4 text-balance text-sm\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Empty,\n  EmptyHeader,\n  EmptyTitle,\n  EmptyDescription,\n  EmptyContent,\n  EmptyMedia,\n};\n"],"mappings":";;;;AAIA,SAAS,EAAM,EAAC,cAAW,GAAG,KAAqC;CACjE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,gIACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAeA,IAAM,IAAqB,EACzB,+FACA;CACE,UAAU,EACR,SAAS;EACP,SAAS;EACT,MAAM;CACR,EACF;CACA,iBAAiB,EACf,SAAS,UACX;AACF,CACF;AAEA,SAAS,EAAW,EAClB,cACA,aAAU,WACV,GAAG,KACqE;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,EAAG,EAAmB;GAAC;GAAS;EAAS,CAAC,CAAC;EACtD,GAAI;CACL,CAAA;AAEL;AAyBA,SAAS,EAAa,EAAC,cAAW,GAAG,KAAqC;CACxE,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,iFACA,CACF;EACA,GAAI;CACL,CAAA;AAEL"}