@opencxh/ui-kit 3.136.4 → 3.137.1

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

@@ -9,7 +9,7 @@ export interface FilterChipProps {
      * the resting chip; `active` still wins, because "you picked this" outranks
      * "this is urgent".
      */
-    tone?: "none" | "default" | "muted" | "warning" | "danger";
+    tone?: "none" | "default" | "muted" | "outline" | "warning" | "danger";
     /**
      * `rect` is the filter-bar shape — the same 9px corner as a button, so a
      * chip and a button in one toolbar line up. `pill` is for a chip that reads
@@ -22,6 +22,14 @@ export interface FilterChipProps {
     active?: boolean;
     /** Show a trailing caret (opens a menu the consumer wires with Dropdown/Popover). */
     caret?: boolean;
+    /**
+     * Menu panel for a chip that opens its own popover. Receives a `close`
+     * callback so a row can dismiss the panel after picking. Without it the chip
+     * is purely presentational and `onClick` is yours to wire.
+     */
+    menu?: (close: () => void) => React.ReactNode;
+    /** Panel classes, when `menu` is set. */
+    menuClassName?: string;
     /** Open a value clear affordance (✕) — only shown when `active`. */
     onClear?: () => void;
     /** Accessible name for the clear affordance. */
@@ -32,15 +40,18 @@ export interface FilterChipProps {
     className?: string;
 }
 /**
- * Filter chip — the inbox filter bar and the thread priority/assign/inbox/tags
- * menus. Presentational: it renders the chip (active = the blue "you applied
- * this" tint, inactive = a sunk plate) with an optional caret + clear; the
- * consumer wires the actual menu with the existing `Dropdown` / `Popover`.
+ * Filter chip — the inbox filter bar, the table toolbar, and the thread
+ * priority/assign/inbox/tags menus. Presentational by default (the consumer
+ * wires the menu with `Dropdown`/`Popover` and `onClick`); pass `menu` and the
+ * chip opens its own popover instead, which is the only way to get a clear
+ * button on a menu chip — a `<FilterChip>` used as someone else's trigger
+ * would nest a button inside a button.
  *
  * @example
  * ```tsx
  * <FilterChip label={status ? `Status: ${status}` : "Status"} caret
- *   active={!!status} onClick={openMenu} onClear={() => setStatus(null)} />
+ *   active={!!status} onClear={() => setStatus(null)}
+ *   menu={(close) => <StatusList onPick={(s) => { setStatus(s); close(); }} />} />
  * ```
  */
-export declare function FilterChip({ label, icon, tone, shape, size, active, caret, onClear, clearLabel, onClick, title, className, }: FilterChipProps): React.JSX.Element;
+export declare function FilterChip({ label, icon, tone, shape, size, active, caret, menu, menuClassName, onClear, clearLabel, onClick, title, className, }: FilterChipProps): React.JSX.Element;

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

@@ -9,6 +9,13 @@ export interface SegmentedToggleProps<T extends string> {
     onChange: (value: T) => void;
     /** Control height. */
     size?: "sm" | "md";
+    /**
+     * Track fill. `sunk` reads against the white card; use `track` when the
+     * toggle itself sits on a sunk plane, where `sunk` on `sunk` is invisible.
+     */
+    tone?: "sunk" | "track";
+    /** Fill the container and split it evenly — a toggle that heads a column. */
+    fullWidth?: boolean;
     className?: string;
     /** Accessible group label. */
     "aria-label"?: string;
@@ -27,4 +34,4 @@ export interface SegmentedToggleProps<T extends string> {
  * />
  * ```
  */
-export declare function SegmentedToggle<T extends string>({ options, value, onChange, size, className, "aria-label": ariaLabel, }: SegmentedToggleProps<T>): React.JSX.Element;
+export declare function SegmentedToggle<T extends string>({ options, value, onChange, size, tone, fullWidth, className, "aria-label": ariaLabel, }: SegmentedToggleProps<T>): React.JSX.Element;

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

@@ -1,5 +1,21 @@
 import { default as React } from 'react';
+import { ButtonProps } from '../action/Button';
 import { PageHeaderAction } from './PageHeader';
+export interface PageToolbarActionsProps {
+    actions: PageHeaderAction[];
+    /**
+     * Variant for actions that do not name one. `secondary` (a sunk plate) suits
+     * a detail page's Cancel/Save pair; a list toolbar passes `ghost`, because
+     * there the plate would collide with the sunk search field beside it.
+     */
+    defaultVariant?: ButtonProps["variant"];
+    className?: string;
+}
+/**
+ * The action cluster shared by `PageToolbar` and the table toolbar, so a
+ * "New …" button looks the same wherever a view decides to put it.
+ */
+export declare const PageToolbarActions: React.FC<PageToolbarActionsProps>;
 export interface PageToolbarProps {
     /** Right-aligned action buttons */
     actions?: PageHeaderAction[];
@@ -15,8 +31,10 @@ export interface PageToolbarProps {
     children?: React.ReactNode;
 }
 /**
- * Thin action-bar for views that already have a host header (e.g. settings
- * overlay). Renders an optional back button on the left and action buttons on
- * the right. Use `PageHeader` when the view needs its own title/breadcrumbs.
+ * Thin action-bar for views that already have a host header (e.g. a settings
+ * page or a detail view). Renders an optional back button on the left and
+ * action buttons on the right. Use `PageHeader` when the view needs its own
+ * title/breadcrumbs — and for a list, put the actions on the `Table` toolbar
+ * instead, next to the search and filters they apply to.
  */
 export declare const PageToolbar: React.FC<PageToolbarProps>;

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

@@ -1,4 +1,5 @@
 import { default as React } from 'react';
+import { PageHeaderAction } from './PageHeader';
 export interface TableColumn<T = any> {
     /** Unique column identifier */
     id: string;
@@ -42,6 +43,8 @@ export interface TableFilter {
     label: string;
     /** Filter type */
     type?: "select" | "date" | "dateRange";
+    /** Leading icon on the chip — what the filter is about, at a glance. */
+    icon?: React.ReactNode;
     /** Filter options (for select type) */
     options?: Array<{
         value: string;
@@ -79,13 +82,26 @@ export interface TableProps<T = any> {
     searchable?: boolean;
     /** Search placeholder text */
     searchPlaceholder?: string;
+    /**
+     * Take over the query. Pass this pair when the page already filters its own
+     * data — across fields no column exposes, or together with filters of its
+     * own — and only wants the search plate to sit in the toolbar where the
+     * design puts it. The built-in column search then stays out of the way;
+     * without them the table owns both the box and the filtering.
+     */
+    searchValue?: string;
+    onSearchChange?: (value: string) => void;
     /** Table filters */
     filters?: TableFilter[];
+    /**
+     * Buttons for the toolbar above the table — "New …", import, export. This is
+     * where a list's own actions belong: the page header names the page, the
+     * table owns what you do to it.
+     */
+    toolbarActions?: PageHeaderAction[];
     /** Whether table has pagination */
     paginated?: boolean;
-    /** Page size options */
-    pageSizeOptions?: number[];
-    /** Default page size */
+    /** Rows per page. Fixed — the footer is a summary and a page list, nothing to set. */
     defaultPageSize?: number;
     /** Row actions */
     actions?: TableAction<T>[];
@@ -101,14 +117,16 @@ export interface TableProps<T = any> {
     getRowKey?: (row: T, index: number) => string | number;
     /** Empty state content */
     emptyContent?: React.ReactNode;
-    /** Table size */
+    /**
+     * Left-hand line under the table. Defaults to the range/total count on a
+     * paginated table; pass a node to say it in the app's own words ("9 of 1,284
+     * contacts"), which also gives an unpaginated table that one line.
+     */
+    footerSummary?: React.ReactNode;
+    /** Row density. `md` is the default data row; `sm` for a dense inline list. */
     size?: "sm" | "md" | "lg";
     /** Whether to show row hover */
     hoverable?: boolean;
-    /** Whether to show row borders */
-    bordered?: boolean;
-    /** Whether to stripe rows */
-    striped?: boolean;
     /** Additional CSS classes */
     className?: string;
     /** Custom row className */
@@ -119,10 +137,11 @@ export interface TableProps<T = any> {
      * surface, where a second wash just muddies the edge.
      */
     headerBackground?: boolean;
-    /** Padding on the left and right of the table */
+    /** Horizontal padding inside the table box. */
     padding?: "none" | "sm" | "md" | "lg";
 }
 /**
- * High-performance Table component with sorting, pagination, search, and custom renderers
+ * Data table: a bordered box with a tinted column strip, a toolbar above it
+ * (search, filters, the list's own actions) and a summary + paginator below.
  */
-export declare const Table: <T extends Record<string, any>>({ data, columns, loading, searchable, searchPlaceholder, filters, paginated, pageSizeOptions, defaultPageSize, actions, onRowClick, selectable, selectedRows, onSelectionChange, getRowKey, emptyContent, hoverable, bordered, striped, padding, className, rowClassName, headerBackground, }: TableProps<T>) => React.JSX.Element;
+export declare const Table: <T extends Record<string, any>>({ data, columns, loading, searchable, searchPlaceholder, searchValue, onSearchChange, filters, toolbarActions, paginated, defaultPageSize, actions, onRowClick, selectable, selectedRows, onSelectionChange, getRowKey, emptyContent, footerSummary, size, hoverable, padding, className, rowClassName, headerBackground, }: TableProps<T>) => React.JSX.Element;

package/dist/src/forms/Form.d.ts

@@ -1,6 +1,6 @@
 import { InternalSDK } from '@opencxh/domain';
 import { default as React } from 'react';
-export type FormFieldType = "text" | "email" | "password" | "number" | "tel" | "url" | "textarea" | "select" | "checkbox" | "radio" | "date" | "file" | "folder" | "custom" | "array";
+export type FormFieldType = "text" | "email" | "password" | "number" | "tel" | "url" | "textarea" | "select" | "segmented" | "checkbox" | "radio" | "date" | "file" | "folder" | "custom" | "array";
 /**
  * `NonNullable` before the `object` test is load-bearing: form data is routinely
  * a `Partial<T>`, which makes every property `X | undefined`, and
@@ -30,6 +30,22 @@ type NestedKeys<T> = T extends unknown ? {
  * up on inferring `group.items` once it gets large enough.
  */
 type FieldPath<T> = NestedKeys<T> | (keyof T & string);
+/**
+ * One band of a page-wide form: a fixed label column with the section title and
+ * its explanation, and the fields beside it.
+ *
+ * Exported because a page often has a section that is not a `Form` field at all
+ * — a checklist, a list of linked records — and it has to line up with the bands
+ * above it. Without this those sections each re-derive the column width and the
+ * spacing, and they drift.
+ */
+export declare function FormSection({ title, description, className, children, }: {
+    title?: string;
+    description?: string;
+    /** Caller owns the divider: only it knows whether it is the last band. */
+    className?: string;
+    children: React.ReactNode;
+}): React.JSX.Element;
 export interface FormGroupItem<T = any> {
     /** Field name (key in form data) */
     name: FieldPath<T>;

package/dist/src/index.d.ts

@@ -13,12 +13,13 @@ 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 { SearchField, type SearchFieldProps } from './input/SearchField';
 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 { Form, FormSection, 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';
@@ -41,7 +42,7 @@ export { List, ListBulkAction, type ListGroup, type ListProps } from './content/
 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 { PageToolbar, PageToolbarActions, type PageToolbarActionsProps, type PageToolbarProps } from './content/PageToolbar';
 export { RichText, type RichTextProps } from './content/RichText';
 export { SectionDivider, type SectionDividerProps } from './content/SectionDivider';
 export { SettingsRow, SettingsSection, type SettingsRowProps, type SettingsSectionProps } from './content/SettingsRow';

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

@@ -0,0 +1,33 @@
+import { default as React } from 'react';
+export interface SearchFieldProps extends Omit<React.InputHTMLAttributes<HTMLInputElement>, "size" | "value" | "onChange" | "type"> {
+    /** Current query. Controlled — this field has no internal state. */
+    value: string;
+    /** Called with the new query text (not the event). */
+    onValueChange: (value: string) => void;
+    /**
+     * Keyboard hint shown at the trailing edge while the field is empty —
+     * `⌘K`, `⌘F`. Replaced by the clear button once there is a query.
+     */
+    hint?: string;
+    /** `md` is the default control height; `sm` for a dense bar. */
+    size?: "sm" | "md";
+    /** Accessible name for the clear button. */
+    clearLabel?: string;
+    /** Classes for the plate around the input. */
+    containerClassName?: string;
+}
+/**
+ * The sunk, frameless search plate: a magnifier, the query, and either a
+ * keyboard hint or a clear button. It is deliberately *not* a `TextField` —
+ * a bordered box would read as one more empty input in a toolbar that already
+ * has filter chips and buttons, where this is the thing you type into.
+ *
+ * Three places had grown their own copy of it (the nav search, the settings
+ * search, the table toolbar); they share this one now.
+ *
+ * @example
+ * ```tsx
+ * <SearchField value={query} onValueChange={setQuery} placeholder="Zoeken" hint="⌘K" />
+ * ```
+ */
+export declare const SearchField: React.ForwardRefExoticComponent<SearchFieldProps & React.RefAttributes<HTMLInputElement>>;

package/package.json

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