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

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

@@ -0,0 +1,74 @@
+import { FC, ReactNode } from 'react';
+import { TooltipPlacement } from '../../../types/tooltip';
+export interface InteractiveTooltipProps {
+    /**
+     * The panel's content. Left fully open-ended — unlike a plain tooltip's
+     * text, this can be any markup, including its own buttons and links.
+     */
+    content: ReactNode;
+    /** Side of the trigger the panel is placed on. */
+    placement?: TooltipPlacement;
+    /** The element the panel is anchored to and opened from. */
+    children: ReactNode;
+    /** Render `children` as the trigger instead of wrapping it in a `<span>`. */
+    asChild?: boolean;
+    /** Suppress the panel while keeping the trigger rendered. */
+    hideTooltip?: boolean;
+    /** Whether the panel starts open (uncontrolled only). */
+    initialOpen?: boolean;
+    /** Controlled open state; disables the hover and focus triggers. */
+    open?: boolean;
+    /** Callback fired when the open state should change. */
+    onOpenChange?: (open: boolean) => void;
+    /** Additional CSS classes for the trigger element. */
+    triggerClassName?: string;
+    /** Additional CSS classes for the panel. */
+    contentClassName?: string;
+}
+/**
+ * A hover panel that, unlike {@link Tooltip}, can hold its own interactive
+ * content.
+ * aliases: HoverCard|InfoPopover
+ * Design system 2.0
+ *
+ * Opens next to the trigger on hover or focus, the way a tooltip does, but
+ * stays open while the pointer moves into the panel so its content — links,
+ * buttons, anything — can be hovered and clicked. It carries no `role`, since
+ * ARIA's `tooltip` role forbids focusable content and this is meant to hold
+ * some; a panel with meaningfully interactive content should still be
+ * reachable without a mouse (Tab from the trigger reaches it), but a purely
+ * decorative one is fine to leave out of the tab order entirely.
+ *
+ * Renders nothing on a mobile screen, where there is no hover to reveal it —
+ * so, as with {@link Tooltip}, a control must never depend on this panel alone
+ * to be understood or operated.
+ *
+ * @example
+ * ```tsx
+ * <InteractiveTooltip
+ *   placement={TooltipPlacement.Right}
+ *   content={
+ *     <>
+ *       <p>Lets the model write and execute Python in an isolated sandbox.</p>
+ *       <Button variant={ButtonVariant.Primary} appearance={ButtonAppearance.Link}>
+ *         View details
+ *       </Button>
+ *     </>
+ *   }
+ * >
+ *   <MenuItem label="code-interpreter" />
+ * </InteractiveTooltip>
+ * ```
+ *
+ * @param content - The panel's content
+ * @param children - The element that triggers the panel
+ * @param [asChild=false] - Use the child as the trigger instead of wrapping it in a `<span>`
+ * @param [hideTooltip=false] - Suppress the panel while keeping the trigger rendered
+ * @param [triggerClassName] - Additional CSS classes for the trigger element
+ * @param [contentClassName] - Additional CSS classes for the panel
+ * @param [placement=TooltipPlacement.Right] - Side of the trigger the panel is placed on
+ * @param [initialOpen=false] - Whether the panel starts open (uncontrolled only)
+ * @param [open] - Controlled open state; disables the hover and focus triggers
+ * @param [onOpenChange] - Callback fired when the open state should change
+ */
+export declare const InteractiveTooltip: FC<InteractiveTooltipProps>;

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

@@ -0,0 +1,26 @@
+/**
+ * Interactive tooltip layout and styling constants.
+ * Design system 2.0
+ */
+/** Space left between the panel and the trigger, in px. */
+export declare const INTERACTIVE_TOOLTIP_GAP = 8;
+/**
+ * Delay before an on-hover interactive tooltip opens, in ms. Long enough that
+ * a pointer crossing the trigger on its way somewhere else does not flash it.
+ */
+export declare const INTERACTIVE_TOOLTIP_HOVER_OPEN_DELAY = 400;
+/**
+ * The panel sits above the surface it is anchored to — a dropdown or select
+ * overlay, both `z-[53]` — since it can be opened from a row inside one of
+ * them.
+ *
+ * By style this is a neutral floating panel rather than the coloured
+ * `Notification` banner: it shares the raised-card shape a dropdown or the
+ * calendar use (`shadow-md`, `rounded-xl`), on the base `bg-layer-0` surface
+ * rather than their raised one — the panel is opened over content, not
+ * stacked inside another panel. `contentClassName` can still replace it with
+ * any other background: `twMerge` resolves the conflicting `bg-*` utility.
+ * Padding and width are the panel's own, sized for a block of copy and
+ * controls rather than a menu row.
+ */
+export declare const interactiveTooltipClassName = "z-[54] max-w-[320px] rounded-xl bg-layer-0 p-4 dial-small-text text-primary shadow-md";

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

