@pihanga2/shadcn 0.1.0

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

@@ -0,0 +1,196 @@
+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;
+export declare const DATA_TABLE_ACTION: {
+    ROW_CLICKED: string;
+    SORT_CHANGED: string;
+    SHOW_DETAIL: string;
+    HIDE_DETAIL: string;
+    PAGE_CHANGED: string;
+};
+export declare const onDataTableRowClicked: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & DataTableRowClickedEvent>) => void;
+export declare const onDataTableSortChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & DataTableSortChangedEvent>) => void;
+export declare const onDataTableShowDetail: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & DataTableDetailEvent>) => void;
+export declare const onDataTableHideDetail: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & DataTableDetailEvent>) => void;
+export declare const onDataTablePageChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & DataTablePageChangedEvent>) => void;
+/** Shared base for all column definitions */
+export type DataTableColumnBase = {
+    /** Key into the row's `data` object used to retrieve the cell value */
+    key: string;
+    /**
+     * Column header label.
+     * Defaults to the `key` with camelCase expanded to "Title Case".
+     */
+    title?: string;
+    /** Column width as a CSS value (e.g. "120px", "10%", "1fr") */
+    width?: string | number;
+    /** Horizontal alignment of cell content. Defaults to "left". */
+    align?: "left" | "center" | "right";
+    /** Whether the column header is clickable for sorting */
+    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;
+};
+/** Plain text column — cell value rendered as a string */
+export type TextColumn = DataTableColumnBase & {
+    type?: "text";
+};
+/** Numeric column with optional custom formatter */
+export type NumberColumn = DataTableColumnBase & {
+    type: "number";
+    /** Custom number formatter; defaults to `String(value)` */
+    format?: (n: number) => string;
+};
+/** Badge/chip column — cell value is rendered inside a `<Badge>` */
+export type BadgeColumn = DataTableColumnBase & {
+    type: "badge";
+    /**
+     * Map from cell value (as a string) to a shadcn Badge variant.
+     * Falls back to "secondary" for unrecognised values.
+     */
+    variants?: Record<string, "default" | "secondary" | "destructive" | "outline">;
+};
+/** Date column with optional custom formatter */
+export type DateColumn = DataTableColumnBase & {
+    type: "date";
+    /** Custom date formatter; defaults to `toLocaleDateString()` */
+    format?: (d: Date | string) => string;
+};
+/** Boolean column — renders a check-mark or cross icon */
+export type BooleanColumn = DataTableColumnBase & {
+    type: "boolean";
+};
+/**
+ * Card column — cell value must be a `PiCardRef` (string).
+ * The referenced card is rendered inline via Pihanga's `<Card />`.
+ * This enables full reuse of any registered Pihanga card as cell content.
+ */
+export type CardColumn = DataTableColumnBase & {
+    type: "card";
+};
+export type DataTableColumn = TextColumn | NumberColumn | BadgeColumn | DateColumn | BooleanColumn | CardColumn;
+export type DataTableRow<T = Record<string, unknown>> = {
+    /** Unique row identifier used as the React key and in events */
+    id: string | number;
+    /**
+     * Row payload — values are keyed by the column's `key` field.
+     * For "card" columns the value should be a `PiCardRef` string.
+     */
+    data: T;
+    /**
+     * When set, the row shows an expand/collapse toggle button.
+     * The referenced card is rendered full-width below the row on expand.
+     * Use `onShowDetail` / `onHideDetail` events to track expanded state in
+     * your redux store and update `detailCard` per row as needed.
+     */
+    detailCard?: PiCardRef;
+};
+export type DataTableProps<T = Record<string, unknown>> = {
+    /** Column definitions — order determines display order */
+    columns: DataTableColumn[];
+    /** Row data */
+    rows: DataTableRow<T>[];
+    /** Optional visible `<caption>` rendered below the table */
+    caption?: string;
+    /**
+     * Key of the currently sorted column.
+     * When provided the sort state is controlled; otherwise managed internally.
+     */
+    sortKey?: string;
+    /**
+     * Sort direction.
+     * When provided together with `sortKey` the sort state is controlled.
+     */
+    sortAscending?: boolean;
+    /** Maximum number of rows per page. Omit to disable pagination. */
+    pageSize?: number;
+    /** Current page index (0-based). Treated as controlled when provided. */
+    currentPage?: number;
+    /**
+     * Total row count, used for server-side pagination display.
+     * Leave unset for client-side pagination derived from `rows.length`.
+     */
+    totalRows?: number;
+    /** Keep the header visible while the body scrolls */
+    stickyHeader?: boolean;
+    /** Alternate row background colour (zebra striping) */
+    striped?: boolean;
+    /** Highlight rows on hover (default: true) */
+    hoverable?: boolean;
+    /** Use compact row padding */
+    compact?: boolean;
+    /** Card rendered when `rows` is empty */
+    emptyCard?: PiCardRef;
+    /** Fallback text when `rows` is empty and `emptyCard` is not set */
+    emptyText?: string;
+    className?: string;
+};
+export type DataTableRowClickedEvent = {
+    rowId: string | number;
+    row: DataTableRow;
+};
+export type DataTableSortChangedEvent = {
+    /** The column key that was clicked */
+    key: string;
+    /** `true` = ascending, `false` = descending */
+    ascending: boolean;
+};
+export type DataTableDetailEvent = {
+    rowId: string | number;
+    row: DataTableRow;
+};
+export type DataTablePageChangedEvent = {
+    /** New page index (0-based) */
+    page: number;
+    pageSize: number;
+};
+export type DataTableEvents = {
+    onRowClicked: DataTableRowClickedEvent;
+    onSortChanged: DataTableSortChangedEvent;
+    onShowDetail: DataTableDetailEvent;
+    onHideDetail: DataTableDetailEvent;
+    onPageChanged: DataTablePageChangedEvent;
+};
+/** Configuration for a single field shown in the detail panel. */
+export type DataTableRowDetailField = {
+    /** Key to look up in `row.data` */
+    key: string;
+    /** Optional human-readable label prefix (e.g. "Director") */
+    label?: string;
+    /** Render style: "title" → h4 bold, "muted" → muted foreground, "text" (default) → plain */
+    type?: "title" | "text" | "muted";
+    /** Additional Tailwind class names forwarded to the element */
+    className?: string;
+};
+export type DataTableRowDetailProps = {
+    /**
+     * The row to display. Set this via a state mapper so a single template
+     * card works for all rows:
+     * ```ts
+     * DataTableRowDetail({
+     *   row: (_, ctx) => ctx.ctxtProps?.row,
+     *   fields: [{ key: "title", type: "title" }, ...],
+     * })
+     * ```
+     */
+    row?: DataTableRow<Record<string, unknown>>;
+    /**
+     * Fields to render in order.
+     * When omitted, every key in `row.data` is rendered as a plain key:value pair.
+     */
+    fields?: DataTableRowDetailField[];
+};
+export declare const DATA_TABLE_ROW_DETAIL_CARD = "shad/data-table-row-detail";
+export declare const DataTableRowDetail: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<DataTableRowDetailProps, S, {}>) => import('@pihanga2/core').PiCardDef;

