@opencxh/ui-kit 3.137.9 → 3.137.10

package/dist/src/content/SettingsPage.d.ts

@@ -1,4 +1,5 @@
 import { default as React, ReactNode } from 'react';
+import { ContentLoadingShape } from '../feedback/ContentLoading';
 import { PageHeaderAction } from './PageHeader';
 /**
  * What a panel adds to the frame it is rendered in: the record it drilled into,
@@ -57,6 +58,12 @@ export interface SettingsPageProps {
     title?: string;
     /** Swaps the body for a skeleton while keeping the footer in place. */
     loading?: boolean;
+    /**
+     * What the body is about to render. A settings panel is nearly always a form
+     * or a table, and saying which keeps the placeholder from announcing a
+     * heading and two paragraphs that never arrive.
+     */
+    loadingShape?: ContentLoadingShape;
     padding?: keyof typeof paddingClasses;
     className?: string;
     contentClassName?: string;

package/dist/src/content/tableColumns.d.ts

@@ -0,0 +1,67 @@
+import { BadgeProps } from '../feedback/Badge';
+import { TableColumn } from './Table';
+/**
+ * Column builders for the three things table configs kept getting wrong, each
+ * in the same way across apps: a state rendered as prose, a stored code shown
+ * raw, and an id shown instead of the name it points at.
+ *
+ * They all keep the *label* in `accessor` and render only the decoration in
+ * `cell`, because `Table` searches and sorts on the accessor value. Putting the
+ * readable text there means a search for "Active" or for a team's name matches
+ * what the row actually shows — which is exactly what a raw `enabled` boolean
+ * or a bare `teamId` used to break.
+ */
+export interface BadgeColumnConfig<T, V = unknown> {
+    id: string;
+    header: string;
+    accessor: (row: T) => V;
+    /** The text in the badge — and the text this column is searched on. */
+    label: (value: V, row: T) => string;
+    /** Defaults to `default`; give states their own tone (success/error/…). */
+    tone?: (value: V, row: T) => BadgeProps["variant"];
+    /** Return false to render nothing at all for this row. */
+    visible?: (value: V, row: T) => boolean;
+    width?: string | number;
+    sortable?: boolean;
+    align?: TableColumn<T>["align"];
+}
+/** A value that is a state rather than prose — render it as a pill. */
+export declare function badgeColumn<T, V = unknown>(config: BadgeColumnConfig<T, V>): TableColumn<T>;
+export interface BooleanBadgeColumnConfig<T> {
+    id: string;
+    header: string;
+    accessor: (row: T) => boolean | undefined;
+    onLabel: string;
+    offLabel: string;
+    /** Defaults to success/secondary — on reads as healthy, off as merely quiet. */
+    onTone?: BadgeProps["variant"];
+    offTone?: BadgeProps["variant"];
+    width?: string | number;
+    sortable?: boolean;
+}
+/** The on/off case of `badgeColumn`, which is most of them. */
+export declare function booleanBadgeColumn<T>(config: BooleanBadgeColumnConfig<T>): TableColumn<T>;
+export interface LabelsColumnConfig<T> {
+    id: string;
+    header: string;
+    /** One code, a list of them, or nothing. */
+    accessor: (row: T) => string | string[] | undefined | null;
+    /**
+     * Code to readable text. Return `undefined` to fall back to the code itself,
+     * so an unknown value still shows something instead of vanishing.
+     */
+    label: (code: string) => string | undefined;
+    /** Shown when there is nothing at all. Defaults to an em dash. */
+    empty?: string;
+    separator?: string;
+    width?: string | number;
+    searchable?: boolean;
+    sortable?: boolean;
+}
+/**
+ * Stored codes rendered as the words the user picked them by. Covers both
+ * localising an enum (`interactions:created` → "Interaction created") and
+ * resolving a foreign key (a `teamId` → that team's name — pass a lookup as
+ * `label`), because from the table's side those are the same problem.
+ */
+export declare function labelsColumn<T>(config: LabelsColumnConfig<T>): TableColumn<T>;

package/dist/src/feedback/Badge.d.ts

@@ -1,5 +1,11 @@
 import { default as React } from 'react';
