@pihanga2/shadcn 0.2.13 → 0.2.15

package/README.md

@@ -62,7 +62,7 @@ import "@pihanga2/shadcn/cards/dataTable";
 
 ---
 
-## Included cards (43)
+## Included cards (44)
 
 - `avatar`
 - `badge`
@@ -84,6 +84,7 @@ import "@pihanga2/shadcn/cards/dataTable";
 - `infoCard`
 - `input`
 - `jsonViewer`
+- `keyboardOverlay`
 - `list`
 - `loadingOverlay`
 - `loadingSkeleton`

package/cards/fileDrop/fileDrop.component.js

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

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

@@ -1 +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"}
+{"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  getFileDropTheme,\n  type FileDropEvents,\n  type FileDropProps,\n} from \"./fileDrop.types\";\nimport {getIcon} from \"../icons\";\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\n// eslint-disable-next-line react-refresh/only-export-components\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    icon,\n    iconProps,\n    browseLabel,\n    onFileDropped,\n    onError,\n    cardName,\n    theme,\n    classNames,\n    className,\n    _cls,\n  } = props;\n\n  // Merge theme (base) with per-card classNames (overrides)\n  const cn = {...(theme ? getFileDropTheme(theme) : {}), ...classNames};\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    const dzCn = [\"dropzone-msg\", cn.dropZone].filter(Boolean).join(\" \");\n    return (\n      <div className={dzCn} style={dropStyle as React.CSSProperties}>\n        {icon && <div className={cn.icon}>{getIcon(icon, iconProps)}</div>}\n        {title && (\n          <h3\n            className={[\"dropzone-msg-title\", cn.title]\n              .filter(Boolean)\n              .join(\" \")}\n          >\n            {title}\n          </h3>\n        )}\n        {description && (\n          <span\n            className={[\"dropzone-msg-desc\", cn.description]\n              .filter(Boolean)\n              .join(\" \")}\n          >\n            {description}\n          </span>\n        )}\n        {browseLabel && <div className={cn.browseButton}>{browseLabel}</div>}\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  // classNames.root takes precedence over the legacy className prop\n  const rootCn = _cls(\"root\", cn.root ?? className);\n  return (\n    <div className={rootCn} data-pihanga={cardName}>\n      {showProgress ? renderProgress() : renderFileUploader()}\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAcA,IAAM,IAAM,OAAO,IAAI,mCAAmC,GAEpD,IAAiB;AAMvB,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,SACA,cACA,gBACA,kBACA,YACA,aACA,UACA,eACA,cACA,YACE,GAGE,IAAK;EAAC,GAAI,IAAQ,EAAiB,CAAK,IAAI,CAAC;EAAI,GAAG;CAAU;CAEpE,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;EAE5C,OACE,kBAAC,OAAD;GAAK,WAFM,CAAC,gBAAgB,EAAG,QAAQ,EAAE,OAAO,OAAO,EAAE,KAAK,GAE9C;GAAM,OAAO;aAA7B;IACG,KAAQ,kBAAC,OAAD;KAAK,WAAW,EAAG;eAAO,EAAQ,GAAM,CAAS;IAAO,CAAA;IAChE,KACC,kBAAC,MAAD;KACE,WAAW,CAAC,sBAAsB,EAAG,KAAK,EACvC,OAAO,OAAO,EACd,KAAK,GAAG;eAEV;IACC,CAAA;IAEL,KACC,kBAAC,QAAD;KACE,WAAW,CAAC,qBAAqB,EAAG,WAAW,EAC5C,OAAO,OAAO,EACd,KAAK,GAAG;eAEV;IACG,CAAA;IAEP,KAAe,kBAAC,OAAD;KAAK,WAAW,EAAG;eAAe;IAAiB,CAAA;GAChE;;CAET;CAEA,SAAS,IAAsC;EAC7C,OACE,kBAAC,GAAD;GACgB;GACd,aAAa;GACb,MAAK;GACL,OAAO;GACP,YAAW;aAEV,EAAe;EACJ,CAAA;CAElB;CAIA,OACE,kBAAC,OAAD;EAAK,WAFQ,EAAK,QAAQ,EAAG,QAAQ,CAErB;EAAQ,gBAAc;YACnC,IAAe,EAAe,IAAI,EAAmB;CACnD,CAAA;AAET"}

package/cards/fileDrop/fileDrop.types.d.ts

@@ -10,6 +10,38 @@ export declare const onFileDropped: <S extends import('@pihanga2/core').ReduxSta
 export declare const onFileDropError: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & FileDropErrorEvent>) => void;
