@opencxh/ui-kit 3.98.0 → 3.105.0

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

@@ -34,16 +34,10 @@ export interface ButtonProps extends React.ButtonHTMLAttributes<HTMLButtonElemen
  *
  * @example
  * ```tsx
- * <Button variant="primary" size="md">
- *   Click me
- * </Button>
- *
- * <Button variant="outline" leftIcon={<PlusIcon />}>
- *   Add item
- * </Button>
- *
- * <Button iconOnly variant="ghost" size="sm">
- *   <SearchIcon />
+ * <Button variant="primary" size="md">Click me</Button>
+ * <Button variant="outline" leftIcon={<Icon name={Plus} />}>Add item</Button>
+ * <Button iconOnly variant="ghost" size="sm" aria-label="Zoeken">
+ *   <Icon name={Search} />
  * </Button>
  * ```
  */

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 accent, 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/Link.d.ts

@@ -16,6 +16,7 @@ export interface LinkProps extends React.AnchorHTMLAttributes<HTMLAnchorElement>
     children: React.ReactNode;
 }
 /**
- * Link component with theme integration and accessibility features
+ * Link component with theme integration and accessibility features.
+ * Use for navigation; use Button for actions.
  */
 export declare const Link: React.FC<LinkProps>;

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"). Track = surface-hover, active segment = surface. No shadow.
+ *
+ * @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 icon; defaults to the lucide Sparkles icon. */
+    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/Icon.d.ts

@@ -15,7 +15,4 @@ export interface IconProps {
     /** Accessibility label */
     'aria-label'?: string;
 }
-/**
- * Icon component that works with Lucide React icons and provides theme integration
- */
 export declare const Icon: React.FC<IconProps>;

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

@@ -0,0 +1,76 @@
+import { default as React } from 'react';
+export interface ListProps<T> {
+    /** Rows to render */
+    items: T[];
+    /** Stable key per row */
+    getRowKey?: (item: T, index: number) => string | number;
+    /** Row separation */
+    variant?: "plain" | "divided" | "bulleted";
+    /** Leading slot — channel tile, avatar, status dot */
+    leading?: (item: T, index: number) => React.ReactNode;
+    /** Main content; defaults to `String(item)` */
+    renderItem?: (item: T, index: number) => React.ReactNode;
+    /** Trailing slot — timestamp, badge, counter */
+    trailing?: (item: T, index: number) => React.ReactNode;
+    /** Row click */
+    onSelect?: (item: T, index: number) => void;
+    /** Highlighted row (accent wash) */
+    isActive?: (item: T, index: number) => boolean;
+    /** Bold + accent dot */
+    unread?: (item: T, index: number) => boolean;
+    /** Deprioritised noise (opacity) */
+    dimmed?: (item: T, index: number) => boolean;
+    /** Checkbox column + bulk bar */
+    selectable?: boolean;
+    /** Selected rows (controlled) */
+    selectedItems?: T[];
+    /** Selection handler */
+    onSelectionChange?: (selected: T[]) => void;
+    /** Actions shown in the bulk bar when a selection exists */
+    bulkActions?: React.ReactNode;
+    /** Wrap the list in a bordered container */
+    bordered?: boolean;
+    /** Empty state content */
+    emptyContent?: React.ReactNode;
+    /** Loading state */
+    loading?: boolean;
+    /** Number of skeleton rows while loading */
+    loadingRows?: number;
+    className?: string;
+    "aria-label"?: string;
+}
+/**
+ * List — one row is one object you open, with content of varying length
+ * (inbox conversations, notifications, search results). No column headers:
+ * hierarchy lives inside the row.
+ *
+ * Use `Table` instead when you compare values between rows (sortable columns,
+ * aligned amounts, select-all in a header).
+ *
+ * @example
+ * ```tsx
+ * <List
+ *   items={threads}
+ *   getRowKey={(t) => t.id}
+ *   variant="divided"
+ *   bordered
+ *   leading={(t) => <ChannelBadge channel={t.channel} size="sm" />}
+ *   renderItem={(t) => (
+ *     <>
+ *       <span className="w-30 shrink-0 truncate">{t.sender}</span>
+ *       <span className="min-w-0 flex-1 truncate">
+ *         <strong>{t.subject}</strong>
+ *         <span className="text-text-muted"> — {t.preview}</span>
+ *       </span>
+ *     </>
+ *   )}
+ *   trailing={(t) => <span className="text-xs text-text-subtle">{t.time}</span>}
+ *   unread={(t) => !t.read}
+ *   selectable
+ *   selectedItems={selection}
+ *   onSelectionChange={setSelection}
+ *   bulkActions={<Button size="sm" variant="secondary">Archiveren</Button>}
+ * />
+ * ```
+ */
+export declare function List<T>({ items, getRowKey, variant, leading, renderItem, trailing, onSelect, isActive, unread, dimmed, selectable, selectedItems, onSelectionChange, bulkActions, bordered, emptyContent, loading, loadingRows, className, "aria-label": ariaLabel, }: ListProps<T>): 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={<Icon icon={Check} size="lg" />}
+ *   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,35 +4,44 @@ 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 { SplitButton, type SplitButtonProps, type SplitButtonOption } from './action/SplitButton';
+export { SegmentedToggle, type SegmentedOption, type SegmentedToggleProps } from './action/SegmentedToggle';
+export { SplitButton, type SplitButtonOption, type SplitButtonProps } from './action/SplitButton';
 export { Checkbox, type CheckboxProps } from './input/Checkbox';
 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 { StorageInput, type StorageInputProps } from './input/StorageInput';
 export { TextArea, type TextAreaProps } from './input/TextArea';
 export { TextField, type TextFieldProps } from './input/TextField';
