@pihanga2/shadcn 0.1.0

package/cards/input/input.component.js

@@ -0,0 +1,69 @@
+import { useFormContext as e } from "../form/form.context.js";
+import { Label as t } from "../../components/ui/label.js";
+import { Input as n } from "../../components/ui/input.js";
+import r from "react";
+import { jsx as i, jsxs as a } from "react/jsx-runtime";
+//#region src/cards/input/input.component.tsx
+var o = (o) => {
+	let { name: s, value: c = "", type: l = "text", placeholder: u, disabled: d, label: f, description: p, className: m, cardName: h, onChanged: g, onCommitted: _ } = o, v = o.id, y = !!o.invalid, b = e(), x = b.isInForm && !!s, [S, C] = r.useState(l === "file" ? "" : c);
+	r.useEffect(() => {
+		!x && l !== "file" && C(c);
+	}, [
+		c,
+		x,
+		l
+	]);
+	let w = l === "file" ? void 0 : x ? b.formData[s] ?? "" : S;
+	function T(e) {
+		let t = l === "file" ? e.target.files?.[0]?.name ?? "" : e.target.value;
+		x ? b.handleChange(s, t) : (C(t), g({
+			name: s,
+			value: t
+		}));
+	}
+	function E() {
+		!x && l !== "file" && _({
+			name: s,
+			value: S
+		});
+	}
+	function D(e) {
+		e.key === "Enter" && !x && l !== "file" && _({
+			name: s,
+			value: S
+		});
+	}
+	let O = `${h}-${s ?? "input"}`, k = v ?? O;
+	return /* @__PURE__ */ a("div", {
+		"data-pihanga": h,
+		className: "grid w-full gap-1.5",
+		children: [
+			f && /* @__PURE__ */ i(t, {
+				htmlFor: k,
+				children: f
+			}),
+			/* @__PURE__ */ i(n, {
+				id: k,
+				type: l,
+				value: w,
+				onChange: T,
+				onBlur: E,
+				onKeyDown: D,
+				placeholder: u,
+				disabled: d,
+				className: m,
+				"aria-invalid": y || void 0,
+				"aria-describedby": p ? `${k}-desc` : void 0
+			}),
+			p && /* @__PURE__ */ i("p", {
+				id: `${k}-desc`,
+				className: "text-sm text-muted-foreground",
+				children: p
+			})
+		]
+	});
+};
+//#endregion
+export { o as InputComponent };
+
+//# sourceMappingURL=input.component.js.map

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

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

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

@@ -0,0 +1,80 @@
+export declare const PI_INPUT_CARD = "pi/input";
+export declare const PiInput: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiInputProps, S, PiInputEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PI_INPUT_ACTION: {
+    CHANGED: string;
+    COMMITTED: string;
+};
+export declare const onPiInputChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiInputChangedEvent>) => void;
+/**
+ * Subscribe to "committed" events — fired when the user finishes editing
+ * (blur or Enter key).  Unlike `onChanged` (which fires on every keystroke),
+ * `onCommitted` only fires once per editing session, making it the preferred
+ * handler for controlled inputs that trigger expensive downstream work.
+ */
+export declare const onPiInputCommitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiInputCommittedEvent>) => void;
+export type PiInputProps = {
+    /**
+     * 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;
+    /**
+     * HTML input type.
+     * Common values: "text" | "email" | "password" | "number" | "search" |
+     * "url" | "tel" | "date" | "file".
+     * Defaults to "text".
+     */
+    type?: string;
+    /** Placeholder text shown when the input is empty. */
+    placeholder?: string;
+    /** When true, the input is disabled and non-interactive. */
+    disabled?: boolean;
+    /**
+     * Optional label text rendered in a `<label>` element above the input.
+     * The label is automatically associated with the input via `htmlFor`.
+     */
+    label?: string;
+    /**
+     * Optional helper / description text rendered below the input.
+     * Use this for hints, formatting guidance, or validation feedback.
+     */
+    description?: string;
+    /** Extra Tailwind / CSS classes forwarded to the underlying <input> element. */
+    className?: string;
+};
+export type PiInputChangedEvent = {
+    /** Field name, mirrors the `name` prop if provided. */
+    name?: string;
+    /** New value after the change. */
+    value: string;
+};
+/**
+ * Payload for the `onCommitted` event (blur / Enter key).
+ * Same shape as `PiInputChangedEvent`.
+ */
+export type PiInputCommittedEvent = {
+    /** Field name, mirrors the `name` prop if provided. */
+    name?: string;
+    /** Final committed value. */
+    value: string;
+};
+export type PiInputEvents = {
+    /** Fires on every keystroke. */
+    onChanged: PiInputChangedEvent;
+    /**
+     * Fires once when the user finishes editing (blur or Enter key).
+     * Use this instead of `onChanged` when each change triggers expensive
+     * downstream work (e.g. rebuilding a panel).
+     */
+    onCommitted: PiInputCommittedEvent;
+};

