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

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

@@ -1,6 +1,6 @@
 export declare const selectOverlayBaseClassName: string;
 export declare const selectOptionBaseClassName: string;
-export declare const selectOptionSelectedClassName = "bg-control-accent-alpha-hover";
+export declare const selectOptionSelectedClassName = "bg-control-accent-alpha";
 /**
  * Holds the option list to the width of the field.
  *
@@ -12,7 +12,7 @@ export declare const selectOptionSelectedClassName = "bg-control-accent-alpha-ho
  * default this component relies on).
  */
 export declare const selectListWidthClassName = "!max-w-[var(--reference-width)]";
-export declare const selectOptionDisabledClassName = "text-secondary";
+export declare const selectOptionDisabledClassName: string;
 export declare const dropdownMenuMaxHeight = 352;
 export declare const selectSubMenuGap = 4;
 export declare const selectSubMenuClassName: string;

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

@@ -1,10 +1,12 @@
 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;
@@ -24,16 +26,29 @@ 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.
  *
+ * `TagAppearance.Selectable` is the filter chip of the 2.0 design: no rim and no
+ * fill until it is selected, one hover tint shared by both states, 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.
+ *
  * @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 bordered chip; `selectable`
+ * is the borderless filter chip that tints 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 [closable=false] - Renders the remove button. Needs `onRemove` to appear.

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

@@ -21,5 +21,10 @@ 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-[300px] 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";

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 = "text-secondary";
+/**
+ * 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

@@ -202,8 +202,14 @@ 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';
@@ -214,6 +220,7 @@ 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';

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

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

package/package.json

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