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

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/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/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';
@@ -200,14 +200,57 @@ 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 { 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/grid-comparators.d.ts

@@ -0,0 +1,4 @@
+import { ColDef, IRowNode } from 'ag-grid-community';
+export declare const baseColumnComparator: (a: string | number | undefined, b: string | number | undefined, _nodeA?: IRowNode, _nodeB?: IRowNode, isInverted?: boolean) => number;
+export declare const omitUndefined: <T extends object>(value: T | undefined) => T;
+export declare const checkColDefsChanges: (cols: ColDef[], initialCols: ColDef[]) => boolean;

package/dist/src/utils/grid-date.d.ts

@@ -0,0 +1,7 @@
+export type DateValue = string | number | Date;
+/**
+ * Normalises the value a date cell can receive into a `Date`, or `null` when it
+ * carries no usable date. A pure integer string is read as epoch milliseconds,
+ * so a serialised timestamp behaves like the number it came from.
+ */
+export declare const convertToDate: (input?: DateValue | null) => Date | null;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@epam/ai-dial-ui-kit",
-  "version": "0.14.0-dev.1",
+  "version": "0.14.0-dev.12",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",