@pihanga2/shadcn 0.1.0

package/cards/checkbox/checkbox.component.js

@@ -0,0 +1,36 @@
+import { useFormContext as e } from "../form/form.context.js";
+import "react";
+import { jsx as t, jsxs as n } from "react/jsx-runtime";
+//#region src/cards/checkbox/checkbox.component.tsx
+var r = (r) => {
+	let { name: i, checked: a = !1, disabled: o, label: s, cardName: c, onChanged: l } = r, u = r.id, d = !!r.invalid, f = e(), p = f.isInForm && !!i, m = p ? !!(f.formData[i] ?? !1) : a;
+	function h(e) {
+		let t = e.target.checked;
+		p ? f.handleChange(i, t) : l({
+			name: i,
+			checked: t
+		});
+	}
+	let g = `${c}-${i ?? "checkbox"}`, _ = u ?? g;
+	return /* @__PURE__ */ n("div", {
+		"data-pihanga": c,
+		className: "flex items-center gap-2",
+		children: [/* @__PURE__ */ t("input", {
+			id: _,
+			type: "checkbox",
+			checked: m,
+			onChange: h,
+			disabled: o,
+			"aria-invalid": d || void 0,
+			className: "h-4 w-4 rounded border-input accent-primary disabled:cursor-not-allowed disabled:opacity-50"
+		}), s && /* @__PURE__ */ t("label", {
+			htmlFor: _,
+			className: "text-sm leading-none cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70",
+			children: s
+		})]
+	});
+};
+//#endregion
+export { r as CheckboxComponent };
+
+//# sourceMappingURL=checkbox.component.js.map

package/cards/checkbox/checkbox.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.component.js","names":[],"sources":["../../../src/cards/checkbox/checkbox.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiCheckboxEvents, PiCheckboxProps} from \"./checkbox.types\";\n\nexport const CheckboxComponent = (\n  props: PiCardProps<PiCheckboxProps, PiCheckboxEvents>,\n): React.ReactNode => {\n  const {\n    name,\n    checked: propChecked = false,\n    disabled,\n    label,\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 checked = useFormData\n    ? Boolean(form.formData[name!] ?? false)\n    : propChecked;\n\n  function handleChange(e: React.ChangeEvent<HTMLInputElement>) {\n    const newChecked = e.target.checked;\n    if (useFormData) {\n      form.handleChange(name!, newChecked);\n    } else {\n      onChanged({name, checked: newChecked});\n    }\n  }\n\n  // Use the id injected by pi/field; fall back to a local id when standalone.\n  const selfId = `${cardName}-${name ?? \"checkbox\"}`;\n  const fieldId = injectedId ?? selfId;\n\n  return (\n    <div data-pihanga={cardName} className=\"flex items-center gap-2\">\n      <input\n        id={fieldId}\n        type=\"checkbox\"\n        checked={checked}\n        onChange={handleChange}\n        disabled={disabled}\n        aria-invalid={invalid || undefined}\n        className=\"h-4 w-4 rounded border-input accent-primary disabled:cursor-not-allowed disabled:opacity-50\"\n      />\n      {label && (\n        <label\n          htmlFor={fieldId}\n          className=\"text-sm leading-none cursor-pointer select-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70\"\n        >\n          {label}\n        </label>\n      )}\n    </div>\n  );\n};\n"],"mappings":";;;;AAKA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,SACA,SAAS,IAAc,IACvB,aACA,UACA,aACA,iBACE,GAKE,IAAc,EAAwB,IACtC,IAAU,EAAS,EAA8B,SAGjD,IAAO,EAAe,GACtB,IAAc,EAAK,YAAY,EAAQ,GAEvC,IAAU,IACZ,GAAQ,EAAK,SAAS,MAAU,MAChC;CAEJ,SAAS,EAAa,GAAwC;EAC5D,IAAM,IAAa,EAAE,OAAO;EAC5B,AAAI,IACF,EAAK,aAAa,GAAO,CAAU,IAEnC,EAAU;GAAC;GAAM,SAAS;EAAU,CAAC;CAEzC;CAGA,IAAM,IAAS,GAAG,EAAS,GAAG,KAAQ,cAChC,IAAU,KAAc;CAE9B,OACE,kBAAC,OAAD;EAAK,gBAAc;EAAU,WAAU;YAAvC,CACE,kBAAC,SAAD;GACE,IAAI;GACJ,MAAK;GACI;GACT,UAAU;GACA;GACV,gBAAc,KAAW,KAAA;GACzB,WAAU;EACX,CAAA,GACA,KACC,kBAAC,SAAD;GACE,SAAS;GACT,WAAU;aAET;EACI,CAAA,CAEN;;AAET"}

package/cards/checkbox/checkbox.types.d.ts

@@ -0,0 +1,37 @@
+export declare const PI_CHECKBOX_CARD = "pi/checkbox";
+export declare const Checkbox: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiCheckboxProps, S, PiCheckboxEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PI_CHECKBOX_ACTION: {
+    CHANGED: string;
+};
+export declare const onPiCheckboxChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiCheckboxChangedEvent>) => void;
+export type PiCheckboxProps = {
+    /**
+     * Field name used to bind to FormContext when inside a pi/form card.
+     * When provided the component reads its checked state from form data and
+     * writes back via form.handleChange.
+     */
+    name?: string;
+    /**
+     * Controlled checked state used in standalone mode (outside a Form).
+     * Ignored when `name` is set and the component is inside a pi/form.
+     */
+    checked?: boolean;
+    /** When true, the checkbox is disabled and non-interactive. */
+    disabled?: boolean;
+    /**
+     * Optional label text rendered next to the checkbox.
+     * The label is automatically associated with the input via `htmlFor`.
+     */
+    label?: string;
+};
+export type PiCheckboxChangedEvent = {
+    /** Field name, mirrors the `name` prop if provided. */
+    name?: string;
+    /** New checked state after the change. */
+    checked: boolean;
+};
+export type PiCheckboxEvents = {
+    onChanged: PiCheckboxChangedEvent;
+};

package/cards/checkbox/checkbox.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/checkbox/checkbox.types.ts
+var r = "pi/checkbox", i = e(r), a = n(r, ["changed"]), o = t(a.CHANGED);
+//#endregion
+export { i as Checkbox, a as PI_CHECKBOX_ACTION, r as PI_CHECKBOX_CARD, o as onPiCheckboxChanged };
+
+//# sourceMappingURL=checkbox.types.js.map

