@pihanga2/shadcn 0.2.20 → 0.2.22

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 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"}
+{"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  \"rows_selected\",\n  \"all_rows_selected\",\n  \"search_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);\nexport const onDataTableRowsSelected =\n  createOnAction<DataTableRowsSelectedEvent>(\n    DATA_TABLE_ACTION.ROWS_SELECTED,\n  );\nexport const onDataTableAllRowsSelected =\n  createOnAction<DataTableAllRowsSelectedEvent>(\n    DATA_TABLE_ACTION.ALL_ROWS_SELECTED,\n  );\nexport const onDataTableSearchChanged =\n  createOnAction<DataTableSearchChangedEvent>(\n    DATA_TABLE_ACTION.SEARCH_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  // --- Row selection ---\n  /**\n   * When true, a checkbox column is rendered so rows can be selected.\n   * Selection state is uncontrolled unless `selectedRowIds` is provided.\n   */\n  selectable?: boolean;\n  /**\n   * Ids of the currently selected rows.\n   * When provided, selection becomes controlled — pair with `onRowsSelected`\n   * to update it from your redux store.\n   */\n  selectedRowIds?: (string | number)[];\n\n  // --- Search ---\n  /** Show a search input above the table that filters rows client-side. */\n  showSearch?: boolean;\n  /** Placeholder text for the search input. */\n  searchPlaceholder?: string;\n  /**\n   * Current search text.\n   * When provided the search box becomes controlled — pair with\n   * `onSearchChanged` to filter `rows` yourself (e.g. server-side).\n   */\n  searchText?: 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 DataTableRowsSelectedEvent<T = Record<string, unknown>> = {\n  /** All currently-selected rows (on the current page unless server-driven) */\n  selected: DataTableRow<T>[];\n};\n\nexport type DataTableAllRowsSelectedEvent<T = Record<string, unknown>> = {\n  /** Whether the header checkbox selected (true) or cleared (false) all rows */\n  selected: boolean;\n  /** Rows affected by the select-all toggle (visible/paginated rows) */\n  rows: DataTableRow<T>[];\n};\n\nexport type DataTableSearchChangedEvent = {\n  /** New search text */\n  text: string;\n};\n\nexport type DataTableEvents = {\n  onRowClicked: DataTableRowClickedEvent;\n  onSortChanged: DataTableSortChangedEvent;\n  onShowDetail: DataTableDetailEvent;\n  onHideDetail: DataTableDetailEvent;\n  onPageChanged: DataTablePageChangedEvent;\n  onRowsSelected: DataTableRowsSelectedEvent;\n  onAllRowsSelected: DataTableAllRowsSelectedEvent;\n  onSearchChanged: DataTableSearchChangedEvent;\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;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,GACa,IACX,EACE,EAAkB,aACpB,GACW,IACX,EACE,EAAkB,iBACpB,GACW,IACX,EACE,EAAkB,cACpB,GA0SW,IAA6B,8BAC7B,IACX,EAA+C,CAA0B"}

package/cards/dataTable/index.js

