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

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

@@ -0,0 +1,82 @@
+import { FC, MouseEvent, ReactNode } from 'react';
+export interface CollapsibleSidebarProps {
+    /** Content shown while the sidebar is expanded. */
+    children: ReactNode;
+    /** Name of the panel, rendered as vertical text while collapsed. */
+    title: ReactNode;
+    /** Width in px while expanded. Defaults to `280`. */
+    width?: number;
+    /** Width in px while collapsed. Defaults to `48`. */
+    collapsedWidth?: number;
+    /** Controlled open state. When provided, the component becomes controlled. */
+    isOpened?: boolean;
+    /** Initial open state when uncontrolled. Defaults to `true`. */
+    defaultOpened?: boolean;
+    /** Fired when the toggle is clicked. Receives the next open state. */
+    onToggle?: (nextOpened: boolean, e: MouseEvent<HTMLButtonElement>) => void;
+    /** Extra controls rendered in the footer next to the toggle, expanded only. */
+    additionalButtons?: ReactNode;
+    /** Accessible name of the sidebar region. Defaults to `'Sidebar'`. */
+    ariaLabel?: string;
+    /** Name and tooltip of the toggle while expanded. Defaults to `'Collapse sidebar'`. */
+    collapseLabel?: string;
+    /** Name and tooltip of the toggle while collapsed. Defaults to `'Expand sidebar'`. */
+    expandLabel?: string;
+    /** Additional CSS classes for the outer container. */
+    className?: string;
+    /** Additional CSS classes for the vertical title. */
+    titleClassName?: string;
+    /** Additional CSS classes for the content region. */
+    contentClassName?: string;
+    /** Additional CSS classes for the footer holding the toggle. */
+    footerClassName?: string;
+}
+/**
+ * A side panel that collapses to a narrow rail carrying its title vertically.
+ * aliases: ToggleSidebar|CollapsiblePanel|SidePanel
+ * Design system 2.0
+ *
+ * Works as a controlled component when `isOpened` is provided, otherwise it keeps
+ * its own state from `defaultOpened`. The width is derived from the open state, so
+ * changing `width` on an open sidebar takes effect immediately.
+ *
+ * The panel is an `aside` named by `ariaLabel`, and the toggle is a real
+ * `aria-expanded` control pointing at the content region. Content stays mounted
+ * while collapsed — hidden with `display: none` — so scroll position and any
+ * form state inside it survive a collapse.
+ *
+ * The container paints no background and no radius: it is meant to sit on the
+ * surface it belongs to. Pass `className` for either.
+ *
+ * @example
+ * ```tsx
+ * <CollapsibleSidebar title="Filters" width={320}>
+ *   <FilterForm />
+ * </CollapsibleSidebar>
+ *
+ * <CollapsibleSidebar
+ *   title="Filters"
+ *   isOpened={opened}
+ *   onToggle={setOpened}
+ * >
+ *   <FilterForm />
+ * </CollapsibleSidebar>
+ * ```
+ *
+ * @param children - Content shown while the sidebar is expanded.
+ * @param title - Name of the panel, rendered as vertical text while collapsed.
+ * @param [width=280] - Width in px while expanded.
+ * @param [collapsedWidth=48] - Width in px while collapsed.
+ * @param [isOpened] - Controlled open state.
+ * @param [defaultOpened=true] - Initial open state when uncontrolled.
+ * @param [onToggle] - Fired when the toggle is clicked. Receives the next open state.
+ * @param [additionalButtons] - Extra footer controls, rendered while expanded.
+ * @param [ariaLabel='Sidebar'] - Accessible name of the sidebar region.
+ * @param [collapseLabel='Collapse sidebar'] - Name and tooltip of the toggle while expanded.
+ * @param [expandLabel='Expand sidebar'] - Name and tooltip of the toggle while collapsed.
+ * @param [className] - Additional CSS classes for the outer container.
+ * @param [titleClassName] - Additional CSS classes for the vertical title.
+ * @param [contentClassName] - Additional CSS classes for the content region.
+ * @param [footerClassName] - Additional CSS classes for the footer.
+ */
+export declare const CollapsibleSidebar: FC<CollapsibleSidebarProps>;

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