package/cards/checkbox/checkbox.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"checkbox.types.js","names":[],"sources":["../../../src/cards/checkbox/checkbox.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_CHECKBOX_CARD = \"pi/checkbox\";\n\nexport const Checkbox = createCardDeclaration<\n  PiCheckboxProps,\n  PiCheckboxEvents\n>(PI_CHECKBOX_CARD);\n\nexport const PI_CHECKBOX_ACTION = registerActions(PI_CHECKBOX_CARD, [\n  \"changed\",\n]);\n\nexport const onPiCheckboxChanged = createOnAction<PiCheckboxChangedEvent>(\n  PI_CHECKBOX_ACTION.CHANGED,\n);\n\nexport type PiCheckboxProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its checked state from form data and\n   * writes back via form.handleChange.\n   */\n  name?: string;\n\n  /**\n   * Controlled checked state used in standalone mode (outside a Form).\n   * Ignored when `name` is set and the component is inside a pi/form.\n   */\n  checked?: boolean;\n\n  /** When true, the checkbox is disabled and non-interactive. */\n  disabled?: boolean;\n\n  /**\n   * Optional label text rendered next to the checkbox.\n   * The label is automatically associated with the input via `htmlFor`.\n   */\n  label?: string;\n};\n\nexport type PiCheckboxChangedEvent = {\n  /** Field name, mirrors the `name` prop if provided. */\n  name?: string;\n  /** New checked state after the change. */\n  checked: boolean;\n};\n\nexport type PiCheckboxEvents = {\n  onChanged: PiCheckboxChangedEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAmB,eAEnB,IAAW,EAGtB,CAAgB,GAEL,IAAqB,EAAgB,GAAkB,CAClE,SACF,CAAC,GAEY,IAAsB,EACjC,EAAmB,OACrB"}

package/cards/checkbox/index.d.ts

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

package/cards/checkbox/index.js

@@ -0,0 +1,13 @@
+import { CheckboxComponent as e } from "./checkbox.component.js";
+import { Checkbox as t, PI_CHECKBOX_ACTION as n, PI_CHECKBOX_CARD as r, onPiCheckboxChanged as i } from "./checkbox.types.js";
+import { actionTypesToEvents as a, registerCardComponent as o } from "@pihanga2/core";
+//#region src/cards/checkbox/index.ts
+o({
+	name: r,
+	component: e,
+	events: a(n)
+});
+//#endregion
+export { t as Checkbox, n as PI_CHECKBOX_ACTION, r as PI_CHECKBOX_CARD, i as onPiCheckboxChanged };
+
+//# sourceMappingURL=index.js.map

package/cards/checkbox/index.js.map

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

package/cards/conditional/conditional.component.d.ts

@@ -0,0 +1,11 @@
+import { PiCardProps } from '@pihanga2/core';
+import { ConditionalProps } from './conditional.types';
+import * as React from "react";
+/**
+ * ConditionalComponent
+ *
+ * Transparent pass-through: renders the `content` card when `show` is `true`,
+ * returns `null` otherwise.  No extra DOM wrapper is added — the mounted
+ * card's own root element is the only node in the tree.
+ */
+export declare const ConditionalComponent: (props: PiCardProps<ConditionalProps>) => React.ReactNode;

package/cards/conditional/conditional.component.js

@@ -0,0 +1,15 @@
+import { Card as e } from "@pihanga2/core";
+import "react";
+import { jsx as t } from "react/jsx-runtime";
+//#region src/cards/conditional/conditional.component.tsx
+var n = (n) => {
+	let { cardName: r, show: i, content: a } = n;
+	return i ? /* @__PURE__ */ t(e, {
+		cardName: a,
+		parentCard: r
+	}) : null;
+};
+//#endregion
+export { n as ConditionalComponent };
+
+//# sourceMappingURL=conditional.component.js.map

package/cards/conditional/conditional.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conditional.component.js","names":[],"sources":["../../../src/cards/conditional/conditional.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport type {ConditionalProps} from \"./conditional.types\";\n\n/**\n * ConditionalComponent\n *\n * Transparent pass-through: renders the `content` card when `show` is `true`,\n * returns `null` otherwise.  No extra DOM wrapper is added — the mounted\n * card's own root element is the only node in the tree.\n */\nexport const ConditionalComponent = (\n  props: PiCardProps<ConditionalProps>,\n): React.ReactNode => {\n  const {cardName, show, content} = props;\n  if (!show) return null;\n  return <Card cardName={content} parentCard={cardName} />;\n};\n"],"mappings":";;;;AAWA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,aAAU,SAAM,eAAW;CAElC,OADK,IACE,kBAAC,GAAD;EAAM,UAAU;EAAS,YAAY;CAAW,CAAA,IADrC;AAEpB"}

package/cards/conditional/conditional.types.d.ts

@@ -0,0 +1,29 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const CONDITIONAL_CARD = "shad/conditional";
+export declare const Conditional: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<ConditionalProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+/**
+ * Props for the `shad/conditional` card.
+ *
+ * Renders `content` only when `show` is `true`; renders nothing otherwise.
+ * This is a transparent pass-through — no extra DOM wrapper is added.
+ *
+ * In a real app, drive `show` from a `memo()` selector so the card
+ * reactively mounts/unmounts as state changes:
+ *
+ * ```ts
+ * import {memo, registerCard} from "@pihanga2/core";
+ * import {Conditional} from "@/cards/conditional";
+ *
+ * registerCard("myApp/hint", Conditional({
+ *   show:    memo((s: AppState) => s.items.length === 0 && !s.isLoading),
+ *   content: "myApp/emptyStateHint",
+ * }));
+ * ```
+ */
+export type ConditionalProps = {
+    /** Render `content` only when this is `true`.  Drive with `memo()` for
+     *  reactive mount/unmount behaviour. */
+    show: boolean;
+    /** The card to render when `show` is `true`. */
+    content: PiCardRef;
+};

package/cards/conditional/conditional.types.js

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