-export interface BadgeProps extends React.HTMLAttributes<HTMLSpanElement> {
+/**
+ * `color` is deliberately omitted from the inherited HTML attributes. It is a
+ * legacy HTML attribute, so `<Badge color="success">` used to type-check while
+ * doing nothing at all — the badge silently rendered as `default`. Omitting it
+ * turns that mistake into a compile error pointing at `variant`.
+ */
+export interface BadgeProps extends Omit<React.HTMLAttributes<HTMLSpanElement>, 'color'> {
     /**
      * The visual variant of the badge
      */

package/dist/src/feedback/ContentLoading.d.ts

@@ -1,4 +1,11 @@
 import { ReactNode } from 'react';
+/**
+ * What is about to appear here. A placeholder only does its job if it has the
+ * geometry of the thing it stands in for: the default `text` shape under a form
+ * or a list announces a heading and two paragraphs, and the real content then
+ * shoves everything sideways when it lands.
+ */
+export type ContentLoadingShape = "text" | "table" | "list" | "form" | "menu" | "cards";
 export interface ContentLoadingProps {
     /**
      * `page` (default) fills the route with its own `<main>` shell and padding.
@@ -6,21 +13,22 @@ export interface ContentLoadingProps {
      * card or scroll container without nesting a second `<main>` landmark.
      */
     variant?: "page" | "inline";
+    /** The shape of what is coming. Defaults to `text`. */
+    shape?: ContentLoadingShape;
+    /** Rows/items/fields/cards to draw, depending on `shape`. */
+    rows?: number;
+    /** Columns, for `table` and `cards`. */
+    columns?: number;
     /**
      * Optional custom skeleton content (overrides default)
      */
     children?: ReactNode;
-    /**
-     * If true, renders a table-style skeleton
-     */
+    className?: string;
+    /** @deprecated Pass `shape="table"`. */
     showTableSkeleton?: boolean;
-    /**
-     * Number of table columns (default: 6)
-     */
+    /** @deprecated Pass `columns`. */
     tableColumns?: number;
-    /**
-     * Number of table rows (default: 8)
-     */
+    /** @deprecated Pass `rows`. */
     tableRows?: number;
 }
-export declare function ContentLoading({ variant, children, showTableSkeleton, tableColumns, tableRows, }: ContentLoadingProps): import("react").JSX.Element;
+export declare function ContentLoading({ variant, shape, rows, columns, children, className, showTableSkeleton, tableColumns, tableRows, }: ContentLoadingProps): import("react").JSX.Element;

package/dist/src/index.d.ts

@@ -25,7 +25,7 @@ export { ConfirmDialog, type ConfirmDialogProps } from './overlays/ConfirmDialog
 export { Modal, type ModalProps } from './overlays/Modal';
 export { Popover, type PopoverProps } from './overlays/Popover';
 export { Badge, type BadgeProps } from './feedback/Badge';
-export { ContentLoading } from './feedback/ContentLoading';
+export { ContentLoading, type ContentLoadingProps, type ContentLoadingShape } from './feedback/ContentLoading';
 export { EmptyState, type EmptyStateProps } from './feedback/EmptyState';
 export { Kbd, type KbdProps } from './feedback/Kbd';
 export { ProgressBar, type ProgressBarProps } from './feedback/ProgressBar';
@@ -50,6 +50,7 @@ export { SettingsFrameProvider, SettingsPage, useSettingsFrame, useSettingsFrame
 export { SettingsRow, SettingsSection, type SettingsRowProps, type SettingsSectionProps } from './content/SettingsRow';
 export { SourceChip, type SourceChipProps } from './content/SourceChip';
 export { Table, dateFilterHandler, selectFilterHandler, type TableAction, type TableColumn, type TableFilter, type TableProps } from './content/Table';
+export { badgeColumn, booleanBadgeColumn, labelsColumn, type BadgeColumnConfig, type BooleanBadgeColumnConfig, type LabelsColumnConfig } from './content/tableColumns';
 export { View, type ViewGroup, type ViewProps } from './content/View';
 export { SidebarMenu, type MenuItem, type MenuItemAction } from './navigation/Sidebar';
 export { TabBar, Tabs, type TabItem, type TabsProps } from './navigation/Tabs';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@opencxh/ui-kit",
-  "version": "3.137.9",
+  "version": "3.137.10",
   "description": "Theme-aware UI component library for OpenCXH platform",
   "type": "module",
   "exports": {