@@ -1,16 +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({
+import { DATA_TABLE_ACTION as n, DATA_TABLE_CARD as r, DATA_TABLE_ROW_DETAIL_CARD as i, DataTable as a, DataTableRowDetail as o, onDataTableAllRowsSelected as s, onDataTableHideDetail as c, onDataTablePageChanged as l, onDataTableRowClicked as u, onDataTableRowsSelected as d, onDataTableSearchChanged as f, onDataTableShowDetail as p, onDataTableSortChanged as m } from "./dataTable.types.js";
+import { actionTypesToEvents as h, registerCardComponent as g } from "@pihanga2/core";
+g({
 	name: r,
 	component: e,
-	events: f(n)
-}), p({
+	events: h(n)
+}), g({
 	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 };
+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 onDataTableAllRowsSelected, c as onDataTableHideDetail, l as onDataTablePageChanged, u as onDataTableRowClicked, d as onDataTableRowsSelected, f as onDataTableSearchChanged, p as onDataTableShowDetail, m as onDataTableSortChanged };
 
 //# sourceMappingURL=index.js.map

package/cards/dropDownMenu/dropdown-menu.ui.js

@@ -1,12 +1,12 @@
 "use client";
 import { cn as e } from "../../lib/utils.js";
 import "react";
-import { jsx as t, jsxs as n } from "react/jsx-runtime";
-import { cva as r } from "class-variance-authority";
+import { cva as t } from "class-variance-authority";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
 import { CheckIcon as i, ChevronRightIcon as a } from "lucide-react";
 import * as o from "@radix-ui/react-dropdown-menu";
 //#region src/cards/dropDownMenu/dropdown-menu.ui.tsx
-var s = r(e("relative flex cursor-pointer items-center gap-2 rounded-md align-middle text-sm no-focus-ring transition-bg-ease select-none data-disabled:pointer-events-none data-disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-subtle-foreground", "text-accent-foreground hover:bg-accent focus:bg-accent focus:text-accent-foreground"), {
+var s = t(e("relative flex cursor-pointer items-center gap-2 rounded-md align-middle text-sm no-focus-ring transition-bg-ease select-none data-disabled:pointer-events-none data-disabled:opacity-50", "[&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0 [&_svg]:text-subtle-foreground", "text-accent-foreground hover:bg-accent focus:bg-accent focus:text-accent-foreground"), {
 	defaultVariants: {
 		size: "default",
 		variant: "default"
@@ -21,87 +21,87 @@ var s = r(e("relative flex cursor-pointer items-center gap-2 rounded-md align-mi
 			none: ""
 		}
 	}
-}), c = r(e("mt-1.5 mb-2 cursor-default px-[14px] text-xs font-medium text-muted-foreground select-none"), { variants: { inset: { true: "pl-8" } } });
+}), c = t(e("mt-1.5 mb-2 cursor-default px-[14px] text-xs font-medium text-muted-foreground select-none"), { variants: { inset: { true: "pl-8" } } });
 function l(e) {
-	return /* @__PURE__ */ t(o.Root, { ...e });
+	return /* @__PURE__ */ n(o.Root, { ...e });
 }
 function u(e) {
-	return /* @__PURE__ */ t(o.Trigger, { ...e });
+	return /* @__PURE__ */ n(o.Trigger, { ...e });
 }
 function d(e) {
-	return /* @__PURE__ */ t(o.Group, {
+	return /* @__PURE__ */ n(o.Group, {
 		className: "py-1.5",
 		...e
 	});
 }
 function f(e) {
-	return /* @__PURE__ */ t(o.Sub, { ...e });
+	return /* @__PURE__ */ n(o.Sub, { ...e });
 }
 function p(e) {
-	return /* @__PURE__ */ t(o.RadioGroup, { ...e });
+	return /* @__PURE__ */ n(o.RadioGroup, { ...e });
 }
-function m({ children: r, className: i, inset: s, ...c }) {
-	return /* @__PURE__ */ n(o.SubTrigger, {
+function m({ children: t, className: i, inset: s, ...c }) {
+	return /* @__PURE__ */ r(o.SubTrigger, {
 		className: e("mx-1 flex cursor-default items-center gap-2 rounded-md px-2 py-1.5 text-sm outline-hidden select-none focus:bg-accent data-[state=open]:bg-accent", "no-focus-ring", "data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0", s && "pl-8", i),
 		...c,
-		children: [r, /* @__PURE__ */ t(a, { className: "ml-auto" })]
+		children: [t, /* @__PURE__ */ n(a, { className: "ml-auto" })]
 	});
 }
-function h({ className: n, ...r }) {
-	return /* @__PURE__ */ t(o.SubContent, {
-		className: e("z-50 max-w-[100vw] min-w-32 w-max overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-floating data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", n),
+function h({ className: t, ...r }) {
+	return /* @__PURE__ */ n(o.SubContent, {
+		className: e("z-50 max-w-[100vw] min-w-32 w-max overflow-hidden rounded-lg bg-popover p-1 text-popover-foreground shadow-floating data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[state=open]:animate-in data-[state=open]:fade-in-0 data-[state=open]:zoom-in-95", t),
 		...r
 	});
 }
-function g({ className: n, portal: r, ...i }) {
-	let a = /* @__PURE__ */ t(o.Content, {
-		className: e("z-50 max-w-[100vw] min-w-32 w-max overflow-hidden rounded-lg bg-popover p-0 text-sm text-popover-foreground shadow-floating no-focus-ring", "data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom data-[state=closed]:hidden data-[state=open]:animate-zoom", n),
+function g({ className: t, portal: r, ...i }) {
+	let a = /* @__PURE__ */ n(o.Content, {
+		className: e("z-50 max-w-[100vw] min-w-32 w-max overflow-hidden rounded-lg bg-popover p-0 text-sm text-popover-foreground shadow-floating no-focus-ring", "data-[side=bottom]:origin-top data-[side=left]:origin-right data-[side=right]:origin-left data-[side=top]:origin-bottom data-[state=closed]:hidden data-[state=open]:animate-zoom", t),
 		sideOffset: 4,
 		...i
 	});
-	return r ? /* @__PURE__ */ t(o.Portal, { children: a }) : a;
+	return r ? /* @__PURE__ */ n(o.Portal, { children: a }) : a;
 }
-function _({ className: n, ...r }) {
-	return /* @__PURE__ */ t(o.Item, {
-		className: e(s(), n),
+function _({ className: t, ...r }) {
+	return /* @__PURE__ */ n(o.Item, {
+		className: e(s(), t),
 		...r
 	});
 }
-function v({ children: r, className: a, ...s }) {
-	return /* @__PURE__ */ n(o.CheckboxItem, {
+function v({ children: t, className: a, ...s }) {
+	return /* @__PURE__ */ r(o.CheckboxItem, {
 		className: e("relative flex items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 no-focus-ring transition-bg-ease select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50 [&_svg]:size-4", "mx-1 h-[28px] cursor-pointer data-[state=highlighted]:bg-accent data-[state=highlighted]:text-accent-foreground", a),
 		...s,
-		children: [/* @__PURE__ */ t("span", {
+		children: [/* @__PURE__ */ n("span", {
 			className: "absolute right-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ t(o.ItemIndicator, { children: /* @__PURE__ */ t(i, {}) })
-		}), r]
+			children: /* @__PURE__ */ n(o.ItemIndicator, { children: /* @__PURE__ */ n(i, {}) })
+		}), t]
 	});
 }
-function y({ children: r, className: a, hideIcon: s, ...c }) {
-	return /* @__PURE__ */ n(o.RadioItem, {
+function y({ children: t, className: a, hideIcon: s, ...c }) {
+	return /* @__PURE__ */ r(o.RadioItem, {
 		className: e("relative flex items-center rounded-sm pr-2 pl-8 no-focus-ring transition-bg-ease select-none focus:bg-accent focus:text-accent-foreground data-disabled:pointer-events-none data-disabled:opacity-50", "mx-1 h-[28px] cursor-pointer gap-2 data-[state=highlighted]:bg-accent data-[state=highlighted]:text-accent-foreground [&_svg]:size-4", a),
 		...c,
-		children: [!s && /* @__PURE__ */ t("span", {
+		children: [!s && /* @__PURE__ */ n("span", {
 			className: "absolute left-2 flex size-3.5 items-center justify-center",
-			children: /* @__PURE__ */ t(o.ItemIndicator, { children: /* @__PURE__ */ t(i, {}) })
-		}), r]
+			children: /* @__PURE__ */ n(o.ItemIndicator, { children: /* @__PURE__ */ n(i, {}) })
+		}), t]
 	});
 }
-function b({ className: n, inset: r, ...i }) {
-	return /* @__PURE__ */ t(o.Label, {
-		className: e(c({ inset: r }), n),
+function b({ className: t, inset: r, ...i }) {
+	return /* @__PURE__ */ n(o.Label, {
+		className: e(c({ inset: r }), t),
 		...i
 	});
 }
-function x({ className: n, ...r }) {
-	return /* @__PURE__ */ t(o.Separator, {
-		className: e("-mx-1 my-1 h-px bg-muted", n),
+function x({ className: t, ...r }) {
+	return /* @__PURE__ */ n(o.Separator, {
+		className: e("-mx-1 my-1 h-px bg-muted", t),
 		...r
 	});
 }
-function S({ className: n, ...r }) {
-	return /* @__PURE__ */ t("span", {
-		className: e("ml-auto text-xs tracking-widest opacity-60", n),
+function S({ className: t, ...r }) {
+	return /* @__PURE__ */ n("span", {
+		className: e("ml-auto text-xs tracking-widest opacity-60", t),
 		...r
 	});
 }

package/cards/field/field.component.js

@@ -22,7 +22,7 @@ var d = (d) => {
 		className: e(_),
 		"data-pihanga": v,
 		children: [
-			/* @__PURE__ */ l(a, {
+			f && /* @__PURE__ */ l(a, {
 				htmlFor: x,
 				children: f
 			}),

package/cards/field/field.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.component.js","names":[],"sources":["../../../src/cards/field/field.component.tsx"],"sourcesContent":["import React, {useMemo} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/components/ui/field\";\nimport {cn} from \"@/lib/utils\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiFieldProps} from \"./field.types\";\n\nexport const FieldCardComponent = (\n  props: PiCardProps<PiFieldProps>,\n): React.ReactNode => {\n  const {\n    label,\n    fieldCard,\n    name,\n    description,\n    error: propError,\n    className,\n    cardName,\n  } = props;\n\n  // When name is provided and we're inside a pi/form, use the form error.\n  const form = useFormContext();\n  const error = form.isInForm && name ? form.errors[name] : propError;\n\n  // Stable id that links <FieldLabel htmlFor> to the inner control's id.\n  const fieldId = React.useId();\n\n  // Memoize the extra props forwarded to the inner card so that Pihanga does\n  // not see a brand-new object on every render (which would cause it to treat\n  // the inner card as a new/changed card and unmount/remount it).\n  const isInvalid = Boolean(error);\n  /*\n      Pihanga's Card forwards every prop other than cardName / parentCard to\n      the bound component.  We inject `id` (so the control's element gets\n      the id that FieldLabel points at) and `invalid` (so the control can\n      set aria-invalid without needing its own error/label logic).\n    */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const fieldCardProps = useMemo<any>(\n    () => ({\n      cardName: fieldCard,\n      parentCard: cardName,\n      id: fieldId,\n      invalid: isInvalid,\n    }),\n    [cardName, fieldCard, fieldId, isInvalid],\n  );\n\n  return (\n    <Field\n      data-invalid={Boolean(error) || undefined}\n      className={cn(className)}\n      data-pihanga={cardName}\n    >\n      <FieldLabel htmlFor={fieldId}>{label}</FieldLabel>\n\n      <Card {...fieldCardProps} />\n\n      {description && <FieldDescription>{description}</FieldDescription>}\n      <FieldError>{error}</FieldError>\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;AAYA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,UACA,cACA,SACA,gBACA,OAAO,GACP,cACA,gBACE,GAGE,IAAO,EAAe,GACtB,IAAQ,EAAK,YAAY,IAAO,EAAK,OAAO,KAAQ,GAGpD,IAAU,EAAM,MAAM,GAKtB,IAAY,EAAQ,GAQpB,IAAiB,SACd;EACL,UAAU;EACV,YAAY;EACZ,IAAI;EACJ,SAAS;CACX,IACA;EAAC;EAAU;EAAW;EAAS;CAAS,CAC1C;CAEA,OACE,kBAAC,GAAD;EACE,gBAAc,EAAQ,KAAU,KAAA;EAChC,WAAW,EAAG,CAAS;EACvB,gBAAc;YAHhB;GAKE,kBAAC,GAAD;IAAY,SAAS;cAAU;GAAkB,CAAA;GAEjD,kBAAC,GAAD,EAAM,GAAI,EAAiB,CAAA;GAE1B,KAAe,kBAAC,GAAD,EAAA,UAAmB,EAA8B,CAAA;GACjE,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;EAC1B;;AAEX"}
+{"version":3,"file":"field.component.js","names":[],"sources":["../../../src/cards/field/field.component.tsx"],"sourcesContent":["import React, {useMemo} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {\n  Field,\n  FieldDescription,\n  FieldError,\n  FieldLabel,\n} from \"@/components/ui/field\";\nimport {cn} from \"@/lib/utils\";\nimport {useFormContext} from \"@/cards/form/form.context\";\nimport type {PiFieldProps} from \"./field.types\";\n\nexport const FieldCardComponent = (\n  props: PiCardProps<PiFieldProps>,\n): React.ReactNode => {\n  const {\n    label,\n    fieldCard,\n    name,\n    description,\n    error: propError,\n    className,\n    cardName,\n  } = props;\n\n  // When name is provided and we're inside a pi/form, use the form error.\n  const form = useFormContext();\n  const error = form.isInForm && name ? form.errors[name] : propError;\n\n  // Stable id that links <FieldLabel htmlFor> to the inner control's id.\n  const fieldId = React.useId();\n\n  // Memoize the extra props forwarded to the inner card so that Pihanga does\n  // not see a brand-new object on every render (which would cause it to treat\n  // the inner card as a new/changed card and unmount/remount it).\n  const isInvalid = Boolean(error);\n  /*\n      Pihanga's Card forwards every prop other than cardName / parentCard to\n      the bound component.  We inject `id` (so the control's element gets\n      the id that FieldLabel points at) and `invalid` (so the control can\n      set aria-invalid without needing its own error/label logic).\n    */\n  // eslint-disable-next-line @typescript-eslint/no-explicit-any\n  const fieldCardProps = useMemo<any>(\n    () => ({\n      cardName: fieldCard,\n      parentCard: cardName,\n      id: fieldId,\n      invalid: isInvalid,\n    }),\n    [cardName, fieldCard, fieldId, isInvalid],\n  );\n\n  return (\n    <Field\n      data-invalid={Boolean(error) || undefined}\n      className={cn(className)}\n      data-pihanga={cardName}\n    >\n      {label && <FieldLabel htmlFor={fieldId}>{label}</FieldLabel>}\n\n      <Card {...fieldCardProps} />\n\n      {description && <FieldDescription>{description}</FieldDescription>}\n      <FieldError>{error}</FieldError>\n    </Field>\n  );\n};\n"],"mappings":";;;;;;;AAYA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,UACA,cACA,SACA,gBACA,OAAO,GACP,cACA,gBACE,GAGE,IAAO,EAAe,GACtB,IAAQ,EAAK,YAAY,IAAO,EAAK,OAAO,KAAQ,GAGpD,IAAU,EAAM,MAAM,GAKtB,IAAY,EAAQ,GAQpB,IAAiB,SACd;EACL,UAAU;EACV,YAAY;EACZ,IAAI;EACJ,SAAS;CACX,IACA;EAAC;EAAU;EAAW;EAAS;CAAS,CAC1C;CAEA,OACE,kBAAC,GAAD;EACE,gBAAc,EAAQ,KAAU,KAAA;EAChC,WAAW,EAAG,CAAS;EACvB,gBAAc;YAHhB;GAKG,KAAS,kBAAC,GAAD;IAAY,SAAS;cAAU;GAAkB,CAAA;GAE3D,kBAAC,GAAD,EAAM,GAAI,EAAiB,CAAA;GAE1B,KAAe,kBAAC,GAAD,EAAA,UAAmB,EAA8B,CAAA;GACjE,kBAAC,GAAD,EAAA,UAAa,EAAkB,CAAA;EAC1B;;AAEX"}

package/cards/form/form.component.js

@@ -1,21 +1,32 @@
 import { cn as e } from "../../lib/utils.js";
 import { FormContext as t } from "./form.context.js";
-import { useCallback as n, useState as r } from "react";
-import { Card as i } from "@pihanga2/core";
-import { jsx as a, jsxs as o } from "react/jsx-runtime";
+import { useCallback as n, useEffect as r, useRef as i, useState as a } from "react";
+import { Card as o } from "@pihanga2/core";
+import { jsx as s, jsxs as c } from "react/jsx-runtime";
 //#region src/cards/form/form.component.tsx
-var s = (s) => {
-	let { id: c, content: l = [], initialValues: u = {}, submitLabel: d = "Submit", className: f, cardName: p, onSubmitted: m } = s, [h, g] = r(() => ({ ...u })), [_, v] = r({}), y = n((e, t) => {
-		g((n) => ({
+var l = (l) => {
+	let { id: u, content: d = [], initialValues: f = {}, submitLabel: p = "Submit", hideSubmit: m = !1, className: h, cardName: g, onSubmitted: _, onCancelled: v, onAbandoned: y } = l, [b, x] = a(() => ({ ...f })), [S, C] = a({}), w = i(!1), T = i(u);
+	T.current = u;
+	let E = i(b);
+	E.current = b;
+	let D = i(y);
+	D.current = y, r(() => () => {
+		w.current || D.current({
+			id: T.current,
+			formData: E.current
+		});
+	}, []);
+	let O = n((e, t) => {
+		x((n) => ({
 			...n,
 			[e]: t
-		})), v((t) => {
+		})), C((t) => {
 			if (!t[e]) return t;
 			let n = { ...t };
 			return delete n[e], n;
 		});
-	}, []), b = n((e, t) => {
-		v((n) => {
+	}, []), k = n((e, t) => {
+		C((n) => {
 			if (t === null) {
 				let t = { ...n };
 				return delete t[e], t;
@@ -25,40 +36,54 @@ var s = (s) => {
 				[e]: t
 			};
 		});
-	}, []), x = n((e) => {
-		e.preventDefault(), m({
-			id: c,
-			formData: h
+	}, []), A = n(() => {
+		w.current = !0, _({
+			id: u,
+			formData: b
+		});
+	}, [
+		u,
+		b,
+		_
+	]), j = n(() => {
+		w.current = !0, v({
+			id: u,
+			formData: b
 		});
 	}, [
-		c,
-		h,
-		m
-	]), S = {
-		formData: h,
-		errors: _,
-		handleChange: y,
-		setError: b,
+		u,
+		b,
+		v
+	]), M = n((e) => {
+		e.preventDefault(), A();
+	}, [A]), N = {
+		formData: b,
+		errors: S,
+		handleChange: O,
+		setError: k,
+		requestAction: n((e) => {
+			e === "submit" ? A() : j();
+		}, [A, j]),
 		isInForm: !0
 	};
-	return /* @__PURE__ */ a(t.Provider, {
-		value: S,
-		children: /* @__PURE__ */ o("form", {
-			onSubmit: x,
-			className: e("flex flex-col gap-4", f),
-			"data-pihanga": p,
-			children: [l.map((e, t) => /* @__PURE__ */ a(i, {
+	return /* @__PURE__ */ s(t.Provider, {
+		value: N,
+		children: /* @__PURE__ */ c("form", {
+			onSubmit: M,
+			className: e("flex flex-col gap-4", h),
+			"data-pihanga": g,
+			children: [d.map((e, t) => /* @__PURE__ */ s(o, {
 				cardName: e,
-				parentCard: p
-			}, t)), /* @__PURE__ */ a("button", {
+				parentCard: g
+			}, t)), !m && /* @__PURE__ */ s("button", {
 				type: "submit",
 				className: "inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
-				children: d
+				children: p
 			})]
 		})
 	});
 };
 //#endregion
-export { s as FormComponent };
+export { l as FormComponent };
 
 //# sourceMappingURL=form.component.js.map

package/cards/form/form.component.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.component.js","names":[],"sources":["../../../src/cards/form/form.component.tsx"],"sourcesContent":["import React, {useState, useCallback} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport {FormContext, type FormContextValue} from \"./form.context\";\nimport type {PiFormEvents, PiFormProps} from \"./form.types\";\n\nexport const FormComponent = (\n  props: PiCardProps<PiFormProps, PiFormEvents>,\n): React.ReactNode => {\n  const {\n    id,\n    content = [],\n    initialValues = {},\n    submitLabel = \"Submit\",\n    className,\n    cardName,\n    onSubmitted,\n  } = props;\n\n  const [formData, setFormData] = useState<Record<string, unknown>>(() => ({\n    ...initialValues,\n  }));\n  const [errors, setErrors] = useState<Record<string, string>>({});\n\n  const handleChange = useCallback((fieldName: string, value: unknown) => {\n    setFormData((prev) => ({...prev, [fieldName]: value}));\n    // Clear validation error when the user modifies the field\n    setErrors((prev) => {\n      if (!prev[fieldName]) return prev;\n      const next = {...prev};\n      delete next[fieldName];\n      return next;\n    });\n  }, []);\n\n  const setError = useCallback((fieldName: string, error: string | null) => {\n    setErrors((prev) => {\n      if (error === null) {\n        const next = {...prev};\n        delete next[fieldName];\n        return next;\n      }\n      return {...prev, [fieldName]: error};\n    });\n  }, []);\n\n  const handleSubmit = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault();\n      onSubmitted({id, formData});\n    },\n    [id, formData, onSubmitted],\n  );\n\n  const contextValue: FormContextValue = {\n    formData,\n    errors,\n    handleChange,\n    setError,\n    isInForm: true,\n  };\n\n  return (\n    <FormContext.Provider value={contextValue}>\n      <form\n        onSubmit={handleSubmit}\n        className={cn(\"flex flex-col gap-4\", className)}\n        data-pihanga={cardName}\n      >\n        {content.map((cref, idx) => (\n          <Card key={idx} cardName={cref} parentCard={cardName} />\n        ))}\n        <button\n          type=\"submit\"\n          className=\"inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\"\n        >\n          {submitLabel}\n        </button>\n      </form>\n    </FormContext.Provider>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,OACA,aAAU,CAAC,GACX,mBAAgB,CAAC,GACjB,iBAAc,UACd,cACA,aACA,mBACE,GAEE,CAAC,GAAU,KAAe,SAAyC,EACvE,GAAG,EACL,EAAE,GACI,CAAC,GAAQ,KAAa,EAAiC,CAAC,CAAC,GAEzD,IAAe,GAAa,GAAmB,MAAmB;EAGtE,AAFA,GAAa,OAAU;GAAC,GAAG;IAAO,IAAY;EAAK,EAAE,GAErD,GAAW,MAAS;GAClB,IAAI,CAAC,EAAK,IAAY,OAAO;GAC7B,IAAM,IAAO,EAAC,GAAG,EAAI;GAErB,OADA,OAAO,EAAK,IACL;EACT,CAAC;CACH,GAAG,CAAC,CAAC,GAEC,IAAW,GAAa,GAAmB,MAAyB;EACxE,GAAW,MAAS;GAClB,IAAI,MAAU,MAAM;IAClB,IAAM,IAAO,EAAC,GAAG,EAAI;IAErB,OADA,OAAO,EAAK,IACL;GACT;GACA,OAAO;IAAC,GAAG;KAAO,IAAY;GAAK;EACrC,CAAC;CACH,GAAG,CAAC,CAAC,GAEC,IAAe,GAClB,MAAuB;EAEtB,AADA,EAAE,eAAe,GACjB,EAAY;GAAC;GAAI;EAAQ,CAAC;CAC5B,GACA;EAAC;EAAI;EAAU;CAAW,CAC5B,GAEM,IAAiC;EACrC;EACA;EACA;EACA;EACA,UAAU;CACZ;CAEA,OACE,kBAAC,EAAY,UAAb;EAAsB,OAAO;YAC3B,kBAAC,QAAD;GACE,UAAU;GACV,WAAW,EAAG,uBAAuB,CAAS;GAC9C,gBAAc;aAHhB,CAKG,EAAQ,KAAK,GAAM,MAClB,kBAAC,GAAD;IAAgB,UAAU;IAAM,YAAY;GAAW,GAA5C,CAA4C,CACxD,GACD,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;cAET;GACK,CAAA,CACJ;;CACc,CAAA;AAE1B"}
+{"version":3,"file":"form.component.js","names":[],"sources":["../../../src/cards/form/form.component.tsx"],"sourcesContent":["import React, {useState, useCallback, useRef, useEffect} from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {cn} from \"@/lib/utils\";\nimport {FormContext, type FormContextValue} from \"./form.context\";\nimport type {FormAction, PiFormEvents, PiFormProps} from \"./form.types\";\n\nexport const FormComponent = (\n  props: PiCardProps<PiFormProps, PiFormEvents>,\n): React.ReactNode => {\n  const {\n    id,\n    content = [],\n    initialValues = {},\n    submitLabel = \"Submit\",\n    hideSubmit = false,\n    className,\n    cardName,\n    onSubmitted,\n    onCancelled,\n    onAbandoned,\n  } = props;\n\n  const [formData, setFormData] = useState<Record<string, unknown>>(() => ({\n    ...initialValues,\n  }));\n  const [errors, setErrors] = useState<Record<string, string>>({});\n\n  // Tracks whether the form reached a \"final\" state (submitted or\n  // explicitly cancelled) so the unmount effect below can tell the\n  // difference between that and being torn down some other way (e.g. its\n  // parent pi/dialog was dismissed) — the latter fires `onAbandoned`.\n  const finalizedRef = useRef(false);\n  // Mirrors state in refs so the unmount effect (which only runs once) can\n  // read the latest values without re-subscribing on every keystroke.\n  const idRef = useRef(id);\n  idRef.current = id;\n  const formDataRef = useRef(formData);\n  formDataRef.current = formData;\n  const onAbandonedRef = useRef(onAbandoned);\n  onAbandonedRef.current = onAbandoned;\n\n  useEffect(() => {\n    return () => {\n      if (!finalizedRef.current) {\n        onAbandonedRef.current({id: idRef.current, formData: formDataRef.current});\n      }\n    };\n    // Intentionally run only on mount/unmount.\n     \n  }, []);\n\n  const handleChange = useCallback((fieldName: string, value: unknown) => {\n    setFormData((prev) => ({...prev, [fieldName]: value}));\n    // Clear validation error when the user modifies the field\n    setErrors((prev) => {\n      if (!prev[fieldName]) return prev;\n      const next = {...prev};\n      delete next[fieldName];\n      return next;\n    });\n  }, []);\n\n  const setError = useCallback((fieldName: string, error: string | null) => {\n    setErrors((prev) => {\n      if (error === null) {\n        const next = {...prev};\n        delete next[fieldName];\n        return next;\n      }\n      return {...prev, [fieldName]: error};\n    });\n  }, []);\n\n  const doSubmit = useCallback(() => {\n    finalizedRef.current = true;\n    onSubmitted({id, formData});\n  }, [id, formData, onSubmitted]);\n\n  const doCancel = useCallback(() => {\n    finalizedRef.current = true;\n    onCancelled({id, formData});\n  }, [id, formData, onCancelled]);\n\n  const handleSubmit = useCallback(\n    (e: React.FormEvent) => {\n      e.preventDefault();\n      doSubmit();\n    },\n    [doSubmit],\n  );\n\n  // Single entry point for any control nested in the form's content to\n  // trigger a top-level form action (Button's `formAction`, a field's\n  // `submitOnEnter`, etc.) — keeps all form-bindable controls consistent.\n  const requestAction = useCallback(\n    (action: FormAction) => {\n      if (action === \"submit\") {\n        doSubmit();\n      } else {\n        doCancel();\n      }\n    },\n    [doSubmit, doCancel],\n  );\n\n  const contextValue: FormContextValue = {\n    formData,\n    errors,\n    handleChange,\n    setError,\n    requestAction,\n    isInForm: true,\n  };\n\n  return (\n    <FormContext.Provider value={contextValue}>\n      <form\n        onSubmit={handleSubmit}\n        className={cn(\"flex flex-col gap-4\", className)}\n        data-pihanga={cardName}\n      >\n        {content.map((cref, idx) => (\n          <Card key={idx} cardName={cref} parentCard={cardName} />\n        ))}\n        {!hideSubmit && (\n          <button\n            type=\"submit\"\n            className=\"inline-flex h-9 items-center justify-center rounded-md bg-primary px-4 py-2 text-sm font-medium text-primary-foreground shadow transition-colors hover:bg-primary/90 focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50\"\n          >\n            {submitLabel}\n          </button>\n        )}\n      </form>\n    </FormContext.Provider>\n  );\n};\n"],"mappings":";;;;;;AAMA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,OACA,aAAU,CAAC,GACX,mBAAgB,CAAC,GACjB,iBAAc,UACd,gBAAa,IACb,cACA,aACA,gBACA,gBACA,mBACE,GAEE,CAAC,GAAU,KAAe,SAAyC,EACvE,GAAG,EACL,EAAE,GACI,CAAC,GAAQ,KAAa,EAAiC,CAAC,CAAC,GAMzD,IAAe,EAAO,EAAK,GAG3B,IAAQ,EAAO,CAAE;CACvB,EAAM,UAAU;CAChB,IAAM,IAAc,EAAO,CAAQ;CACnC,EAAY,UAAU;CACtB,IAAM,IAAiB,EAAO,CAAW;CAGzC,AAFA,EAAe,UAAU,GAEzB,cACe;EACX,AAAK,EAAa,WAChB,EAAe,QAAQ;GAAC,IAAI,EAAM;GAAS,UAAU,EAAY;EAAO,CAAC;CAE7E,GAGC,CAAC,CAAC;CAEL,IAAM,IAAe,GAAa,GAAmB,MAAmB;EAGtE,AAFA,GAAa,OAAU;GAAC,GAAG;IAAO,IAAY;EAAK,EAAE,GAErD,GAAW,MAAS;GAClB,IAAI,CAAC,EAAK,IAAY,OAAO;GAC7B,IAAM,IAAO,EAAC,GAAG,EAAI;GAErB,OADA,OAAO,EAAK,IACL;EACT,CAAC;CACH,GAAG,CAAC,CAAC,GAEC,IAAW,GAAa,GAAmB,MAAyB;EACxE,GAAW,MAAS;GAClB,IAAI,MAAU,MAAM;IAClB,IAAM,IAAO,EAAC,GAAG,EAAI;IAErB,OADA,OAAO,EAAK,IACL;GACT;GACA,OAAO;IAAC,GAAG;KAAO,IAAY;GAAK;EACrC,CAAC;CACH,GAAG,CAAC,CAAC,GAEC,IAAW,QAAkB;EAEjC,AADA,EAAa,UAAU,IACvB,EAAY;GAAC;GAAI;EAAQ,CAAC;CAC5B,GAAG;EAAC;EAAI;EAAU;CAAW,CAAC,GAExB,IAAW,QAAkB;EAEjC,AADA,EAAa,UAAU,IACvB,EAAY;GAAC;GAAI;EAAQ,CAAC;CAC5B,GAAG;EAAC;EAAI;EAAU;CAAW,CAAC,GAExB,IAAe,GAClB,MAAuB;EAEtB,AADA,EAAE,eAAe,GACjB,EAAS;CACX,GACA,CAAC,CAAQ,CACX,GAgBM,IAAiC;EACrC;EACA;EACA;EACA;EACA,eAhBoB,GACnB,MAAuB;GACtB,AAAI,MAAW,WACb,EAAS,IAET,EAAS;EAEb,GACA,CAAC,GAAU,CAAQ,CAQnB;EACA,UAAU;CACZ;CAEA,OACE,kBAAC,EAAY,UAAb;EAAsB,OAAO;YAC3B,kBAAC,QAAD;GACE,UAAU;GACV,WAAW,EAAG,uBAAuB,CAAS;GAC9C,gBAAc;aAHhB,CAKG,EAAQ,KAAK,GAAM,MAClB,kBAAC,GAAD;IAAgB,UAAU;IAAM,YAAY;GAAW,GAA5C,CAA4C,CACxD,GACA,CAAC,KACA,kBAAC,UAAD;IACE,MAAK;IACL,WAAU;cAET;GACK,CAAA,CAEN;;CACc,CAAA;AAE1B"}

package/cards/form/form.context.d.ts

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { FormAction } from './form.types';
 /**
  * Shape of the data provided by FormContext.
  * When inside a <Form> card, isInForm is true and all fields are populated.
@@ -9,6 +10,16 @@ export interface FormContextValue {
     errors: Record<string, string>;
     handleChange: (fieldName: string, value: unknown) => void;
     setError: (fieldName: string, error: string | null) => void;
+    /**
+     * Call from within form content to request that the enclosing Form
+     * perform a top-level action:
+     * - `"submit"` — same as pressing the form's native submit button; fires
+     *   `onSubmitted`. Used by `Button` (`formAction: "submit"`) and by
+     *   form-bindable fields' `submitOnEnter` prop.
+     * - `"cancel"` — fires `onCancelled` without submitting or resetting the
+     *   form's field values. Used by `Button` (`formAction: "cancel"`).
+     */
+    requestAction: (action: FormAction) => void;
     isInForm: boolean;
 }
 export declare const FormContext: React.Context<FormContextValue | null>;

package/cards/form/form.context.js

@@ -5,6 +5,7 @@ var n = {
 	errors: {},
 	handleChange: () => {},
 	setError: () => {},
+	requestAction: () => {},
 	isInForm: !1
 }, r = e.createContext(null), i = () => t(r) ?? n;
 //#endregion

package/cards/form/form.context.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.context.js","names":[],"sources":["../../../src/cards/form/form.context.tsx"],"sourcesContent":["import React, {useContext} from \"react\";\n\n/**\n * Shape of the data provided by FormContext.\n * When inside a <Form> card, isInForm is true and all fields are populated.\n * When outside (fallback), isInForm is false.\n */\nexport interface FormContextValue {\n  formData: Record<string, unknown>;\n  errors: Record<string, string>;\n  handleChange: (fieldName: string, value: unknown) => void;\n  setError: (fieldName: string, error: string | null) => void;\n  isInForm: boolean;\n}\n\nconst FALLBACK_CONTEXT: FormContextValue = {\n  formData: {},\n  errors: {},\n  handleChange: () => {},\n  setError: () => {},\n  isInForm: false,\n};\n\nexport const FormContext = React.createContext<FormContextValue | null>(null);\n\n/**\n * Hook that reads the nearest FormContext.\n * Returns a fallback (isInForm=false) when called outside a <Form> card.\n *\n * Usage in field components:\n *   const form = useFormContext();\n *   const value = form.isInForm && name ? form.formData[name] ?? '' : propValue;\n */\nexport const useFormContext = (): FormContextValue => {\n  const ctx = useContext(FormContext);\n  return ctx ?? FALLBACK_CONTEXT;\n};\n"],"mappings":";;AAeA,IAAM,IAAqC;CACzC,UAAU,CAAC;CACX,QAAQ,CAAC;CACT,oBAAoB,CAAC;CACrB,gBAAgB,CAAC;CACjB,UAAU;AACZ,GAEa,IAAc,EAAM,cAAuC,IAAI,GAU/D,UACC,EAAW,CAChB,KAAO"}
+{"version":3,"file":"form.context.js","names":[],"sources":["../../../src/cards/form/form.context.tsx"],"sourcesContent":["import React, {useContext} from \"react\";\nimport type {FormAction} from \"./form.types\";\n\n/**\n * Shape of the data provided by FormContext.\n * When inside a <Form> card, isInForm is true and all fields are populated.\n * When outside (fallback), isInForm is false.\n */\nexport interface FormContextValue {\n  formData: Record<string, unknown>;\n  errors: Record<string, string>;\n  handleChange: (fieldName: string, value: unknown) => void;\n  setError: (fieldName: string, error: string | null) => void;\n  /**\n   * Call from within form content to request that the enclosing Form\n   * perform a top-level action:\n   * - `\"submit\"` — same as pressing the form's native submit button; fires\n   *   `onSubmitted`. Used by `Button` (`formAction: \"submit\"`) and by\n   *   form-bindable fields' `submitOnEnter` prop.\n   * - `\"cancel\"` — fires `onCancelled` without submitting or resetting the\n   *   form's field values. Used by `Button` (`formAction: \"cancel\"`).\n   */\n  requestAction: (action: FormAction) => void;\n  isInForm: boolean;\n}\n\nconst FALLBACK_CONTEXT: FormContextValue = {\n  formData: {},\n  errors: {},\n  handleChange: () => {},\n  setError: () => {},\n  requestAction: () => {},\n  isInForm: false,\n};\n\nexport const FormContext = React.createContext<FormContextValue | null>(null);\n\n/**\n * Hook that reads the nearest FormContext.\n * Returns a fallback (isInForm=false) when called outside a <Form> card.\n *\n * Usage in field components:\n *   const form = useFormContext();\n *   const value = form.isInForm && name ? form.formData[name] ?? '' : propValue;\n */\nexport const useFormContext = (): FormContextValue => {\n  const ctx = useContext(FormContext);\n  return ctx ?? FALLBACK_CONTEXT;\n};\n"],"mappings":";;AA0BA,IAAM,IAAqC;CACzC,UAAU,CAAC;CACX,QAAQ,CAAC;CACT,oBAAoB,CAAC;CACrB,gBAAgB,CAAC;CACjB,qBAAqB,CAAC;CACtB,UAAU;AACZ,GAEa,IAAc,EAAM,cAAuC,IAAI,GAU/D,UACC,EAAW,CAChB,KAAO"}

package/cards/form/form.types.d.ts

@@ -3,6 +3,8 @@ export declare const PI_FORM_CARD = "pi/form";
 export declare const Form: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<PiFormProps, S, PiFormEvents>) => import('@pihanga2/core').PiCardDef;
 export declare const PI_FORM_ACTION: {
     SUBMITTED: string;
+    CANCELLED: string;
+    ABANDONED: string;
 };
 export declare const onFormSubmitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
@@ -11,6 +13,60 @@ export declare const onFormSubmitted: <S extends import('@pihanga2/core').ReduxS
 export declare const onPiFormSubmitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiFormSubmittedEvent>) => void;
+/**
+ * Fires when a control inside the form's content explicitly requests
+ * cancellation — see `FormContext.requestAction("cancel")` (wired up
+ * automatically for any `Button` card with `formAction: "cancel"`).
+ * Does not submit the form and does not reset its field values.
+ */
+export declare const onFormCancelled: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiFormCancelledEvent>) => void;
+/**
+ * Fires automatically when the Form card is removed from the screen
+ * (unmounted) *without* having been submitted or explicitly cancelled first
+ * — e.g. a parent `pi/dialog` is dismissed via the X button, Escape, or an
+ * outside click while the form is still open. Use this to clean up any
+ * related state (drafts, optimistic UI, etc.) regardless of how the host
+ * container went away.
+ *
+ * Never fires after `onSubmitted` or `onCancelled` for the same form
+ * instance.
+ */
+export declare const onFormAbandoned: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core/types').PiRegisterMinimal, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiFormAbandonedEvent>) => void;
+/**
+ * Shared props for any card that binds a single value to a `pi/form`'s
+ * state (text inputs, toggles, selects, etc.).
+ *
+ * All form-bindable field cards (`pi/input`, `pi/text-field`,
+ * `pi/text-area`, `pi/switch`, `pi/checkbox`, `pi/toggle-group`,
+ * `pi/select`, …) extend this so the binding contract stays identical
+ * everywhere: set `name` to read/write the field via `FormContext` when
+ * rendered inside a `pi/form`; omit it (or render outside a form) to fall
+ * back to the card's own standalone `value`/`checked` prop + `onChanged`
+ * event.
+ */
+export type FormFieldProps = {
+    /**
+     * Field name used to bind to FormContext when inside a pi/form card.
+     * When provided the component reads its value from form state and writes
+     * back via form.handleChange.
+     */
+    name?: string;
+};
+/**
+ * Actions a control nested inside a `pi/form` can request via
+ * `FormContext.requestAction()` — currently used by `Button`'s
+ * `formAction` prop, and by form-bindable fields' `submitOnEnter` prop.
+ *
+ * - `"submit"` — triggers the form's real submit flow (same as pressing its
+ *   native submit button), which fires `onSubmitted`.
+ * - `"cancel"` — fires `onCancelled` without submitting or resetting the
+ *   form.
+ */
+export type FormAction = "submit" | "cancel";
 export type PiFormProps = {
     /**
      * Optional id passed through to events for identification.
@@ -36,12 +92,31 @@ export type PiFormProps = {
      * Additional CSS classes for the <form> element.
      */
     className?: string;
+    /**
+     * When true, the default footer "Submit" button is not rendered.
+     * Use this when the form's own content already provides a way to submit
+     * (e.g. a `Button` with `formAction: "submit"`).
+     * @default false
+     */
+    hideSubmit?: boolean;
 };
 export type PiFormSubmittedEvent = {
     id?: string;
     /** Snapshot of form state at the time of submission. */
     formData: Record<string, unknown>;
 };
+export type PiFormCancelledEvent = {
+    id?: string;
+    /** Snapshot of form state at the time of cancellation. */
+    formData: Record<string, unknown>;
+};
+export type PiFormAbandonedEvent = {
+    id?: string;
+    /** Snapshot of form state at the time the form was removed. */
+    formData: Record<string, unknown>;
+};
 export type PiFormEvents = {
     onSubmitted: PiFormSubmittedEvent;
+    onCancelled: PiFormCancelledEvent;
+    onAbandoned: PiFormAbandonedEvent;
 };

package/cards/form/form.types.js

@@ -1,7 +1,11 @@
 import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
 //#region src/cards/form/form.types.ts
-var r = "pi/form", i = e(r), a = n(r, ["submitted"]), o = t(a.SUBMITTED), s = o;
+var r = "pi/form", i = e(r), a = n(r, [
+	"submitted",
+	"cancelled",
+	"abandoned"
+]), o = t(a.SUBMITTED), s = o, c = t(a.CANCELLED), l = t(a.ABANDONED);
 //#endregion
-export { i as Form, a as PI_FORM_ACTION, r as PI_FORM_CARD, o as onFormSubmitted, s as onPiFormSubmitted };
+export { i as Form, a as PI_FORM_ACTION, r as PI_FORM_CARD, l as onFormAbandoned, c as onFormCancelled, o as onFormSubmitted, s as onPiFormSubmitted };
 
 //# sourceMappingURL=form.types.js.map

package/cards/form/form.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.types.js","names":[],"sources":["../../../src/cards/form/form.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_FORM_CARD = \"pi/form\";\n\nexport const Form = createCardDeclaration<PiFormProps, PiFormEvents>(\n  PI_FORM_CARD,\n);\n\nexport const PI_FORM_ACTION = registerActions(PI_FORM_CARD, [\"submitted\"]);\n\nexport const onFormSubmitted = createOnAction<PiFormSubmittedEvent>(\n  PI_FORM_ACTION.SUBMITTED,\n);\n\n/** @deprecated Use `onFormSubmitted` instead. */\nexport const onPiFormSubmitted = onFormSubmitted;\n\nexport type PiFormProps = {\n  /**\n   * Optional id passed through to events for identification.\n   */\n  id?: string;\n\n  /**\n   * Ordered list of field card refs to render inside the form.\n   * Each card (e.g. TextField, Checkbox, FormSelect) will be rendered\n   * in order and wrapped by a FormContext.Provider so they can read\n   * and write shared form state.\n   */\n  content?: PiCardRef[];\n\n  /**\n   * Initial values for the form fields, keyed by field name.\n   */\n  initialValues?: Record<string, unknown>;\n\n  /**\n   * Label for the submit button.\n   * @default \"Submit\"\n   */\n  submitLabel?: string;\n\n  /**\n   * Additional CSS classes for the <form> element.\n   */\n  className?: string;\n};\n\nexport type PiFormSubmittedEvent = {\n  id?: string;\n  /** Snapshot of form state at the time of submission. */\n  formData: Record<string, unknown>;\n};\n\nexport type PiFormEvents = {\n  onSubmitted: PiFormSubmittedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAe,WAEf,IAAO,EAClB,CACF,GAEa,IAAiB,EAAgB,GAAc,CAAC,WAAW,CAAC,GAE5D,IAAkB,EAC7B,EAAe,SACjB,GAGa,IAAoB"}
+{"version":3,"file":"form.types.js","names":[],"sources":["../../../src/cards/form/form.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  type PiCardRef,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const PI_FORM_CARD = \"pi/form\";\n\nexport const Form = createCardDeclaration<PiFormProps, PiFormEvents>(\n  PI_FORM_CARD,\n);\n\nexport const PI_FORM_ACTION = registerActions(PI_FORM_CARD, [\n  \"submitted\",\n  \"cancelled\",\n  \"abandoned\",\n]);\n\nexport const onFormSubmitted = createOnAction<PiFormSubmittedEvent>(\n  PI_FORM_ACTION.SUBMITTED,\n);\n\n/** @deprecated Use `onFormSubmitted` instead. */\nexport const onPiFormSubmitted = onFormSubmitted;\n\n/**\n * Fires when a control inside the form's content explicitly requests\n * cancellation — see `FormContext.requestAction(\"cancel\")` (wired up\n * automatically for any `Button` card with `formAction: \"cancel\"`).\n * Does not submit the form and does not reset its field values.\n */\nexport const onFormCancelled = createOnAction<PiFormCancelledEvent>(\n  PI_FORM_ACTION.CANCELLED,\n);\n\n/**\n * Fires automatically when the Form card is removed from the screen\n * (unmounted) *without* having been submitted or explicitly cancelled first\n * — e.g. a parent `pi/dialog` is dismissed via the X button, Escape, or an\n * outside click while the form is still open. Use this to clean up any\n * related state (drafts, optimistic UI, etc.) regardless of how the host\n * container went away.\n *\n * Never fires after `onSubmitted` or `onCancelled` for the same form\n * instance.\n */\nexport const onFormAbandoned = createOnAction<PiFormAbandonedEvent>(\n  PI_FORM_ACTION.ABANDONED,\n);\n\n/**\n * Shared props for any card that binds a single value to a `pi/form`'s\n * state (text inputs, toggles, selects, etc.).\n *\n * All form-bindable field cards (`pi/input`, `pi/text-field`,\n * `pi/text-area`, `pi/switch`, `pi/checkbox`, `pi/toggle-group`,\n * `pi/select`, …) extend this so the binding contract stays identical\n * everywhere: set `name` to read/write the field via `FormContext` when\n * rendered inside a `pi/form`; omit it (or render outside a form) to fall\n * back to the card's own standalone `value`/`checked` prop + `onChanged`\n * event.\n */\nexport type FormFieldProps = {\n  /**\n   * Field name used to bind to FormContext when inside a pi/form card.\n   * When provided the component reads its value from form state and writes\n   * back via form.handleChange.\n   */\n  name?: string;\n};\n\n/**\n * Actions a control nested inside a `pi/form` can request via\n * `FormContext.requestAction()` — currently used by `Button`'s\n * `formAction` prop, and by form-bindable fields' `submitOnEnter` prop.\n *\n * - `\"submit\"` — triggers the form's real submit flow (same as pressing its\n *   native submit button), which fires `onSubmitted`.\n * - `\"cancel\"` — fires `onCancelled` without submitting or resetting the\n *   form.\n */\nexport type FormAction = \"submit\" | \"cancel\";\n\nexport type PiFormProps = {\n  /**\n   * Optional id passed through to events for identification.\n   */\n  id?: string;\n\n  /**\n   * Ordered list of field card refs to render inside the form.\n   * Each card (e.g. TextField, Checkbox, FormSelect) will be rendered\n   * in order and wrapped by a FormContext.Provider so they can read\n   * and write shared form state.\n   */\n  content?: PiCardRef[];\n\n  /**\n   * Initial values for the form fields, keyed by field name.\n   */\n  initialValues?: Record<string, unknown>;\n\n  /**\n   * Label for the submit button.\n   * @default \"Submit\"\n   */\n  submitLabel?: string;\n\n  /**\n   * Additional CSS classes for the <form> element.\n   */\n  className?: string;\n\n  /**\n   * When true, the default footer \"Submit\" button is not rendered.\n   * Use this when the form's own content already provides a way to submit\n   * (e.g. a `Button` with `formAction: \"submit\"`).\n   * @default false\n   */\n  hideSubmit?: boolean;\n};\n\nexport type PiFormSubmittedEvent = {\n  id?: string;\n  /** Snapshot of form state at the time of submission. */\n  formData: Record<string, unknown>;\n};\n\nexport type PiFormCancelledEvent = {\n  id?: string;\n  /** Snapshot of form state at the time of cancellation. */\n  formData: Record<string, unknown>;\n};\n\nexport type PiFormAbandonedEvent = {\n  id?: string;\n  /** Snapshot of form state at the time the form was removed. */\n  formData: Record<string, unknown>;\n};\n\nexport type PiFormEvents = {\n  onSubmitted: PiFormSubmittedEvent;\n  onCancelled: PiFormCancelledEvent;\n  onAbandoned: PiFormAbandonedEvent;\n};\n"],"mappings":";;AAOA,IAAa,IAAe,WAEf,IAAO,EAClB,CACF,GAEa,IAAiB,EAAgB,GAAc;CAC1D;CACA;CACA;AACF,CAAC,GAEY,IAAkB,EAC7B,EAAe,SACjB,GAGa,IAAoB,GAQpB,IAAkB,EAC7B,EAAe,SACjB,GAaa,IAAkB,EAC7B,EAAe,SACjB"}

package/cards/form/index.js

@@ -1,14 +1,14 @@
 import { FormContext as e, useFormContext as t } from "./form.context.js";
 import { FormComponent as n } from "./form.component.js";
-import { Form as r, PI_FORM_ACTION as i, PI_FORM_CARD as a, onFormSubmitted as o, onPiFormSubmitted as s } from "./form.types.js";
-import { actionTypesToEvents as c, registerCardComponent as l } from "@pihanga2/core";
+import { Form as r, PI_FORM_ACTION as i, PI_FORM_CARD as a, onFormAbandoned as o, onFormCancelled as s, onFormSubmitted as c, onPiFormSubmitted as l } from "./form.types.js";
+import { actionTypesToEvents as u, registerCardComponent as d } from "@pihanga2/core";
 //#region src/cards/form/index.ts
-l({
+d({
 	name: a,
 	component: n,
-	events: c(i)
+	events: u(i)
 });
 //#endregion
-export { r as Form, e as FormContext, i as PI_FORM_ACTION, a as PI_FORM_CARD, o as onFormSubmitted, s as onPiFormSubmitted, t as useFormContext };
+export { r as Form, e as FormContext, i as PI_FORM_ACTION, a as PI_FORM_CARD, o as onFormAbandoned, s as onFormCancelled, c as onFormSubmitted, l as onPiFormSubmitted, t as useFormContext };
 
 //# sourceMappingURL=index.js.map