package/cards/conditional/conditional.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"conditional.types.js","names":[],"sources":["../../../src/cards/conditional/conditional.types.ts"],"sourcesContent":["import {createCardDeclaration} from \"@pihanga2/core\";\nimport type {PiCardRef} from \"@pihanga2/core\";\n\n// ── Card id ───────────────────────────────────────────────────────────────────\n\nexport const CONDITIONAL_CARD = \"shad/conditional\";\n\n// ── Card declaration factory ──────────────────────────────────────────────────\n\nexport const Conditional =\n  createCardDeclaration<ConditionalProps>(CONDITIONAL_CARD);\n\n// ── Props ─────────────────────────────────────────────────────────────────────\n\n/**\n * Props for the `shad/conditional` card.\n *\n * Renders `content` only when `show` is `true`; renders nothing otherwise.\n * This is a transparent pass-through — no extra DOM wrapper is added.\n *\n * In a real app, drive `show` from a `memo()` selector so the card\n * reactively mounts/unmounts as state changes:\n *\n * ```ts\n * import {memo, registerCard} from \"@pihanga2/core\";\n * import {Conditional} from \"@/cards/conditional\";\n *\n * registerCard(\"myApp/hint\", Conditional({\n *   show:    memo((s: AppState) => s.items.length === 0 && !s.isLoading),\n *   content: \"myApp/emptyStateHint\",\n * }));\n * ```\n */\nexport type ConditionalProps = {\n  /** Render `content` only when this is `true`.  Drive with `memo()` for\n   *  reactive mount/unmount behaviour. */\n  show: boolean;\n\n  /** The card to render when `show` is `true`. */\n  content: PiCardRef;\n};\n"],"mappings":";;AAKA,IAAa,IAAmB,oBAInB,IACX,EAAwC,CAAgB"}

package/cards/conditional/index.d.ts

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

package/cards/conditional/index.js

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

package/cards/conditional/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/conditional/index.ts"],"sourcesContent":["import {registerCardComponent} from \"@pihanga2/core\";\nimport {ConditionalComponent} from \"./conditional.component\";\nimport {CONDITIONAL_CARD} from \"./conditional.types\";\n\nexport * from \"./conditional.types\";\n\n// No events — this card is purely structural.\nregisterCardComponent({\n  name: CONDITIONAL_CARD,\n  component: ConditionalComponent,\n});\n"],"mappings":";;;;AAOA,EAAsB;CACpB,MAAM;CACN,WAAW;AACb,CAAC"}

package/cards/core-index.d.ts

@@ -0,0 +1,30 @@
+export * from './badge/index.js';
+export * from './box/index.js';
+export * from './button/index.js';
+export * from './checkbox/index.js';
+export * from './conditional/index.js';
+export * from './dataTable/index.js';
+export * from './dialog/index.js';
+export * from './dropDownMenu/index.js';
+export * from './field/index.js';
+export * from './flexGrid/index.js';
+export * from './form/index.js';
+export * from './framework/index.js';
+export * from './input/index.js';
+export * from './list/index.js';
+export * from './loadingOverlay/index.js';
+export * from './loadingSkeleton/index.js';
+export * from './menu/index.js';
+export * from './modeToggle/index.js';
+export * from './navbarSearch/index.js';
+export * from './pageWithNavbar/index.js';
+export * from './pasteTarget/index.js';
+export * from './select/index.js';
+export * from './stack/index.js';
+export * from './stepper/index.js';
+export * from './switch/index.js';
+export * from './tabs/index.js';
+export * from './textField/index.js';
+export * from './toast/index.js';
+export * from './toggleGroup/index.js';
+export * from './typography/index.js';

package/cards/core-index.js

