@epam/ai-dial-ui-kit 0.13.0-dev.40 → 0.13.0-dev.43

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

@@ -0,0 +1,86 @@
+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
+ *
+ * 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/InfoButton/InfoButton.stories.d.ts

@@ -4,8 +4,3 @@ declare const meta: Meta<typeof InfoButton>;
 export default meta;
 type Story = StoryObj<typeof meta>;
 export declare const Default: Story;
-/**
- * A long caption still works as a tooltip, but a short `aria-label` keeps the
- * announced name scannable.
- */
-export declare const ExplicitAccessibleName: Story;

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

@@ -12,6 +12,14 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
     tooltipText?: string;
     iconBefore?: ReactNode;
     iconAfter?: ReactNode;
+    /**
+     * Content rendered inside the field, between `iconBefore` and the input, for
+     * values a plain `<input>` cannot hold — the tags of a multi-select, a value
+     * with its own markup. When the slot stands in for the value, give the input
+     * itself a zero width through `className` so it keeps taking focus without
+     * competing for space.
+     */
+    children?: ReactNode;
     prefix?: string;
     postfix?: string;
     inputRef?: Ref<HTMLInputElement>;
@@ -38,6 +46,7 @@ export interface InputProps extends Omit<InputHTMLAttributes<HTMLInputElement>,
  * @param [invalid] - Whether the input has validation errors (applies error styling)
  * @param [iconAfter] - Icon or element to display after the input
  * @param [iconBefore] - Icon or element to display before the input
+ * @param [children] - Content rendered inside the field before the input, for values a plain `<input>` cannot hold (e.g. multi-select tags)
  * @param [textBeforeInput] - Text to display before the input
  * @param [suffix] - Text to display inside the input on the right
  * @param [containerClassName] - Additional CSS classes to apply to the container div

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

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { PreviewType } from '@uiw/react-md-editor';
+import { EditorThemes } from '../../../types/editor';
+export interface MarkdownEditorProps {
+    value?: string;
+    onChange?: (value: string) => void;
+    height?: number;
+    theme?: EditorThemes;
+    className?: string;
+    placeholder?: string;
+    /** Initial edit/live/preview mode; the toolbar lets the user switch it afterwards. */
+    defaultPreview?: PreviewType;
+}
+/**
+ * The 2.0 Markdown editor: a formatting toolbar (bold/italic/strikethrough,
+ * text style, lists, quote/link/code, table) plus an edit/live/preview mode
+ * switcher and fullscreen, built on top of `@uiw/react-md-editor`.
+ *
+ * @example
+ * ```tsx
+ * <MarkdownEditor value={value} onChange={setValue} height={400} />
+ * ```
+ *
+ * @param [value] - The current markdown content
+ * @param [onChange] - Callback fired when the editor content changes
+ * @param [height=300] - Height of the editor in pixels
+ * @param [theme='light'] - Theme for the editor ('light' or 'dark')
+ * @param [className] - Additional CSS classes for the container
+ * @param [placeholder] - Placeholder text shown when the editor is empty
+ * @param [defaultPreview='edit'] - Initial edit/live/preview mode
+ */
+export declare const MarkdownEditor: FC<MarkdownEditorProps>;

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

@@ -0,0 +1,15 @@
+import { ICommand } from '@uiw/react-md-editor';
+import { DIAL_ICON_SIZE } from '../../../constants/icon';
+export declare const MARKDOWN_TOOLBAR_ICON_SIZE = DIAL_ICON_SIZE.MD;
+/**
+ * Left-hand formatting toolbar, built on top of `@uiw/react-md-editor`'s
+ * built-in commands (which insert/toggle markdown syntax in the underlying
+ * textarea) with icons and grouping matching the design.
+ */
+export declare const getMarkdownFormattingCommands: () => ICommand[];
+/**
+ * Right-hand toolbar: the built-in edit/live/preview mode switcher, each
+ * with a distinct icon so the three states stay distinguishable even before
+ * the active one is highlighted, followed by fullscreen.
+ */
+export declare const getMarkdownExtraCommands: () => ICommand[];

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