package/cards/dataTable/dataTable.types.js

@@ -0,0 +1,13 @@
+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, [
+	"row_clicked",
+	"sort_changed",
+	"show_detail",
+	"hide_detail",
+	"page_changed"
+]), o = t(a.ROW_CLICKED), s = t(a.SORT_CHANGED), c = t(a.SHOW_DETAIL), l = t(a.HIDE_DETAIL), u = t(a.PAGE_CHANGED), d = "shad/data-table-row-detail", f = e(d);
+//#endregion
+export { a as DATA_TABLE_ACTION, r as DATA_TABLE_CARD, d as DATA_TABLE_ROW_DETAIL_CARD, i as DataTable, f as DataTableRowDetail, l as onDataTableHideDetail, u as onDataTablePageChanged, o as onDataTableRowClicked, c as onDataTableShowDetail, s as onDataTableSortChanged };
+
+//# sourceMappingURL=dataTable.types.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dataTable.types.js","names":[],"sources":["../../../src/cards/dataTable/dataTable.types.ts"],"sourcesContent":["import {\n  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"}

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

@@ -0,0 +1,26 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { DataTableRowDetailProps } from './dataTable.types';
+/**
+ * DataTableRowDetail — generic detail-panel card for use with DataTable.
+ *
+ * Register it ONCE as a template, then reference it in every row via
+ * `detailCard`.  The DataTable passes the row via `cardKey` + `row` context
+ * props so a state mapper on the `row` field delivers the correct data:
+ *
+ * ```ts
+ * registerCard(
+ *   "app/myTable/rowDetail",
+ *   DataTableRowDetail({
+ *     // State mapper — ctx.ctxtProps.row is injected by the DataTable
+ *     row: (_, ctx) => ctx.ctxtProps?.row,
+ *     fields: [
+ *       { key: "title",    type: "title" },
+ *       { key: "director", label: "Director" },
+ *       { key: "plot",     type: "muted" },
+ *     ],
+ *   }),
+ * );
+ * ```
+ */
+export declare const DataTableRowDetailComponent: (props: PiCardProps<DataTableRowDetailProps>) => React.ReactNode;

package/cards/dataTable/dataTableRowDetail.component.js

