@opencxh/ui-kit 3.98.0 → 3.103.0

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

@@ -0,0 +1,26 @@
+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;
+    /** 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;
+    onClick?: () => void;
+    className?: string;
+}
+/**
+ * Filter chip — the inbox filter bar and the thread priority/assign/inbox/tags
+ * menus. Presentational: it renders the chip (active = filled dark, inactive =
+ * outlined) with an optional caret + clear; the consumer wires the actual menu
+ * with the existing `Dropdown` / `Popover`.
+ *
+ * @example
+ * ```tsx
+ * <FilterChip label={status ? `Status: ${status}` : "Status"} caret
+ *   active={!!status} onClick={openMenu} onClear={() => setStatus(null)} />
+ * ```
+ */
+export declare function FilterChip({ label, active, caret, onClear, onClick, className }: FilterChipProps): React.JSX.Element;

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

@@ -0,0 +1,29 @@
+import { default as React } from 'react';
+export interface SegmentedOption<T extends string> {
+    value: T;
+    label: React.ReactNode;
+}
+export interface SegmentedToggleProps<T extends string> {
+    options: SegmentedOption<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    /** Control height. */
+    size?: "sm" | "md";
+    className?: string;
+    /** Accessible group label. */
+    "aria-label"?: string;
+}
+/**
+ * Segmented pill toggle (focus "Feed / Eén tegelijk", settings "Persoonlijk /
+ * Bedrijf"). The active segment lifts with a subtle shadow. Token-driven.
+ *
+ * @example
+ * ```tsx
+ * <SegmentedToggle
+ *   value={layout}
+ *   onChange={setLayout}
+ *   options={[{ value: "feed", label: "Feed" }, { value: "one", label: "Eén tegelijk" }]}
+ * />
+ * ```
+ */
+export declare function SegmentedToggle<T extends string>({ options, value, onChange, size, className, "aria-label": ariaLabel, }: SegmentedToggleProps<T>): React.JSX.Element;

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

@@ -0,0 +1,24 @@
+import { default as React } from 'react';
+export interface AssistantCardProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Card heading (e.g. "Briefing van je assistent", "Voorstel van de assistent"). */
+    title: React.ReactNode;
+    /** Leading glyph; defaults to the ✦ sparkle. */
+    icon?: React.ReactNode;
+    /** Optional action rendered on the header's right (e.g. a "Gebruiken" button). */
+    action?: React.ReactNode;
+    /** Body content. */
+    children?: React.ReactNode;
+}
+/**
+ * AI-assistant card shell — the tinted "✦ Briefing / Voorstel van de assistent"
+ * surface used on Mijn dag and in the Focus queue. Uses the `--assistant-*`
+ * design-system tokens so the tint is mode-aware.
+ *
+ * @example
+ * ```tsx
+ * <AssistantCard title="Voorstel van de assistent" action={<Button size="xs">Gebruiken</Button>}>
+ *   Marc wacht 12 min op WhatsApp — concept staat klaar.
+ * </AssistantCard>
+ * ```
+ */
+export declare function AssistantCard({ title, icon, action, children, className, ...props }: AssistantCardProps): React.JSX.Element;

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

@@ -0,0 +1,25 @@
+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?: ChannelKey | string;
+    /** Glyph or short label inside the tile (e.g. an icon, or an initial). */
+    children?: React.ReactNode;
+    /** Tile size. */
+    size?: "sm" | "md" | "lg";
+    className?: string;
+    title?: string;
+}
+/**
+ * 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.
+ *
+ * @example
+ * ```tsx
+ * <ChannelBadge channel="wa">W</ChannelBadge>
+ * <ChannelBadge channel="mail" size="lg"><MailIcon /></ChannelBadge>
+ * ```
+ */
+export declare function ChannelBadge({ channel, children, size, className, title }: ChannelBadgeProps): React.JSX.Element;

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

@@ -0,0 +1,19 @@
+import { default as React } from 'react';
+export interface KpiCardProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** The big number / metric. */
+    value: React.ReactNode;
+    /** Caption under the value. */
+    label: React.ReactNode;
+    /** Tone — `urgent` tints the number + border, `success` tints the number. */
+    tone?: "default" | "urgent" | "success";
+}
+/**
+ * KPI / stat card (the Mijn dag metric row). Token-driven, mode-aware.
+ *
+ * @example
+ * ```tsx
+ * <KpiCard value={3} label="wachten op jou · gem. 1u12" />
+ * <KpiCard value={1} label="dreigt SLA te missen" tone="urgent" />
+ * ```
+ */
+export declare function KpiCard({ value, label, tone, className, ...props }: KpiCardProps): React.JSX.Element;

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

