@pihanga2/shadcn 0.2.21 → 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/input/input.component.js

@@ -1,6 +1,6 @@
 import { useFormContext as e } from "../form/form.context.js";
-import { Label as t } from "../../components/ui/label.js";
-import { Input as n } from "../../components/ui/input.js";
+import { Input as t } from "../../components/ui/input.js";
+import { Label as n } from "../../components/ui/label.js";
 import r from "react";
 import "@pihanga2/core";
 import { jsx as i, jsxs as a } from "react/jsx-runtime";
@@ -49,11 +49,11 @@ var o = (o) => {
 		"data-pihanga": _,
 		className: "grid w-full gap-1.5",
 		children: [
-			f && /* @__PURE__ */ i(t, {
+			f && /* @__PURE__ */ i(n, {
 				htmlFor: M,
 				children: f
 			}),
-			/* @__PURE__ */ i(n, {
+			/* @__PURE__ */ i(t, {
 				ref: b,
 				id: M,
 				type: l,

package/cards/message/index.d.ts

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

package/cards/message/index.js

@@ -0,0 +1,15 @@
+import { MessageComponent as e } from "./message.component.js";
+import { MessageGroupComponent as t } from "./messageGroup.component.js";
+import { MESSAGE_CARD as n, MESSAGE_GROUP_CARD as r, Message as i, MessageGroup as a } from "./message.types.js";
+import { registerCardComponent as o } from "@pihanga2/core";
+o({
+	name: n,
+	component: e
+}), o({
+	name: r,
+	component: t
+});
+//#endregion
+export { n as MESSAGE_CARD, r as MESSAGE_GROUP_CARD, i as Message, a as MessageGroup };
+
+//# sourceMappingURL=index.js.map

package/cards/message/index.js.map

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

package/cards/message/message.component.d.ts

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

package/cards/message/message.component.js

@@ -0,0 +1,47 @@
+import { Message as e, MessageAvatar as t, MessageContent as n, MessageFooter as r, MessageHeader as i } from "../../components/ui/message.js";
+import "react";
+import { Card as a } from "@pihanga2/core";
+import { jsx as o, jsxs as s } from "react/jsx-runtime";
+//#region src/cards/message/message.component.tsx
+var c = (c) => {
+	let { align: l = "start", avatarCard: u, headerCard: d, contentCard: f, footerCard: p, className: m, avatarClassName: h, contentClassName: g, headerClassName: _, footerClassName: v, style: y, cardName: b } = c;
+	return /* @__PURE__ */ s(e, {
+		align: l,
+		className: m,
+		style: y,
+		"data-pihanga": b,
+		children: [u && /* @__PURE__ */ o(t, {
+			className: h,
+			children: /* @__PURE__ */ o(a, {
+				cardName: u,
+				parentCard: b
+			})
+		}), /* @__PURE__ */ s(n, {
+			className: g,
+			children: [
+				d && /* @__PURE__ */ o(i, {
+					className: _,
+					children: /* @__PURE__ */ o(a, {
+						cardName: d,
+						parentCard: b
+					})
+				}),
+				/* @__PURE__ */ o(a, {
+					cardName: f,
+					parentCard: b
+				}),
+				p && /* @__PURE__ */ o(r, {
+					className: v,
+					children: /* @__PURE__ */ o(a, {
+						cardName: p,
+						parentCard: b
+					})
+				})
+			]
+		})]
+	});
+};
+//#endregion
+export { c as MessageComponent };
+
+//# sourceMappingURL=message.component.js.map

package/cards/message/message.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.component.js","names":[],"sources":["../../../src/cards/message/message.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {\n  Message,\n  MessageAvatar,\n  MessageContent,\n  MessageFooter,\n  MessageHeader,\n} from \"@/components/ui/message\";\nimport type {MessageProps} from \"./message.types\";\n\nexport const MessageComponent = (\n  props: PiCardProps<MessageProps>,\n): React.ReactNode => {\n  const {\n    align = \"start\",\n    avatarCard,\n    headerCard,\n    contentCard,\n    footerCard,\n    className,\n    avatarClassName,\n    contentClassName,\n    headerClassName,\n    footerClassName,\n    style,\n    cardName,\n  } = props;\n\n  return (\n    <Message\n      align={align}\n      className={className}\n      style={style}\n      data-pihanga={cardName}\n    >\n      {avatarCard && (\n        <MessageAvatar className={avatarClassName}>\n          <Card cardName={avatarCard} parentCard={cardName} />\n        </MessageAvatar>\n      )}\n\n      <MessageContent className={contentClassName}>\n        {headerCard && (\n          <MessageHeader className={headerClassName}>\n            <Card cardName={headerCard} parentCard={cardName} />\n          </MessageHeader>\n        )}\n\n        <Card cardName={contentCard} parentCard={cardName} />\n\n        {footerCard && (\n          <MessageFooter className={footerClassName}>\n            <Card cardName={footerCard} parentCard={cardName} />\n          </MessageFooter>\n        )}\n      </MessageContent>\n    </Message>\n  );\n};\n"],"mappings":";;;;;AAWA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,WAAQ,SACR,eACA,eACA,gBACA,eACA,cACA,oBACA,qBACA,oBACA,oBACA,UACA,gBACE;CAEJ,OACE,kBAAC,GAAD;EACS;EACI;EACJ;EACP,gBAAc;YAJhB,CAMG,KACC,kBAAC,GAAD;GAAe,WAAW;aACxB,kBAAC,GAAD;IAAM,UAAU;IAAY,YAAY;GAAW,CAAA;EACtC,CAAA,GAGjB,kBAAC,GAAD;GAAgB,WAAW;aAA3B;IACG,KACC,kBAAC,GAAD;KAAe,WAAW;eACxB,kBAAC,GAAD;MAAM,UAAU;MAAY,YAAY;KAAW,CAAA;IACtC,CAAA;IAGjB,kBAAC,GAAD;KAAM,UAAU;KAAa,YAAY;IAAW,CAAA;IAEnD,KACC,kBAAC,GAAD;KAAe,WAAW;eACxB,kBAAC,GAAD;MAAM,UAAU;MAAY,YAAY;KAAW,CAAA;IACtC,CAAA;GAEH;IACT;;AAEb"}

package/cards/message/message.types.d.ts

@@ -0,0 +1,56 @@
+import { PiCardRef } from '@pihanga2/core';
+import { default as React } from 'react';
+export declare const MESSAGE_CARD = "shad/message";
+export declare const Message: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<MessageProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+export type MessageProps = {
+    /**
+     * Alignment of the message row.
+     * - `"start"` — sender / left-hand messages (default).
+     * - `"end"` — receiver / current-user messages (right-hand side).
+     * @default "start"
+     */
+    align?: "start" | "end";
+    /**
+     * Pihanga card reference rendered inside `MessageAvatar`
+     * (typically a `shad/avatar` card). Omit to render no avatar slot.
+     */
+    avatarCard?: PiCardRef;
+    /**
+     * Pihanga card reference rendered above the message surface, inside
+     * `MessageHeader` (e.g. a sender name via `shad/typography`).
+     */
+    headerCard?: PiCardRef;
+    /**
+     * Pihanga card reference rendered as the message surface itself.
+     * Typically a `shad/bubble` card, but any card works — including
+     * "large" content such as a `markdown-viewer` or `shad/data-table` card.
+     */
+    contentCard: PiCardRef;
+    /**
+     * Pihanga card reference rendered below the message surface, inside
+     * `MessageFooter` (e.g. delivery status, timestamps, or action buttons).
+     */
+    footerCard?: PiCardRef;
+    /** Additional Tailwind classes applied to the root `Message` element. */
+    className?: string;
+    /** Additional Tailwind classes applied to `MessageAvatar`. */
+    avatarClassName?: string;
+    /** Additional Tailwind classes applied to `MessageContent`. */
+    contentClassName?: string;
+    /** Additional Tailwind classes applied to `MessageHeader`. */
+    headerClassName?: string;
+    /** Additional Tailwind classes applied to `MessageFooter`. */
+    footerClassName?: string;
+    /** Inline styles applied to the root `Message` element. */
+    style?: React.CSSProperties;
+};
+export declare const MESSAGE_GROUP_CARD = "shad/message-group";
+export declare const MessageGroup: <S extends import('@pihanga2/core').ReduxState>(p: import('@pihanga2/core').PiMapProps<MessageGroupProps, S, {}>) => import('@pihanga2/core').PiCardDef;
+export type MessageGroupProps = {
+    /** Ordered list of `shad/message` (or other) card refs to stack. */
+    content: PiCardRef[];
+    /** Additional Tailwind classes applied to the root element. */
+    className?: string;
+    /** Inline styles applied to the root element. */
+    style?: React.CSSProperties;
+};

package/cards/message/message.types.js

@@ -0,0 +1,7 @@
+import { createCardDeclaration as e } from "@pihanga2/core";
+//#region src/cards/message/message.types.ts
+var t = "shad/message", n = e(t), r = "shad/message-group", i = e(r);
+//#endregion
+export { t as MESSAGE_CARD, r as MESSAGE_GROUP_CARD, n as Message, i as MessageGroup };
+
+//# sourceMappingURL=message.types.js.map

package/cards/message/message.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"message.types.js","names":[],"sources":["../../../src/cards/message/message.types.ts"],"sourcesContent":["import {createCardDeclaration, type PiCardRef} from \"@pihanga2/core\";\nimport type React from \"react\";\n\nexport const MESSAGE_CARD = \"shad/message\";\n\nexport const Message = createCardDeclaration<MessageProps>(MESSAGE_CARD);\n\nexport type MessageProps = {\n  /**\n   * Alignment of the message row.\n   * - `\"start\"` — sender / left-hand messages (default).\n   * - `\"end\"` — receiver / current-user messages (right-hand side).\n   * @default \"start\"\n   */\n  align?: \"start\" | \"end\";\n\n  /**\n   * Pihanga card reference rendered inside `MessageAvatar`\n   * (typically a `shad/avatar` card). Omit to render no avatar slot.\n   */\n  avatarCard?: PiCardRef;\n\n  /**\n   * Pihanga card reference rendered above the message surface, inside\n   * `MessageHeader` (e.g. a sender name via `shad/typography`).\n   */\n  headerCard?: PiCardRef;\n\n  /**\n   * Pihanga card reference rendered as the message surface itself.\n   * Typically a `shad/bubble` card, but any card works — including\n   * \"large\" content such as a `markdown-viewer` or `shad/data-table` card.\n   */\n  contentCard: PiCardRef;\n\n  /**\n   * Pihanga card reference rendered below the message surface, inside\n   * `MessageFooter` (e.g. delivery status, timestamps, or action buttons).\n   */\n  footerCard?: PiCardRef;\n\n  /** Additional Tailwind classes applied to the root `Message` element. */\n  className?: string;\n  /** Additional Tailwind classes applied to `MessageAvatar`. */\n  avatarClassName?: string;\n  /** Additional Tailwind classes applied to `MessageContent`. */\n  contentClassName?: string;\n  /** Additional Tailwind classes applied to `MessageHeader`. */\n  headerClassName?: string;\n  /** Additional Tailwind classes applied to `MessageFooter`. */\n  footerClassName?: string;\n\n  /** Inline styles applied to the root `Message` element. */\n  style?: React.CSSProperties;\n};\n\n// ---------------------------------------------------------------------------\n// shad/message-group — stack consecutive messages from the same sender.\n// ---------------------------------------------------------------------------\n\nexport const MESSAGE_GROUP_CARD = \"shad/message-group\";\n\nexport const MessageGroup =\n  createCardDeclaration<MessageGroupProps>(MESSAGE_GROUP_CARD);\n\nexport type MessageGroupProps = {\n  /** Ordered list of `shad/message` (or other) card refs to stack. */\n  content: PiCardRef[];\n  /** Additional Tailwind classes applied to the root element. */\n  className?: string;\n  /** Inline styles applied to the root element. */\n  style?: React.CSSProperties;\n};\n"],"mappings":";;AAGA,IAAa,IAAe,gBAEf,IAAU,EAAoC,CAAY,GAuD1D,IAAqB,sBAErB,IACX,EAAyC,CAAkB"}

package/cards/message/messageGroup.component.d.ts

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

package/cards/message/messageGroup.component.js

@@ -0,0 +1,21 @@
+import { MessageGroup as e } from "../../components/ui/message.js";
+import "react";
+import { Card as t } from "@pihanga2/core";
+import { jsx as n } from "react/jsx-runtime";
+//#region src/cards/message/messageGroup.component.tsx
+var r = (r) => {
+	let { content: i, className: a, style: o, cardName: s } = r;
+	return /* @__PURE__ */ n(e, {
+		className: a,
+		style: o,
+		"data-pihanga": s,
+		children: i.map((e, r) => /* @__PURE__ */ n(t, {
+			cardName: e,
+			parentCard: s
+		}, r))
+	});
+};
+//#endregion
+export { r as MessageGroupComponent };
+
+//# sourceMappingURL=messageGroup.component.js.map

package/cards/message/messageGroup.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"messageGroup.component.js","names":[],"sources":["../../../src/cards/message/messageGroup.component.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {Card, type PiCardProps} from \"@pihanga2/core\";\nimport {MessageGroup} from \"@/components/ui/message\";\nimport type {MessageGroupProps} from \"./message.types\";\n\nexport const MessageGroupComponent = (\n  props: PiCardProps<MessageGroupProps>,\n): React.ReactNode => {\n  const {content, className, style, cardName} = props;\n\n  return (\n    <MessageGroup className={className} style={style} data-pihanga={cardName}>\n      {content.map((cn, i) => (\n        <Card cardName={cn} parentCard={cardName} key={i} />\n      ))}\n    </MessageGroup>\n  );\n};\n"],"mappings":";;;;;AAKA,IAAa,KACX,MACoB;CACpB,IAAM,EAAC,YAAS,cAAW,UAAO,gBAAY;CAE9C,OACE,kBAAC,GAAD;EAAyB;EAAkB;EAAO,gBAAc;YAC7D,EAAQ,KAAK,GAAI,MAChB,kBAAC,GAAD;GAAM,UAAU;GAAI,YAAY;EAAmB,GAAJ,CAAI,CACpD;CACW,CAAA;AAElB"}

package/components/ui/attachment.js

@@ -0,0 +1,102 @@
+import { cn as e } from "../../lib/utils.js";
+import { Button as t } from "./button.js";
+import "react";
+import { cva as n } from "class-variance-authority";
+import { Slot as r } from "radix-ui";
+import { jsx as i } from "react/jsx-runtime";
+//#region src/components/ui/attachment.tsx
+var a = n("group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed", { variants: {
+	size: {
+		default: "gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2",
+		sm: "gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5",
+		xs: "gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1"
+	},
+	orientation: {
+		horizontal: "min-w-40 items-center",
+		vertical: "w-24 flex-col has-data-[slot=attachment-content]:w-30"
+	}
+} });
+function o({ className: t, state: n = "done", size: r = "default", orientation: o = "horizontal", ...s }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "attachment",
+		"data-state": n,
+		"data-size": r,
+		"data-orientation": o,
+		className: e(a({
+			size: r,
+			orientation: o
+		}), t),
+		...s
+	});
+}
+var s = n("relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5", {
+	variants: { variant: {
+		icon: "",
+		image: "opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover"
+	} },
+	defaultVariants: { variant: "icon" }
+});
+function c({ className: t, variant: n = "icon", ...r }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "attachment-media",
+		"data-variant": n,
+		className: e(s({ variant: n }), t),
+		...r
+	});
+}
+function l({ className: t, ...n }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "attachment-content",
+		className: e("max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1", t),
+		...n
+	});
+}
+function u({ className: t, ...n }) {
+	return /* @__PURE__ */ i("span", {
+		"data-slot": "attachment-title",
+		className: e("block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:animate-pulse group-data-[state=uploading]/attachment:animate-pulse", t),
+		...n
+	});
+}
+function d({ className: t, ...n }) {
+	return /* @__PURE__ */ i("span", {
+		"data-slot": "attachment-description",
+		className: e("mt-0.5 block min-w-0 max-w-full truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80", t),
+		...n
+	});
+}
+function f({ className: t, ...n }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "attachment-actions",
+		className: e("relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1", t),
+		...n
+	});
+}
+function p({ className: n, variant: r, size: a = "icon-xs", ...o }) {
+	return /* @__PURE__ */ i(t, {
+		"data-slot": "attachment-action",
+		variant: r ?? "ghost",
+		size: a,
+		className: e(n),
+		...o
+	});
+}
+function m({ className: t, asChild: n = !1, type: a, ...o }) {
+	return /* @__PURE__ */ i(n ? r.Root : "button", {
+		"data-slot": "attachment-trigger",
+		type: n ? void 0 : a ?? "button",
+		className: e("absolute inset-0 z-10 outline-none", t),
+		...o
+	});
+}
+function h({ className: t, ...n }) {
+	return /* @__PURE__ */ i("div", {
+		"data-slot": "attachment-group",
+		className: e("flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 [scrollbar-width:none] *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start [&::-webkit-scrollbar]:hidden", t),
+		...n
+	});
+}
+//#endregion
+export { o as Attachment, p as AttachmentAction, f as AttachmentActions, l as AttachmentContent, d as AttachmentDescription, h as AttachmentGroup, c as AttachmentMedia, u as AttachmentTitle, m as AttachmentTrigger };
+
+//# sourceMappingURL=attachment.js.map

