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

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/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,10 @@
 import { FC, HTMLAttributes, MouseEvent, ReactNode } from 'react';
-import { ElementSize } from '../../../types/size';
+import { TagAppearance } from '../../../types/tag';
 type NativeTagProps = Omit<HTMLAttributes<HTMLSpanElement>, 'children'>;
 export interface TagProps extends NativeTagProps {
     label: string;
     icon?: ReactNode;
-    size?: ElementSize;
+    appearance?: TagAppearance;
     selected?: boolean;
     disabled?: boolean;
     closable?: boolean;
@@ -16,6 +16,10 @@ export interface TagProps extends NativeTagProps {
  * aliases: Chip|Pill
  * Design system 2.0
  *
+ * The tag has one height — the 32px pill of the 2.0 design. There is no `size`
+ * prop: a tag sizes itself, and a caller that needs a different height is
+ * usually reaching for a button.
+ *
  * The label truncates rather than wrapping, and carries a native `title` so the
  * full text stays reachable when it does.
  *
@@ -24,18 +28,36 @@ export interface TagProps extends NativeTagProps {
  * the caller: a clickable tag that is also closable gives a screen reader two
  * actions with no way to tell which one it landed on.
  *
+ * No tag draws a rim; the two appearances are told apart by their fill.
+ * `TagAppearance.Selectable` is the filter chip of the 2.0 design: no fill
+ * at all until it is selected, one hover tint shared by both states, a semibold
+ * label once selected, and the state carried on `aria-pressed` rather than by
+ * the tint alone. Give it an `onClick` — a selectable tag that cannot be
+ * activated is a colour and nothing else.
+ *
+ * Selecting one therefore changes its width by the difference between the
+ * regular and semibold label. In a wrapping filter row that is what the design
+ * asks for; if a fixed width matters, give the chip one.
+ *
  * @example
  * ```tsx
  * <Tag label="TypeScript" />
  * <Tag label="TypeScript" closable onRemove={() => remove('TypeScript')} />
  * <Tag label="Drafts" selected onClick={() => toggle('Drafts')} />
+ * <Tag
+ *   label="Drafts"
+ *   appearance={TagAppearance.Selectable}
+ *   selected={isSelected}
+ *   onClick={() => toggle('Drafts')}
+ * />
  * ```
  *
  * @param label - Text content displayed inside the tag.
  * @param [icon] - Icon rendered before the label.
- * @param [size=ElementSize.Standard] - Tag height: standard is 24px, small is 20px.
+ * @param [appearance=TagAppearance.Outlined] - `outlined` is the filled chip on the raised
+ * layer; `selectable` is the unfilled filter chip that tints and turns semibold when selected.
  * @param [selected=false] - Applies the accent-tinted selected styling.
- * @param [disabled=false] - Dims the tag and suppresses the remove control and click handling.
+ * @param [disabled=false] - Stops the tag responding: no click handling, no remove control. The design defines no disabled tag, so the colours stay put.
  * @param [closable=false] - Renders the remove button. Needs `onRemove` to appear.
  * @param [removeLabel] - Accessible name of the remove button; defaults to `Remove <label>`.
  * @param [onRemove] - Called when the remove button is clicked. The click does not bubble to `onClick`.

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

@@ -0,0 +1,23 @@
+import { TagAppearance } from '../../../types/tag';
+/**
+ * Geometry and layout shared by every tag. No transition: the design animates
+ * the hover and selected steps instantly (0ms), so the fill switches on the
+ * same frame as the pointer.
+ */
+export declare const tagBaseClassName = "inline-flex h-[32px] max-w-full items-center gap-1 rounded-full px-3";
+/**
+ * Fill and text colour per appearance and selection. No tag draws a rim: the
+ * two appearances are told apart by their fill — `outlined` sits on the raised
+ * layer, `selectable` on nothing until it is selected, where it also steps its
+ * label up from secondary to primary.
+ */
+export declare const tagStateClassNames: Record<TagAppearance, Record<'default' | 'selected', string>>;
+/** Cursor and focus ring of a tag that can be activated. */
+export declare const tagInteractiveClassName = "cursor-pointer outline-offset-0 focus-visible:outline focus-visible:outline-focus";
+/**
+ * Hover and active step of a clickable tag — one accent tint for every
+ * appearance and both selections, as the 2.0 overlay rows do. A selected tag
+ * must not read as hovered at rest, and the label is left alone, so an
+ * unselected one never darkens into looking selected.
+ */
+export declare const tagHoverClassName = "hover:bg-control-accent-alpha-hover active:bg-control-accent-alpha-active";

package/dist/src/components/New/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

@@ -208,6 +208,8 @@ export { RadioGroupPopupField } from './components/New/RadioGroupPopupField/Radi
 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';
@@ -218,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.4",
+  "version": "0.14.0-dev.6",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",