@epam/ai-dial-ui-kit 0.13.0-dev.9 → 0.14.0-dev.1

package/dist/src/components/New/Button/ButtonWrappers.d.ts

@@ -0,0 +1,94 @@
+import { FC } from 'react';
+import { ButtonProps } from './Button';
+type ButtonVariantProps = Omit<ButtonProps, 'variant'>;
+type ButtonAppearanceProps = Omit<ButtonProps, 'appearance'>;
+/**
+ * A Primary Button component with predefined primary variant
+ * Design system 2.0
+ * @example
+ * ```tsx
+ * <PrimaryButton
+ *  label="Click me"
+ *  onClick={handleClick}
+ *  className="custom-button"
+ * />
+ * ```
+ *
+ * Inherits all properties from the `ButtonProps`
+ */
+export declare const PrimaryButton: FC<ButtonVariantProps>;
+/** A Neutral Button component with predefined neutral variant
+ * @example
+ * ```tsx
+ * <NeutralButton
+ *  label="Click me"
+ *  onClick={handleClick}
+ *  className="custom-button"
+ * />
+ * ```
+ *
+ * Inherits all properties from the `ButtonProps`
+ */
+export declare const NeutralButton: FC<ButtonVariantProps>;
+/** A Danger Button component with predefined danger variant
+ * @example
+ * ```tsx
+ * <DangerButton
+ * label="Click me"
+ * onClick={handleClick}
+ * className="custom-button"
+ * />
+ * ```
+ *
+ * Inherits all properties from the `ButtonProps`
+ */
+export declare const DangerButton: FC<ButtonVariantProps>;
+/** A Link Button component with predefined link appearance
+ * @example
+ * ```tsx
+ * <LinkButton
+ *  label="Click me"
+ *  onClick={handleClick}
+ *  className="custom-button"
+ * />
+ * ```
+ *
+ * Pass `href` to navigate: the control then renders a real `<a>`, so it keeps
+ * the link role, middle-click, and "open in new tab". Without `href` it stays a
+ * `<button>` and needs an `onClick`.
+ *
+ * @example
+ * ```tsx
+ * <LinkButton label="Read the docs" href="/docs" />
+ * <LinkButton label="Open dashboard" href="https://example.com" target="_blank" />
+ * ```
+ *
+ * Inherits all properties from the `ButtonProps`
+ */
+export declare const LinkButton: FC<ButtonAppearanceProps>;
+/** A Ghost Button component with predefined ghost appearance
+ * @example
+ * ```tsx
+ * <GhostButton
+ *  label="Click me"
+ *  onClick={handleClick}
+ *  className="custom-button"
+ * />
+ * ```
+ *
+ * Inherits all properties from the `ButtonProps`
+ */
+export declare const GhostButton: FC<ButtonAppearanceProps>;
+/** An Outlined Button component with predefined outlined appearance
+ * @example
+ * ```tsx
+ * <OutlinedButton
+ * label="Click me"
+ * onClick={handleClick}
+ * className="custom-button"
+ * />
+ * ```
+ *  Inherits all properties from the `ButtonProps`
+ */
+export declare const OutlinedButton: FC<ButtonAppearanceProps>;
+export {};

package/dist/src/components/New/Button/__tests__/utils.spec.d.ts

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,2 @@
+import { ButtonVariant } from '../../../types/button';
+export declare const variantClassMap: Record<ButtonVariant, Record<string, string>>;

package/dist/src/components/New/Button/utils.d.ts

@@ -0,0 +1,2 @@
+import { ButtonAppearance, ButtonVariant } from '../../../types/button';
+export declare const getButtonClassNames: (variant?: ButtonVariant, appearance?: ButtonAppearance) => string;

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

