@opencxh/ui-kit 3.109.0 → 3.110.0

package/dist/src/action/Button.d.ts

@@ -3,11 +3,11 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
     /**
      * The visual style variant of the button
      */
-    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive';
+    variant?: 'primary' | 'secondary' | 'outline' | 'ghost' | 'destructive' | 'success' | 'warning' | 'danger-solid';
     /**
      * The size of the button
      */
-    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | 'full';
+    size?: 'xs' | 'sm' | 'md' | 'lg' | 'xl' | '2xl' | 'full';
     /**
      * Whether the button should take the full width of its container
      */
@@ -28,6 +28,8 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
      * Whether the button should only display an icon (no text)
      */
     iconOnly?: boolean;
+    /** `circle` is for a control that is only ever an icon: call answer/reject. */
+    shape?: 'default' | 'circle';
 }
 /**
  * Button component with theme integration and multiple variants

package/dist/src/action/FilterChip.d.ts

@@ -2,12 +2,27 @@ import { default as React } from 'react';
 export interface FilterChipProps {
     /** Chip text (e.g. "Status", or "Status: Open" when a value is set). */
     label: React.ReactNode;
+    /** Leading icon, before the label. */
+    icon?: React.ReactNode;
+    /**
+     * Meaning carried by the chip's own value — a priority, a state. Applies to
+     * the resting chip; `active` still wins, because "you picked this" outranks
+     * "this is urgent".
+     */
+    tone?: "default" | "muted" | "warning" | "danger";
+    /**
+     * `pill` is the filter-bar shape. `rect` is for a chip that labels a property
+     * rather than a filter, where a softer corner sits better next to inputs.
+     */
+    shape?: "pill" | "rect";
     /** Selected/active — renders the filled dark treatment. */
     active?: boolean;
     /** Show a trailing caret (opens a menu the consumer wires with Dropdown/Popover). */
     caret?: boolean;
     /** Open a value clear affordance (✕) — only shown when `active`. */
     onClear?: () => void;
+    /** Accessible name for the clear affordance. */
+    clearLabel?: string;
     onClick?: () => void;
     className?: string;
 }
