@opencxh/ui-kit 3.137.10 → 3.137.12

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

@@ -0,0 +1,85 @@
+import { default as React, ReactNode } from 'react';
+import { ContentLoadingShape } from '../feedback/ContentLoading';
+import { PageHeaderAction } from './PageHeader';
+/**
+ * The `md` gutter matches `PageHeader`'s own horizontal padding, so the table
+ * or form below lines up with the title above it. The top value is small
+ * because the header already supplies most of that gap (`pt-4 pb-2.5`).
+ */
+declare const paddingClasses: {
+    readonly none: "";
+    readonly sm: "px-3 pb-3 pt-1";
+    readonly md: "px-5 pb-5 pt-1.5";
+};
+export interface PageProps {
+    /** Page title, rendered by `PageHeader`. */
+    title: string;
+    /** Short description beside the title. */
+    subtitle?: string;
+    /** Line under the title — a count, a record, a timestamp. */
+    meta?: ReactNode;
+    /** Toolbar actions, right-aligned in the header. */
+    actions?: PageHeaderAction[];
+    /** Renders the back chevron beside the title. */
+    onBack?: () => void;
+    /**
+     * Draws the rule under the header. Defaults to `scroll`, because a header
+     * that stays put while the body scrolls needs an edge — without it the first
+     * row slides up against the title with nothing between them. A page that
+     * scrolls as a whole does not, so the rule would just be a stray line.
+     */
+    surface?: boolean;
+    /** Full-width row at the bottom of the header — a filter strip, a tab bar. */
+    headerContent?: ReactNode;
+    /** Swaps the body for a skeleton. */
+    loading?: boolean;
+    /**
+     * What the body is about to render, so the placeholder has the right shape.
+     * Most app pages are a table; a detail page is usually a form.
+     */
+    loadingShape?: ContentLoadingShape;
+    /**
+     * Rendered instead of `children` when there is nothing to show — pass an
+     * `EmptyState`. Ignored while `loading`, so an empty list does not flash its
+     * "nothing here" message during the first fetch.
+     */
+    empty?: ReactNode;
+    padding?: keyof typeof paddingClasses;
+    /**
+     * Whether the page owns its scroll. `true` (default) pins the header and
+     * scrolls the body — the right behaviour for a table you page through.
+     * Set `false` when the page is rendered inside something that already
+     * scrolls and should flow with it.
+     */
+    scroll?: boolean;
+    className?: string;
+    contentClassName?: string;
+    children?: ReactNode;
+}
+/**
+ * One app page: the header, the content gutter, the scroll container, and the
+ * loading and empty states.
+ *
+ * These four were re-invented per page — 24 times in `eylo-voip` alone, each
+ * with its own gutter — which is how `p-4` there and `px-5` everywhere else
+ * ended up side by side in the same product. Reach for this instead of pairing
+ * a `PageHeader` with a padded `div`.
+ *
+ * Settings panels are the exception: they live inside the settings frame, which
+ * draws its own title and scrolls itself, so they use `SettingsPage`.
+ *
+ * @example
+ * ```tsx
+ * <Page
+ *   title={t("interactions")}
+ *   subtitle={t("interactions_description")}
+ *   actions={[{ id: "refresh", label: t("refresh"), onClick: reload }]}
+ *   loading={loading}
+ *   empty={!interactions.length && <EmptyState title={t("interaction_no_records_found")} />}
+ * >
+ *   <InteractionsTable interactions={interactions} />
+ * </Page>
+ * ```
+ */
+export declare const Page: React.FC<PageProps>;
+export {};

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,6 +22,7 @@ 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';
@@ -36,11 +39,12 @@ 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';
 export { KpiCard, type KpiCardProps } from './content/KpiCard';
+export { Page, type PageProps } from './content/Page';
 export { PageHeader, type PageHeaderAction, type PageHeaderProps } from './content/PageHeader';
 export { PageToolbar, PageToolbarActions, type PageToolbarActionsProps, type PageToolbarProps } from './content/PageToolbar';
 export { RichText, type RichTextProps } from './content/RichText';

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.10",
+  "version": "3.137.12",
   "description": "Theme-aware UI component library for OpenCXH platform",
   "type": "module",
   "exports": {