package/components/ui/attachment.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"attachment.js","names":[],"sources":["../../../src/components/ui/attachment.tsx"],"sourcesContent":["import * as React from \"react\";\nimport {cva, type VariantProps} from \"class-variance-authority\";\nimport {Slot} from \"radix-ui\";\n\nimport {cn} from \"@/lib/utils\";\nimport {Button} from \"@/components/ui/button\";\n\nconst attachmentVariants = cva(\n  \"group/attachment relative flex w-fit max-w-full min-w-0 shrink-0 flex-wrap rounded-xl border bg-card text-card-foreground transition-colors focus-within:ring-1 focus-within:ring-ring/50 has-[>a,>button]:hover:bg-muted/50 data-[state=error]:border-destructive/30 data-[state=idle]:border-dashed\",\n  {\n    variants: {\n      size: {\n        default:\n          \"gap-2 text-sm has-data-[slot=attachment-content]:px-2.5 has-data-[slot=attachment-content]:py-2 has-data-[slot=attachment-media]:p-2\",\n        sm: \"gap-2.5 text-xs has-data-[slot=attachment-content]:px-2 has-data-[slot=attachment-content]:py-1.5 has-data-[slot=attachment-media]:p-1.5\",\n        xs: \"gap-1.5 rounded-lg text-xs has-data-[slot=attachment-content]:px-1.5 has-data-[slot=attachment-content]:py-1 has-data-[slot=attachment-media]:p-1\",\n      },\n      orientation: {\n        horizontal: \"min-w-40 items-center\",\n        vertical: \"w-24 flex-col has-data-[slot=attachment-content]:w-30\",\n      },\n    },\n  },\n);\n\nfunction Attachment({\n  className,\n  state = \"done\",\n  size = \"default\",\n  orientation = \"horizontal\",\n  ...props\n}: React.ComponentProps<\"div\"> &\n  VariantProps<typeof attachmentVariants> & {\n    state?: \"idle\" | \"uploading\" | \"processing\" | \"error\" | \"done\";\n  }) {\n  return (\n    <div\n      data-slot=\"attachment\"\n      data-state={state}\n      data-size={size}\n      data-orientation={orientation}\n      className={cn(attachmentVariants({size, orientation}), className)}\n      {...props}\n    />\n  );\n}\n\nconst attachmentMediaVariants = cva(\n  \"relative flex aspect-square w-10 shrink-0 items-center justify-center overflow-hidden rounded-lg bg-muted text-foreground group-data-[orientation=vertical]/attachment:w-full group-data-[size=sm]/attachment:w-8 group-data-[size=xs]/attachment:w-7 group-data-[size=xs]/attachment:rounded-md group-data-[state=error]/attachment:bg-destructive/10 group-data-[state=error]/attachment:text-destructive [&_svg]:pointer-events-none [&_svg:not([class*='size-'])]:size-4 group-data-[orientation=vertical]/attachment:[&_svg:not([class*='size-'])]:size-6 group-data-[size=xs]/attachment:[&_svg:not([class*='size-'])]:size-3.5\",\n  {\n    variants: {\n      variant: {\n        icon: \"\",\n        image:\n          \"opacity-60 group-data-[state=done]/attachment:opacity-100 group-data-[state=idle]/attachment:opacity-100 *:[img]:aspect-square *:[img]:w-full *:[img]:object-cover\",\n      },\n    },\n    defaultVariants: {\n      variant: \"icon\",\n    },\n  },\n);\n\nfunction AttachmentMedia({\n  className,\n  variant = \"icon\",\n  ...props\n}: React.ComponentProps<\"div\"> & VariantProps<typeof attachmentMediaVariants>) {\n  return (\n    <div\n      data-slot=\"attachment-media\"\n      data-variant={variant}\n      className={cn(attachmentMediaVariants({variant}), className)}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentContent({className, ...props}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"attachment-content\"\n      className={cn(\n        \"max-w-full min-w-0 flex-1 leading-tight group-data-[orientation=vertical]/attachment:px-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentTitle({className, ...props}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"attachment-title\"\n      className={cn(\n        \"block max-w-full min-w-0 truncate font-medium group-data-[state=processing]/attachment:animate-pulse group-data-[state=uploading]/attachment:animate-pulse\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentDescription({\n  className,\n  ...props\n}: React.ComponentProps<\"span\">) {\n  return (\n    <span\n      data-slot=\"attachment-description\"\n      className={cn(\n        \"mt-0.5 block min-w-0 max-w-full truncate text-xs text-muted-foreground group-data-[state=error]/attachment:text-destructive/80\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentActions({className, ...props}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"attachment-actions\"\n      className={cn(\n        \"relative z-20 flex shrink-0 items-center group-data-[orientation=vertical]/attachment:absolute group-data-[orientation=vertical]/attachment:top-3 group-data-[orientation=vertical]/attachment:right-3 group-data-[orientation=vertical]/attachment:gap-1\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentAction({\n  className,\n  variant,\n  size = \"icon-xs\",\n  ...props\n}: React.ComponentProps<typeof Button>) {\n  return (\n    <Button\n      data-slot=\"attachment-action\"\n      variant={variant ?? \"ghost\"}\n      size={size}\n      className={cn(className)}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentTrigger({\n  className,\n  asChild = false,\n  type,\n  ...props\n}: React.ComponentProps<\"button\"> & {\n  asChild?: boolean;\n}) {\n  const Comp = asChild ? Slot.Root : \"button\";\n\n  return (\n    <Comp\n      data-slot=\"attachment-trigger\"\n      type={asChild ? undefined : (type ?? \"button\")}\n      className={cn(\"absolute inset-0 z-10 outline-none\", className)}\n      {...props}\n    />\n  );\n}\n\nfunction AttachmentGroup({className, ...props}: React.ComponentProps<\"div\">) {\n  return (\n    <div\n      data-slot=\"attachment-group\"\n      className={cn(\n        \"flex min-w-0 snap-x snap-mandatory scroll-px-1 gap-3 overflow-x-auto overscroll-x-contain py-1 [scrollbar-width:none] *:data-[slot=attachment]:flex-none *:data-[slot=attachment]:snap-start [&::-webkit-scrollbar]:hidden\",\n        className,\n      )}\n      {...props}\n    />\n  );\n}\n\nexport {\n  Attachment,\n  AttachmentGroup,\n  AttachmentMedia,\n  AttachmentContent,\n  AttachmentTitle,\n  AttachmentDescription,\n  AttachmentActions,\n  AttachmentAction,\n  AttachmentTrigger,\n};\n"],"mappings":";;;;;;;AAOA,IAAM,IAAqB,EACzB,ySACA,EACE,UAAU;CACR,MAAM;EACJ,SACE;EACF,IAAI;EACJ,IAAI;CACN;CACA,aAAa;EACX,YAAY;EACZ,UAAU;CACZ;AACF,EACF,CACF;AAEA,SAAS,EAAW,EAClB,cACA,WAAQ,QACR,UAAO,WACP,iBAAc,cACd,GAAG,KAIA;CACH,OACE,kBAAC,OAAD;EACE,aAAU;EACV,cAAY;EACZ,aAAW;EACX,oBAAkB;EAClB,WAAW,EAAG,EAAmB;GAAC;GAAM;EAAW,CAAC,GAAG,CAAS;EAChE,GAAI;CACL,CAAA;AAEL;AAEA,IAAM,IAA0B,EAC9B,ymBACA;CACE,UAAU,EACR,SAAS;EACP,MAAM;EACN,OACE;CACJ,EACF;CACA,iBAAiB,EACf,SAAS,OACX;AACF,CACF;AAEA,SAAS,EAAgB,EACvB,cACA,aAAU,QACV,GAAG,KAC0E;CAC7E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,gBAAc;EACd,WAAW,EAAG,EAAwB,EAAC,WAAO,CAAC,GAAG,CAAS;EAC3D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAkB,EAAC,cAAW,GAAG,KAAqC;CAC7E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,6FACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAgB,EAAC,cAAW,GAAG,KAAsC;CAC5E,OACE,kBAAC,QAAD;EACE,aAAU;EACV,WAAW,EACT,8JACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAsB,EAC7B,cACA,GAAG,KAC4B;CAC/B,OACE,kBAAC,QAAD;EACE,aAAU;EACV,WAAW,EACT,kIACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAkB,EAAC,cAAW,GAAG,KAAqC;CAC7E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,6PACA,CACF;EACA,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAiB,EACxB,cACA,YACA,UAAO,WACP,GAAG,KACmC;CACtC,OACE,kBAAC,GAAD;EACE,aAAU;EACV,SAAS,KAAW;EACd;EACN,WAAW,EAAG,CAAS;EACvB,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAkB,EACzB,cACA,aAAU,IACV,SACA,GAAG,KAGF;CAGD,OACE,kBAHW,IAAU,EAAK,OAAO,UAGjC;EACE,aAAU;EACV,MAAM,IAAU,KAAA,IAAa,KAAQ;EACrC,WAAW,EAAG,sCAAsC,CAAS;EAC7D,GAAI;CACL,CAAA;AAEL;AAEA,SAAS,EAAgB,EAAC,cAAW,GAAG,KAAqC;CAC3E,OACE,kBAAC,OAAD;EACE,aAAU;EACV,WAAW,EACT,8NACA,CACF;EACA,GAAI;CACL,CAAA;AAEL"}

