@epam/ai-dial-ui-kit 0.15.0-dev.2 → 0.15.0-dev.21

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

@@ -1,4 +1,5 @@
 import { FC, ReactNode } from 'react';
+import { AccordionCaretPosition } from '../../../types/accordion';
 export interface AccordionProps {
     /** Title rendered in the header. */
     title: ReactNode;
@@ -24,6 +25,8 @@ export interface AccordionProps {
     ariaLabel?: string;
     /** Fired when the header is clicked. Receives the next expanded state. */
     onToggle?: (expanded: boolean) => void;
+    /** Where the header draws its caret. Defaults to `AccordionCaretPosition.End`. */
+    caretPosition?: AccordionCaretPosition;
     /** Additional CSS classes for the outer container. */
     className?: string;
     /** Additional CSS classes for the header. */
@@ -64,6 +67,7 @@ export interface AccordionProps {
  * @param [nonCollapsible] - Renders the panel permanently expanded, with a static header.
  * @param [ariaLabel] - Accessible name for the header; needed when `title` carries no text.
  * @param [onToggle] - Fired when the header is clicked. Receives the next expanded state.
+ * @param [caretPosition=AccordionCaretPosition.End] - Where the header draws its caret: before or after the title.
  * @param [className] - Additional CSS classes for the outer container.
  * @param [headerClassName] - Additional CSS classes for the header.
  * @param [contentClassName] - Additional CSS classes for the content region.

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

@@ -0,0 +1,94 @@
+import { FC, MouseEvent, ReactNode } from 'react';
+import { BreadcrumbsSize } from '../../../types/breadcrumbs';
+/** One step of the trail rendered by {@link Breadcrumbs}. */
+export interface BreadcrumbsItem {
+    /**
+     * The segment's text. A plain string rather than a node, because it is both
+     * what is drawn and what the tooltip shows once the trail truncates it.
+     */
+    label: string;
+    /** Where the segment navigates. Renders the segment as a link. */
+    href?: string;
+    /**
+     * Fired when the segment is activated. Renders the segment as a button when
+     * there is no `href`, and runs before the browser follows one when there is —
+     * call `preventDefault()` on the event to keep the user where they are.
+     */
+    onClick?: (event: MouseEvent<HTMLElement>) => void;
+    /** Leading icon, e.g. a folder glyph on the root. Decorative: pass `aria-hidden`. */
+    icon?: ReactNode;
+}
+export interface BreadcrumbsProps {
+    /** The trail, outermost first. The last entry is the current page. */
+    items: BreadcrumbsItem[];
+    /**
+     * How many segments are drawn before the middle collapses behind an
+     * ellipsis menu. Clamped to a floor of three — the root, the ellipsis and
+     * the current page.
+     */
+    maxVisibleItems?: number;
+    /**
+     * The trail's type scale: `dial-small-text` by default, or `dial-h2-text`
+     * for a trail that doubles as the page heading.
+     */
+    size?: BreadcrumbsSize;
+    /** Node drawn between two segments. Defaults to a right chevron, mirrored in RTL. */
+    separator?: ReactNode;
+    /** Accessible name for the `<nav>`. */
+    ariaLabel?: string;
+    /** Accessible name for the ellipsis button that reveals the collapsed segments. */
+    overflowAriaLabel?: string;
+    /** Additional CSS classes for the `<nav>`. Must not shrink it to its content. */
+    className?: string;
+    /** Additional CSS classes applied to every segment. */
+    itemClassName?: string;
+}
+/**
+ * A navigation trail: where the user is, and every level they can step back to.
+ * aliases: Breadcrumb|NavigationPath|BreadcrumbTrail
+ * Design system 2.0
+ *
+ * The last item is the current page — drawn semibold and primary, and never a
+ * control, since a link to the page you are already on does nothing. Every
+ * earlier item with an `href` or an `onClick` is a link; one with neither is
+ * drawn as plain text, which is how a read-only location path is built.
+ *
+ * The trail never wraps. Segments truncate instead, each revealing its full
+ * label in a tooltip only once it is actually clipped, and a trail longer than
+ * `maxVisibleItems` collapses its middle behind an ellipsis menu — the root and
+ * the current page, the two segments that carry the most meaning, always stay
+ * on screen.
+ *
+ * a11y: an `<ol>` inside a named `<nav>`, with `aria-current="page"` on the last
+ * segment. Separators are decorative and hidden from assistive tech, so the
+ * trail is announced as a list of links rather than a string of chevrons.
+ *
+ * The trail is drawn at `dial-small-text` by default; `size` switches it to
+ * `dial-h2-text` for a trail that doubles as the page heading, where the
+ * token's own semibold weight applies to every segment.
+ *
+ * Labels are the caller's to translate; the two accessible names default to
+ * English and take an override.
+ *
+ * @example
+ * ```tsx
+ * <Breadcrumbs
+ *   ariaLabel={t('File path')}
+ *   items={[
+ *     { label: t('My files'), onClick: () => open('/') },
+ *     { label: 'DK Test', onClick: () => open('/DK Test') },
+ *     { label: 'DK Test with nested' },
+ *   ]}
+ * />
+ * ```
+ *
+ * @param items - The trail, outermost first; the last entry is the current page
+ * @param [maxVisibleItems=4] - Segments drawn before the middle collapses behind an ellipsis menu
+ * @param [size=BreadcrumbsSize.Small] - The trail's type scale: `dial-small-text` or `dial-h2-text`
+ * @param [separator] - Node drawn between two segments; defaults to a right chevron
+ * @param [ariaLabel='Breadcrumb'] - Accessible name for the `<nav>`
+ * @param [overflowAriaLabel='Show hidden path segments'] - Accessible name for the ellipsis button
+ * @param [className] - Additional CSS classes for the `<nav>`
+ * @param [itemClassName] - Additional CSS classes applied to every segment
+ */
+export declare const Breadcrumbs: FC<BreadcrumbsProps>;

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

@@ -0,0 +1,60 @@
+import { ReactNode } from 'react';
+import { BreadcrumbsSize } from '../../../types/breadcrumbs';
+/**
+ * The `<nav>`. It clips rather than wraps: a breadcrumb that reflows onto a
+ * second line moves the content below it, so the trail truncates its segments
+ * instead (see `segmentWidthClassName`).
+ */
+export declare const navClassName = "w-full overflow-hidden";
+/** The `<ol>` holding the segments and their separators. */
+export declare const listClassName = "flex min-w-0 flex-nowrap items-center gap-2 whitespace-nowrap";
+/** One `<li>`: the segment and the separator that follows it. */
+export declare const itemClassName = "flex min-w-0 items-center gap-2";
+/**
+ * The trail's type scale. It sits on the `<li>`, so the segment, the
+ * separator and the tooltip trigger inside it all read from one declaration.
+ */
+export declare const sizeClassName: Record<BreadcrumbsSize, string>;
+/**
+ * The current page is always semibold. `dial-h2-text` already is, so the
+ * heading trail repeats its own token rather than reaching for a semibold
+ * variant that does not exist.
+ */
+export declare const currentSizeClassName: Record<BreadcrumbsSize, string>;
+/**
+ * How each segment gives up width when the trail does not fit. The root keeps
+ * its full label — it is the anchor the user navigates back to — the middle
+ * segments truncate first, and the current page keeps the largest share of
+ * what is left, since it names where the user actually is.
+ */
+export declare const segmentWidthClassName: Record<'first' | 'middle' | 'last', string>;
+/** The box that draws a segment, around its icon and its label. */
+export declare const segmentClassName = "flex min-w-0 flex-1 items-center gap-1 rounded-sm transition-colors";
+/**
+ * A segment the user can follow. Secondary until hovered, then accent — the
+ * same pairing the kit's other inline links use.
+ */
+export declare const linkSegmentClassName = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus";
+/**
+ * The last segment: where the user is. Semibold and primary, and never a
+ * link — a control that navigates to the page it is on has nothing to do.
+ */
+export declare const currentSegmentClassName = "cursor-default text-primary";
+/** A segment with nowhere to go: rendered, but not a control. */
+export declare const staticSegmentClassName = "cursor-default text-secondary";
+/** The chevron between two segments. */
+export declare const separatorClassName = "inline-flex flex-none items-center leading-none text-secondary";
+/**
+ * The collapsed-middle trigger. `dial-kit-minimum-target` lifts the 16px
+ * glyph to the 24×24 of WCAG 2.5.8; the enhanced 44×44 target would overhang
+ * the segments on either side of it (see the README exception table).
+ */
+export declare const overflowButtonClassName = "dial-kit-minimum-target flex shrink-0 items-center rounded-sm text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus";
+/**
+ * Smallest trail the collapse can produce: the root, the ellipsis and the
+ * current page. Below that there is nothing left to hide behind the ellipsis.
+ */
+export declare const MIN_VISIBLE_ITEMS = 3;
+/** Segments shown before the trail collapses. */
+export declare const DEFAULT_MAX_VISIBLE_ITEMS = 4;
+export declare const defaultSeparator: ReactNode;

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

@@ -1,4 +1,4 @@
-import { FC } from 'react';
+import { FC, FocusEventHandler } from 'react';
 import { LabelProps } from '../Label/Label';
 import { CalendarMode } from '../../../types/calendar';
 export type CalendarValue = Date | string | null;
@@ -6,6 +6,11 @@ export interface CalendarProps {
     mode?: CalendarMode;
     value?: CalendarValue;
     onChange?: (value: CalendarValue) => void;
+    /**
+     * Called when the Calendar's input field loses focus, e.g. for on-blur
+     * validation.
+     */
+    onBlur?: FocusEventHandler<HTMLInputElement>;
     labelProps?: LabelProps;
     placeholder?: string;
     disabled?: boolean;
@@ -17,6 +22,12 @@ export interface CalendarProps {
     /** BCP 47 locale tag used to localize month/weekday names and date formatting. */
     locale?: string;
     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
+     * the zone the entered time-of-day refers to.
+     */
+    showTimezone?: boolean;
 }
 /**
  * A date/time picker supporting four selection modes.
@@ -41,6 +52,7 @@ export interface CalendarProps {
  * @param [mode=CalendarMode.Date] - Selection mode: date, datetime, time or weekday
  * @param [value] - Controlled value: a `Date` for date/datetime, an `"HH:mm"` string for time, an ISO weekday number (`"1"`=Monday…`"7"`=Sunday) for weekday
  * @param [onChange] - Callback fired with the next value when the selection changes
+ * @param [onBlur] - Called when the Calendar's input field loses focus, e.g. for on-blur validation
  * @param [labelProps] - Props of the {@link Label} rendered above the control, including `label`, `required` and `caption`
  * @param [placeholder] - Placeholder shown when there is no value; defaults to a mode-appropriate string ("Select date", "Select date and time", "--:--" or "Select day")
  * @param [disabled=false] - Disables the control
@@ -51,5 +63,6 @@ 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
  */
 export declare const Calendar: FC<CalendarProps>;

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

@@ -4,7 +4,7 @@ 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 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-[53] flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md";
+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 calendarDaySelectedClassName = "bg-control-accent text-control-permanent";
 export declare const calendarDayTodayClassName = "text-accent dial-small-semi-text";

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

@@ -1,5 +1,5 @@
 import { Placement } from '@floating-ui/react';
-import { FC, MouseEvent, ReactNode, RefObject } from 'react';
+import { CSSProperties, FC, MouseEvent, ReactNode, RefObject } from 'react';
 import { DropdownTrigger } from '../../../types/dropdown';
 import { DropdownItem } from '../../../models/dropdown';
 export interface DropdownProps {
@@ -25,6 +25,13 @@ export interface DropdownProps {
     overlayContentClassName?: string;
     separatorClassName?: string;
     listClassName?: string;
+    /**
+     * Inline style for the floating overlay. The overlay renders in a portal, so
+     * this is the only way to hand it CSS custom properties from a caller's own
+     * scope — e.g. theme variables that its rows and header read. Positioning
+     * stays the dropdown's own: `floatingStyles` is applied on top of it.
+     */
+    listStyle?: CSSProperties;
     outsidePressIgnoreRef?: RefObject<HTMLElement | null>;
     outsideClosable?: boolean;
     anchorToMouse?: boolean;
@@ -97,6 +104,7 @@ export interface DropdownProps {
  * @param [overlayContentClassName] - Additional CSS classes applied to the overlay content
  * @param [separatorClassName] - Additional CSS classes applied to the separators between items
  * @param [listClassName] - Additional CSS classes applied to the floating overlay
+ * @param [listStyle] - Inline style applied to the floating overlay, under the dropdown's own positioning styles
  * @param [outsidePressIgnoreRef] - Ref to an element that should not trigger outside press behavior
  * @param [outsideClosable=true] - Whether clicks outside the overlay should close it
  * @param [anchorToMouse=false] - Whether to anchor the dropdown to the mouse position

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

@@ -1,6 +1,9 @@
 export declare const dropdownBaseClassName: string;
 export declare const dropdownListBaseClassName: string;
 export declare const dropdownSubMenuClassName: string;
+export declare const dropdownSubMenuListClassName: string;
+/** The top-level item list: rows 2px apart, inset from the panel edge. */
+export declare const dropdownItemListClassName: string;
 /**
  * The row's own styling lives in {@link MenuItem}, which renders every item of
  * the menu. This alias is what a fully custom overlay row can lean on to match

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

@@ -0,0 +1,61 @@
+import { FC, ReactNode } from 'react';
+import { DialItemType } from '../../../types/item';
+/** Props for `FileIcon`. */
+export interface FileIconProps {
+    /** Whether the item is a file or a folder. */
+    type: DialItemType;
+    /** Item name; a file's extension is read from it unless `fileExtension` is set. */
+    name: string;
+    /** Extension to pick the glyph by, overriding the one in `name`. With or without a leading dot. */
+    fileExtension?: string;
+    /** Draws the shared badge in the bottom-left corner. */
+    shared?: boolean;
+    /** Replaces the glyph with a spinner. */
+    loading?: boolean;
+    /** Glyph size in px. Defaults to `DIAL_ICON_SIZE.MD` (20). */
+    size?: number;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+    /** Hides the icon from assistive technology when the row already names the item. */
+    decorative?: boolean;
+    /** Accessible name. Defaults to "PDF file", "File" or "Folder", with ", shared" appended when shared. */
+    label?: string;
+    /** Accessible name of the spinner shown while `loading`. */
+    loadingLabel?: string;
+    /** Additional CSS classes for the shared badge. */
+    sharedIndicatorClassName?: string;
+    /** Tooltip shown over the shared badge. */
+    sharedIndicatorTooltip?: ReactNode;
+}
+/**
+ * The icon of a file or folder row in a file manager: a file-type glyph picked
+ * by extension, or a folder, with an optional shared badge and loading state.
+ * aliases: FileTypeIcon|EntityIcon
+ * Design system 2.0
+ *
+ * The root is a `role="img"` whose name says what the item is, and that it is
+ * shared — the badge itself is drawn inside the image, so its tooltip is a
+ * pointer-only hint and never the only place the state is conveyed. While
+ * `loading`, the root drops the role and holds a `Spinner`, which announces
+ * itself as a status. Pass `decorative` when the row already names the item.
+ *
+ * @example
+ * ```tsx
+ * <FileIcon name="report.pdf" type={DialItemType.File} shared />
+ * <FileIcon name="Projects" type={DialItemType.Folder} loading />
+ * ```
+ *
+ * @param type - Whether the item is a file or a folder
+ * @param name - Item name; a file's extension is read from it
+ * @param [fileExtension] - Extension overriding the one in `name`
+ * @param [shared=false] - Draws the shared badge
+ * @param [loading=false] - Replaces the glyph with a spinner
+ * @param [size=DIAL_ICON_SIZE.MD] - Glyph size in px
+ * @param [className] - Additional CSS classes for the root element
+ * @param [decorative=false] - Hides the icon from assistive technology
+ * @param [label] - Accessible name, overriding the generated one
+ * @param [loadingLabel='Loading'] - Accessible name of the spinner
+ * @param [sharedIndicatorClassName] - Additional CSS classes for the shared badge
+ * @param [sharedIndicatorTooltip='Shared'] - Tooltip shown over the shared badge
+ */
+export declare const FileIcon: FC<FileIconProps>;

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

@@ -0,0 +1,16 @@
+/** The kinds of file the 2.0 glyph distinguishes. */
+export declare enum FileGlyphKind {
+    Images = "images",
+    Video = "video",
+    Audio = "audio",
+    Code = "code",
+    Text = "text",
+    Pdf = "pdf",
+    Spreadsheet = "spreadsheet",
+    Presentation = "presentation",
+    Archive = "archive",
+    Dial = "dial",
+    Other = "other"
+}
+/** The glyph kind for a lower-case extension; anything unknown is `Other`. */
+export declare const getFileGlyphKind: (extension: string) => FileGlyphKind;

package/dist/src/components/New/FileIcon/icons/FileGlyph.d.ts

@@ -0,0 +1,18 @@
+import { FC } from 'react';
+import { FileGlyphKind } from '../constants';
+interface FileGlyphProps {
+    size: number;
+    kind: FileGlyphKind;
+}
+/**
+ * The 2.0 file glyph: a gradient sheet with the line work of its kind.
+ * Design system 2.0
+ *
+ * Inlined for the same reasons as `FolderGlyph`: a per-instance gradient `id`
+ * from `useId`, and theme tokens in place of fixed hex values.
+ *
+ * @param size - Width and height in px
+ * @param kind - Which art to draw
+ */
+export declare const FileGlyph: FC<FileGlyphProps>;
+export {};

package/dist/src/components/New/FileIcon/icons/FolderGlyph.d.ts

@@ -0,0 +1,17 @@
+import { FC } from 'react';
+interface FolderGlyphProps {
+    size: number;
+}
+/**
+ * The 2.0 folder glyph: a blue back tab over a grey-to-blue gradient body.
+ * Design system 2.0
+ *
+ * Inlined rather than imported as an SVG asset for two reasons: the gradient
+ * `id` comes from `useId`, so a list of folders does not repeat one document-
+ * wide id (a hidden first copy would otherwise blank every other gradient);
+ * and the colours resolve from theme tokens instead of fixed hex values.
+ *
+ * @param size - Width and height in px
+ */
+export declare const FolderGlyph: FC<FolderGlyphProps>;
+export {};

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

@@ -0,0 +1,79 @@
+import { FC, ReactNode } from 'react';
+import { DialItemType } from '../../../types/item';
+/** Props for `FileName`. */
+export interface FileNameProps {
+    /** Full item name, with or without an extension. */
+    name: string;
+    /** Whether the item is a file or a folder. Defaults to a file. */
+    type?: DialItemType;
+    /** Extension to pick the icon by, overriding the one in `name`. */
+    fileExtension?: string;
+    /** Draws the shared badge on the icon. */
+    shared?: boolean;
+    /** Replaces the icon with a spinner, which announces itself as a status. */
+    loading?: boolean;
+    /** Accessible name of the spinner shown while `loading`. */
+    loadingLabel?: string;
+    /** Icon size in px. Defaults to the `FileIcon` size (20). */
+    iconSize?: number;
+    /** Metadata under the name (size, date); switches the text to two lines. */
+    details?: ReactNode;
+    /** Mutes the name, marking it as containing invalid characters. */
+    isInvalidName?: boolean;
+    /** Additional CSS classes for the root element. */
+    className?: string;
+    /** Additional CSS classes for the name text. */
+    nameClassName?: string;
+    /** Additional CSS classes for the shared badge. */
+    sharedIndicatorClassName?: string;
+    /** Tooltip shown over the shared badge. */
+    sharedIndicatorTooltip?: ReactNode;
+    /** Screen-reader text announcing the shared state. */
+    sharedLabel?: string;
+    /** Suppresses the full-name tooltip even while the name is truncated. */
+    hideTooltip?: boolean;
+    /** Shown instead of the full name while it is truncated. */
+    tooltipContent?: ReactNode;
+}
+/**
+ * A file or folder name with its type icon, truncated with a tooltip when it
+ * does not fit.
+ * aliases: FileDisplay|NameDisplay
+ * Design system 2.0
+ *
+ * The visible name already says what the item is, so the icon is decorative;
+ * the shared state, which only the badge shows, is announced by a
+ * visually-hidden `sharedLabel` after the name instead.
+ *
+ * While `loading` the icon is swapped for a `Spinner`, which is left in the
+ * accessibility tree so the busy state is announced.
+ *
+ * With `details` the text switches to two lines — the name, then the metadata.
+ *
+ * @example
+ * ```tsx
+ * <FileName name="Document.pdf" shared />
+ * <FileName
+ *   name="Document.pdf"
+ *   details={<span className="dial-tiny-text text-secondary">24 KB · Jul 20</span>}
+ * />
+ * ```
+ *
+ * @param name - Full item name, with or without an extension
+ * @param [type=DialItemType.File] - Whether the item is a file or a folder
+ * @param [fileExtension] - Extension overriding the one in `name`
+ * @param [shared=false] - Draws the shared badge on the icon
+ * @param [loading=false] - Replaces the icon with a spinner
+ * @param [loadingLabel='Loading'] - Accessible name of the spinner
+ * @param [iconSize] - Icon size in px
+ * @param [details] - Metadata under the name
+ * @param [isInvalidName=false] - Mutes the name, marking it as invalid
+ * @param [className] - Additional CSS classes for the root element
+ * @param [nameClassName] - Additional CSS classes for the name text
+ * @param [sharedIndicatorClassName] - Additional CSS classes for the shared badge
+ * @param [sharedIndicatorTooltip='Shared'] - Tooltip shown over the shared badge
+ * @param [sharedLabel='Shared'] - Screen-reader text announcing the shared state
+ * @param [hideTooltip=false] - Suppresses the full-name tooltip
+ * @param [tooltipContent] - Shown instead of the full name while truncated
+ */
+export declare const FileName: FC<FileNameProps>;

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

@@ -0,0 +1,69 @@
+import { ReactNode } from 'react';
+export interface FilterChipItem<T extends string = string> {
+    value: T;
+    label: string;
+    icon?: ReactNode;
+}
+export interface FilterChipsProps<T extends string = string> {
+    items: FilterChipItem<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    stretch?: boolean;
+    className?: string;
+    chipClassName?: string;
+    'aria-label'?: string;
+    'aria-labelledby'?: string;
+}
+/**
+ * A row of filter chips that picks one value out of a few.
+ * aliases: FilterChipRow|ChipTabs|TagTabs|FilterTabs
+ * Design system 2.0
+ *
+ * The chip-shaped sibling of the kit's other single-select rows, and the one to
+ * reach for when the options label a *subset of a list* — "All", "Shared",
+ * "Mine" above a history panel. `Tabs` underlines the active option and reads
+ * as navigation between panels; `SegmentedControl` sinks equal segments into a
+ * track and reads as a view switch. This one draws `TagAppearance.Selectable`
+ * chips: no fill until selected, and a semibold label once it is. Selecting a
+ * chip therefore widens it by the difference between the regular and semibold
+ * label — give the row `stretch`, or the chips a width, if that shift matters.
+ *
+ * Each chip is a toggle button carrying its state on `aria-pressed`, wrapped in
+ * a named `role="group"` — the pattern `Tag` is built for. That makes every
+ * chip its own tab stop, which is what a filter row wants: unlike a
+ * `radiogroup`, arrowing onto a chip never changes the filter by accident.
+ * Name the group through `aria-label` or `aria-labelledby`, or the chips are
+ * announced as a handful of unrelated toggles.
+ *
+ * There is no disabled chip. An option the user must not pick is left out of
+ * `items` — a chip that renders but cannot be activated is a label and nothing
+ * else, and `Tag` drops its button role when disabled, so it would not even
+ * announce as unavailable.
+ *
+ * Labels are the caller's to translate — the component ships no English
+ * defaults.
+ *
+ * @example
+ * ```tsx
+ * <FilterChips
+ *   aria-label={t('Filter chats')}
+ *   value={tab}
+ *   onChange={setTab}
+ *   items={[
+ *     { value: 'all', label: t('All') },
+ *     { value: 'mine', label: t('My chats') },
+ *     { value: 'shared', label: t('Shared') },
+ *   ]}
+ * />
+ * ```
+ *
+ * @param items - Chips to render, in order; each needs a unique `value` and a `label`
+ * @param value - The `value` of the selected chip
+ * @param onChange - Called with the `value` of the chip the user picked. A click on the already-selected chip fires it again, so a row that clears back to a default handles that itself
+ * @param [stretch=false] - Grows the chips to share the row width equally instead of hugging their labels
+ * @param [className] - Additional classes for the row, e.g. its padding or `flex-wrap`
+ * @param [chipClassName] - Additional classes for every chip. A panel too narrow for the chips' default padding can tighten it here
+ * @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;

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

@@ -0,0 +1,13 @@
+/**
+ * The chip row itself. It does not wrap by default: a filter row is usually one
+ * line of a narrow panel, and a caller that wants it to wrap passes
+ * `flex-wrap` through `className`.
+ */
+export declare const containerClassName = "flex flex-nowrap items-center gap-1";
+/**
+ * `stretch` layout: the chips share the row width equally but never shrink
+ * below their label, so a row too narrow for all of them overflows rather than
+ * truncating every chip. `Tag` is already `rounded-full` and `inline-flex`, so
+ * only the growth and the centring are added here.
+ */
+export declare const chipStretchClassName = "min-w-max flex-1 justify-center";

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

@@ -0,0 +1,37 @@
+import { FC } from 'react';
+import { FileNameProps } from '../FileName/FileName';
+/** Props for `FolderName`. */
+export type FolderNameProps = Omit<FileNameProps, 'type' | 'fileExtension'>;
+/**
+ * A folder name with the folder icon, truncated with a tooltip when it does
+ * not fit.
+ * aliases: FolderDisplay|DirectoryName
+ * Design system 2.0
+ *
+ * A `FileName` fixed to `DialItemType.Folder`, so it shares every behaviour of
+ * it — decorative icon, visually-hidden shared label, `details` line and the
+ * `loading` spinner. Its root carries `dial-kit-folder-name` on top of
+ * `dial-kit-file-name`.
+ *
+ * @example
+ * ```tsx
+ * <FolderName name="Organization" shared />
+ * <FolderName name="Uploads" loading />
+ * ```
+ *
+ * @param name - Folder name
+ * @param [shared=false] - Draws the shared badge on the icon
+ * @param [loading=false] - Replaces the icon with a spinner
+ * @param [loadingLabel='Loading'] - Accessible name of the spinner
+ * @param [iconSize] - Icon size in px
+ * @param [details] - Metadata under the name
+ * @param [isInvalidName=false] - Mutes the name, marking it as invalid
+ * @param [className] - Additional CSS classes for the root element
+ * @param [nameClassName] - Additional CSS classes for the name text
+ * @param [sharedIndicatorClassName] - Additional CSS classes for the shared badge
+ * @param [sharedIndicatorTooltip='Shared'] - Tooltip shown over the shared badge
+ * @param [sharedLabel='Shared'] - Screen-reader text announcing the shared state
+ * @param [hideTooltip=false] - Suppresses the full-name tooltip
+ * @param [tooltipContent] - Shown instead of the full name while truncated
+ */
+export declare const FolderName: FC<FolderNameProps>;

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

@@ -10,9 +10,10 @@ export declare const INTERACTIVE_TOOLTIP_GAP = 8;
  */
 export declare const INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY = 400;
 /**
- * The panel sits above the surface it is anchored to — a dropdown or select
- * overlay, both `z-[53]` — since it can be opened from a row inside one of
- * them.
+ * 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
+ * dropdown or select overlay, both `z-floating` — since it can be opened from
+ * a row inside one of them.
  *
  * By style this is a neutral floating panel rather than the coloured
  * `Notification` banner: it shares the raised-card shape a dropdown or the
@@ -23,4 +24,4 @@ export declare const INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY = 400;
  * Padding and width are the panel's own, sized for a block of copy and
  * controls rather than a menu row.
  */
-export declare const interactiveTooltipClassName = "z-[54] max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";
+export declare const interactiveTooltipClassName = "z-interactive-tooltip max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";

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

@@ -5,6 +5,7 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
     type?: NotificationType;
     title?: ReactNode;
     message: ReactNode;
+    action?: ReactNode;
     closable?: boolean;
     iconSize?: number;
     iconStroke?: number;
@@ -57,12 +58,29 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
  *   title="Title"
  *   message="Description text example"
  * />
+ *
+ * <Notification
+ *   variant={NotificationVariant.Error}
+ *   type={NotificationType.SectionMessage}
+ *   title="Couldn't finish this response"
+ *   message="Something went wrong. Try again in a moment."
+ *   action={
+ *     <Button
+ *       variant={ButtonVariant.Neutral}
+ *       appearance={ButtonAppearance.Outlined}
+ *       size={ElementSize.Small}
+ *       label="Try again"
+ *       onClick={handleRetry}
+ *     />
+ *   }
+ * />
  * ```
  *
  * @param [variant=NotificationVariant.Info] - Defines the visual style and icon of the alert
  * @param [type=NotificationType.Toast] - Defines the type of notification, either a toast or a section message
  * @param [title] - Optional heading displayed above the message in semibold
  * @param message - Message text to display inside the alert
+ * @param [action] - Optional control (typically a small `Button`) rendered at the inline end, after the text and before the close button; the caller supplies its accessible name
  * @param [className] - Additional CSS classes applied to the alert container
  * @param [textClassName] - Additional CSS classes applied to the message text
  * @param [closable=false] - Whether the alert has a close button