@@ -10,6 +10,10 @@ export interface MarkdownEditorProps {
     placeholder?: string;
     /** Initial edit/live/preview mode; the toolbar lets the user switch it afterwards. */
     defaultPreview?: PreviewType;
+    /** `id` of the underlying textarea, so a visible `<label htmlFor>` can name it. */
+    id?: string;
+    /** Accessible name for the underlying textarea. Use it only where no visible label exists to pair with `id`. */
+    ariaLabel?: string;
 }
 /**
  * The 2.0 Markdown editor: a formatting toolbar (bold/italic/strikethrough,
@@ -29,5 +33,7 @@ export interface MarkdownEditorProps {
  * @param [className] - Additional CSS classes for the container
  * @param [placeholder] - Placeholder text shown when the editor is empty
  * @param [defaultPreview='edit'] - Initial edit/live/preview mode
+ * @param [id] - `id` of the underlying textarea, for a visible `<label htmlFor>`
+ * @param [ariaLabel] - Accessible name for the underlying textarea
  */
 export declare const MarkdownEditor: FC<MarkdownEditorProps>;

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

@@ -0,0 +1,7 @@
+/**
+ * Shared leaf module for the 2.0 Markdown editor's lazy loader. Both
+ * `src/index.ts` (root) and `src/subpaths/editors.ts` (`./editors`)
+ * re-export this same binding instead of each declaring their own copy -
+ * see `src/components/JsonEditor/lazy.ts`'s comment for why.
+ */
+export declare const LazyMarkdownEditor: () => Promise<typeof import("./MarkdownEditor")>;

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

@@ -0,0 +1,68 @@
+import { ButtonHTMLAttributes, FC, ReactNode, Ref } from 'react';
+import { MenuItemMark } from '../../../types/menu-item';
+export interface MenuItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+    /** Ref to the row button — a submenu trigger anchors its panel to it. */
+    ref?: Ref<HTMLButtonElement>;
+    /** The row's text. */
+    label?: ReactNode;
+    /** Icon rendered before the label. */
+    icon?: ReactNode;
+    /** Secondary text rendered after the label, at the row's trailing edge. */
+    description?: ReactNode;
+    /** How a chosen row is marked. */
+    mark?: MenuItemMark;
+    /** Whether this row is the chosen one; drives whatever `mark` selects. */
+    selected?: boolean;
+    /** Paints the row in the error colour — a destructive action. */
+    danger?: boolean;
+    /** Node pinned to the row's trailing edge, e.g. a submenu caret. */
+    trailing?: ReactNode;
+    /**
+     * A control of its own at the trailing edge — a favourite toggle, a delete
+     * button. It is rendered as a **sibling** of the row, not inside it: a
+     * button nested in a button is invalid, and it would swallow the row's
+     * click and land inside its accessible name.
+     */
+    rightControl?: ReactNode;
+    /** Truncates the label with a tooltip that only appears once it is clipped. */
+    ellipsisLabel?: boolean;
+    /** Additional classes for the label element. */
+    labelClassName?: string;
+    /** Replaces the icon + label content while keeping the row and `trailing`. */
+    children?: ReactNode;
+}
+/**
+ * One row of a floating overlay — a dropdown menu item or a select option.
+ * Design system 2.0
+ *
+ * Owns the Menu-item states the design defines, so the dropdown and the select
+ * cannot drift apart: rest, hover, focus and disable, plus the three ways a
+ * chosen row is marked (`MenuItemMark`). The row itself is the control — the
+ * checkbox box and the check icon are decorative, since the state already rides
+ * on the `aria-checked`/`aria-selected` the caller sets alongside `role`.
+ *
+ * @example
+ * ```tsx
+ * <MenuItem role="menuitem" label="Rename" icon={<IconPencil />} />
+ *
+ * // Single choice, marked with a trailing check
+ * <MenuItem role="option" aria-selected label="English" mark={MenuItemMark.Check} selected />
+ *
+ * // Current item of a navigation menu
+ * <MenuItem role="menuitem" aria-current label="Settings" mark={MenuItemMark.Highlight} selected />
+ * ```
+ *
+ * @param [label] - The row's text
+ * @param [icon] - Icon rendered before the label
+ * @param [description] - Secondary text at the row's trailing edge
+ * @param [mark=MenuItemMark.None] - How a chosen row is marked
+ * @param [selected=false] - Whether this row is the chosen one
+ * @param [danger=false] - Paints the row in the error colour
+ * @param [trailing] - Node pinned to the trailing edge, e.g. a submenu caret
+ * @param [rightControl] - A control of its own at the trailing edge, rendered beside the row
+ * @param [ellipsisLabel=false] - Truncate the label with a tooltip once clipped
+ * @param [labelClassName] - Additional classes for the label element
+ * @param [children] - Replaces the icon + label content
+ * @param [className] - Additional classes for the row
+ */
+export declare const MenuItem: FC<MenuItemProps>;

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

