@opencxh/ui-kit 3.103.0 → 3.106.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

@@ -13,7 +13,7 @@ export interface FilterChipProps {
 }
 /**
  * Filter chip — the inbox filter bar and the thread priority/assign/inbox/tags
- * menus. Presentational: it renders the chip (active = filled dark, inactive =
+ * 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`.
  *
@@ -23,4 +23,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, 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

@@ -15,7 +15,7 @@ export interface SegmentedToggleProps<T extends string> {
 }
 /**
  * Segmented pill toggle (focus "Feed / Eén tegelijk", settings "Persoonlijk /
- * Bedrijf"). The active segment lifts with a subtle shadow. Token-driven.
+ * Bedrijf"). Track = surface-hover, active segment = surface. No shadow.
  *
  * @example
  * ```tsx

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

@@ -2,7 +2,7 @@ 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. */
+    /** 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;
@@ -10,7 +10,7 @@ export interface AssistantCardProps extends Omit<React.HTMLAttributes<HTMLDivEle
     children?: React.ReactNode;
 }
 /**
- * AI-assistant card shell — the tinted "✦ Briefing / Voorstel van de assistent"
+ * 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.
  *

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

@@ -0,0 +1,105 @@
+import { default as React } from 'react';
+export interface ListGroup {
+    /** Group key — must match what `groupBy` returns */
+    id: string;
+    /** Header label; defaults to `id` */
+    title?: string;
+    /** Override the row count shown on the right */
+    count?: number;
+    /** Start collapsed (only with `collapsible`) */
+    defaultCollapsed?: boolean;
+}
+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;
+    /** Group rows under headers. Return the group id for each row. */
+    groupBy?: (item: T, index: number) => string;
+    /**
+     * Group order and labels. Groups missing here are appended in order of first
+     * appearance; groups listed here but empty are skipped.
+     */
+    groups?: ListGroup[];
+    /** Header renderer; defaults to label + count */
+    renderGroupHeader?: (group: ListGroup, items: T[]) => React.ReactNode;
+    /** Headers stick to the top of the scroll container */
+    stickyGroupHeaders?: boolean;
+    /** Headers become a toggle that folds the group */
+    collapsibleGroups?: boolean;
+    /** Hide the count on the right of the header */
+    hideGroupCount?: 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;
+    /**
+     * Column-label strip above the rows ("Van · Gesprek · tijd"), like the inbox.
+     * Align it with the row by reusing the same widths as `renderItem`.
+     */
+    header?: React.ReactNode;
+    /** Keep the column-label strip visible while scrolling */
+    stickyHeader?: boolean;
+    /** 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).
+ *
+ * Grouped, like the inbox and task views:
+ *
+ * @example
+ * ```tsx
+ * <List
+ *   items={tasks}
+ *   getRowKey={(t) => t.id}
+ *   bordered
+ *   groupBy={(t) => t.bucket}                       // "today" | "tomorrow" | "later"
+ *   groups={[
+ *     { id: "today", title: "Vandaag" },
+ *     { id: "tomorrow", title: "Morgen" },
+ *     { id: "later", title: "Later" },
+ *   ]}
+ *   stickyGroupHeaders
+ *   collapsibleGroups
+ *   leading={(t) => <ChannelBadge channel={t.channel} size="sm" />}
+ *   renderItem={(t) => <span className="truncate">{t.title}</span>}
+ *   trailing={(t) => t.due}
+ *   unread={(t) => !t.read}
+ * />
+ * ```
+ */
+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;

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

@@ -18,7 +18,7 @@ export interface EmptyStateProps extends Omit<React.HTMLAttributes<HTMLDivElemen
  *
  * @example
  * ```tsx
- * <EmptyState card tone="success" icon="✓"
+ * <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>} />

package/dist/src/index.d.ts

@@ -6,16 +6,16 @@ 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 { 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';
@@ -28,20 +28,20 @@ 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 { KpiCard, type KpiCardProps } from './content/KpiCard';
-export { SourceChip, type SourceChipProps } from './content/SourceChip';
 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.103.0",
+  "version": "3.106.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>;