@@ -0,0 +1,24 @@
+import { FC } from 'react';
+import { DropdownItem } from '../../../models/dropdown';
+import { ButtonProps } from '../Button/Button';
+export interface ButtonDropdownProps extends Omit<ButtonProps, 'iconAfter'> {
+    items: DropdownItem[];
+}
+/**
+ * A Button dropdown component based on the Dropdown component
+ * aliases: SplitButton|MenuButton
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <ButtonDropdown
+ *   title="Click me"
+ *   variant={ButtonVariant.Neutral}
+ *   items={[{ key: 'profile', label: 'Profile' }, { key: 'logout', label: 'Logout' }]}
+ * />
+ * ```
+ *
+ * Inherits all props from Button.
+ * @param [items] - DropdownItems with actions
+ */
+export declare const ButtonDropdown: FC<ButtonDropdownProps>;

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

@@ -0,0 +1 @@
+export declare const getButtonChevron: (isOpen: boolean) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,55 @@
+import { FC } from 'react';
+import { LabelProps } from '../Label/Label';
+import { CalendarMode } from '../../../types/calendar';
+export type CalendarValue = Date | string | null;
+export interface CalendarProps {
+    mode?: CalendarMode;
+    value?: CalendarValue;
+    onChange?: (value: CalendarValue) => void;
+    labelProps?: LabelProps;
+    placeholder?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    id?: string;
+    className?: string;
+    minDate?: Date;
+    maxDate?: Date;
+    /** BCP 47 locale tag used to localize month/weekday names and date formatting. */
+    locale?: string;
+    fieldClassName?: string;
+}
+/**
+ * A date/time picker supporting four selection modes.
+ * aliases: DatePicker|DateTimePicker
+ * Design system 2.0
+ *
+ * Renders a text-field trigger that opens a rounded month-grid popover for
+ * the `date`/`datetime` modes, a masked `"HH:mm"` text field for `time`, and
+ * a popover list of weekday names for `weekday`. Month/weekday names and
+ * date formatting are localized via the `locale` prop.
+ *
+ * @example
+ * ```tsx
+ * <Calendar mode={CalendarMode.Date} value={date} onChange={setDate} />
+ * <Calendar mode={CalendarMode.DateTime} value={date} onChange={setDate} />
+ * <Calendar mode={CalendarMode.Time} value={time} onChange={setTime} />
+ * <Calendar mode={CalendarMode.Weekday} value={weekday} onChange={setWeekday} />
+ * <Calendar mode={CalendarMode.Date} value={date} onChange={setDate} locale="de-DE" />
+ * <Calendar labelProps={{ label: 'Start date', required: true }} value={date} onChange={setDate} />
+ * ```
+ *
+ * @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 [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
+ * @param [invalid=false] - Applies error styling
+ * @param [id] - id applied to the control, linked to the label
+ * @param [className] - Additional CSS classes applied to the outer container
+ * @param [minDate] - Earliest selectable date (date/datetime modes)
+ * @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
+ */
+export declare const Calendar: FC<CalendarProps>;

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

@@ -0,0 +1,17 @@
+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-hover-alpha focus-within:border-focus-blue";
+export declare const calendarFieldDisabledClassName = "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-alpha 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-3 py-4 shadow-md";
+export declare const calendarDayButtonBaseClassName = "flex size-8 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-black";
+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-alpha";
+export declare const calendarFieldIconClassName = "text-secondary";
+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;
+};

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

@@ -0,0 +1,25 @@
+export declare const getMonthGrid: (year: number, month: number) => Date[];
+export declare const isSameDay: (a?: Date | null, b?: Date | null) => boolean;
+export declare const isDateOutOfRange: (date: Date, minDate?: Date, maxDate?: Date) => boolean;
+export declare const formatMonthLabel: (date: Date, locale: string) => string;
+export declare const formatDateLabel: (date: Date, locale: string) => string;
+/**
+ * Full label for a day cell in the month grid, e.g. `"Wednesday 11 March 2026"`.
+ *
+ * A day button renders only its number, so on its own it announces as "15" with
+ * no month, year, or weekday context — and a cell spilling over from an
+ * adjacent month is indistinguishable from one in the visible month. The
+ * weekday and long month also keep this distinct from `formatDateLabel`, which
+ * names the trigger.
+ */
+export declare const formatDayAriaLabel: (date: Date, locale: string) => string;
+export declare const formatTimeLabel: (date: Date) => string;
+export declare const setTimeOnDate: (date: Date, time: string) => Date;
+export declare const isCompleteTimeString: (value: string) => boolean;
+/** Formats free-typed digits into an `"HH:mm"` mask, clamping each completed segment. */
+export declare const sanitizeTimeInput: (raw: string) => string;
+export declare const getWeekdayShortLabels: (locale: string) => string[];
+export declare const getWeekdayOptions: (locale: string) => {
+    value: string;
+    label: string;
+}[];

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