@@ -2,8 +2,10 @@ export declare const dropdownBaseClassName: string;
 export declare const dropdownListBaseClassName: string;
 export declare const dropdownSubMenuClassName: string;
 export declare const dropdownItemBaseClassName: string;
+/** Tint marking a checked multiselect row. */
+export declare const dropdownItemSelectedClassName = "bg-control-accent-alpha";
 export declare const dropdownItemDisabledClassName: string;
 export declare const dropdownItemDangerClassName = "text-error";
-export declare const dropdownDividerClassName = "my-1 border-t border-secondary";
+export declare const dropdownDividerClassName = "my-1 border-t border-tertiary";
 export declare const dropdownGap = 4;
 export declare const submenuCaretIcon: import("react/jsx-runtime").JSX.Element;

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

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

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

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

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

@@ -7,7 +7,7 @@ export interface HighlightProps {
     query: string;
     /** Optional class name for the highlighted segment. */
     markClassName?: string;
-    /** Optional class name forwarded to the `DialEllipsisTooltip` container. */
+    /** Optional class name forwarded to the `EllipsisTooltip` container. */
     className?: string;
     /** Maximum number of lines to display before truncating. Use `1` for single-line ellipsis truncation (e.g. list rows). Defaults to `2`. */
     maxLines?: number;

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

@@ -1,14 +1,14 @@
 import { ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from 'react';
 import { ButtonAppearance, ButtonVariant } from '../../../types/button';
-import { DialTooltipProps } from '../../Tooltip/Tooltip';
 import { ElementSize } from '../../../types/size';
-type TooltipProps = Omit<DialTooltipProps, 'children'>;
+import { TooltipProps } from '../Tooltip/Tooltip';
+type IconButtonTooltipProps = Omit<TooltipProps, 'children'>;
 export interface IconButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     variant?: ButtonVariant;
     size?: ElementSize;
     appearance?: ButtonAppearance;
     icon: ReactNode;
-    tooltipProps?: TooltipProps;
+    tooltipProps?: IconButtonTooltipProps;
 }
 /**
  * A Icon Button component with flexible icon and text positioning
@@ -41,7 +41,7 @@ export interface IconButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<
  * @param [variant] - Defines the visual style of the button
  * @param [appearance=ButtonAppearance.Solid] - Defines the type of the button
  * @param [size=ElementSize.Standard] - Defines the size of the button
- * @param [tooltip] - The content of the icon button tooltip
+ * @param [tooltipProps] - Props of the 2.0 {@link Tooltip} wrapping the button
  * @param icon - Icon display
  */
 export declare const IconButton: FC<IconButtonProps>;

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

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

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

@@ -6,6 +6,7 @@ export interface LabelProps extends NativeLabelProps {
     required?: boolean;
     caption?: string;
     size?: ElementSize;
+    containerClassName?: string;
 }
 /**
  * A label component
@@ -28,6 +29,10 @@ export interface LabelProps extends NativeLabelProps {
  * plus visually hidden text so the requirement is announced too.
  * @param [caption] - Explanatory text, exposed through an info button next to the label
  * @param [size] - The size of the label, which can be 'small', 'medium', or 'large'.
+ * @param [containerClassName] - Additional classes for the wrapper holding the
+ * `<label>` and its info button. Needed when the label is a flex item that has
+ * to shrink: a wrapper left at `min-width: auto` cannot, so its text overflows
+ * instead of truncating.
  */
 export declare const Label: FC<LabelProps>;
 export {};

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

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

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

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

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

@@ -1,4 +1,5 @@
 import { FC, MouseEvent, ReactNode } from 'react';
+import { ButtonProps } from '../Button/Button';
 import { PopupSize } from '../../../types/popup';
 export interface PopupProps {
     open?: boolean;
@@ -13,7 +14,16 @@ export interface PopupProps {
     bodyClassName?: string;
     children?: ReactNode;
     footer?: ReactNode;
+    footerClassName?: string;
     onClose?: (e?: MouseEvent<HTMLButtonElement> | null) => void;
+    onBack?: (e: MouseEvent<HTMLButtonElement>) => void;
+    backAriaLabel?: string;
+    headerActions?: ReactNode;
+    headerDivider?: boolean;
+    mainButtons?: ButtonProps[];
+    additionalButtons?: ButtonProps[];
+    additionalButtonsOnLeft?: boolean;
+    footerDivider?: boolean;
     size?: PopupSize;
     hideClose?: boolean;
     closeAriaLabel?: string;
@@ -27,8 +37,18 @@ export interface PopupProps {
  *
  * Renders in a portal with a scrim overlay, focus management, a header with the
  * title and close control, a scrollable body and an optional footer. Sections
- * are separated by spacing rather than rules; add your own through
- * `headerClassName` or the footer node if a surface needs them.
+ * are separated by spacing rather than rules; opt into a rule with
+ * `headerDivider` / `footerDivider`.
+ *
+ * The header grows from the title alone: `onBack` prepends a back control,
+ * `headerActions` sits between the title and the close button.
+ *
+ * The footer is declared as data, not markup: `mainButtons` and
+ * `additionalButtons` take {@link ButtonProps} and the popup renders the
+ * {@link Button}s itself, so spacing, order and the neutral default are the
+ * same on every dialog. `additionalButtonsOnLeft` moves the secondary group to
+ * the opposite edge. A `footer` node still wins over both, for the rare surface
+ * that needs something other than a row of buttons.
  *
  * A string `header` names the dialog automatically. A `header` node cannot —
  * pass `ariaLabel` in that case, or the dialog opens unnamed.
@@ -39,12 +59,22 @@ export interface PopupProps {
  *   open
  *   header="Title"
  *   size={PopupSize.Md}
- *   footer={
- *     <div className="flex justify-end gap-2 px-6 py-4">
- *       <NeutralButton label="Cancel" />
- *       <PrimaryButton label="Confirm" />
- *     </div>
- *   }
+ *   onBack={() => setStep(step - 1)}
+ *   headerActions={<InfoButton caption="What is this?" />}
+ *   additionalButtonsOnLeft
+ *   additionalButtons={[
+ *     {
+ *       label: 'Back',
+ *       variant: ButtonVariant.Primary,
+ *       appearance: ButtonAppearance.Link,
+ *       iconBefore: <IconArrowLeft />,
+ *       onClick: goBack,
+ *     },
+ *   ]}
+ *   mainButtons={[
+ *     { label: 'Cancel', onClick: () => setOpen(false) },
+ *     { label: 'Confirm', variant: ButtonVariant.Primary, onClick: submit },
+ *   ]}
  *   onClose={() => setOpen(false)}
  * >
  *   <div className="px-6 py-4">Dialog content goes here…</div>
@@ -61,7 +91,16 @@ export interface PopupProps {
  * @param [headerClassName] - Additional CSS classes applied to the popup header container
  * @param [bodyClassName] - Additional CSS classes applied to the scrollable body wrapper around `children`
  * @param [children] - Body content
- * @param [footer] - Footer area for actions
+ * @param [footer] - Custom footer node; overrides `mainButtons` and `additionalButtons`
+ * @param [footerClassName] - Additional CSS classes applied to the built-in footer container
+ * @param [onBack] - Callback for the header back button; the button renders only when set
+ * @param [backAriaLabel="Back"] - Accessible name of the back button
+ * @param [headerActions] - Controls rendered between the title and the close button
+ * @param [headerDivider=false] - Whether a rule is drawn under the header
+ * @param [mainButtons] - Primary footer buttons, aligned to the trailing edge; each defaults to `ButtonVariant.Neutral`
+ * @param [additionalButtons] - Secondary footer buttons, next to `mainButtons` unless moved left
+ * @param [additionalButtonsOnLeft=false] - Whether `additionalButtons` sit on the leading edge
+ * @param [footerDivider=false] - Whether a rule is drawn above the footer
  * @param [onClose] - Callback fired when the popup requests to close
  * @param [size=PopupSize.Md] - Sets the max-width of the popup
  * @param [hideClose=false] - Whether the close button is hidden in the header

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

@@ -3,6 +3,13 @@ export declare const popupOverlayBaseClassName = "z-[52] flex items-center justi
 export declare const popupBaseClassName = "relative flex w-full max-h-full flex-col rounded-xl bg-layer-raised md:h-auto";
 export declare const popupHeaderClassName = "flex flex-row items-center justify-between px-6 py-4";
 export declare const popupTitleClassName = "flex-1 min-w-0 mr-3 truncate dial-h1-text text-primary";
+/** Rule under the header. Opt-in: by default sections are separated by spacing. */
+export declare const popupHeaderDividerClassName = "border-b border-tertiary";
+export declare const popupFooterClassName = "flex flex-row items-center gap-2 px-6 py-4";
+/** Rule above the footer, mirroring the header. */
+export declare const popupFooterDividerClassName = "border-t border-tertiary";
+/** Groups the controls sitting on one side of the header or footer. */
+export declare const popupActionsGroupClassName = "flex shrink-0 flex-row items-center gap-2";
 /**
  * Max widths per size. Full width below the `md` breakpoint, where the popup
  * fills the screen.

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

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

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

@@ -0,0 +1,78 @@
+import { FC, ReactNode } from 'react';
+import { LabelProps } from '../Label/Label';
+import { RadioGroupOrientation } from '../../../types/radio-group';
+export interface RadioGroupItem {
+    value: string;
+    label?: ReactNode;
+    /** Explanatory text rendered under the option's label. */
+    caption?: string;
+    /** Content revealed under the option while it is the selected one. */
+    content?: ReactNode;
+    disabled?: boolean;
+    /** Names the option when its `label` is not a string (or absent). */
+    'aria-label'?: string;
+}
+export interface RadioGroupProps {
+    items: RadioGroupItem[];
+    value?: string;
+    onChange: (value: string) => void;
+    name?: string;
+    id?: string;
+    orientation?: RadioGroupOrientation;
+    labelProps?: LabelProps;
+    disabled?: boolean;
+    error?: string;
+    caption?: string;
+    ariaLabel?: string;
+    className?: string;
+    optionsClassName?: string;
+    radioClassName?: string;
+    contentClassName?: string;
+}
+/**
+ * A set of mutually exclusive {@link Radio} options with one group label.
+ * aliases: SelectionGroup|OptionGroup|RadioList
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <RadioGroup
+ *   labelProps={{ label: 'Delivery' }}
+ *   value={delivery}
+ *   onChange={setDelivery}
+ *   items={[
+ *     { value: 'pickup', label: 'Pickup', caption: 'Free, ready today' },
+ *     { value: 'courier', label: 'Courier', content: <AddressForm /> },
+ *   ]}
+ * />
+ * ```
+ *
+ * The options are native radios sharing one `name`, so the browser gives the
+ * group a single tab stop and moves the selection with the arrow keys — no
+ * roving `tabindex` is needed. The wrapper still takes `role="radiogroup"` so
+ * the group's own name is announced before the options.
+ *
+ * An option's `content` is mounted only while that option is selected, so a
+ * form or an input inside it never holds focus for an option the user has moved
+ * away from.
+ *
+ * The group is named by `labelProps.label` when that is a string, and by
+ * `ariaLabel` otherwise — a group whose label is a node has no other name.
+ *
+ * @param items - Options to render; each needs a unique `value` and may carry a `label`, `caption`, `content` and `disabled` flag
+ * @param [value] - The `value` of the selected option
+ * @param onChange - Callback fired with the newly selected `value`
+ * @param [name] - The `name` shared by the underlying radios; defaults to the group id
+ * @param [id] - Base id for the group; option ids are derived from it
+ * @param [orientation=RadioGroupOrientation.Column] - Whether the options stack or sit in a row
+ * @param [labelProps] - Props of the {@link Label} rendered above the options
+ * @param [disabled] - Disables every option
+ * @param [error] - Error message rendered below the options
+ * @param [caption] - Helper text rendered below the options when there is no `error`
+ * @param [ariaLabel] - Names the group when there is no string `labelProps.label`
+ * @param [className] - Additional classes for the outer container
+ * @param [optionsClassName] - Additional classes for the options wrapper
+ * @param [radioClassName] - Additional classes for every option's control row
+ * @param [contentClassName] - Additional classes for the selected option's content
+ */
+export declare const RadioGroup: FC<RadioGroupProps>;

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

@@ -0,0 +1,11 @@
+import { RadioGroupOrientation } from '../../../types/radio-group';
+/** Label, options and caption/error stack, matching the 2.0 field rhythm. */
+export declare const groupBaseClassName = "flex flex-col gap-2";
+export declare const optionsWrapperBaseClassName = "flex";
+/**
+ * Content revealed under the selected option. The inline offset is the one
+ * `Radio` gives its own caption, so the content lines up with the option's
+ * label text rather than with its circle.
+ */
+export declare const selectedContentClassName = "mt-2 ml-[26px]";
+export declare const orientationClassMap: Record<RadioGroupOrientation, string>;

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

@@ -0,0 +1,93 @@
+import { FC, ReactNode } from 'react';
+import { LabelProps } from '../Label/Label';
+import { RadioGroupItem } from '../RadioGroup/RadioGroup';
+import { PopupSize } from '../../../types/popup';
+export interface RadioGroupPopupFieldProps {
+    items: RadioGroupItem[];
+    value?: string;
+    customValue?: string;
+    header: ReactNode;
+    onApply: (value?: string) => void;
+    id?: string;
+    labelProps?: LabelProps;
+    placeholder?: string;
+    selectedValue?: string;
+    onSelectionChange?: (value: string) => void;
+    onCancel?: () => void;
+    onClose?: () => void;
+    isValid?: boolean;
+    applyButtonLabel?: string;
+    cancelButtonLabel?: string;
+    size?: PopupSize;
+    portalId?: string;
+    disabled?: boolean;
+    invalid?: boolean;
+    error?: string;
+    caption?: string;
+    ariaLabel?: string;
+    className?: string;
+    fieldClassName?: string;
+}
+/**
+ * A field whose value is picked from a {@link RadioGroup} inside a {@link Popup}.
+ * aliases: PopupRadio|ChoicePopup|RadioPopupField
+ * Design system 2.0
+ *
+ * @example
+ * ```tsx
+ * <RadioGroupPopupField
+ *   labelProps={{ label: 'Status' }}
+ *   header="Select status"
+ *   placeholder="None"
+ *   items={[
+ *     { value: 'draft', label: 'Draft' },
+ *     { value: 'published', label: 'Published' },
+ *   ]}
+ *   value={status}
+ *   onApply={(next) => setStatus(next)}
+ * />
+ * ```
+ *
+ * The collapsed field is a `<button>` rather than a read-only `<input>`: it
+ * opens a dialog and holds no text of its own, so the button role and its
+ * `Enter` / `Space` activation come from the element itself instead of being
+ * re-implemented on an input that would also invite typing.
+ *
+ * The selection inside the popup is a draft. Uncontrolled, it is seeded from
+ * `value` each time the popup opens, so an edit the user cancelled never leaks
+ * into the next one, and `onApply` is the only callback reporting a committed
+ * value. Pass `selectedValue` with `onSelectionChange` to drive the draft
+ * yourself — needed when `isValid` depends on what is currently selected.
+ *
+ * The field's accessible name is its label followed by the current value, so it
+ * announces like a collapsed picker ("Status, Draft"). With no `labelProps`,
+ * pass `ariaLabel`: it is exposed through a visually hidden element rather than
+ * as `aria-label`, which would replace the value in the name instead of
+ * preceding it.
+ *
+ * @param items - Options offered inside the popup
+ * @param [value] - The committed value, shown in the collapsed field
+ * @param [customValue] - Text shown in the field in place of the selected option's label
+ * @param header - Title of the popup
+ * @param onApply - Callback fired with the selected value when Apply is clicked
+ * @param [id] - Base id for the field; the label and the options derive theirs from it
+ * @param [labelProps] - Props of the {@link Label} rendered above the field
+ * @param [placeholder] - Text shown in the field while no value is selected
+ * @param [selectedValue] - Controlled draft selection inside the popup
+ * @param [onSelectionChange] - Callback fired when the draft selection changes
+ * @param [onCancel] - Callback fired when Cancel is clicked, before the popup closes
+ * @param [onClose] - Callback fired whenever the popup closes
+ * @param [isValid=true] - Whether Apply is enabled
+ * @param [applyButtonLabel="Apply"] - Label of the Apply button
+ * @param [cancelButtonLabel="Cancel"] - Label of the Cancel button
+ * @param [size=PopupSize.Md] - Size of the popup
+ * @param [portalId] - Portal container id for the popup
+ * @param [disabled] - Disables the field, so the popup cannot be opened
+ * @param [invalid] - Paints the field with the error border
+ * @param [error] - Error message rendered below the field
+ * @param [caption] - Helper text rendered below the field when there is no `error`
+ * @param [ariaLabel] - Names the field when there is no string `labelProps.label`
+ * @param [className] - Additional classes for the outer container
+ * @param [fieldClassName] - Additional classes for the collapsed field
+ */
+export declare const RadioGroupPopupField: FC<RadioGroupPopupFieldProps>;

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

@@ -0,0 +1,22 @@
+/**
+ * The collapsed field. `dial-kit-input` gives it the 2.0 field box — 40px tall,
+ * raised surface, accent border on hover, accent outline on focus, and the
+ * sunken disabled treatment through its own `:disabled` rule, which a `<button>`
+ * matches. The utilities after it only lay the row out; the SCSS class is
+ * unlayered, so anything it already sets (`truncate`, `w-full`, the height)
+ * cannot be overridden from here.
+ *
+ * No `dial-kit-enhanced-target`: `truncate` puts `overflow: hidden` on the
+ * field, which would clip the 44px pseudo-element back to the field's own 40px,
+ * and being unlayered it cannot be undone with a utility. The field takes the
+ * same documented 2.5.5 exception as `Input` and `Select` — full-width target,
+ * 4px short of 44 vertically.
+ */
+export declare const fieldBaseClassName = "dial-kit-input flex flex-row items-center justify-between gap-x-2 px-3 text-left";
+export declare const fieldValueClassName = "min-w-0 flex-1 truncate text-primary";
+export declare const fieldPlaceholderClassName = "min-w-0 flex-1 truncate text-secondary";
+export declare const fieldIconClassName = "shrink-0 text-secondary";
+export declare const popupBodyClassName = "px-6 pb-4";
+export declare const popupFooterClassName = "flex justify-end gap-2 px-6 py-4 border-t border-tertiary";
+export declare const defaultCancelLabel = "Cancel";
+export declare const defaultApplyLabel = "Apply";

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>;