@@ -0,0 +1,47 @@
+import { cn as e } from "../../lib/utils.js";
+import "react";
+import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/cards/dataTable/dataTableRowDetail.component.tsx
+var i = (i) => {
+	let { row: a, fields: o, cardName: s } = i;
+	if (!a?.data) return null;
+	let c = a.data;
+	return !o || o.length === 0 ? /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-1 text-sm",
+		"data-pihanga": s,
+		children: Object.entries(c).map(([e, t]) => /* @__PURE__ */ r("div", { children: [/* @__PURE__ */ r("span", {
+			className: "font-medium text-muted-foreground",
+			children: [e, ": "]
+		}), /* @__PURE__ */ n("span", { children: String(t ?? "") })] }, e))
+	}) : /* @__PURE__ */ n("div", {
+		className: "flex flex-col gap-1",
+		"data-pihanga": s,
+		children: o.map((i) => {
+			let a = c[i.key], o = a == null ? "" : String(a);
+			switch (i.type) {
+				case "title": return /* @__PURE__ */ n("h4", {
+					className: "text-base font-semibold",
+					children: o
+				}, i.key);
+				case "muted": return /* @__PURE__ */ n("p", {
+					className: "text-sm text-muted-foreground",
+					children: i.label ? /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ r("span", {
+						className: "font-medium",
+						children: [i.label, ": "]
+					}), o] }) : o
+				}, i.key);
+				default: return /* @__PURE__ */ n("p", {
+					className: e("text-sm", i.className),
+					children: i.label ? /* @__PURE__ */ r(t, { children: [/* @__PURE__ */ r("span", {
+						className: "font-medium",
+						children: [i.label, ": "]
+					}), o] }) : o
+				}, i.key);
+			}
+		})
+	});
+};
+//#endregion
+export { i as DataTableRowDetailComponent };
+
+//# sourceMappingURL=dataTableRowDetail.component.js.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dataTableRowDetail.component.js","names":[],"sources":["../../../src/cards/dataTable/dataTableRowDetail.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport type {\n  DataTableRowDetailField,\n  DataTableRowDetailProps,\n} from \"./dataTable.types\";\n\n/**\n * DataTableRowDetail — generic detail-panel card for use with DataTable.\n *\n * Register it ONCE as a template, then reference it in every row via\n * `detailCard`.  The DataTable passes the row via `cardKey` + `row` context\n * props so a state mapper on the `row` field delivers the correct data:\n *\n * ```ts\n * registerCard(\n *   \"app/myTable/rowDetail\",\n *   DataTableRowDetail({\n *     // State mapper — ctx.ctxtProps.row is injected by the DataTable\n *     row: (_, ctx) => ctx.ctxtProps?.row,\n *     fields: [\n *       { key: \"title\",    type: \"title\" },\n *       { key: \"director\", label: \"Director\" },\n *       { key: \"plot\",     type: \"muted\" },\n *     ],\n *   }),\n * );\n * ```\n */\nexport const DataTableRowDetailComponent = (\n  props: PiCardProps<DataTableRowDetailProps>,\n): React.ReactNode => {\n  const {row, fields, cardName} = props;\n\n  if (!row?.data) {\n    return null;\n  }\n\n  const data = row.data as Record<string, unknown>;\n\n  /** If no `fields` config, auto-render all keys as plain text */\n  if (!fields || fields.length === 0) {\n    return (\n      <div className=\"flex flex-col gap-1 text-sm\" data-pihanga={cardName}>\n        {Object.entries(data).map(([key, value]) => (\n          <div key={key}>\n            <span className=\"font-medium text-muted-foreground\">{key}: </span>\n            <span>{String(value ?? \"\")}</span>\n          </div>\n        ))}\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"flex flex-col gap-1\" data-pihanga={cardName}>\n      {fields.map((field: DataTableRowDetailField) => {\n        const value = data[field.key];\n        const display = value == null ? \"\" : String(value);\n\n        switch (field.type) {\n          case \"title\":\n            return (\n              <h4 key={field.key} className=\"text-base font-semibold\">\n                {display}\n              </h4>\n            );\n\n          case \"muted\":\n            return (\n              <p key={field.key} className=\"text-sm text-muted-foreground\">\n                {field.label ? (\n                  <>\n                    <span className=\"font-medium\">{field.label}: </span>\n                    {display}\n                  </>\n                ) : (\n                  display\n                )}\n              </p>\n            );\n\n          default:\n            // \"text\" or any unknown type\n            return (\n              <p key={field.key} className={cn(\"text-sm\", field.className)}>\n                {field.label ? (\n                  <>\n                    <span className=\"font-medium\">{field.label}: </span>\n                    {display}\n                  </>\n                ) : (\n                  display\n                )}\n              </p>\n            );\n        }\n      })}\n    </div>\n  );\n};\n"],"mappings":";;;;AA8BA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,QAAK,WAAQ,gBAAY;CAEhC,IAAI,CAAC,GAAK,MACR,OAAO;CAGT,IAAM,IAAO,EAAI;CAgBjB,OAbI,CAAC,KAAU,EAAO,WAAW,IAE7B,kBAAC,OAAD;EAAK,WAAU;EAA8B,gBAAc;YACxD,OAAO,QAAQ,CAAI,EAAE,KAAK,CAAC,GAAK,OAC/B,kBAAC,OAAD,EAAA,UAAA,CACE,kBAAC,QAAD;GAAM,WAAU;aAAhB,CAAqD,GAAI,IAAQ;MACjE,kBAAC,QAAD,EAAA,UAAO,OAAO,KAAS,EAAE,EAAQ,CAAA,CAC9B,EAAA,GAHK,CAGL,CACN;CACE,CAAA,IAKP,kBAAC,OAAD;EAAK,WAAU;EAAsB,gBAAc;YAChD,EAAO,KAAK,MAAmC;GAC9C,IAAM,IAAQ,EAAK,EAAM,MACnB,IAAU,KAAS,OAAO,KAAK,OAAO,CAAK;GAEjD,QAAQ,EAAM,MAAd;IACE,KAAK,SACH,OACE,kBAAC,MAAD;KAAoB,WAAU;eAC3B;IACC,GAFK,EAAM,GAEX;IAGR,KAAK,SACH,OACE,kBAAC,KAAD;KAAmB,WAAU;eAC1B,EAAM,QACL,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CAA+B,EAAM,OAAM,IAAQ;SAClD,CACD,EAAA,CAAA,IAEF;IAED,GATK,EAAM,GASX;IAGP,SAEE,OACE,kBAAC,KAAD;KAAmB,WAAW,EAAG,WAAW,EAAM,SAAS;eACxD,EAAM,QACL,kBAAA,GAAA,EAAA,UAAA,CACE,kBAAC,QAAD;MAAM,WAAU;gBAAhB,CAA+B,EAAM,OAAM,IAAQ;SAClD,CACD,EAAA,CAAA,IAEF;IAED,GATK,EAAM,GASX;GAET;EACF,CAAC;CACE,CAAA;AAET"}