package/cards/input/input.types.js

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

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

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

package/cards/jsonViewer/index.d.ts

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

package/cards/jsonViewer/jsonViewer.component.d.ts

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

package/cards/jsonViewer/jsonViewer.types.d.ts

@@ -0,0 +1,76 @@
+export declare const JSON_VIEWER_CARD = "json-viewer";
+export declare const JsonViewer: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<JsonViewerProps<object>, S, JsonViewerEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const JSON_VIEWER_ACTION: {
+    CLICKED: string;
+    COPIED: string;
+};
+export declare const onJsonViewerClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ClickedEvent>) => void;
+export declare const onJsonViewerCopied: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & CopiedEvent>) => void;
+export type JsonViewerProps<S = object> = {
+    /** The JSON value to display. */
+    source: unknown;
+    /**
+     * Theme name. Maps loosely to a visual style.
+     * Use "monokai", "solarized", "ocean", etc. (visual only — actual theming
+     * is done via className / global CSS since react-json-view-lite uses CSS
+     * variables rather than named themes).
+     */
+    theme?: string;
+    iconStyle?: "circle" | "triangle" | "square";
+    /**
+     * When `true`, all nodes are collapsed.
+     * When `false`, all nodes are expanded.
+     * When a number N, nodes at depth >= N are collapsed (root is depth 0).
+     * Default: 1 (expand root only).
+     */
+    collapsed?: boolean | number;
+    /** When `true`, a click-to-expand interaction is enabled on node labels. */
+    enableClipboard?: boolean;
+    /** When `true`, removes quotes from object keys in display. */
+    removeQuotesOnKeys?: boolean;
+    /** When `true`, objects and arrays are labelled with their size. */
+    displayObjectSize?: boolean;
+    /** When `true`, data-type labels prefix values. */
+    displayDataTypes?: boolean;
+    /**
+     * Called after the JSON is rendered, allowing post-render DOM modifications.
+     * Receives the raw `source` value and the container element.
+     */
+    modifyFn?: ModifyFn;
+    /**
+     * When `true`, shows a copy-to-clipboard icon button in the top-right
+     * corner of the viewer. Clicking it copies the pretty-printed JSON to the
+     * clipboard using `ClipboardItem` with `text/plain` MIME type.
+     */
+    copyToClipboard?: boolean;
+    /**
+     * Icon name resolved via the global icon registry (`getIconElement`).
+     * If omitted or the name is not registered, falls back to the Lucide
+     * `Copy` icon automatically.
+     *
+     * @example
+     * // Register your own icon first:
+     * registerIcon("my-copy", MyCustomCopyIcon);
+     * // Then pass the name to the card:
+     * JsonViewer({ copyToClipboard: true, copyIcon: "my-copy", ... })
+     */
+    copyIcon?: string;
+    /** Inline style for the react-json-view-lite container. */
+    style?: S;
+    /** Additional CSS class for the outer wrapper. */
+    className?: string;
+};
+export type ModifyFn = (source: unknown, el: HTMLElement | null) => void;
+export type ClickedEvent = Record<string, never>;
+export type CopiedEvent = {
+    /** `true` when the clipboard write succeeded, `false` on error. */
+    success: boolean;
+};
+export type JsonViewerEvents = {
+    onClicked: ClickedEvent;
+    onCopied: CopiedEvent;
+};

package/cards/list/index.d.ts

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

package/cards/list/index.js

@@ -0,0 +1,13 @@
+import { ListComponent as e } from "./list.component.js";
+import { LIST_ACTION as t, LIST_CARD as n, List as r, onListItemClicked as i } from "./list.types.js";
+import { actionTypesToEvents as a, registerCardComponent as o } from "@pihanga2/core";
+//#region src/cards/list/index.ts
+o({
+	name: n,
+	component: e,
+	events: a(t)
+});
+//#endregion
+export { t as LIST_ACTION, n as LIST_CARD, r as List, i as onListItemClicked };
+
+//# sourceMappingURL=index.js.map

package/cards/list/index.js.map

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

package/cards/list/list.component.d.ts

@@ -0,0 +1,4 @@
+import { PiCardProps } from '@pihanga2/core';
+import { ListEvents, ListProps } from './list.types';
+import * as React from "react";
+export declare const ListComponent: (props: PiCardProps<ListProps, ListEvents>) => React.ReactNode;

package/cards/list/list.component.js

