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

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

@@ -0,0 +1,110 @@
+import { FC, MouseEvent, ReactNode, Ref } from 'react';
+import { LabelProps } from '../Label/Label';
+import { SelectOption } from '../../../models/select';
+import { ElementSize } from '../../../types/size';
+export interface SelectProps {
+    options: SelectOption[];
+    multiple?: boolean;
+    id?: string;
+    size?: ElementSize;
+    value?: string | string[];
+    customSelectedValue?: string;
+    prefix?: string;
+    defaultValue?: string | string[];
+    placeholder?: string;
+    labelProps?: LabelProps;
+    error?: string;
+    caption?: string;
+    ariaLabel?: string;
+    searchable?: boolean;
+    searchSize?: ElementSize;
+    searchPlaceholder?: string;
+    selectAll?: boolean;
+    selectAllLabel?: string;
+    emptyStateTitle?: string;
+    emptyStateDescription?: string;
+    emptyStateIcon?: ReactNode;
+    disabled?: boolean;
+    className?: string;
+    fieldClassName?: string;
+    listClassName?: string;
+    closable?: boolean;
+    invalid?: boolean;
+    header?: ReactNode | (() => ReactNode);
+    footer?: ReactNode | (() => ReactNode);
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    onSearchQueryChange?: (query: string) => void;
+    dismissRef?: Ref<unknown>;
+    onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
+    onChange?: (next: string | string[]) => void;
+    onFooterClick?: (e: MouseEvent<HTMLDivElement>) => void;
+    customMultiSelectTagsRenderer?: (options: SelectOption[], selectedValues: string[], handleRemoveTag: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, val: string) => void) => ReactNode;
+}
+/**
+ * A versatile select supporting single and multiple selections.
+ * aliases: OptionPicker|ChoiceSelector
+ * Design system 2.0
+ *
+ * The field is an {@link Input}, so it carries the 2.0 field styling, sizes,
+ * label, caption and error states, and it exposes the control as a `combobox`
+ * whose popup is the option list.
+ *
+ * Single mode:
+ * - The field shows the selected option's leading icon + label.
+ * - In the list, the selected option is indicated by a LEFT border, a tinted background
+ *   and a trailing check icon.
+ *
+ * Multiple mode uses checkboxes (including Select All with indeterminate state) and
+ * renders the selection as removable tags inside the field.
+ *
+ * The field itself is never typeable: `searchable` puts a search field in the overlay
+ * header that filters the options.
+ *
+ * @example
+ * ```tsx
+ * <Select options={[{ value: 'option-1', label: 'Option 1' }]} />
+ * <Select searchable options={[{ value: 'a', label: 'Alpha' }, { value: 'b', label: 'Beta' }]} />
+ * <Select multiple selectAll options={[{ value: '1', label: 'One' }, { value: '2', label: 'Two' }]} />
+ * <Select labelProps={{ label: 'Operator' }} caption="Pick a comparison" options={options} />
+ * ```
+ *
+ * @param options - Array of options to select from.
+ * @param [id] - The id of the field, linked to the label.
+ * @param [multiple] - Whether multiple selections are allowed.
+ * @param [size=ElementSize.Standard] - Field height: standard is 40px, small is 24px.
+ * @param [value] - Controlled selected value(s).
+ * @param [customSelectedValue] - Custom string to render as the selected value in single mode.
+ * @param [prefix] - Prefix for selected value(s).
+ * @param [defaultValue] - Uncontrolled initial selected value(s).
+ * @param [placeholder="Select..."] - Placeholder text when no selection is made.
+ * @param [labelProps] - Props of the {@link Label} rendered above the field.
+ * @param [error] - Error message rendered below the field (does not by itself apply error styling, pass `invalid` too).
+ * @param [caption] - Helper text rendered below the field when there is no `error`.
+ * @param [ariaLabel] - Accessible name for the field; use it when there is no visible label.
+ * @param [searchable=false] - Show a search field in the overlay header.
+ * @param [searchSize=ElementSize.Standard] - Size of the overlay search input when `searchable` is enabled.
+ * @param [searchPlaceholder] - Placeholder for the overlay search input.
+ * @param [selectAll=false] - Show a "Select All" checkbox in multiple mode.
+ * @param [selectAllLabel="Select all"] - Label for the "Select All" checkbox.
+ * @param [emptyStateTitle="No options available"] - Title text when there are no options.
+ * @param [emptyStateDescription] - Description text when there are no options.
+ * @param [emptyStateIcon] - Icon to display when there are no options.
+ * @param [invalid] - Whether the select is in an invalid state, affecting styling.
+ * @param [disabled=false] - Disable the control.
+ * @param [className] - Additional CSS classes for the outer container.
+ * @param [fieldClassName] - Additional CSS classes for the field itself.
+ * @param [listClassName] - Additional CSS classes for the list dropdown.
+ * @param [closable=false] - Show a close button in the dropdown header.
+ * @param [header] - Custom node/function rendered above the options.
+ * @param [footer] - Custom node/function rendered below the options.
+ * @param [open] - Controlled open state of the dropdown. When provided, makes the dropdown controlled.
+ * @param [onOpenChange] - Called when the dropdown open state changes.
+ * @param [onClose] - Called when the dropdown close button is clicked.
+ * @param [onChange] - Called when the selection changes.
+ * @param [onSearchQueryChange] - Called when the overlay search query changes, including the reset to `''` on close. Use it to fetch options for the query.
+ * @param [onFooterClick] - Called when the footer element is clicked. When provided, automatically closes the dropdown.
+ * @param [dismissRef] - Ref object to expose a `dismiss` method to programmatically close the select.
+ * @param [customMultiSelectTagsRenderer] - Renders the selected tags of a multi-select in place of the default ones.
+ */
+export declare const Select: FC<SelectProps>;

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

