@epam/ai-dial-ui-kit 0.14.0-dev.2 → 0.14.0-dev.3

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

@@ -1,14 +1,14 @@
 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 calendarFieldBaseClassName = "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-accent-alpha focus-within:border-accent-focus";
+export declare const calendarFieldDisabledClassName = "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-primary hover:!border-transparent";
 export declare const calendarFieldInvalidClassName = "!border-error";
-export declare const calendarPopoverClassName = "z-[53] flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-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 calendarPopoverClassName = "z-[53] flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md";
+export declare const calendarDayButtonBaseClassName = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-none focus-visible:outline focus-visible:outline-focus";
 export declare const calendarDaySelectedClassName = "bg-control-accent text-control-permanent";
 export declare const calendarDayTodayClassName = "text-accent dial-small-semi-text";
-export declare const calendarDayOutsideClassName = "text-control-disable-alpha";
+export declare const calendarDayOutsideClassName = "text-control-disable-primary";
 export declare const calendarFieldIconClassName = "text-secondary";
 export declare const calendarIcon: import("react/jsx-runtime").JSX.Element;
 export declare const calendarNavIcons: {

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

@@ -0,0 +1,46 @@
+import { FC, InputHTMLAttributes } from 'react';
+import { LabelProps } from '../Label/Label';
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'size'>;
+export interface CheckboxProps extends NativeInputProps {
+    labelProps?: LabelProps;
+    isSelected?: boolean;
+    isIndeterminate?: boolean;
+    invalid?: boolean;
+    disabled?: boolean;
+    onChange?: (value: boolean) => void;
+    caption?: string;
+}
+/**
+ * A checkbox from the 2.0 design system.
+ * aliases: ToggleCheckbox|MultiSelectOption|TriStateCheckbox
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <Checkbox
+ *   labelProps={{ label: 'Accept terms' }}
+ *   isSelected={accepted}
+ *   onChange={setAccepted}
+ * />
+ * ```
+ *
+ * `isIndeterminate` takes visual precedence over `isSelected` and announces the
+ * control as `mixed` — use it for a parent whose children are partly selected.
+ * It also sets the native `indeterminate` DOM property, which no React prop
+ * covers. Clicking an indeterminate checkbox selects it, as it does natively.
+ *
+ * The box 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 checkbox.
+ *
+ * @param [labelProps] - Props of the {@link Label} rendered next to the control
+ * @param [isSelected=false] - The current value of the checkbox
+ * @param [isIndeterminate=false] - Whether the checkbox is in the mixed state
+ * @param [invalid=false] - Whether the checkbox failed validation (applies error styling)
+ * @param [disabled=false] - Whether the checkbox is disabled
+ * @param [onChange] - Callback fired with the new value when toggled
+ * @param [caption] - Caption text rendered below the label, and described by the checkbox
+ */
+export declare const Checkbox: FC<CheckboxProps>;
+export {};

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

@@ -0,0 +1,10 @@
+/**
+ * The check and minus glyphs are decorative: the input's `checked` and
+ * `aria-checked` already carry the state, so the icon is hidden from assistive
+ * tech. Tabler renders a bare `<svg>` with no role, so `aria-hidden` is explicit.
+ */
+export declare const CHECKBOX_ICON_PROPS: {
+    readonly size: 14;
+    readonly stroke: 3;
+    readonly 'aria-hidden': true;
+};

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

@@ -4,6 +4,6 @@ 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 dropdownDividerClassName = "my-1 border-t border-tertiary";
 export declare const dropdownGap = 4;
 export declare const submenuCaretIcon: import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,51 @@
+import { FC, ReactNode } from 'react';
+import { TooltipContainerOptions } from '../Tooltip/TooltipContext';
+export interface EllipsisTooltipProps extends TooltipContainerOptions {
+    text: ReactNode;
+    className?: string;
+    contentClassName?: string;
+    hideTooltip?: boolean;
+    id?: string;
+    customTooltipContent?: ReactNode;
+}
+/**
+ * Single-line text with a CSS ellipsis that reveals the full string in a
+ * tooltip **only when it is actually clipped**.
+ * aliases: TruncatedText|TruncationTooltip
+ * Design system 2.0
+ *
+ * Text that fits gets no tooltip at all, so a row of labels does not sprout
+ * tooltips that repeat what is already on screen.
+ *
+ * The width has to be finite for anything to truncate: the element is a
+ * `min-w-0`, `flex-1` block, and `className` sets the width it should fit into.
+ *
+ * a11y: while truncated, the full string is exposed as the element's
+ * `aria-label`, so a screen reader reads the whole label even though the
+ * tooltip itself renders nothing on mobile screens.
+ *
+ * @example
+ * ```tsx
+ * <EllipsisTooltip text="Very long message that will be truncated" />
+ *
+ * <EllipsisTooltip
+ *   text={<span className="dial-small-semi-text">Custom node</span>}
+ *   className="max-w-[160px]"
+ * />
+ *
+ * <EllipsisTooltip text="Tooltip suppressed even when clipped" hideTooltip />
+ * ```
+ *
+ * @param text - The text or node to display, truncated with an ellipsis when it does not fit
+ * @param [className] - Additional CSS classes for the text element, typically its width
+ * @param [contentClassName] - Additional CSS classes for the tooltip bubble
+ * @param [hideTooltip=false] - Suppress the tooltip even while the text is truncated
+ * @param [id] - `id` of the text element
+ * @param [customTooltipContent] - Shown instead of the full text while truncated
+ * @param [placement=TooltipPlacement.Bottom] - Side of the text the tooltip is placed on
+ * @param [initialOpen=false] - Whether the tooltip starts open (uncontrolled only)
+ * @param [isTriggerClickable=false] - Restrict hover handling to mouse input, ignoring touch
+ * @param [open] - Controlled open state; disables the hover and focus triggers
+ * @param [onOpenChange] - Callback fired when the open state should change
+ */
+export declare const EllipsisTooltip: FC<EllipsisTooltipProps>;

package/dist/src/components/New/EllipsisTooltip/use-truncation.d.ts

@@ -0,0 +1,21 @@
+import { ReactNode } from 'react';
+/**
+ * Reports whether an element's text is being cut off by `text-overflow`, so a
+ * tooltip can carry the full string only when there is something to reveal.
+ *
+ * Truncation is a layout fact, not a prop: it depends on the width the element
+ * ends up with. The measurement therefore re-runs on every text change, on
+ * window resize, and — since a parent can resize without the window doing so —
+ * whenever the element's own box changes size.
+ *
+ * @param text - The rendered content; a change to it re-measures
+ * @returns `ref` to attach to the truncating element, whether it `isTruncated`,
+ * its `textContent` (the full string even when `text` is a node), and
+ * `remeasure` to force a fresh read before an interaction reads the result
+ */
+export declare const useTruncation: <T extends HTMLElement>(text: ReactNode) => {
+    ref: import('react').RefObject<T | null>;
+    isTruncated: boolean;
+    textContent: string;
+    remeasure: () => void;
+};

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

@@ -1 +1 @@
-export declare const inputButtonClassName = "bg-control-neutral-active flex items-center justify-center enabled:text-secondary enabled:hover:text-control-blue-hover enabled:active:bg-control-accent-alpha-active enabled:hover:bg-control-accent-alpha-hover enabled:active:text-control-blue-active";
+export declare const inputButtonClassName = "bg-control-neutral-active flex items-center justify-center enabled:text-secondary enabled:hover:text-control-accent-hover enabled:active:bg-control-accent-alpha-active enabled:hover:bg-control-accent-alpha-hover enabled:active:text-control-accent-active";

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

@@ -50,6 +50,13 @@ export interface NotificationProps extends Omit<HTMLAttributes<HTMLDivElement>,
  *   title="Processing"
  *   message="Please wait..."
  * />
+ *
+ * <Notification
+ *   variant={NotificationVariant.General}
+ *   type={NotificationType.SectionMessage}
+ *   title="Title"
+ *   message="Description text example"
+ * />
  * ```
  *
  * @param [variant=NotificationVariant.Info] - Defines the visual style and icon of the alert

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

@@ -7,9 +7,11 @@ export declare const InfoToastNotification: FC<NotificationVariantProps>;
 export declare const SuccessToastNotification: FC<NotificationVariantProps>;
 export declare const WarningToastNotification: FC<NotificationVariantProps>;
 export declare const LoadingToastNotification: FC<NotificationVariantProps>;
+export declare const GeneralToastNotification: FC<NotificationVariantProps>;
 export declare const ErrorMessageNotification: FC<NotificationTypeProps>;
 export declare const InfoMessageNotification: FC<NotificationTypeProps>;
 export declare const SuccessMessageNotification: FC<NotificationTypeProps>;
 export declare const WarningMessageNotification: FC<NotificationTypeProps>;
 export declare const LoadingMessageNotification: FC<NotificationTypeProps>;
+export declare const GeneralMessageNotification: FC<NotificationTypeProps>;
 export {};

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

@@ -0,0 +1,48 @@
+import { FC, InputHTMLAttributes } from 'react';
+import { LabelProps } from '../Label/Label';
+type NativeInputProps = Omit<InputHTMLAttributes<HTMLInputElement>, 'type' | 'checked' | 'onChange' | 'size' | 'value'>;
+export interface RadioProps extends NativeInputProps {
+    name: string;
+    value: string;
+    labelProps?: LabelProps;
+    isSelected?: boolean;
+    disabled?: boolean;
+    onChange?: (value: string) => void;
+    caption?: string;
+}
+/**
+ * A radio button from the 2.0 design system.
+ * aliases: RadioButton|ChoiceOption|RadioInput
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <Radio
+ *   name="plan"
+ *   value="pro"
+ *   labelProps={{ label: 'Pro' }}
+ *   isSelected={plan === 'pro'}
+ *   onChange={setPlan}
+ * />
+ * ```
+ *
+ * Radios sharing a `name` form one group: the browser gives them a single tab
+ * stop and moves the selection with the arrow keys, so no `role="radiogroup"`
+ * wiring is needed here. Wrap a set in a `<fieldset>` with a `<legend>` when the
+ * group itself needs a name.
+ *
+ * The circle 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 selects the radio.
+ *
+ * @param name - The group this radio belongs to; radios sharing it are mutually exclusive
+ * @param value - The value reported to `onChange` when this radio is selected
+ * @param [labelProps] - Props of the {@link Label} rendered next to the control
+ * @param [isSelected=false] - Whether this radio is the selected one of its group
+ * @param [disabled=false] - Whether the radio is disabled
+ * @param [onChange] - Callback fired with `value` when this radio becomes selected
+ * @param [caption] - Caption text rendered below the label, and described by the radio
+ */
+export declare const Radio: FC<RadioProps>;
+export {};

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

@@ -0,0 +1,54 @@
+import { ReactNode } from 'react';
+export interface SegmentedControlItem<T extends string = string> {
+    value: T;
+    label?: ReactNode;
+    icon?: ReactNode;
+    disabled?: boolean;
+    'aria-label'?: string;
+}
+export interface SegmentedControlProps<T extends string> {
+    items: SegmentedControlItem<T>[];
+    value: T;
+    onChange: (value: T) => void;
+    disabled?: boolean;
+    className?: string;
+    segmentClassName?: string;
+    'aria-label'?: string;
+}
+/**
+ * A single-select switch between a few mutually exclusive, equally sized options.
+ * aliases: SegmentedButton|ViewSwitcher|ButtonGroup
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <SegmentedControl
+ *   aria-label="View"
+ *   value={view}
+ *   onChange={setView}
+ *   items={[
+ *     { value: 'list', icon: <IconList />, 'aria-label': 'List' },
+ *     { value: 'grid', icon: <IconGrid />, 'aria-label': 'Grid' },
+ *   ]}
+ * />
+ * ```
+ *
+ * This is a radio group, not a tab list: it selects a value rather than
+ * revealing a panel, so it takes `role="radiogroup"` with `role="radio"`
+ * segments. The group is a single tab stop — the selected segment holds it, and
+ * the arrow keys, `Home` and `End` move the selection, per the ARIA radio-group
+ * pattern. `DialSegmentedControl` (1.0) uses `tablist`/`tab` instead; that is
+ * the behaviour this replaces.
+ *
+ * An icon-only segment still needs a name: give it `aria-label`, since the icon
+ * carries no text. A segment with a string `label` is named by it.
+ *
+ * @param items - Segments to render; each needs a unique `value` and may carry a `label`, `icon` and `disabled` flag
+ * @param value - The currently selected `value`
+ * @param onChange - Callback fired with the newly selected `value`
+ * @param [disabled] - Disables every segment
+ * @param [className] - Additional classes for the track
+ * @param [segmentClassName] - Additional classes for every segment
+ * @param [aria-label] - Names the group as a whole
+ */
+export declare const SegmentedControl: <T extends string>({ items, value, onChange, disabled, className, segmentClassName: segmentClassNameProp, "aria-label": ariaLabel, }: SegmentedControlProps<T>) => import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,16 @@
+/** Keys that move the selection inside the group. */
+export declare const NAVIGATION_KEYS: string[];
+/** The sunken track the segments sit in. */
+export declare const containerClassName = "inline-flex w-fit items-center gap-1 rounded-full bg-layer-sunken p-1";
+export declare const segmentClassName = "flex h-8 min-w-8 flex-1 shrink-0 items-center justify-center gap-2 whitespace-nowrap rounded-full px-4 dial-small-text transition-colors duration-200 outline-offset-0 focus-visible:outline focus-visible:outline-focus";
+/** Selected lifts off the track on a raised surface and keeps the accent at rest. */
+export declare const segmentSelectedClassName = "bg-layer-raised text-accent shadow-xs";
+export declare const segmentUnselectedClassName = "bg-transparent text-secondary";
+export declare const segmentSelectedInteractiveClassName = "cursor-pointer hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active";
+export declare const segmentUnselectedInteractiveClassName = "cursor-pointer hover:bg-control-accent-alpha-hover hover:text-accent active:bg-control-accent-alpha-active";
+/**
+ * A disabled segment keeps its shape so the group does not reflow, but drops the
+ * accent and the shadow.
+ */
+export declare const segmentDisabledSelectedClassName = "cursor-not-allowed bg-control-disable-primary text-control-disable-primary shadow-none";
+export declare const segmentDisabledUnselectedClassName = "cursor-not-allowed bg-transparent text-control-disable-primary";

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

@@ -12,7 +12,7 @@ export declare const selectOptionSelectedClassName = "bg-control-accent-alpha-ho
  * default this component relies on).
  */
 export declare const selectListWidthClassName = "!max-w-[var(--reference-width)]";