package/components/ui/badge.js

@@ -1,10 +1,10 @@
 import { cn as e } from "../lib/utils.js";
 import "react";
-import { jsx as t } from "react/jsx-runtime";
-import { Slot as n } from "@radix-ui/react-slot";
-import { cva as r } from "class-variance-authority";
+import { cva as t } from "class-variance-authority";
+import { jsx as n } from "react/jsx-runtime";
+import { Slot as r } from "@radix-ui/react-slot";
 //#region src/components/ui/badge.tsx
-var i = r("inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
+var i = t("inline-flex items-center justify-center rounded-full border px-2 py-0.5 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1 [&>svg]:pointer-events-none focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px] aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 aria-invalid:border-destructive transition-[color,box-shadow] overflow-hidden", {
 	variants: { variant: {
 		default: "border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90",
 		secondary: "border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90",
@@ -13,10 +13,10 @@ var i = r("inline-flex items-center justify-center rounded-full border px-2 py-0
 	} },
 	defaultVariants: { variant: "default" }
 });
-function a({ className: r, variant: a, asChild: o = !1, ...s }) {
-	return /* @__PURE__ */ t(o ? n : "span", {
+function a({ className: t, variant: a, asChild: o = !1, ...s }) {
+	return /* @__PURE__ */ n(o ? r : "span", {
 		"data-slot": "badge",
-		className: e(i({ variant: a }), r),
+		className: e(i({ variant: a }), t),
 		...s
 	});
 }