@@ -0,0 +1,35 @@
+import { FC } from 'react';
+import { InputProps } from '../Input/Input';
+export interface NumberInputProps extends Omit<InputProps, 'onChange' | 'type'> {
+    /** When true, restricts input to integer values only — blocks decimal points, minus, plus, and scientific notation (e/E) */
+    integer?: boolean;
+    onChange?: (value?: number | string) => void;
+}
+/**
+ * A number field, built on {@link Input}.
+ * aliases: NumericField|NumberField
+ *
+ * `type` is owned by this component; every other {@link Input} prop is passed
+ * through, so it shares the 2.0 field styling, sizes, label, caption and error
+ * states.
+ *
+ * @example
+ * ```tsx
+ * <NumberInput
+ *   id="age"
+ *   placeholder="Enter your age"
+ *   value={25}
+ *   onChange={(value) => setAge(value)}
+ * />
+ * ```
+ *
+ * @param [integer] - When true, restricts input to integer values only — blocks decimal points, minus, plus, and scientific notation (e/E)
+ * @param [min] - Minimum allowed value
+ * @param [max] - Maximum allowed value
+ * @param [size=ElementSize.Standard] - Field height: standard is 40px, small is 24px
+ * @param [onKeyDown] - Called after the numeric key guard has run, unless the key was blocked
+ * @param [onPaste] - Called after pasted text has been sanitized in `integer` mode
+ * @param onChange - Callback function called when the input value changes.
+ *                        Returns either a number (for most values) or a string (for decimal values < 1 with leading zeros)
+ */
+export declare const NumberInput: FC<NumberInputProps>;

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

@@ -0,0 +1,32 @@
+import { FC } from 'react';
+import { InputProps } from '../Input/Input';
+export interface PasswordInputProps extends Omit<InputProps, 'type' | 'iconAfter'> {
+    /** Accessible name of the reveal toggle while the value is masked. */
+    showPasswordLabel?: string;
+    /** Accessible name of the reveal toggle while the value is visible. */
+    hidePasswordLabel?: string;
+}
+/**
+ * A password field with a reveal toggle, built on {@link Input}.
+ * aliases: SecureInput|ToggleablePassword
+ *
+ * The toggle is a real `<button>`, so it is reachable by keyboard and announces
+ * both its purpose and its state. `type` and `iconAfter` are owned by this
+ * component; every other {@link Input} prop is passed through.
+ *
+ * @example
+ * ```tsx
+ * <PasswordInput
+ *   id="password"
+ *   labelProps={{ label: 'Password', required: true }}
+ *   value={password}
+ *   onChange={setPassword}
+ * />
+ * ```
+ *
+ * @param [showPasswordLabel="Show password"] - Accessible name of the toggle while the value is masked
+ * @param [hidePasswordLabel="Hide password"] - Accessible name of the toggle while the value is visible
+ * @param [size=ElementSize.Standard] - Field height: standard is 40px, small is 24px
+ * @param [disabled=false] - Disables the field and its reveal toggle
+ */
+export declare const PasswordInput: FC<PasswordInputProps>;

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