+/** Per-element Tailwind / CSS class overrides for the FileDrop card. */
+export type FileDropClassNames = {
+    /** Outermost wrapper `<div>`. Overrides the legacy `className` prop. */
+    root?: string;
+    /** Inner drop-zone content wrapper `<div>`. */
+    dropZone?: string;
+    /** Icon wrapper `<div>`. */
+    icon?: string;
+    /** `<h3>` title element. */
+    title?: string;
+    /** Description `<span>`. */
+    description?: string;
+    /** Browse-button `<div>`. */
+    browseButton?: string;
+};
+/**
+ * Register a named FileDrop theme.
+ * Use the returned name string as the `theme` prop on a `FileDrop` card.
+ * Per-card `classNames` always override the theme.
+ *
+ * @example
+ * ```ts
+ * export const UPLOAD_THEME = registerFileDropTheme("upload-card", {
+ *   root: "flex items-center justify-center p-8 rounded-2xl border border-dashed ...",
+ *   dropZone: "flex flex-col items-center gap-3 text-center",
+ *   ...
+ * });
+ * ```
+ */
+export declare function registerFileDropTheme(name: string, classNames: FileDropClassNames): string;
+/** Resolve a registered theme by name. Returns `undefined` for unknown names. */
+export declare function getFileDropTheme(name: string): FileDropClassNames | undefined;
 export type FileDropProps<S = Record<string, unknown>> = {
     /** Accepted file extensions, e.g. ["JPG", "PNG", "PDF"]. Defaults to ["JPG", "PNG", "GIF"]. */
     fileTypes?: string[];
@@ -25,7 +57,24 @@ export type FileDropProps<S = Record<string, unknown>> = {
     progressStyle?: Record<string, unknown>;
     /** Current upload progress (0–100). Only used when `showProgress` is true. */
     progress?: number;
+    /** Registered icon name (see src/pihanga/icons.ts) rendered above the title. */
+    icon?: string;
+    /** Extra props forwarded to the icon element (e.g. `{ className: "size-6" }`). */
+    iconProps?: Record<string, any>;
+    /** Label for the browse-files button. When omitted the button is not rendered. */
+    browseLabel?: string;
     style?: S;
+    /**
+     * Name of a pre-registered theme (see `registerFileDropTheme`).
+     * Per-card `classNames` always override the theme on a key-by-key basis.
+     */
+    theme?: string;
+    /**
+     * Per-element class overrides. Merged on top of any resolved `theme`.
+     * `classNames.root` takes precedence over the legacy `className` prop.
+     */
+    classNames?: FileDropClassNames;
+    /** @deprecated Prefer `classNames.root`. Kept for backward compatibility. */
     className?: string;
 };
 export declare const DEF_FILE_DROP_FILE_TYPES: string[];

package/cards/fileDrop/fileDrop.types.js

@@ -1,11 +1,18 @@
 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 = [
+var r = "shad/file-drop", i = e(r), a = n(r, ["file_dropped", "error"]), o = t(a.FILE_DROPPED), s = t(a.ERROR), c = {};
+function l(e, t) {
+	return c[e] !== void 0 && console.warn(`FileDrop theme '${e}' is already registered — overwriting`), c[e] = t, e;
+}
+function u(e) {
+	return c[e];
+}
+var d = [
 	"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 };
+export { d as DEF_FILE_DROP_FILE_TYPES, a as FILE_DROP_ACTION, r as FILE_DROP_CARD, i as FileDrop, u as getFileDropTheme, s as onFileDropError, o as onFileDropped, l as registerFileDropTheme };
 
 //# sourceMappingURL=fileDrop.types.js.map

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

@@ -1 +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"}
+{"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\n/** Per-element Tailwind / CSS class overrides for the FileDrop card. */\nexport type FileDropClassNames = {\n  /** Outermost wrapper `<div>`. Overrides the legacy `className` prop. */\n  root?: string;\n  /** Inner drop-zone content wrapper `<div>`. */\n  dropZone?: string;\n  /** Icon wrapper `<div>`. */\n  icon?: string;\n  /** `<h3>` title element. */\n  title?: string;\n  /** Description `<span>`. */\n  description?: string;\n  /** Browse-button `<div>`. */\n  browseButton?: string;\n};\n\n// ── Theme registry ───────────────────────────────────────────────────────────\n\nconst _fileDropThemes: Record<string, FileDropClassNames> = {};\n\n/**\n * Register a named FileDrop theme.\n * Use the returned name string as the `theme` prop on a `FileDrop` card.\n * Per-card `classNames` always override the theme.\n *\n * @example\n * ```ts\n * export const UPLOAD_THEME = registerFileDropTheme(\"upload-card\", {\n *   root: \"flex items-center justify-center p-8 rounded-2xl border border-dashed ...\",\n *   dropZone: \"flex flex-col items-center gap-3 text-center\",\n *   ...\n * });\n * ```\n */\nexport function registerFileDropTheme(\n  name: string,\n  classNames: FileDropClassNames,\n): string {\n  if (_fileDropThemes[name] !== undefined) {\n    console.warn(\n      `FileDrop theme '${name}' is already registered — overwriting`,\n    );\n  }\n  _fileDropThemes[name] = classNames;\n  return name;\n}\n\n/** Resolve a registered theme by name. Returns `undefined` for unknown names. */\nexport function getFileDropTheme(name: string): FileDropClassNames | undefined {\n  return _fileDropThemes[name];\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  /** Registered icon name (see src/pihanga/icons.ts) rendered above the title. */\n  icon?: string;\n  /** Extra props forwarded to the icon element (e.g. `{ className: \"size-6\" }`). */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  iconProps?: Record<string, any>;\n  /** Label for the browse-files button. When omitted the button is not rendered. */\n  browseLabel?: string;\n\n  style?: S;\n  /**\n   * Name of a pre-registered theme (see `registerFileDropTheme`).\n   * Per-card `classNames` always override the theme on a key-by-key basis.\n   */\n  theme?: string;\n  /**\n   * Per-element class overrides. Merged on top of any resolved `theme`.\n   * `classNames.root` takes precedence over the legacy `className` prop.\n   */\n  classNames?: FileDropClassNames;\n  /** @deprecated Prefer `classNames.root`. Kept for backward compatibility. */\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,GAoBM,IAAsD,CAAC;AAgB7D,SAAgB,EACd,GACA,GACQ;CAOR,OANI,EAAgB,OAAU,KAAA,KAC5B,QAAQ,KACN,mBAAmB,EAAK,sCAC1B,GAEF,EAAgB,KAAQ,GACjB;AACT;AAGA,SAAgB,EAAiB,GAA8C;CAC7E,OAAO,EAAgB;AACzB;AAyCA,IAAa,IAA2B;CAAC;CAAO;CAAO;AAAK"}

package/cards/fileDrop/index.js

@@ -1,13 +1,19 @@
-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({
+import { DEF_FILE_DROP_FILE_TYPES as e, FILE_DROP_ACTION as t, FILE_DROP_CARD as n, FileDrop as r, getFileDropTheme as i, onFileDropError as a, onFileDropped as o, registerFileDropTheme as s } from "./fileDrop.types.js";
+import { FileDropComponent as c, get_last_dropped as l } from "./fileDrop.component.js";
+import { actionTypesToEvents as u, registerCardComponent as d } from "@pihanga2/core";
+d({
 	name: n,
-	component: o,
-	events: c(t)
+	component: c,
+	events: u(t)
+}), s("default-1", {
+	root: "flex items-center justify-center p-8 rounded-2xl border border-dashed border-slate-300 bg-slate-50",
+	dropZone: "flex flex-col items-center gap-3 text-center",
+	icon: "flex items-center justify-center size-12 rounded-xl bg-slate-100",
+	title: "text-lg font-bold text-slate-900",
+	description: "text-sm text-slate-500 max-w-xs",
+	browseButton: "mt-2 px-5 py-2 rounded-lg bg-slate-900 text-white text-sm font-semibold cursor-pointer"
 });
 //#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 };
+export { e as DEF_FILE_DROP_FILE_TYPES, t as FILE_DROP_ACTION, n as FILE_DROP_CARD, r as FileDrop, i as getFileDropTheme, l as get_last_dropped, a as onFileDropError, o as onFileDropped, s as registerFileDropTheme };
 
 //# sourceMappingURL=index.js.map

package/cards/fileDrop/index.js.map

@@ -1 +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"}
+{"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 {\n  FILE_DROP_ACTION,\n  FILE_DROP_CARD,\n  registerFileDropTheme,\n} 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\nregisterFileDropTheme(\"default-1\", {\n  root: \"flex items-center justify-center p-8 rounded-2xl border border-dashed border-slate-300 bg-slate-50\",\n  dropZone: \"flex flex-col items-center gap-3 text-center\",\n  icon: \"flex items-center justify-center size-12 rounded-xl bg-slate-100\",\n  title: \"text-lg font-bold text-slate-900\",\n  description: \"text-sm text-slate-500 max-w-xs\",\n  browseButton:\n    \"mt-2 px-5 py-2 rounded-lg bg-slate-900 text-white text-sm font-semibold cursor-pointer\",\n});\n"],"mappings":";;;AAYA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAgB;AAC9C,CAAC,GAED,EAAsB,aAAa;CACjC,MAAM;CACN,UAAU;CACV,MAAM;CACN,OAAO;CACP,aAAa;CACb,cACE;AACJ,CAAC"}

package/cards/keyboardOverlay/index.d.ts

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

package/cards/keyboardOverlay/index.js

@@ -0,0 +1,13 @@
+import { KeyboardOverlayComponent as e } from "./keyboardOverlay.component.js";
+import { KEYBOARD_OVERLAY_ACTION as t, KEYBOARD_OVERLAY_CARD as n, KeyboardOverlay as r, onKeyboardShortcut as i } from "./keyboardOverlay.types.js";
+import { actionTypesToEvents as a, registerCardComponent as o } from "@pihanga2/core";
+//#region src/cards/keyboardOverlay/index.ts
+o({
+	name: n,
+	component: e,
+	events: a(t)
+});
+//#endregion
+export { t as KEYBOARD_OVERLAY_ACTION, n as KEYBOARD_OVERLAY_CARD, r as KeyboardOverlay, i as onKeyboardShortcut };
+
+//# sourceMappingURL=index.js.map

package/cards/keyboardOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/keyboardOverlay/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {KeyboardOverlayComponent} from \"./keyboardOverlay.component\";\nimport {\n  KEYBOARD_OVERLAY_ACTION,\n  KEYBOARD_OVERLAY_CARD,\n} from \"./keyboardOverlay.types\";\n\nexport * from \"./keyboardOverlay.types\";\n\nregisterCardComponent({\n  name: KEYBOARD_OVERLAY_CARD,\n  component: KeyboardOverlayComponent,\n  events: actionTypesToEvents(KEYBOARD_OVERLAY_ACTION),\n});\n"],"mappings":";;;;AAUA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAuB;AACrD,CAAC"}

package/cards/keyboardOverlay/keyboardOverlay.component.d.ts

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

package/cards/keyboardOverlay/keyboardOverlay.component.js

@@ -0,0 +1,64 @@
+import { useEffect as e, useRef as t } from "react";
+import { Card as n } from "@pihanga2/core";
+import { jsx as r } from "react/jsx-runtime";
+//#region src/cards/keyboardOverlay/keyboardOverlay.component.tsx
+function i(e) {
+	let t = e;
+	for (; t;) {
+		let e = t.getAttribute("data-pihanga");
+		if (e) return e;
+		t = t.parentElement;
+	}
+}
+function a(e, t) {
+	let n = new Set(t);
+	return (n.has("ctrl") ? e.ctrlKey : !e.ctrlKey) && (n.has("shift") ? e.shiftKey : !e.shiftKey) && (n.has("alt") ? e.altKey : !e.altKey) && (n.has("meta") ? e.metaKey : !e.metaKey);
+}
+var o = (o) => {
+	let { content: s, shortcuts: c, onShortcut: l, cardName: u, className: d, style: f } = o, p = t({
+		x: 0,
+		y: 0
+	});
+	return e(() => {
+		let e = (e) => {
+			p.current = {
+				x: e.clientX,
+				y: e.clientY
+			};
+		}, t = (e) => {
+			for (let t of c) {
+				let n = t.modifiers ?? [];
+				if (!(e.key === t.key || e.code === t.key) || !a(e, n)) continue;
+				t.propagate || (e.preventDefault(), e.stopPropagation());
+				let { x: r, y: o } = p.current, s = i(document.elementFromPoint(r, o));
+				l({
+					shortcutId: t.id ?? t.key,
+					key: t.key,
+					modifiers: n,
+					dataPihanga: s,
+					cursorX: r,
+					cursorY: o
+				});
+				break;
+			}
+		};
+		return document.addEventListener("mousemove", e, { passive: !0 }), document.addEventListener("keydown", t, { capture: !0 }), () => {
+			document.removeEventListener("mousemove", e), document.removeEventListener("keydown", t, { capture: !0 });
+		};
+	}, [c, l]), /* @__PURE__ */ r("div", {
+		"data-pihanga": u,
+		className: d,
+		style: {
+			...f,
+			position: "relative"
+		},
+		children: /* @__PURE__ */ r(n, {
+			cardName: s,
+			parentCard: u
+		})
+	});
+};
+//#endregion
+export { o as KeyboardOverlayComponent };
+
+//# sourceMappingURL=keyboardOverlay.component.js.map

package/cards/keyboardOverlay/keyboardOverlay.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardOverlay.component.js","names":[],"sources":["../../../src/cards/keyboardOverlay/keyboardOverlay.component.tsx"],"sourcesContent":["import {Card, type PiCardProps} from \"@pihanga2/core\";\nimport React, {useEffect, useRef} from \"react\";\n\nimport type {\n  KeyboardOverlayEvents,\n  KeyboardOverlayProps,\n  Modifier,\n} from \"./keyboardOverlay.types\";\n\n/** Walk up the DOM from `el` and return the first `data-pihanga` value found. */\nfunction findDataPihanga(el: Element | null): string | undefined {\n  let node: Element | null = el;\n  while (node) {\n    const attr = node.getAttribute(\"data-pihanga\");\n    if (attr) return attr;\n    node = node.parentElement;\n  }\n  return undefined;\n}\n\n/** Returns `true` when the keyboard event's active modifiers exactly match the definition. */\nfunction modifiersMatch(e: KeyboardEvent, required: Modifier[]): boolean {\n  const need = new Set(required);\n  return (\n    (need.has(\"ctrl\") ? e.ctrlKey : !e.ctrlKey) &&\n    (need.has(\"shift\") ? e.shiftKey : !e.shiftKey) &&\n    (need.has(\"alt\") ? e.altKey : !e.altKey) &&\n    (need.has(\"meta\") ? e.metaKey : !e.metaKey)\n  );\n}\n\nexport const KeyboardOverlayComponent = (\n  props: PiCardProps<KeyboardOverlayProps, KeyboardOverlayEvents>,\n): React.ReactNode => {\n  const {content, shortcuts, onShortcut, cardName, className, style} = props;\n\n  // Track cursor position passively — no re-render needed.\n  const cursorPos = useRef<{x: number; y: number}>({x: 0, y: 0});\n\n  useEffect(() => {\n    const onMouseMove = (e: MouseEvent) => {\n      cursorPos.current = {x: e.clientX, y: e.clientY};\n    };\n\n    const onKeyDown = (e: KeyboardEvent) => {\n      for (const shortcut of shortcuts) {\n        const mods: Modifier[] = shortcut.modifiers ?? [];\n        const keyMatch = e.key === shortcut.key || e.code === shortcut.key;\n        if (!keyMatch || !modifiersMatch(e, mods)) continue;\n\n        // Only consume the event when propagate !== true.\n        if (!shortcut.propagate) {\n          e.preventDefault();\n          e.stopPropagation();\n        }\n\n        const {x, y} = cursorPos.current;\n        const el = document.elementFromPoint(x, y);\n        const dataPihanga = findDataPihanga(el);\n\n        onShortcut({\n          shortcutId: shortcut.id ?? shortcut.key,\n          key: shortcut.key,\n          modifiers: mods,\n          dataPihanga,\n          cursorX: x,\n          cursorY: y,\n        });\n        break;\n      }\n    };\n\n    // capture:true ensures we see the keydown before any focused child element.\n    document.addEventListener(\"mousemove\", onMouseMove, {passive: true});\n    document.addEventListener(\"keydown\", onKeyDown, {capture: true});\n    return () => {\n      document.removeEventListener(\"mousemove\", onMouseMove);\n      document.removeEventListener(\"keydown\", onKeyDown, {capture: true});\n    };\n  }, [shortcuts, onShortcut]);\n\n  return (\n    <div\n      data-pihanga={cardName}\n      className={className}\n      style={{...style, position: \"relative\"}}\n    >\n      <Card cardName={content} parentCard={cardName} />\n    </div>\n  );\n};\n"],"mappings":";;;;AAUA,SAAS,EAAgB,GAAwC;CAC/D,IAAI,IAAuB;CAC3B,OAAO,IAAM;EACX,IAAM,IAAO,EAAK,aAAa,cAAc;EAC7C,IAAI,GAAM,OAAO;EACjB,IAAO,EAAK;CACd;AAEF;AAGA,SAAS,EAAe,GAAkB,GAA+B;CACvE,IAAM,IAAO,IAAI,IAAI,CAAQ;CAC7B,QACG,EAAK,IAAI,MAAM,IAAI,EAAE,UAAU,CAAC,EAAE,aAClC,EAAK,IAAI,OAAO,IAAI,EAAE,WAAW,CAAC,EAAE,cACpC,EAAK,IAAI,KAAK,IAAI,EAAE,SAAS,CAAC,EAAE,YAChC,EAAK,IAAI,MAAM,IAAI,EAAE,UAAU,CAAC,EAAE;AAEvC;AAEA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,YAAS,cAAW,eAAY,aAAU,cAAW,aAAS,GAG/D,IAAY,EAA+B;EAAC,GAAG;EAAG,GAAG;CAAC,CAAC;CA4C7D,OA1CA,QAAgB;EACd,IAAM,KAAe,MAAkB;GACrC,EAAU,UAAU;IAAC,GAAG,EAAE;IAAS,GAAG,EAAE;GAAO;EACjD,GAEM,KAAa,MAAqB;GACtC,KAAK,IAAM,KAAY,GAAW;IAChC,IAAM,IAAmB,EAAS,aAAa,CAAC;IAEhD,IAAI,EADa,EAAE,QAAQ,EAAS,OAAO,EAAE,SAAS,EAAS,QAC9C,CAAC,EAAe,GAAG,CAAI,GAAG;IAG3C,AAAK,EAAS,cACZ,EAAE,eAAe,GACjB,EAAE,gBAAgB;IAGpB,IAAM,EAAC,MAAG,SAAK,EAAU,SAEnB,IAAc,EADT,SAAS,iBAAiB,GAAG,CACJ,CAAE;IAEtC,EAAW;KACT,YAAY,EAAS,MAAM,EAAS;KACpC,KAAK,EAAS;KACd,WAAW;KACX;KACA,SAAS;KACT,SAAS;IACX,CAAC;IACD;GACF;EACF;EAKA,OAFA,SAAS,iBAAiB,aAAa,GAAa,EAAC,SAAS,GAAI,CAAC,GACnE,SAAS,iBAAiB,WAAW,GAAW,EAAC,SAAS,GAAI,CAAC,SAClD;GAEX,AADA,SAAS,oBAAoB,aAAa,CAAW,GACrD,SAAS,oBAAoB,WAAW,GAAW,EAAC,SAAS,GAAI,CAAC;EACpE;CACF,GAAG,CAAC,GAAW,CAAU,CAAC,GAGxB,kBAAC,OAAD;EACE,gBAAc;EACH;EACX,OAAO;GAAC,GAAG;GAAO,UAAU;EAAU;YAEtC,kBAAC,GAAD;GAAM,UAAU;GAAS,YAAY;EAAW,CAAA;CAC7C,CAAA;AAET"}

