@epam/ai-dial-ui-kit 0.16.0-dev.55 → 0.16.0-dev.57

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

@@ -0,0 +1,70 @@
+import { ButtonHTMLAttributes, FC, ReactNode } from 'react';
+type NativeToggleChipProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'children' | 'type' | 'onToggle' | 'aria-pressed'>;
+export interface ToggleChipProps extends NativeToggleChipProps {
+    label: ReactNode;
+    icon?: ReactNode;
+    isSelected?: boolean;
+    onToggle?: (isSelected: boolean) => void;
+}
+/**
+ * A chip that switches one option on and off on its own, for a row of
+ * independent toggles — tools a model may call, filters that combine.
+ * aliases: ChipToggle|ToggleTag|PressableChip|SelectableChip|MultiSelectChip
+ * Design system 2.0
+ *
+ * Draws the `TagAppearance.Selectable` filter chip of the 2.0 design — no fill
+ * until it is on, one accent hover tint shared by both states, an accent-alpha
+ * fill and a semibold label once on — so a row of these sits beside a
+ * `FilterChips` row without a seam. Turning it on therefore widens it by the
+ * difference between the regular and semibold label; give it a width if that
+ * shift matters.
+ *
+ * Reach for it when each chip is its own yes/no. `FilterChips` picks one value
+ * out of several and `Tag` is a label that may be clicked or removed; neither
+ * keeps several independent states, and `Tag` renders a `<span>` with a string
+ * label. This is a native `<button aria-pressed>`: Enter and Space work, the
+ * state is announced as "pressed", and `disabled` takes it out of the tab order
+ * and greys it out.
+ *
+ * Keep one accessible name across both states — the state rides on
+ * `aria-pressed`, and a control that renames itself on click reads as a
+ * different control. Visible state text such as "ON" / "OFF" belongs inside
+ * `label`, wrapped in `aria-hidden` so it is not read on top of the pressed
+ * state. There is no remove control: a chip that toggles and also closes gives
+ * a screen reader two actions with no way to tell which one it landed on, so a
+ * removable value is a closable `Tag` instead.
+ *
+ * Group a row of these in a named `role="group"` so they are announced
+ * together. Labels are the caller's to translate — the component ships no
+ * English defaults.
+ *
+ * @example
+ * ```tsx
+ * <div role="group" aria-label={t('Tools')} className="flex flex-wrap gap-1">
+ *   {tools.map((tool) => (
+ *     <ToggleChip
+ *       key={tool.id}
+ *       icon={tool.icon}
+ *       label={
+ *         <>
+ *           {tool.label}
+ *           <span aria-hidden="true">: {tool.isOn ? t('ON') : t('OFF')}</span>
+ *         </>
+ *       }
+ *       isSelected={tool.isOn}
+ *       onToggle={(isOn) => setTool(tool.id, isOn)}
+ *     />
+ *   ))}
+ * </div>
+ * ```
+ *
+ * @param label - Content of the chip after the icon. Any node, so trailing state text can follow the name; it truncates on one line
+ * @param [icon] - Icon rendered before the label; hidden from assistive tech
+ * @param [isSelected=false] - Whether the chip is on; rendered as `aria-pressed`
+ * @param [onToggle] - Called with the next value when the chip is activated by click, Enter or Space
+ * @param [disabled=false] - Greys the chip out and stops it responding; it keeps showing its on/off state
+ * @param [onClick] - Native click handler, called before `onToggle`
+ * @param [className] - Additional classes on the button
+ */
+export declare const ToggleChip: FC<ToggleChipProps>;
+export {};

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

@@ -0,0 +1,12 @@
+/**
+ * Type scale per state, as the selectable `Tag` draws it: the regular label
+ * steps up to semibold once the chip is on.
+ */
+export declare const toggleChipLabelClassNames: Record<'default' | 'selected', string>;
+/**
+ * Colours of a disabled chip. The `Tag` design defines no disabled state, so
+ * these follow the kit's other 2.0 controls — the disabled text colour, and on
+ * a chip that is on, the disabled fill `SegmentedControl` gives its selected
+ * segment — keeping the on/off state visible while the chip cannot respond.
+ */
+export declare const toggleChipDisabledClassNames: Record<'default' | 'selected', string>;