package/cards/dataTable/index.d.ts

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

package/cards/dataTable/index.js

@@ -0,0 +1,16 @@
+import { DataTableComponent as e } from "./dataTable.component.js";
+import { DataTableRowDetailComponent as t } from "./dataTableRowDetail.component.js";
+import { DATA_TABLE_ACTION as n, DATA_TABLE_CARD as r, DATA_TABLE_ROW_DETAIL_CARD as i, DataTable as a, DataTableRowDetail as o, onDataTableHideDetail as s, onDataTablePageChanged as c, onDataTableRowClicked as l, onDataTableShowDetail as u, onDataTableSortChanged as d } from "./dataTable.types.js";
+import { actionTypesToEvents as f, registerCardComponent as p } from "@pihanga2/core";
+p({
+	name: r,
+	component: e,
+	events: f(n)
+}), p({
+	name: i,
+	component: t
+});
+//#endregion
+export { n as DATA_TABLE_ACTION, r as DATA_TABLE_CARD, i as DATA_TABLE_ROW_DETAIL_CARD, a as DataTable, o as DataTableRowDetail, s as onDataTableHideDetail, c as onDataTablePageChanged, l as onDataTableRowClicked, u as onDataTableShowDetail, d as onDataTableSortChanged };
+
+//# sourceMappingURL=index.js.map

package/cards/dataTable/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","names":[],"sources":["../../../src/cards/dataTable/index.ts"],"sourcesContent":["import {actionTypesToEvents, registerCardComponent} from \"@pihanga2/core\";\n\nimport {DataTableComponent} from \"./dataTable.component\";\nimport {DataTableRowDetailComponent} from \"./dataTableRowDetail.component\";\nimport {\n  DATA_TABLE_ACTION,\n  DATA_TABLE_CARD,\n  DATA_TABLE_ROW_DETAIL_CARD,\n} from \"./dataTable.types\";\n\nexport * from \"./dataTable.types\";\n\nregisterCardComponent({\n  name: DATA_TABLE_CARD,\n  component: DataTableComponent,\n  events: actionTypesToEvents(DATA_TABLE_ACTION),\n});\n\nregisterCardComponent({\n  name: DATA_TABLE_ROW_DETAIL_CARD,\n  component: DataTableRowDetailComponent,\n});\n"],"mappings":";;;;AAYA,EAAsB;CACpB,MAAM;CACN,WAAW;CACX,QAAQ,EAAoB,CAAiB;AAC/C,CAAC,GAED,EAAsB;CACpB,MAAM;CACN,WAAW;AACb,CAAC"}

package/cards/dialog/dialog.component.d.ts

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

package/cards/dialog/dialog.component.js