package/cards/keyboardOverlay/keyboardOverlay.types.d.ts

@@ -0,0 +1,74 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const KEYBOARD_OVERLAY_CARD = "keyboard-overlay";
+export declare const KeyboardOverlay: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<KeyboardOverlayProps, S, KeyboardOverlayEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const KEYBOARD_OVERLAY_ACTION: {
+    SHORTCUT: string;
+};
+export declare const onKeyboardShortcut: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & KeyboardOverlayShortcutEvent>) => void;
+/** Modifier keys that can be part of a shortcut definition. */
+export type Modifier = "ctrl" | "shift" | "alt" | "meta";
+/**
+ * A single keyboard shortcut to intercept.
+ *
+ * `key` matches `KeyboardEvent.key` (e.g. `"k"`, `"Escape"`, `"ArrowUp"`) or
+ * `KeyboardEvent.code` (e.g. `"KeyK"`).
+ *
+ * `modifiers` lists the modifier keys that **must** be active; any modifier
+ * not listed is expected to be **inactive** (strict matching).
+ *
+ * `id` is an optional caller-defined label that is forwarded in the event so
+ * you can distinguish shortcuts without pattern-matching on key+modifiers.
+ *
+ * `propagate` controls whether the key event continues down the DOM tree after
+ * the overlay handles it.  Defaults to `false` (the event is consumed here).
+ * Set to `true` to fire the pihanga event **and** still let the browser /
+ * focused child element see the keystroke.
+ */
+export type ShortcutDef = {
+    key: string;
+    modifiers?: Modifier[];
+    id?: string;
+    /** When `true` the key event is NOT stopped — it propagates normally after
+     *  the pihanga `onShortcut` event fires.  Default: `false`. */
+    propagate?: boolean;
+};
+export type KeyboardOverlayProps = {
+    /** Child card to render beneath the overlay. */
+    content: PiCardRef;
+    /** Shortcuts to intercept; all other key events pass through. */
+    shortcuts: ShortcutDef[];
+    /**
+     * Extra CSS classes applied to the wrapper `<div>`.
+     *
+     * Useful for layout constraints, e.g. `"h-full w-full flex"`.
+     * `position: relative` is always applied and cannot be overridden.
+     */
+    className?: string;
+    /**
+     * Inline styles merged onto the wrapper `<div>`.
+     *
+     * `position: relative` is always applied and takes precedence.
+     */
+    style?: React.CSSProperties;
+};
+/**
+ * Payload emitted by `onShortcut` whenever a registered shortcut fires.
+ *
+ * `dataPihanga` is the `data-pihanga` attribute of the **lowest** DOM element
+ * under the cursor at the moment the key was pressed, walking up the tree
+ * until a match is found.  `undefined` when no `data-pihanga` ancestor exists.
+ */
+export type KeyboardOverlayShortcutEvent = {
+    /** `ShortcutDef.id` when set, otherwise the matched `key`. */
+    shortcutId: string;
+    key: string;
+    modifiers: Modifier[];
+    dataPihanga?: string;
+    cursorX: number;
+    cursorY: number;
+};
+export type KeyboardOverlayEvents = {
+    onShortcut: KeyboardOverlayShortcutEvent;
+};

