@opencxh/ui-kit 3.137.9 → 3.137.11

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

@@ -3,13 +3,18 @@ import { default as React } from 'react';
  * Plate colour. `default` is the neutral disc used everywhere a monogram is just
  * an identity marker.
  *
+ * `identity` derives the colour from `name`, so the same person or team is the
+ * same colour on every surface — see {@link identityPlateClass}. Use it in a
+ * list of many people; use `default` where there is only one plate on screen
+ * and colour would carry no information.
+ *
  * The other three are for a message thread, where the plate answers "which side
  * is this from" before you read a word: `in` is the other party, `out` is us
  * (ink, so it reads as ours in both themes) and `note` is an internal remark.
  * Each is a fill with its own foreground — a fill cannot borrow a colour from
  * the ramp, because the ramp does not change between light and dark.
  */
-export type AvatarTone = "default" | "in" | "out" | "note";
+export type AvatarTone = "default" | "identity" | "in" | "out" | "note";
 export interface AvatarProps {
     /** Full name; used for the initials fallback and alt/title text */
     name?: string;

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

@@ -2,7 +2,12 @@ import { default as React } from 'react';
 /** Communication channel keys the redesign colour-codes. */
 export type ChannelKey = "mail" | "wa" | "chat" | "tel" | "note";
 export interface ChannelBadgeProps {
-    /** Channel — drives the colour. Unknown/undefined falls back to the neutral "note" tone. */
+    /**
+     * Channel — drives the colour. A known key uses that channel's tokens; any
+     * other string (a provider that brought its own channel along) gets a stable
+     * colour derived from the string itself, so ten custom channels stay ten
+     * distinguishable colours instead of ten identical grey tiles.
+     */
     channel?: ChannelKey | string;
     /** Glyph or short label inside the tile (e.g. an icon, or an initial). */
     children?: React.ReactNode;

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

@@ -1,4 +1,13 @@
 import { default as React } from 'react';
+/**
+ * Lucide icon by name, for icons that arrive as data rather than as an import —
+ * a provider declaring `icon: "MessageCircle"` in its description, a menu entry
+ * from a manifest. Accepts kebab-case, snake_case, spaced or PascalCase.
+ *
+ * Returns `undefined` for an unknown name so the caller can fall back; an app
+ * naming an icon that does not exist should not blank out the surface.
+ */
+export declare function resolveLucideIcon(name: string | undefined): React.ComponentType<any> | undefined;
 export interface IconProps {
     /** Icon component from lucide-react or custom icon */
     icon: React.ComponentType<any>;

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/forms/Form.d.ts

@@ -65,7 +65,11 @@ export interface FormGroupItem<T = any> {
      * back while editing (a system prompt).
      */
     rows?: number;
-    /** Autocomplete attribute */
+    /**
+     * Autocomplete token. Only real HTML tokens (`email`, `tel`, `name`, …) are
+     * passed to the browser; anything else switches autofill *off* rather than
+     * silently meaning "on" — see {@link autofillProps}.
+     */
     autocomplete?: string;
     /** Options for select/radio/checkbox types */
     options?: Array<{

package/dist/src/forms/autofill.d.ts

@@ -0,0 +1,30 @@
+/**
+ * Keeping password managers out of fields that are not credentials.
+ *
+ * The problem was not that autofill was switched on — it was that most fields
+ * asked for it by accident. A form field passed things like `"sip-password"`,
+ * `"api-key"`, `"record-pin"` or `"system-prompt"` as its autocomplete value.
+ * None of those are autocomplete tokens, and the HTML spec says an unrecognised
+ * token behaves as `on`. So the fields most likely to be mistaken for a login
+ * were the ones most loudly inviting Bitwarden, LastPass and Dashlane to fill
+ * them in — and to offer to save them.
+ *
+ * `autocomplete="off"` alone does not settle it: the major managers ignore it on
+ * purpose, because sites used to abuse it. Each honours its own opt-out
+ * attribute instead, so a field that means it has to say so in four dialects.
+ */
+export interface AutofillProps {
+    autoComplete: string;
+    "data-1p-ignore"?: string;
+    "data-lpignore"?: string;
+    "data-bwignore"?: string;
+    "data-form-type"?: string;
+}
+/**
+ * Props that switch a field's autofill behaviour on or off deliberately.
+ *
+ * Pass the field's declared autocomplete value; a genuine token is honoured, and
+ * anything else — including nothing at all — turns autofill off and tells each
+ * manager so in the attribute it listens to.
+ */
+export declare function autofillProps(token?: string): AutofillProps;

package/dist/src/index.d.ts

@@ -1,4 +1,6 @@
 export { cn, createSizes, createVariants } from './utils/cn';
+export { useAnchoredPosition, type AnchoredPositionOptions } from './utils/useAnchoredPosition';
+export { IDENTITY_TONE_COUNT, identityDotClass, identityPlateClass, identityTone, type IdentityTone } from './utils/identity';
 export { catTone, type CatTone } from './utils/catTone';
 export { MeetingGrid, type MeetingGridProps } from './meeting/MeetingGrid';
 export { ParticipantTile, type ParticipantTileProps } from './meeting/ParticipantTile';
@@ -20,12 +22,13 @@ export { StorageInput, type StorageInputProps } from './input/StorageInput';
 export { TextArea, type TextAreaProps } from './input/TextArea';
 export { TextField, type TextFieldProps } from './input/TextField';
 export { Form, FormSection, type FormButtonProps, type FormFieldType, type FormGroup, type FormGroupItem, type FormProps } from './forms/Form';
+export { autofillProps, type AutofillProps } from './forms/autofill';
 export { Dropdown, type DropdownOption, type DropdownProps } from './overlays/Dropdown';
 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';
@@ -36,7 +39,7 @@ export { AssistantCard, type AssistantCardProps } from './content/AssistantCard'
 export { Avatar, type AvatarProps, type AvatarTone } from './content/Avatar';
 export { AvatarStack, type AvatarStackPerson, type AvatarStackProps } from './content/AvatarStack';
 export { ChannelBadge, type ChannelBadgeProps, type ChannelKey } from './content/ChannelBadge';
-export { Icon, type IconProps } from './content/Icon';
+export { Icon, resolveLucideIcon, type IconProps } from './content/Icon';
 export { Image, type ImageProps } from './content/Image';
 export { List, ListBulkAction, type ListGroup, type ListProps } from './content/List';
 export { MessageBubble, type MessageBubbleProps } from './content/MessageBubble';
@@ -50,6 +53,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/dist/src/utils/identity.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Deterministic colour for a thing that has a name but no status.
+ *
+ * The rule this exists to enforce: the same name gets the same colour
+ * everywhere in the product. Every surface that used to pick a plate colour did
+ * it locally — an index in a list, a hash of its own, or a fixed neutral — so
+ * one person could be blue in the inbox and grey on a task, and the colour
+ * carried no information at all.
+ *
+ * The palette is the `--color-cat-*` categorical set, which the design system
+ * defines for exactly this: equal chroma and lightness, so no entry outranks
+ * another, and dark mode is handled by the tokens rather than here.
+ */
+/** How many `--color-cat-N` entries the design system defines. */
+export declare const IDENTITY_TONE_COUNT = 5;
+export type IdentityTone = 1 | 2 | 3 | 4 | 5;
+/**
+ * Normalised so that the same identity written differently still lands on the
+ * same colour: casing and surrounding whitespace never distinguish two names.
+ */
+export declare function identityTone(seed: string | undefined | null): IdentityTone;
+/** Wash + readable mark, for a plate that holds a monogram or a glyph. */
+export declare function identityPlateClass(seed: string | undefined | null): string;
+/** The solid colour, for a dot or a rule. */
+export declare function identityDotClass(seed: string | undefined | null): string;

package/package.json

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