-export declare const selectOptionDisabledClassName = "opacity-75";
+export declare const selectOptionDisabledClassName = "text-secondary";
 export declare const dropdownMenuMaxHeight = 352;
 export declare const selectSubMenuGap = 4;
 export declare const selectSubMenuClassName: string;

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

@@ -0,0 +1,47 @@
+import { FC, ReactNode } from 'react';
+import { IconButtonProps } from '../IconButton/IconButton';
+import { TooltipProps } from '../Tooltip/Tooltip';
+type ToggleTooltipProps = Omit<TooltipProps, 'children'>;
+export interface ToggleIconButtonProps extends Omit<IconButtonProps, 'variant' | 'appearance' | 'tooltipProps' | 'onToggle'> {
+    icon: ReactNode;
+    selectedIcon?: ReactNode;
+    isSelected?: boolean;
+    onToggle?: (isSelected: boolean) => void;
+    tooltipProps?: ToggleTooltipProps;
+}
+/**
+ * An icon button that stays pressed, for a setting the icon itself represents.
+ * aliases: IconToggle|ToggleButton|BookmarkButton
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <ToggleIconButton
+ *   icon={<IconBookmark />}
+ *   selectedIcon={<IconBookmarkFilled />}
+ *   isSelected={isBookmarked}
+ *   onToggle={setIsBookmarked}
+ *   tooltipProps={{ tooltip: 'Bookmark' }}
+ * />
+ * ```
+ *
+ * This is a button, not a checkbox: the state rides on `aria-pressed`, so one
+ * unchanging accessible name covers both states and screen readers announce it
+ * as "pressed". Do not switch the name between them — a control that renames
+ * itself on click reads as a different control.
+ *
+ * Built on the primary ghost {@link IconButton}, which already supplies the
+ * whole unselected column of the design: a secondary-grey icon that turns
+ * accent on hover, an accent-alpha tint on hover and active, and a grey icon
+ * when disabled. Selected keeps that accent icon at rest and swaps in
+ * `selectedIcon` — usually the filled twin of `icon`.
+ *
+ * @param icon - Icon shown while unselected; rendered at 16px
+ * @param [selectedIcon] - Icon shown while selected; falls back to `icon`
+ * @param [isSelected=false] - Whether the toggle is on
+ * @param [onToggle] - Callback fired with the next value when clicked
+ * @param [size=ElementSize.Small] - Defines the size of the button
+ * @param [tooltipProps] - Props of the 2.0 {@link Tooltip} wrapping the button
+ */
+export declare const ToggleIconButton: FC<ToggleIconButtonProps>;
+export {};

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