@@ -0,0 +1,89 @@
+import { Button as e } from "../../components/ui/button.js";
+import { Dialog as t, DialogBody as n, DialogContent as r, DialogDescription as i, DialogFooter as a, DialogHeader as o, DialogTitle as s, DialogTrigger as c } from "../../components/ui/dialog.js";
+import { Card as l } from "@pihanga2/core";
+import u from "react";
+import { jsx as d, jsxs as f } from "react/jsx-runtime";
+//#region src/cards/dialog/dialog.component.tsx
+var p = (p) => {
+	let { id: m, trigger: h, content: g, title: _, description: v, open: y, size: b, variant: x, desktopVariant: S, mobileVariant: C, dismissible: w, hideClose: T, className: E, footer: D, footerCloseButtonText: O, cardName: k, onOpened: A, onClosed: j, onOpenChanged: M } = p, N = O === void 0 ? "Close" : O, [P, F] = u.useState(!1), I = y ?? P, L = u.useRef(y);
+	u.useEffect(() => {
+		L.current === !0 && y === !1 && I === !1 && j({
+			id: m,
+			reason: "programmatic"
+		}), L.current = y;
+	}, [
+		y,
+		I,
+		m,
+		j
+	]);
+	let R = (e) => {
+		y === void 0 && F(e), M({
+			open: e,
+			id: m
+		}), e ? A({ id: m }) : y === void 0 && j({
+			id: m,
+			reason: "user"
+		});
+	};
+	function z() {
+		return h ? /* @__PURE__ */ d("span", {
+			className: "inline-flex",
+			"data-pihanga-trigger-wrapper": !0,
+			children: /* @__PURE__ */ d(l, {
+				cardName: h,
+				parentCard: k
+			})
+		}) : null;
+	}
+	function B() {
+		return !_ && !v ? null : /* @__PURE__ */ f(o, { children: [_ && /* @__PURE__ */ d(s, { children: _ }), v && /* @__PURE__ */ d(i, { children: v })] });
+	}
+	function V() {
+		return D ? /* @__PURE__ */ d(a, {
+			className: "bg-muted/50",
+			children: /* @__PURE__ */ d(l, {
+				cardName: D,
+				parentCard: k
+			})
+		}) : N === null ? null : /* @__PURE__ */ d(a, {
+			className: "bg-muted/50",
+			children: /* @__PURE__ */ d(e, {
+				variant: "outline",
+				onClick: () => R(!1),
+				children: N
+			})
+		});
+	}
+	let H = !!(_ || v || D || N);
+	return /* @__PURE__ */ f(t, {
+		open: I,
+		onOpenChange: R,
+		children: [h && /* @__PURE__ */ d(c, {
+			asChild: !0,
+			children: z()
+		}), /* @__PURE__ */ f(r, {
+			"data-pihanga": k,
+			size: b,
+			variant: x,
+			desktopVariant: S,
+			mobileVariant: C,
+			dismissible: w,
+			hideClose: T,
+			fixed: H,
+			className: E,
+			children: [
+				B(),
+				/* @__PURE__ */ d(n, { children: /* @__PURE__ */ d(l, {
+					cardName: g,
+					parentCard: k
+				}) }),
+				V()
+			]
+		})]
+	});
+};
+//#endregion
+export { p as DialogComponent };
+
+//# sourceMappingURL=dialog.component.js.map