@@ -0,0 +1,102 @@
+import { Badge as e } from "../../components/ui/badge.js";
+import { cn as t } from "../../lib/utils.js";
+import { getIcon as n } from "../icons.js";
+import { Avatar as r, AvatarFallback as i, AvatarImage as a } from "../../components/ui/avatar.js";
+import { Card as o } from "@pihanga2/core";
+import * as s from "react";
+import { jsx as c, jsxs as l } from "react/jsx-runtime";
+import { ChevronDown as u } from "lucide-react";
+//#region src/cards/list/list.component.tsx
+var d = {
+	sm: "px-2 py-1 text-xs gap-1.5",
+	md: "px-2 py-1.5 text-sm gap-2",
+	lg: "px-3 py-2 text-base gap-2.5"
+}, f = {
+	sm: "text-xs",
+	md: "text-xs",
+	lg: "text-sm"
+}, p = {
+	sm: "size-5",
+	md: "size-6",
+	lg: "size-7"
+};
+function m(s, u, d) {
+	if (!s) return null;
+	switch (s.type) {
+		case "icon": return /* @__PURE__ */ c("span", {
+			className: t("flex shrink-0 items-center [&>svg]:size-4", s.className),
+			children: n(s.name)
+		});
+		case "avatar": return /* @__PURE__ */ l(r, {
+			className: t(p[u], s.className),
+			children: [/* @__PURE__ */ c(a, { src: s.src }), /* @__PURE__ */ c(i, { children: s.fallback ?? "" })]
+		});
+		case "chip": return /* @__PURE__ */ c(e, {
+			variant: "secondary",
+			className: s.className,
+			children: s.text
+		});
+		case "card": return /* @__PURE__ */ c(o, {
+			cardName: s.cardName,
+			parentCard: d
+		});
+		default: return null;
+	}
+}
+function h({ item: e, size: n, onItemClicked: r, cardName: i }) {
+	let [a, o] = s.useState(!1), p = !!e.nested?.length;
+	function g() {
+		p ? o((e) => !e) : r({ itemID: e.id });
+	}
+	return /* @__PURE__ */ l("li", { children: [/* @__PURE__ */ l("button", {
+		type: "button",
+		className: t("flex w-full items-center rounded-sm outline-none transition-colors", "hover:bg-accent hover:text-accent-foreground", "focus-visible:ring-1 focus-visible:ring-ring", e.isSelected && "bg-accent text-accent-foreground font-medium", d[n], e.className),
+		onClick: g,
+		"aria-expanded": p ? a : void 0,
+		"data-selected": e.isSelected || void 0,
+		children: [
+			m(e.startDecorator, n, i),
+			/* @__PURE__ */ l("span", {
+				className: "flex min-w-0 flex-1 flex-col items-start",
+				children: [/* @__PURE__ */ c("span", {
+					className: "truncate leading-none",
+					children: e.title
+				}), e.subTitle && /* @__PURE__ */ c("span", {
+					className: t("mt-0.5 truncate text-muted-foreground", f[n]),
+					children: e.subTitle
+				})]
+			}),
+			!p && m(e.endDecorator, n, i),
+			p && /* @__PURE__ */ c(u, { className: t("ml-auto size-4 shrink-0 text-muted-foreground transition-transform duration-200", a && "rotate-180") })
+		]
+	}), p && a && /* @__PURE__ */ c("ul", {
+		className: t("ml-3 mt-0.5 flex flex-col gap-0.5 border-l border-border pl-2", "list-none p-0", n === "lg" ? "ml-4 pl-3" : "ml-3 pl-2"),
+		children: e.nested.map((e, t) => /* @__PURE__ */ c(h, {
+			item: e,
+			size: n,
+			onItemClicked: r,
+			cardName: i
+		}, e.id ?? t))
+	})] });
+}
+var g = (e) => {
+	let { items: n, size: r = "md", marker: i, className: a, style: o, onItemClicked: s, cardName: l } = e, u = {
+		...o,
+		...i && i !== "none" ? { listStyleType: i } : void 0
+	};
+	return /* @__PURE__ */ c("ul", {
+		className: t("flex flex-col gap-0.5 p-0", i && i !== "none" ? "list-inside" : "list-none", a),
+		style: u,
+		"data-pihanga": l,
+		children: n.map((e, t) => /* @__PURE__ */ c(h, {
+			item: e,
+			size: r,
+			onItemClicked: s,
+			cardName: l
+		}, e.id ?? t))
+	});
+};
+//#endregion
+export { g as ListComponent };
+
+//# sourceMappingURL=list.component.js.map