@@ -0,0 +1,61 @@
+import { BADGE_CARD as e, ShadBadge as t } from "./badge/badge.types.js";
+import "./badge/index.js";
+import { BOX_CARD as n, Box as r } from "./box/box.types.js";
+import "./box/index.js";
+import { Button as i, PI_BUTTON_ACTION as a, PI_BUTTON_CARD as o, onPiButtonClicked as s } from "./button/button.types.js";
+import "./button/index.js";
+import { FormContext as c, useFormContext as l } from "./form/form.context.js";
+import { Checkbox as u, PI_CHECKBOX_ACTION as d, PI_CHECKBOX_CARD as f, onPiCheckboxChanged as p } from "./checkbox/checkbox.types.js";
+import "./checkbox/index.js";
+import { CONDITIONAL_CARD as m, Conditional as h } from "./conditional/conditional.types.js";
+import "./conditional/index.js";
+import { DATA_TABLE_ACTION as g, DATA_TABLE_CARD as _, DATA_TABLE_ROW_DETAIL_CARD as v, DataTable as y, DataTableRowDetail as b, onDataTableHideDetail as x, onDataTablePageChanged as S, onDataTableRowClicked as C, onDataTableShowDetail as w, onDataTableSortChanged as T } from "./dataTable/dataTable.types.js";
+import "./dataTable/index.js";
+import { Dialog as E, PI_DIALOG_ACTION as D, PI_DIALOG_CARD as O, onDialogClosed as k, onDialogOpenChanged as A, onDialogOpened as j } from "./dialog/dialog.types.js";
+import "./dialog/index.js";
+import { DROP_DOWN_MENU_ACTION as M, DROP_DOWN_MENU_CARD as N, DropDownMenu as P, onDropDownMenuClicked as F } from "./dropDownMenu/drop-down.types.js";
+import "./dropDownMenu/index.js";
+import { Field as I, PI_FIELD_CARD as L } from "./field/field.types.js";
+import "./field/index.js";
+import { FLEX_GRID_CARD as R, FlexGrid as z } from "./flexGrid/flexGrid.types.js";
+import "./flexGrid/index.js";
+import { Form as B, PI_FORM_ACTION as V, PI_FORM_CARD as H, onPiFormSubmitted as U } from "./form/form.types.js";
+import "./form/index.js";
+import { SdFramework as W } from "./framework/index.js";
+import { PI_INPUT_ACTION as G, PI_INPUT_CARD as K, PiInput as q, onPiInputChanged as J, onPiInputCommitted as Y } from "./input/input.types.js";
+import "./input/index.js";
+import { LIST_ACTION as X, LIST_CARD as Z, List as Q, onListItemClicked as $ } from "./list/list.types.js";
+import "./list/index.js";
+import { LOADING_OVERLAY_CARD as ee, LoadingOverlay as te } from "./loadingOverlay/loadingOverlay.types.js";
+import "./loadingOverlay/index.js";
+import { LOADING_SKELETON_CARD as ne, LoadingSkeleton as re } from "./loadingSkeleton/loading-skeleton.types.js";
+import "./loadingSkeleton/index.js";
+import { MENU_ACTION as ie, MENU_CARD as ae, Menu as oe, onMenuClicked as se } from "./menu/menu.types.js";
+import "./menu/index.js";
+import { MODE_TOGGLE_ACTION as ce, MODE_TOGGLE_CARD as le, ModeToggle as ue, onModeToggleChanged as de } from "./modeToggle/mode-toggle.types.js";
+import "./modeToggle/index.js";
+import { NAVBAR_SEARCH_ACTION as fe, NAVBAR_SEARCH_CARD as pe, NavbarSearch as me, onNavbarSearchFocus as he, onNavbarSearchItems as ge, onNavbarSearchSubmit as _e } from "./navbarSearch/navbarSearch.type.js";
+import "./navbarSearch/index.js";
+import { PAGE_WITH_NAVBAR_ACTION as ve, PAGE_WITH_NAVBAR_CARD as ye, PageWithNavbar as be, onPageWithNavbarNavigateTo as xe } from "./pageWithNavbar/pageWithNavbar.type.js";
+import { SdPageWithNavbar as Se } from "./pageWithNavbar/index.js";
+import { DEF_ERROR_COLOR as Ce, DEF_EVENT_DURATION_SECONDS as we, DEF_HEIGHT as Te, DEF_OVERLAY_OPACITY as Ee, DEF_PASTE_FIRST_REMINDER as De, DEF_PASTE_TARGET_FILE_TYPES as Oe, DEF_SUCCESS_COLOR as ke, PASTE_TARGET_ACTION as Ae, PASTE_TARGET_CARD as je, PasteTarget as Me, onContentPasted as Ne, onPasteError as Pe } from "./pasteTarget/pasteTarget.types.js";
+import "./pasteTarget/index.js";
+import { PI_SELECT_ACTION as Fe, PI_SELECT_CARD as Ie, Select as Le, onPiSelectChanged as Re, onPiSelectClosed as ze, onPiSelectOpened as Be } from "./select/select.types.js";
+import "./select/index.js";
+import { STACK_CARD as Ve, Stack as He } from "./stack/stack.types.js";
+import "./stack/index.js";
+import { STEPPER_ACTION as Ue, STEPPER_CARD as We, Stepper as Ge, onStepperStepClicked as Ke } from "./stepper/stepper.types.js";
+import "./stepper/index.js";
+import { PI_SWITCH_ACTION as qe, PI_SWITCH_CARD as Je, Switch as Ye, onPiSwitchChanged as Xe } from "./switch/switch.types.js";
+import "./switch/index.js";
+import { SdTabs as Ze, TABS_ACTION as Qe, TABS_CARD as $e, onTabsTabChanged as et } from "./tabs/tabs.types.js";
+import "./tabs/index.js";
+import { PI_TEXT_FIELD_ACTION as tt, PI_TEXT_FIELD_CARD as nt, TextField as rt, onPiTextFieldChanged as it } from "./textField/textField.types.js";
+import "./textField/index.js";
+import { PI_TOAST_ACTION as at, PI_TOAST_CARD as ot, TOAST_OP_ACTION as st, Toast as ct, dispatchShowToast as lt, onPiToastClosed as ut, onShowToast as dt } from "./toast/toast.types.js";
+import "./toast/index.js";
+import { PI_TOGGLE_GROUP_ACTION as ft, PI_TOGGLE_GROUP_CARD as pt, ToggleGroup as mt, onPiToggleGroupChanged as ht } from "./toggleGroup/toggleGroup.types.js";
+import "./toggleGroup/index.js";
+import { TYPOGRAPHY_CARD as gt, Typography as _t } from "./typography/typography.types.js";
+import "./typography/index.js";
+export { e as BADGE_CARD, n as BOX_CARD, r as Box, i as Button, m as CONDITIONAL_CARD, u as Checkbox, h as Conditional, g as DATA_TABLE_ACTION, _ as DATA_TABLE_CARD, v as DATA_TABLE_ROW_DETAIL_CARD, Ce as DEF_ERROR_COLOR, we as DEF_EVENT_DURATION_SECONDS, Te as DEF_HEIGHT, Ee as DEF_OVERLAY_OPACITY, De as DEF_PASTE_FIRST_REMINDER, Oe as DEF_PASTE_TARGET_FILE_TYPES, ke as DEF_SUCCESS_COLOR, M as DROP_DOWN_MENU_ACTION, N as DROP_DOWN_MENU_CARD, y as DataTable, b as DataTableRowDetail, E as Dialog, P as DropDownMenu, R as FLEX_GRID_CARD, I as Field, z as FlexGrid, B as Form, c as FormContext, X as LIST_ACTION, Z as LIST_CARD, ee as LOADING_OVERLAY_CARD, ne as LOADING_SKELETON_CARD, Q as List, te as LoadingOverlay, re as LoadingSkeleton, ie as MENU_ACTION, ae as MENU_CARD, ce as MODE_TOGGLE_ACTION, le as MODE_TOGGLE_CARD, oe as Menu, ue as ModeToggle, fe as NAVBAR_SEARCH_ACTION, pe as NAVBAR_SEARCH_CARD, me as NavbarSearch, ve as PAGE_WITH_NAVBAR_ACTION, ye as PAGE_WITH_NAVBAR_CARD, Ae as PASTE_TARGET_ACTION, je as PASTE_TARGET_CARD, a as PI_BUTTON_ACTION, o as PI_BUTTON_CARD, d as PI_CHECKBOX_ACTION, f as PI_CHECKBOX_CARD, D as PI_DIALOG_ACTION, O as PI_DIALOG_CARD, L as PI_FIELD_CARD, V as PI_FORM_ACTION, H as PI_FORM_CARD, G as PI_INPUT_ACTION, K as PI_INPUT_CARD, Fe as PI_SELECT_ACTION, Ie as PI_SELECT_CARD, qe as PI_SWITCH_ACTION, Je as PI_SWITCH_CARD, tt as PI_TEXT_FIELD_ACTION, nt as PI_TEXT_FIELD_CARD, at as PI_TOAST_ACTION, ot as PI_TOAST_CARD, ft as PI_TOGGLE_GROUP_ACTION, pt as PI_TOGGLE_GROUP_CARD, be as PageWithNavbar, Me as PasteTarget, q as PiInput, Ve as STACK_CARD, Ue as STEPPER_ACTION, We as STEPPER_CARD, W as SdFramework, Se as SdPageWithNavbar, Ze as SdTabs, Le as Select, t as ShadBadge, He as Stack, Ge as Stepper, Ye as Switch, Qe as TABS_ACTION, $e as TABS_CARD, st as TOAST_OP_ACTION, gt as TYPOGRAPHY_CARD, rt as TextField, ct as Toast, mt as ToggleGroup, _t as Typography, lt as dispatchShowToast, Ne as onContentPasted, x as onDataTableHideDetail, S as onDataTablePageChanged, C as onDataTableRowClicked, w as onDataTableShowDetail, T as onDataTableSortChanged, k as onDialogClosed, A as onDialogOpenChanged, j as onDialogOpened, F as onDropDownMenuClicked, $ as onListItemClicked, se as onMenuClicked, de as onModeToggleChanged, he as onNavbarSearchFocus, ge as onNavbarSearchItems, _e as onNavbarSearchSubmit, xe as onPageWithNavbarNavigateTo, Pe as onPasteError, s as onPiButtonClicked, p as onPiCheckboxChanged, U as onPiFormSubmitted, J as onPiInputChanged, Y as onPiInputCommitted, Re as onPiSelectChanged, ze as onPiSelectClosed, Be as onPiSelectOpened, Xe as onPiSwitchChanged, it as onPiTextFieldChanged, ut as onPiToastClosed, ht as onPiToggleGroupChanged, dt as onShowToast, Ke as onStepperStepClicked, et as onTabsTabChanged, l as useFormContext };