@@ -0,0 +1,8 @@
+import { FC } from 'react';
+import { SelectOption } from '../../../models/select';
+export interface SelectSubMenuItemProps {
+    opt: SelectOption;
+    selectedValues: string[];
+    onSelect: (value: string) => void;
+}
+export declare const SelectSubMenuItem: FC<SelectSubMenuItemProps>;

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

@@ -0,0 +1,32 @@
+export declare const selectOverlayBaseClassName: string;
+export declare const selectOptionBaseClassName: string;
+export declare const selectOptionSelectedClassName = "bg-control-accent-alpha-hover";
+/**
+ * Holds the option list to the width of the field.
+ *
+ * `Dropdown` only pins the overlay's *min* width to the trigger and lets
+ * `max-width` run to the available viewport width — as an inline style, so a
+ * single long label stretches the list across the screen and only `!important`
+ * can rein it back in. `--reference-width` is the trigger width the dropdown
+ * publishes, and it is set whenever `matchReferenceWidth` is left on (the
+ * default this component relies on).
+ */
+export declare const selectListWidthClassName = "!max-w-[var(--reference-width)]";
+export declare const selectOptionDisabledClassName = "opacity-75";
+export declare const dropdownMenuMaxHeight = 352;
+export declare const selectSubMenuGap = 4;
+export declare const selectSubMenuClassName: string;
+/** Marks an option that opens a nested list. Matches the dropdown's caret. */
+export declare const selectSubMenuCaretIcon: import("react/jsx-runtime").JSX.Element;
+/** Classes for the chevron rendered as the field's trailing icon. */
+export declare const selectFieldIconClassName = "text-secondary transition-transform";
+/**
+ * Number of options below which the overlay's search row stays hidden: a list
+ * short enough to scan at a glance does not need to be filtered.
+ */
+export declare const selectSearchThreshold = 8;
+export declare const selectSearchIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectCloseIcon: import("react/jsx-runtime").JSX.Element;
+/** Marks the selected option in single mode, alongside its tinted row. */
+export declare const selectOptionCheckIcon: import("react/jsx-runtime").JSX.Element;
+export declare const selectEmptyStateIcon: import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,38 @@
+import { FC, InputHTMLAttributes } from 'react';
+import { LabelProps } from '../Label/Label';
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'size'>;
+export interface SwitchProps extends NativeInputProps {
+    labelProps?: LabelProps;
+    isOn?: boolean;
+    disabled?: boolean;
+    onChange?: (value: boolean) => void;
+    caption?: string;
+}
+/**
+ * A switch (toggle) control from the 2.0 design system.
+ * aliases: ToggleSwitch|BinaryToggle|Switcher
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <Switch
+ *   id="notifications"
+ *   labelProps={{ label: 'Active' }}
+ *   isOn={isActive}
+ *   onChange={setIsActive}
+ * />
+ * ```
+ *
+ * The track and the label text are two sibling `<label for>` elements rather
+ * than one wrapper, so the {@link Label} keeps its own `required` marker and
+ * `caption` info button — a button nested in a label forwards its clicks to the
+ * labelled control. Clicking either one still toggles the switch.
+ *
+ * @param [labelProps] - Props of the {@link Label} rendered next to the control
+ * @param [isOn=false] - The current value of the switch
+ * @param [disabled=false] - Whether the switch is disabled
+ * @param [onChange] - Callback fired with the new value when toggled
+ * @param [caption] - Caption text rendered below the label, and described by the switch
+ */
+export declare const Switch: FC<SwitchProps>;
+export {};

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