package/cards/list/list.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.component.js","names":[],"sources":["../../../src/cards/list/list.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {ChevronDown} from \"lucide-react\";\nimport {cn} from \"@/lib/utils\";\nimport {Avatar, AvatarFallback, AvatarImage} from \"@/components/ui/avatar\";\nimport {Badge} from \"@/components/ui/badge\";\nimport {getIcon} from \"@/cards/icons\";\nimport type {DecoratorT, ListEvents, ListItem, ListProps} from \"./list.types\";\n\n// ---------------------------------------------------------------------------\n// Size tokens\n// ---------------------------------------------------------------------------\n\n/** Padding + font-size + gap for item buttons */\nconst ITEM_SIZE: Record<\"sm\" | \"md\" | \"lg\", string> = {\n  sm: \"px-2 py-1 text-xs gap-1.5\",\n  md: \"px-2 py-1.5 text-sm gap-2\",\n  lg: \"px-3 py-2 text-base gap-2.5\",\n};\n\n/** Sub-title font-size (one step smaller than title) */\nconst SUB_SIZE: Record<\"sm\" | \"md\" | \"lg\", string> = {\n  sm: \"text-xs\",\n  md: \"text-xs\",\n  lg: \"text-sm\",\n};\n\n/** Avatar size per density */\nconst AVATAR_SIZE: Record<\"sm\" | \"md\" | \"lg\", string> = {\n  sm: \"size-5\",\n  md: \"size-6\",\n  lg: \"size-7\",\n};\n\n// ---------------------------------------------------------------------------\n// Decorator renderer\n// ---------------------------------------------------------------------------\n\nfunction renderDecorator(\n  decorator: DecoratorT | undefined,\n  size: \"sm\" | \"md\" | \"lg\",\n  parentCard: string,\n): React.ReactNode {\n  if (!decorator) return null;\n\n  switch (decorator.type) {\n    case \"icon\":\n      return (\n        <span\n          className={cn(\n            \"flex shrink-0 items-center [&>svg]:size-4\",\n            decorator.className,\n          )}\n        >\n          {getIcon(decorator.name)}\n        </span>\n      );\n\n    case \"avatar\":\n      return (\n        <Avatar className={cn(AVATAR_SIZE[size], decorator.className)}>\n          <AvatarImage src={decorator.src} />\n          <AvatarFallback>{decorator.fallback ?? \"\"}</AvatarFallback>\n        </Avatar>\n      );\n\n    case \"chip\":\n      return (\n        <Badge variant=\"secondary\" className={decorator.className}>\n          {decorator.text}\n        </Badge>\n      );\n\n    case \"card\":\n      return <Card cardName={decorator.cardName} parentCard={parentCard} />;\n\n    default:\n      return null;\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Single item row (recursive for nested)\n// ---------------------------------------------------------------------------\n\ntype ItemRowProps = {\n  item: ListItem;\n  size: \"sm\" | \"md\" | \"lg\";\n  onItemClicked: (ev: {itemID: string | number}) => void;\n  cardName: string;\n};\n\nfunction ItemRow({\n  item,\n  size,\n  onItemClicked,\n  cardName,\n}: ItemRowProps): React.ReactNode {\n  const [open, setOpen] = React.useState(false);\n  const hasNested = Boolean(item.nested?.length);\n\n  function handleClick() {\n    if (hasNested) {\n      setOpen((prev) => !prev);\n    } else {\n      onItemClicked({itemID: item.id});\n    }\n  }\n\n  return (\n    <li>\n      {/* Item button ---------------------------------------------------- */}\n      <button\n        type=\"button\"\n        className={cn(\n          \"flex w-full items-center rounded-sm outline-none transition-colors\",\n          \"hover:bg-accent hover:text-accent-foreground\",\n          \"focus-visible:ring-1 focus-visible:ring-ring\",\n          item.isSelected && \"bg-accent text-accent-foreground font-medium\",\n          ITEM_SIZE[size],\n          item.className,\n        )}\n        onClick={handleClick}\n        aria-expanded={hasNested ? open : undefined}\n        data-selected={item.isSelected || undefined}\n      >\n        {/* Start decorator */}\n        {renderDecorator(item.startDecorator, size, cardName)}\n\n        {/* Title + subtitle */}\n        <span className=\"flex min-w-0 flex-1 flex-col items-start\">\n          <span className=\"truncate leading-none\">{item.title}</span>\n          {item.subTitle && (\n            <span\n              className={cn(\n                \"mt-0.5 truncate text-muted-foreground\",\n                SUB_SIZE[size],\n              )}\n            >\n              {item.subTitle}\n            </span>\n          )}\n        </span>\n\n        {/* End decorator (suppress if we're showing the chevron) */}\n        {!hasNested && renderDecorator(item.endDecorator, size, cardName)}\n\n        {/* Expand/collapse chevron for nested items */}\n        {hasNested && (\n          <ChevronDown\n            className={cn(\n              \"ml-auto size-4 shrink-0 text-muted-foreground transition-transform duration-200\",\n              open && \"rotate-180\",\n            )}\n          />\n        )}\n      </button>\n\n      {/* Nested list ---------------------------------------------------- */}\n      {hasNested && open && (\n        <ul\n          className={cn(\n            \"ml-3 mt-0.5 flex flex-col gap-0.5 border-l border-border pl-2\",\n            \"list-none p-0\",\n            // keep the indent aligned regardless of density\n            size === \"lg\" ? \"ml-4 pl-3\" : \"ml-3 pl-2\",\n          )}\n        >\n          {item.nested!.map((child, idx) => (\n            <ItemRow\n              key={child.id ?? idx}\n              item={child}\n              size={size}\n              onItemClicked={onItemClicked}\n              cardName={cardName}\n            />\n          ))}\n        </ul>\n      )}\n    </li>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// List card component\n// ---------------------------------------------------------------------------\n\nexport const ListComponent = (\n  props: PiCardProps<ListProps, ListEvents>,\n): React.ReactNode => {\n  const {\n    items,\n    size = \"md\",\n    marker,\n    className,\n    style,\n    onItemClicked,\n    cardName,\n  } = props;\n\n  // When a marker is requested, expose it via CSS custom property so the\n  // list-style-type cascade works without a wrapper element.\n  const rootStyle: React.CSSProperties = {\n    ...style,\n    ...(marker && marker !== \"none\" ? {listStyleType: marker} : undefined),\n  };\n\n  return (\n    <ul\n      className={cn(\n        \"flex flex-col gap-0.5 p-0\",\n        marker && marker !== \"none\" ? \"list-inside\" : \"list-none\",\n        className,\n      )}\n      style={rootStyle}\n      data-pihanga={cardName}\n    >\n      {items.map((item, idx) => (\n        <ItemRow\n          key={item.id ?? idx}\n          item={item}\n          size={size}\n          onItemClicked={onItemClicked}\n          cardName={cardName}\n        />\n      ))}\n    </ul>\n  );\n};\n"],"mappings":";;;;;;;;;AAcA,IAAM,IAAgD;CACpD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAGM,IAA+C;CACnD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN,GAGM,IAAkD;CACtD,IAAI;CACJ,IAAI;CACJ,IAAI;AACN;AAMA,SAAS,EACP,GACA,GACA,GACiB;CACjB,IAAI,CAAC,GAAW,OAAO;CAEvB,QAAQ,EAAU,MAAlB;EACE,KAAK,QACH,OACE,kBAAC,QAAD;GACE,WAAW,EACT,6CACA,EAAU,SACZ;aAEC,EAAQ,EAAU,IAAI;EACnB,CAAA;EAGV,KAAK,UACH,OACE,kBAAC,GAAD;GAAQ,WAAW,EAAG,EAAY,IAAO,EAAU,SAAS;aAA5D,CACE,kBAAC,GAAD,EAAa,KAAK,EAAU,IAAM,CAAA,GAClC,kBAAC,GAAD,EAAA,UAAiB,EAAU,YAAY,GAAmB,CAAA,CACpD;;EAGZ,KAAK,QACH,OACE,kBAAC,GAAD;GAAO,SAAQ;GAAY,WAAW,EAAU;aAC7C,EAAU;EACN,CAAA;EAGX,KAAK,QACH,OAAO,kBAAC,GAAD;GAAM,UAAU,EAAU;GAAsB;EAAa,CAAA;EAEtE,SACE,OAAO;CACX;AACF;AAaA,SAAS,EAAQ,EACf,SACA,SACA,kBACA,eACgC;CAChC,IAAM,CAAC,GAAM,KAAW,EAAM,SAAS,EAAK,GACtC,IAAY,EAAQ,EAAK,QAAQ;CAEvC,SAAS,IAAc;EACrB,AAAI,IACF,GAAS,MAAS,CAAC,CAAI,IAEvB,EAAc,EAAC,QAAQ,EAAK,GAAE,CAAC;CAEnC;CAEA,OACE,kBAAC,MAAD,EAAA,UAAA,CAEE,kBAAC,UAAD;EACE,MAAK;EACL,WAAW,EACT,sEACA,gDACA,gDACA,EAAK,cAAc,gDACnB,EAAU,IACV,EAAK,SACP;EACA,SAAS;EACT,iBAAe,IAAY,IAAO,KAAA;EAClC,iBAAe,EAAK,cAAc,KAAA;YAZpC;GAeG,EAAgB,EAAK,gBAAgB,GAAM,CAAQ;GAGpD,kBAAC,QAAD;IAAM,WAAU;cAAhB,CACE,kBAAC,QAAD;KAAM,WAAU;eAAyB,EAAK;IAAY,CAAA,GACzD,EAAK,YACJ,kBAAC,QAAD;KACE,WAAW,EACT,yCACA,EAAS,EACX;eAEC,EAAK;IACF,CAAA,CAEJ;;GAGL,CAAC,KAAa,EAAgB,EAAK,cAAc,GAAM,CAAQ;GAG/D,KACC,kBAAC,GAAD,EACE,WAAW,EACT,mFACA,KAAQ,YACV,EACD,CAAA;EAEG;KAGP,KAAa,KACZ,kBAAC,MAAD;EACE,WAAW,EACT,iEACA,iBAEA,MAAS,OAAO,cAAc,WAChC;YAEC,EAAK,OAAQ,KAAK,GAAO,MACxB,kBAAC,GAAD;GAEE,MAAM;GACA;GACS;GACL;EACX,GALM,EAAM,MAAM,CAKlB,CACF;CACC,CAAA,CAEJ,EAAA,CAAA;AAER;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,UACA,UAAO,MACP,WACA,cACA,UACA,kBACA,gBACE,GAIE,IAAiC;EACrC,GAAG;EACH,GAAI,KAAU,MAAW,SAAS,EAAC,eAAe,EAAM,IAAI,KAAA;CAC9D;CAEA,OACE,kBAAC,MAAD;EACE,WAAW,EACT,6BACA,KAAU,MAAW,SAAS,gBAAgB,aAC9C,CACF;EACA,OAAO;EACP,gBAAc;YAEb,EAAM,KAAK,GAAM,MAChB,kBAAC,GAAD;GAEQ;GACA;GACS;GACL;EACX,GALM,EAAK,MAAM,CAKjB,CACF;CACC,CAAA;AAER"}