@@ -0,0 +1,68 @@
+import { FC, MouseEvent, ReactNode } from 'react';
+import { PopupSize } from '../../../types/popup';
+export interface PopupProps {
+    open?: boolean;
+    header?: ReactNode;
+    ariaLabel?: string;
+    portalId?: string;
+    className?: string;
+    overlayClassName?: string;
+    titleClassName?: string;
+    headerClassName?: string;
+    children?: ReactNode;
+    footer?: ReactNode;
+    onClose?: (e?: MouseEvent<HTMLButtonElement> | null) => void;
+    size?: PopupSize;
+    hideClose?: boolean;
+    closeAriaLabel?: string;
+    closeOnOutsideClick?: boolean;
+    preventKeyboardOnOpen?: boolean;
+}
+/**
+ * An accessible modal dialog using Floating UI.
+ * aliases: Modal|Dialog
+ *
+ * Renders in a portal with a scrim overlay, focus management, a header with the
+ * title and close control, a scrollable body and an optional footer. Sections
+ * are separated by spacing rather than rules; add your own through
+ * `headerClassName` or the footer node if a surface needs them.
+ *
+ * A string `header` names the dialog automatically. A `header` node cannot —
+ * pass `ariaLabel` in that case, or the dialog opens unnamed.
+ *
+ * @example
+ * ```tsx
+ * <Popup
+ *   open
+ *   header="Title"
+ *   size={PopupSize.Md}
+ *   footer={
+ *     <div className="flex justify-end gap-2 px-6 py-4">
+ *       <NeutralButton label="Cancel" />
+ *       <PrimaryButton label="Confirm" />
+ *     </div>
+ *   }
+ *   onClose={() => setOpen(false)}
+ * >
+ *   <div className="px-6 py-4">Dialog content goes here…</div>
+ * </Popup>
+ * ```
+ *
+ * @param [open=false] - Controls visibility of the popup
+ * @param [header] - Optional title rendered in the header
+ * @param [ariaLabel] - Accessible name for the dialog; needed when `header` is not a string
+ * @param [portalId] - Optional portal container id
+ * @param [className] - Additional CSS classes applied to the popup container
+ * @param [overlayClassName] - Additional CSS classes applied to the overlay
+ * @param [titleClassName] - Additional CSS classes applied to the title element
+ * @param [headerClassName] - Additional CSS classes applied to the popup header container
+ * @param [children] - Body content
+ * @param [footer] - Footer area for actions
+ * @param [onClose] - Callback fired when the popup requests to close
+ * @param [size=PopupSize.Md] - Sets the max-width of the popup
+ * @param [hideClose=false] - Whether the close button is hidden in the header
+ * @param [closeAriaLabel="Close dialog"] - Accessible name of the close button
+ * @param [closeOnOutsideClick=true] - Whether the popup closes when clicking outside
+ * @param [preventKeyboardOnOpen=false] - When true, initial focus goes to a non-input guard to avoid opening the virtual keyboard on mobile
+ */
+export declare const Popup: FC<PopupProps>;

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

@@ -0,0 +1,10 @@
+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 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-h2-text text-primary";
+/**
+ * Max widths per size. Full width below the `md` breakpoint, where the popup
+ * fills the screen.
+ */
+export declare const popupSizeClassMap: Record<PopupSize, string>;

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

@@ -0,0 +1,16 @@
+import { FC, MouseEvent } from 'react';
+import { SelectOption } from '../../../models/select';
+export interface MultiSelectTagsProps {
+    options: SelectOption[];
+    selectedValues: string[];
+    handleRemoveTag?: (event: MouseEvent<HTMLButtonElement, globalThis.MouseEvent>, val: string) => void;
+}
+/**
+ * The selected values of a multi-select, rendered as removable tags inside the
+ * field.
+ *
+ * @param options - All available options, used to resolve labels and icons
+ * @param selectedValues - Values currently selected
+ * @param [handleRemoveTag] - Called with the value whose tag was removed; when omitted the tags are not removable
+ */
+export declare const MultiSelectTags: FC<MultiSelectTagsProps>;

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

