@epam/ai-dial-ui-kit 0.16.0-dev.5 → 0.16.0-dev.50

package/dist/src/components/New/Calendar/Calendar.d.ts

@@ -24,10 +24,17 @@ export interface CalendarProps {
     fieldClassName?: string;
     /**
      * Shows the viewer's timezone (e.g. `(GMT+01:00) Europe/Berlin`, computed
-     * by `getTimezoneLabel`) at the trailing edge of the `time` field, naming
+     * by `getTimezoneLabel`) at the trailing edge of the time fields — the
+     * `time` mode field and the `datetime` popover footer's field — naming
      * the zone the entered time-of-day refers to.
      */
     showTimezone?: boolean;
+    /**
+     * `time` mode only: shows a clock button at the field's trailing edge that
+     * opens an hour/minute list popover. The field stays typeable either way.
+     * @default true
+     */
+    showTimePicker?: boolean;
 }
 /**
  * A date/time picker supporting four selection modes.
@@ -63,6 +70,7 @@ export interface CalendarProps {
  * @param [maxDate] - Latest selectable date (date/datetime modes)
  * @param [locale="en-GB"] - BCP 47 locale tag used to localize month/weekday names and date formatting
  * @param [fieldClassName] - Additional classes merged onto the trigger field, overriding conflicting defaults
- * @param [showTimezone=false] - Shows the viewer's timezone (e.g. `(GMT+01:00) Europe/Berlin`) at the trailing edge of the `time` field
+ * @param [showTimezone=false] - Shows the viewer's timezone (e.g. `(GMT+01:00) Europe/Berlin`) at the trailing edge of the time fields (`time` mode and the `datetime` popover footer)
+ * @param [showTimePicker=true] - `time` mode only: shows a clock button that opens an hour/minute list popover next to the typeable field
  */
 export declare const Calendar: FC<CalendarProps>;

package/dist/src/components/New/Calendar/TimePickerPanel.d.ts

@@ -0,0 +1,15 @@
+import { FC } from 'react';
+export interface TimePickerPanelProps {
+    /** Current `"HH:mm"` value, or an empty/partial string when nothing is picked yet. */
+    value: string;
+    /** Fired with a complete `"HH:mm"` value; `done` is true once the minutes were chosen. */
+    onSelect: (next: string, done: boolean) => void;
+}
+/**
+ * Two-column hour/minute list shown in the `time` mode popover. Picking an
+ * hour keeps the current minutes (or `00`); picking minutes keeps the current
+ * hour (or `00`) and signals completion so the popover can close.
+ * @param value - current `"HH:mm"` value
+ * @param onSelect - fired with the next complete value and whether to close
+ */
+export declare const TimePickerPanel: FC<TimePickerPanelProps>;

package/dist/src/components/New/Calendar/constants.d.ts

@@ -1,17 +1,19 @@
 import { CalendarMode } from '../../../types/calendar';
 export declare const DEFAULT_CALENDAR_LOCALE = "en-GB";
 export declare const calendarModeDefaultPlaceholder: Record<CalendarMode, string>;
-export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-accent-alpha focus-within:border-accent-focus";
+export declare const calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-hidden transition-colors hover:border-accent-alpha focus-within:border-accent-focus";
 export declare const calendarFieldDisabledClassName = "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-primary hover:!border-transparent";
 export declare const calendarFieldInvalidClassName = "!border-error";
 export declare const calendarPopoverClassName = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md";
-export declare const calendarDayButtonBaseClassName = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-none focus-visible:outline focus-visible:outline-focus";
+export declare const timePickerPopoverClassName = "z-floating rounded-lg bg-layer-raised p-2 shadow-md";
+export declare const timePickerButtonClassName = "absolute end-2 top-1/2 flex size-8 -translate-y-1/2 items-center justify-center rounded-lg text-secondary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-hidden focus-visible:outline focus-visible:outline-focus disabled:cursor-not-allowed disabled:text-control-disable-primary disabled:hover:bg-transparent";
+export declare const calendarDayButtonBaseClassName = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-hidden focus-visible:outline focus-visible:outline-focus";
 export declare const calendarDaySelectedClassName = "bg-control-accent text-control-permanent";
 export declare const calendarDayTodayClassName = "text-accent dial-small-semi-text";
 export declare const calendarDayOutsideClassName = "text-control-disable-primary";
 export declare const calendarFieldIconClassName = "text-secondary";