package/cards/list/list.types.d.ts

@@ -0,0 +1,65 @@
+import { PiCardRef } from '@pihanga2/core';
+import * as React from "react";
+export declare const LIST_CARD = "shad/list";
+export declare const List: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<ListProps, S, ListEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const LIST_ACTION: {
+    ITEM_CLICKED: string;
+};
+export declare const onListItemClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & ItemClickedEvent>) => void;
+export type IconDecorator = {
+    type: "icon";
+    /** Name registered via registerIcon() in src/cards/icons.ts */
+    name: string;
+    className?: string;
+};
+export type AvatarDecorator = {
+    type: "avatar";
+    src: string;
+    fallback?: string;
+    className?: string;
+};
+export type ChipDecorator = {
+    type: "chip";
+    text: string;
+    className?: string;
+};
+export type CardDecorator = {
+    type: "card";
+    cardName: PiCardRef;
+};
+export type DecoratorT = IconDecorator | AvatarDecorator | ChipDecorator | CardDecorator;
+export type ListItem = {
+    /** React key — must be unique within the list. */
+    id: string | number;
+    isSelected?: boolean;
+    title: string;
+    subTitle?: string;
+    /** When present the item becomes a collapsible parent. */
+    nested?: ListItem[];
+    startDecorator?: DecoratorT;
+    endDecorator?: DecoratorT;
+    /** Extra CSS classes on this item's button. */
+    className?: string;
+};
+export type ListProps = {
+    items: ListItem[];
+    /** Visual density — defaults to "md". */
+    size?: "sm" | "md" | "lg";
+    /**
+     * CSS `list-style-type` value (e.g. "disc", "decimal", "none").
+     * Defaults to "none" (plain list without markers).
+     */
+    marker?: string;
+    /** CSS classes applied directly to the root `<ul>`. */
+    className?: string;
+    /** Inline styles applied directly to the root `<ul>`. */
+    style?: React.CSSProperties;
+};
+export type ItemClickedEvent = {
+    itemID: string | number;
+};
+export type ListEvents = {
+    onItemClicked: ItemClickedEvent;
+};