@@ -0,0 +1,43 @@
+import { FC, ReactNode } from 'react';
+import { TooltipContainerOptions } from './TooltipContext';
+export interface TooltipProps extends TooltipContainerOptions {
+    hideTooltip?: boolean;
+    tooltip?: ReactNode;
+    children: ReactNode;
+    asChild?: boolean;
+    triggerClassName?: string;
+    contentClassName?: string;
+}
+/**
+ * Shows a short explanation next to an element while it is hovered or focused.
+ * aliases: HoverPopover|InfoPopover
+ * Design system 2.0
+ *
+ * The tooltip is placed on one of the four sides of the trigger and follows it
+ * on scroll, flipping to the opposite side when it would not fit.
+ *
+ * Tooltip text does not reach assistive technology unless the trigger itself
+ * carries it: pass `asChild` so the `aria-describedby` lands on the control
+ * rather than on a wrapper `<span>`, and never let a tooltip be the only
+ * accessible name of a control — it renders nothing on mobile screens.
+ *
+ * @example
+ * ```tsx
+ * <Tooltip tooltip="Tooltip text" placement={TooltipPlacement.Top} asChild>
+ *   <button>Hover me</button>
+ * </Tooltip>
+ * ```
+ *
+ * @param [tooltip] - The content to display in the tooltip
+ * @param children - The element that triggers the tooltip
+ * @param [asChild=false] - Use the child as the trigger instead of wrapping it in a `<span>`
+ * @param [hideTooltip=false] - Suppress the tooltip while keeping the trigger rendered
+ * @param [triggerClassName] - Additional CSS classes for the trigger element
+ * @param [contentClassName] - Additional CSS classes for the tooltip bubble
+ * @param [initialOpen=false] - Whether the tooltip starts open (uncontrolled only)
+ * @param [placement=TooltipPlacement.Bottom] - Side of the trigger the tooltip is placed on
+ * @param [isTriggerClickable=false] - Restrict hover handling to mouse input, ignoring touch
+ * @param [open] - Controlled open state; disables the hover and focus triggers
+ * @param [onOpenChange] - Callback fired when the open state should change
+ */
+export declare const Tooltip: FC<TooltipProps>;

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

