@pihanga2/shadcn 0.2.5 → 0.2.7

package/cards/collapsibleCard.d.ts

@@ -0,0 +1 @@
+export * from './collapsibleCard/index';

package/cards/dataTable/dataTable.component.js

@@ -1,27 +1,27 @@
-import { Badge as e } from "../../components/ui/badge.js";
-import { cn as t } from "../../lib/utils.js";
+import { cn as e } from "../../lib/utils.js";
+import { Badge as t } from "../../components/ui/badge.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 l, { useMemo as u, useState as d } from "react";
 import { Card as f } from "@pihanga2/core";
 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) {
+function ee(e, n, r) {
 	if (n == null) return null;
-	switch (t.type) {
+	switch (e.type) {
 		case "number": {
-			let e = typeof n == "number" ? n : Number(n);
-			return isNaN(e) ? String(n) : t.format ? t.format(e) : String(e);
+			let t = typeof n == "number" ? n : Number(n);
+			return isNaN(t) ? String(n) : e.format ? e.format(t) : String(t);
 		}
 		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();
+			if (e.format) return e.format(n);
+			let t = n instanceof Date ? n : new Date(String(n));
+			return isNaN(t.getTime()) ? String(n) : t.toLocaleDateString();
 		}
 		case "badge": {
 			let r = String(n);
-			return /* @__PURE__ */ p(e, {
-				variant: t.variants?.[r] ?? "secondary",
+			return /* @__PURE__ */ p(t, {
+				variant: e.variants?.[r] ?? "secondary",
 				children: r
 			});
 		}
@@ -42,7 +42,7 @@ function ee(t, n, r) {
 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 }) {
+function S({ page: t, totalPages: n, onPrev: r, onNext: i }) {
 	return /* @__PURE__ */ m("div", {
 		className: "flex items-center justify-end gap-2 mt-2 px-2",
 		children: [
@@ -50,22 +50,22 @@ function S({ page: e, totalPages: n, onPrev: r, onNext: i }) {
 				className: "text-sm text-muted-foreground",
 				children: [
 					"Page ",
-					e + 1,
+					t + 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,
+				className: e("rounded border px-2 py-1 text-sm transition-colors", "hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40"),
+				disabled: t === 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,
+				className: e("rounded border px-2 py-1 text-sm transition-colors", "hover:bg-accent disabled:cursor-not-allowed disabled:opacity-40"),
+				disabled: t >= n - 1,
 				onClick: i,
 				children: "Next"
 			})
@@ -75,8 +75,8 @@ function S({ page: e, totalPages: n, onPrev: r, onNext: i }) {
 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] = d(/* @__PURE__ */ new Set()), [R, z] = d(b), [B, V] = d(w ?? !0), H = b === void 0 ? R : b, U = w === void 0 ? B : w, [W, G] = d(E ?? 0), K = E === void 0 ? W : E, q = v.some((e) => e.detailCard != null), J = h.length + +!!q, Y = u(() => H ? [...v].sort((e, t) => {
+var w = (t) => {
+	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 } = t, [I, L] = d(/* @__PURE__ */ new Set()), [R, z] = d(b), [B, V] = d(w ?? !0), H = b === void 0 ? R : b, U = w === void 0 ? B : w, [W, G] = d(E ?? 0), K = E === void 0 ? W : E, q = v.some((e) => e.detailCard != null), J = h.length + +!!q, Y = u(() => 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;
@@ -124,7 +124,7 @@ var w = (e) => {
 		});
 	}, $ = re ? "py-1 px-2" : "py-2 px-3";
 	return /* @__PURE__ */ m("div", {
-		className: t("w-full", k),
+		className: e("w-full", k),
 		"data-pihanga": A,
 		children: [/* @__PURE__ */ m(n, { children: [
 			y && /* @__PURE__ */ p(i, { children: y }),
@@ -133,19 +133,19 @@ var w = (e) => {
 				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,
+				}), h.map((t) => /* @__PURE__ */ p(o, {
+					style: t.width ? { width: t.width } : void 0,
+					className: e($, t.align === "center" && "text-center", t.align === "right" && "text-right", t.sortable && "cursor-pointer select-none", t.headerClassName),
+					onClick: t.sortable ? () => ae(t.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,
+						children: [t.title ?? C(t.key), t.sortable && /* @__PURE__ */ p(x, {
+							columnKey: t.key,
 							activeKey: H,
 							ascending: U
 						})]
 					})
-				}, e.key))] })
+				}, t.key))] })
 			}),
 			/* @__PURE__ */ p(r, { children: X.length === 0 ? /* @__PURE__ */ p(c, { children: /* @__PURE__ */ p(a, {
 				colSpan: J,
@@ -154,30 +154,31 @@ var w = (e) => {
 					cardName: O,
 					parentCard: A
 				}) : ie
-			}) }) : X.map((e, n) => {
-				let r = I.has(e.id), i = te && n % 2 == 1;
+			}) }) : X.map((t, n) => {
+				let r = I.has(t.id), i = te && n % 2 == 1;
 				return /* @__PURE__ */ m(l.Fragment, { children: [/* @__PURE__ */ m(c, {
-					className: t(i && "bg-muted/30", ne && "cursor-pointer"),
+					className: e(i && "bg-muted/30", ne && "cursor-pointer"),
 					"data-expanded": r || void 0,
-					onClick: () => se(e),
+					onClick: () => se(t),
 					children: [q && /* @__PURE__ */ p(a, {
 						className: "w-10 px-2",
-						children: e.detailCard && /* @__PURE__ */ p("button", {
+						children: t.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),
+							className: e("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: (e) => oe(t, e),
 							children: p(r ? g : _, { className: "size-4" })
 						})
 					}), h.map((n) => {
-						let r = e.data[n.key];
+						let r = t.data[n.key], i = typeof n.cellClassName == "function" ? n.cellClassName(r, t) : n.cellClassName, o = typeof n.cellStyle == "function" ? n.cellStyle(r, t) : n.cellStyle;
 						return /* @__PURE__ */ p(a, {
-							className: t($, n.align === "center" && "text-center", n.align === "right" && "text-right", n.cellClassName),
+							className: e($, n.align === "center" && "text-center", n.align === "right" && "text-right", i),
+							style: o,
 							children: ee(n, r, A)
 						}, n.key);
 					})]
-				}), r && e.detailCard && /* @__PURE__ */ p(c, {
+				}), r && t.detailCard && /* @__PURE__ */ p(c, {
 					className: "hover:bg-transparent",
 					onClick: (e) => e.stopPropagation(),
 					children: /* @__PURE__ */ p(a, {
@@ -186,14 +187,14 @@ var w = (e) => {
 						children: /* @__PURE__ */ p("div", {
 							className: "bg-muted/20 px-4 py-3",
 							children: /* @__PURE__ */ p(f, {
-								cardName: e.detailCard,
-								cardKey: `detail-${e.id}`,
-								row: e,
+								cardName: t.detailCard,
+								cardKey: `detail-${t.id}`,
+								row: t,
 								parentCard: A
-							}, `${A}-${e.id}-detail`)
+							}, `${A}-${t.id}-detail`)
 						})
 					})
-				})] }, e.id);
+				})] }, t.id);
 			}) })
 		] }), T && Z > 1 && /* @__PURE__ */ p(S, {
 			page: K,

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

@@ -1 +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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"}
+{"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                      const resolvedClassName =\n                        typeof col.cellClassName === \"function\"\n                          ? col.cellClassName(value, row)\n                          : col.cellClassName;\n                      const resolvedStyle =\n                        typeof col.cellStyle === \"function\"\n                          ? col.cellStyle(value, row)\n                          : col.cellStyle;\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                            resolvedClassName,\n                          )}\n                          style={resolvedStyle}\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":";;;;;;;;AAgCA,SAAS,GACP,GACA,GACA,GACiB;CACjB,IAAI,KAAS,MAAM,OAAO;CAE1B,QAAQ,EAAO,MAAf;EACE,KAAK,UAAU;GACb,IAAM,IAAM,OAAO,KAAU,WAAW,IAAQ,OAAO,CAAK;GAC5D,OAAO,MAAM,CAAG,IACZ,OAAO,CAAK,IACZ,EAAO,SACL,EAAO,OAAO,CAAG,IACjB,OAAO,CAAG;EAClB;EAEA,KAAK,QAAQ;GACX,IAAI,EAAO,QACT,OAAO,EAAO,OAAO,CAAsB;GAE7C,IAAM,IAAI,aAAiB,OAAO,IAAQ,IAAI,KAAK,OAAO,CAAK,CAAC;GAChE,OAAO,MAAM,EAAE,QAAQ,CAAC,IAAI,OAAO,CAAK,IAAI,EAAE,mBAAmB;EACnE;EAEA,KAAK,SAAS;GACZ,IAAM,IAAS,OAAO,CAAK;GAE3B,OAAO,kBAAC,GAAD;IAAgB,SADP,EAAO,WAAW,MAAW;cACZ;GAAc,CAAA;EACjD;EAEA,KAAK,WACH,OAAO,IACL,kBAAC,GAAD;GAAO,WAAU;GAAwB,cAAW;EAAQ,CAAA,IAE5D,kBAAC,GAAD;GAAG,WAAU;GAA+B,cAAW;EAAS,CAAA;EAIpE,KAAK,QAEH,OAAO,kBAAC,GAAD;GAAM,UAAU,OAAO,CAAK;GAAe;EAAa,CAAA;EAGjE,SAEE,OAAO,OAAO,CAAK;CACvB;AACF;AAMA,SAAS,EAAS,EAChB,cACA,cACA,gBAKkB;CAIlB,OAHI,MAAc,IAIhB,EADK,IACJ,IAEA,GAFD,EAAW,WAAU,uBAAwB,CAEE,IALxC,kBAAC,GAAD,EAAgB,WAAU,kCAAmC,CAAA;AAOxE;AAMA,SAAS,EAAc,EACrB,SACA,eACA,WACA,aAMkB;CAClB,OACE,kBAAC,OAAD;EAAK,WAAU;YAAf;GACE,kBAAC,QAAD;IAAM,WAAU;cAAhB;KAAgD;KACxC,IAAO;KAAE;KAAK;IAChB;;GACN,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EACT,sDACA,iEACF;IACA,UAAU,MAAS;IACnB,SAAS;cACV;GAEO,CAAA;GACR,kBAAC,UAAD;IACE,MAAK;IACL,WAAW,EACT,sDACA,iEACF;IACA,UAAU,KAAQ,IAAa;IAC/B,SAAS;cACV;GAEO,CAAA;EACL;;AAET;AAMA,SAAS,EAAW,GAAqB;CACvC,OAAO,EACJ,QAAQ,YAAY,KAAK,EACzB,QAAQ,OAAO,MAAM,EAAE,YAAY,CAAC,EACpC,KAAK;AACV;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,YACA,SACA,YACA,SAAS,GACT,eAAe,GACf,aACA,aAAa,GACb,kBAAe,IACf,cAAU,IACV,gBAAY,IACZ,cAAU,IACV,cACA,gBAAY,WACZ,cACA,aACA,iBACA,kBACA,iBACA,iBACA,qBACE,GAGE,CAAC,GAAc,KAAmB,kBACtC,IAAI,IAAI,CACV,GAGM,CAAC,GAAc,KAAmB,EACtC,CACF,GACM,CAAC,GAAc,KAAmB,EACtC,KAAqB,EACvB,GACM,IAAgB,MAAgB,KAAA,IAA0B,IAAd,GAC5C,IACJ,MAAsB,KAAA,IAAgC,IAApB,GAG9B,CAAC,GAAW,KAAgB,EAAiB,KAAmB,CAAC,GACjE,IACJ,MAAoB,KAAA,IAA8B,IAAlB,GAG5B,IAAgB,EAAK,MAAM,MAAQ,EAAI,cAAc,IAAI,GAEzD,IAAW,EAAQ,SAAU,MAG7B,IAAa,QACZ,IACE,CAAC,GAAG,CAAI,EAAE,MAAM,GAAG,MAAM;EAC9B,IAAM,IAAM,EAAE,KAAiC,IACzC,IAAM,EAAE,KAAiC;EAC/C,IAAI,KAAM,QAAQ,KAAM,MAAM,OAAO;EACrC,IAAI,KAAM,MAAM,OAAO;EACvB,IAAI,KAAM,MAAM,OAAO;EACvB,IAAM,IAAM,IAAK,IAAK,KAAK,MAAK;EAChC,OAAO,IAAgB,IAAM,CAAC;CAChC,CAAC,IAT0B,GAU1B;EAAC;EAAM;EAAe;CAAa,CAAC,GAGjC,IAAgB,QAAc;EAClC,IAAI,CAAC,GAAU,OAAO;EACtB,IAAM,IAAQ,IAAa;EAC3B,OAAO,EAAW,MAAM,GAAO,IAAQ,CAAQ;CACjD,GAAG;EAAC;EAAY;EAAU;CAAU,CAAC,GAE/B,IAAa,IAAW,KAAK,KAAK,EAAW,SAAS,CAAQ,IAAI,GAGlE,MAAmB,MAAgB;EACvC,IAAM,IAAS,MAAkB,IAAM,CAAC,IAAgB;EAGxD,AAFA,EAAgB,CAAG,GACnB,EAAgB,CAAM,GACtB,EAAc;GAAC;GAAK,WAAW;EAAM,CAAC;CACxC,GAEM,MAAsB,GAAuB,MAAwB;EAEzE,AADA,EAAE,gBAAgB,GAClB,GAAiB,MAAS;GACxB,IAAM,IAAO,IAAI,IAAI,CAAI;GAQzB,OAPI,EAAK,IAAI,EAAI,EAAE,KACjB,EAAK,OAAO,EAAI,EAAE,GAClB,EAAa;IAAC,OAAO,EAAI;IAAI;GAAG,CAAC,MAEjC,EAAK,IAAI,EAAI,EAAE,GACf,EAAa;IAAC,OAAO,EAAI;IAAI;GAAG,CAAC,IAE5B;EACT,CAAC;CACH,GAEM,MAAkB,MAA0B;EAChD,EAAa;GAAC,OAAO,EAAI;GAAI;EAAG,CAAC;CACnC,GAEM,KAAoB,MAAiB;EAEzC,AADA,EAAa,CAAI,GACb,KACF,EAAc;GAAC;GAAM;EAAQ,CAAC;CAElC,GAGM,IAAU,KAAU,cAAc;CAGxC,OACE,kBAAC,OAAD;EAAK,WAAW,EAAG,UAAU,CAAS;EAAG,gBAAc;YAAvD,CACE,kBAAC,GAAD,EAAA,UAAA;GACG,KAAW,kBAAC,GAAD,EAAA,UAAe,EAAsB,CAAA;GAGjD,kBAAC,GAAD;IACE,WACE,IAAe,oCAAoC,KAAA;cAGrD,kBAAC,GAAD,EAAA,UAAA,CAEG,KACC,kBAAC,GAAD;KAAW,WAAU;KAAY,cAAW;IAAe,CAAA,GAG5D,EAAQ,KAAK,MACZ,kBAAC,GAAD;KAEE,OAAO,EAAI,QAAQ,EAAC,OAAO,EAAI,MAAK,IAAI,KAAA;KACxC,WAAW,EACT,GACA,EAAI,UAAU,YAAY,eAC1B,EAAI,UAAU,WAAW,cACzB,EAAI,YAAY,8BAChB,EAAI,eACN;KACA,SACE,EAAI,iBAAiB,GAAgB,EAAI,GAAG,IAAI,KAAA;eAGlD,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CACG,EAAI,SAAS,EAAW,EAAI,GAAG,GAC/B,EAAI,YACH,kBAAC,GAAD;OACE,WAAW,EAAI;OACf,WAAW;OACX,WAAW;MACZ,CAAA,CAEC;;IACG,GAvBJ,EAAI,GAuBA,CACZ,CACO,EAAA,CAAA;GACC,CAAA;GAGb,kBAAC,GAAD,EAAA,UACG,EAAc,WAAW,IAExB,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;IACE,SAAS;IACT,WAAU;cAET,IACC,kBAAC,GAAD;KAAM,UAAU;KAAW,YAAY;IAAW,CAAA,IAElD;GAEO,CAAA,EACH,CAAA,IAEV,EAAc,KAAK,GAAK,MAAW;IACjC,IAAM,IAAa,EAAa,IAAI,EAAI,EAAE,GACpC,IAAY,MAAW,IAAS,KAAM;IAE5C,OACE,kBAAC,EAAM,UAAP,EAAA,UAAA,CAEE,kBAAC,GAAD;KACE,WAAW,EACT,KAAa,eACb,MAAa,gBACf;KACA,iBAAe,KAAc,KAAA;KAC7B,eAAe,GAAe,CAAG;eANnC,CASG,KACC,kBAAC,GAAD;MAAW,WAAU;gBAClB,EAAI,cACH,kBAAC,UAAD;OACE,MAAK;OACL,cACE,IAAa,oBAAoB;OAEnC,iBAAe;OACf,WAAW,EACT,oEACA,yFACF;OACA,UAAU,MAAM,GAAmB,GAAK,CAAC;iBAGvC,EADD,IACE,IAEA,GAFD,EAAa,WAAU,SAAU,CAEC;MAE9B,CAAA;KAED,CAAA,GAIZ,EAAQ,KAAK,MAAQ;MACpB,IAAM,IAAS,EAAI,KACjB,EAAI,MAEA,IACJ,OAAO,EAAI,iBAAkB,aACzB,EAAI,cAAc,GAAO,CAAG,IAC5B,EAAI,eACJ,IACJ,OAAO,EAAI,aAAc,aACrB,EAAI,UAAU,GAAO,CAAG,IACxB,EAAI;MACV,OACE,kBAAC,GAAD;OAEE,WAAW,EACT,GACA,EAAI,UAAU,YAAY,eAC1B,EAAI,UAAU,WAAW,cACzB,CACF;OACA,OAAO;iBAEN,GAAW,GAAK,GAAO,CAAQ;MACvB,GAVJ,EAAI,GAUA;KAEf,CAAC,CACO;QAGT,KAAc,EAAI,cACjB,kBAAC,GAAD;KAEE,WAAU;KACV,UAAU,MAAM,EAAE,gBAAgB;eAElC,kBAAC,GAAD;MAAW,SAAS;MAAU,WAAU;gBACtC,kBAAC,OAAD;OAAK,WAAU;iBASb,kBAAC,GAAD;QACE,UAAU,EAAI;QACd,SAAS,UAAU,EAAI;QAClB;QACL,YAAY;OAEb,GADM,GAAG,EAAS,GAAG,EAAI,GAAG,QAC5B;MACE,CAAA;KACI,CAAA;IACH,CAAA,CAEE,EAAA,GA9FK,EAAI,EA8FT;GAEpB,CAAC,EAEM,CAAA;EACN,EAAA,CAAA,GAGN,KAAY,IAAa,KACxB,kBAAC,GAAD;GACE,MAAM;GACM;GACZ,cAAc,EAAiB,IAAa,CAAC;GAC7C,cAAc,EAAiB,IAAa,CAAC;EAC9C,CAAA,CAEA;;AAET"}

package/cards/dataTable/dataTable.types.d.ts

@@ -1,3 +1,4 @@
+import { default as React } from 'react';
 import { PiCardRef } from '@pihanga2/core';
 export declare const DATA_TABLE_CARD = "shad/data-table";
 export declare const DataTable: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<DataTableProps<Record<string, unknown>>, S, DataTableEvents>) => import('@pihanga2/core').PiCardDef;
@@ -40,8 +41,31 @@ export type DataTableColumnBase = {
     sortable?: boolean;
     /** Extra CSS class applied to the `<th>` header cell */
     headerClassName?: string;
-    /** Extra CSS class applied to every `<td>` data cell in this column */
-    cellClassName?: string;
+    /**
+     * Extra CSS class applied to every `<td>` data cell in this column.
+     * May be a static string **or** a function called per-cell:
+     * `(value, row) => "bg-red-500 text-white"`.
+     */
+    cellClassName?: string | ((value: unknown, row: DataTableRow) => string | undefined);
+    /**
+     * Inline style applied to every `<td>` data cell in this column.
+     * May be a static `React.CSSProperties` object **or** a function called
+     * per-cell: `(value, row) => ({ backgroundColor: "blue", color: "white" })`.
+     *
+     * @example
+     * ```ts
+     * cellStyle: (value) => {
+     *   const map: Record<string, React.CSSProperties> = {
+     *     Superior:          { backgroundColor: "#4472C4", color: "#fff" },
+     *     Satisfactory:      { backgroundColor: "#70AD47", color: "#fff" },
+     *     "Needs Improvement": { backgroundColor: "#FFC000", color: "#fff" },
+     *     Unsatisfactory:    { backgroundColor: "#FF0000", color: "#fff" },
+     *   };
+     *   return map[String(value)];
+     * }
+     * ```
+     */
+    cellStyle?: React.CSSProperties | ((value: unknown, row: DataTableRow) => React.CSSProperties | undefined);
 };
 /** Plain text column — cell value rendered as a string */
 export type TextColumn = DataTableColumnBase & {

package/cards/dataTable/dataTable.types.js

@@ -1,3 +1,4 @@
+import "react";
 import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
 //#region src/cards/dataTable/dataTable.types.ts
 var r = "shad/data-table", i = e(r), a = n(r, [

package/cards/dataTable/dataTable.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"dataTable.types.js","names":[],"sources":["../../../src/cards/dataTable/dataTable.types.ts"],"sourcesContent":["import {\n  type PiCardRef,\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const DATA_TABLE_CARD = \"shad/data-table\";\n\nexport const DataTable = createCardDeclaration<DataTableProps, DataTableEvents>(\n  DATA_TABLE_CARD,\n);\n\nexport const DATA_TABLE_ACTION = registerActions(DATA_TABLE_CARD, [\n  \"row_clicked\",\n  \"sort_changed\",\n  \"show_detail\",\n  \"hide_detail\",\n  \"page_changed\",\n]);\n\nexport const onDataTableRowClicked = createOnAction<DataTableRowClickedEvent>(\n  DATA_TABLE_ACTION.ROW_CLICKED,\n);\nexport const onDataTableSortChanged = createOnAction<DataTableSortChangedEvent>(\n  DATA_TABLE_ACTION.SORT_CHANGED,\n);\nexport const onDataTableShowDetail = createOnAction<DataTableDetailEvent>(\n  DATA_TABLE_ACTION.SHOW_DETAIL,\n);\nexport const onDataTableHideDetail = createOnAction<DataTableDetailEvent>(\n  DATA_TABLE_ACTION.HIDE_DETAIL,\n);\nexport const onDataTablePageChanged = createOnAction<DataTablePageChangedEvent>(\n  DATA_TABLE_ACTION.PAGE_CHANGED,\n);\n\n// ---------------------------------------------------------------------------\n// Column type definitions\n// ---------------------------------------------------------------------------\n\n/** Shared base for all column definitions */\nexport type DataTableColumnBase = {\n  /** Key into the row's `data` object used to retrieve the cell value */\n  key: string;\n  /**\n   * Column header label.\n   * Defaults to the `key` with camelCase expanded to \"Title Case\".\n   */\n  title?: string;\n  /** Column width as a CSS value (e.g. \"120px\", \"10%\", \"1fr\") */\n  width?: string | number;\n  /** Horizontal alignment of cell content. Defaults to \"left\". */\n  align?: \"left\" | \"center\" | \"right\";\n  /** Whether the column header is clickable for sorting */\n  sortable?: boolean;\n  /** Extra CSS class applied to the `<th>` header cell */\n  headerClassName?: string;\n  /** Extra CSS class applied to every `<td>` data cell in this column */\n  cellClassName?: string;\n};\n\n/** Plain text column — cell value rendered as a string */\nexport type TextColumn = DataTableColumnBase & {\n  type?: \"text\";\n};\n\n/** Numeric column with optional custom formatter */\nexport type NumberColumn = DataTableColumnBase & {\n  type: \"number\";\n  /** Custom number formatter; defaults to `String(value)` */\n  format?: (n: number) => string;\n};\n\n/** Badge/chip column — cell value is rendered inside a `<Badge>` */\nexport type BadgeColumn = DataTableColumnBase & {\n  type: \"badge\";\n  /**\n   * Map from cell value (as a string) to a shadcn Badge variant.\n   * Falls back to \"secondary\" for unrecognised values.\n   */\n  variants?: Record<\n    string,\n    \"default\" | \"secondary\" | \"destructive\" | \"outline\"\n  >;\n};\n\n/** Date column with optional custom formatter */\nexport type DateColumn = DataTableColumnBase & {\n  type: \"date\";\n  /** Custom date formatter; defaults to `toLocaleDateString()` */\n  format?: (d: Date | string) => string;\n};\n\n/** Boolean column — renders a check-mark or cross icon */\nexport type BooleanColumn = DataTableColumnBase & {\n  type: \"boolean\";\n};\n\n/**\n * Card column — cell value must be a `PiCardRef` (string).\n * The referenced card is rendered inline via Pihanga's `<Card />`.\n * This enables full reuse of any registered Pihanga card as cell content.\n */\nexport type CardColumn = DataTableColumnBase & {\n  type: \"card\";\n};\n\nexport type DataTableColumn =\n  | TextColumn\n  | NumberColumn\n  | BadgeColumn\n  | DateColumn\n  | BooleanColumn\n  | CardColumn;\n\n// ---------------------------------------------------------------------------\n// Row\n// ---------------------------------------------------------------------------\n\nexport type DataTableRow<T = Record<string, unknown>> = {\n  /** Unique row identifier used as the React key and in events */\n  id: string | number;\n  /**\n   * Row payload — values are keyed by the column's `key` field.\n   * For \"card\" columns the value should be a `PiCardRef` string.\n   */\n  data: T;\n  /**\n   * When set, the row shows an expand/collapse toggle button.\n   * The referenced card is rendered full-width below the row on expand.\n   * Use `onShowDetail` / `onHideDetail` events to track expanded state in\n   * your redux store and update `detailCard` per row as needed.\n   */\n  detailCard?: PiCardRef;\n};\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type DataTableProps<T = Record<string, unknown>> = {\n  /** Column definitions — order determines display order */\n  columns: DataTableColumn[];\n  /** Row data */\n  rows: DataTableRow<T>[];\n  /** Optional visible `<caption>` rendered below the table */\n  caption?: string;\n\n  // --- Sorting ---\n  /**\n   * Key of the currently sorted column.\n   * When provided the sort state is controlled; otherwise managed internally.\n   */\n  sortKey?: string;\n  /**\n   * Sort direction.\n   * When provided together with `sortKey` the sort state is controlled.\n   */\n  sortAscending?: boolean;\n\n  // --- Pagination ---\n  /** Maximum number of rows per page. Omit to disable pagination. */\n  pageSize?: number;\n  /** Current page index (0-based). Treated as controlled when provided. */\n  currentPage?: number;\n  /**\n   * Total row count, used for server-side pagination display.\n   * Leave unset for client-side pagination derived from `rows.length`.\n   */\n  totalRows?: number;\n\n  // --- Display ---\n  /** Keep the header visible while the body scrolls */\n  stickyHeader?: boolean;\n  /** Alternate row background colour (zebra striping) */\n  striped?: boolean;\n  /** Highlight rows on hover (default: true) */\n  hoverable?: boolean;\n  /** Use compact row padding */\n  compact?: boolean;\n\n  // --- Empty state ---\n  /** Card rendered when `rows` is empty */\n  emptyCard?: PiCardRef;\n  /** Fallback text when `rows` is empty and `emptyCard` is not set */\n  emptyText?: string;\n\n  className?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Events\n// ---------------------------------------------------------------------------\n\nexport type DataTableRowClickedEvent = {\n  rowId: string | number;\n  row: DataTableRow;\n};\n\nexport type DataTableSortChangedEvent = {\n  /** The column key that was clicked */\n  key: string;\n  /** `true` = ascending, `false` = descending */\n  ascending: boolean;\n};\n\nexport type DataTableDetailEvent = {\n  rowId: string | number;\n  row: DataTableRow;\n};\n\nexport type DataTablePageChangedEvent = {\n  /** New page index (0-based) */\n  page: number;\n  pageSize: number;\n};\n\nexport type DataTableEvents = {\n  onRowClicked: DataTableRowClickedEvent;\n  onSortChanged: DataTableSortChangedEvent;\n  onShowDetail: DataTableDetailEvent;\n  onHideDetail: DataTableDetailEvent;\n  onPageChanged: DataTablePageChangedEvent;\n};\n\n// ---------------------------------------------------------------------------\n// DataTableRowDetail — generic single-template detail panel\n// ---------------------------------------------------------------------------\n\n/** Configuration for a single field shown in the detail panel. */\nexport type DataTableRowDetailField = {\n  /** Key to look up in `row.data` */\n  key: string;\n  /** Optional human-readable label prefix (e.g. \"Director\") */\n  label?: string;\n  /** Render style: \"title\" → h4 bold, \"muted\" → muted foreground, \"text\" (default) → plain */\n  type?: \"title\" | \"text\" | \"muted\";\n  /** Additional Tailwind class names forwarded to the element */\n  className?: string;\n};\n\nexport type DataTableRowDetailProps = {\n  /**\n   * The row to display. Set this via a state mapper so a single template\n   * card works for all rows:\n   * ```ts\n   * DataTableRowDetail({\n   *   row: (_, ctx) => ctx.ctxtProps?.row,\n   *   fields: [{ key: \"title\", type: \"title\" }, ...],\n   * })\n   * ```\n   */\n  row?: DataTableRow<Record<string, unknown>>;\n  /**\n   * Fields to render in order.\n   * When omitted, every key in `row.data` is rendered as a plain key:value pair.\n   */\n  fields?: DataTableRowDetailField[];\n};\n\nexport const DATA_TABLE_ROW_DETAIL_CARD = \"shad/data-table-row-detail\";\nexport const DataTableRowDetail =\n  createCardDeclaration<DataTableRowDetailProps>(DATA_TABLE_ROW_DETAIL_CARD);\n"],"mappings":";;AAOA,IAAa,IAAkB,mBAElB,IAAY,EACvB,CACF,GAEa,IAAoB,EAAgB,GAAiB;CAChE;CACA;CACA;CACA;CACA;AACF,CAAC,GAEY,IAAwB,EACnC,EAAkB,WACpB,GACa,IAAyB,EACpC,EAAkB,YACpB,GACa,IAAwB,EACnC,EAAkB,WACpB,GACa,IAAwB,EACnC,EAAkB,WACpB,GACa,IAAyB,EACpC,EAAkB,YACpB,GAkOa,IAA6B,8BAC7B,IACX,EAA+C,CAA0B"}
+{"version":3,"file":"dataTable.types.js","names":[],"sources":["../../../src/cards/dataTable/dataTable.types.ts"],"sourcesContent":["import React from \"react\";\nimport {\n  type PiCardRef,\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const DATA_TABLE_CARD = \"shad/data-table\";\n\nexport const DataTable = createCardDeclaration<DataTableProps, DataTableEvents>(\n  DATA_TABLE_CARD,\n);\n\nexport const DATA_TABLE_ACTION = registerActions(DATA_TABLE_CARD, [\n  \"row_clicked\",\n  \"sort_changed\",\n  \"show_detail\",\n  \"hide_detail\",\n  \"page_changed\",\n]);\n\nexport const onDataTableRowClicked = createOnAction<DataTableRowClickedEvent>(\n  DATA_TABLE_ACTION.ROW_CLICKED,\n);\nexport const onDataTableSortChanged = createOnAction<DataTableSortChangedEvent>(\n  DATA_TABLE_ACTION.SORT_CHANGED,\n);\nexport const onDataTableShowDetail = createOnAction<DataTableDetailEvent>(\n  DATA_TABLE_ACTION.SHOW_DETAIL,\n);\nexport const onDataTableHideDetail = createOnAction<DataTableDetailEvent>(\n  DATA_TABLE_ACTION.HIDE_DETAIL,\n);\nexport const onDataTablePageChanged = createOnAction<DataTablePageChangedEvent>(\n  DATA_TABLE_ACTION.PAGE_CHANGED,\n);\n\n// ---------------------------------------------------------------------------\n// Column type definitions\n// ---------------------------------------------------------------------------\n\n/** Shared base for all column definitions */\nexport type DataTableColumnBase = {\n  /** Key into the row's `data` object used to retrieve the cell value */\n  key: string;\n  /**\n   * Column header label.\n   * Defaults to the `key` with camelCase expanded to \"Title Case\".\n   */\n  title?: string;\n  /** Column width as a CSS value (e.g. \"120px\", \"10%\", \"1fr\") */\n  width?: string | number;\n  /** Horizontal alignment of cell content. Defaults to \"left\". */\n  align?: \"left\" | \"center\" | \"right\";\n  /** Whether the column header is clickable for sorting */\n  sortable?: boolean;\n  /** Extra CSS class applied to the `<th>` header cell */\n  headerClassName?: string;\n  /**\n   * Extra CSS class applied to every `<td>` data cell in this column.\n   * May be a static string **or** a function called per-cell:\n   * `(value, row) => \"bg-red-500 text-white\"`.\n   */\n  cellClassName?:\n    | string\n    | ((value: unknown, row: DataTableRow) => string | undefined);\n  /**\n   * Inline style applied to every `<td>` data cell in this column.\n   * May be a static `React.CSSProperties` object **or** a function called\n   * per-cell: `(value, row) => ({ backgroundColor: \"blue\", color: \"white\" })`.\n   *\n   * @example\n   * ```ts\n   * cellStyle: (value) => {\n   *   const map: Record<string, React.CSSProperties> = {\n   *     Superior:          { backgroundColor: \"#4472C4\", color: \"#fff\" },\n   *     Satisfactory:      { backgroundColor: \"#70AD47\", color: \"#fff\" },\n   *     \"Needs Improvement\": { backgroundColor: \"#FFC000\", color: \"#fff\" },\n   *     Unsatisfactory:    { backgroundColor: \"#FF0000\", color: \"#fff\" },\n   *   };\n   *   return map[String(value)];\n   * }\n   * ```\n   */\n  cellStyle?:\n    | React.CSSProperties\n    | ((value: unknown, row: DataTableRow) => React.CSSProperties | undefined);\n};\n\n/** Plain text column — cell value rendered as a string */\nexport type TextColumn = DataTableColumnBase & {\n  type?: \"text\";\n};\n\n/** Numeric column with optional custom formatter */\nexport type NumberColumn = DataTableColumnBase & {\n  type: \"number\";\n  /** Custom number formatter; defaults to `String(value)` */\n  format?: (n: number) => string;\n};\n\n/** Badge/chip column — cell value is rendered inside a `<Badge>` */\nexport type BadgeColumn = DataTableColumnBase & {\n  type: \"badge\";\n  /**\n   * Map from cell value (as a string) to a shadcn Badge variant.\n   * Falls back to \"secondary\" for unrecognised values.\n   */\n  variants?: Record<\n    string,\n    \"default\" | \"secondary\" | \"destructive\" | \"outline\"\n  >;\n};\n\n/** Date column with optional custom formatter */\nexport type DateColumn = DataTableColumnBase & {\n  type: \"date\";\n  /** Custom date formatter; defaults to `toLocaleDateString()` */\n  format?: (d: Date | string) => string;\n};\n\n/** Boolean column — renders a check-mark or cross icon */\nexport type BooleanColumn = DataTableColumnBase & {\n  type: \"boolean\";\n};\n\n/**\n * Card column — cell value must be a `PiCardRef` (string).\n * The referenced card is rendered inline via Pihanga's `<Card />`.\n * This enables full reuse of any registered Pihanga card as cell content.\n */\nexport type CardColumn = DataTableColumnBase & {\n  type: \"card\";\n};\n\nexport type DataTableColumn =\n  | TextColumn\n  | NumberColumn\n  | BadgeColumn\n  | DateColumn\n  | BooleanColumn\n  | CardColumn;\n\n// ---------------------------------------------------------------------------\n// Row\n// ---------------------------------------------------------------------------\n\nexport type DataTableRow<T = Record<string, unknown>> = {\n  /** Unique row identifier used as the React key and in events */\n  id: string | number;\n  /**\n   * Row payload — values are keyed by the column's `key` field.\n   * For \"card\" columns the value should be a `PiCardRef` string.\n   */\n  data: T;\n  /**\n   * When set, the row shows an expand/collapse toggle button.\n   * The referenced card is rendered full-width below the row on expand.\n   * Use `onShowDetail` / `onHideDetail` events to track expanded state in\n   * your redux store and update `detailCard` per row as needed.\n   */\n  detailCard?: PiCardRef;\n};\n\n// ---------------------------------------------------------------------------\n// Props\n// ---------------------------------------------------------------------------\n\nexport type DataTableProps<T = Record<string, unknown>> = {\n  /** Column definitions — order determines display order */\n  columns: DataTableColumn[];\n  /** Row data */\n  rows: DataTableRow<T>[];\n  /** Optional visible `<caption>` rendered below the table */\n  caption?: string;\n\n  // --- Sorting ---\n  /**\n   * Key of the currently sorted column.\n   * When provided the sort state is controlled; otherwise managed internally.\n   */\n  sortKey?: string;\n  /**\n   * Sort direction.\n   * When provided together with `sortKey` the sort state is controlled.\n   */\n  sortAscending?: boolean;\n\n  // --- Pagination ---\n  /** Maximum number of rows per page. Omit to disable pagination. */\n  pageSize?: number;\n  /** Current page index (0-based). Treated as controlled when provided. */\n  currentPage?: number;\n  /**\n   * Total row count, used for server-side pagination display.\n   * Leave unset for client-side pagination derived from `rows.length`.\n   */\n  totalRows?: number;\n\n  // --- Display ---\n  /** Keep the header visible while the body scrolls */\n  stickyHeader?: boolean;\n  /** Alternate row background colour (zebra striping) */\n  striped?: boolean;\n  /** Highlight rows on hover (default: true) */\n  hoverable?: boolean;\n  /** Use compact row padding */\n  compact?: boolean;\n\n  // --- Empty state ---\n  /** Card rendered when `rows` is empty */\n  emptyCard?: PiCardRef;\n  /** Fallback text when `rows` is empty and `emptyCard` is not set */\n  emptyText?: string;\n\n  className?: string;\n};\n\n// ---------------------------------------------------------------------------\n// Events\n// ---------------------------------------------------------------------------\n\nexport type DataTableRowClickedEvent = {\n  rowId: string | number;\n  row: DataTableRow;\n};\n\nexport type DataTableSortChangedEvent = {\n  /** The column key that was clicked */\n  key: string;\n  /** `true` = ascending, `false` = descending */\n  ascending: boolean;\n};\n\nexport type DataTableDetailEvent = {\n  rowId: string | number;\n  row: DataTableRow;\n};\n\nexport type DataTablePageChangedEvent = {\n  /** New page index (0-based) */\n  page: number;\n  pageSize: number;\n};\n\nexport type DataTableEvents = {\n  onRowClicked: DataTableRowClickedEvent;\n  onSortChanged: DataTableSortChangedEvent;\n  onShowDetail: DataTableDetailEvent;\n  onHideDetail: DataTableDetailEvent;\n  onPageChanged: DataTablePageChangedEvent;\n};\n\n// ---------------------------------------------------------------------------\n// DataTableRowDetail — generic single-template detail panel\n// ---------------------------------------------------------------------------\n\n/** Configuration for a single field shown in the detail panel. */\nexport type DataTableRowDetailField = {\n  /** Key to look up in `row.data` */\n  key: string;\n  /** Optional human-readable label prefix (e.g. \"Director\") */\n  label?: string;\n  /** Render style: \"title\" → h4 bold, \"muted\" → muted foreground, \"text\" (default) → plain */\n  type?: \"title\" | \"text\" | \"muted\";\n  /** Additional Tailwind class names forwarded to the element */\n  className?: string;\n};\n\nexport type DataTableRowDetailProps = {\n  /**\n   * The row to display. Set this via a state mapper so a single template\n   * card works for all rows:\n   * ```ts\n   * DataTableRowDetail({\n   *   row: (_, ctx) => ctx.ctxtProps?.row,\n   *   fields: [{ key: \"title\", type: \"title\" }, ...],\n   * })\n   * ```\n   */\n  row?: DataTableRow<Record<string, unknown>>;\n  /**\n   * Fields to render in order.\n   * When omitted, every key in `row.data` is rendered as a plain key:value pair.\n   */\n  fields?: DataTableRowDetailField[];\n};\n\nexport const DATA_TABLE_ROW_DETAIL_CARD = \"shad/data-table-row-detail\";\nexport const DataTableRowDetail =\n  createCardDeclaration<DataTableRowDetailProps>(DATA_TABLE_ROW_DETAIL_CARD);\n"],"mappings":";;;AAQA,IAAa,IAAkB,mBAElB,IAAY,EACvB,CACF,GAEa,IAAoB,EAAgB,GAAiB;CAChE;CACA;CACA;CACA;CACA;AACF,CAAC,GAEY,IAAwB,EACnC,EAAkB,WACpB,GACa,IAAyB,EACpC,EAAkB,YACpB,GACa,IAAwB,EACnC,EAAkB,WACpB,GACa,IAAwB,EACnC,EAAkB,WACpB,GACa,IAAyB,EACpC,EAAkB,YACpB,GA6Pa,IAA6B,8BAC7B,IACX,EAA+C,CAA0B"}

package/cards/drawer/drawer.component.d.ts

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

package/cards/drawer/drawer.component.js

@@ -0,0 +1,83 @@
+import { Button as e } from "../../components/ui/button.js";
+import { Drawer as t, DrawerClose as n, DrawerContent as r, DrawerDescription as i, DrawerFooter as a, DrawerHeader as o, DrawerTitle as s, DrawerTrigger as c } from "../../components/ui/drawer.js";
+import l from "react";
+import { Card as u } from "@pihanga2/core";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/cards/drawer/drawer.component.tsx
+var p = (p) => {
+	let { id: m, trigger: h, content: g, title: _, description: v, open: y, direction: b = "bottom", dismissible: x = !0, footer: S, footerCloseButtonText: C, className: w, cardName: T, onOpened: E, onClosed: D, onOpenChanged: O } = p, k = C === void 0 ? "Close" : C, [A, j] = l.useState(!1), M = y ?? A, N = l.useRef(y);
+	l.useEffect(() => {
+		N.current === !0 && y === !1 && M === !1 && D({
+			id: m,
+			reason: "programmatic"
+		}), N.current = y;
+	}, [
+		y,
+		M,
+		m,
+		D
+	]);
+	let P = (e) => {
+		y === void 0 && j(e), O({
+			open: e,
+			id: m
+		}), e ? E({ id: m }) : y === void 0 && D({
+			id: m,
+			reason: "user"
+		});
+	};
+	function F() {
+		return h ? /* @__PURE__ */ d("span", {
+			className: "inline-flex",
+			"data-pihanga-trigger-wrapper": !0,
+			children: /* @__PURE__ */ d(u, {
+				cardName: h,
+				parentCard: T
+			})
+		}) : null;
+	}
+	function I() {
+		return !_ && !v ? null : /* @__PURE__ */ f(o, { children: [_ && /* @__PURE__ */ d(s, { children: _ }), v && /* @__PURE__ */ d(i, { children: v })] });
+	}
+	function L() {
+		return S ? /* @__PURE__ */ d(a, { children: /* @__PURE__ */ d(u, {
+			cardName: S,
+			parentCard: T
+		}) }) : k === null ? null : /* @__PURE__ */ d(a, { children: /* @__PURE__ */ d(n, {
+			asChild: !0,
+			children: /* @__PURE__ */ d(e, {
+				variant: "outline",
+				onClick: () => P(!1),
+				children: k
+			})
+		}) });
+	}
+	return /* @__PURE__ */ f(t, {
+		open: M,
+		onOpenChange: P,
+		direction: b,
+		dismissible: x,
+		children: [h && /* @__PURE__ */ d(c, {
+			asChild: !0,
+			children: F()
+		}), /* @__PURE__ */ f(r, {
+			"data-pihanga": T,
+			className: w,
+			children: [
+				I(),
+				/* @__PURE__ */ d("div", {
+					className: "flex-1 overflow-y-auto p-4",
+					children: /* @__PURE__ */ d(u, {
+						cardName: g,
+						parentCard: T
+					})
+				}),
+				L()
+			]
+		})]
+	});
+};
+//#endregion
+export { p as DrawerComponent };
+
+//# sourceMappingURL=drawer.component.js.map

package/cards/drawer/drawer.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.component.js","names":[],"sources":["../../../src/cards/drawer/drawer.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\n\nimport {\n  Drawer as DrawerRoot,\n  DrawerTrigger,\n  DrawerContent,\n  DrawerHeader,\n  DrawerTitle,\n  DrawerDescription,\n  DrawerFooter,\n  DrawerClose,\n} from \"@/registry/ui/drawer\";\nimport {Button} from \"@/registry/ui/button\";\n\nimport type {PiDrawerEvents, PiDrawerProps} from \"./drawer.types\";\n\nexport const DrawerComponent = (\n  props: PiCardProps<PiDrawerProps, PiDrawerEvents>,\n): React.ReactNode => {\n  const {\n    id,\n    trigger,\n    content,\n    title,\n    description,\n    open: controlledOpen,\n    direction = \"bottom\",\n    dismissible = true,\n    footer,\n    footerCloseButtonText,\n    className,\n    cardName,\n    onOpened,\n    onClosed,\n    onOpenChanged,\n  } = props;\n\n  const effectiveFooterCloseButtonText =\n    footerCloseButtonText === undefined ? \"Close\" : footerCloseButtonText;\n\n  const [internalOpen, setInternalOpen] = React.useState(false);\n  const open = controlledOpen ?? internalOpen;\n  const prevControlledOpenRef = React.useRef(controlledOpen);\n\n  React.useEffect(() => {\n    if (\n      prevControlledOpenRef.current === true &&\n      controlledOpen === false &&\n      open === false\n    ) {\n      onClosed({id, reason: \"programmatic\"});\n    }\n    prevControlledOpenRef.current = controlledOpen;\n  }, [controlledOpen, open, id, onClosed]);\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    if (controlledOpen === undefined) {\n      setInternalOpen(nextOpen);\n    }\n    onOpenChanged({open: nextOpen, id});\n    if (nextOpen) {\n      onOpened({id});\n    } else if (controlledOpen === undefined) {\n      onClosed({id, reason: \"user\"});\n    }\n  };\n\n  function renderTrigger() {\n    if (!trigger) return null;\n    return (\n      <span className=\"inline-flex\" data-pihanga-trigger-wrapper>\n        <Card cardName={trigger} parentCard={cardName} />\n      </span>\n    );\n  }\n\n  function renderHeader() {\n    if (!title && !description) return null;\n    return (\n      <DrawerHeader>\n        {title && <DrawerTitle>{title}</DrawerTitle>}\n        {description && <DrawerDescription>{description}</DrawerDescription>}\n      </DrawerHeader>\n    );\n  }\n\n  function renderFooter() {\n    if (footer) {\n      return (\n        <DrawerFooter>\n          <Card cardName={footer} parentCard={cardName} />\n        </DrawerFooter>\n      );\n    }\n    if (effectiveFooterCloseButtonText !== null) {\n      return (\n        <DrawerFooter>\n          <DrawerClose asChild>\n            <Button variant=\"outline\" onClick={() => handleOpenChange(false)}>\n              {effectiveFooterCloseButtonText}\n            </Button>\n          </DrawerClose>\n        </DrawerFooter>\n      );\n    }\n    return null;\n  }\n\n  return (\n    <DrawerRoot\n      open={open}\n      onOpenChange={handleOpenChange}\n      direction={direction}\n      dismissible={dismissible}\n    >\n      {trigger && <DrawerTrigger asChild>{renderTrigger()}</DrawerTrigger>}\n      <DrawerContent data-pihanga={cardName} className={className}>\n        {renderHeader()}\n        <div className=\"flex-1 overflow-y-auto p-4\">\n          <Card cardName={content} parentCard={cardName} />\n        </div>\n        {renderFooter()}\n      </DrawerContent>\n    </DrawerRoot>\n  );\n};\n"],"mappings":";;;;;;AAiBA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,OACA,YACA,YACA,UACA,gBACA,MAAM,GACN,eAAY,UACZ,iBAAc,IACd,WACA,0BACA,cACA,aACA,aACA,aACA,qBACE,GAEE,IACJ,MAA0B,KAAA,IAAY,UAAU,GAE5C,CAAC,GAAc,KAAmB,EAAM,SAAS,EAAK,GACtD,IAAO,KAAkB,GACzB,IAAwB,EAAM,OAAO,CAAc;CAEzD,EAAM,gBAAgB;EAQpB,AANE,EAAsB,YAAY,MAClC,MAAmB,MACnB,MAAS,MAET,EAAS;GAAC;GAAI,QAAQ;EAAc,CAAC,GAEvC,EAAsB,UAAU;CAClC,GAAG;EAAC;EAAgB;EAAM;EAAI;CAAQ,CAAC;CAEvC,IAAM,KAAoB,MAAsB;EAK9C,AAJI,MAAmB,KAAA,KACrB,EAAgB,CAAQ,GAE1B,EAAc;GAAC,MAAM;GAAU;EAAE,CAAC,GAC9B,IACF,EAAS,EAAC,MAAE,CAAC,IACJ,MAAmB,KAAA,KAC5B,EAAS;GAAC;GAAI,QAAQ;EAAM,CAAC;CAEjC;CAEA,SAAS,IAAgB;EAEvB,OADK,IAEH,kBAAC,QAAD;GAAM,WAAU;GAAc,gCAAA;aAC5B,kBAAC,GAAD;IAAM,UAAU;IAAS,YAAY;GAAW,CAAA;EAC5C,CAAA,IAJa;CAMvB;CAEA,SAAS,IAAe;EAEtB,OADI,CAAC,KAAS,CAAC,IAAoB,OAEjC,kBAAC,GAAD,EAAA,UAAA,CACG,KAAS,kBAAC,GAAD,EAAA,UAAc,EAAmB,CAAA,GAC1C,KAAe,kBAAC,GAAD,EAAA,UAAoB,EAA+B,CAAA,CACvD,EAAA,CAAA;CAElB;CAEA,SAAS,IAAe;EAmBtB,OAlBI,IAEA,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GAAM,UAAU;GAAQ,YAAY;EAAW,CAAA,EACnC,CAAA,IAGd,MAAmC,OAWhC,OATH,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;GAAa,SAAA;aACX,kBAAC,GAAD;IAAQ,SAAQ;IAAU,eAAe,EAAiB,EAAK;cAC5D;GACK,CAAA;EACG,CAAA,EACD,CAAA;CAIpB;CAEA,OACE,kBAAC,GAAD;EACQ;EACN,cAAc;EACH;EACE;YAJf,CAMG,KAAW,kBAAC,GAAD;GAAe,SAAA;aAAS,EAAc;EAAiB,CAAA,GACnE,kBAAC,GAAD;GAAe,gBAAc;GAAqB;aAAlD;IACG,EAAa;IACd,kBAAC,OAAD;KAAK,WAAU;eACb,kBAAC,GAAD;MAAM,UAAU;MAAS,YAAY;KAAW,CAAA;IAC7C,CAAA;IACJ,EAAa;GACD;IACL;;AAEhB"}

package/cards/drawer/drawer.types.d.ts

@@ -0,0 +1,95 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const PI_DRAWER_CARD = "pi/drawer";
+export declare const Drawer: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiDrawerProps, S, PiDrawerEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PI_DRAWER_ACTION: {
+    CLOSED: string;
+    OPENED: string;
+    OPEN_CHANGED: string;
+};
+export declare const onDrawerOpened: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & DrawerOpenedEvent>) => void;
+export declare const onDrawerClosed: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & DrawerClosedEvent>) => void;
+export declare const onDrawerOpenChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & DrawerOpenChangedEvent>) => void;
+export type PiDrawerProps = {
+    /**
+     * Optional id passed through to events for identification.
+     */
+    id?: string;
+    /**
+     * Optional drawer trigger card (e.g., a button).
+     *
+     * When provided, this card will be used as the drawer trigger.
+     * When omitted, the drawer must be controlled via the `open` prop.
+     */
+    trigger?: PiCardRef;
+    /**
+     * Card to render as the drawer body content.
+     */
+    content: PiCardRef;
+    /**
+     * Optional drawer title (rendered in header).
+     */
+    title?: string;
+    /**
+     * Optional drawer description (rendered below title).
+     */
+    description?: string;
+    /**
+     * Controlled open state.
+     *
+     * When provided, drawer visibility is fully managed externally.
+     * When undefined, drawer manages its own state.
+     */
+    open?: boolean;
+    /**
+     * Direction the drawer slides in from.
+     * @default "bottom"
+     */
+    direction?: "top" | "bottom" | "left" | "right";
+    /**
+     * Whether clicking outside closes the drawer (default: true).
+     */
+    dismissible?: boolean;
+    /**
+     * Optional footer card to render at the bottom of the drawer.
+     * When provided, this takes precedence over the default close button.
+     */
+    footer?: PiCardRef;
+    /**
+     * Text for the default close button in the footer.
+     * Only used when `footer` is not provided.
+     * Set to `null` to hide the default close button entirely.
+     * @default "Close"
+     */
+    footerCloseButtonText?: string | null;
+    /**
+     * Additional CSS classes for the drawer content.
+     */
+    className?: string;
+};
+export type DrawerOpenedEvent = {
+    id?: string;
+};
+export type DrawerClosedEvent = {
+    id?: string;
+    /**
+     * Reason for closing:
+     * - 'user': User dismissed (clicked outside, dragged, or pressed ESC)
+     * - 'programmatic': Closed via props.open change
+     */
+    reason?: "user" | "programmatic";
+};
+export type DrawerOpenChangedEvent = {
+    open: boolean;
+    id?: string;
+};
+export type PiDrawerEvents = {
+    onOpened: DrawerOpenedEvent;
+    onClosed: DrawerClosedEvent;
+    onOpenChanged: DrawerOpenChangedEvent;
+};