@@ -0,0 +1,5 @@
+/**
+ * Marks the chosen row in a `MenuItemMark.Check` list. Decorative: the row's
+ * `aria-checked`/`aria-selected` already carries the state.
+ */
+export declare const menuItemCheckIcon: import("react/jsx-runtime").JSX.Element;

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

@@ -0,0 +1,48 @@
+import { FC, ReactNode } from 'react';
+export interface NoDataContentProps {
+    /** Headline of the empty state. */
+    title: ReactNode;
+    /** Optional secondary line under the title. */
+    description?: ReactNode;
+    /** Illustration above the title. Defaults to the empty-state document mark. */
+    icon?: ReactNode;
+    /**
+     * Announces the empty state to assistive tech as it appears. Turn it on where
+     * the content replaces a list the user has just filtered or searched.
+     */
+    live?: boolean;
+    /** Additional CSS classes for the container. */
+    className?: string;
+    /** Additional CSS classes for the title. */
+    titleClassName?: string;
+    /** Additional CSS classes for the description. */
+    descriptionClassName?: string;
+}
+/**
+ * Message shown in place of a list, table or grid that has nothing to show.
+ * aliases: EmptyState|NoResults|ZeroState
+ * Design system 2.0
+ *
+ * Fills its container and centres an illustration, a headline and an optional
+ * secondary line. The icon is decorative, so it is hidden from assistive tech
+ * and the text carries the message on its own.
+ *
+ * @example
+ * ```tsx
+ * <NoDataContent
+ *   title="No results found"
+ *   description="Try a different search term."
+ * />
+ *
+ * <NoDataContent title="Nothing here yet" icon={<IconInbox size={60} />} live />
+ * ```
+ *
+ * @param title - Headline of the empty state.
+ * @param [description] - Optional secondary line under the title.
+ * @param [icon] - Illustration above the title. Defaults to the empty-state document mark.
+ * @param [live=false] - Announce the empty state to assistive tech as it appears.
+ * @param [className] - Additional CSS classes for the container.
+ * @param [titleClassName] - Additional CSS classes for the title.
+ * @param [descriptionClassName] - Additional CSS classes for the description.
+ */
+export declare const NoDataContent: FC<NoDataContentProps>;

package/dist/src/components/New/ResizableContainer/ConditionalResizableContainer.d.ts

@@ -0,0 +1,34 @@
+import { FC } from 'react';
+import { ResizableContainerProps } from './ResizableContainer';
+export interface ConditionalResizableContainerProps extends ResizableContainerProps {
+    /** Whether resizing is enabled. Defaults to `true`. */
+    enabled?: boolean;
+}
+/**
+ * Renders its children inside a {@link ResizableContainer} only while `enabled`.
+ * aliases: OptionalResize|ConditionalPanel
+ * Design system 2.0
+ *
+ * When `enabled` is false the children are rendered on their own, with no
+ * wrapper element and no resize behaviour — useful for a panel that is only
+ * resizable while it is expanded. Every other prop is passed straight through;
+ * see {@link ResizableContainer} for controlled and uncontrolled sizing, sides
+ * and callbacks.
+ *
+ * @example
+ * ```tsx
+ * <ConditionalResizableContainer
+ *   enabled={isExpanded}
+ *   minWidth={180}
+ *   maxWidth={520}
+ *   defaultWidth={260}
+ * >
+ *   <Sidebar />
+ * </ConditionalResizableContainer>
+ * ```
+ *
+ * @param [enabled=true] - Whether resizing is enabled.
+ * @param children - Content to render inside the container.
+ * @see ResizableContainer
+ */
+export declare const ConditionalResizableContainer: FC<ConditionalResizableContainerProps>;

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