@@ -0,0 +1 @@
+export {};

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

@@ -0,0 +1,21 @@
+import { FC, HTMLAttributes } from 'react';
+import { CaptionType } from '../../../types/caption';
+export interface CaptionTextProps extends HTMLAttributes<HTMLSpanElement> {
+    text?: string;
+    variant?: CaptionType;
+}
+/**
+ * A component for displaying caption text with consistent styling
+ * aliases: HelperText|ValidationText
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <CaptionText text="This field is required" variant={CaptionType.Error} />
+ * ```
+ *
+ * @param [text] - The text to display. If undefined or empty, nothing is rendered
+ * @param [variant] - The variant of the caption text, e.g., error or description.
+ */
+export declare const CaptionText: FC<CaptionTextProps>;
+export declare const ErrorText: FC<Omit<CaptionTextProps, 'variant'>>;

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

@@ -0,0 +1,14 @@
+import { FC, HTMLAttributes } from 'react';
+export type CardShellProps = HTMLAttributes<HTMLElement>;
+/**
+ * A shared elevated card shell used as the base wrapper for browse-grid cards.
+ * Design system 2.0
+ *
+ * Renders an `<article>` with rounded corners, padding, a resting shadow, and
+ * a hover lift with a stronger shadow. Respects `prefers-reduced-motion` by
+ * disabling the transform/shadow transition and hover lift.
+ *
+ * @param [className] - Additional CSS classes applied to the card container
+ * @param [children] - Content rendered inside the card
+ */
+export declare const CardShell: FC<CardShellProps>;

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

@@ -0,0 +1,33 @@
+import { FC, MouseEvent } from 'react';
+import { ElementSize } from '../../../types/size';
+export interface CloseButtonProps {
+    ariaLabel?: string;
+    className?: string;
+    size?: ElementSize;
+    onClose: (e: MouseEvent<HTMLButtonElement>) => void;
+    disabled?: boolean;
+}
+/**
+ * A close button: a ghost {@link IconButton} carrying an X icon.
+ * aliases: DismissButton|ExitButton
+ * Design system 2.0
+ *
+ * Sized through {@link ElementSize} like every other 2.0 control. It defaults to
+ * the small 24px box that headers and toasts want; pass `ElementSize.Standard`
+ * where the control stands alone, since only that variant carries the 44×44
+ * pointer target. Name it after the thing it closes ("Close dialog", "Close
+ * notification") — the default `"Close"` only keeps the control from being unnamed.
+ *
+ * @example
+ * ```tsx
+ * <CloseButton ariaLabel="Close notification" onClose={handleClose} />
+ * <CloseButton ariaLabel="Close dialog" size={ElementSize.Standard} onClose={handleClose} />
+ * ```
+ *
+ * @param [ariaLabel="Close"] - Accessible name of the button
+ * @param [className] - Additional CSS classes to apply to the button
+ * @param [size=ElementSize.Small] - Button size: small is 24px, standard is 40px
+ * @param onClose - Click event handler for the close button
+ * @param [disabled] - Whether the button is disabled
+ */
+export declare const CloseButton: FC<CloseButtonProps>;

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

