@pihanga2/shadcn 0.2.0 → 0.2.2

package/cards/core-index.js

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

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

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

package/cards/dataTable/dataTableRowDetail.component.js

@@ -1,4 +1,5 @@
 import { cn as e } from "../../lib/utils.js";
+import "@pihanga2/core";
 import "react";
 import { Fragment as t, jsx as n, jsxs as r } from "react/jsx-runtime";
 //#region src/cards/dataTable/dataTableRowDetail.component.tsx

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

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

package/cards/field/field.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"field.types.js","names":[],"sources":["../../../src/cards/field/field.types.ts"],"sourcesContent":["import {createCardDeclaration, PiCardRef} from \"@pihanga2/core\";\n\nexport const PI_FIELD_CARD = \"pi/field\";\n\nexport const Field = createCardDeclaration<PiFieldProps>(PI_FIELD_CARD);\n\nexport type PiFieldProps = {\n  /** Visible label rendered above the control. */\n  label: string;\n\n  /**\n   * The Pihanga card reference for the plain control to render\n   * (e.g. pi/text-field, pi/select, pi/checkbox, …).\n   *\n   * The field card will forward an `id` prop and an `invalid` boolean to the\n   * inner card via Pihanga's standard prop-passing mechanism so the control\n   * can wire up accessibility attributes without needing its own label logic.\n   */\n  fieldCard: PiCardRef;\n\n  /**\n   * Field name — when provided the card reads the current error from\n   * FormContext (when inside a pi/form) to decide whether to show an error.\n   */\n  name?: string;\n\n  /** Secondary help text rendered below the control. */\n  description?: string;\n\n  /**\n   * Static error message.  Overridden by the form-context error when `name`\n   * is provided and the card is inside a pi/form.\n   */\n  error?: string;\n\n  /** Additional CSS classes applied to the outer Field wrapper. */\n  className?: string;\n};\n"],"mappings":";;AAEA,IAAa,IAAgB,YAEhB,IAAQ,EAAoC,CAAa"}
+{"version":3,"file":"field.types.js","names":[],"sources":["../../../src/cards/field/field.types.ts"],"sourcesContent":["import {createCardDeclaration, type PiCardRef} from \"@pihanga2/core\";\n\nexport const PI_FIELD_CARD = \"pi/field\";\n\nexport const Field = createCardDeclaration<PiFieldProps>(PI_FIELD_CARD);\n\nexport type PiFieldProps = {\n  /** Visible label rendered above the control. */\n  label: string;\n\n  /**\n   * The Pihanga card reference for the plain control to render\n   * (e.g. pi/text-field, pi/select, pi/checkbox, …).\n   *\n   * The field card will forward an `id` prop and an `invalid` boolean to the\n   * inner card via Pihanga's standard prop-passing mechanism so the control\n   * can wire up accessibility attributes without needing its own label logic.\n   */\n  fieldCard: PiCardRef;\n\n  /**\n   * Field name — when provided the card reads the current error from\n   * FormContext (when inside a pi/form) to decide whether to show an error.\n   */\n  name?: string;\n\n  /** Secondary help text rendered below the control. */\n  description?: string;\n\n  /**\n   * Static error message.  Overridden by the form-context error when `name`\n   * is provided and the card is inside a pi/form.\n   */\n  error?: string;\n\n  /** Additional CSS classes applied to the outer Field wrapper. */\n  className?: string;\n};\n"],"mappings":";;AAEA,IAAa,IAAgB,YAEhB,IAAQ,EAAoC,CAAa"}

package/cards/fileDrop/fileDrop.component.js