package/cards/dataTable/dataTable.component.d.ts

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

package/cards/dataTable/dataTable.component.js

@@ -0,0 +1,209 @@
+import { Badge as e } from "../../components/ui/badge.js";
+import { cn as t } from "../../lib/utils.js";
+import { Table as n, TableBody as r, TableCaption as i, TableCell as a, TableHead as o, TableHeader as s, TableRow as c } from "../../components/ui/table.js";
+import { Card as l } from "@pihanga2/core";
+import u, { useMemo as d, useState as f } from "react";
+import { jsx as p, jsxs as m } from "react/jsx-runtime";
+import { Check as h, ChevronDown as g, ChevronRight as _, ChevronUp as v, ChevronsUpDown as y, X as b } from "lucide-react";
+//#region src/cards/dataTable/dataTable.component.tsx
+function ee(t, n, r) {
+	if (n == null) return null;
+	switch (t.type) {
+		case "number": {
+			let e = typeof n == "number" ? n : Number(n);
+			return isNaN(e) ? String(n) : t.format ? t.format(e) : String(e);
+		}
+		case "date": {
+			if (t.format) return t.format(n);
+			let e = n instanceof Date ? n : new Date(String(n));
+			return isNaN(e.getTime()) ? String(n) : e.toLocaleDateString();
+		}
+		case "badge": {
+			let r = String(n);
+			return /* @__PURE__ */ p(e, {
+				variant: t.variants?.[r] ?? "secondary",
+				children: r
+			});
+		}
+		case "boolean": return n ? /* @__PURE__ */ p(h, {
+			className: "size-4 text-green-600",
+			"aria-label": "true"
+		}) : /* @__PURE__ */ p(b, {
+			className: "size-4 text-muted-foreground",
+			"aria-label": "false"
+		});
+		case "card": return /* @__PURE__ */ p(l, {
+			cardName: String(n),
+			parentCard: r
+		});
+		default: return String(n);
+	}
+}
+function x({ columnKey: e, activeKey: t, ascending: n }) {
+	return e === t ? p(n ? v : g, { className: "ml-1 inline size-3.5" }) : /* @__PURE__ */ p(y, { className: "ml-1 inline size-3.5 opacity-40" });
+}
+function S({ page: e, totalPages: n, onPrev: r, onNext: i }) {
+	return /* @__PURE__ */ m("div", {
+		className: "flex items-center justify-end gap-2 mt-2 px-2",
+		children: [
+			/* @__PURE__ */ m("span", {
+				className: "text-sm text-muted-foreground",
+				children: [
+					"Page ",
+					e + 1,
+					" of ",
+					n
+				]
+			}),
+			/* @__PURE__ */ p("button", {
+				type: "button",
+				className: t("rounded border px-2 py-1 text-sm transition-colors", "hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40"),
+				disabled: e === 0,
+				onClick: r,
+				children: "Previous"
+			}),
+			/* @__PURE__ */ p("button", {
+				type: "button",
+				className: t("rounded border px-2 py-1 text-sm transition-colors", "hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40"),
+				disabled: e >= n - 1,
+				onClick: i,
+				children: "Next"
+			})
+		]
+	});
+}
+function C(e) {
+	return e.replace(/([A-Z])/g, " $1").replace(/^./, (e) => e.toUpperCase()).trim();
+}
+var w = (e) => {
+	let { columns: h, rows: v, caption: y, sortKey: b, sortAscending: w, pageSize: T, currentPage: E, stickyHeader: D = !1, striped: te = !1, hoverable: ne = !0, compact: re = !1, emptyCard: O, emptyText: ie = "No data", className: k, cardName: A, onRowClicked: j, onSortChanged: M, onShowDetail: N, onHideDetail: P, onPageChanged: F } = e, [I, L] = f(/* @__PURE__ */ new Set()), [R, z] = f(b), [B, V] = f(w ?? !0), H = b === void 0 ? R : b, U = w === void 0 ? B : w, [W, G] = f(E ?? 0), K = E === void 0 ? W : E, q = v.some((e) => e.detailCard != null), J = h.length + +!!q, Y = d(() => H ? [...v].sort((e, t) => {
+		let n = e.data[H], r = t.data[H];
+		if (n == null && r == null) return 0;
+		if (n == null) return 1;
+		if (r == null) return -1;
+		let i = n < r ? -1 : +(n > r);
+		return U ? i : -i;
+	}) : v, [
+		v,
+		H,
+		U
+	]), X = d(() => {
+		if (!T) return Y;
+		let e = K * T;
+		return Y.slice(e, e + T);
+	}, [
+		Y,
+		T,
+		K
+	]), Z = T ? Math.ceil(Y.length / T) : 1, ae = (e) => {
+		let t = H === e ? !U : !0;
+		z(e), V(t), M({
+			key: e,
+			ascending: t
+		});
+	}, oe = (e, t) => {
+		t.stopPropagation(), L((t) => {
+			let n = new Set(t);
+			return n.has(e.id) ? (n.delete(e.id), P({
+				rowId: e.id,
+				row: e
+			})) : (n.add(e.id), N({
+				rowId: e.id,
+				row: e
+			})), n;
+		});
+	}, se = (e) => {
+		j({
+			rowId: e.id,
+			row: e
+		});
+	}, Q = (e) => {
+		G(e), T && F({
+			page: e,
+			pageSize: T
+		});
+	}, $ = re ? "py-1 px-2" : "py-2 px-3";
+	return /* @__PURE__ */ m("div", {
+		className: t("w-full", k),
+		"data-pihanga": A,
+		children: [/* @__PURE__ */ m(n, { children: [
+			y && /* @__PURE__ */ p(i, { children: y }),
+			/* @__PURE__ */ p(s, {
+				className: D ? "sticky top-0 z-10 bg-background" : void 0,
+				children: /* @__PURE__ */ m(c, { children: [q && /* @__PURE__ */ p(o, {
+					className: "w-10 px-2",
+					"aria-label": "Row details"
+				}), h.map((e) => /* @__PURE__ */ p(o, {
+					style: e.width ? { width: e.width } : void 0,
+					className: t($, e.align === "center" && "text-center", e.align === "right" && "text-right", e.sortable && "cursor-pointer select-none", e.headerClassName),
+					onClick: e.sortable ? () => ae(e.key) : void 0,
+					children: /* @__PURE__ */ m("span", {
+						className: "inline-flex items-center",
+						children: [e.title ?? C(e.key), e.sortable && /* @__PURE__ */ p(x, {
+							columnKey: e.key,
+							activeKey: H,
+							ascending: U
+						})]
+					})
+				}, e.key))] })
+			}),
+			/* @__PURE__ */ p(r, { children: X.length === 0 ? /* @__PURE__ */ p(c, { children: /* @__PURE__ */ p(a, {
+				colSpan: J,
+				className: "py-8 text-center text-muted-foreground",
+				children: O ? /* @__PURE__ */ p(l, {
+					cardName: O,
+					parentCard: A
+				}) : ie
+			}) }) : X.map((e, n) => {
+				let r = I.has(e.id), i = te && n % 2 == 1;
+				return /* @__PURE__ */ m(u.Fragment, { children: [/* @__PURE__ */ m(c, {
+					className: t(i && "bg-muted/30", ne && "cursor-pointer"),
+					"data-expanded": r || void 0,
+					onClick: () => se(e),
+					children: [q && /* @__PURE__ */ p(a, {
+						className: "w-10 px-2",
+						children: e.detailCard && /* @__PURE__ */ p("button", {
+							type: "button",
+							"aria-label": r ? "Collapse detail" : "Expand detail",
+							"aria-expanded": r,
+							className: t("flex items-center justify-center rounded p-0.5 transition-colors", "hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"),
+							onClick: (t) => oe(e, t),
+							children: p(r ? g : _, { className: "size-4" })
+						})
+					}), h.map((n) => {
+						let r = e.data[n.key];
+						return /* @__PURE__ */ p(a, {
+							className: t($, n.align === "center" && "text-center", n.align === "right" && "text-right", n.cellClassName),
+							children: ee(n, r, A)
+						}, n.key);
+					})]
+				}), r && e.detailCard && /* @__PURE__ */ p(c, {
+					className: "hover:bg-transparent",
+					onClick: (e) => e.stopPropagation(),
+					children: /* @__PURE__ */ p(a, {
+						colSpan: J,
+						className: "border-b p-0",
+						children: /* @__PURE__ */ p("div", {
+							className: "bg-muted/20 px-4 py-3",
+							children: /* @__PURE__ */ p(l, {
+								cardName: e.detailCard,
+								cardKey: `detail-${e.id}`,
+								row: e,
+								parentCard: A
+							}, `${A}-${e.id}-detail`)
+						})
+					})
+				})] }, e.id);
+			}) })
+		] }), T && Z > 1 && /* @__PURE__ */ p(S, {
+			page: K,
+			totalPages: Z,
+			onPrev: () => Q(K - 1),
+			onNext: () => Q(K + 1)
+		})]
+	});
+};
+//#endregion
+export { w as DataTableComponent };
+
+//# sourceMappingURL=dataTable.component.js.map