package/cards/drawer/drawer.types.js

@@ -0,0 +1,11 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/drawer/drawer.types.ts
+var r = "pi/drawer", i = e(r), a = n(r, [
+	"opened",
+	"closed",
+	"open_changed"
+]), o = t(a.OPENED), s = t(a.CLOSED), c = t(a.OPEN_CHANGED);
+//#endregion
+export { i as Drawer, a as PI_DRAWER_ACTION, r as PI_DRAWER_CARD, s as onDrawerClosed, c as onDrawerOpenChanged, o as onDrawerOpened };
+
+//# sourceMappingURL=drawer.types.js.map

package/cards/drawer/drawer.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"drawer.types.js","names":[],"sources":["../../../src/cards/drawer/drawer.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_DRAWER_CARD = \"pi/drawer\";\n\nexport const Drawer = createCardDeclaration<PiDrawerProps, PiDrawerEvents>(\n  PI_DRAWER_CARD,\n);\n\nexport const PI_DRAWER_ACTION = registerActions(PI_DRAWER_CARD, [\n  \"opened\",\n  \"closed\",\n  \"open_changed\",\n]);\n\nexport const onDrawerOpened = createOnAction<DrawerOpenedEvent>(\n  PI_DRAWER_ACTION.OPENED,\n);\n\nexport const onDrawerClosed = createOnAction<DrawerClosedEvent>(\n  PI_DRAWER_ACTION.CLOSED,\n);\n\nexport const onDrawerOpenChanged = createOnAction<DrawerOpenChangedEvent>(\n  PI_DRAWER_ACTION.OPEN_CHANGED,\n);\n\nexport type PiDrawerProps = {\n  /**\n   * Optional id passed through to events for identification.\n   */\n  id?: string;\n\n  /**\n   * Optional drawer trigger card (e.g., a button).\n   *\n   * When provided, this card will be used as the drawer trigger.\n   * When omitted, the drawer must be controlled via the `open` prop.\n   */\n  trigger?: PiCardRef;\n\n  /**\n   * Card to render as the drawer body content.\n   */\n  content: PiCardRef;\n\n  /**\n   * Optional drawer title (rendered in header).\n   */\n  title?: string;\n\n  /**\n   * Optional drawer description (rendered below title).\n   */\n  description?: string;\n\n  /**\n   * Controlled open state.\n   *\n   * When provided, drawer visibility is fully managed externally.\n   * When undefined, drawer manages its own state.\n   */\n  open?: boolean;\n\n  /**\n   * Direction the drawer slides in from.\n   * @default \"bottom\"\n   */\n  direction?: \"top\" | \"bottom\" | \"left\" | \"right\";\n\n  /**\n   * Whether clicking outside closes the drawer (default: true).\n   */\n  dismissible?: boolean;\n\n  /**\n   * Optional footer card to render at the bottom of the drawer.\n   * When provided, this takes precedence over the default close button.\n   */\n  footer?: PiCardRef;\n\n  /**\n   * Text for the default close button in the footer.\n   * Only used when `footer` is not provided.\n   * Set to `null` to hide the default close button entirely.\n   * @default \"Close\"\n   */\n  footerCloseButtonText?: string | null;\n\n  /**\n   * Additional CSS classes for the drawer content.\n   */\n  className?: string;\n};\n\nexport type DrawerOpenedEvent = {\n  id?: string;\n};\n\nexport type DrawerClosedEvent = {\n  id?: string;\n  /**\n   * Reason for closing:\n   * - 'user': User dismissed (clicked outside, dragged, or pressed ESC)\n   * - 'programmatic': Closed via props.open change\n   */\n  reason?: \"user\" | \"programmatic\";\n};\n\nexport type DrawerOpenChangedEvent = {\n  open: boolean;\n  id?: string;\n};\n\nexport type PiDrawerEvents = {\n  onOpened: DrawerOpenedEvent;\n  onClosed: DrawerClosedEvent;\n  onOpenChanged: DrawerOpenChangedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAiB,aAEjB,IAAS,EACpB,CACF,GAEa,IAAmB,EAAgB,GAAgB;CAC9D;CACA;CACA;AACF,CAAC,GAEY,IAAiB,EAC5B,EAAiB,MACnB,GAEa,IAAiB,EAC5B,EAAiB,MACnB,GAEa,IAAsB,EACjC,EAAiB,YACnB"}

package/cards/drawer/index.d.ts

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