package/cards/dialog/dialog.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.component.js","names":[],"sources":["../../../src/cards/dialog/dialog.component.tsx"],"sourcesContent":["import React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\n\nimport {\n  Dialog as DialogRoot,\n  DialogTrigger,\n  DialogContent,\n  DialogHeader,\n  DialogTitle,\n  DialogDescription,\n  DialogBody,\n  DialogFooter,\n} from \"@/registry/ui/dialog\";\nimport {Button} from \"@/registry/ui/button\";\n\nimport type {PiDialogEvents, PiDialogProps} from \"./dialog.types\";\n\nexport const DialogComponent = (\n  props: PiCardProps<PiDialogProps, PiDialogEvents>,\n): React.ReactNode => {\n  const {\n    id,\n    trigger,\n    content,\n    title,\n    description,\n    open: controlledOpen,\n    size,\n    variant,\n    desktopVariant,\n    mobileVariant,\n    dismissible,\n    hideClose,\n    className,\n    footer,\n    footerCloseButtonText,\n    cardName,\n    onOpened,\n    onClosed,\n    onOpenChanged,\n  } = props;\n\n  // Apply default for footer close button text\n  const effectiveFooterCloseButtonText =\n    footerCloseButtonText === undefined ? \"Close\" : footerCloseButtonText;\n\n  // Internal state for uncontrolled mode\n  const [internalOpen, setInternalOpen] = React.useState(false);\n\n  // Use controlled open if provided, otherwise use internal state\n  const open = controlledOpen ?? internalOpen;\n\n  // Track previous open state to detect programmatic changes\n  const prevControlledOpenRef = React.useRef(controlledOpen);\n\n  React.useEffect(() => {\n    // Detect programmatic close via props.open changing from true to false\n    if (\n      prevControlledOpenRef.current === true &&\n      controlledOpen === false &&\n      open === false\n    ) {\n      // This is a programmatic close\n      onClosed({id, reason: \"programmatic\"});\n    }\n    prevControlledOpenRef.current = controlledOpen;\n  }, [controlledOpen, open, id, onClosed]);\n\n  const handleOpenChange = (nextOpen: boolean) => {\n    // Update internal state if not controlled\n    if (controlledOpen === undefined) {\n      setInternalOpen(nextOpen);\n    }\n\n    // Emit events\n    onOpenChanged({open: nextOpen, id});\n\n    if (nextOpen) {\n      onOpened({id});\n    } else {\n      // When user dismisses (not programmatic), reason is 'user'\n      // We only get here from user actions when controlled open is undefined\n      // or when the dialog component itself triggers the change\n      if (controlledOpen === undefined) {\n        onClosed({id, reason: \"user\"});\n      }\n    }\n  };\n\n  function renderTrigger() {\n    if (!trigger) return null;\n\n    // Similar to dropDownMenu: wrap trigger in a DOM element so Radix\n    // can attach handlers via asChild even when trigger is a Pihanga card.\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\n    return (\n      <DialogHeader>\n        {title && <DialogTitle>{title}</DialogTitle>}\n        {description && <DialogDescription>{description}</DialogDescription>}\n      </DialogHeader>\n    );\n  }\n\n  function renderFooter() {\n    // Custom footer card takes precedence\n    if (footer) {\n      return (\n        <DialogFooter className=\"bg-muted/50\">\n          <Card cardName={footer} parentCard={cardName} />\n        </DialogFooter>\n      );\n    }\n\n    // Default close button (if not explicitly disabled)\n    if (effectiveFooterCloseButtonText !== null) {\n      return (\n        <DialogFooter className=\"bg-muted/50\">\n          <Button variant=\"outline\" onClick={() => handleOpenChange(false)}>\n            {effectiveFooterCloseButtonText}\n          </Button>\n        </DialogFooter>\n      );\n    }\n\n    // No footer\n    return null;\n  }\n\n  // Use fixed layout when we have header or footer\n  const hasFixedLayout = !!(\n    title ||\n    description ||\n    footer ||\n    effectiveFooterCloseButtonText\n  );\n\n  return (\n    <DialogRoot open={open} onOpenChange={handleOpenChange}>\n      {trigger && <DialogTrigger asChild>{renderTrigger()}</DialogTrigger>}\n      <DialogContent\n        data-pihanga={cardName}\n        size={size}\n        variant={variant}\n        desktopVariant={desktopVariant}\n        mobileVariant={mobileVariant}\n        dismissible={dismissible}\n        hideClose={hideClose}\n        fixed={hasFixedLayout}\n        className={className}\n      >\n        {renderHeader()}\n        <DialogBody>\n          <Card cardName={content} parentCard={cardName} />\n        </DialogBody>\n        {renderFooter()}\n      </DialogContent>\n    </DialogRoot>\n  );\n};\n"],"mappings":";;;;;;AAiBA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,OACA,YACA,YACA,UACA,gBACA,MAAM,GACN,SACA,YACA,mBACA,kBACA,gBACA,cACA,cACA,WACA,0BACA,aACA,aACA,aACA,qBACE,GAGE,IACJ,MAA0B,KAAA,IAAY,UAAU,GAG5C,CAAC,GAAc,KAAmB,EAAM,SAAS,EAAK,GAGtD,IAAO,KAAkB,GAGzB,IAAwB,EAAM,OAAO,CAAc;CAEzD,EAAM,gBAAgB;EAUpB,AAPE,EAAsB,YAAY,MAClC,MAAmB,MACnB,MAAS,MAGT,EAAS;GAAC;GAAI,QAAQ;EAAc,CAAC,GAEvC,EAAsB,UAAU;CAClC,GAAG;EAAC;EAAgB;EAAM;EAAI;CAAQ,CAAC;CAEvC,IAAM,KAAoB,MAAsB;EAS9C,AAPI,MAAmB,KAAA,KACrB,EAAgB,CAAQ,GAI1B,EAAc;GAAC,MAAM;GAAU;EAAE,CAAC,GAE9B,IACF,EAAS,EAAC,MAAE,CAAC,IAKT,MAAmB,KAAA,KACrB,EAAS;GAAC;GAAI,QAAQ;EAAM,CAAC;CAGnC;CAEA,SAAS,IAAgB;EAKvB,OAJK,IAKH,kBAAC,QAAD;GAAM,WAAU;GAAc,gCAAA;aAC5B,kBAAC,GAAD;IAAM,UAAU;IAAS,YAAY;GAAW,CAAA;EAC5C,CAAA,IAPa;CASvB;CAEA,SAAS,IAAe;EAGtB,OAFI,CAAC,KAAS,CAAC,IAAoB,OAGjC,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;EAsBtB,OApBI,IAEA,kBAAC,GAAD;GAAc,WAAU;aACtB,kBAAC,GAAD;IAAM,UAAU;IAAQ,YAAY;GAAW,CAAA;EACnC,CAAA,IAKd,MAAmC,OAWhC,OATH,kBAAC,GAAD;GAAc,WAAU;aACtB,kBAAC,GAAD;IAAQ,SAAQ;IAAU,eAAe,EAAiB,EAAK;cAC5D;GACK,CAAA;EACI,CAAA;CAMpB;CAGA,IAAM,IAAiB,CAAC,EACtB,KACA,KACA,KACA;CAGF,OACE,kBAAC,GAAD;EAAkB;EAAM,cAAc;YAAtC,CACG,KAAW,kBAAC,GAAD;GAAe,SAAA;aAAS,EAAc;EAAiB,CAAA,GACnE,kBAAC,GAAD;GACE,gBAAc;GACR;GACG;GACO;GACD;GACF;GACF;GACX,OAAO;GACI;aATb;IAWG,EAAa;IACd,kBAAC,GAAD,EAAA,UACE,kBAAC,GAAD;KAAM,UAAU;KAAS,YAAY;IAAW,CAAA,EACtC,CAAA;IACX,EAAa;GACD;IACL;;AAEhB"}