-export { StorageInput, type StorageInputProps } from './input/StorageInput';
-export { FolderSelect, type FolderSelectProps, type FolderDestination } from './input/FolderSelect';
 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 { 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 { 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 { Image, type ImageProps } from './content/Image';
+export { List, type ListProps } from './content/List';
+export { KpiCard, type KpiCardProps } from './content/KpiCard';
 export { PageHeader, type PageHeaderAction, type PageHeaderProps } from './content/PageHeader';
 export { PageToolbar, type PageToolbarProps } from './content/PageToolbar';
+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';
 export { SidebarMenu, type MenuItem } from './navigation/Sidebar';
 export { TabBar, Tabs, type TabItem, type TabsProps } from './navigation/Tabs';
 export { Heading, type HeadingProps } from './typography/Heading';
-export { List, type ListItem, type ListProps } from './typography/List';
 export { Text, type TextProps } from './typography/Text';
 export * from './command-palette';
 export * from './primitives/Box';

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

@@ -30,26 +30,15 @@ export interface CheckboxProps extends Omit<React.InputHTMLAttributes<HTMLInputE
     labelClassName?: string;
 }
 /**
- * Checkbox component with theme integration
+ * Checkbox component with theme integration.
+ *
+ * Uses the native input with `accent-color`, so the checked fill is the accent
+ * token and dark mode needs no extra classes.
  *
  * @example
  * ```tsx
- * <Checkbox label="Accept terms and conditions" />
- *
- * <Checkbox
- *   label="Subscribe to newsletter"
- *   helperText="You can unsubscribe at any time"
- * />
- *
- * <Checkbox
- *   label="Required field"
- *   error="This field is required"
- * />
- *
- * <Checkbox
- *   label="Select all"
- *   indeterminate={true}
- * />
+ * <Checkbox label="Voorwaarden accepteren" />
+ * <Checkbox label="Alles selecteren" indeterminate />
  * ```
  */
 export declare const Checkbox: React.ForwardRefExoticComponent<CheckboxProps & React.RefAttributes<HTMLInputElement>>;

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

@@ -41,28 +41,16 @@ export interface TextFieldProps extends Omit<React.InputHTMLAttributes<HTMLInput
      */
     labelClassName?: string;
 }