@@ -0,0 +1,90 @@
+import { k as e } from "../../node_modules/react-drag-drop-files/dist/index.es.js";
+import { DEF_FILE_DROP_FILE_TYPES as t } from "./fileDrop.types.js";
+/* empty css         */
+import "react";
+import { jsx as n, jsxs as r } from "react/jsx-runtime";
+//#region src/cards/fileDrop/fileDrop.component.tsx
+var i = Symbol.for("pihanga.card.FileDrop.LastDropped"), a = globalThis;
+function o(e) {
+	let t = a[i] ??= null;
+	return t?.name === e ? t.file : null;
+}
+function s(e) {
+	a[i] = e;
+}
+function c() {
+	a[i] = null;
+}
+var l = (i) => {
+	let { fileTypes: a = t, title: o = "Click or drop a file right here", description: l, showProgress: u = !1, progress: d = 0, progressStyle: f = {}, dropStyle: p = {}, onFileDropped: m, onError: h, cardName: g, className: _, _cls: v } = i;
+	function y(e) {
+		let t = Array.isArray(e) ? e[0] : e;
+		if (!t) return;
+		let { name: n, size: r, type: i } = t;
+		s({
+			name: n,
+			file: t
+		}), m({
+			name: n,
+			size: r,
+			type: i
+		}), setTimeout(c, 2e3);
+	}
+	function b(e) {
+		h({ error: String(e) });
+	}
+	function x() {
+		let e = `${d}%`, t = `${e} Complete`, i = {
+			width: "50%",
+			...f
+		};
+		return /* @__PURE__ */ r("div", {
+			className: "pi-progress",
+			children: [/* @__PURE__ */ n("div", {
+				className: "pi-progress-label",
+				children: e
+			}), /* @__PURE__ */ n("div", {
+				className: "pi-progress-container",
+				style: i,
+				children: /* @__PURE__ */ n("div", {
+					className: "pi-progress-bar",
+					style: { width: e },
+					role: "progressbar",
+					"aria-label": t
+				})
+			})]
+		});
+	}
+	function S() {
+		return /* @__PURE__ */ r("div", {
+			className: "dropzone-msg",
+			style: p,
+			children: [o && /* @__PURE__ */ n("h3", {
+				className: "dropzone-msg-title",
+				children: o
+			}), l && /* @__PURE__ */ n("span", {
+				className: "dropzone-msg-desc",
+				children: l
+			})]
+		});
+	}
+	function C() {
+		return /* @__PURE__ */ n(e, {
+			handleChange: y,
+			onTypeError: b,
+			name: "file",
+			types: a,
+			hoverTitle: " ",
+			children: S()
+		});
+	}
+	return /* @__PURE__ */ n("div", {
+		className: v("root", _),
+		"data-pihanga": g,
+		children: u ? x() : C()
+	});
+};
+//#endregion
+export { l as FileDropComponent, o as get_last_dropped };
+
+//# sourceMappingURL=fileDrop.component.js.map