package/cards/dialog/dialog.types.d.ts

@@ -0,0 +1,115 @@
+import { PiCardRef } from '@pihanga2/core';
+export declare const PI_DIALOG_CARD = "pi/dialog";
+export declare const Dialog: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiDialogProps, S, PiDialogEvents>) => import('@pihanga2/core').PiCardDef;
+export declare const PI_DIALOG_ACTION: {
+    CLOSED: string;
+    OPENED: string;
+    OPEN_CHANGED: string;
+};
+export declare const onDialogOpened: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & DialogOpenedEvent>) => void;
+export declare const onDialogClosed: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & DialogClosedEvent>) => void;
+export declare const onDialogOpenChanged: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & DialogOpenChangedEvent>) => void;
+export type PiDialogProps = {
+    /**
+     * Optional id passed through to events for identification.
+     */
+    id?: string;
+    /**
+     * Optional dialog trigger card (e.g., a button).
+     *
+     * When provided, this card will be used as the dialog trigger.
+     * When omitted, the dialog must be controlled via the `open` prop.
+     *
+     * Wrapped in a DOM element so Radix can attach trigger handlers
+     * even when rendered via Pihanga's <Card />.
+     */
+    trigger?: PiCardRef;
+    /**
+     * Card to render as the dialog body content.
+     */
+    content: PiCardRef;
+    /**
+     * Optional dialog title (rendered in header).
+     */
+    title?: string;
+    /**
+     * Optional dialog description (rendered in header below title).
+     */
+    description?: string;
+    /**
+     * Controlled open state.
+     *
+     * When provided, dialog visibility is fully managed externally.
+     * When undefined, dialog manages its own state.
+     */
+    open?: boolean;
+    /**
+     * Dialog size variant.
+     */
+    size?: "xs" | "sm" | "md" | "lg" | "xl" | "2xl" | "3xl" | "4xl";
+    /**
+     * Dialog variant.
+     */
+    variant?: "modal" | "drawer" | "full";
+    /**
+     * Desktop variant (defaults to 'modal').
+     * On desktop, this variant will be used instead of the main variant.
+     */
+    desktopVariant?: "modal" | "drawer" | "full";
+    /**
+     * Mobile variant (defaults to 'drawer').
+     * On mobile, this variant will be used instead of the main variant.
+     */
+    mobileVariant?: "modal" | "drawer" | "full";
+    /**
+     * Whether clicking outside closes the dialog (default: true).
+     */
+    dismissible?: boolean;
+    /**
+     * Hide the X close button (default: false).
+     */
+    hideClose?: boolean;
+    /**
+     * Additional CSS classes for the dialog content.
+     */
+    className?: string;
+    /**
+     * Optional footer card to render at the bottom of the dialog.
+     * 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;
+};
+export type DialogOpenedEvent = {
+    id?: string;
+};
+export type DialogClosedEvent = {
+    id?: string;
+    /**
+     * Reason for closing:
+     * - 'user': User dismissed (clicked outside, pressed ESC, clicked X)
+     * - 'programmatic': Closed via props.open change
+     */
+    reason?: "user" | "programmatic";
+};
+export type DialogOpenChangedEvent = {
+    open: boolean;
+    id?: string;
+};
+export type PiDialogEvents = {
+    onOpened: DialogOpenedEvent;
+    onClosed: DialogClosedEvent;
+    onOpenChanged: DialogOpenChangedEvent;
+};

package/cards/dialog/dialog.types.js

@@ -0,0 +1,11 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/dialog/dialog.types.ts
+var r = "pi/dialog", 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 Dialog, a as PI_DIALOG_ACTION, r as PI_DIALOG_CARD, s as onDialogClosed, c as onDialogOpenChanged, o as onDialogOpened };
+
+//# sourceMappingURL=dialog.types.js.map

