@customafk/lunas-ui 0.2.8 → 0.2.10

package/dist/features/tables/index.d.cts

@@ -1,7 +1,7 @@
 import { t as AnyEntity } from "../../types-CDYHkcOk.cjs";
-import { t as Input } from "../../input-t2hpPP2K.cjs";
-import * as react_jsx_runtime332 from "react/jsx-runtime";
-import * as react273 from "react";
+import { t as Input } from "../../input-BRVTkuUg.cjs";
+import * as react_jsx_runtime346 from "react/jsx-runtime";
+import * as react286 from "react";
 import { AccessorKeyColumnDef, CellContext, Column, ColumnPinningPosition, ColumnPinningState, Header, HeaderGroup, Row, RowSelectionState, Table } from "@tanstack/react-table";
 import { VirtualItem, Virtualizer } from "@tanstack/react-virtual";
 
@@ -46,9 +46,48 @@ declare const UITableBooleanDisplay: React.FC<{
   value: boolean | null | undefined;
 }>;
 //#endregion
+//#region packages/components/features/tables/components/atoms/currency-display.d.ts
+/** Props for the {@link UITableCurrencyDisplay} component. */
+type Props$7 = {
+  /** The numeric value to format as currency; falsy / `NaN` renders an empty state. */
+  value: number | string | null | undefined;
+  /** ISO 4217 currency code (default: `'USD'`). */
+  currency?: string;
+  /**
+   * BCP 47 locale used for number formatting (default: `'en-US'`).
+   * Controls digit grouping and decimal separators.
+   */
+  locale?: string;
+  /** How to display the currency symbol — `'symbol'` (default), `'code'`, or `'name'`. */
+  display?: 'symbol' | 'code' | 'name';
+  /** Font-size variant (default: `'md'`). */
+  size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+  /** When `true`, applies a green tint for positive and red tint for negative values. */
+  colorize?: boolean;
+};
+/**
+ * Formats a numeric value as a locale-aware currency string in a table cell.
+ * Always shows exactly two decimal places and uses the browser's `Intl` API for
+ * symbol placement.  Renders {@link UITableEmpty} when the value is absent or
+ * invalid.
+ *
+ * @example
+ * import { UITableCurrencyDisplay } from '@customafk/lunas-ui/features/tables';
+ *
+ * <UITableCurrencyDisplay value={1234.5} currency="USD" colorize />
+ */
+declare const UITableCurrencyDisplay: react286.MemoExoticComponent<({
+  value,
+  currency,
+  locale,
+  display,
+  size,
+  colorize
+}: Props$7) => react_jsx_runtime346.JSX.Element>;
+//#endregion
 //#region packages/components/features/tables/components/atoms/date-display.d.ts
 /** Props for the {@link UITableDateDisplay} component. */