package/cards/keyboardOverlay/keyboardOverlay.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/keyboardOverlay/keyboardOverlay.types.ts
+var r = "keyboard-overlay", i = e(r), a = n(r, ["shortcut"]), o = t(a.SHORTCUT);
+//#endregion
+export { a as KEYBOARD_OVERLAY_ACTION, r as KEYBOARD_OVERLAY_CARD, i as KeyboardOverlay, o as onKeyboardShortcut };
+
+//# sourceMappingURL=keyboardOverlay.types.js.map

package/cards/keyboardOverlay/keyboardOverlay.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"keyboardOverlay.types.js","names":[],"sources":["../../../src/cards/keyboardOverlay/keyboardOverlay.types.ts"],"sourcesContent":["import {\n  type PiCardRef,\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const KEYBOARD_OVERLAY_CARD = \"keyboard-overlay\";\n\nexport const KeyboardOverlay = createCardDeclaration<\n  KeyboardOverlayProps,\n  KeyboardOverlayEvents\n>(KEYBOARD_OVERLAY_CARD);\n\nexport const KEYBOARD_OVERLAY_ACTION = registerActions(KEYBOARD_OVERLAY_CARD, [\n  \"shortcut\",\n]);\n\nexport const onKeyboardShortcut = createOnAction<KeyboardOverlayShortcutEvent>(\n  KEYBOARD_OVERLAY_ACTION.SHORTCUT,\n);\n\n/** Modifier keys that can be part of a shortcut definition. */\nexport type Modifier = \"ctrl\" | \"shift\" | \"alt\" | \"meta\";\n\n/**\n * A single keyboard shortcut to intercept.\n *\n * `key` matches `KeyboardEvent.key` (e.g. `\"k\"`, `\"Escape\"`, `\"ArrowUp\"`) or\n * `KeyboardEvent.code` (e.g. `\"KeyK\"`).\n *\n * `modifiers` lists the modifier keys that **must** be active; any modifier\n * not listed is expected to be **inactive** (strict matching).\n *\n * `id` is an optional caller-defined label that is forwarded in the event so\n * you can distinguish shortcuts without pattern-matching on key+modifiers.\n *\n * `propagate` controls whether the key event continues down the DOM tree after\n * the overlay handles it.  Defaults to `false` (the event is consumed here).\n * Set to `true` to fire the pihanga event **and** still let the browser /\n * focused child element see the keystroke.\n */\nexport type ShortcutDef = {\n  key: string;\n  modifiers?: Modifier[];\n  id?: string;\n  /** When `true` the key event is NOT stopped — it propagates normally after\n   *  the pihanga `onShortcut` event fires.  Default: `false`. */\n  propagate?: boolean;\n};\n\nexport type KeyboardOverlayProps = {\n  /** Child card to render beneath the overlay. */\n  content: PiCardRef;\n  /** Shortcuts to intercept; all other key events pass through. */\n  shortcuts: ShortcutDef[];\n  /**\n   * Extra CSS classes applied to the wrapper `<div>`.\n   *\n   * Useful for layout constraints, e.g. `\"h-full w-full flex\"`.\n   * `position: relative` is always applied and cannot be overridden.\n   */\n  className?: string;\n  /**\n   * Inline styles merged onto the wrapper `<div>`.\n   *\n   * `position: relative` is always applied and takes precedence.\n   */\n  style?: React.CSSProperties;\n};\n\n/**\n * Payload emitted by `onShortcut` whenever a registered shortcut fires.\n *\n * `dataPihanga` is the `data-pihanga` attribute of the **lowest** DOM element\n * under the cursor at the moment the key was pressed, walking up the tree\n * until a match is found.  `undefined` when no `data-pihanga` ancestor exists.\n */\nexport type KeyboardOverlayShortcutEvent = {\n  /** `ShortcutDef.id` when set, otherwise the matched `key`. */\n  shortcutId: string;\n  key: string;\n  modifiers: Modifier[];\n  dataPihanga?: string;\n  cursorX: number;\n  cursorY: number;\n};\n\nexport type KeyboardOverlayEvents = {\n  onShortcut: KeyboardOverlayShortcutEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAwB,oBAExB,IAAkB,EAG7B,CAAqB,GAEV,IAA0B,EAAgB,GAAuB,CAC5E,UACF,CAAC,GAEY,IAAqB,EAChC,EAAwB,QAC1B"}