@@ -0,0 +1,109 @@
+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
+ *
+ * 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-accent-primary-alpha";
+/**
+ * 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/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-accent-primary-alpha";
+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/Skeleton/Skeleton.d.ts

@@ -1,28 +1,28 @@
 import { FC, HTMLAttributes, ReactNode } from 'react';
-import { DialSkeletonVariant, DialSkeletonAvatarSize, DialSkeletonAvatarShape } from '../../types/skeleton';
-export interface DialSkeletonProps extends HTMLAttributes<HTMLDivElement> {
+import { SkeletonVariant, SkeletonAvatarSize, SkeletonAvatarShape } from '../../types/skeleton';
+export interface SkeletonProps extends HTMLAttributes<HTMLDivElement> {
     active?: boolean;
     paragraph?: boolean | {
         rows?: number;
         width?: string | string[];
     };
     avatar?: boolean | {
-        size?: number | DialSkeletonAvatarSize;
-        shape?: DialSkeletonAvatarShape;
+        size?: number | SkeletonAvatarSize;
+        shape?: SkeletonAvatarShape;
     };
     showTitle?: boolean | {
         width?: string;
     };
     loading?: boolean;
     children?: ReactNode;
-    variant?: DialSkeletonVariant;
+    variant?: SkeletonVariant;
     width?: string | number;
     height?: string | number;
     overlay?: ReactNode;
     color?: string;
 }
 /**
- * DialSkeleton
+ * Skeleton
  * aliases: PlaceholderUI|ShimmerLoader
  *
  * A placeholder component to show while content is loading.
@@ -31,16 +31,16 @@ export interface DialSkeletonProps extends HTMLAttributes<HTMLDivElement> {
  * @example
  * ```tsx
  * // Simple skeleton
- * <DialSkeleton />
+ * <Skeleton />
  *
  * // Text skeleton with custom size
- * <DialSkeleton variant={DialSkeletonVariant.Text} width="200px" height="20px" />
+ * <Skeleton variant={SkeletonVariant.Text} width="200px" height="20px" />
  *
  * // Circular avatar skeleton
- * <DialSkeleton variant={DialSkeletonVariant.Circular} width={40} height={40} />
+ * <Skeleton variant={SkeletonVariant.Circular} width={40} height={40} />
  *
  * // Complex skeleton with avatar, showTitle and paragraph
- * <DialSkeleton
+ * <Skeleton
  *   avatar
  *   showTitle
  *   paragraph={{ rows: 3 }}
@@ -48,20 +48,20 @@ export interface DialSkeletonProps extends HTMLAttributes<HTMLDivElement> {
  * />
  *
  * // Conditional loading
- * <DialSkeleton loading={isLoading}>
+ * <Skeleton loading={isLoading}>
  *   <div>Your content here</div>
- * </DialSkeleton>
+ * </Skeleton>
  *
  * // Custom paragraph widths
- * <DialSkeleton
+ * <Skeleton
  *   paragraph={{ rows: 3, width: ['100%', '80%', '60%'] }}
  * />
  *
  * // Avatar with size and shape
- * <DialSkeleton
+ * <Skeleton
  *   avatar={{
- *     size: DialSkeletonAvatarSize.Large,
- *     shape: DialSkeletonAvatarShape.Square
+ *     size: SkeletonAvatarSize.Large,
+ *     shape: SkeletonAvatarShape.Square
  *   }}
  * />
  * ```
@@ -72,11 +72,11 @@ export interface DialSkeletonProps extends HTMLAttributes<HTMLDivElement> {
  * @param [showTitle=true] - Show title placeholder or configure its appearance
  * @param [loading=true] - Display the skeleton when true
  * @param [children] - Content to be displayed when loading is false
- * @param [variant=DialSkeletonVariant.Default] - Skeleton variant
+ * @param [variant=SkeletonVariant.Default] - Skeleton variant
  * @param [width] - Width of the skeleton
  * @param [height] - Height of the skeleton
  * @param [className] - Additional CSS classes
  * @param [overlay] - Content to overlay on top of the skeleton (e.g., a spinner)
  * @param [color] - Custom background color for the skeleton elements (overrides the default token)
  */
-export declare const DialSkeleton: FC<DialSkeletonProps>;
+export declare const Skeleton: FC<SkeletonProps>;

package/dist/src/components/Skeleton/utils.d.ts

@@ -1,2 +1,2 @@
-import { DialSkeletonAvatarSize } from '../../types/skeleton';
-export declare const getAvatarSize: (size?: number | DialSkeletonAvatarSize) => number;
+import { SkeletonAvatarSize } from '../../types/skeleton';
+export declare const getAvatarSize: (size?: number | SkeletonAvatarSize) => number;