-type Props$2 = {
+type Props$6 = {
   /** The date value to format and display; `null`/`undefined` renders an empty state. */
   date: Date | string | number | null | undefined;
 };
@@ -62,7 +101,7 @@ type Props$2 = {
  *
  * <UITableDateDisplay date={new Date('2024-06-15T10:30:00Z')} />
  */
-declare const UITableDateDisplay: React.FC<Props$2>;
+declare const UITableDateDisplay: React.FC<Props$6>;
 //#endregion
 //#region packages/components/features/tables/components/atoms/description-display.d.ts
 /**
@@ -80,6 +119,51 @@ declare const UITableDescriptionDisplay: React.FC<{
   content: string | null | undefined | number;
 }>;
 //#endregion
+//#region packages/components/features/tables/components/atoms/email-display.d.ts
+/** Props for the {@link UITableEmailDisplay} component. */
+type Props$5 = {
+  /** The email address to display; `null`/`undefined`/empty renders an empty state. */
+  email: string | null | undefined;
+  /** When `true`, a `mailto:` anchor wraps the address (default: `true`). */
+  linkable?: boolean;
+};
+/**
+ * Displays an email address in a table cell with a copy-to-clipboard button.
+ * Shows a brief checkmark confirmation after copying.  Optionally wraps the
+ * address in a `mailto:` link.  Renders {@link UITableEmpty} when `email` is
+ * absent.
+ *
+ * @example
+ * import { UITableEmailDisplay } from '@customafk/lunas-ui/features/tables';
+ *
+ * <UITableEmailDisplay email="jane@example.com" />
+ */
+declare const UITableEmailDisplay: React.FC<Props$5>;
+//#endregion
+//#region packages/components/features/tables/components/atoms/list-display.d.ts
+/** Props for the {@link UITableListDisplay} component. */
+type Props$4 = {
+  /** Array of strings or numbers to render as inline pills. */
+  items: (string | number)[] | null | undefined;
+  /**
+   * Maximum number of pills shown before a `+N more` overflow badge appears
+   * (default: `3`).
+   */
+  maxVisible?: number;
+};
+/**
+ * Renders an array of values as compact inline pills in a table cell.  When the
+ * list exceeds `maxVisible`, a `+N more` badge is shown; hovering it reveals all
+ * remaining items in a tooltip.  Renders {@link UITableEmpty} for empty or absent
+ * arrays.
+ *
+ * @example
+ * import { UITableListDisplay } from '@customafk/lunas-ui/features/tables';
+ *
+ * <UITableListDisplay items={['React', 'TypeScript', 'TailwindCSS', 'Vite']} maxVisible={3} />
+ */
+declare const UITableListDisplay: React.FC<Props$4>;
+//#endregion
 //#region packages/components/features/tables/components/atoms/more-button.d.ts
 /**
  * A vertical-ellipsis icon button that opens a dropdown menu populated from the
@@ -161,6 +245,41 @@ declare const UITablePhoneNumberDisplay: React.FC<React.PropsWithChildren<{
   value: string;
 }>>;
 //#endregion
+//#region packages/components/features/tables/components/atoms/progress-display.d.ts
+/** Props for the {@link UITableProgressDisplay} component. */
+type Props$3 = {
+  /** Percentage value between 0 and 100; `null`/`undefined` renders an empty state. */
+  value: number | null | undefined;
+  /** When `true`, shows the numeric percentage next to the bar (default: `true`). */
+  showLabel?: boolean;
+  /**
+   * Color thresholds applied to the progress indicator.
+   * - `≥ successThreshold` → green
+   * - `≥ warningThreshold` → yellow
+   * - otherwise → red
+   *
+   * Defaults: `successThreshold = 70`, `warningThreshold = 40`.
+   */
+  successThreshold?: number;
+  warningThreshold?: number;
+};
+/**
+ * Renders a horizontal progress bar with an optional percentage label for a
+ * table cell.  The bar color shifts from red → yellow → green based on
+ * configurable thresholds.  Renders {@link UITableEmpty} when `value` is absent.
+ *
+ * @example
+ * import { UITableProgressDisplay } from '@customafk/lunas-ui/features/tables';
+ *
+ * <UITableProgressDisplay value={75} />
+ */
+declare const UITableProgressDisplay: react286.MemoExoticComponent<({
+  value,
+  showLabel,
+  successThreshold,
+  warningThreshold
+}: Props$3) => react_jsx_runtime346.JSX.Element>;
+//#endregion
 //#region packages/components/features/tables/components/atoms/remove-button.d.ts
 /**
  * A ghost danger icon button with a trash icon that triggers an async removal
@@ -183,7 +302,7 @@ declare const UITableRemoveButton: React.FC<{
 //#endregion
 //#region packages/components/features/tables/components/atoms/statistic.d.ts
 /** Props for the {@link UITableStatisticDisplay} component. */
-type Props$1 = {
+type Props$2 = {
   /** Character used to separate the integer and fractional parts (default: `'.'`). */
   decimalSeparator?: string;
   /** Character used to separate thousands groups (default: `','`). */
@@ -213,7 +332,7 @@ type Props$1 = {
  *
  * <UITableStatisticDisplay value={1234567.89} precision={2} prefix="$" size="md" />
  */
-declare const UITableStatisticDisplay: react273.MemoExoticComponent<({
+declare const UITableStatisticDisplay: react286.MemoExoticComponent<({
   decimalSeparator,
   groupSeparator,
   prefix: Prefix,
@@ -223,7 +342,38 @@ declare const UITableStatisticDisplay: react273.MemoExoticComponent<({
   showTrailingZeros,
   size,
   value
-}: Props$1) => react_jsx_runtime332.JSX.Element>;
+}: Props$2) => react_jsx_runtime346.JSX.Element>;
+//#endregion
+//#region packages/components/features/tables/components/atoms/status-display.d.ts
+type BadgeColor = 'primary' | 'secondary' | 'muted' | 'accent' | 'info' | 'success' | 'warning' | 'danger';
+/** Props for the {@link UITableStatusDisplay} component. */
+type Props$1 = {
+  /** The status string to display; `null`/`undefined` renders an empty state. */
+  value: string | null | undefined;
+  /**
+   * Maps each status string to a badge color.  Any key not present in the map
+   * falls back to `defaultColor`.
+   */
+  colorMap?: Record<string, BadgeColor>;
+  /** Color used when `value` is not found in `colorMap` (default: `'muted'`). */
+  defaultColor?: BadgeColor;
+  /** Badge variant forwarded to the underlying {@link Badge} (default: `'soft'`). */
+  variant?: 'solid' | 'soft' | 'outline';
+};
+/**
+ * Renders a color-coded status badge for a table cell.  The mapping from status
+ * string to badge color is fully configurable via `colorMap`; unknown statuses
+ * fall back to `defaultColor`.
+ *
+ * @example
+ * import { UITableStatusDisplay } from '@customafk/lunas-ui/features/tables';
+ *
+ * <UITableStatusDisplay
+ *   value="active"
+ *   colorMap={{ active: 'success', inactive: 'danger', pending: 'warning' }}
+ * />
+ */
+declare const UITableStatusDisplay: React.FC<Props$1>;
 //#endregion
 //#region packages/components/features/tables/components/atoms/user.d.ts
 /** Props for the {@link UITableUserDataDisplay} component. */
@@ -419,6 +569,13 @@ type TUITableColumn<TData extends RowData<TData>> = Pick<AccessorKeyColumnDef<TD
     fitContent?: boolean;
   };
 };
+/** A single cell in a CSV export row. */
+type CsvCell = {
+  /** Column header label for this cell. */
+  label: string;
+  /** Cell value — numbers render right-aligned in spreadsheet editors. */
+  value: string | number | boolean | null | undefined;
+};
 /**
  * Value shape of the root `TableContext` consumed by toolbar and body
  * components via `useUITableContext`.
@@ -438,6 +595,10 @@ type TTableContext<TData extends RowData<TData>> = {
   totalRows?: number;
   /** Callback that loads the next page; forwarded to `UITableLoadMore`. */
   fetchMoreData?: () => void | Promise<void>;
+  /** CSV export rows; each row is an ordered array of `{ label, value }` cells. */
+  csvData?: CsvCell[][];
+  /** File name (without `.csv`) for the downloaded file. Defaults to the table title. */
+  csvFileName?: string;
 };
 /** Context value provided by `UITableInnerWrapperProvider`. */
 type TTableInnerWrapperContext = {
@@ -550,6 +711,10 @@ type TableProviderProps<TData extends RowData<TData>, TKey extends keyof TData =
   onRowSelection?: (rowSelection: RowSelectionState) => void;
   /** Called with the updated column-pinning state after each pin/unpin action. */
   onColumnPinning?: (columnPinning: ColumnPinningState) => void;
+  /** CSV export rows; each row is an ordered array of `{ label, value }` cells. */
+  csvData?: CsvCell[][];
+  /** File name (without `.csv`) for the downloaded file. Defaults to the table title. */
+  csvFileName?: string;
 };
 //#endregion
 //#region packages/components/features/tables/components/common.d.ts
@@ -572,7 +737,7 @@ type TableProviderProps<TData extends RowData<TData>, TKey extends keyof TData =
  * />
  * ```
  */
-declare const UITableHeadCellOption: react273.NamedExoticComponent<TUITableHeadCellOption>;
+declare const UITableHeadCellOption: react286.NamedExoticComponent<TUITableHeadCellOption>;
 /**
  * Sticky `<th>` cell that renders a "select all rows" checkbox in the leftmost
  * header position.
@@ -591,7 +756,7 @@ declare const UITableHeadCellOption: react273.NamedExoticComponent<TUITableHeadC
  * />
  * ```
  */
-declare const UITableHeadCellSelect: react273.NamedExoticComponent<TUITableHeadCellSelect>;
+declare const UITableHeadCellSelect: react286.NamedExoticComponent<TUITableHeadCellSelect>;
 /**
  * Overlay displayed in place of table rows when the table is loading data or
  * when the dataset is empty after a successful fetch.
@@ -606,7 +771,7 @@ declare const UITableHeadCellSelect: react273.NamedExoticComponent<TUITableHeadC
  * <UITableEmptyDisplay isFetching={isLoading} isEmpty={data.length === 0} />
  * ```
  */
-declare const UITableEmptyDisplay: react273.NamedExoticComponent<TUITableEmptyDisplay>;
+declare const UITableEmptyDisplay: react286.NamedExoticComponent<TUITableEmptyDisplay>;
 /**
  * Outermost layout container for the entire UITable composition.
  *
@@ -622,7 +787,7 @@ declare const UITableEmptyDisplay: react273.NamedExoticComponent<TUITableEmptyDi
  * </UITableWrapper>
  * ```
  */
-declare const UITableWrapper: react273.NamedExoticComponent<TUITableWrapper>;
+declare const UITableWrapper: react286.NamedExoticComponent<TUITableWrapper>;
 /**
  * Scrollable `<div>` that wraps the `<table>` element and acts as the
  * viewport for both horizontal and vertical virtual scrolling.
@@ -640,7 +805,7 @@ declare const UITableWrapper: react273.NamedExoticComponent<TUITableWrapper>;
  * </UITableInnerWrapper>
  * ```
  */
-declare const UITableInnerWrapper: react273.NamedExoticComponent<TUITableInnerWrapper>;
+declare const UITableInnerWrapper: react286.NamedExoticComponent<TUITableInnerWrapper>;
 /**
  * The actual `<table>` element that drives the UITable layout.
  *
@@ -660,7 +825,7 @@ declare const UITableInnerWrapper: react273.NamedExoticComponent<TUITableInnerWr
  * </UITableInnerTable>
  * ```
  */
-declare const UITableInnerTable: react273.NamedExoticComponent<TUITableInnerTable>;
+declare const UITableInnerTable: react286.NamedExoticComponent<TUITableInnerTable>;
 /**
  * Sticky `<thead>` element that stays fixed at the top of the scrollable
  * table area while the body scrolls beneath it.
@@ -679,7 +844,7 @@ declare const UITableInnerTable: react273.NamedExoticComponent<TUITableInnerTabl
  * </UITableHead>
  * ```
  */
-declare const UITableHead: react273.NamedExoticComponent<TUITableHead>;
+declare const UITableHead: react286.NamedExoticComponent<TUITableHead>;
 /**
  * Renders a single `<tr>` for a TanStack `HeaderGroup`, mapping each header
  * to either `UITableHeadCellSelect` (for the `select` column) or
@@ -697,7 +862,7 @@ declare const UITableHead: react273.NamedExoticComponent<TUITableHead>;
  * ))}
  * ```
  */
-declare const UITableHeadRow: react273.NamedExoticComponent<TUITableHeadRow>;
+declare const UITableHeadRow: react286.NamedExoticComponent<TUITableHeadRow>;
 /**
  * Individual `<th>` cell that supports left/right sticky pinning, dynamic
  * CSS-variable-driven width, min/max size constraints, and an optional
@@ -721,7 +886,7 @@ declare const UITableHeadRow: react273.NamedExoticComponent<TUITableHeadRow>;
  * </UITableHeadCell>
  * ```
  */
-declare const UITableHeadCell: react273.NamedExoticComponent<TUITableHeadCell>;
+declare const UITableHeadCell: react286.NamedExoticComponent<TUITableHeadCell>;
 /**
  * `<tbody>` element that acts as the virtual-scroll container.
  *
@@ -741,7 +906,7 @@ declare const UITableHeadCell: react273.NamedExoticComponent<TUITableHeadCell>;
  * </UITableBody>
  * ```
  */
-declare const UITableBody: react273.NamedExoticComponent<TUITableBody>;
+declare const UITableBody: react286.NamedExoticComponent<TUITableBody>;
 /**
  * Virtualised `<tr>` that renders a single data row by translating itself to
  * the correct vertical position via a CSS `transform`.
@@ -769,7 +934,7 @@ declare const UITableBody: react273.NamedExoticComponent<TUITableBody>;
  * })}
  * ```
  */
-declare const UITableRow: react273.NamedExoticComponent<TUITableRow>;
+declare const UITableRow: react286.NamedExoticComponent<TUITableRow>;
 /**
  * Sticky `<td>` cell in the leftmost column that renders a per-row selection
  * checkbox.
@@ -788,7 +953,7 @@ declare const UITableRow: react273.NamedExoticComponent<TUITableRow>;
  * />
  * ```
  */
-declare const UITableCellSelect: react273.NamedExoticComponent<TUITableCellSelect>;
+declare const UITableCellSelect: react286.NamedExoticComponent<TUITableCellSelect>;
 /**
  * Sticky `<td>` cell pinned to the right edge of each row that renders the
  * column's custom `cell` renderer (typically a row-action menu).
@@ -807,7 +972,7 @@ declare const UITableCellSelect: react273.NamedExoticComponent<TUITableCellSelec
  * />
  * ```
  */
-declare const UITableCellActions: react273.NamedExoticComponent<TUITableCellActions>;
+declare const UITableCellActions: react286.NamedExoticComponent<TUITableCellActions>;
 /**
  * Standard `<td>` data cell with support for left/right sticky pinning,
  * CSS-variable-driven width, content-fit auto-sizing, and configurable
@@ -831,7 +996,7 @@ declare const UITableCellActions: react273.NamedExoticComponent<TUITableCellActi
  * />
  * ```
  */
-declare const UITableCell: react273.NamedExoticComponent<TUITableCell>;
+declare const UITableCell: react286.NamedExoticComponent<TUITableCell>;
 /**
  * `<tfoot>` element rendered below the table body, typically used for
  * summary rows or pagination controls.
@@ -845,7 +1010,7 @@ declare const UITableCell: react273.NamedExoticComponent<TUITableCell>;
  * </UITableFooter>
  * ```
  */
-declare const UITableFooter: react273.NamedExoticComponent<TUITableFooter>;
+declare const UITableFooter: react286.NamedExoticComponent<TUITableFooter>;
 /**
  * Virtualised `<tr>` appended after the last data row that renders a
  * "Load More" / "Loading…" / "Error! Retry?" button.
@@ -865,7 +1030,7 @@ declare const UITableFooter: react273.NamedExoticComponent<TUITableFooter>;
  * />
  * ```
  */
-declare const UITableLoadMore: react273.NamedExoticComponent<TUITableLoadMore>;
+declare const UITableLoadMore: react286.NamedExoticComponent<TUITableLoadMore>;
 //#endregion
 //#region packages/components/features/tables/components/table.d.ts
 declare const UITableContainer: React.FC<React.PropsWithChildren>;
@@ -893,7 +1058,7 @@ declare const UITableContainer: React.FC<React.PropsWithChildren>;
  * </ResizablePanelGroup>
  * ```
  */
-declare const UITableFilter: () => react_jsx_runtime332.JSX.Element;
+declare const UITableFilter: () => react_jsx_runtime346.JSX.Element;
 //#endregion
 //#region packages/components/features/tables/components/table/provider.d.ts
 /**
@@ -942,8 +1107,10 @@ declare const UITableProvider: <TData extends RowData<TData> = RowData<AnyEntity
   onRowSelection,
   onColumnPinning,
   fetchMoreData,
+  csvData,
+  csvFileName,
   children
-}: React.PropsWithChildren<TableProviderProps<TData, TKey, TColumns>>) => react_jsx_runtime332.JSX.Element;
+}: React.PropsWithChildren<TableProviderProps<TData, TKey, TColumns>>) => react_jsx_runtime346.JSX.Element;
 //#endregion
 //#region packages/components/features/tables/components/table/tooltip.d.ts
 /**
@@ -1010,5 +1177,5 @@ declare const UITableTooltipActions: React.FC<{
  */
 declare const UITableTooltip: React.FC<React.PropsWithChildren>;
 //#endregion
-export { RowData, TTableBodyContext, TTableContext, TTableHeadRowContext, TTableInnerTableContext, TTableInnerWrapperContext, TTableRowContext, TTableVirtualizerContext, TUITableBody, TUITableCell, TUITableCellActions, TUITableCellSelect, TUITableColumn, TUITableEmptyDisplay, TUITableFooter, TUITableHead, TUITableHeadCell, TUITableHeadCellOption, TUITableHeadCellSelect, TUITableHeadRow, TUITableInnerTable, TUITableInnerWrapper, TUITableLoadMore, TUITableRow, TUITableWrapper, TableProviderProps, UITableBadgeDisplay, UITableBody, UITableBooleanDisplay, UITableCell, UITableCellActions, UITableCellSelect, UITableContainer, UITableDateDisplay, UITableDescriptionDisplay, UITableEmptyDisplay, UITableFilter, UITableFooter, UITableHead, UITableHeadCell, UITableHeadCellOption, UITableHeadCellSelect, UITableHeadRow, UITableInnerTable, UITableInnerWrapper, UITableLoadMore, UITableMoreButton, UITableNameDisplay, UITablePermalink, UITablePhoneNumberDisplay, UITableProvider, UITableRemoveButton, UITableRow, UITableStatisticDisplay, UITableTooltip, UITableTooltipActions, UITableTooltipFilter, UITableUserDataDisplay, UITableWrapper };
+export { CsvCell, RowData, TTableBodyContext, TTableContext, TTableHeadRowContext, TTableInnerTableContext, TTableInnerWrapperContext, TTableRowContext, TTableVirtualizerContext, TUITableBody, TUITableCell, TUITableCellActions, TUITableCellSelect, TUITableColumn, TUITableEmptyDisplay, TUITableFooter, TUITableHead, TUITableHeadCell, TUITableHeadCellOption, TUITableHeadCellSelect, TUITableHeadRow, TUITableInnerTable, TUITableInnerWrapper, TUITableLoadMore, TUITableRow, TUITableWrapper, TableProviderProps, UITableBadgeDisplay, UITableBody, UITableBooleanDisplay, UITableCell, UITableCellActions, UITableCellSelect, UITableContainer, UITableCurrencyDisplay, UITableDateDisplay, UITableDescriptionDisplay, UITableEmailDisplay, UITableEmptyDisplay, UITableFilter, UITableFooter, UITableHead, UITableHeadCell, UITableHeadCellOption, UITableHeadCellSelect, UITableHeadRow, UITableInnerTable, UITableInnerWrapper, UITableListDisplay, UITableLoadMore, UITableMoreButton, UITableNameDisplay, UITablePermalink, UITablePhoneNumberDisplay, UITableProgressDisplay, UITableProvider, UITableRemoveButton, UITableRow, UITableStatisticDisplay, UITableStatusDisplay, UITableTooltip, UITableTooltipActions, UITableTooltipFilter, UITableUserDataDisplay, UITableWrapper };
 //# sourceMappingURL=index.d.cts.map