package/cards/textField/textField.component.js

@@ -21,7 +21,8 @@ var r = (r) => {
 		onChange: g,
 		placeholder: s,
 		disabled: c,
-		"aria-invalid": f || void 0
+		"aria-invalid": f || void 0,
+		"data-pihanga": l
 	});
 };
 //#endregion

package/cards/textField/textField.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"textField.component.js","names":[],"sources":["../../../src/cards/textField/textField.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Input} from \"@/components/ui/input\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiTextFieldEvents, PiTextFieldProps} from \"./textField.types\";\n\nexport const TextFieldComponent = (\n  props: PiCardProps<PiTextFieldProps, PiTextFieldEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue = \"\",\n    type = \"text\",\n    placeholder,\n    disabled,\n    cardName,\n    onChanged,\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  const value = useFormData\n    ? ((form.formData[name!] as string | undefined) ?? \"\")\n    : propValue;\n\n  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const newValue = e.target.value;\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      onChanged({name, value: newValue});\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 ?? \"field\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <Input\n      id={fieldId}\n      type={type}\n      value={value}\n      onChange={handleChange}\n      placeholder={placeholder}\n      disabled={disabled}\n      aria-invalid={invalid || undefined}\n    />\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,IAAY,IACnB,UAAO,QACP,gBACA,aACA,aACA,iBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAEvC,IAAQ,IACR,EAAK,SAAS,MAAiC,KACjD;CAEJ,SAAS,EAAa,GAAwC;EAC5D,IAAM,IAAW,EAAE,OAAO;EAC1B,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,IAEjC,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAIA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ;CAGtC,OACE,kBAAC,GAAD;EACE,IAJY,KAAc;EAKpB;EACC;EACP,UAAU;EACG;EACH;EACV,gBAAc,KAAW,KAAA;CAC1B,CAAA;AAEL"}
+{"version":3,"file":"textField.component.js","names":[],"sources":["../../../src/cards/textField/textField.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {Input} from \"@/components/ui/input\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiTextFieldEvents, PiTextFieldProps} from \"./textField.types\";\n\nexport const TextFieldComponent = (\n  props: PiCardProps<PiTextFieldProps, PiTextFieldEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    value: propValue = \"\",\n    type = \"text\",\n    placeholder,\n    disabled,\n    cardName,\n    onChanged,\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  const value = useFormData\n    ? ((form.formData[name!] as string | undefined) ?? \"\")\n    : propValue;\n\n  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const newValue = e.target.value;\n    if (useFormData) {\n      form.handleChange(name!, newValue);\n    } else {\n      onChanged({name, value: newValue});\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 ?? \"field\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <Input\n      id={fieldId}\n      type={type}\n      value={value}\n      onChange={handleChange}\n      placeholder={placeholder}\n      disabled={disabled}\n      aria-invalid={invalid || undefined}\n      data-pihanga={cardName}\n    />\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,OAAO,IAAY,IACnB,UAAO,QACP,gBACA,aACA,aACA,iBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAEvC,IAAQ,IACR,EAAK,SAAS,MAAiC,KACjD;CAEJ,SAAS,EAAa,GAAwC;EAC5D,IAAM,IAAW,EAAE,OAAO;EAC1B,AAAI,IACF,EAAK,aAAa,GAAO,CAAQ,IAEjC,EAAU;GAAC;GAAM,OAAO;EAAQ,CAAC;CAErC;CAIA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ;CAGtC,OACE,kBAAC,GAAD;EACE,IAJY,KAAc;EAKpB;EACC;EACP,UAAU;EACG;EACH;EACV,gBAAc,KAAW,KAAA;EACzB,gBAAc;CACf,CAAA;AAEL"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@pihanga2/shadcn",
-  "version": "0.2.13",
+  "version": "0.2.15",
   "description": "Pihanga core card components built on shadcn/ui and Radix UI — the npm distribution of pihanga-shadcn.",
   "type": "module",
   "exports": {
@@ -84,6 +84,10 @@
       "import": "./cards/jsonViewer/index.js",
       "types": "./cards/jsonViewer/index.d.ts"
     },
+    "./cards/keyboardOverlay": {
+      "import": "./cards/keyboardOverlay/index.js",
+      "types": "./cards/keyboardOverlay/index.d.ts"
+    },
     "./cards/list": {
       "import": "./cards/list/index.js",
       "types": "./cards/list/index.d.ts"
@@ -218,6 +222,7 @@
     "./cards/infoCard/index.js",
     "./cards/input/index.js",
     "./cards/jsonViewer/index.js",
+    "./cards/keyboardOverlay/index.js",
     "./cards/list/index.js",
     "./cards/loadingOverlay/index.js",
     "./cards/loadingSkeleton/index.js",