package/cards/list/list.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/list/list.types.ts
+var r = "shad/list", i = e(r), a = n(r, ["item_clicked"]), o = t(a.ITEM_CLICKED);
+//#endregion
+export { a as LIST_ACTION, r as LIST_CARD, i as List, o as onListItemClicked };
+
+//# sourceMappingURL=list.types.js.map

package/cards/list/list.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"list.types.js","names":[],"sources":["../../../src/cards/list/list.types.ts"],"sourcesContent":["import * as React from \"react\";\nimport {\n  PiCardRef,\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const LIST_CARD = \"shad/list\";\n\nexport const List = createCardDeclaration<ListProps, ListEvents>(LIST_CARD);\n\nexport const LIST_ACTION = registerActions(LIST_CARD, [\"item_clicked\"]);\n\nexport const onListItemClicked = createOnAction<ItemClickedEvent>(\n  LIST_ACTION.ITEM_CLICKED,\n);\n\n// Decorator shown before or after an item's title/subtitle block.\nexport type IconDecorator = {\n  type: \"icon\";\n  /** Name registered via registerIcon() in src/cards/icons.ts */\n  name: string;\n  className?: string;\n};\n\nexport type AvatarDecorator = {\n  type: \"avatar\";\n  src: string;\n  fallback?: string;\n  className?: string;\n};\n\nexport type ChipDecorator = {\n  type: \"chip\";\n  text: string;\n  className?: string;\n};\n\nexport type CardDecorator = {\n  type: \"card\";\n  cardName: PiCardRef;\n};\n\nexport type DecoratorT =\n  | IconDecorator\n  | AvatarDecorator\n  | ChipDecorator\n  | CardDecorator;\n\nexport type ListItem = {\n  /** React key — must be unique within the list. */\n  id: string | number;\n  isSelected?: boolean;\n  title: string;\n  subTitle?: string;\n  /** When present the item becomes a collapsible parent. */\n  nested?: ListItem[];\n  startDecorator?: DecoratorT;\n  endDecorator?: DecoratorT;\n  /** Extra CSS classes on this item's button. */\n  className?: string;\n};\n\nexport type ListProps = {\n  items: ListItem[];\n  /** Visual density — defaults to \"md\". */\n  size?: \"sm\" | \"md\" | \"lg\";\n  /**\n   * CSS `list-style-type` value (e.g. \"disc\", \"decimal\", \"none\").\n   * Defaults to \"none\" (plain list without markers).\n   */\n  marker?: string;\n  /** CSS classes applied directly to the root `<ul>`. */\n  className?: string;\n  /** Inline styles applied directly to the root `<ul>`. */\n  style?: React.CSSProperties;\n};\n\nexport type ItemClickedEvent = {\n  itemID: string | number;\n};\n\nexport type ListEvents = {\n  onItemClicked: ItemClickedEvent;\n};\n"],"mappings":";;AAQA,IAAa,IAAY,aAEZ,IAAO,EAA6C,CAAS,GAE7D,IAAc,EAAgB,GAAW,CAAC,cAAc,CAAC,GAEzD,IAAoB,EAC/B,EAAY,YACd"}