package/cards/dataTable/dataTable.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dataTable.component.js","names":[],"sources":["../../../src/cards/dataTable/dataTable.component.tsx"],"sourcesContent":["import React, {useMemo, useState} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {\n  Check,\n  ChevronDown,\n  ChevronRight,\n  ChevronUp,\n  ChevronsUpDown,\n  X,\n} from \"lucide-react\";\nimport {cn} from \"@/lib/utils\";\nimport {Badge} from \"@/components/ui/badge\";\nimport {\n  Table,\n  TableBody,\n  TableCaption,\n  TableCell,\n  TableHead,\n  TableHeader,\n  TableRow,\n} from \"@/components/ui/table\";\nimport type {\n  DataTableColumn,\n  DataTableEvents,\n  DataTableProps,\n  DataTableRow as DataTableRowType,\n} from \"./dataTable.types\";\n\n// ---------------------------------------------------------------------------\n// Cell renderer\n// ---------------------------------------------------------------------------\n\nfunction renderCell(\n  column: DataTableColumn,\n  value: unknown,\n  parentCard: string,\n): React.ReactNode {\n  if (value == null) return null;\n\n  switch (column.type) {\n    case \"number\": {\n      const num = typeof value === \"number\" ? value : Number(value);\n      return isNaN(num)\n        ? String(value)\n        : column.format\n          ? column.format(num)\n          : String(num);\n    }\n\n    case \"date\": {\n      if (column.format) {\n        return column.format(value as Date | string);\n      }\n      const d = value instanceof Date ? value : new Date(String(value));\n      return isNaN(d.getTime()) ? String(value) : d.toLocaleDateString();\n    }\n\n    case \"badge\": {\n      const strVal = String(value);\n      const variant = column.variants?.[strVal] ?? \"secondary\";\n      return <Badge variant={variant}>{strVal}</Badge>;\n    }\n\n    case \"boolean\": {\n      return value ? (\n        <Check className=\"size-4 text-green-600\" aria-label=\"true\" />\n      ) : (\n        <X className=\"size-4 text-muted-foreground\" aria-label=\"false\" />\n      );\n    }\n\n    case \"card\": {\n      // Cell value is expected to be a PiCardRef (string)\n      return <Card cardName={String(value)} parentCard={parentCard} />;\n    }\n\n    default:\n      // \"text\" or omitted type\n      return String(value);\n  }\n}\n\n// ---------------------------------------------------------------------------\n// Sort icon\n// ---------------------------------------------------------------------------\n\nfunction SortIcon({\n  columnKey,\n  activeKey,\n  ascending,\n}: {\n  columnKey: string;\n  activeKey: string | undefined;\n  ascending: boolean;\n}): React.ReactNode {\n  if (columnKey !== activeKey) {\n    return <ChevronsUpDown className=\"ml-1 inline size-3.5 opacity-40\" />;\n  }\n  return ascending ? (\n    <ChevronUp className=\"ml-1 inline size-3.5\" />\n  ) : (\n    <ChevronDown className=\"ml-1 inline size-3.5\" />\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Pagination controls\n// ---------------------------------------------------------------------------\n\nfunction PaginationBar({\n  page,\n  totalPages,\n  onPrev,\n  onNext,\n}: {\n  page: number;\n  totalPages: number;\n  onPrev: () => void;\n  onNext: () => void;\n}): React.ReactNode {\n  return (\n    <div className=\"flex items-center justify-end gap-2 mt-2 px-2\">\n      <span className=\"text-sm text-muted-foreground\">\n        Page {page + 1} of {totalPages}\n      </span>\n      <button\n        type=\"button\"\n        className={cn(\n          \"rounded border px-2 py-1 text-sm transition-colors\",\n          \"hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40\",\n        )}\n        disabled={page === 0}\n        onClick={onPrev}\n      >\n        Previous\n      </button>\n      <button\n        type=\"button\"\n        className={cn(\n          \"rounded border px-2 py-1 text-sm transition-colors\",\n          \"hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40\",\n        )}\n        disabled={page >= totalPages - 1}\n        onClick={onNext}\n      >\n        Next\n      </button>\n    </div>\n  );\n}\n\n// ---------------------------------------------------------------------------\n// Helper: derive a human-readable title from a camelCase key\n// ---------------------------------------------------------------------------\n\nfunction keyToTitle(key: string): string {\n  return key\n    .replace(/([A-Z])/g, \" $1\")\n    .replace(/^./, (s) => s.toUpperCase())\n    .trim();\n}\n\n// ---------------------------------------------------------------------------\n// Main data-table component\n// ---------------------------------------------------------------------------\n\nexport const DataTableComponent = (\n  props: PiCardProps<DataTableProps, DataTableEvents>,\n): React.ReactNode => {\n  const {\n    columns,\n    rows,\n    caption,\n    sortKey: sortKeyProp,\n    sortAscending: sortAscendingProp,\n    pageSize,\n    currentPage: currentPageProp,\n    stickyHeader = false,\n    striped = false,\n    hoverable = true,\n    compact = false,\n    emptyCard,\n    emptyText = \"No data\",\n    className,\n    cardName,\n    onRowClicked,\n    onSortChanged,\n    onShowDetail,\n    onHideDetail,\n    onPageChanged,\n  } = props;\n\n  // ── Expanded-rows state ──────────────────────────────────────────────────\n  const [expandedRows, setExpandedRows] = useState<Set<string | number>>(\n    new Set(),\n  );\n\n  // ── Sort state (uncontrolled; props override when present) ───────────────\n  const [localSortKey, setLocalSortKey] = useState<string | undefined>(\n    sortKeyProp,\n  );\n  const [localSortAsc, setLocalSortAsc] = useState<boolean>(\n    sortAscendingProp ?? true,\n  );\n  const activeSortKey = sortKeyProp !== undefined ? sortKeyProp : localSortKey;\n  const activeSortAsc =\n    sortAscendingProp !== undefined ? sortAscendingProp : localSortAsc;\n\n  // ── Pagination state (uncontrolled; props override when present) ─────────\n  const [localPage, setLocalPage] = useState<number>(currentPageProp ?? 0);\n  const activePage =\n    currentPageProp !== undefined ? currentPageProp : localPage;\n\n  // ── Derived flags ────────────────────────────────────────────────────────\n  const hasDetailRows = rows.some((row) => row.detailCard != null);\n  // Total column count used for detail-row colSpan\n  const colCount = columns.length + (hasDetailRows ? 1 : 0);\n\n  // ── Sorted rows ──────────────────────────────────────────────────────────\n  const sortedRows = useMemo(() => {\n    if (!activeSortKey) return rows;\n    return [...rows].sort((a, b) => {\n      const av = (a.data as Record<string, unknown>)[activeSortKey];\n      const bv = (b.data as Record<string, unknown>)[activeSortKey];\n      if (av == null && bv == null) return 0;\n      if (av == null) return 1;\n      if (bv == null) return -1;\n      const cmp = av < bv ? -1 : av > bv ? 1 : 0;\n      return activeSortAsc ? cmp : -cmp;\n    });\n  }, [rows, activeSortKey, activeSortAsc]);\n\n  // ── Paginated slice ──────────────────────────────────────────────────────\n  const paginatedRows = useMemo(() => {\n    if (!pageSize) return sortedRows;\n    const start = activePage * pageSize;\n    return sortedRows.slice(start, start + pageSize);\n  }, [sortedRows, pageSize, activePage]);\n\n  const totalPages = pageSize ? Math.ceil(sortedRows.length / pageSize) : 1;\n\n  // ── Handlers ─────────────────────────────────────────────────────────────\n  const handleSortClick = (key: string) => {\n    const newAsc = activeSortKey === key ? !activeSortAsc : true;\n    setLocalSortKey(key);\n    setLocalSortAsc(newAsc);\n    onSortChanged({key, ascending: newAsc});\n  };\n\n  const handleToggleDetail = (row: DataTableRowType, e: React.MouseEvent) => {\n    e.stopPropagation();\n    setExpandedRows((prev) => {\n      const next = new Set(prev);\n      if (next.has(row.id)) {\n        next.delete(row.id);\n        onHideDetail({rowId: row.id, row});\n      } else {\n        next.add(row.id);\n        onShowDetail({rowId: row.id, row});\n      }\n      return next;\n    });\n  };\n\n  const handleRowClick = (row: DataTableRowType) => {\n    onRowClicked({rowId: row.id, row});\n  };\n\n  const handlePageChange = (page: number) => {\n    setLocalPage(page);\n    if (pageSize) {\n      onPageChanged({page, pageSize});\n    }\n  };\n\n  // ── Cell padding ─────────────────────────────────────────────────────────\n  const cellPad = compact ? \"py-1 px-2\" : \"py-2 px-3\";\n\n  // ── Render ────────────────────────────────────────────────────────────────\n  return (\n    <div className={cn(\"w-full\", className)} data-pihanga={cardName}>\n      <Table>\n        {caption && <TableCaption>{caption}</TableCaption>}\n\n        {/* ── Header ─────────────────────────────────────────────────────── */}\n        <TableHeader\n          className={\n            stickyHeader ? \"sticky top-0 z-10 bg-background\" : undefined\n          }\n        >\n          <TableRow>\n            {/* Expand-toggle placeholder header cell */}\n            {hasDetailRows && (\n              <TableHead className=\"w-10 px-2\" aria-label=\"Row details\" />\n            )}\n\n            {columns.map((col) => (\n              <TableHead\n                key={col.key}\n                style={col.width ? {width: col.width} : undefined}\n                className={cn(\n                  cellPad,\n                  col.align === \"center\" && \"text-center\",\n                  col.align === \"right\" && \"text-right\",\n                  col.sortable && \"cursor-pointer select-none\",\n                  col.headerClassName,\n                )}\n                onClick={\n                  col.sortable ? () => handleSortClick(col.key) : undefined\n                }\n              >\n                <span className=\"inline-flex items-center\">\n                  {col.title ?? keyToTitle(col.key)}\n                  {col.sortable && (\n                    <SortIcon\n                      columnKey={col.key}\n                      activeKey={activeSortKey}\n                      ascending={activeSortAsc}\n                    />\n                  )}\n                </span>\n              </TableHead>\n            ))}\n          </TableRow>\n        </TableHeader>\n\n        {/* ── Body ───────────────────────────────────────────────────────── */}\n        <TableBody>\n          {paginatedRows.length === 0 ? (\n            /* Empty state */\n            <TableRow>\n              <TableCell\n                colSpan={colCount}\n                className=\"py-8 text-center text-muted-foreground\"\n              >\n                {emptyCard ? (\n                  <Card cardName={emptyCard} parentCard={cardName} />\n                ) : (\n                  emptyText\n                )}\n              </TableCell>\n            </TableRow>\n          ) : (\n            paginatedRows.map((row, rowIdx) => {\n              const isExpanded = expandedRows.has(row.id);\n              const isStriped = striped && rowIdx % 2 === 1;\n\n              return (\n                <React.Fragment key={row.id}>\n                  {/* ── Data row ─────────────────────────────────────────── */}\n                  <TableRow\n                    className={cn(\n                      isStriped && \"bg-muted/30\",\n                      hoverable && \"cursor-pointer\",\n                    )}\n                    data-expanded={isExpanded || undefined}\n                    onClick={() => handleRowClick(row)}\n                  >\n                    {/* Expand / collapse toggle */}\n                    {hasDetailRows && (\n                      <TableCell className=\"w-10 px-2\">\n                        {row.detailCard && (\n                          <button\n                            type=\"button\"\n                            aria-label={\n                              isExpanded ? \"Collapse detail\" : \"Expand detail\"\n                            }\n                            aria-expanded={isExpanded}\n                            className={cn(\n                              \"flex items-center justify-center rounded p-0.5 transition-colors\",\n                              \"hover:bg-accent focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring\",\n                            )}\n                            onClick={(e) => handleToggleDetail(row, e)}\n                          >\n                            {isExpanded ? (\n                              <ChevronDown className=\"size-4\" />\n                            ) : (\n                              <ChevronRight className=\"size-4\" />\n                            )}\n                          </button>\n                        )}\n                      </TableCell>\n                    )}\n\n                    {/* Data cells */}\n                    {columns.map((col) => {\n                      const value = (row.data as Record<string, unknown>)[\n                        col.key\n                      ];\n                      return (\n                        <TableCell\n                          key={col.key}\n                          className={cn(\n                            cellPad,\n                            col.align === \"center\" && \"text-center\",\n                            col.align === \"right\" && \"text-right\",\n                            col.cellClassName,\n                          )}\n                        >\n                          {renderCell(col, value, cardName)}\n                        </TableCell>\n                      );\n                    })}\n                  </TableRow>\n\n                  {/* ── Detail row (full-width, shown when expanded) ──────── */}\n                  {isExpanded && row.detailCard && (\n                    <TableRow\n                      // Suppress the default hover/click styles on the detail row\n                      className=\"hover:bg-transparent\"\n                      onClick={(e) => e.stopPropagation()}\n                    >\n                      <TableCell colSpan={colCount} className=\"border-b p-0\">\n                        <div className=\"bg-muted/20 px-4 py-3\">\n                          {/*\n                           * cardKey creates a unique virtual card instance per row\n                           * (e.g. \"myDetailTemplate@detail-42\").\n                           * The `row` prop is forwarded as ctxtProps so the detail\n                           * card's state-mapper functions can access it via\n                           * `ctx.ctxtProps.row` — no need to pre-register one card\n                           * per row.\n                           */}\n                          <Card\n                            cardName={row.detailCard}\n                            cardKey={`detail-${row.id}`}\n                            row={row}\n                            parentCard={cardName}\n                            key={`${cardName}-${row.id}-detail`}\n                          />\n                        </div>\n                      </TableCell>\n                    </TableRow>\n                  )}\n                </React.Fragment>\n              );\n            })\n          )}\n        </TableBody>\n      </Table>\n\n      {/* ── Pagination controls ──────────────────────────────────────────── */}\n      {pageSize && totalPages > 1 && (\n        <PaginationBar\n          page={activePage}\n          totalPages={totalPages}\n          onPrev={() => handlePageChange(activePage - 1)}\n          onNext={() => handlePageChange(activePage + 1)}\n        />\n      )}\n    </div>\n  );\n};\n"],"mappings":"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"}