@@ -0,0 +1,55 @@
+import { FC, ReactNode } from 'react';
+import { PopupProps } from '../Popup/Popup';
+import { ConfirmationPopupVariant } from '../../../types/confirmation-popup';
+export interface ConfirmationPopupProps extends PopupProps {
+    description?: ReactNode;
+    descriptionClassName?: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    isLoading?: boolean;
+    disableConfirmButton?: boolean;
+    confirmClassName?: string;
+    onConfirm: () => void;
+    onCancel?: () => void;
+    children?: ReactNode;
+    variant?: ConfirmationPopupVariant;
+}
+/**
+ * A confirmation dialog built from {@link Popup} and the 2.0 {@link Button}.
+ * aliases: ConfirmDialog|WarningDialog
+ * Design system 2.0
+ *
+ * Provides an accessible modal with a title, optional description or custom content,
+ * and a footer with Cancel / Confirm actions.
+ *
+ * @example
+ * ```tsx
+ * <ConfirmationPopup
+ *   open
+ *   header="Delete item?"
+ *   description="This action cannot be undone."
+ *   confirmLabel="Delete"
+ *   variant={ConfirmationPopupVariant.Danger}
+ *   onClose={() => setOpen(false)}
+ *   onConfirm={handleDelete}
+ * />
+ * ```
+ *
+ * @param header - Title content for the header
+ * @param [description] - Secondary text (ignored when `children` set)
+ * @param [descriptionClassName] - Custom CSS class for the description
+ * @param [open=false] - Controls visibility of the popup
+ * @param [confirmLabel="Ok"] - Label for the confirm button
+ * @param [cancelLabel="Cancel"] - Label for the cancel button
+ * @param [isLoading=false] - Shows loader placeholder and hides actions
+ * @param [disableConfirmButton=false] - Disables the confirm button
+ * @param [className] - Extra classes for the popup container
+ * @param [confirmClassName] - Extra classes merged into the confirm button
+ * @param onClose - Fired on close
+ * @param onConfirm - Fired on confirm
+ * @param [onCancel] - Fired on cancel (falls back to `onClose`)
+ * @param [children] - Custom body content
+ * @param [variant=ConfirmationPopupVariant.Info] - Visual variant for the popup
+ * @param [size=PopupSize.Sm] - Size of the popup
+ */
+export declare const ConfirmationPopup: FC<ConfirmationPopupProps>;

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

@@ -0,0 +1,14 @@
+import { ButtonAppearance, ButtonVariant } from '../../../types/button';
+import { ConfirmationPopupVariant } from '../../../types/confirmation-popup';
+export declare const actionsBaseClassName = "flex justify-end gap-2 px-6 py-4 border-t border-tertiary";
+export declare const descriptionBaseClassName = "text-secondary dial-small-paragraph-text px-6 pb-4";
+export declare const loaderContainerClassName = "px-6 py-4 h-[120px]";
+export declare const defaultCancelLabel = "Cancel";
+export declare const defaultConfirmLabel = "Ok";
+export declare const variantConfig: Record<ConfirmationPopupVariant, {
+    container?: string;
+    confirm: {
+        variant: ButtonVariant;
+        appearance: ButtonAppearance;
+    };
+}>;

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

