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

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

@@ -1,10 +1,10 @@
 import { FC, HTMLAttributes, MouseEvent, ReactNode } from 'react';
-import { ElementSize } from '../../../types/size';
+import { TagAppearance } from '../../../types/tag';
 type NativeTagProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
 export interface TagProps extends NativeTagProps {
     label: string;
     icon?: ReactNode;
-    size?: ElementSize;
+    appearance?: TagAppearance;
     selected?: boolean;
     disabled?: boolean;
     closable?: boolean;
@@ -16,6 +16,10 @@ export interface TagProps extends NativeTagProps {
  * aliases: Chip|Pill
  * Design system 2.0
  *
+ * The tag has one height — the 32px pill of the 2.0 design. There is no `size`
+ * prop: a tag sizes itself, and a caller that needs a different height is
+ * usually reaching for a button.
+ *
  * The label truncates rather than wrapping, and carries a native `title` so the
  * full text stays reachable when it does.
  *
@@ -24,18 +28,36 @@ export interface TagProps extends NativeTagProps {
  * 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.
  *
+ * No tag draws a rim; the two appearances are told apart by their fill.
+ * `TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill
+ * at all until it is selected, one hover tint shared by both states, a semibold
+ * label once selected, and the state carried on `aria-pressed` rather than by
+ * the tint alone. Give it an `onClick` — a selectable tag that cannot be
+ * activated is a colour and nothing else.
+ *
+ * Selecting one therefore changes its width by the difference between the
+ * regular and semibold label. In a wrapping filter row that is what the design
+ * asks for; if a fixed width matters, give the chip one.
+ *
  * @example
  * ```tsx
  * <Tag label="TypeScript" />
  * <Tag label="TypeScript" closable onRemove={() => remove('TypeScript')} />
  * <Tag label="Drafts" selected onClick={() => toggle('Drafts')} />
+ * <Tag
+ *   label="Drafts"
+ *   appearance={TagAppearance.Selectable}
+ *   selected={isSelected}
+ *   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 [appearance=TagAppearance.Outlined] - `outlined` is the filled chip on the raised
+ * layer; `selectable` is the unfilled filter chip that tints and turns semibold when selected.
  * @param [selected=false] - Applies the accent-tinted selected styling.
- * @param [disabled=false] - Dims the tag and suppresses the remove control and click handling.
+ * @param [disabled=false] - Stops the tag responding: no click handling, no remove control. The design defines no disabled tag, so the colours stay put.
  * @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`.

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

@@ -0,0 +1,23 @@
+import { TagAppearance } from '../../../types/tag';
+/**
+ * Geometry and layout shared by every tag. No transition: the design animates
+ * the hover and selected steps instantly (0ms), so the fill switches on the
+ * same frame as the pointer.
+ */
+export declare const tagBaseClassName = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3";
+/**
+ * Fill and text colour per appearance and selection. No tag draws a rim: the
+ * two appearances are told apart by their fill — `outlined` sits on the raised
+ * layer, `selectable` on nothing until it is selected, where it also steps its
+ * label up from secondary to primary.
+ */
+export declare const tagStateClassNames: Record<TagAppearance, Record<'default' | 'selected', string>>;
+/** Cursor and focus ring of a tag that can be activated. */
+export declare const tagInteractiveClassName = "cursor-pointer outline-offset-0 focus-visible:outline focus-visible:outline-focus";
+/**
+ * Hover and active step of a clickable tag — one accent tint for every
+ * appearance and both selections, as the 2.0 overlay rows do. A selected tag
+ * must not read as hovered at rest, and the label is left alone, so an
+ * unselected one never darkens into looking selected.
+ */
+export declare const tagHoverClassName = "hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active";

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

@@ -0,0 +1,46 @@
+import { FC, ReactNode } from 'react';
+export interface ThemeScopeProps {
+    /**
+     * Class name that redefines the design tokens for this subtree — typically a
+     * host-owned rule setting `--bg-*` / `--text-*` / `--stroke-*` custom
+     * properties. Multiple space-separated classes are allowed.
+     */
+    className: string;
+    children: ReactNode;
+}
+/**
+ * Marks a subtree as living under a host-defined token scope, so overlays this
+ * subtree opens in a portal are painted with the same tokens.
+ * Design system 2.0
+ *
+ * Redefining design tokens on a panel root re-themes everything the panel
+ * renders — until a `Dropdown`, `Popup`, `Tooltip` or `Calendar` escapes into a
+ * `FloatingPortal` at the end of `<body>`, where the scope's custom properties
+ * no longer reach it. Wrapping the panel in a `ThemeScope` re-applies the same
+ * class to those portalled overlays, so an overlay opened from a dark panel
+ * stays dark while the rest of the app keeps its own palette.
+ *
+ * The wrapper itself is `display: contents`, so it generates no box and leaves
+ * the surrounding flex or grid layout untouched — custom properties inherit
+ * through it all the same. Scopes nest: an inner scope's overlays carry the
+ * outer classes first, matching the cascade they would see in place.
+ *
+ * @example
+ * ```tsx
+ * // .side-panel-theme redefines --bg-*, --text-* and --stroke-* tokens.
+ * <ThemeScope className="side-panel-theme">
+ *   <ConversationPanel {...props} />
+ * </ThemeScope>
+ * ```
+ *
+ * @param className - Class name redefining the design tokens for this subtree
+ * @param children - The subtree painted with those tokens
+ */
+export declare const ThemeScope: FC<ThemeScopeProps>;
+/**
+ * Class names of the enclosing `ThemeScope`s, outermost first, or `''` when the
+ * caller sits outside any scope. Components rendering into a `FloatingPortal`
+ * merge this onto their floating root so the tokens follow them out of the
+ * subtree.
+ */
+export declare const useThemeScope: () => 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,30 @@
+/**
+ * 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.
+ *
+ * `max-w-[376px]` is the cap the design puts on a tooltip: at `dial-small-text`
+ * that is around 60 characters a line, past which a line stops being
+ * comfortable to read. Longer text wraps instead of widening the bubble. The
+ * width stays a literal because Tailwind only sees static class strings.
+ */
+export declare const tooltipClassName = "z-[55] max-w-[376px] whitespace-pre-wrap break-words rounded-lg bg-control-inverted px-3 py-2 dial-small-text text-control-inverted";

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

@@ -0,0 +1,22 @@
+/**
+ * Icon stroke (1.5px) from the 2.0 stroke scale. Tabler renders every outline
+ * icon at `stroke={2}` unless told otherwise, so the token has to be passed
+ * explicitly — a 2.0 component that omits it draws a heavier icon than the
+ * design system asks for.
+ *
+ * It is a number rather than a Tailwind utility because an icon's weight is an
+ * SVG `stroke-width` attribute on the glyph, not a border on its box. The
+ * border half of the same scale stays on plain Tailwind widths — `border`,
+ * `border-2`, `border-4`, and `border-[0.5px]` for a table divider.
+ *
+ * Exported publicly so icons a consumer passes into a 2.0 component — a button
+ * icon, a menu item, a segmented-control segment — can match the ones the
+ * components draw themselves.
+ *
+ * Two deliberate departures inside the library: the empty-state illustrations
+ * (`NoDataContent`, the grid's no-rows overlay) use a much lighter stroke,
+ * since a 1.5px line reads as a drawing at 16px and as a fence at 100px; and
+ * the checkbox glyph uses a heavier one, because it is a control mark sized to
+ * a 14px box rather than an icon from the set.
+ */
+export declare const DIAL_KIT_ICON_STROKE = 1.5;

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

@@ -17,8 +17,17 @@ export declare const overlaySubMenuClassName: string;
  * 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";
+/**
+ * Tint marking the row that is currently selected, at rest: the faint step of
+ * the accent-alpha ramp, so hovering a selected row still has somewhere to go.
+ */
+export declare const overlayItemSelectedClassName = "bg-control-accent-alpha";
+/**
+ * A row that cannot be chosen. `overlayItemClassName` tints every row on hover
+ * and a selected row carries a tint at rest, so both have to be turned off
+ * again here — `mergeClasses` is tailwind-merge, so these later declarations
+ * win as long as the disabled classes are merged after the selected ones.
+ */
+export declare const overlayItemDisabledClassName: string;
 /** Distance between the trigger and its panel, and between nested panels. */
 export declare const overlayGap = 4;

package/dist/src/index.d.ts

@@ -150,7 +150,7 @@ export { Notification } from './components/New/Notification/Notification';
 export { Highlight } from './components/New/Highlight/Highlight';
 export { CardShell } from './components/New/CardShell/CardShell';
 export type { CardShellProps } from './components/New/CardShell/CardShell';
-export { ErrorMessageNotification, ErrorToastNotification, InfoMessageNotification, InfoToastNotification, LoadingMessageNotification, LoadingToastNotification, SuccessMessageNotification, SuccessToastNotification, WarningMessageNotification, WarningToastNotification, } from './components/New/Notification/NotificationWrapper';
+export { ErrorMessageNotification, ErrorToastNotification, GeneralMessageNotification, GeneralToastNotification, InfoMessageNotification, InfoToastNotification, LoadingMessageNotification, LoadingToastNotification, SuccessMessageNotification, SuccessToastNotification, WarningMessageNotification, WarningToastNotification, } from './components/New/Notification/NotificationWrapper';
 export { CalendarMode } from './types/calendar.ts';
 export { Calendar } from './components/New/Calendar/Calendar';
 export type { CalendarProps, CalendarValue, } from './components/New/Calendar/Calendar';
@@ -193,6 +193,8 @@ export { ConfirmationPopup } from './components/New/ConfirmationPopup/Confirmati
 export type { ConfirmationPopupProps } from './components/New/ConfirmationPopup/ConfirmationPopup';
 export { Dropdown } from './components/New/Dropdown/Dropdown';
 export type { DropdownProps } from './components/New/Dropdown/Dropdown';
+export { ThemeScope, useThemeScope, } from './components/New/ThemeScope/ThemeScope';
+export type { ThemeScopeProps } from './components/New/ThemeScope/ThemeScope';
 export type { TextareaProps } from './components/New/Textarea/Textarea';
 export type { CaptionTextProps } from './components/New/CaptionText/CaptionText';
 export { CaptionText, ErrorText, } from './components/New/CaptionText/CaptionText';
@@ -200,14 +202,58 @@ export { Accordion } from './components/New/Accordion/Accordion';
 export type { AccordionProps } from './components/New/Accordion/Accordion';
 export { Switch } from './components/New/Switch/Switch';
 export type { SwitchProps } from './components/New/Switch/Switch';
+export { Radio } from './components/New/Radio/Radio';
+export type { RadioProps } from './components/New/Radio/Radio';
+export { RadioGroup } from './components/New/RadioGroup/RadioGroup';
+export type { RadioGroupProps, RadioGroupItem, } from './components/New/RadioGroup/RadioGroup';
+export { RadioGroupPopupField } from './components/New/RadioGroupPopupField/RadioGroupPopupField';
+export type { RadioGroupPopupFieldProps } from './components/New/RadioGroupPopupField/RadioGroupPopupField';
+export { Checkbox } from './components/New/Checkbox/Checkbox';
+export type { CheckboxProps } from './components/New/Checkbox/Checkbox';
+export { CheckboxBox } from './components/New/Checkbox/CheckboxBox';
+export type { CheckboxBoxProps } from './components/New/Checkbox/CheckboxBox';
+export { ToggleIconButton } from './components/New/ToggleIconButton/ToggleIconButton';
+export type { ToggleIconButtonProps } from './components/New/ToggleIconButton/ToggleIconButton';
+export { SegmentedControl } from './components/New/SegmentedControl/SegmentedControl';
+export type { SegmentedControlProps, SegmentedControlItem, } from './components/New/SegmentedControl/SegmentedControl';
 export { Tabs } from './components/New/Tabs/Tabs';
 export type { TabsProps, TabItem } from './components/New/Tabs/Tabs';
 export { FileDropzone } from './components/New/FileDropzone/FileDropzone';
 export type { FileDropzoneProps } from './components/New/FileDropzone/FileDropzone';
 export { Tag } from './components/New/Tag/Tag';
 export type { TagProps } from './components/New/Tag/Tag';
+export { TagAppearance } from './types/tag';
 export { TagInput } from './components/New/TagInput/TagInput';
 export type { TagInputProps } from './components/New/TagInput/TagInput';
 export { Search } from './components/New/Search/Search';
 export type { SearchProps } from './components/New/Search/Search';
 export { matchesAccept } from './utils/file-accept';
+export { Slider } from './components/New/Slider/Slider';
+export type { SliderProps } from './components/New/Slider/Slider';
+export { Tooltip } from './components/New/Tooltip/Tooltip';
+export type { TooltipProps } from './components/New/Tooltip/Tooltip';
+export { TooltipContainer } from './components/New/Tooltip/TooltipContainer';
+export { TooltipContent } from './components/New/Tooltip/TooltipContent';
+export type { TooltipContentProps } from './components/New/Tooltip/TooltipContent';
+export { TooltipTrigger } from './components/New/Tooltip/TooltipTrigger';
+export type { TooltipContainerOptions } from './components/New/Tooltip/TooltipContext';
+export { TooltipPlacement } from './types/tooltip.ts';
+export { EllipsisTooltip } from './components/New/EllipsisTooltip/EllipsisTooltip';
+export type { EllipsisTooltipProps } from './components/New/EllipsisTooltip/EllipsisTooltip';
+export { CollapsibleSidebar } from './components/New/CollapsibleSidebar/CollapsibleSidebar';
+export type { CollapsibleSidebarProps } from './components/New/CollapsibleSidebar/CollapsibleSidebar';
+export { ResizableContainer } from './components/New/ResizableContainer/ResizableContainer';
+export type { ResizableContainerProps } from './components/New/ResizableContainer/ResizableContainer';
+export { ConditionalResizableContainer } from './components/New/ResizableContainer/ConditionalResizableContainer';
+export type { ConditionalResizableContainerProps } from './components/New/ResizableContainer/ConditionalResizableContainer';
+export { NoDataContent } from './components/New/NoDataContent/NoDataContent';
+export type { NoDataContentProps } from './components/New/NoDataContent/NoDataContent';
+export { Grid, GRID_SELECTION_COLUMN_ID } from './components/New/Grid/Grid';
+export type { GridProps } from './components/New/Grid/Grid';
+export { DateCellRenderer } from './components/New/Grid/renderers/DateCellRenderer';
+export type { DateCellRendererProps, DateValue, } from './components/New/Grid/renderers/DateCellRenderer';
+export { DEFAULT_DATE_FORMAT_OPTIONS, DEFAULT_LOCALE as DEFAULT_DATE_LOCALE, } from './components/New/Grid/renderers/constants';
+export { GRID_ALIGN_RIGHT_CLASS, GRID_ROOT_CLASS, GRID_THEME_PARAMS, ROW_HEIGHT as GRID_ROW_HEIGHT, } from './components/New/Grid/constants';
+export { DIAL_KIT_ICON_STROKE } from './components/New/constants/icon';
+export { convertToDate } from './utils/grid-date';
+export { baseColumnComparator, checkColDefsChanges, } from './utils/grid-comparators';

package/dist/src/models/dropdown.d.ts

@@ -15,6 +15,16 @@ export interface DropdownItem {
     icon?: ReactNode;
     disabled?: boolean;
     danger?: boolean;
+    /**
+     * Renders the item as a multiselect row: a checkbox box before the label, the
+     * accent tint while checked, and a click that leaves the menu open. The row is
+     * a `menuitemcheckbox` whose state lives on `aria-checked`; the box itself is
+     * decorative. Keep `checked` in your own state and update it from the item's
+     * `onClick` (or the dropdown's `onItemClick`).
+     */
+    selectable?: boolean;
+    /** Whether a `selectable` item is currently checked. */
+    checked?: boolean;
     type?: DropdownItemType;
     className?: string;
     onClick?: (info: {

package/dist/src/types/notification.d.ts

@@ -3,7 +3,8 @@ export declare enum NotificationVariant {
     Success = "success",
     Warning = "warning",
     Error = "error",
-    Loading = "loading"
+    Loading = "loading",
+    General = "general"
 }
 export declare enum NotificationType {
     Toast = "toast",

package/dist/src/types/tag.d.ts

@@ -0,0 +1,4 @@
+export declare enum TagAppearance {
+    Outlined = "outlined",
+    Selectable = "selectable"
+}

package/dist/src/types/tooltip.d.ts

@@ -0,0 +1,6 @@
+export declare enum TooltipPlacement {
+    Top = "top",
+    Right = "right",
+    Bottom = "bottom",
+    Left = "left"
+}

package/dist/src/utils/__tests__/element-size-observer.spec.d.ts

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

package/dist/src/utils/element-size-observer.d.ts

@@ -0,0 +1,26 @@
+type SizeCallback = () => void;
+/**
+ * Queues a measurement for the next animation frame, coalescing it with every
+ * other measurement queued for that frame.
+ *
+ * Passing the same callback twice before the frame runs schedules it once.
+ *
+ * @param callback - Reads layout and stores the result; must be referentially stable
+ */
+export declare const scheduleMeasure: (callback: SizeCallback) => void;
+/**
+ * Watches an element's box for size changes and calls back — batched through
+ * {@link scheduleMeasure} — whenever it may need re-measuring.
+ *
+ * A parent can resize without the window doing so, which is what the
+ * `ResizeObserver` covers; the `window.resize` listener stays for environments
+ * that have no `ResizeObserver`.
+ *
+ * One callback per element: observing the same element again replaces it.
+ *
+ * @param element - The element to watch
+ * @param callback - Runs when the element may have changed size; must be referentially stable
+ * @returns Unsubscribes the element, tearing the shared observer down once nothing is left to watch
+ */
+export declare const observeElementSize: (element: Element, callback: SizeCallback) => () => void;
+export {};