@@ -0,0 +1,77 @@
+import { FC, ReactNode } from 'react';
+import { ResizableContainerSide } from '../../../types/resizable-container';
+export interface ResizableContainerProps {
+    /** Content placed inside the container. */
+    children: ReactNode;
+    /** Minimum allowed width in px. */
+    minWidth: number;
+    /** Maximum allowed width in px. */
+    maxWidth: number;
+    /** Controlled width in px. When provided, the component becomes controlled. */
+    width?: number;
+    /** Initial width when uncontrolled. Defaults to `minWidth`. */
+    defaultWidth?: number;
+    /** Fired when a resize ends, and once per arrow key press. */
+    onResizeStop?: (width: number) => void;
+    /** Fired continuously while dragging, with the current width. */
+    onResize?: (width: number) => void;
+    /** Edge carrying the resize handle. Defaults to `ResizableContainerSide.Right`. */
+    side?: ResizableContainerSide;
+    /** Width change per arrow key press. Defaults to `16`. */
+    keyboardStep?: number;
+    /** Accessible name of the handle. Defaults to `'Resize panel'`. */
+    ariaLabel?: string;
+    /** Additional CSS classes for the inner content wrapper. */
+    className?: string;
+    /** Additional CSS classes for the resize handle. */
+    resizeHandlerClassName?: string;
+    /** Custom node rendered inside the handle, in place of the default chevron. */
+    resizeHandler?: ReactNode;
+}
+/**
+ * A panel the user can widen or narrow by dragging its edge.
+ * aliases: ResizePanel|SizableContainer|Splitter
+ * Design system 2.0
+ *
+ * Works as a controlled component when `width` is provided, otherwise it keeps
+ * its own width from `defaultWidth`. The handle — an accent line with a chevron
+ * pointing away from the panel — appears on hover and while dragging, and stays
+ * within `minWidth`–`maxWidth` in both modes.
+ *
+ * The handle is a focusable `separator`, so the panel resizes with the arrow
+ * keys — `Home` and `End` jump to the bounds — and each press reports through
+ * `onResize` and `onResizeStop`. Unlike the 1.0 container this one draws no
+ * dividers between its children; pass `divide-y divide-tertiary` through
+ * `className` if you want them.
+ *
+ * @example
+ * ```tsx
+ * <ResizableContainer minWidth={180} maxWidth={520} defaultWidth={260}>
+ *   <Sidebar />
+ * </ResizableContainer>
+ *
+ * <ResizableContainer
+ *   minWidth={180}
+ *   maxWidth={520}
+ *   width={sidebarWidth}
+ *   onResizeStop={setSidebarWidth}
+ * >
+ *   <Sidebar />
+ * </ResizableContainer>
+ * ```
+ *
+ * @param children - Content placed inside the container.
+ * @param minWidth - Minimum allowed width in px.
+ * @param maxWidth - Maximum allowed width in px.
+ * @param [width] - Controlled width. If omitted the container is uncontrolled.
+ * @param [defaultWidth] - Initial width when uncontrolled. Defaults to `minWidth`.
+ * @param [onResizeStop] - Fired when a resize ends, and once per arrow key press.
+ * @param [onResize] - Fired continuously while dragging.
+ * @param [side=ResizableContainerSide.Right] - Edge carrying the resize handle.
+ * @param [keyboardStep=16] - Width change per arrow key press.
+ * @param [ariaLabel='Resize panel'] - Accessible name of the handle.
+ * @param [className] - Additional CSS classes for the inner content wrapper.
+ * @param [resizeHandlerClassName] - Additional CSS classes for the resize handle.
+ * @param [resizeHandler] - Custom node rendered inside the handle, replacing the default chevron.
+ */
+export declare const ResizableContainer: FC<ResizableContainerProps>;

package/dist/src/components/New/ResizableContainer/components/ResizeHandle.d.ts