package/dist/src/components/ProgressBar/ProgressBar.d.ts

@@ -1,19 +1,31 @@
 import { FC, HTMLAttributes, ReactNode } from 'react';
 import { LabelProps } from '../New/Label/Label';
+import { ProgressBarRole } from '../../types/progress-bar';
 import { ElementSize } from '../../types/size';
-type NativeProgressBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children'>;
+type NativeProgressBarProps = Omit<HTMLAttributes<HTMLDivElement>, 'children' | 'role'>;
 export interface ProgressBarProps extends NativeProgressBarProps {
     value: number;
     max?: number;
     size?: ElementSize;
     labelProps?: LabelProps;
     valueLabel?: ReactNode;
+    role?: ProgressBarRole;
 }
 /**
- * A horizontal bar indicating progress toward a goal.
- * aliases: Progress|LoadingBar|Meter
+ * A horizontal bar indicating progress toward a goal, or a level within a range.
+ * aliases: Progress|LoadingBar|Meter|Gauge|CapacityMeter|UsageBar
  * Design system 2.0
  *
+ * `role` picks what the bar means. The default, `ProgressBarRole.Progressbar`,
+ * is a task on its way to done — an upload, an import. `ProgressBarRole.Meter`
+ * renders `role="meter"`: a level inside a known range that never completes —
+ * capacity used, a quota, a budget. Both carry `aria-valuemin`,
+ * `aria-valuemax`, `aria-valuenow` and, when given, `aria-valuetext`, and draw
+ * the same track and accent fill; the role changes only what a screen reader
+ * announces. The bar has no low / optimum / high colouring, so a meter that
+ * must change colour near its limit is restyled by the caller through
+ * `className`.
+ *
  * Names itself from `labelProps.label` through `aria-labelledby`; without one it
  * falls back to `aria-label`, and finally to `Progress` so the bar is never
  * anonymous. Prefer a real label — several bars all announcing "Progress" tell a
@@ -33,6 +45,13 @@ export interface ProgressBarProps extends NativeProgressBarProps {
  * <ProgressBar value={40} labelProps={{ label: 'Uploading' }} />
  * <ProgressBar value={3} max={10} aria-valuetext="3 of 10 files" />
  * <ProgressBar value={80} size={ElementSize.Small} />
+ * <ProgressBar
+ *   role={ProgressBarRole.Meter}
+ *   value={usedBytes}
+ *   max={maxBytes}
+ *   aria-label="Project capacity"
+ *   aria-valuetext="42% used"
+ * />
  *
  * <ProgressBar
  *   value={3.313182}
@@ -48,6 +67,7 @@ export interface ProgressBarProps extends NativeProgressBarProps {
  * @param [size=ElementSize.Standard] - Bar height: standard is 8px, small is 4px.
  * @param [labelProps] - Props of the {@link Label} rendered above the bar, which also names it.
  * @param [valueLabel] - Readout rendered at the end of the label row.
+ * @param [role=ProgressBarRole.Progressbar] - ARIA role of the bar: `progressbar` for a task's progress, `meter` for a level within a range. Without a label the bar is named `Progress` or `Meter` respectively.
  * @param [className] - Additional classes on the track element.
  */
 export declare const ProgressBar: FC<ProgressBarProps>;

package/dist/src/constants/public-class-names.d.ts

