@epam/ai-dial-ui-kit 0.15.0-dev.3 → 0.15.0-dev.30

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

@@ -1,5 +1,5 @@
 import { Placement } from '@floating-ui/react';
-import { ButtonHTMLAttributes, FC } from 'react';
+import { ButtonHTMLAttributes, CSSProperties, FC } from 'react';
 import { DropdownItem } from '../../../models/dropdown';
 import { ElementSize } from '../../../types/size';
 export interface InlineSelectTriggerProps extends ButtonHTMLAttributes<HTMLButtonElement> {
@@ -9,6 +9,8 @@ export interface InlineSelectTriggerProps extends ButtonHTMLAttributes<HTMLButto
     size?: ElementSize;
     /** Whether the inline select is open or not. */
     isOpen?: boolean;
+    /** Additional CSS classes applied to the label, e.g. its type scale or colour. */
+    labelClassName?: string;
 }
 export declare const InlineSelectTrigger: FC<InlineSelectTriggerProps>;
 export interface InlineSelectProps {
@@ -30,11 +32,24 @@ export interface InlineSelectProps {
     matchReferenceWidth?: boolean;
     /** Additional CSS classes applied to the dropdown overlay. */
     listClassName?: string;
+    /**
+     * Inline style for the dropdown overlay. The overlay renders in a portal, so
+     * this is how custom properties reach its rows.
+     */
+    listStyle?: CSSProperties;
     /**
      * Accessible name for the trigger. Without it the control announces only its
      * current value ("Option A"), never what is being selected.
      */
     ariaLabel?: string;
+    /** Additional CSS classes applied to the trigger button, merged after its own. */
+    triggerClassName?: string;
+    /** Additional CSS classes applied to the trigger's label. */
+    triggerLabelClassName?: string;
+    /** Controlled open state of the dropdown. Pair it with `onOpenChange`. */
+    open?: boolean;
+    /** Fired when the dropdown opens or closes. Receives the new open state. */
+    onOpenChange?: (open: boolean) => void;
 }
 /**
  * An inline select control combining `InlineSelectTrigger` with `Dropdown`.

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

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

@@ -1,5 +1,5 @@
 import { PopupSize } from '../../../types/popup';
-export declare const popupOverlayBaseClassName = "z-[52] flex items-center justify-center bg-backdrop md:p-4 gap-5 p-6";
+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";

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

@@ -20,9 +20,10 @@ export declare const selectListWidthClassName = "!max-w-[var(--reference-width)]
  * 344px — not the panel around them, so the search row and Select All stay
  * put while the list moves under them. The panel keeps its own cap on the
  * available viewport height, which takes over on a screen too short for this
- * one.
+ * one. `py-1` matches the Dropdown menu's list inset, so the first and last
+ * rows (and their focus ring) do not sit flush against the panel edge.
  */
-export declare const selectOptionsScrollClassName = "max-h-[344px] overflow-y-auto";
+export declare const selectOptionsScrollClassName: string;
 export declare const selectSubMenuGap = 4;
 export declare const selectSubMenuClassName: string;
 /** Marks an option that opens a nested list. Matches the dropdown's caret. */

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

@@ -0,0 +1,35 @@
+import { FC, ReactNode } from 'react';
+/** Props for `SharedEntityIndicator`. */
+export interface SharedEntityIndicatorProps {
+    /** Accessible name of the badge. */
+    label?: string;
+    /** Tooltip shown while the badge is hovered. */
+    tooltip?: ReactNode;
+    /** Arrow size in px. */
+    size?: number;
+    /** Additional CSS classes for the badge, e.g. to position it over an icon. */
+    className?: string;
+}
+/**
+ * A small arrow badge marking an entity as shared.
+ * aliases: SharedIcon|AccessIndicator
+ * Design system 2.0
+ *
+ * A `role="img"` named by `label`, so it can stand on its own. Placed inside a
+ * larger `role="img"` — as `FileIcon` does — its name is folded into the
+ * parent's, which is why `FileIcon` names the shared state itself. The tooltip
+ * is a pointer-only hint: the badge is not focusable, and the tooltip never
+ * reaches assistive technology, so `label` is what carries the meaning.
+ *
+ * @example
+ * ```tsx
+ * <SharedEntityIndicator />
+ * <SharedEntityIndicator tooltip="Shared with 3 people" className="absolute -bottom-0.5 -left-0.5" />
+ * ```
+ *
+ * @param [label='Shared'] - Accessible name of the badge
+ * @param [tooltip='Shared'] - Tooltip shown while the badge is hovered
+ * @param [size=12] - Arrow size in px
+ * @param [className] - Additional CSS classes for the badge
+ */
+export declare const SharedEntityIndicator: FC<SharedEntityIndicatorProps>;

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

@@ -1,4 +1,5 @@
-import { FC } from 'react';
+import { FC, ReactNode } from 'react';
+import { TabOrientation } from '../../../types/tab';
 /** A single tab entry rendered by {@link Tabs}. */
 export interface TabItem {
     /** Unique identifier used to match against `activeTabId`. */
@@ -7,6 +8,8 @@ export interface TabItem {
     label: string;
     /** Optional numeric badge rendered after the label. */
     count?: number;
+    /** Decorative icon rendered before the label. The label names the tab, so the icon is hidden from assistive tech. */
+    icon?: ReactNode;
     /** Renders the tab greyed out and unselectable, and skips it during keyboard navigation. */
     disabled?: boolean;
 }
@@ -17,19 +20,35 @@ export interface TabsProps {
     activeTabId: string;
     /** Fired with the tab's `id` when the user selects a tab. */
     onTabChange: (tabId: string) => void;
+    /** Layout direction of the tab list. Uses the {@link TabOrientation} enum. Defaults to `TabOrientation.Horizontal`. */
+    orientation?: TabOrientation;
+    /**
+     * Already-translated heading rendered above the tabs, which also names the
+     * tab list. Omit to render no heading.
+     */
+    sectionLabel?: string;
     /**
      * Accessible name for the tab list. A row of tabs carries no name of its own,
-     * so screen readers announce it as an unlabelled list without this.
+     * so screen readers announce it as an unlabelled list without this — unless
+     * `sectionLabel` is naming it already.
      */
     ariaLabel?: string;
-    /** Additional CSS classes for the tab list container. */
+    /** Additional CSS classes for the root element. */
     className?: string;
+    /**
+     * Additional CSS classes for the `role="tablist"`. `className` reaches it
+     * only when there is no `sectionLabel`, since the heading wrapper is then
+     * the root; this prop reaches it in either case.
+     */
+    tabListClassName?: string;
     /** Additional CSS classes applied to every tab. */
     tabClassName?: string;
+    /** Additional CSS classes for the `sectionLabel` heading. */
+    sectionLabelClassName?: string;
 }
 /**
- * A horizontal row of tabs, underlining the active one and showing optional count badges.
- * aliases: TabRow|TabNavigation|TabBar
+ * A row or rail of tabs, marking the active one and showing optional icons and count badges.
+ * aliases: TabRow|TabNavigation|TabBar|VerticalTabs|SettingsNav|SideNav
  * Design system 2.0
  *
  * Follows the ARIA tabs pattern with automatic activation: only the active tab is
@@ -38,6 +57,16 @@ export interface TabsProps {
  * Tabs marked `disabled` are greyed out, cannot be clicked, and are skipped by
  * keyboard navigation.
  *
+ * `TabOrientation.Horizontal` draws the default row: the active tab takes a
+ * gradient underline, and `ArrowLeft` / `ArrowRight` move along it.
+ * `TabOrientation.Vertical` draws the settings-page rail instead — full-width
+ * rows with the active one on a tinted pill rather than an underline, driven by
+ * `ArrowUp` / `ArrowDown`. The rail is the shape to reach for when the tabs
+ * label whole pages of a settings surface; the row, when they filter one.
+ *
+ * `className` lands on whichever element is outermost: the heading wrapper when
+ * `sectionLabel` is set, the `role="tablist"` itself when it is not.
+ *
  * The component renders the tabs only; the panels stay with the consumer.
  *
  * @example
@@ -53,11 +82,30 @@ export interface TabsProps {
  * />
  * ```
  *
+ * @example A settings rail, named by its own heading.
+ * ```tsx
+ * <Tabs
+ *   orientation={TabOrientation.Vertical}
+ *   sectionLabel={t('Settings')}
+ *   className="w-[240px] shrink-0 border-e border-e-tertiary"
+ *   tabs={[
+ *     { id: 'preferences', label: t('Preferences'), icon: <IconSettings size={18} /> },
+ *     { id: 'usage', label: t('Usage'), icon: <IconChartBar size={18} /> },
+ *   ]}
+ *   activeTabId={activeTabId}
+ *   onTabChange={setActiveTabId}
+ * />
+ * ```
+ *
  * @param tabs - Ordered list of tabs to render.
  * @param activeTabId - ID of the currently selected tab.
  * @param onTabChange - Fired with the tab's `id` when the user selects a tab.
+ * @param [orientation=TabOrientation.Horizontal] - Layout direction of the tab list.
+ * @param [sectionLabel] - Heading rendered above the tabs, which also names the tab list.
  * @param [ariaLabel] - Accessible name for the tab list.
- * @param [className] - Additional CSS classes for the tab list container.
+ * @param [className] - Additional CSS classes for the root element.
+ * @param [tabListClassName] - Additional CSS classes for the `role="tablist"`.
  * @param [tabClassName] - Additional CSS classes applied to every tab.
+ * @param [sectionLabelClassName] - Additional CSS classes for the `sectionLabel` heading.
  */
 export declare const Tabs: FC<TabsProps>;

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

@@ -19,8 +19,10 @@ export declare const HOVER_OPEN_DELAY = 500;
  */
 export declare const arrowClassName = "fill-control-inverted";
 /**
- * Tooltips sit above popups, dropdowns and the calendar (all `z-[53]`), since
- * they can be triggered by a control inside one of them.
+ * Tooltips sit at the top of the overlay ladder (`z-tooltip`, see `zIndex` in
+ * `tailwind.config.js`) — above popups (`z-popup`), dropdowns and the calendar
+ * (`z-floating`) and interactive tooltips — since they can be triggered by a
+ * control inside any of them.
  *
  * `max-w-[376px]` is the cap the design puts on a tooltip: at `dial-small-text`
  * that is around 60 characters a line, past which a line stops being
@@ -36,4 +38,4 @@ export declare const arrowClassName = "fill-control-inverted";
  * nothing to see around a 7px triangle that the box's own shadow does not
  * already carry.
  */
-export declare const tooltipClassName = "z-[55] max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs";
+export declare const tooltipClassName = "z-tooltip max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted shadow-xs";

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

@@ -0,0 +1,139 @@
+import { FC } from 'react';
+import { TransferQueueItemStatus } from '../../../types/transfer-queue';
+/** One file (or other named unit of work) tracked by a `TransferQueue`. */
+export interface TransferQueueItem {
+    /** Stable identifier, passed back to `onCancelItem`. */
+    id: string;
+    /** Name shown on the row; a file's extension also picks its `FileIcon` glyph. */
+    name: string;
+    /** Current lifecycle status. */
+    status: TransferQueueItemStatus;
+    /**
+     * Completion as 0–100. Feeds only the aggregate bar shown while the queue
+     * is collapsed; a settled item without one counts as 100, a running one as 0.
+     */
+    percent?: number;
+    /**
+     * Why a `Failed` or `Warning` item ended as it did. Shown as the status
+     * icon's tooltip and used as its accessible name; falls back to
+     * `labels.failedMessage` / `labels.warningMessage`.
+     */
+    message?: string;
+}
+/** Every user-visible string of `TransferQueue`. */
+export interface TransferQueueLabels {
+    /** Accessible name of an in-progress row's cancel control. */
+    cancelItemAriaLabel: (name: string) => string;
+    /** Accessible name of an in-progress row's spinner. */
+    itemProgressAriaLabel: (name: string) => string;
+    /** Accessible name of a succeeded row's check icon. */
+    successLabel: string;
+    /** Trailing text on a canceled row. */
+    canceledLabel: string;
+    /** Fallback reason for a failed item without its own `message`. */
+    failedMessage: string;
+    /** Fallback reason for a warned item without its own `message`. */
+    warningMessage: string;
+    /** Accessible name of the collapsed queue's aggregate progress bar. */
+    queueProgressAriaLabel: string;
+    /**
+     * The aggregate bar's `aria-valuetext`. Given settled and total counts
+     * rather than a percentage, because "3 of 10 files" reads better than "36%"
+     * when the work is a list of files.
+     */
+    queueProgressValueText: (completed: number, total: number) => string;
+    /** Accessible name of the collapse toggle while expanded. */
+    collapseAriaLabel: string;
+    /** Accessible name of the expand toggle while collapsed. */
+    expandAriaLabel: string;
+    /** Accessible name of the close control. */
+    closeAriaLabel: string;
+    /** Heading of the close-confirmation dialog. */
+    closeConfirmHeader: string;
+    /** Confirmation description when an item is in progress and none failed. */
+    closeConfirmDescriptionInProgress: string;
+    /** Confirmation description when an item failed and none is in progress. */
+    closeConfirmDescriptionFailed: string;
+    /** Confirmation description when items are both in progress and failed. */
+    closeConfirmDescriptionMixed: string;
+    /** Confirm button of the close-confirmation dialog. */
+    closeConfirmLabel: string;
+    /** Cancel button of the close-confirmation dialog. */
+    closeCancelLabel: string;
+}
+/** Props for `TransferQueue`. */
+export interface TransferQueueProps {
+    /**
+     * Heading, rendered verbatim. The host composes any count into it
+     * (e.g. "Importing 5 files"); the component never pluralizes.
+     */
+    title: string;
+    /** Items to show, in display order. The queue renders nothing when empty. */
+    items: TransferQueueItem[];
+    /**
+     * Called when the queue should close — from the close control (after a
+     * confirmation while work is in progress or a failure is unread), or by
+     * itself once every item has succeeded.
+     */
+    onClose: () => void;
+    /**
+     * Called with an item's id when the user cancels it. The host aborts the
+     * work and keeps the item in `items` with status `Canceled`. Without it,
+     * in-progress rows show a spinner only.
+     */
+    onCancelItem?: (id: string) => void;
+    /** Overrides for the English default strings. */
+    labels?: Partial<TransferQueueLabels>;
+    /**
+     * Milliseconds after every item succeeded before `onClose` is called by
+     * itself. Defaults to 8000; `0` or less disables it.
+     */
+    autoCloseDelay?: number;
+    /** Additional CSS classes for the root panel. */
+    className?: string;
+    /** Additional CSS classes for the scrollable list of rows. */
+    bodyClassName?: string;
+}
+/**
+ * A floating panel listing the files of an upload, download, import or export
+ * with a live status per row.
+ * aliases: UploadQueue|ImportQueue|ExportQueue|UploadProgress|ProgressToast
+ * Design system 2.0
+ *
+ * Each row shows the file's `FileIcon` and name, and a trailing status: a
+ * spinner (with a cancel control on hover or focus) while in progress, a check
+ * on success, a warning or error icon whose reason is both its tooltip and its
+ * accessible name, or "Canceled". The header carries the host's title, a count
+ * of failed items, and collapse and close controls. Collapsed while work runs,
+ * the rows are replaced by one aggregate `ProgressBar`.
+ *
+ * Closing while an item is in progress or has failed asks for confirmation
+ * first. Once every item has succeeded the queue closes itself after
+ * `autoCloseDelay`; a warned or canceled row keeps it open so it can be read.
+ *
+ * The root is a polite `role="status"` live region. Positioning is left to
+ * the host — wrap it in a fixed container at the screen corner.
+ *
+ * @example
+ * ```tsx
+ * <TransferQueue
+ *   title="Importing 2 files"
+ *   items={[
+ *     { id: '1', name: 'report.pdf', status: TransferQueueItemStatus.Success },
+ *     { id: '2', name: 'data.csv', status: TransferQueueItemStatus.InProgress, percent: 40 },
+ *   ]}
+ *   onClose={handleClose}
+ *   onCancelItem={handleCancel}
+ * />
+ * ```
+ *
+ * @param title - Heading, rendered verbatim
+ * @param items - Items to show, in display order
+ * @param onClose - Called when the queue should close
+ * @param [onCancelItem] - Called with an item's id when the user cancels it
+ * @param [labels] - Overrides for the English default strings
+ * @param [autoCloseDelay=8000] - Delay before an all-succeeded queue closes itself; `0` disables
+ * @param [className] - Additional CSS classes for the root panel
+ * @param [bodyClassName] - Additional CSS classes for the list of rows
+ */
+export declare const TransferQueue: FC<TransferQueueProps>;

package/dist/src/components/New/TransferQueue/TransferQueueHeader.d.ts

@@ -0,0 +1,16 @@
+import { FC } from 'react';
+import { TransferQueueLabels } from './TransferQueue';
+interface TransferQueueHeaderProps {
+    title: string;
+    /** The badge renders only when this is positive. */
+    failedCount: number;
+    isCollapsed: boolean;
+    /** Id of the rows container the collapse toggle controls. */
+    itemsId: string;
+    labels: TransferQueueLabels;
+    onToggleCollapse: () => void;
+    onClose: () => void;
+}
+/** Queue heading with its failed-item badge and the collapse and close controls. */
+export declare const TransferQueueHeader: FC<TransferQueueHeaderProps>;
+export {};

package/dist/src/components/New/TransferQueue/TransferQueueRow.d.ts

@@ -0,0 +1,10 @@
+import { FC } from 'react';
+import { TransferQueueItem, TransferQueueLabels } from './TransferQueue';
+interface TransferQueueRowProps {
+    item: TransferQueueItem;
+    labels: TransferQueueLabels;
+    onCancel?: (id: string) => void;
+}
+/** One queue row: the file's icon and name, plus a trailing status slot. */
+export declare const TransferQueueRow: FC<TransferQueueRowProps>;
+export {};

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

@@ -0,0 +1,6 @@
+import { TransferQueueLabels } from './TransferQueue';
+/** Delay before a queue whose items have all succeeded closes itself. */
+export declare const TRANSFER_QUEUE_AUTO_CLOSE_DELAY_MS = 8000;
+export declare const STATUS_SLOT_CLASS = "flex size-7 shrink-0 items-center justify-center";
+/** English defaults for every `TransferQueue` string; a host passes translations through `labels`. */
+export declare const DEFAULT_TRANSFER_QUEUE_LABELS: TransferQueueLabels;

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

@@ -5,6 +5,11 @@
  */
 /** The floating panel itself: rounded raised card with a one-unit inset. */
 export declare const overlaySurfaceClassName = "rounded-xl bg-layer-raised p-1 shadow-md";
+/**
+ * Stacks the rows of a menu or option list with a 2px gap, so the tints of
+ * adjacent selected and hovered rows read as separate rows instead of one block.
+ */
+export declare const overlayListClassName = "flex flex-col gap-0.5";
 /**
  * A nested panel opened from a row of the surface above it. It is the same
  * object as its parent panel, so it reads from `overlaySurfaceClassName` too —
@@ -12,6 +17,14 @@ export declare const overlaySurfaceClassName = "rounded-xl bg-layer-raised p-1 s
  * rather than by the trigger further up.
  */
 export declare const overlaySubMenuClassName: string;
+/**
+ * A submenu panel that lists kit-rendered rows. The top-level menu and option
+ * list wrap their rows in `py-1` inside the panel's `p-1`; a submenu renders
+ * its rows straight into the panel, so it takes the same total vertical inset
+ * here. A caller-rendered submenu body keeps the plain panel, as a
+ * `renderOverlay` body does at the top level.
+ */
+export declare const overlaySubMenuListClassName: string;
 /**
  * A selectable row inside the panel. Keeps a visible focus ring: these rows are
  * reached by keyboard, and the 1.0 versions suppressed the ring outright.

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

@@ -1,5 +1,5 @@
 import { PopupSize } from '../../types/popup';
-export declare const overlayBaseClassName = "z-[52] flex items-center justify-center bg-blackout md:p-4";
+export declare const overlayBaseClassName = "z-popup flex items-center justify-center bg-blackout md:p-4";
 export declare const popupDividerClassName = "divide-tertiary divide-y";
 export declare const popupHeaderClassName = "flex flex-row justify-between py-4 px-6 items-center";
 export declare const popupSizeClassMap: Record<PopupSize, string>;

package/dist/src/components/SchemaRenderer/types.d.ts

@@ -80,6 +80,17 @@ export interface SchemaRendererTexts {
     selectTypePlaceholder: string;
     removeItemAriaLabel: string;
     removeFieldAriaLabel: string;
+    typeColumnHeader: string;
+    entryTypeString: string;
+    entryTypeNumber: string;
+    entryTypeBoolean: string;
+    entryTypeNull: string;
+    entryTypeObject: string;
+    entryTypeArray: string;
+    entryTypeChangeWarning: string;
+    booleanTrueOption: string;
+    booleanFalseOption: string;
+    invalidJsonError: string;
 }
 export declare const DEFAULT_SCHEMA_TEXTS: SchemaRendererTexts;
 export interface DialSchemaRendererProps {