@@ -0,0 +1,21 @@
+import { FC, ReactNode } from 'react';
+import { ResizableContainerSide } from '../../../../types/resizable-container';
+interface ResizeHandleProps {
+    side: ResizableContainerSide;
+    isResizing: boolean;
+    width: number;
+    minWidth: number;
+    maxWidth: number;
+    step: number;
+    ariaLabel: string;
+    onWidthChange: (nextWidth: number) => void;
+    customHandler?: ReactNode;
+    handlerClassName?: string;
+}
+/**
+ * The draggable edge of {@link ResizableContainer}. It is a focusable
+ * `separator` — the window-splitter pattern — so the panel can be resized with
+ * the arrow keys as well as the pointer.
+ */
+export declare const ResizeHandle: FC<ResizeHandleProps>;
+export {};

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

@@ -1,8 +1,8 @@
 /** 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";
+export declare const containerClassName = "inline-flex w-fit items-center gap-1 rounded-full border border-tertiary bg-layer-sunken p-[3px]";
+export declare const segmentClassName = "flex h-8 min-w-8 grow shrink-0 basis-auto 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";

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

@@ -1,6 +1,7 @@
 import { FC, MouseEvent, ReactNode, Ref } from 'react';
 import { LabelProps } from '../Label/Label';
 import { SelectOption } from '../../../models/select';
+import { MenuItemMark } from '../../../types/menu-item';
 import { ElementSize } from '../../../types/size';
 export interface SelectProps {
     options: SelectOption[];
@@ -21,6 +22,13 @@ export interface SelectProps {
     searchPlaceholder?: string;
     selectAll?: boolean;
     selectAllLabel?: string;
+    /**
+     * How the chosen option is marked in single mode. The design tints the row
+     * (`Tint`, the default); `Check` puts a trailing check on it instead, the
+     * way a menu marks its rows, and `Highlight` adds the navigation menu's
+     * accent label. Multiple mode always uses the checkbox row.
+     */
+    selectedOptionMark?: MenuItemMark.Tint | MenuItemMark.Check | MenuItemMark.Highlight;
     emptyStateTitle?: string;
     emptyStateDescription?: string;
     emptyStateIcon?: ReactNode;