package/cards/fileDrop/fileDrop.component.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileDrop.component.js","names":[],"sources":["../../../src/cards/fileDrop/fileDrop.component.tsx"],"sourcesContent":["import React from \"react\";\nimport type {PiCardProps} from \"@pihanga2/core\";\nimport {FileUploader} from \"react-drag-drop-files\";\nimport {\n  DEF_FILE_DROP_FILE_TYPES,\n  type FileDropEvents,\n  type FileDropProps,\n} from \"./fileDrop.types\";\nimport \"./fileDrop.css\";\n\ntype LastDropped = {name: string; file: File};\n\nconst KEY = Symbol.for(\"pihanga.card.FileDrop.LastDropped\");\n\nconst globalForCache = globalThis as unknown as Record<\n  symbol,\n  LastDropped | null | undefined\n>;\n\nexport function get_last_dropped(name: string): File | null {\n  const slot = (globalForCache[KEY] ??= null);\n  if (slot?.name === name) {\n    return slot.file;\n  }\n  return null;\n}\n\nfunction setLastDropped(value: LastDropped): void {\n  globalForCache[KEY] = value;\n}\n\nfunction clearLastDropped(): void {\n  globalForCache[KEY] = null;\n}\n\nexport const FileDropComponent = (\n  props: PiCardProps<FileDropProps, FileDropEvents>,\n): React.ReactNode => {\n  const {\n    fileTypes = DEF_FILE_DROP_FILE_TYPES,\n    title = \"Click or drop a file right here\",\n    description,\n    showProgress = false,\n    progress = 0,\n    progressStyle = {},\n    dropStyle = {},\n    onFileDropped,\n    onError,\n    cardName,\n    className,\n    _cls,\n  } = props;\n\n  function handleChange(file: File | File[]): void {\n    const f = Array.isArray(file) ? file[0] : file;\n    if (!f) return;\n    const {name, size, type} = f;\n    setLastDropped({name, file: f});\n    onFileDropped({name, size, type});\n    // clean up reference to File in a few sec to avoid dangling reference\n    setTimeout(clearLastDropped, 2000);\n  }\n\n  function handleTypeError(err: unknown): void {\n    onError({error: String(err)});\n  }\n\n  function renderProgress(): React.ReactNode {\n    const label = `${progress}%`;\n    const msg = `${label} Complete`;\n    const containerStyle = {width: \"50%\", ...progressStyle};\n    return (\n      <div className=\"pi-progress\">\n        <div className=\"pi-progress-label\">{label}</div>\n        <div\n          className=\"pi-progress-container\"\n          style={containerStyle as React.CSSProperties}\n        >\n          <div\n            className=\"pi-progress-bar\"\n            style={{width: label}}\n            role=\"progressbar\"\n            aria-label={msg}\n          />\n        </div>\n      </div>\n    );\n  }\n\n  function renderDropZone(): React.ReactElement {\n    return (\n      <div className=\"dropzone-msg\" style={dropStyle as React.CSSProperties}>\n        {title && <h3 className=\"dropzone-msg-title\">{title}</h3>}\n        {description && (\n          <span className=\"dropzone-msg-desc\">{description}</span>\n        )}\n      </div>\n    );\n  }\n\n  function renderFileUploader(): React.ReactNode {\n    return (\n      <FileUploader\n        handleChange={handleChange}\n        onTypeError={handleTypeError}\n        name=\"file\"\n        types={fileTypes}\n        hoverTitle=\" \"\n      >\n        {renderDropZone()}\n      </FileUploader>\n    );\n  }\n\n  const cn = _cls(\"root\", className);\n  return (\n    <div className={cn} data-pihanga={cardName}>\n      {showProgress ? renderProgress() : renderFileUploader()}\n    </div>\n  );\n};\n"],"mappings":";;;;;;AAYA,IAAM,IAAM,OAAO,IAAI,mCAAmC,GAEpD,IAAiB;AAKvB,SAAgB,EAAiB,GAA2B;CAC1D,IAAM,IAAQ,EAAe,OAAS;CAItC,OAHI,GAAM,SAAS,IACV,EAAK,OAEP;AACT;AAEA,SAAS,EAAe,GAA0B;CAChD,EAAe,KAAO;AACxB;AAEA,SAAS,IAAyB;CAChC,EAAe,KAAO;AACxB;AAEA,IAAa,KACX,MACoB;CACpB,IAAM,EACJ,eAAY,GACZ,WAAQ,mCACR,gBACA,kBAAe,IACf,cAAW,GACX,mBAAgB,CAAC,GACjB,eAAY,CAAC,GACb,kBACA,YACA,aACA,cACA,YACE;CAEJ,SAAS,EAAa,GAA2B;EAC/C,IAAM,IAAI,MAAM,QAAQ,CAAI,IAAI,EAAK,KAAK;EAC1C,IAAI,CAAC,GAAG;EACR,IAAM,EAAC,SAAM,SAAM,YAAQ;EAI3B,AAHA,EAAe;GAAC;GAAM,MAAM;EAAC,CAAC,GAC9B,EAAc;GAAC;GAAM;GAAM;EAAI,CAAC,GAEhC,WAAW,GAAkB,GAAI;CACnC;CAEA,SAAS,EAAgB,GAAoB;EAC3C,EAAQ,EAAC,OAAO,OAAO,CAAG,EAAC,CAAC;CAC9B;CAEA,SAAS,IAAkC;EACzC,IAAM,IAAQ,GAAG,EAAS,IACpB,IAAM,GAAG,EAAM,YACf,IAAiB;GAAC,OAAO;GAAO,GAAG;EAAa;EACtD,OACE,kBAAC,OAAD;GAAK,WAAU;aAAf,CACE,kBAAC,OAAD;IAAK,WAAU;cAAqB;GAAW,CAAA,GAC/C,kBAAC,OAAD;IACE,WAAU;IACV,OAAO;cAEP,kBAAC,OAAD;KACE,WAAU;KACV,OAAO,EAAC,OAAO,EAAK;KACpB,MAAK;KACL,cAAY;IACb,CAAA;GACE,CAAA,CACF;;CAET;CAEA,SAAS,IAAqC;EAC5C,OACE,kBAAC,OAAD;GAAK,WAAU;GAAe,OAAO;aAArC,CACG,KAAS,kBAAC,MAAD;IAAI,WAAU;cAAsB;GAAU,CAAA,GACvD,KACC,kBAAC,QAAD;IAAM,WAAU;cAAqB;GAAkB,CAAA,CAEtD;;CAET;CAEA,SAAS,IAAsC;EAC7C,OACE,kBAAC,GAAD;GACgB;GACd,aAAa;GACb,MAAK;GACL,OAAO;GACP,YAAW;aAEV,EAAe;EACJ,CAAA;CAElB;CAGA,OACE,kBAAC,OAAD;EAAK,WAFI,EAAK,QAAQ,CAEN;EAAI,gBAAc;YAC/B,IAAe,EAAe,IAAI,EAAmB;CACnD,CAAA;AAET"}