package/cards/loadingOverlay/index.d.ts

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

package/cards/loadingOverlay/index.js

@@ -0,0 +1,12 @@
+import { LoadingOverlayComponent as e } from "./loadingOverlay.component.js";
+import { LOADING_OVERLAY_CARD as t, LoadingOverlay as n } from "./loadingOverlay.types.js";
+import { registerCardComponent as r } from "@pihanga2/core";
+//#region src/cards/loadingOverlay/index.ts
+r({
+	name: t,
+	component: e
+});
+//#endregion
+export { t as LOADING_OVERLAY_CARD, n as LoadingOverlay };
+
+//# sourceMappingURL=index.js.map

package/cards/loadingOverlay/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/loadingOverlay/index.ts"],"sourcesContent":["import {registerCardComponent} from \"@pihanga2/core\";\n\nimport {LoadingOverlayComponent} from \"./loadingOverlay.component\";\nimport {LOADING_OVERLAY_CARD} from \"./loadingOverlay.types\";\n\nexport * from \"./loadingOverlay.types\";\n\nregisterCardComponent({\n  name: LOADING_OVERLAY_CARD,\n  component: LoadingOverlayComponent,\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;AACb,CAAC"}

package/cards/loadingOverlay/loadingOverlay.component.d.ts

@@ -0,0 +1,4 @@
+import { PiCardProps } from '@pihanga2/core';
+import { LoadingOverlayProps } from './loadingOverlay.types';
+import * as React from "react";
+export declare const LoadingOverlayComponent: (props: PiCardProps<LoadingOverlayProps>) => React.ReactNode;

package/cards/loadingOverlay/loadingOverlay.component.js

@@ -0,0 +1,31 @@
+import { Spinner as e } from "../../components/ui/spinner.js";
+/* empty css               */
+import { Card as t } from "@pihanga2/core";
+import "react";
+import n from "clsx";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/cards/loadingOverlay/loadingOverlay.component.tsx
+var a = (a) => {
+	let { cardName: o, content: s, isLoading: c, label: l, fillParent: u, viewportCentered: d, className: f, contentClassName: p, overlayClassName: m } = a;
+	return s ? /* @__PURE__ */ r("div", {
+		"data-pihanga": o,
+		className: n("overlay-wrapper", c && "is-loading", u && "fill-parent", d && "viewport-centered", f),
+		children: /* @__PURE__ */ i("div", {
+			className: n("overlay-content", p),
+			children: [/* @__PURE__ */ r(t, {
+				cardName: s,
+				parentCard: o
+			}), /* @__PURE__ */ r("div", {
+				className: n("loading-overlay", m),
+				children: /* @__PURE__ */ i("div", {
+					className: "loading-overlay__content",
+					children: [/* @__PURE__ */ r(e, { size: "icon" }), /* @__PURE__ */ r("span", { children: l ?? "Loading..." })]
+				})
+			})]
+		})
+	}) : null;
+};
+//#endregion
+export { a as LoadingOverlayComponent };
+
+//# sourceMappingURL=loadingOverlay.component.js.map