@@ -222,6 +222,8 @@ export declare const DIAL_KIT_CLASS: {
      * already carries.
      */
     readonly toggleIconButton: "dial-kit-toggle-icon-button";
+    /** The `<button aria-pressed>` of a `ToggleChip`. */
+    readonly toggleChip: "dial-kit-toggle-chip";
     /** A `CloseButton`, additive to `dial-kit-base-icon-button`. */
     readonly closeButton: "dial-kit-close-button";
     /** An `InfoButton`, additive to `dial-kit-base-icon-button`. */

package/dist/src/index.d.ts

@@ -8,6 +8,7 @@ export { Spinner } from './components/Spinner/Spinner';
 export type { SpinnerProps } from './components/Spinner/Spinner';
 export { ProgressBar } from './components/ProgressBar/ProgressBar';
 export type { ProgressBarProps } from './components/ProgressBar/ProgressBar';
+export { ProgressBarRole } from './types/progress-bar';
 export { DialNoDataContent } from './components/NoDataContent/NoDataContent';
 export type { DialNoDataContentProps } from './components/NoDataContent/NoDataContent';
 export { DialLabelledText } from './components/LabelledText/LabelledText';
@@ -42,7 +43,7 @@ export { ButtonVariant, ButtonAppearance } from './types/button';
 export { RadioGroupOrientation } from './types/radio-group';
 export { PopupSize } from './types/popup';
 export { ConfirmationPopupVariant } from './types/confirmation-popup';
-export { DropdownType, DropdownTrigger, DropdownItemType, } from './types/dropdown';
+export { DropdownType, DropdownTrigger, DropdownItemType, DropdownOverlayRole, } from './types/dropdown';
 export { MenuItemMark } from './types/menu-item';
 export { ElementSize } from './types/size';
 export { ScreenResolution, TabOrientation, TabStatus, TabView, } from './types/tab';
@@ -75,7 +76,7 @@ export { SchemaRendererVariant, SchemaDisplayMode, SchemaOrientation, JsonSchema
 export type { JsonSchema, JsonSchemaDef, ValidationError, SchemaRendererTexts, } from './models/json-schema';
 export { SchemaRenderer } from './components/New/SchemaRenderer/SchemaRenderer';
 export type { SchemaRendererProps, SchemaRenderField, } from './components/New/SchemaRenderer/types';
-export { NotificationVariant, NotificationType } from './types/notification.ts';
+export { NotificationVariant, NotificationType, NotificationSurface, } from './types/notification.ts';
 export { Notification } from './components/New/Notification/Notification';
 export { Highlight } from './components/New/Highlight/Highlight';
 export { CardShell } from './components/New/CardShell/CardShell';
@@ -165,6 +166,8 @@ 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 { ToggleChip } from './components/New/ToggleChip/ToggleChip';
+export type { ToggleChipProps } from './components/New/ToggleChip/ToggleChip';
 export { SegmentedControl } from './components/New/SegmentedControl/SegmentedControl';
 export type { SegmentedControlProps, SegmentedControlItem, } from './components/New/SegmentedControl/SegmentedControl';
 export { Tabs } from './components/New/Tabs/Tabs';

package/dist/src/types/dropdown.d.ts

@@ -12,3 +12,19 @@ export declare enum DropdownItemType {
     Divider = "divider",
     PlainText = "plainText"
 }
+/**
+ * Role of the 2.0 `Dropdown`'s floating overlay, and with it the
+ * `aria-haspopup` value its trigger announces.
+ */
+export declare enum DropdownOverlayRole {
+    /** `role="menu"`, trigger `aria-haspopup="menu"`; options are arrow-key navigated. */
+    Menu = "menu",
+    /** `role="dialog"`, trigger `aria-haspopup="dialog"`; for a panel of free-form content. */
+    Dialog = "dialog",
+    /**
+     * No role on the overlay and no `aria-haspopup` on the trigger, which keeps
+     * `aria-expanded`/`aria-controls` as a disclosure; for an overlay whose
+     * content supplies its own semantics (a `region`, its own `dialog`).
+     */
+    None = "none"
+}

package/dist/src/types/notification.d.ts

@@ -10,3 +10,14 @@ export declare enum NotificationType {
     Toast = "toast",
     SectionMessage = "section-message"
 }
+/**
+ * Which surface a `Notification` draws on.
+ *
+ * - `Variant` — the variant's own coloured surface (`bg-info`, `bg-warning` …).
+ * - `Neutral` — the neutral sunken layer (`bg-layer-sunken`) with primary text;
+ *   the variant still picks the icon, the icon colour and the live-region role.
+ */
+export declare enum NotificationSurface {
+    Variant = "variant",
+    Neutral = "neutral"
+}

package/dist/src/types/progress-bar.d.ts

@@ -0,0 +1,13 @@
+/**
+ * The ARIA role a `ProgressBar` renders, which decides what its value means to
+ * a screen reader.
+ */
+export declare enum ProgressBarRole {
+    /** `role="progressbar"`: how far a task has got toward completion — an upload, an import. */
+    Progressbar = "progressbar",
+    /**
+     * `role="meter"`: a scalar inside a known range that is not a task's
+     * progress — capacity used, a quota, a score. It never "completes".
+     */
+    Meter = "meter"
+}

package/dist/types/dropdown.js

@@ -1,6 +1,7 @@
-var t = /* @__PURE__ */ ((e) => (e.Dropdown = "dropdown", e.Menu = "menu", e))(t || {}), n = /* @__PURE__ */ ((e) => (e.Click = "click", e.Hover = "hover", e.ContextMenu = "contextMenu", e))(n || {}), i = /* @__PURE__ */ ((e) => (e.Item = "item", e.Divider = "divider", e.PlainText = "plainText", e))(i || {});
+var n = /* @__PURE__ */ ((e) => (e.Dropdown = "dropdown", e.Menu = "menu", e))(n || {}), t = /* @__PURE__ */ ((e) => (e.Click = "click", e.Hover = "hover", e.ContextMenu = "contextMenu", e))(t || {}), u = /* @__PURE__ */ ((e) => (e.Item = "item", e.Divider = "divider", e.PlainText = "plainText", e))(u || {}), i = /* @__PURE__ */ ((e) => (e.Menu = "menu", e.Dialog = "dialog", e.None = "none", e))(i || {});
 export {
-  i as DropdownItemType,
-  n as DropdownTrigger,
-  t as DropdownType
+  u as DropdownItemType,
+  i as DropdownOverlayRole,
+  t as DropdownTrigger,
+  n as DropdownType
 };

package/dist/types/notification.js

@@ -1,5 +1,6 @@
-var r = /* @__PURE__ */ ((e) => (e.Info = "info", e.Success = "success", e.Warning = "warning", e.Error = "error", e.Loading = "loading", e.General = "general", e))(r || {}), s = /* @__PURE__ */ ((e) => (e.Toast = "toast", e.SectionMessage = "section-message", e))(s || {});
+var e = /* @__PURE__ */ ((r) => (r.Info = "info", r.Success = "success", r.Warning = "warning", r.Error = "error", r.Loading = "loading", r.General = "general", r))(e || {}), s = /* @__PURE__ */ ((r) => (r.Toast = "toast", r.SectionMessage = "section-message", r))(s || {}), g = /* @__PURE__ */ ((r) => (r.Variant = "variant", r.Neutral = "neutral", r))(g || {});
 export {
+  g as NotificationSurface,
   s as NotificationType,
-  r as NotificationVariant
+  e as NotificationVariant
 };

package/dist/types/progress-bar.js

@@ -0,0 +1,4 @@
+var e = /* @__PURE__ */ ((r) => (r.Progressbar = "progressbar", r.Meter = "meter", r))(e || {});
+export {
+  e as ProgressBarRole
+};

package/dist/utils/merge-classes.js

@@ -1,6 +1,6 @@
-import i from "classnames";
+import a from "classnames";
 import { extendTailwindMerge as t } from "../node_modules/tailwind-merge/dist/bundle-mjs.js";
-const l = [
+const e = [
   "display1",
   "display2",
   "display3",
@@ -22,23 +22,26 @@ const l = [
   "caption",
   "caption-lead-semi",
   "code",
+  "code-semi",
+  "tiny-code",
+  "tiny-code-semi",
   "italic",
   "small-italic",
   "tiny-italic",
   "caption-italic"
-], e = t({
+], l = t({
   extend: {
     classGroups: {
       z: [{ z: ["popup", "floating", "interactive-tooltip", "tooltip"] }],
-      "dial-typography": l.map(
-        (a) => `dial-${a}-text`
+      "dial-typography": e.map(
+        (i) => `dial-${i}-text`
       )
     }
   }
 });
-function o(...a) {
-  return e(i(a));
+function p(...i) {
+  return l(a(i));
 }
 export {
-  o as mergeClasses
+  p as mergeClasses
 };

package/package.json

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