@@ -0,0 +1,63 @@
+import { FC } from 'react';
+/** A single tab entry rendered by {@link Tabs}. */
+export interface TabItem {
+    /** Unique identifier used to match against `activeTabId`. */
+    id: string;
+    /** Visible label text for the tab. */
+    label: string;
+    /** Optional numeric badge rendered after the label. */
+    count?: number;
+    /** Renders the tab greyed out and unselectable, and skips it during keyboard navigation. */
+    disabled?: boolean;
+}
+export interface TabsProps {
+    /** Ordered list of tabs to render. */
+    tabs: TabItem[];
+    /** ID of the currently selected tab. */
+    activeTabId: string;
+    /** Fired with the tab's `id` when the user selects a tab. */
+    onTabChange: (tabId: string) => void;
+    /**
+     * 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.
+     */
+    ariaLabel?: string;
+    /** Additional CSS classes for the tab list container. */
+    className?: string;
+    /** Additional CSS classes applied to every tab. */
+    tabClassName?: string;
+}
+/**
+ * A horizontal row of tabs, underlining the active one and showing optional count badges.
+ * aliases: TabRow|TabNavigation|TabBar
+ * Design system 2.0
+ *
+ * Follows the ARIA tabs pattern with automatic activation: only the active tab is
+ * in the tab order, and the arrow keys move both focus and selection. `Home` and
+ * `End` jump to the first and last tab, and the arrows wrap around the ends.
+ * Tabs marked `disabled` are greyed out, cannot be clicked, and are skipped by
+ * keyboard navigation.
+ *
+ * The component renders the tabs only; the panels stay with the consumer.
+ *
+ * @example
+ * ```tsx
+ * <Tabs
+ *   ariaLabel="Conversation views"
+ *   tabs={[
+ *     { id: 'all', label: 'All', count: 12 },
+ *     { id: 'shared', label: 'Shared with me' },
+ *   ]}
+ *   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 [ariaLabel] - Accessible name for the tab list.
+ * @param [className] - Additional CSS classes for the tab list container.
+ * @param [tabClassName] - Additional CSS classes applied to every tab.
+ */
+export declare const Tabs: FC<TabsProps>;

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