@@ -0,0 +1,20 @@
+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). */
+    dotColor?: string;
+    /** Click opens the linked conversation. */
+    onClick?: () => void;
+    className?: string;
+}
+/**
+ * Source-conversation chip — the "open brongesprek / gekoppeld gesprek ↗" pill
+ * that links a task or focus item back to its conversation.
+ *
+ * @example
+ * ```tsx
+ * <SourceChip label="Vraag over factuur maart" dotColor="var(--dot-finance)" onClick={openThread} />
+ * ```
+ */
+export declare function SourceChip({ label, dotColor, onClick, className }: SourceChipProps): React.JSX.Element;

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

@@ -0,0 +1,27 @@
+import { default as React } from 'react';
+export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElement>, "title"> {
+    /** Leading glyph or icon (e.g. a check for the focus "queue empty" state). */
+    icon?: React.ReactNode;
+    /** Tint of the icon disc. */
+    tone?: "neutral" | "success";
+    /** Headline. */
+    title: React.ReactNode;
+    /** Supporting copy. */
+    description?: React.ReactNode;
+    /** Action buttons row. */
+    actions?: React.ReactNode;
+    /** Render inside a raised card (focus "done" state) vs. plain centered block. */
+    card?: boolean;
+}
+/**
+ * Centered empty / completion state (focus queue done, no-results lists).
+ *
+ * @example
+ * ```tsx
+ * <EmptyState card tone="success" icon="✓"
+ *   title="Wachtrij leeg — 7 afgehandeld"
+ *   description="Nieuwe gesprekken verschijnen hier vanzelf."
+ *   actions={<Button>Terug naar Mijn dag</Button>} />
+ * ```
+ */
+export declare function EmptyState({ icon, tone, title, description, actions, card, className, ...props }: EmptyStateProps): React.JSX.Element;

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

@@ -0,0 +1,14 @@
+import { default as React } from 'react';
+export interface KbdProps extends React.HTMLAttributes<HTMLElement> {
+    /** Key label, e.g. "⌘K", "E", "↵". */
+    children: React.ReactNode;
+}
+/**
+ * Keyboard-shortcut chip (the `⌘K` / `E` / `↵` hints in the redesign).
+ *
+ * @example
+ * ```tsx
+ * Zoeken <Kbd>⌘K</Kbd>
+ * ```
+ */
+export declare function Kbd({ children, className, ...props }: KbdProps): React.JSX.Element;

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

@@ -0,0 +1,20 @@
+import { default as React } from 'react';
+export interface ProgressBarProps extends React.HTMLAttributes<HTMLDivElement> {
+    /** Completion 0–100 (clamped). */
+    value: number;
+    /** Fill tone. */
+    variant?: "accent" | "success";
+    /** Track height. */
+    size?: "sm" | "md";
+}
+/**
+ * Slim determinate progress bar (focus queue progress, subtask completion).
+ * Token-driven and mode-aware.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={40} />
+ * <ProgressBar value={3 / 7 * 100} variant="success" size="sm" />
+ * ```
+ */
+export declare function ProgressBar({ value, variant, size, className, ...props }: ProgressBarProps): React.JSX.Element;

package/dist/src/index.d.ts

@@ -4,7 +4,9 @@ export { ParticipantTile, type ParticipantTileProps } from './meeting/Participan
 export { VideoSurface, type VideoSurfaceProps } from './meeting/VideoSurface';
 export { Button, type ButtonProps } from './action/Button';
 export { ButtonGroup, type ButtonGroupProps } from './action/ButtonGroup';
+export { FilterChip, type FilterChipProps } from './action/FilterChip';
 export { Link, type LinkProps } from './action/Link';
+export { SegmentedToggle, type SegmentedToggleProps, type SegmentedOption } from './action/SegmentedToggle';
 export { SplitButton, type SplitButtonProps, type SplitButtonOption } from './action/SplitButton';
 export { Checkbox, type CheckboxProps } from './input/Checkbox';
 export { DatePicker, type DatePickerProps } from './input/DatePicker';
@@ -20,10 +22,17 @@ 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 { 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 { AssistantCard, type AssistantCardProps } from './content/AssistantCard';
 export { Avatar, type AvatarProps } from './content/Avatar';
 export { AvatarStack, type AvatarStackProps, type AvatarStackPerson } from './content/AvatarStack';
+export { ChannelBadge, type ChannelBadgeProps, type ChannelKey } from './content/ChannelBadge';
 export { Icon, type IconProps } from './content/Icon';
+export { KpiCard, type KpiCardProps } from './content/KpiCard';
+export { SourceChip, type SourceChipProps } from './content/SourceChip';
 export { Image, type ImageProps } from './content/Image';
 export { PageHeader, type PageHeaderAction, type PageHeaderProps } from './content/PageHeader';
 export { PageToolbar, type PageToolbarProps } from './content/PageToolbar';

package/package.json

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