package/cards/loadingOverlay/loadingOverlay.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadingOverlay.component.js","names":[],"sources":["../../../src/cards/loadingOverlay/loadingOverlay.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport clsx from \"clsx\";\n\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\n\nimport {Spinner} from \"@/registry/ui/spinner\";\n\nimport type {LoadingOverlayProps} from \"./loadingOverlay.types\";\nimport \"./loadingOverlay.css\";\n\nexport const LoadingOverlayComponent = (\n  props: PiCardProps<LoadingOverlayProps>,\n): React.ReactNode => {\n  const {\n    cardName,\n    content,\n    isLoading,\n    label,\n    fillParent,\n    viewportCentered,\n    className,\n    contentClassName,\n    overlayClassName,\n  } = props;\n\n  if (!content) return null;\n\n  return (\n    <div\n      data-pihanga={cardName}\n      className={clsx(\n        \"overlay-wrapper\",\n        isLoading && \"is-loading\",\n        fillParent && \"fill-parent\",\n        viewportCentered && \"viewport-centered\",\n        className,\n      )}\n    >\n      <div className={clsx(\"overlay-content\", contentClassName)}>\n        <Card cardName={content} parentCard={cardName} />\n        <div className={clsx(\"loading-overlay\", overlayClassName)}>\n          <div className=\"loading-overlay__content\">\n            <Spinner size=\"icon\" />\n            <span>{label ?? \"Loading...\"}</span>\n          </div>\n        </div>\n      </div>\n    </div>\n  );\n};\n"],"mappings":";;;;;;;AAUA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,aACA,YACA,cACA,UACA,eACA,qBACA,cACA,qBACA,wBACE;CAIJ,OAFK,IAGH,kBAAC,OAAD;EACE,gBAAc;EACd,WAAW,EACT,mBACA,KAAa,cACb,KAAc,eACd,KAAoB,qBACpB,CACF;YAEA,kBAAC,OAAD;GAAK,WAAW,EAAK,mBAAmB,CAAgB;aAAxD,CACE,kBAAC,GAAD;IAAM,UAAU;IAAS,YAAY;GAAW,CAAA,GAChD,kBAAC,OAAD;IAAK,WAAW,EAAK,mBAAmB,CAAgB;cACtD,kBAAC,OAAD;KAAK,WAAU;eAAf,CACE,kBAAC,GAAD,EAAS,MAAK,OAAQ,CAAA,GACtB,kBAAC,QAAD,EAAA,UAAO,KAAS,aAAmB,CAAA,CAChC;;GACF,CAAA,CACF;;CACF,CAAA,IAtBc;AAwBvB"}

package/cards/loadingOverlay/loadingOverlay.types.d.ts

@@ -0,0 +1,13 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const LOADING_OVERLAY_CARD = "loading-overlay";
+export type LoadingOverlayProps = {
+    content: PiCardRef;
+    isLoading?: boolean;
+    label?: string;
+    fillParent?: boolean;
+    viewportCentered?: boolean;
+    className?: string;
+    contentClassName?: string;
+    overlayClassName?: string;
+};
+export declare const LoadingOverlay: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<LoadingOverlayProps, S, {}>) => import('@pihanga2/core').PiCardDef;

package/cards/loadingOverlay/loadingOverlay.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e } from "@pihanga2/core";
+//#region src/cards/loadingOverlay/loadingOverlay.types.ts
+var t = "loading-overlay", n = e(t);
+//#endregion
+export { t as LOADING_OVERLAY_CARD, n as LoadingOverlay };
+
+//# sourceMappingURL=loadingOverlay.types.js.map

package/cards/loadingOverlay/loadingOverlay.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"loadingOverlay.types.js","names":[],"sources":["../../../src/cards/loadingOverlay/loadingOverlay.types.ts"],"sourcesContent":["import {createCardDeclaration, type PiCardRef} from \"@pihanga2/core\";\n\nexport const LOADING_OVERLAY_CARD = \"loading-overlay\";\n\nexport type LoadingOverlayProps = {\n  content: PiCardRef;\n  isLoading?: boolean;\n  label?: string;\n  fillParent?: boolean;\n  viewportCentered?: boolean;\n  className?: string;\n  contentClassName?: string;\n  overlayClassName?: string;\n};\n\nexport const LoadingOverlay = createCardDeclaration<LoadingOverlayProps>(\n  LOADING_OVERLAY_CARD,\n);\n"],"mappings":";;AAEA,IAAa,IAAuB,mBAavB,IAAiB,EAC5B,CACF"}

package/cards/loadingSkeleton/index.d.ts

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

package/cards/loadingSkeleton/index.js

@@ -0,0 +1,12 @@
+import { LoadingSkeletonComponent as e } from "./loading-skeleton.component.js";
+import { LOADING_SKELETON_CARD as t, LoadingSkeleton as n } from "./loading-skeleton.types.js";
+import { registerCardComponent as r } from "@pihanga2/core";
+//#region src/cards/loadingSkeleton/index.ts
+r({
+	name: t,
+	component: e
+});
+//#endregion
+export { t as LOADING_SKELETON_CARD, n as LoadingSkeleton };
+
+//# sourceMappingURL=index.js.map

package/cards/loadingSkeleton/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/loadingSkeleton/index.ts"],"sourcesContent":["import {registerCardComponent} from \"@pihanga2/core\";\nimport {LoadingSkeletonComponent} from \"./loading-skeleton.component\";\nimport {LOADING_SKELETON_CARD} from \"./loading-skeleton.types\";\n\nexport * from \"./loading-skeleton.types\";\n\n// No events — display-only card.\nregisterCardComponent({\n  name: LOADING_SKELETON_CARD,\n  component: LoadingSkeletonComponent,\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;AACb,CAAC"}