@@ -0,0 +1,32 @@
+import { FC, ReactNode } from 'react';
+import { TooltipContainerOptions } from './TooltipContext';
+interface Props {
+    children: ReactNode;
+}
+/**
+ * Provides tooltip positioning and open state to a trigger and a content pair.
+ * aliases: TooltipProvider|TooltipRoot
+ * Design system 2.0
+ *
+ * Use it directly only when the trigger and the content cannot be rendered by
+ * `Tooltip` itself — for example when the content needs custom markup.
+ *
+ * @example
+ * ```tsx
+ * <TooltipContainer placement={TooltipPlacement.Top}>
+ *   <TooltipTrigger asChild>
+ *     <button>Hover me</button>
+ *   </TooltipTrigger>
+ *   <TooltipContent>Tooltip text</TooltipContent>
+ * </TooltipContainer>
+ * ```
+ *
+ * @param children - The tooltip trigger and content components
+ * @param [initialOpen=false] - Whether the tooltip starts open (uncontrolled only)
+ * @param [placement=TooltipPlacement.Bottom] - Side of the trigger the tooltip is placed on
+ * @param [isTriggerClickable=false] - Restrict hover handling to mouse input, ignoring touch
+ * @param [open] - Controlled open state; disables the hover and focus triggers
+ * @param [onOpenChange] - Callback fired when the open state should change
+ */
+export declare const TooltipContainer: FC<Props & TooltipContainerOptions>;
+export {};

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