@@ -0,0 +1,87 @@
+import { Placement } from '@floating-ui/react';
+import { FC, MouseEvent, ReactNode, RefObject } from 'react';
+import { DropdownTrigger } from '../../../types/dropdown';
+import { DropdownItem } from '../../../models/dropdown';
+export interface DropdownProps {
+    children: ReactNode;
+    items?: DropdownItem[];
+    onItemClick?: (info: {
+        key: string;
+        domEvent: MouseEvent;
+    }) => void;
+    menuHeader?: ReactNode | (() => ReactNode);
+    menuFooter?: ReactNode | (() => ReactNode);
+    renderOverlay?: () => ReactNode;
+    trigger?: DropdownTrigger[];
+    placement?: Placement;
+    allowedPlacements?: Placement[];
+    disabled?: boolean;
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    closable?: boolean;
+    onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
+    className?: string;
+    overlayContentClassName?: string;
+    separatorClassName?: string;
+    listClassName?: string;
+    outsidePressIgnoreRef?: RefObject<HTMLElement | null>;
+    outsideClosable?: boolean;
+    anchorToMouse?: boolean;
+    matchReferenceWidth?: boolean;
+    maxDropdownHeight?: number | null;
+}
+/**
+ *
+ * Renders the given trigger (`children`) and a floating contextual menu overlay.
+ * aliases: ContextMenu|PopupMenu
+ * Design system 2.0
+ *
+ * Supports click/hover/contextMenu triggers, controlled/uncontrolled open, and an optional
+ * close button inside the overlay. Placement is taken directly from Floating UI; when
+ * `placement` is **undefined** (default), automatic placement is handled by `autoPlacement`.
+ *
+ * @example
+ * ```tsx
+ * // Simple items menu
+ * <Dropdown items={[{ key: 'profile', label: 'Profile' }, { key: 'logout', label: 'Logout' }]}>
+ *   <button type="button" className="px-3 py-2 rounded border">Open</button>
+ * </Dropdown>
+ *
+ * // Hover trigger
+ * <Dropdown trigger={[DropdownTrigger.Hover]} placement="bottom-end" items={items}>
+ *   <button type="button" className="px-3 py-2 rounded border">Hover me</button>
+ * </Dropdown>
+ *
+ * // Custom overlay content
+ * <Dropdown closable renderOverlay={() => <div className="p-3">Custom content</div>}>
+ *   <button type="button" className="px-3 py-2 rounded border">Custom</button>
+ * </Dropdown>
+ * ```
+ *
+ * @param children - Trigger element(s) to anchor and open the menu
+ * @param [items] - Menu items to render
+ * @param [onItemClick] - Global handler fired when any item is clicked
+ * @param [menuHeader] - Content rendered above the items list
+ * @param [menuFooter] - Content rendered below the items list
+ * @param [renderOverlay] - Render function for fully custom overlay content (ignored when `items` is provided)
+ * @param [trigger=[DropdownTrigger.Click]] - Interactions that open the menu
+ * @param [placement] - Floating UI placement string; when omitted, auto placement is used
+ * @param [allowedPlacements] - Restricts the allowed placements
+ * @param [disabled=false] - Disables interaction and prevents opening
+ * @param [open] - Controlled open state (when provided, `defaultOpen` is ignored)
+ * @param [defaultOpen=false] - Initial open state in uncontrolled mode
+ * @param [onOpenChange] - Fired whenever the open state changes
+ * @param [closable=false] - Whether the overlay shows an internal close button
+ * @param [onClose] - Fired when the close button inside the overlay is clicked
+ * @param [className] - Additional CSS classes applied to the trigger wrapper
+ * @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 [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
+ * @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
+ */
+export declare const Dropdown: FC<DropdownProps>;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { DropdownItem } from '../../../models/dropdown';
+export interface DropdownSubMenuItemProps {
+    item: DropdownItem;
+    /** Close the root dropdown when a leaf child is selected. */
+    onRootClose: () => void;
+}
+export declare const DropdownSubMenuItem: FC<DropdownSubMenuItemProps>;

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