@@ -0,0 +1,45 @@
+import { FC, HTMLAttributes, MouseEvent, ReactNode } from 'react';
+import { ElementSize } from '../../../types/size';
+type NativeTagProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
+export interface TagProps extends NativeTagProps {
+    label: string;
+    icon?: ReactNode;
+    size?: ElementSize;
+    selected?: boolean;
+    disabled?: boolean;
+    closable?: boolean;
+    removeLabel?: string;
+    onRemove?: (event: MouseEvent<HTMLButtonElement>) => void;
+}
+/**
+ * A compact label element used for selections, filters, or categories.
+ * aliases: Chip|Pill
+ * Design system 2.0
+ *
+ * The label truncates rather than wrapping, and carries a native `title` so the
+ * full text stays reachable when it does.
+ *
+ * A tag with `onClick` becomes a `role="button"` operable with Enter and Space.
+ * Its remove control is a real nested `<button>`, so keep the two roles apart in
+ * the caller: a clickable tag that is also closable gives a screen reader two
+ * actions with no way to tell which one it landed on.
+ *
+ * @example
+ * ```tsx
+ * <Tag label="TypeScript" />
+ * <Tag label="TypeScript" closable onRemove={() => remove('TypeScript')} />
+ * <Tag label="Drafts" selected onClick={() => toggle('Drafts')} />
+ * ```
+ *
+ * @param label - Text content displayed inside the tag.
+ * @param [icon] - Icon rendered before the label.
+ * @param [size=ElementSize.Standard] - Tag height: standard is 24px, small is 20px.
+ * @param [selected=false] - Applies the accent-tinted selected styling.
+ * @param [disabled=false] - Dims the tag and suppresses the remove control and click handling.
+ * @param [closable=false] - Renders the remove button. Needs `onRemove` to appear.
+ * @param [removeLabel] - Accessible name of the remove button; defaults to `Remove <label>`.
+ * @param [onRemove] - Called when the remove button is clicked. The click does not bubble to `onClick`.
+ * @param [onClick] - Called when the tag itself is activated. Makes the tag a button.
+ */
+export declare const Tag: FC<TagProps>;
+export {};

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

@@ -0,0 +1,72 @@
+import { FC } from 'react';
+import { ElementSize } from '../../../types/size';
+import { LabelProps } from '../Label/Label';
+export interface TagInputProps {
+    id?: string;
+    /** Controlled tag list. Pass it together with `onChange`. */
+    value?: string[];
+    /** Initial tag list when the component manages its own state. */
+    defaultValue?: string[];
+    size?: ElementSize;
+    labelProps?: LabelProps;
+    placeholder?: string;
+    caption?: string;
+    error?: string;
+    invalid?: boolean;
+    disabled?: boolean;
+    readOnly?: boolean;
+    collapseTagOverflow?: boolean;
+    ariaLabel?: string;
+    tagListLabel?: string;
+    className?: string;
+    fieldClassName?: string;
+    tagClassName?: string;
+    onChange?: (tags: string[]) => void;
+}
+/**
+ * A tag input field: type a value and commit it with Enter or comma.
+ * aliases: MultiTag|TagField|ChipInput
+ * Design system 2.0
+ *
+ * The field is an {@link Input}, so it carries the 2.0 field styling, sizes,
+ * label, caption and error states, and the tags render as {@link Tag}s in its
+ * content slot. The field grows as tags wrap, unless `collapseTagOverflow` keeps
+ * them on one line behind a `+N` chip.
+ *
+ * Works controlled (`value` + `onChange`) or uncontrolled (`defaultValue`).
+ * Duplicate tags are ignored. Backspace on an empty input removes the last tag.
+ *
+ * @example
+ * ```tsx
+ * const [tags, setTags] = useState<string[]>(['React']);
+ *
+ * <TagInput
+ *   id="skills"
+ *   labelProps={{ label: 'Skills' }}
+ *   placeholder="Add a skill"
+ *   caption="Press Enter or comma to add"
+ *   value={tags}
+ *   onChange={setTags}
+ * />
+ * ```
+ *
+ * @param [id] - The id of the text input, linked to the label.
+ * @param [value] - Controlled tag list.
+ * @param [defaultValue=[]] - Initial tag list when uncontrolled.
+ * @param [size=ElementSize.Standard] - Field height: standard is 40px, small is 24px.
+ * @param [labelProps] - Props of the {@link Label} rendered above the field.
+ * @param [placeholder] - Placeholder shown while there are no tags.
+ * @param [caption] - Helper text rendered below the field when there is no `error`.
+ * @param [error] - Error message rendered below the field (pass `invalid` too for error styling).
+ * @param [invalid=false] - Applies the field's error styling.
+ * @param [disabled=false] - Disables typing and tag removal.
+ * @param [readOnly=false] - Shows the tags without allowing new ones or removal.
+ * @param [collapseTagOverflow=false] - Keep the tags on one line, replacing the ones that do not fit with a `+N` chip.
+ * @param [ariaLabel] - Accessible name for the text input; use it when there is no visible label.
+ * @param [tagListLabel="Tags"] - Accessible name of the tag list.
+ * @param [className] - Additional CSS classes for the outer container.
+ * @param [fieldClassName] - Additional CSS classes for the field itself.
+ * @param [tagClassName] - Additional CSS classes applied to every tag.
+ * @param [onChange] - Called with the new list whenever a tag is added or removed.
+ */
+export declare const TagInput: FC<TagInputProps>;

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