@@ -0,0 +1,18 @@
+import { CSSProperties, FC, HTMLProps } from 'react';
+export interface TooltipContentProps extends HTMLProps<HTMLDivElement> {
+    style?: CSSProperties;
+}
+/**
+ * The floating bubble that carries the tooltip text.
+ * Design system 2.0
+ *
+ * Rendered in a portal, above popups and dropdowns, with an arrow pointing back
+ * at the trigger. Renders nothing on a mobile screen, where there is no hover
+ * to reveal it — so a control must never depend on a tooltip alone to be
+ * understood, or to have an accessible name.
+ *
+ * @param children - The content to display inside the tooltip
+ * @param [className] - Additional CSS classes applied to the tooltip bubble
+ * @param [style] - Additional inline styles for the tooltip bubble
+ */
+export declare const TooltipContent: FC<TooltipContentProps>;

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

@@ -0,0 +1,115 @@
+import { TooltipPlacement } from '../../../types/tooltip';
+type ContextType = ReturnType<typeof useTooltip> | null;
+export declare const TooltipContext: import('react').Context<ContextType>;
+export interface TooltipContainerOptions {
+    initialOpen?: boolean;
+    placement?: TooltipPlacement;
+    isTriggerClickable?: boolean;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+}
+export declare const useTooltipContext: () => {
+    placement: import('@floating-ui/utils').Placement;
+    strategy: import('@floating-ui/utils').Strategy;
+    middlewareData: import('@floating-ui/core').MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+    elements: {
+        reference: import('@floating-ui/react-dom').ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    context: {
+        placement: import('@floating-ui/utils').Placement;
+        strategy: import('@floating-ui/utils').Strategy;
+        x: number;
+        y: number;
+        middlewareData: import('@floating-ui/core').MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+        events: import('@floating-ui/react').FloatingEvents;
+        dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+        elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean;
+        selected?: boolean;
+    }) => Record<string, unknown>;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    arrowRef: import('react').RefObject<SVGSVGElement | null>;
+};
+/**
+ * Positioning and interaction state shared by the tooltip trigger and content.
+ * Design system 2.0
+ *
+ * @param [initialOpen=false] - Whether the tooltip starts open (uncontrolled only)
+ * @param [placement=TooltipPlacement.Bottom] - Side of the trigger the tooltip is placed on
+ * @param [isTriggerClickable=false] - Restrict hover handling to mouse input, ignoring touch
+ * @param [open] - Controlled open state; disables the hover and focus triggers
+ * @param [onOpenChange] - Callback fired when the open state should change
+ */
+export declare const useTooltip: ({ initialOpen, placement, isTriggerClickable, open: controlledOpen, onOpenChange: setControlledOpen, }?: TooltipContainerOptions) => {
+    placement: import('@floating-ui/utils').Placement;
+    strategy: import('@floating-ui/utils').Strategy;
+    middlewareData: import('@floating-ui/core').MiddlewareData;
+    x: number;
+    y: number;
+    isPositioned: boolean;
+    update: () => void;
+    floatingStyles: React.CSSProperties;
+    refs: {
+        reference: import('react').MutableRefObject<import('@floating-ui/react-dom').ReferenceType | null>;
+        floating: React.MutableRefObject<HTMLElement | null>;
+        setReference: (node: import('@floating-ui/react-dom').ReferenceType | null) => void;
+        setFloating: (node: HTMLElement | null) => void;
+    } & import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+    elements: {
+        reference: import('@floating-ui/react-dom').ReferenceType | null;
+        floating: HTMLElement | null;
+    } & import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    context: {
+        placement: import('@floating-ui/utils').Placement;
+        strategy: import('@floating-ui/utils').Strategy;
+        x: number;
+        y: number;
+        middlewareData: import('@floating-ui/core').MiddlewareData;
+        isPositioned: boolean;
+        update: () => void;
+        floatingStyles: React.CSSProperties;
+        open: boolean;
+        onOpenChange: (open: boolean, event?: Event, reason?: import('@floating-ui/react').OpenChangeReason) => void;
+        events: import('@floating-ui/react').FloatingEvents;
+        dataRef: React.MutableRefObject<import('@floating-ui/react').ContextData>;
+        nodeId: string | undefined;
+        floatingId: string | undefined;
+        refs: import('@floating-ui/react').ExtendedRefs<import('@floating-ui/react').ReferenceType>;
+        elements: import('@floating-ui/react').ExtendedElements<import('@floating-ui/react').ReferenceType>;
+    };
+    getReferenceProps: (userProps?: React.HTMLProps<Element>) => Record<string, unknown>;
+    getFloatingProps: (userProps?: React.HTMLProps<HTMLElement>) => Record<string, unknown>;
+    getItemProps: (userProps?: Omit<React.HTMLProps<HTMLElement>, "selected" | "active"> & {
+        active?: boolean;
+        selected?: boolean;
+    }) => Record<string, unknown>;
+    open: boolean;
+    setOpen: (open: boolean) => void;
+    arrowRef: import('react').RefObject<SVGSVGElement | null>;
+};
+export {};

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