package/cards/fileDrop/fileDrop.types.js

@@ -0,0 +1,11 @@
+import { createCardDeclaration as e, createOnAction as t, registerActions as n } from "@pihanga2/core";
+//#region src/cards/fileDrop/fileDrop.types.ts
+var r = "shad/file-drop", i = e(r), a = n(r, ["file_dropped", "error"]), o = t(a.FILE_DROPPED), s = t(a.ERROR), c = [
+	"JPG",
+	"PNG",
+	"GIF"
+];
+//#endregion
+export { c as DEF_FILE_DROP_FILE_TYPES, a as FILE_DROP_ACTION, r as FILE_DROP_CARD, i as FileDrop, s as onFileDropError, o as onFileDropped };
+
+//# sourceMappingURL=fileDrop.types.js.map

package/cards/fileDrop/fileDrop.types.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fileDrop.types.js","names":[],"sources":["../../../src/cards/fileDrop/fileDrop.types.ts"],"sourcesContent":["import {\n  createCardDeclaration,\n  createOnAction,\n  registerActions,\n} from \"@pihanga2/core\";\n\nexport const FILE_DROP_CARD = \"shad/file-drop\";\n\nexport const FileDrop = createCardDeclaration<FileDropProps, FileDropEvents>(\n  FILE_DROP_CARD,\n);\n\nexport const FILE_DROP_ACTION = registerActions(FILE_DROP_CARD, [\n  \"file_dropped\",\n  \"error\",\n]);\n\nexport const onFileDropped = createOnAction<FileDroppedEvent>(\n  FILE_DROP_ACTION.FILE_DROPPED,\n);\n\nexport const onFileDropError = createOnAction<FileDropErrorEvent>(\n  FILE_DROP_ACTION.ERROR,\n);\n\nexport type FileDropProps<S = Record<string, unknown>> = {\n  /** Accepted file extensions, e.g. [\"JPG\", \"PNG\", \"PDF\"]. Defaults to [\"JPG\", \"PNG\", \"GIF\"]. */\n  fileTypes?: string[];\n  /** Heading shown inside the drop zone. */\n  title?: string;\n  /** Secondary text shown inside the drop zone. */\n  description?: string;\n  /** When true, shows a progress bar instead of the drop zone. */\n  showProgress?: boolean;\n  /** Inline styles applied to the drop zone wrapper. */\n  dropStyle?: Record<string, unknown>;\n  /** Inline styles applied to the progress bar container. */\n  progressStyle?: Record<string, unknown>;\n  /** Current upload progress (0–100). Only used when `showProgress` is true. */\n  progress?: number;\n\n  style?: S;\n  className?: string;\n};\n\nexport const DEF_FILE_DROP_FILE_TYPES = [\"JPG\", \"PNG\", \"GIF\"];\n\nexport type FileDroppedEvent = {\n  name: string;\n  size: number;\n  type: string;\n};\n\nexport type FileDropErrorEvent = {\n  error: string;\n};\n\nexport type FileDropEvents = {\n  onFileDropped: FileDroppedEvent;\n  onError: FileDropErrorEvent;\n};\n"],"mappings":";;AAMA,IAAa,IAAiB,kBAEjB,IAAW,EACtB,CACF,GAEa,IAAmB,EAAgB,GAAgB,CAC9D,gBACA,OACF,CAAC,GAEY,IAAgB,EAC3B,EAAiB,YACnB,GAEa,IAAkB,EAC7B,EAAiB,KACnB,GAsBa,IAA2B;CAAC;CAAO;CAAO;AAAK"}

package/cards/fileDrop/index.js