@@ -46,14 +54,17 @@ export interface SelectProps {
  * aliases: OptionPicker|ChoiceSelector
  * Design system 2.0
  *
+ * A list of **values to choose from**, opened from the field. It is not the
+ * control for showing actions or navigation options — that is {@link Dropdown}.
+ *
  * The field is an {@link Input}, so it carries the 2.0 field styling, sizes,
  * label, caption and error states, and it exposes the control as a `combobox`
  * whose popup is the option list.
  *
  * Single mode:
  * - The field shows the selected option's leading icon + label.
- * - In the list, the selected option is indicated by a LEFT border, a tinted background
- *   and a trailing check icon.
+ * - In the list, the selected option is tinted; `selectedOptionMark` swaps that
+ *   for a trailing check or the navigation highlight.
  *
  * Multiple mode uses checkboxes (including Select All with indeterminate state) and
  * renders the selection as removable tags inside the field.
@@ -87,6 +98,7 @@ export interface SelectProps {
  * @param [searchPlaceholder] - Placeholder for the overlay search input.
  * @param [selectAll=false] - Show a "Select All" checkbox in multiple mode.
  * @param [selectAllLabel="Select all"] - Label for the "Select All" checkbox.
+ * @param [selectedOptionMark=MenuItemMark.Tint] - How the chosen option is marked in single mode.
  * @param [emptyStateTitle="No options available"] - Title text when there are no options.
  * @param [emptyStateDescription] - Description text when there are no options.
  * @param [emptyStateIcon] - Icon to display when there are no options.

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

@@ -1,8 +1,11 @@
 import { FC } from 'react';
 import { SelectOption } from '../../../models/select';
+import { MenuItemMark } from '../../../types/menu-item';
 export interface SelectSubMenuItemProps {
     opt: SelectOption;
     selectedValues: string[];
+    /** How a chosen child row is marked. */
+    mark?: MenuItemMark.Tint | MenuItemMark.Check | MenuItemMark.Checkbox | MenuItemMark.Highlight;
     onSelect: (value: string) => void;
 }
 export declare const SelectSubMenuItem: FC<SelectSubMenuItemProps>;

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

@@ -1,6 +1,9 @@
 export declare const selectOverlayBaseClassName: string;
+/**
+ * A row of the option list. The options themselves are {@link MenuItem}s; this
+ * is what the list's own non-option rows — Select All — align to.
+ */
 export declare const selectOptionBaseClassName: string;
-export declare const selectOptionSelectedClassName = "bg-control-accent-alpha";
 /**
  * Holds the option list to the width of the field.
  *
@@ -12,8 +15,14 @@ export declare const selectOptionSelectedClassName = "bg-control-accent-alpha";
  * default this component relies on).
  */
 export declare const selectListWidthClassName = "!max-w-[var(--reference-width)]";
-export declare const selectOptionDisabledClassName: string;
-export declare const dropdownMenuMaxHeight = 352;
+/**
+ * The options themselves scroll, at the design's maximum list length of
+ * 344px — not the panel around them, so the search row and Select All stay
+ * put while the list moves under them. The panel keeps its own cap on the
+ * available viewport height, which takes over on a screen too short for this
+ * one.
+ */
+export declare const selectOptionsScrollClassName = "max-h-[344px] overflow-y-auto";
 export declare const selectSubMenuGap = 4;
 export declare const selectSubMenuClassName: string;
 /** Marks an option that opens a nested list. Matches the dropdown's caret. */
@@ -27,6 +36,4 @@ export declare const selectFieldIconClassName = "text-secondary transition-trans
 export declare const selectSearchThreshold = 8;
 export declare const selectSearchIcon: import("react/jsx-runtime").JSX.Element;
 export declare const selectCloseIcon: import("react/jsx-runtime").JSX.Element;
-/** Marks the selected option in single mode, alongside its tinted row. */
-export declare const selectOptionCheckIcon: import("react/jsx-runtime").JSX.Element;
 export declare const selectEmptyStateIcon: import("react/jsx-runtime").JSX.Element;

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

@@ -1,10 +1,16 @@
 import { DetailedHTMLProps, FC, TextareaHTMLAttributes } from 'react';
 import { LabelProps } from '../Label/Label';
+export declare enum TextareaResize {
+    None = "none",
+    Both = "both",
+    Horizontal = "horizontal",
+    Vertical = "vertical"
+}
 export interface TextareaProps extends DetailedHTMLProps<Omit<TextareaHTMLAttributes<HTMLTextAreaElement>, 'onChange'>, HTMLTextAreaElement> {
     labelProps?: LabelProps;
     invalid?: boolean;
     containerClassName?: string;
-    resize?: boolean;
+    resize?: boolean | TextareaResize;
     error?: string;
     caption?: string;
     onChange?: (value: string) => void;
@@ -32,7 +38,7 @@ export interface TextareaProps extends DetailedHTMLProps<Omit<TextareaHTMLAttrib
  * @param [className=""] - Additional CSS classes to apply to the textarea element
  * @param [containerClassName=""] - Additional CSS classes to apply to the container div
  * @param [invalid=false] - Whether the textarea has validation errors (applies error styling)
- * @param [resize=false] - Whether the textarea has possibility to resize
+ * @param [resize=false] - Whether/how the textarea can be resized. Accepts a boolean (`true` = both directions, `false` = none) or a {@link TextareaResize} value for a single axis (`horizontal`/`vertical`)
  * @param [error] - Error message to display below the textarea (also adds error styling)
  * @param [caption] - Optional caption text to display below the textarea
  */

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

@@ -19,7 +19,7 @@ export interface TooltipProps extends TooltipContainerOptions {
  * 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.
+ * accessible name of a control — it renders nothing on a touch-only device.
  *
  * @example
  * ```tsx

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

@@ -7,9 +7,10 @@ export interface TooltipContentProps extends HTMLProps<HTMLDivElement> {
  * 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.
+ * at the trigger. Renders nothing on a touch-only device, where no pointer can
+ * hover to reveal it — so a control must never depend on a tooltip alone to be
+ * understood, or to have an accessible name. A narrow viewport is not itself
+ * disqualifying: an embed a few hundred pixels wide still hovers on a desktop.
  *
  * @param children - The content to display inside the tooltip
  * @param [className] - Additional CSS classes applied to the tooltip bubble

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

@@ -26,5 +26,14 @@ export declare const arrowClassName = "fill-control-inverted";
  * 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.
+ *
+ * `shadow-xs` is the elevation the design gives a tooltip — the tightest step
+ * of the scale, which is what a bubble anchored to its trigger needs: enough to
+ * lift it off the surface underneath without reading as a floating panel, the
+ * way `shadow-md` marks a dropdown or a calendar. It matters most where the
+ * inverted surface is the lightest thing on screen, on a dark panel. The arrow
+ * takes no shadow of its own: both `xs` layers blur 4px or less, so there is
+ * nothing to see around a 7px triangle that the box's own shadow does not
+ * already carry.
  */
-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";
+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 shadow-xs";

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;