-export declare const calendarIcon: import("react/jsx-runtime").JSX.Element;
+export declare const calendarIcon: import('react/jsx-runtime').JSX.Element;
 export declare const calendarNavIcons: {
-    prev: import("react/jsx-runtime").JSX.Element;
-    next: import("react/jsx-runtime").JSX.Element;
+    prev: import('react/jsx-runtime').JSX.Element;
+    next: import('react/jsx-runtime').JSX.Element;
 };

package/dist/src/components/New/CaptionText/CaptionText.d.ts

@@ -9,9 +9,16 @@ export interface CaptionTextProps extends HTMLAttributes<HTMLSpanElement> {
  * aliases: HelperText|ValidationText
  * Design system 2.0
  *
+ * It carries no live-region role: a field caption or error is described, not
+ * announced. Give it an `id` and point the control's `aria-describedby` at it
+ * (the 2.0 form controls do this for their own `caption` / `error`). Wrap it in
+ * a `role="alert"` region only for a message that must interrupt, such as a
+ * failed submit.
+ *
  * @example
  * ```tsx
- * <CaptionText text="This field is required" variant={CaptionType.Error} />
+ * <input aria-describedby="name-error" aria-invalid />
+ * <CaptionText id="name-error" text="This field is required" variant={CaptionType.Error} />
  * ```
  *
  * @param [text] - The text to display. If undefined or empty, nothing is rendered

package/dist/src/components/New/Dropdown/Dropdown.d.ts

@@ -2,6 +2,7 @@ import { Placement } from '@floating-ui/react';
 import { CSSProperties, FC, MouseEvent, ReactNode, RefObject } from 'react';
 import { DropdownTrigger } from '../../../types/dropdown';
 import { DropdownItem } from '../../../models/dropdown';
+import { DropdownItemFilter } from './search';
 export interface DropdownProps {
     children: ReactNode;
     items?: DropdownItem[];
@@ -46,6 +47,34 @@ export interface DropdownProps {
      * opens, matching the pre-existing behavior.
      */
     initialFocus?: 0 | -1 | RefObject<HTMLElement | null>;
+    /**
+     * Puts a search field above `items` that narrows them as the user types and
+     * highlights the match in each remaining label. The query is cleared when
+     * the menu closes.
+     */
+    searchable?: boolean;
+    /** Controlled query of the search field; when omitted, the dropdown keeps its own. */
+    searchValue?: string;
+    /** Fired with every edit of the search field, and with `''` when the menu closes. */
+    onSearchChange?: (value: string) => void;
+    /** Placeholder and accessible name of the search field. */
+    searchPlaceholder?: string;
+    /** Accessible name of the search field's clear button. */
+    searchClearLabel?: string;
+    /** Text shown, and announced, when the query leaves no items. */
+    noResultsLabel?: string;
+    /**
+     * Decides whether an item matches the query, which arrives trimmed and
+     * lower-cased. Defaults to a substring match on a string `label`. A submenu
+     * whose own row matches keeps all its children; otherwise it keeps only the
+     * matching ones, and disappears when none do.
+     */
+    filterItem?: DropdownItemFilter;
+    /**
+     * Number of rows the item list shows before it scrolls. The cap applies to
+     * the list alone, so a search field or header stays in view above it.
+     */
+    maxVisibleItems?: number;
 }
 /**
  *
@@ -83,6 +112,11 @@ export interface DropdownProps {
  * <Dropdown closable renderOverlay={() => <div className="p-3">Custom content</div>}>
  *   <button type="button" className="px-3 py-2 rounded border">Custom</button>
  * </Dropdown>
+ *
+ * // Searchable menu, seven rows tall before it scrolls
+ * <Dropdown searchable maxVisibleItems={7} items={items}>
+ *   <button type="button" className="px-3 py-2 rounded border">Create</button>
+ * </Dropdown>
  * ```
  *
  * @param children - Trigger element(s) to anchor and open the menu
@@ -111,5 +145,13 @@ export interface DropdownProps {
  * @param [matchReferenceWidth=true] - Whether to match the reference element's width
  * @param [maxDropdownHeight] - Maximum height of the dropdown menu; when omitted, no limit is applied
  * @param [initialFocus] - Initial focus target inside the overlay on open, forwarded to `FloatingFocusManager`; when omitted, matches pre-existing behavior
+ * @param [searchable=false] - Show a search field above `items` that filters them and highlights the match
+ * @param [searchValue] - Controlled query of the search field
+ * @param [onSearchChange] - Fired with every edit of the search field, and with `''` when the menu closes
+ * @param [searchPlaceholder="Search"] - Placeholder and accessible name of the search field
+ * @param [searchClearLabel="Clear search"] - Accessible name of the search field's clear button
+ * @param [noResultsLabel="No results found"] - Text shown and announced when the query leaves no items
+ * @param [filterItem] - Item matcher; defaults to a case-insensitive substring match on a string `label`
+ * @param [maxVisibleItems] - Rows the item list shows before it scrolls
  */
 export declare const Dropdown: FC<DropdownProps>;

package/dist/src/components/New/Dropdown/constants.d.ts

@@ -11,5 +11,11 @@ export declare const dropdownItemListClassName: string;
  */
 export declare const dropdownItemBaseClassName: string;
 export declare const dropdownDividerClassName = "my-1 border-t border-tertiary";
+/** The search row of a `searchable` dropdown: pinned above the item list, which scrolls on its own. */
+export declare const dropdownSearchClassName = "shrink-0 px-1 pt-1";
+/** The no-results line of a `searchable` dropdown, styled as a `PlainText` row. */
+export declare const dropdownNoResultsClassName = "px-3 py-2 text-secondary dial-caption-text";
+/** Height of the item list that shows exactly `rows` rows before it scrolls. */
+export declare const getDropdownListHeight: (rows: number) => number;
 export declare const dropdownGap = 4;
-export declare const submenuCaretIcon: import("react/jsx-runtime").JSX.Element;
+export declare const submenuCaretIcon: import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Dropdown/search.d.ts

@@ -0,0 +1,9 @@
+import { DropdownItem } from '../../../models/dropdown';
+/** Decides whether an item matches a non-empty, trimmed, lower-cased query. */
+export type DropdownItemFilter = (item: DropdownItem, query: string) => boolean;
+/** Case-insensitive substring match on a string `label`; an item with a non-string label never matches. */
+export declare const matchDropdownItemLabel: DropdownItemFilter;
+/** Returns `items` narrowed to the rows matching `query`; an empty query returns `items` unchanged. */
+export declare const filterDropdownItems: (items: DropdownItem[], query: string, isMatch?: DropdownItemFilter) => DropdownItem[];
+/** Returns `items` with every string row label, submenus included, rendered through a single-line `Highlight` of `query`. */
+export declare const highlightDropdownItems: (items: DropdownItem[], query: string) => DropdownItem[];

package/dist/src/components/New/EntityIdentity/EntityIdentity.d.ts

@@ -26,6 +26,8 @@ export interface EntityIdentityProps {
     item: EntityIdentityItem;
     /** User-visible strings; pass translated ones in a localised app. */
     labels?: EntityIdentityLabels;
+    /** Whether to show the type label above the name. */
+    showType?: boolean;
     /** Whether to show `item.version` next to the name. */
     showVersion?: boolean;
     /** Whether to show the featured chip when `item.isFeatured` is true. */
@@ -61,8 +63,9 @@ export interface EntityIdentityProps {
  *
  * The type label is plain uppercase text coloured by `item.type`. The icon is
  * a square `Avatar`, so a missing or broken image falls back to the initials of
- * the name. The icon is decorative: the name next to it already names the
- * entity.
+ * the name. The image sits on the `bg-entity-icon` plate, so a dark theme can
+ * keep a dark, transparent logo legible. The icon is decorative: the name next
+ * to it already names the entity.
  *
  * @example
  * ```tsx
@@ -74,6 +77,7 @@ export interface EntityIdentityProps {
  *
  * @param item - The entity to display
  * @param [labels] - User-visible strings
+ * @param [showType=true] - Whether to show the type label
  * @param [showVersion=true] - Whether to show the version
  * @param [hasFeaturedTag=true] - Whether to show the featured chip for a featured entity
  * @param [iconSize=48] - Icon size in px

package/dist/src/components/New/FilterChips/FilterChips.d.ts

@@ -66,4 +66,4 @@ export interface FilterChipsProps<T extends string = string> {
  * @param [aria-label] - Names the row as a whole
  * @param [aria-labelledby] - Names the row from an existing element, e.g. a visible heading
  */
-export declare const FilterChips: <T extends string = string>({ items, value, onChange, stretch, className, chipClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: FilterChipsProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const FilterChips: <T extends string = string>({ items, value, onChange, stretch, className, chipClassName, "aria-label": ariaLabel, "aria-labelledby": ariaLabelledBy, }: FilterChipsProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/FolderPath/FolderPath.d.ts

@@ -7,12 +7,20 @@ export interface FolderPathProps {
     ariaLabel?: string;
 }
 /**
- * A read-only, non-clickable folder/location path built on top of `DialBreadcrumb`.
+ * A read-only, non-clickable folder/location path styled like `DialBreadcrumb`.
  * aliases: FolderBreadcrumb|LocationPath
  * Design system 2.0
  *
  * Every segment is disabled (no navigation); the first segment gets a leading
- * folder icon and the last segment is styled as the current/leaf item.
+ * folder icon and the last segment is styled as the current/leaf item. A path
+ * of more than three segments collapses its middle into a non-interactive `…`
+ * that shows the full path (`Shared > Team > Sub > Reports`) in a tooltip on
+ * hover; the hidden segments stay in the accessible text.
+ *
+ * When the path is too wide, the leaf keeps its width longest: the folder
+ * before it truncates first, down to about one character, and if the leaf
+ * still does not fit, that folder joins the `…` as well. Only then does the
+ * leaf truncate.
  *
  * @example
  * ```tsx
@@ -22,11 +30,11 @@ export interface FolderPathProps {
  * @param segments - Path segments to display, outermost first
  * @param [labelClassName='dial-small-text'] - Additional CSS classes applied to non-leaf segments
  * @param [leafClassName='dial-small-semi-text'] - Additional CSS classes applied to the last (leaf) segment
- * @param [className] - Additional CSS classes applied to the breadcrumb's `<nav>` element.
- *  `DialBreadcrumb` scrolls horizontally on overflow, so this must not shrink
- *  the nav to content width (e.g. never `w-auto`).
- * @param [ariaLabel='Folder path'] - Accessible name for the underlying `<nav>`.
- *  `DialBreadcrumb` would otherwise name it "Breadcrumb", which misdescribes a
- *  path with no navigable items; override it when a page shows more than one.
+ * @param [className] - Additional CSS classes applied to the `<nav>` element.
+ *  The nav clips on overflow, so this must not shrink it to content width
+ *  (e.g. never `w-auto`).
+ * @param [ariaLabel='Folder path'] - Accessible name for the `<nav>`. A path
+ *  has no navigable items, so it is not named "Breadcrumb"; override it when a
+ *  page shows more than one.
  */
 export declare const FolderPath: FC<FolderPathProps>;

package/dist/src/components/New/FormSection/FormSection.d.ts

@@ -0,0 +1,63 @@
+import { FC, ReactNode } from 'react';
+import { FormSectionVariant } from '../../../types/form-section';
+export type FormSectionHeadingLevel = 2 | 3 | 4 | 5 | 6;
+export interface FormSectionProps {
+    /** Heading of the section; also names the `section` landmark. */
+    title: ReactNode;
+    /** Control at the end of the heading row — typically a small "Add" or "Change" button. */
+    action?: ReactNode;
+    /** Optional line under the heading saying what the section holds. */
+    description?: ReactNode;
+    /** Type scale of the heading and description. Defaults to `FormSectionVariant.Row`. */
+    variant?: FormSectionVariant;
+    /** Level of the heading element, to fit the page's outline. Defaults to `3`. */
+    headingLevel?: FormSectionHeadingLevel;
+    /** The section's fields or values. */
+    children?: ReactNode;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Additional CSS classes for the heading. */
+    titleClassName?: string;
+    /** Additional CSS classes for the description. */
+    descriptionClassName?: string;
+    /** Additional CSS classes for the content wrapper. */
+    contentClassName?: string;
+}
+/**
+ * A titled section of a form or a builder column: a heading with an optional
+ * action at its end, an optional description and the section's content.
+ * aliases: SectionRow|FieldSection|SettingsSection|FormGroup|SectionHeader
+ * Design system 2.0
+ *
+ * The root is a `section` named by its heading, so each section is a region a
+ * screen reader can jump to. `headingLevel` picks the heading element so the
+ * section fits the outline of the page it is mounted in; the variant only sets
+ * the type scale. The action sits at the inline end of the heading row and
+ * never shrinks; the content is rendered as given, with no field styling of its
+ * own. For a collapsible group, use `Accordion`; for a single labelled control,
+ * the control's own `label`.
+ *
+ * @example
+ * ```tsx
+ * <FormSection
+ *   title="Model"
+ *   variant={FormSectionVariant.Caption}
+ *   action={<GhostButton label="Change" onClick={openPicker} />}
+ *   description="The model that answers in this application."
+ * >
+ *   <SelectedEntityCard entityId={modelId} />
+ * </FormSection>
+ * ```
+ *
+ * @param title - Heading of the section; also names the `section` landmark.
+ * @param [action] - Control at the end of the heading row.
+ * @param [description] - Optional line under the heading.
+ * @param [variant] - Type scale of the heading and description. Defaults to `FormSectionVariant.Row`.
+ * @param [headingLevel] - Level of the heading element. Defaults to `3`.
+ * @param [children] - The section's fields or values.
+ * @param [className] - Additional CSS classes for the container.
+ * @param [titleClassName] - Additional CSS classes for the heading.
+ * @param [descriptionClassName] - Additional CSS classes for the description.
+ * @param [contentClassName] - Additional CSS classes for the content wrapper.
+ */
+export declare const FormSection: FC<FormSectionProps>;

package/dist/src/components/New/Grid/Grid.d.ts

@@ -2,7 +2,7 @@ import { ColDef, GridApi, GridOptions } from 'ag-grid-community';
 import { ReactNode } from 'react';
 import { DropdownItem } from '../../../models/dropdown';
 import { GridSelectionMode } from '../../../models/selection-mode';
-import { GridColorScheme } from '../../../types/grid';
+import { GridAppearance, GridColorScheme } from '../../../types/grid';
 /** Column id of the selection column this component prepends itself. */
 export declare const GRID_SELECTION_COLUMN_ID = "dial-kit-grid-selection";
 export interface GridProps<T extends object = Record<string, unknown>> {
@@ -60,6 +60,11 @@ export interface GridProps<T extends object = Record<string, unknown>> {
      * dark. Defaults to `light`, which leaves the current appearance unchanged.
      */
     colorScheme?: GridColorScheme;
+    /**
+     * Visual treatment. `Chat` draws the borderless "Chat table" card and
+     * ignores `wrapperBorder`. Defaults to `GridAppearance.Default`.
+     */
+    appearance?: GridAppearance;
 }
 /**
  * A data grid built on ag-Grid, wired to the 2.0 tokens and controls.
@@ -131,5 +136,6 @@ export interface GridProps<T extends object = Record<string, unknown>> {
  * @param [selectRowLabel] - Accessible name of a row's selection control.
  * @param [selectAllLabel='Select all rows'] - Accessible name of the select-all control.
  * @param [colorScheme='light'] - AG Grid color scheme. `dark` paints native controls dark.
+ * @param [appearance='default'] - Visual treatment; `chat` draws the borderless "Chat table".
  */
-export declare const Grid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, selectRowLabel, selectAllLabel, colorScheme, }: GridProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const Grid: <T extends object>({ columnDefs, rowData, additionalGridOptions, getContextMenuItems, className, ariaLabel, wrapCustomCellRenderers, disabledRowIds, selectedRowIds, onSelectionChange, onGridApiChange, getRowId, alternateOddRowColors, filterPlaceholder, emptyStateIcon, emptyStateTitle, emptyStateDescription, loading, wrapperBorder, withoutHeaderBorders, allowDisabledContextMenu, selectionMode, selectRowLabel, selectAllLabel, colorScheme, appearance, }: GridProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Grid/components/SelectionCell.d.ts

@@ -18,4 +18,4 @@ export interface SelectionCellProps<T> {
  * `rowSelected` event, so a selection made anywhere — another cell, the header,
  * or the `selectedRowIds` prop — is reflected here without refreshing the cell.
  */
-export declare const SelectionCell: <T>({ params, mode, label, radioName, rowId, disabled, }: SelectionCellProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectionCell: <T>({ params, mode, label, radioName, rowId, disabled, }: SelectionCellProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Grid/components/SelectionHeader.d.ts

@@ -11,4 +11,4 @@ export interface SelectionHeaderProps<T> extends IHeaderParams<T> {
  * rows put it in the `mixed` state, and disabled rows are excluded from the
  * count so a grid whose selectable rows are all selected still reads as full.
  */
-export declare const SelectionHeader: <T>({ api, label, }: SelectionHeaderProps<T>) => import("react/jsx-runtime").JSX.Element;
+export declare const SelectionHeader: <T>({ api, label, }: SelectionHeaderProps<T>) => import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/Grid/constants.d.ts

@@ -2,6 +2,8 @@
 export declare const GRID_ROOT_CLASS = "dial-kit-grid";
 /** Present only while a selection column is rendered. Drives its reveal. */
 export declare const GRID_WITH_SELECTION_CLASS = "dial-kit-grid-with-selection";
+/** Present on `GridAppearance.Chat`: the "Chat table" card, dividers and rows. */
+export declare const GRID_CHAT_CLASS = "dial-kit-grid-chat";
 export declare const GRID_WITHOUT_HEADER_BORDERS_CLASS = "dial-kit-grid-without-header-borders";
 /** Cell of the selection column: faded out until the row is hovered. */
 export declare const GRID_ROW_SELECT_CLASS = "dial-kit-grid-row-select";

package/dist/src/components/New/InteractiveTooltip/constants.d.ts

@@ -11,7 +11,7 @@ export declare const INTERACTIVE_TOOLTIP_GAP = 8;
 export declare const INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY = 400;
 /**
  * The panel sits one step of the overlay ladder (`z-interactive-tooltip`, see
- * `zIndex` in `tailwind.config.js`) above the surface it is anchored to — a
+ * `--z-index-*` in `src/styles/theme.scss`) above the surface it is anchored to — a
  * dropdown or select overlay, both `z-floating` — since it can be opened from
  * a row inside one of them.
  *

package/dist/src/components/New/LabelledText/LabelledText.d.ts

@@ -0,0 +1,48 @@
+import { FC, ReactNode } from 'react';
+export interface LabelledTextProps {
+    /** Small caption above the value, naming it. */
+    label: ReactNode;
+    /** The value. Truncates with an ellipsis, revealing the full text in a tooltip only when clipped. */
+    text?: ReactNode;
+    /** Tooltip content shown instead of `text` while it is clipped. */
+    tooltip?: ReactNode;
+    /** Custom value content, rendered instead of `text`. */
+    children?: ReactNode;
+    /** Element after the value, e.g. a copy button. */
+    postfix?: ReactNode;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+}
+/**
+ * A read-only label/value pair: a small caption above a value.
+ * aliases: LabelValue|DisplayText|ReadOnlyField|KeyValue
+ * Design system 2.0
+ *
+ * The caption is the kit's `Label`, so it matches the other 2.0 fields. There is
+ * no control to point its `htmlFor` at: it sits beside the value and reads in
+ * DOM order. It is not a form field: use `Label` with an input for editable
+ * values.
+ *
+ * Without `children` the value is a single line capped at 200px that truncates;
+ * the tooltip appears only while the text is actually clipped. With `children`
+ * the value takes the content's own width.
+ *
+ * @example
+ * ```tsx
+ * <LabelledText label="Endpoint" text="https://example.com/v1/chat" />
+ *
+ * <LabelledText
+ *   label="Key"
+ *   text="sk-0000"
+ *   postfix={<IconButton icon={<IconCopy />} ariaLabel="Copy key" />}
+ * />
+ * ```
+ *
+ * @param label - Caption above the value.
+ * @param [text] - The value, truncated with an ellipsis when it does not fit.
+ * @param [tooltip] - Tooltip content used instead of `text` while it is clipped.
+ * @param [children] - Custom value content, rendered instead of `text`.
+ * @param [postfix] - Element after the value.
+ * @param [className] - Additional CSS classes for the root element.
+ */
+export declare const LabelledText: FC<LabelledTextProps>;

package/dist/src/components/New/MarkdownEditor/lazy.d.ts

@@ -1,7 +1,13 @@
 /**
  * Shared leaf module for the 2.0 Markdown editor's lazy loader. Both
  * `src/index.ts` (root) and `src/subpaths/editors.ts` (`./editors`)
- * re-export this same binding instead of each declaring their own copy -
- * see `src/components/JsonEditor/lazy.ts`'s comment for why.
+ * re-export this same binding instead of each declaring their own copy of
+ * the loader function. The duplication it replaced was an emitted-topology
+ * defect, not just source-level duplication: a loader function's body
+ * containing its own `import()` call, when duplicated verbatim into more than
+ * one entry's own emitted chunk, can pull an unrelated dynamically-imported
+ * feature into the initial graph in some Vite/Rolldown versions - see
+ * `openspec/changes/isolate-heavy-feature-modules` Section 9's
+ * `diagnosis-baseline.txt` for the measured reproduction.
  */
-export declare const LazyMarkdownEditor: () => Promise<typeof import("./MarkdownEditor")>;
+export declare const LazyMarkdownEditor: () => Promise<typeof import('./MarkdownEditor')>;

package/dist/src/components/New/MenuItem/constants.d.ts

@@ -2,4 +2,4 @@
  * Marks the chosen row in a `MenuItemMark.Check` list. Decorative: the row's
  * `aria-checked`/`aria-selected` already carries the state.
  */
-export declare const menuItemCheckIcon: import("react/jsx-runtime").JSX.Element;
+export declare const menuItemCheckIcon: import('react/jsx-runtime').JSX.Element;

package/dist/src/components/New/NoDataContent/NoDataContent.d.ts

@@ -4,8 +4,10 @@ export interface NoDataContentProps {
     title: ReactNode;
     /** Optional secondary line under the title. */
     description?: ReactNode;
-    /** Illustration above the title. Defaults to the empty-state document mark. */
+    /** Illustration above the title. Defaults to the placeholder-list card. */
     icon?: ReactNode;
+    /** Optional way forward, such as a button, rendered under the text. */
+    action?: ReactNode;
     /**
      * Announces the empty state to assistive tech as it appears. Turn it on where
      * the content replaces a list the user has just filtered or searched.
@@ -23,23 +25,29 @@ export interface NoDataContentProps {
  * aliases: EmptyState|NoResults|ZeroState
  * Design system 2.0
  *
- * Fills its container and centres an illustration, a headline and an optional
- * secondary line. The icon is decorative, so it is hidden from assistive tech
- * and the text carries the message on its own.
+ * Fills its container and centres an illustration, a headline, an optional
+ * secondary line and an optional action. The icon is decorative, so it is
+ * hidden from assistive tech and the text carries the message on its own.
  *
  * @example
  * ```tsx
  * <NoDataContent
- *   title="No results found"
- *   description="Try a different search term."
+ *   title="No chats found"
+ *   description="Try a different search term or check your filters."
+ *   live
  * />
  *
- * <NoDataContent title="Nothing here yet" icon={<IconInbox size={60} />} live />
+ * <NoDataContent
+ *   title="No chats yet"
+ *   description="Chats will appear here once you start one."
+ *   action={<Button label="New chat" onClick={createChat} />}
+ * />
  * ```
  *
  * @param title - Headline of the empty state.
  * @param [description] - Optional secondary line under the title.
- * @param [icon] - Illustration above the title. Defaults to the empty-state document mark.
+ * @param [icon] - Illustration above the title. Defaults to the placeholder-list card.
+ * @param [action] - Optional way forward, rendered under the text.
  * @param [live=false] - Announce the empty state to assistive tech as it appears.
  * @param [className] - Additional CSS classes for the container.
  * @param [titleClassName] - Additional CSS classes for the title.

package/dist/src/components/New/NoDataContent/NoDataIllustration.d.ts

@@ -0,0 +1,7 @@
+import { FC } from 'react';
+/**
+ * The empty-state illustration: a card holding three placeholder list rows.
+ * Every colour comes from a layer or stroke token, so it follows the theme
+ * instead of staying a light card on a dark surface.
+ */
+export declare const NoDataIllustration: FC;

package/dist/src/components/New/PasswordInput/PasswordInput.d.ts

@@ -5,6 +5,8 @@ export interface PasswordInputProps extends Omit<InputProps, 'type' | 'iconAfter
     showPasswordLabel?: string;
     /** Accessible name of the reveal toggle while the value is visible. */
     hidePasswordLabel?: string;
+    /** Hides the reveal toggle while the field stays editable, and keeps the value masked. */
+    isToggleHidden?: boolean;
 }
 /**
  * A password field with a reveal toggle, built on {@link Input}.
@@ -18,6 +20,9 @@ export interface PasswordInputProps extends Omit<InputProps, 'type' | 'iconAfter
  * A disabled field is masked with no toggle at all, and comes back masked if it
  * is enabled again.
  *
+ * `isToggleHidden` does the same without disabling the field: use it when there
+ * is nothing to reveal, such as a stored secret the server never returns.
+ *
  * @example
  * ```tsx
  * <PasswordInput
@@ -32,5 +37,6 @@ export interface PasswordInputProps extends Omit<InputProps, 'type' | 'iconAfter
  * @param [hidePasswordLabel="Hide password"] - Accessible name of the toggle while the value is visible
  * @param [size=ElementSize.Standard] - Field height: standard is 40px, small is 24px
  * @param [disabled=false] - Disables the field, masks it, and hides the reveal toggle
+ * @param [isToggleHidden=false] - Hides the reveal toggle and keeps the value masked, leaving the field editable
  */
 export declare const PasswordInput: FC<PasswordInputProps>;

package/dist/src/components/New/Popup/constants.d.ts

@@ -2,7 +2,7 @@ import { PopupSize } from '../../../types/popup';
 export declare const popupOverlayBaseClassName = "z-popup flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6";
 export declare const popupBaseClassName = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto";
 export declare const popupHeaderClassName = "flex flex-row items-center justify-between px-6 py-4";
-export declare const popupTitleClassName = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary";
+export declare const popupTitleClassName = "flex-1 min-w-0 mr-3 truncate dial-h2-text text-primary";
 /** Rule under the header. Opt-in: by default sections are separated by spacing. */
 export declare const popupHeaderDividerClassName = "border-b border-tertiary";
 export declare const popupFooterClassName = "flex flex-row items-center gap-2 px-6 py-4";

package/dist/src/components/New/ResizeHandle/ResizeHandle.d.ts

@@ -0,0 +1,68 @@
+import { FC, ReactNode } from 'react';
+/** Props for `ResizeHandle`. */
+export interface ResizeHandleProps {
+    /** Current width of the panel the handle resizes, in px. */
+    width: number;
+    /** Smallest width the handle can set, in px. */
+    minWidth: number;
+    /** Largest width the handle can set, in px. */
+    maxWidth: number;
+    /** Width a double click resets the panel to, in px. Without it a double click does nothing. */
+    defaultWidth?: number;
+    /** Called with the next width, already limited to `minWidth`–`maxWidth`. */
+    onWidthChange: (width: number) => void;
+    /** Accessible name of the separator. */
+    label: string;
+    /** Hint shown beside the pointer once it rests on the handle. */
+    tooltip?: ReactNode;
+    /** Width change of one arrow key press, in px. Defaults to `16`. */
+    keyboardStep?: number;
+    /** Additional CSS classes for the handle, e.g. to change its position. */
+    className?: string;
+}
+/**
+ * A vertical separator on the inline-end edge of a panel that resizes the panel
+ * by pointer or keyboard.
+ * aliases: Splitter|ColumnResizer|DragHandle|Divider
+ * Design system 2.0
+ *
+ * The component is controlled: it reports every width through `onWidthChange`
+ * and the host applies it to the panel. It is a focusable `separator` — the
+ * window-splitter pattern — so the arrow keys move it by `keyboardStep`, `Home`
+ * and `End` jump to the bounds, and a double click resets it to `defaultWidth`.
+ * Drag and keys follow the writing direction, so a panel at the inline start
+ * grows as the pointer moves towards the inline end, in RTL as well.
+ *
+ * It is positioned absolutely against its nearest positioned ancestor, over the
+ * panel's inline-end edge, and draws a thin line. The accent line and the hint
+ * appear once the pointer has rested on the handle, and a themed arrow follows
+ * the pointer instead of the native cursor. Hide it on screens too narrow to
+ * drag on by wrapping it, e.g. in `hidden desktop:block`.
+ *
+ * @example
+ * ```tsx
+ * <div className="relative" style={{ width }}>
+ *   <Sidebar />
+ *   <ResizeHandle
+ *     width={width}
+ *     minWidth={280}
+ *     maxWidth={640}
+ *     defaultWidth={400}
+ *     onWidthChange={setWidth}
+ *     label="Resize sidebar"
+ *     tooltip="Drag to resize"
+ *   />
+ * </div>
+ * ```
+ *
+ * @param width - Current width of the panel in px.
+ * @param minWidth - Smallest width in px.
+ * @param maxWidth - Largest width in px.
+ * @param [defaultWidth] - Width a double click resets to.
+ * @param onWidthChange - Called with the next, limited width.
+ * @param label - Accessible name of the separator.
+ * @param [tooltip] - Hint shown beside the pointer once it rests on the handle.
+ * @param [keyboardStep=16] - Width change of one arrow key press in px.
+ * @param [className] - Additional CSS classes for the handle.
+ */
+export declare const ResizeHandle: FC<ResizeHandleProps>;