package/cards/dialog/dialog.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"dialog.types.js","names":[],"sources":["../../../src/cards/dialog/dialog.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_DIALOG_CARD = \"pi/dialog\";\n\nexport const Dialog = createCardDeclaration<PiDialogProps, PiDialogEvents>(\n  PI_DIALOG_CARD,\n);\n\nexport const PI_DIALOG_ACTION = registerActions(PI_DIALOG_CARD, [\n  \"opened\",\n  \"closed\",\n  \"open_changed\",\n]);\n\nexport const onDialogOpened = createOnAction<DialogOpenedEvent>(\n  PI_DIALOG_ACTION.OPENED,\n);\n\nexport const onDialogClosed = createOnAction<DialogClosedEvent>(\n  PI_DIALOG_ACTION.CLOSED,\n);\n\nexport const onDialogOpenChanged = createOnAction<DialogOpenChangedEvent>(\n  PI_DIALOG_ACTION.OPEN_CHANGED,\n);\n\nexport type PiDialogProps = {\n  /**\n   * Optional id passed through to events for identification.\n   */\n  id?: string;\n\n  /**\n   * Optional dialog trigger card (e.g., a button).\n   *\n   * When provided, this card will be used as the dialog trigger.\n   * When omitted, the dialog must be controlled via the `open` prop.\n   *\n   * Wrapped in a DOM element so Radix can attach trigger handlers\n   * even when rendered via Pihanga's <Card />.\n   */\n  trigger?: PiCardRef;\n\n  /**\n   * Card to render as the dialog body content.\n   */\n  content: PiCardRef;\n\n  /**\n   * Optional dialog title (rendered in header).\n   */\n  title?: string;\n\n  /**\n   * Optional dialog description (rendered in header below title).\n   */\n  description?: string;\n\n  /**\n   * Controlled open state.\n   *\n   * When provided, dialog visibility is fully managed externally.\n   * When undefined, dialog manages its own state.\n   */\n  open?: boolean;\n\n  /**\n   * Dialog size variant.\n   */\n  size?: \"xs\" | \"sm\" | \"md\" | \"lg\" | \"xl\" | \"2xl\" | \"3xl\" | \"4xl\";\n\n  /**\n   * Dialog variant.\n   */\n  variant?: \"modal\" | \"drawer\" | \"full\";\n\n  /**\n   * Desktop variant (defaults to 'modal').\n   * On desktop, this variant will be used instead of the main variant.\n   */\n  desktopVariant?: \"modal\" | \"drawer\" | \"full\";\n\n  /**\n   * Mobile variant (defaults to 'drawer').\n   * On mobile, this variant will be used instead of the main variant.\n   */\n  mobileVariant?: \"modal\" | \"drawer\" | \"full\";\n\n  /**\n   * Whether clicking outside closes the dialog (default: true).\n   */\n  dismissible?: boolean;\n\n  /**\n   * Hide the X close button (default: false).\n   */\n  hideClose?: boolean;\n\n  /**\n   * Additional CSS classes for the dialog content.\n   */\n  className?: string;\n\n  /**\n   * Optional footer card to render at the bottom of the dialog.\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\nexport type DialogOpenedEvent = {\n  id?: string;\n};\n\nexport type DialogClosedEvent = {\n  id?: string;\n  /**\n   * Reason for closing:\n   * - 'user': User dismissed (clicked outside, pressed ESC, clicked X)\n   * - 'programmatic': Closed via props.open change\n   */\n  reason?: \"user\" | \"programmatic\";\n};\n\nexport type DialogOpenChangedEvent = {\n  open: boolean;\n  id?: string;\n};\n\nexport type PiDialogEvents = {\n  onOpened: DialogOpenedEvent;\n  onClosed: DialogClosedEvent;\n  onOpenChanged: DialogOpenChangedEvent;\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/dialog/index.d.ts

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

package/cards/dialog/index.js

@@ -0,0 +1,13 @@
+import { DialogComponent as e } from "./dialog.component.js";
+import { Dialog as t, PI_DIALOG_ACTION as n, PI_DIALOG_CARD as r, onDialogClosed as i, onDialogOpenChanged as a, onDialogOpened as o } from "./dialog.types.js";
+import { actionTypesToEvents as s, registerCardComponent as c } from "@pihanga2/core";
+//#region src/cards/dialog/index.ts
+c({
+	name: r,
+	component: e,
+	events: s(n)
+});
+//#endregion
+export { t as Dialog, n as PI_DIALOG_ACTION, r as PI_DIALOG_CARD, i as onDialogClosed, a as onDialogOpenChanged, o as onDialogOpened };
+
+//# sourceMappingURL=index.js.map

package/cards/dialog/index.js.map

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

package/cards/dropDownMenu/drop-down.component.d.ts

@@ -0,0 +1,4 @@
+import { default as React } from 'react';
+import { PiCardProps } from '@pihanga2/core';
+import { DropDownMenuEvents, DropDownMenuProps } from './drop-down.types';
+export declare const Component: (props: PiCardProps<DropDownMenuProps, DropDownMenuEvents>) => React.ReactNode;