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

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;

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,6 +200,18 @@ 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 { 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';
@@ -211,3 +223,13 @@ 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 { 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';

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/tooltip.d.ts

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

package/package.json

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