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

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

@@ -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.5",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",