@@ -0,0 +1,9 @@
+export declare const dropdownBaseClassName: string;
+export declare const dropdownListBaseClassName: string;
+export declare const dropdownSubMenuClassName: string;
+export declare const dropdownItemBaseClassName: string;
+export declare const dropdownItemDisabledClassName: string;
+export declare const dropdownItemDangerClassName = "text-error";
+export declare const dropdownDividerClassName = "my-1 border-t border-secondary";
+export declare const dropdownGap = 4;
+export declare const submenuCaretIcon: import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,81 @@
+import { FC, ReactNode } from 'react';
+import { LabelProps } from '../Label/Label';
+export interface FileDropzoneProps {
+    /**
+     * Props of the {@link Label} rendered above the area — the name of the field
+     * this dropzone fills, e.g. `{ label: 'Attachments', required: true }`. The
+     * copy inside the area is `label`, which says how to use the control rather
+     * than what it is for.
+     */
+    labelProps?: LabelProps;
+    /** Primary line of copy, e.g. `'Drag and drop it or click here to upload'`. */
+    label: ReactNode;
+    /** Secondary line of copy, e.g. `'File formats .md, .zip and .skill'`. */
+    description?: ReactNode;
+    /** Fired with the accepted files when files are picked or dropped. */
+    onChange: (files: File[]) => void;
+    /**
+     * Fired with files that a drop offered but `accept` excluded. The file picker
+     * filters by `accept` itself, so this only ever comes from a drop.
+     */
+    onReject?: (files: File[]) => void;
+    /** Comma-separated `accept` tokens, e.g. `'.md,.zip,.skill'` or `'image/*'`. */
+    accept?: string;
+    /** Whether more than one file can be selected at a time. */
+    multiple?: boolean;
+    /** Disables picking and dropping. */
+    disabled?: boolean;
+    /** Error message rendered below the area, which also turns its border red. */
+    errorText?: string;
+    /** Icon rendered above the copy. Defaults to an upload arrow. */
+    icon?: ReactNode;
+    /** `id` of the underlying file input. Generated when omitted. */
+    id?: string;
+    /**
+     * Accessible name for the control. Only needed when `label` is a node that
+     * carries no text of its own — a string label already names the input.
+     */
+    ariaLabel?: string;
+    /** Additional CSS classes for the drop area. */
+    className?: string;
+}
+/**
+ * A dashed drop area that takes files by drag-and-drop or through the file picker.
+ * aliases: LoadFileArea|FileUpload|DragDropUpload|UploadArea
+ * Design system 2.0
+ *
+ * The area is a label over a visually hidden file input, so the picker opens on
+ * click and the control stays operable by keyboard and announced as a file input
+ * without any extra wiring. The border highlights while a drag hovers it.
+ *
+ * `accept` is enforced on drops as well as in the picker — the browser only
+ * filters the latter — so `onChange` never receives a file the caller excluded.
+ * Rejected files go to `onReject`; all copy stays with the caller, which keeps
+ * validation messages in the consumer's own wording and language.
+ *
+ * @example
+ * ```tsx
+ * <FileDropzone
+ *   label="Drag and drop it or click here to upload"
+ *   description="File formats .md, .zip and .skill"
+ *   accept=".md,.zip,.skill"
+ *   onChange={(files) => upload(files)}
+ *   onReject={() => setError('Unsupported file format')}
+ * />
+ * ```
+ *
+ * @param [labelProps] - Props of the {@link Label} naming the field, rendered above the area.
+ * @param label - Primary line of copy.
+ * @param [description] - Secondary line of copy.
+ * @param onChange - Fired with the accepted files.
+ * @param [onReject] - Fired with dropped files that `accept` excluded.
+ * @param [accept] - Comma-separated `accept` tokens.
+ * @param [multiple=false] - Whether more than one file can be selected.
+ * @param [disabled=false] - Disables picking and dropping.
+ * @param [errorText] - Error message rendered below the area.
+ * @param [icon] - Icon rendered above the copy.
+ * @param [id] - `id` of the underlying file input.
+ * @param [ariaLabel] - Accessible name; needed when `label` carries no text.
+ * @param [className] - Additional CSS classes for the drop area.
+ */
+export declare const FileDropzone: FC<FileDropzoneProps>;

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

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+export interface FolderPathProps {
+    segments: string[];
+    labelClassName?: string;
+    leafClassName?: string;
+    className?: string;
+    ariaLabel?: string;
+}
+/**
+ * A read-only, non-clickable folder/location path built on top of `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.
+ *
+ * @example
+ * ```tsx
+ * <FolderPath segments={['Shared', 'Team Space', 'Reports']} />
+ * ```
+ *
+ * @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.
+ */
+export declare const FolderPath: FC<FolderPathProps>;

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

@@ -0,0 +1,19 @@
+import { FC } from 'react';
+/** Props for `Highlight`. */
+export interface HighlightProps {
+    /** Full text to display. */
+    text: string;
+    /** Search query; the first case-insensitive match is highlighted. */
+    query: string;
+    /** Optional class name for the highlighted segment. */
+    markClassName?: string;
+    /** Optional class name forwarded to the `DialEllipsisTooltip` container. */
+    className?: string;
+    /** Maximum number of lines to display before truncating. Use `1` for single-line ellipsis truncation (e.g. list rows). Defaults to `2`. */
+    maxLines?: number;
+}
+/**
+ * Renders text with the first occurrence of `query` wrapped in a highlight mark, with ellipsis truncation and a tooltip when overflowing.
+ * Design system 2.0
+ */
+export declare const Highlight: FC<HighlightProps>;