@@ -0,0 +1,21 @@
+export interface VisibleTagCountInput {
+    /** Width the tags have to fit into, in px. */
+    availableWidth: number;
+    /** Rendered width of every tag, in render order. */
+    tagWidths: number[];
+    /** Rendered width of the `+N` chip shown when not every tag fits. */
+    overflowChipWidth: number;
+    /** Horizontal gap between two neighbouring tags. */
+    gap: number;
+}
+/**
+ * How many tags of a collapsed row fit before the `+N` chip has to take over.
+ *
+ * Kept pure and separate from the component because jsdom performs no layout:
+ * the widths come from the DOM, but the arithmetic they feed is the part worth
+ * testing.
+ *
+ * A non-positive `availableWidth` means nothing has been laid out yet, so every
+ * tag is reported as visible and the caller is expected to skip the update.
+ */
+export declare const getVisibleTagCount: ({ availableWidth, tagWidths, overflowChipWidth, gap, }: VisibleTagCountInput) => number;

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

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

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

@@ -0,0 +1,39 @@
+import { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';
+import { LabelProps } from '../Label/Label';
+export interface TextareaProps extends DetailedHTMLProps<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>, HTMLTextAreaElement> {
+    labelProps?: LabelProps;
+    invalid?: boolean;
+    containerClassName?: string;
+    resize?: boolean;
+    error?: string;
+    caption?: string;
+    onChange?: (value: string) => void;
+}
+/**
+ * A flexible textarea component with validation support and consistent styling
+ * aliases: MultilineInput|TextBox
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <DialTextarea
+ *   id="description"
+ *   placeholder="Enter description..."
+ *   value={value}
+ *   onChange={(value) => setValue(value)}
+ * />
+ * ```
+ * @params Component properties extending:
+ * - {@link TextareaHTMLAttributes<HTMLTextAreaElement>} - Standard textarea attributes (id, value, placeholder, disabled, etc.)
+ * - {@link HTMLTextAreaElement} - The underlying HTML textarea element type
+ *
+ * @param [onChange] - Callback function called when the textarea value changes
+ * @param [labelProps] - Props for the field label, including `label` (label text) and `required` (whether to show required indicator)
+ * @param [className=""] - Additional CSS classes to apply to the textarea element
+ * @param [containerClassName=""] - Additional CSS classes to apply to the container div
+ * @param [invalid=false] - Whether the textarea has validation errors (applies error styling)
+ * @param [resize=false] - Whether the textarea has possibility to resize
+ * @param [error] - Error message to display below the textarea (also adds error styling)
+ * @param [caption] - Optional caption text to display below the textarea
+ */
+export declare const Textarea: FC<TextareaProps>;

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

@@ -0,0 +1,24 @@
+/**
+ * Styling shared by the 2.0 floating surfaces — the dropdown menu and the select
+ * option list. They are the same object visually, so they read from one place
+ * rather than each keeping its own copy of the tokens.
+ */
+/** 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";
+/**
+ * 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 —
+ * only the width behaviour differs, since a submenu is sized by its own content
+ * rather than by the trigger further up.
+ */
+export declare const overlaySubMenuClassName: 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.
+ */
+export declare const overlayItemClassName: string;
+/** Tint marking the row that is currently selected. */
+export declare const overlayItemSelectedClassName = "bg-control-accent-alpha-hover";
+export declare const overlayItemDisabledClassName = "opacity-75";
+/** Distance between the trigger and its panel, and between nested panels. */
+export declare const overlayGap = 4;

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

@@ -10,6 +10,7 @@ export interface DialNoDataContentProps {
 /**
  * A component for displaying a message and icon when there is no data to show.
  * aliases: EmptyState|NoResults
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -13,6 +13,7 @@ export interface DialNotificationProps extends Omit<HTMLAttributes<HTMLDivElemen
 /**
  * A contextual feedback component for displaying important messages.
  * aliases: Notification|StatusBanner
+ * Design system 1.0
  *
  * Renders a colored container with an icon, message text, and an optional
  * close button.

package/dist/src/components/NumberInput/NumberInput.d.ts

@@ -8,6 +8,7 @@ export interface DialNumberInputProps extends Omit<DialInputProps, 'onChange'> {
 /**
  * A number input field component
  * aliases: NumericField|NumberField
+ * Design system 1.0
  *
  * @example
  * ```tsx

package/dist/src/components/Pagination/Pagination.d.ts

@@ -5,4 +5,7 @@ export interface DialPaginationProps {
     onPageChange: (page: number) => void;
     className?: string;
 }
+/**
+ * Design system 1.0
+ */
 export declare const DialPagination: FC<DialPaginationProps>;

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

@@ -3,6 +3,7 @@ import { DialInputProps } from '../Input/Input';
 /**
  * A password input component with show/hide functionality and customizable props.
  * aliases: SecureInput|ToggleablePassword
+ * Design system 1.0
  *
  * @example
  * ```tsx

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

@@ -21,6 +21,7 @@ export interface DialPopupProps {
 /**
  * An accessible modal dialog component using Floating UI.
  * aliases: Modal|Dialog
+ * Design system 1.0
  *
  * Renders in a portal with a scrim overlay, focus management, header with a title,
  * content area, optional footer and a close control.
@@ -58,6 +59,6 @@ export interface DialPopupProps {
  * @param [size=PopupSize.Md] - Sets the max-width of the popup
  * @param [hideClose=false] Whether the close button is hidden in the header (default: false)
  * @param [closeOnOutsideClick=true] - Whether the popup closes when clicking outside (default: true)
- * @param [preventKeyboardOnOpen=false] - When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile
+ * @param [preventKeyboardOnOpen=false] - When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile. Redundant since the default focuses the dialog container, which never raises the keyboard; kept for compatibility
  */
 export declare const DialPopup: FC<DialPopupProps>;

package/dist/src/components/ProgressBar/ProgressBar.d.ts

@@ -1,13 +1,54 @@
-import { FC } from 'react';
-export declare enum DialProgressBarSize {
-    Small = "sm",
-    Medium = "md"
-}
-export interface DialProgressBarProps {
+import { FC, HTMLAttributes, ReactNode } from 'react';
+import { LabelProps } from '../New/Label/Label';
+import { ElementSize } from '../../types/size';
+type NativeProgressBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+export interface ProgressBarProps extends NativeProgressBarProps {
     value: number;
     max?: number;
-    size?: DialProgressBarSize;
-    className?: string;
-    ariaLabel?: string;
+    size?: ElementSize;
+    labelProps?: LabelProps;
+    valueLabel?: ReactNode;
 }
-export declare const DialProgressBar: FC<DialProgressBarProps>;
+/**
+ * A horizontal bar indicating progress toward a goal.
+ * aliases: Progress|LoadingBar|Meter
+ * Design system 2.0
+ *
+ * Names itself from `labelProps.label` through `aria-labelledby`; without one it
+ * falls back to `aria-label`, and finally to `Progress` so the bar is never
+ * anonymous. Prefer a real label — several bars all announcing "Progress" tell a
+ * screen reader user nothing about which is which.
+ *
+ * Screen readers derive the announced percentage from the value and `max`. When
+ * the raw numbers are more useful than a percentage, pass `aria-valuetext`
+ * (e.g. `"3 of 10 files"`); it goes straight through to the element.
+ *
+ * `valueLabel` renders a readout at the end of the label row. Formatting stays
+ * with the caller — the bar has no way to know how many decimals or which unit
+ * a given quantity deserves. It does not name the bar, so pair it with a
+ * matching `aria-valuetext` to have the same reading announced.
+ *
+ * @example
+ * ```tsx
+ * <ProgressBar value={40} labelProps={{ label: 'Uploading' }} />
+ * <ProgressBar value={3} max={10} aria-valuetext="3 of 10 files" />
+ * <ProgressBar value={80} size={ElementSize.Small} />
+ *
+ * <ProgressBar
+ *   value={3.313182}
+ *   max={500}
+ *   labelProps={{ label: 'Cost per month', caption: 'Billed monthly' }}
+ *   valueLabel="3.31 / 500"
+ *   aria-valuetext="3.31 of 500"
+ * />
+ * ```
+ *
+ * @param value - Current progress. Clamped into `0…max`.
+ * @param [max=100] - Value that counts as complete.
+ * @param [size=ElementSize.Standard] - Bar height: standard is 8px, small is 4px.
+ * @param [labelProps] - Props of the {@link Label} rendered above the bar, which also names it.
+ * @param [valueLabel] - Readout rendered at the end of the label row.
+ * @param [className] - Additional classes on the track element.
+ */
+export declare const ProgressBar: FC<ProgressBarProps>;
+export {};

package/dist/src/components/RadioButton/RadioButton.d.ts

@@ -18,6 +18,7 @@ export interface DialRadioButtonProps {
 /**
  * A stylized, accessible radio input with optional description.
  * aliases: ChoiceOption|RadioInput
+ * Design system 1.0
  *
  * Renders a native `<input type="radio" />` paired with a label. When `checked`
  * and `description` are provided, a supporting text block appears under the control.

package/dist/src/components/RadioGroup/RadioGroup.d.ts

@@ -24,6 +24,7 @@ export interface DialRadioGroupProps {
 /**
  * Groups multiple `DialRadio` options and renders custom content for the active option.
  * aliases: SelectionGroup|OptionGroup
+ * Design system 1.0
  *
  * Uses `DialField` as the field label and a container with `role="radiogroup"`.
  * Content provided in `radioButtons[].content` is shown under the currently active radio.

package/dist/src/components/RadioGroupPopupField/RadioGroupPopupField.d.ts

@@ -18,6 +18,7 @@ export interface RadioGroupPopupFieldProps extends Pick<DialLabelProps, 'label'
 /**
  * A composite field that opens a popup with a radio group selector.
  * aliases: PopupRadio|ChoicePopup
+ * Design system 1.0
  *
  * Renders a labeled readout using `DialInputPopup`; when opened, a `DialPopup`
  * displays a `DialRadioGroup` allowing the user to pick from a list of options.

package/dist/src/components/RemoveButton/RemoveButton.d.ts

@@ -6,6 +6,7 @@ export interface DialRemoveButtonProps extends Omit<DialButtonProps, 'iconBefore
 /**
  * A specialized button component for removal or delete actions.
  * aliases: DeleteButton|TrashButton
+ * Design system 1.0
  *
  * Renders a `DialDangerButton` with a predefined trash icon (`IconTrashX`) as the leading icon.
  * Additional props are passed directly to the underlying `DialDangerButton`.

package/dist/src/components/ResizableContainer/ConditionalResizableContainer.d.ts

@@ -6,6 +6,7 @@ export interface DialConditionalResizableContainerProps extends DialResizableCon
 /**
  * DialConditionalResizableContainer — A conditional wrapper around `DialResizableContainer`.
  * aliases: OptionalResize|ConditionalPanel
+ * Design system 1.0
  *
  * This component renders its children inside a resizable container only when `enabled` is true.
  * When `enabled` is false, children are rendered directly without any resizable behavior.

package/dist/src/components/ResizableContainer/ResizableContainer.d.ts

@@ -15,6 +15,7 @@ export interface DialResizableContainerProps {
 /**
  * DialResizableContainer — A reusable resizable container
  * aliases: ResizePanel|SizableContainer
+ * Design system 1.0
  *
  * supporting both **controlled** and **uncontrolled** width modes.
  *

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

@@ -3,6 +3,7 @@ import { DialSchemaRendererProps } from './types';
 /**
  * Renders a JSON Schema as a form UI with collapsible sections, validation, and default values.
  * aliases: SchemaRenderer|JsonSchemaForm
+ * Design system 1.0
  *
  * @example
  * ```tsx