+/** Shared with TextArea / Select / DatePicker: uppercase section label. */
+export declare const fieldLabelClasses = "mb-1.5 block text-xs font-semibold uppercase tracking-label";
 /**
  * TextField component with theme integration and validation states
  *
  * @example
  * ```tsx
- * <TextField
- *   label="Email"
- *   placeholder="Enter your email"
- *   type="email"
- * />
- *
- * <TextField
- *   label="Search"
- *   startIcon={<SearchIcon />}
- *   placeholder="Search..."
- * />
- *
- * <TextField
- *   label="Password"
- *   type="password"
- *   error="Password is required"
- * />
+ * <TextField label="E-mail" type="email" placeholder="naam@bedrijf.nl" />
+ * <TextField label="Zoeken" startIcon={<Icon icon={Search} />} />
+ * <TextField label="Wachtwoord" type="password" error="Verplicht veld" />
  * ```
  */
 export declare const TextField: React.ForwardRefExoticComponent<TextFieldProps & React.RefAttributes<HTMLInputElement>>;

package/dist/src/primitives/Box.d.ts

@@ -34,14 +34,9 @@ export interface BoxProps extends React.HTMLAttributes<HTMLDivElement> {
  *
  * @example
  * ```tsx
- * <Box padding="md" background="primary" radius="lg">
+ * <Box padding="md" background="module" radius="lg" border="sm" borderColor="neutral">
  *   Content
  * </Box>
- *
- * <Box as="section" padding="lg" shadow="md">
- *   <h2>Section Title</h2>
- *   <p>Section content</p>
- * </Box>
  * ```
  */
 export declare const Box: React.ForwardRefExoticComponent<BoxProps & React.RefAttributes<HTMLDivElement>>;

package/dist/src/primitives/Card.d.ts

@@ -3,4 +3,7 @@ export interface CardProps extends BoxProps {
     children: React.ReactNode;
     title?: string;
 }
+/**
+ * Card — panel on a page background. Border, never a shadow (radius-lg = 12px).
+ */
 export declare const Card: ({ children, title, ...props }: CardProps) => import("react").JSX.Element;

package/dist/src/typography/Heading.d.ts

@@ -17,7 +17,4 @@ export interface HeadingProps {
     /** Child content */
     children: React.ReactNode;
 }
-/**
- * Heading component with semantic HTML and theme integration
- */
 export declare const Heading: React.FC<HeadingProps>;

package/dist/src/typography/Text.d.ts

@@ -25,7 +25,4 @@ export interface TextProps {
     /** Child content */
     children: React.ReactNode;
 }
-/**
- * Text component with theme integration and typography variants
- */
 export declare const Text: React.FC<TextProps>;

package/package.json

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

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

@@ -1,31 +0,0 @@
-import { default as React } from 'react';
-export interface ListItem {
-    /** Unique identifier */
-    id?: string;
-    /** List item content */
-    content: React.ReactNode;
-    /** Whether the item is disabled */
-    disabled?: boolean;
-    /** Click handler for interactive lists */
-    onClick?: () => void;
-}
-export interface ListProps {
-    /** List items */
-    items: ListItem[];
-    /** List type */
-    type?: 'unordered' | 'ordered' | 'description';
-    /** List variant */
-    variant?: 'default' | 'flush' | 'bordered' | 'divided';
-    /** List size */
-    size?: 'sm' | 'md' | 'lg';
-    /** Whether list items are interactive */
-    interactive?: boolean;
-    /** Additional CSS classes */
-    className?: string;
-    /** Additional CSS classes for list items */
-    itemClassName?: string;
-}
-/**
- * List component with theme integration and multiple variants
- */
-export declare const List: React.FC<ListProps>;