@@ -23,4 +38,4 @@ export interface FilterChipProps {
  *   active={!!status} onClick={openMenu} onClear={() => setStatus(null)} />
  * ```
  */
-export declare function FilterChip({ label, active, caret, onClear, onClick, className, }: FilterChipProps): React.JSX.Element;
+export declare function FilterChip({ label, icon, tone, shape, active, caret, onClear, clearLabel, onClick, className, }: FilterChipProps): React.JSX.Element;

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

@@ -14,7 +14,7 @@ export interface ChannelBadgeProps {
 /**
  * Coloured channel tile (the glyph-in-rounded-square used across inbox rows,
  * the focus queue, the attention list and Recent tabs). Colours come from the
- * `--ch-*` design-system tokens, so it is mode-aware.
+ * `--color-channel-*` design-system tokens, so it is mode-aware.
  *
  * @example
  * ```tsx

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

@@ -24,6 +24,12 @@ export interface ListProps<T> {
     trailing?: (item: T, index: number) => React.ReactNode;
     /** Row click */
     onSelect?: (item: T, index: number) => void;
+    /**
+     * Fired when keyboard focus lands on a row. Lets a consumer mirror the
+     * roving focus into its own "active" state (what a hand-rolled `useArrowNav`
+     * used to provide) without owning the key handling.
+     */
+    onActiveIndexChange?: (index: number) => void;
     /** Highlighted row (accent wash) */
     isActive?: (item: T, index: number) => boolean;
     /** Bold + accent dot */
@@ -102,4 +108,4 @@ export interface ListProps<T> {
  * />
  * ```
  */
-export declare function List<T>({ items, getRowKey, variant, leading, renderItem, trailing, onSelect, isActive, unread, dimmed, groupBy, groups, renderGroupHeader, stickyGroupHeaders, collapsibleGroups, hideGroupCount, selectable, selectedItems, onSelectionChange, bulkActions, header, stickyHeader, bordered, emptyContent, loading, loadingRows, className, "aria-label": ariaLabel, }: ListProps<T>): React.JSX.Element;
+export declare function List<T>({ items, getRowKey, variant, leading, renderItem, trailing, onSelect, onActiveIndexChange, isActive, unread, dimmed, groupBy, groups, renderGroupHeader, stickyGroupHeaders, collapsibleGroups, hideGroupCount, selectable, selectedItems, onSelectionChange, bulkActions, header, stickyHeader, bordered, emptyContent, loading, loadingRows, className, "aria-label": ariaLabel, }: ListProps<T>): React.JSX.Element;

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

@@ -0,0 +1,36 @@
+import { default as React } from 'react';
+export interface MessageBubbleProps {
+    /** Direction. `in` is received, `out` is sent by us. */
+    side: "in" | "out";
+    /**
+     * Part of a run from the same sender. The bubble keeps its shape; callers use
+     * this to drop the repeated header and avatar.
+     */
+    continued?: boolean;
+    /** Border emphasis for a message that is not settled yet, e.g. a pending draft. */
+    tone?: "default" | "warning";
+    /**
+     * Layout only — width and padding. Those differ per surface (a chat bubble
+     * hugs its text, an email card fills the column and pads its own sections),
+     * so the component owns the shape and the caller owns the box.
+     */
+    className?: string;
+    children: React.ReactNode;
+}
+/**
+ * A single message in a conversation: chat, email and call transcript all use
+ * the same shape.
+ *
+ * The corner facing the sender is tight (`rounded-sm`) and the other three are
+ * `rounded-lg`, which is what makes direction readable without a tail. Sent
+ * messages sit on `bg-bubble-out-soft`, a 4% ink wash — deliberately lighter than
+ * `accent-soft`, which reads as heavy on every message you have ever sent.
+ *
+ * @example
+ * ```tsx
+ * <MessageBubble side="out" className="max-w-bubble px-4 py-3">
+ *   <Text>{body}</Text>
+ * </MessageBubble>
+ * ```
+ */
+export declare function MessageBubble({ side, continued, tone, className, children, }: MessageBubbleProps): React.JSX.Element;

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

@@ -0,0 +1,21 @@
+import { default as React } from 'react';
+export interface SectionDividerProps {
+    /** Centred label. Without one the divider is a plain rule. */
+    label?: React.ReactNode;
+    /** Right-aligned slot after the rule, e.g. a count or a status. */
+    trailing?: React.ReactNode;
+    /** Push the label to the start instead of centring it. */
+    align?: "center" | "start";
+    className?: string;
+}
+/**
+ * A hairline that separates two runs of content, optionally naming the run that
+ * follows: day separators in a feed, group headings in search results.
+ *
+ * @example
+ * ```tsx
+ * <SectionDivider label="Gisteren" />
+ * <SectionDivider label="Gesprekken" align="start" trailing={<Badge>12</Badge>} />
+ * ```
+ */
+export declare function SectionDivider({ label, trailing, align, className }: SectionDividerProps): React.JSX.Element;

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

@@ -0,0 +1,44 @@
+import { default as React } from 'react';
+export interface SettingsRowProps {
+    /** What the setting is called. */
+    label: React.ReactNode;
+    /** One line on what it does or what turning it on means. */
+    description?: React.ReactNode;
+    /** The control itself — a `Switch`, `Select`, `Button`… */
+    control: React.ReactNode;
+    /**
+     * Draw the row as a bordered pill. Use it for a flat list of independent
+     * toggles; leave it off inside a `SettingsSection`, which already groups.
+     */
+    bordered?: boolean;
+    disabled?: boolean;
+    className?: string;
+}
+/**
+ * One setting: label (+ description) on the left, its control on the right.
+ *
+ * @example
+ * ```tsx
+ * <SettingsRow
+ *   label="Agenda synchroniseren"
+ *   description="Afspraken uit dit account verschijnen in je agenda."
+ *   control={<Switch checked={on} onChange={setOn} aria-label="Agenda synchroniseren" />}
+ * />
+ * ```
+ */
+export declare function SettingsRow({ label, description, control, bordered, disabled, className, }: SettingsRowProps): React.JSX.Element;
+export interface SettingsSectionProps {
+    /** Lucide icon component, rendered in the section heading. */
+    icon?: React.ComponentType<Record<string, unknown>>;
+    title: React.ReactNode;
+    description?: React.ReactNode;
+    /** Right-aligned slot in the heading, e.g. a "Reset" button. */
+    actions?: React.ReactNode;
+    children: React.ReactNode;
+    className?: string;
+}
+/**
+ * A titled group of `SettingsRow`s. The body is indented to line up under the
+ * title text rather than the icon.
+ */
+export declare function SettingsSection({ icon, title, description, actions, children, className, }: SettingsSectionProps): React.JSX.Element;

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

@@ -2,7 +2,7 @@ import { default as React } from 'react';
 export interface SourceChipProps {
     /** Label — the linked conversation subject. */
     label: React.ReactNode;
-    /** Optional leading dot colour (a `--dot-*` / channel CSS var, or any colour). */
+    /** Optional leading dot colour (a `--color-cat-*` or channel CSS var). */
     dotColor?: string;
     /** Click opens the linked conversation. */
     onClick?: () => void;
@@ -14,7 +14,7 @@ export interface SourceChipProps {
  *
  * @example
  * ```tsx
- * <SourceChip label="Vraag over factuur maart" dotColor="var(--dot-finance)" onClick={openThread} />
+ * <SourceChip label="Vraag over factuur maart" dotColor="var(--color-cat-2)" onClick={openThread} />
  * ```
  */
 export declare function SourceChip({ label, dotColor, onClick, className }: SourceChipProps): React.JSX.Element;

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

@@ -1,5 +1,11 @@
 import { ReactNode } from 'react';
-interface ContentLoadingProps {
+export interface ContentLoadingProps {
+    /**
+     * `page` (default) fills the route with its own `<main>` shell and padding.
+     * `inline` drops both, so the skeleton can sit inside an existing panel,
+     * card or scroll container without nesting a second `<main>` landmark.
+     */
+    variant?: "page" | "inline";
     /**
      * Optional custom skeleton content (overrides default)
      */
@@ -17,5 +23,4 @@ interface ContentLoadingProps {
      */
     tableRows?: number;
 }
-export declare function ContentLoading({ children, showTableSkeleton, tableColumns, tableRows, }: ContentLoadingProps): import("react").JSX.Element;
-export {};
+export declare function ContentLoading({ variant, children, showTableSkeleton, tableColumns, tableRows, }: ContentLoadingProps): import("react").JSX.Element;

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

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+export interface StatusDotProps {
+    /**
+     * Meaning, not colour. `neutral` is the off/idle state; `accent` marks
+     * unread; the rest follow the status tokens.
+     */
+    tone?: "neutral" | "accent" | "success" | "warning" | "danger" | "info" | "note"
+    /** Identity without status — an inbox, a speaker. See --color-cat-*. */
+     | "cat-1" | "cat-2" | "cat-3" | "cat-4" | "cat-5";
+    /** Square instead of round — the marker style used for inbox identity. */
+    shape?: "round" | "square";
+    /** Slow pulse for something live: an active call, a running recording. */
+    pulse?: boolean;
+    /**
+     * Accessible name. Without one the dot is decorative and hidden from
+     * assistive tech, which is right when adjacent text already says the state.
+     */
+    label?: string;
+    className?: string;
+}
+/**
+ * Small state marker: presence, session state, unread, live recording.
+ *
+ * Replaces a scatter of hand-rolled `h-2 w-2 rounded-full bg-green-500` spans
+ * that used raw palette colours and disagreed on size (8px vs 10px).
+ *
+ * @example
+ * ```tsx
+ * <StatusDot tone="success" label="Online" />
+ * <StatusDot tone="danger" pulse label="Opname loopt" />
+ * ```
+ */
+export declare function StatusDot({ tone, shape, pulse, label, className, }: StatusDotProps): React.JSX.Element;

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

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export interface StepIndicatorProps {
+    /** Step ids in order. Only the position matters; the ids identify `current`. */
+    steps: string[];
+    /** Id of the step being shown. Unknown ids render as "not started". */
+    current: string;
+    /**
+     * `numbered` draws counted circles joined by a rule — use it when the user
+     * needs to know how many steps are left. `dots` is the quieter bar, for a
+     * flow whose heading already says where you are.
+     */
+    variant?: "numbered" | "dots";
+    /**
+     * Accessible name. Without one the indicator is treated as decorative, which
+     * is right when a heading beside it already announces the current step.
+     */
+    label?: string;
+    className?: string;
+}
+/**
+ * Progress through a short, linear flow.
+ *
+ * @example
+ * ```tsx
+ * <StepIndicator steps={["provider", "channel", "owner"]} current={step} />
+ * <StepIndicator steps={["intent", "channel", "address"]} current={step} variant="dots" />
+ * ```
+ */
+export declare function StepIndicator({ steps, current, variant, label, className, }: StepIndicatorProps): React.JSX.Element;

package/dist/src/index.d.ts

@@ -13,11 +13,13 @@ export { DatePicker, type DatePickerProps } from './input/DatePicker';
 export { FolderSelect, type FolderDestination, type FolderSelectProps } from './input/FolderSelect';
 export { SearchableTextField, type SearchableTextFieldProps } from './input/SearchableTextField';
 export { Select, type SelectOption, type SelectProps } from './input/Select';
+export { Switch, type SwitchProps } from './input/Switch';
 export { StorageInput, type StorageInputProps } from './input/StorageInput';
 export { TextArea, type TextAreaProps } from './input/TextArea';
 export { TextField, type TextFieldProps } from './input/TextField';
 export { Form, type FormButtonProps, type FormFieldType, type FormGroup, type FormGroupItem, type FormProps } from './forms/Form';
 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';
@@ -26,6 +28,8 @@ export { EmptyState, type EmptyStateProps } from './feedback/EmptyState';
 export { Kbd, type KbdProps } from './feedback/Kbd';
 export { ProgressBar, type ProgressBarProps } from './feedback/ProgressBar';
 export { Spinner, type SpinnerProps } from './feedback/Spinner';
+export { StatusDot, type StatusDotProps } from './feedback/StatusDot';
+export { StepIndicator, type StepIndicatorProps } from './feedback/StepIndicator';
 export { AssistantCard, type AssistantCardProps } from './content/AssistantCard';
 export { Avatar, type AvatarProps } from './content/Avatar';
 export { AvatarStack, type AvatarStackPerson, type AvatarStackProps } from './content/AvatarStack';
@@ -33,9 +37,12 @@ export { ChannelBadge, type ChannelBadgeProps, type ChannelKey } from './content
 export { Icon, type IconProps } from './content/Icon';
 export { Image, type ImageProps } from './content/Image';
 export { List, type ListProps } from './content/List';
+export { MessageBubble, type MessageBubbleProps } from './content/MessageBubble';
 export { KpiCard, type KpiCardProps } from './content/KpiCard';
 export { PageHeader, type PageHeaderAction, type PageHeaderProps } from './content/PageHeader';
 export { PageToolbar, type PageToolbarProps } from './content/PageToolbar';
+export { SectionDivider, type SectionDividerProps } from './content/SectionDivider';
+export { SettingsRow, SettingsSection, type SettingsRowProps, type SettingsSectionProps } from './content/SettingsRow';
 export { SourceChip, type SourceChipProps } from './content/SourceChip';
 export { Table, type TableAction, type TableColumn, type TableFilter, type TableProps } from './content/Table';
 export { View, type ViewGroup, type ViewProps } from './content/View';

package/dist/src/input/DatePicker.d.ts

@@ -19,6 +19,12 @@ export interface DatePickerProps {
     maxDate?: Date;
     /** Date format for display */
     format?: 'MM/dd/yyyy' | 'dd/MM/yyyy' | 'yyyy-MM-dd';
+    /**
+     * Also pick a time. The display gains `HH:mm`, the panel gains a time field,
+     * and choosing a day keeps the time already on the value instead of resetting
+     * it to midnight. Replaces a native `datetime-local`.
+     */
+    withTime?: boolean;
 }
 /**
  * DatePicker component with calendar popup

package/dist/src/input/Switch.d.ts

@@ -0,0 +1,25 @@
+import { default as React } from 'react';
+export interface SwitchProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "type" | "size" | "checked" | "onChange"> {
+    /**
+     * Current state. Deliberately required and never held internally: several
+     * call sites drive this from an optimistic update that rolls back on a failed
+     * request, and internal state would silently swallow the rollback.
+     */
+    checked: boolean;
+    onChange: (checked: boolean) => void;
+    /** Text beside the switch. Omit it and pass `aria-label` instead. */
+    label?: React.ReactNode;
+    disabled?: boolean;
+}
+/**
+ * On/off switch for a setting that applies immediately.
+ *
+ * Use `Checkbox` instead when the value is part of a form the user submits —
+ * a switch says "this is now on", a checkbox says "include this when I save".
+ *
+ * @example
+ * ```tsx
+ * <Switch checked={syncEnabled} onChange={setSyncEnabled} label="Agenda synchroniseren" />
+ * ```
+ */
+export declare const Switch: React.ForwardRefExoticComponent<SwitchProps & React.RefAttributes<HTMLInputElement>>;

package/dist/src/overlays/ConfirmDialog.d.ts

@@ -0,0 +1,38 @@
+import { default as React } from 'react';
+export interface ConfirmDialogProps {
+    open: boolean;
+    title: string;
+    /** What is about to happen, and what it costs if it is wrong. */
+    description?: React.ReactNode;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    /** `danger` for anything that destroys or detaches something. */
+    tone?: "default" | "danger";
+    /** Disables both buttons and puts the confirm button in its loading state. */
+    loading?: boolean;
+    onConfirm: () => void;
+    onCancel: () => void;
+}
+/**
+ * Confirmation before a destructive or irreversible action.
+ *
+ * Replaces `window.confirm`, which blocks the main thread, cannot be styled,
+ * cannot be translated, and is suppressed outright in some embedded contexts.
+ * Note the shape difference: `confirm()` returns a boolean inline, so callers
+ * written as `if (!confirm(...)) return;` have to split into a request step
+ * and a confirm step.
+ *
+ * @example
+ * ```tsx
+ * <ConfirmDialog
+ *   open={pendingDelete !== null}
+ *   tone="danger"
+ *   title={t("channel_delete_title")}
+ *   description={t("channel_delete_description")}
+ *   confirmLabel={t("delete")}
+ *   onConfirm={() => remove(pendingDelete!)}
+ *   onCancel={() => setPendingDelete(null)}
+ * />
+ * ```
+ */
+export declare function ConfirmDialog({ open, title, description, confirmLabel, cancelLabel, tone, loading, onConfirm, onCancel, }: ConfirmDialogProps): React.JSX.Element;

package/package.json

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