@@ -0,0 +1,18 @@
+import { FC, HTMLProps } from 'react';
+interface TooltipTriggerProps extends HTMLProps<HTMLElement> {
+    asChild?: boolean;
+}
+/**
+ * The element a tooltip is anchored to and opened from.
+ * Design system 2.0
+ *
+ * Prefer `asChild` whenever the trigger is a single element: it puts the
+ * `aria-describedby` that names the tooltip on the control itself instead of on
+ * a wrapper `<span>`, which is the only way the tooltip text reaches assistive
+ * technology.
+ *
+ * @param children - The element that opens the tooltip
+ * @param [asChild=false] - Render the child as the trigger instead of wrapping it in a `<span>`
+ */
+export declare const TooltipTrigger: FC<TooltipTriggerProps>;
+export {};

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

@@ -0,0 +1,25 @@
+/**
+ * Tooltip layout and styling constants.
+ * Design system 2.0
+ */
+/** Height of the `FloatingArrow` triangle, in px — its default `height`. */
+export declare const ARROW_HEIGHT = 7;
+/** Space left between the arrow tip and the trigger, in px. */
+export declare const ARROW_GAP = 2;
+/**
+ * Delay before an on-hover tooltip opens, in ms. Long enough that a pointer
+ * crossing the trigger on its way somewhere else does not flash a tooltip.
+ */
+export declare const HOVER_OPEN_DELAY = 500;
+/**
+ * The arrow is an SVG outside the tooltip box, so it cannot inherit the box's
+ * background — keep this in sync with `bg-control-inverted` in
+ * `tooltipClassName`. A CSS fill beats the `fill` presentation attribute
+ * `FloatingArrow` puts on the `<svg>`, and the filled `<path>` inherits it.
+ */
+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.
+ */
+export declare const tooltipClassName = "z-[55] max-w-[300px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted";

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

@@ -19,6 +19,6 @@ export declare const overlaySubMenuClassName: string;
 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";
+export declare const overlayItemDisabledClassName = "text-secondary";
 /** Distance between the trigger and its panel, and between nested panels. */
 export declare const overlayGap = 4;