@@ -0,0 +1,13 @@
+import { DEF_FILE_DROP_FILE_TYPES as e, FILE_DROP_ACTION as t, FILE_DROP_CARD as n, FileDrop as r, onFileDropError as i, onFileDropped as a } from "./fileDrop.types.js";
+import { FileDropComponent as o, get_last_dropped as s } from "./fileDrop.component.js";
+import { actionTypesToEvents as c, registerCardComponent as l } from "@pihanga2/core";
+//#region src/cards/fileDrop/index.ts
+l({
+	name: n,
+	component: o,
+	events: c(t)
+});
+//#endregion
+export { e as DEF_FILE_DROP_FILE_TYPES, t as FILE_DROP_ACTION, n as FILE_DROP_CARD, r as FileDrop, s as get_last_dropped, i as onFileDropError, a as onFileDropped };
+
+//# sourceMappingURL=index.js.map

package/cards/fileDrop/index.js.map

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

package/cards/flexGrid/flexGrid.types.js.map

@@ -1 +1 @@
-{"version":3,"file":"flexGrid.types.js","names":[],"sources":["../../../src/cards/flexGrid/flexGrid.types.ts"],"sourcesContent":["import { createCardDeclaration, PiCardRef } from \"@pihanga2/core\"\n\nexport const FLEX_GRID_CARD = \"flex_grid\"\nexport const FlexGrid = createCardDeclaration<FlexGridProps>(FLEX_GRID_CARD)\n\nexport type FlexGridProps = {\n  cards: { [name: string]: PiCardRef }\n  template: TemplateT\n  height?: string\n  margin?: string\n  overflow?: string\n\n  style?: {\n    root?: React.CSSProperties\n    item?: React.CSSProperties\n  }\n  className?: string\n}\n\n// body {\n//   display: grid;\n//   grid-template-areas:\n//     \"header header header\"\n//     \"nav article ads\"\n//     \"footer footer footer\";\n//   grid-template-rows: 60px 1fr 60px;\n//   grid-template-columns: 20% 1fr 15%;\n//   grid-gap: 10px;\n//   height: 100vh;\n//   margin: 0;\n//   }\n\n// https://css-tricks.com/snippets/css/complete-guide-grid/\nexport type TemplateT = {\n  area?: string[][] // name of card dict\n  rows?: string[] // grid-template-rows (e.g [\"min-content\", \"1fr\",  \"min-content\"])\n  columns?: string[] // grid-template-cols (e.g. [\"1fr\", \"50px\", \"1fr\", \"1fr\"])\n  gap?: string\n}\n"],"mappings":";;AAEA,IAAa,IAAiB,aACjB,IAAW,EAAqC,CAAc"}
+{"version":3,"file":"flexGrid.types.js","names":[],"sources":["../../../src/cards/flexGrid/flexGrid.types.ts"],"sourcesContent":["import {createCardDeclaration, type PiCardRef} from \"@pihanga2/core\";\n\nexport const FLEX_GRID_CARD = \"flex_grid\";\nexport const FlexGrid = createCardDeclaration<FlexGridProps>(FLEX_GRID_CARD);\n\nexport type FlexGridProps = {\n  cards: {[name: string]: PiCardRef};\n  template: TemplateT;\n  height?: string;\n  margin?: string;\n  overflow?: string;\n\n  style?: {\n    root?: React.CSSProperties;\n    item?: React.CSSProperties;\n  };\n  className?: string;\n};\n\n// body {\n//   display: grid;\n//   grid-template-areas:\n//     \"header header header\"\n//     \"nav article ads\"\n//     \"footer footer footer\";\n//   grid-template-rows: 60px 1fr 60px;\n//   grid-template-columns: 20% 1fr 15%;\n//   grid-gap: 10px;\n//   height: 100vh;\n//   margin: 0;\n//   }\n\n// https://css-tricks.com/snippets/css/complete-guide-grid/\nexport type TemplateT = {\n  area?: string[][]; // name of card dict\n  rows?: string[]; // grid-template-rows (e.g [\"min-content\", \"1fr\",  \"min-content\"])\n  columns?: string[]; // grid-template-cols (e.g. [\"1fr\", \"50px\", \"1fr\", \"1fr\"])\n  gap?: string;\n};\n"],"mappings":";;AAEA,IAAa,IAAiB,aACjB,IAAW,EAAqC,CAAc"}

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

@@ -4,6 +4,10 @@ export declare const Form: <S extends import('@pihanga2/core').ReduxState>(p: im
 export declare const PI_FORM_ACTION: {
     SUBMITTED: string;
 };
+export declare const onFormSubmitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
+    cardID: string;
+} & PiFormSubmittedEvent>) => void;
+/** @deprecated Use `onFormSubmitted` instead. */
 export declare const onPiFormSubmitted: <S extends import('@pihanga2/core').ReduxState>(register: import('@pihanga2/core').PiRegister, f: import('@pihanga2/core').ReduceF<S, import('@pihanga2/core').ReduxAction & {
     cardID: string;
 } & PiFormSubmittedEvent>) => void;

package/cards/form/form.types.js

@@ -1,7 +1,7 @@
 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);
+var r = "pi/form", i = e(r), a = n(r, ["submitted"]), o = t(a.SUBMITTED), s = o;
 //#endregion
-export { i as Form, a as PI_FORM_ACTION, r as PI_FORM_CARD, o as onPiFormSubmitted };
+export { i as Form, a as PI_FORM_ACTION, r as PI_FORM_CARD, 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 onPiFormSubmitted = createOnAction<PiFormSubmittedEvent>(\n  PI_FORM_ACTION.SUBMITTED,\n);\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,IAAoB,EAC/B,EAAe,SACjB"}
+{"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"}

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, onPiFormSubmitted as o } from "./form.types.js";
-import { actionTypesToEvents as s, registerCardComponent as c } from "@pihanga2/core";
+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";
 //#region src/cards/form/index.ts
-c({
+l({
 	name: a,
 	component: n,
-	events: s(i)
+	events: c(i)
 });
 //#endregion
-export { r as Form, e as FormContext, i as PI_FORM_ACTION, a as PI_FORM_CARD, o as onPiFormSubmitted, t as useFormContext };
+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 };
 
 //# sourceMappingURL=index.js.map

package/cards/graphin/contextMenu.component.d.ts

@@ -0,0 +1,28 @@
+import { default as React } from 'react';
+import { GraphinContextMenu, GraphinNodeEventContext } from './graphin.types';
+/**
+ * Context forwarded to the content card as props.
+ * Consumers can import this type to type their card props:
+ *
+ * ```ts
+ * type MyMenuProps = ContextMenuContext & { ... }
+ * ```
+ */
+export type ContextMenuContext<T = Record<string, unknown>> = {
+    /** Whether this panel was triggered from an edge (vs node) */
+    isEdge?: boolean;
+    /** The G6 element id */
+    elementID?: string;
+    /** The element's raw `data` bag */
+    elementData?: T;
+    /**
+     * Call this to close the context menu panel from within the content card.
+     */
+    onClose?: () => void;
+};
+export declare function ContextMenuComponent(props: {
+    contentCards: GraphinContextMenu;
+    parentCard: string;
+    onOpen?: (ctx: GraphinNodeEventContext) => void;
+    onClose?: (ctx: GraphinNodeEventContext) => void;
+}): React.ReactNode;

package/cards/graphin/eventDispatcher.component.d.ts

@@ -0,0 +1,8 @@
+import { GraphinNodeEventContext } from './graphin.types';
+export type GraphinEventDispatcherProps = {
+    onNodeHovered?: (ctx: GraphinNodeEventContext) => void;
+    onNodeHoverEnd?: (ctx: GraphinNodeEventContext) => void;
+    onNodeClicked?: (ctx: GraphinNodeEventContext) => void;
+    onNodeDblClicked?: (ctx: GraphinNodeEventContext) => void;
+};
+export declare function GraphinEventDispatcher(props: GraphinEventDispatcherProps): null;

package/cards/graphin/graphin.component.d.ts

@@ -1,4 +1,4 @@
 import { default as React } from 'react';
 import { PiCardProps } from '@pihanga2/core';
-import { GraphinProps } from './graphin.types';
-export declare const GraphinComponent: (props: PiCardProps<GraphinProps>) => React.ReactNode;
+import { GraphinEvents, GraphinProps } from './graphin.types';
+export declare const GraphinComponent: (props: PiCardProps<GraphinProps, GraphinEvents>) => React.ReactNode;

package/cards/graphin/graphin.playground-cards.d.ts

@@ -0,0 +1 @@
+export {};