@epam/ai-dial-ui-kit 0.5.0-rc.36 → 0.5.0-rc.38

package/dist/dial-ui-kit.es.js

@@ -2955,7 +2955,7 @@ const Av = {
 }, Ov = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex", M8 = ({
   variant: e = bo.Info,
   message: t,
-  cssClass: s,
+  className: s,
   closable: o = !1,
   onClose: i
 }) => /* @__PURE__ */ z(
@@ -2978,7 +2978,7 @@ const Av = {
           className: "ml-2 text-secondary hover:text-primary",
           "aria-label": "Close alert",
           iconBefore: /* @__PURE__ */ v(Uo, { size: 16 }),
-          onClick: (n) => i?.(n)
+          onClick: i
         }
       )
     ]
@@ -5319,10 +5319,10 @@ function Wh(e, t) {
 const fd = "column", X1 = "flex items-center", J1 = "mr-3 cursor-move text-secondary", A8 = ({
   id: e,
   children: t,
-  cssClass: s,
-  findItem: o,
-  moveItem: i,
-  handleAriaLabel: n = "Drag item"
+  className: s,
+  onFind: o,
+  onMove: i,
+  ariaLabel: n = "Drag item"
 }) => {
   const r = L(null), a = L(null), l = typeof o == "function" ? o(e) : -1, [{ isDragging: c }, d, u] = U1(
     () => ({
@@ -5360,15 +5360,7 @@ const fd = "column", X1 = "flex items-center", J1 = "mr-3 cursor-move text-secon
       style: { opacity: c ? 0 : 1 },
       "aria-roledescription": "Draggable item",
       children: [
-        /* @__PURE__ */ v(
-          "div",
-          {
-            ref: r,
-            className: J1,
-            "aria-label": n,
-            children: /* @__PURE__ */ v(hC, { ...re })
-          }
-        ),
+        /* @__PURE__ */ v("div", { ref: r, className: J1, "aria-label": n, children: /* @__PURE__ */ v(hC, { ...re }) }),
         t
       ]
     }
@@ -5455,7 +5447,6 @@ const fd = "column", X1 = "flex items-center", J1 = "mr-3 cursor-move text-secon
   Ne,
   {
     className: be("text-accent-primary", s),
-    label: "Shared entity indicator",
     icon: /* @__PURE__ */ v(
       NC,
       {
@@ -6029,15 +6020,18 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
   disabled: o,
   isLast: i,
   separator: n = Qh,
-  cssClass: r,
+  className: r,
   iconBefore: a,
-  titleCssClass: l
+  titleClassName: l
 }) => {
   const c = be(
     Yh,
     i ? Rb : yb,
     r
-  ), d = (!!t || !!s) && !i && !o, u = d ? be(bd, xb) : be(
+  ), d = (!!t || !!s) && !i && !o, u = d ? be(
+    bd,
+    xb
+  ) : be(
     bd,
     Fb,
     o ? "pointer-events-none opacity-75" : ""
@@ -6073,20 +6067,13 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
   pathItems: e,
   separator: t = Qh,
   ariaLabel: s = "Breadcrumb",
-  cssClass: o,
+  className: o,
   children: i,
-  titleCssClass: n
+  titleClassName: n
 }) => {
   const r = B(() => e?.length ? e : oC.toArray(i).filter(Hl).map((c) => {
-    const d = c.props;
-    return {
-      title: d.title,
-      href: d.href,
-      onClick: d.onClick,
-      disabled: d.disabled,
-      iconBefore: d.iconBefore,
-      cssClass: d.cssClass
-    };
+    const d = c.props, { titleClassName: u, isLast: h, separator: g, ...p } = d;
+    return p;
   }), [e, i]), a = k(
     (c) => {
       const d = parseInt(c.key, 10), u = r[d];
@@ -6103,7 +6090,7 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
           key: `item-${f}`,
           isLast: f === r.length - 1,
           separator: t,
-          titleCssClass: n
+          titleClassName: n
         }
       ));
     const c = r.at(0), d = r.slice(1, -2), u = r.at(-2), h = r.at(-1);
@@ -6120,7 +6107,7 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
           ...c,
           key: "item-0",
           separator: t,
-          titleCssClass: n
+          titleClassName: n
         }
       ),
       /* @__PURE__ */ z("li", { className: be(Yh), children: [
@@ -6152,7 +6139,7 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
           ...u,
           key: `item-${r.length - 2}`,
           separator: t,
-          titleCssClass: n
+          titleClassName: n
         }
       ),
       /* @__PURE__ */ ui(
@@ -6162,7 +6149,7 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
           key: `item-${r.length - 1}`,
           isLast: !0,
           separator: t,
-          titleCssClass: n
+          titleClassName: n
         }
       )
     ] });
@@ -8790,7 +8777,7 @@ const dg = ({
   ) });
 }, z0 = "w-full h-[12] flex items-center justify-between gap-4", W0 = "min-w-0 h-[38px] flex-1 overflow-hidden bg-layer-3 px-3 flex items-center rounded", _0 = "w-[260px]", U0 = ({
   ariaLabel: e = "Breadcrumb",
-  titleCssClass: t,
+  titleClassName: t,
   onItemClick: s,
   path: o,
   makeHref: i,
@@ -8848,8 +8835,8 @@ const dg = ({
       {
         pathItems: w,
         ariaLabel: e,
-        titleCssClass: t,
-        cssClass: l
+        titleClassName: t,
+        className: l
       }
     ) }),
     c && /* @__PURE__ */ v(

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

@@ -3,7 +3,7 @@ import { AlertVariant } from '../../types/alert';
 export interface DialAlertProps {
     variant?: AlertVariant;
     message: string | ReactNode;
-    cssClass?: string;
+    className?: string;
     closable?: boolean;
     onClose?: (e: MouseEvent<HTMLButtonElement>) => void;
 }
@@ -35,7 +35,7 @@ export interface DialAlertProps {
  *
  * @param [variant=AlertVariant.Info] - Defines the visual style and icon of the alert
  * @param message - Message text to display inside the alert
- * @param [cssClass] - Additional CSS classes applied to the alert container
+ * @param [className] - Additional CSS classes applied to the alert container
  * @param [closable=false] - Whether the alert has a close button
  * @param [onClose] - Callback fired when the close button is clicked
  */

package/dist/src/components/Alert/constants.d.ts

@@ -1,5 +1,5 @@
 import { AlertVariant } from '../../types/alert';
 import { ReactNode } from 'react';
 export declare const variantIcons: Record<AlertVariant, ReactNode>;
-export declare const alertVariantClassMap: Record<AlertVariant, string>;
-export declare const alertBaseClasses = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex";
+export declare const alertVariantClassNameMap: Record<AlertVariant, string>;
+export declare const alertBaseClassName = "items-center justify-between gap-2 p-3 border border-solid dial-small-150 rounded flex";

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

@@ -4,9 +4,9 @@ export interface DialBreadcrumbProps {
     pathItems?: DialBreadcrumbPathItem[];
     separator?: ReactNode;
     ariaLabel?: string;
-    cssClass?: string;
+    className?: string;
     children?: ReactNode;
-    titleCssClass?: string;
+    titleClassName?: string;
 }
 /**
  * Breadcrumb navigation component with horizontal scroll on overflow.
@@ -31,11 +31,11 @@ export interface DialBreadcrumbProps {
  * </DialBreadcrumb>
  * ```
  *
- * @param pathItems - Array of breadcrumb pathItems (see `DialBreadcrumbItem`).
- * @param separator - Custom separator node (default: right chevron icon).
- * @param ariaLabel - Aria label for the `<nav>` element (default: "Breadcrumb").
- * @param cssClass - Additional CSS classes for the `<nav>` container.
- * @param children - Alternatively, compose with `<DialBreadcrumbItem/>` as children.
- * @param titleCssClass - Additional CSS classes applied to each item when using `pathItems` prop.
+ * @param [pathItems] - Array of breadcrumb pathItems (see `DialBreadcrumbItem`).
+ * @param [separator] - Custom separator node (default: right chevron icon).
+ * @param [ariaLabel] - Aria label for the `<nav>` element (default: "Breadcrumb").
+ * @param [className] - Additional CSS classes for the `<nav>` container.
+ * @param [children] - Alternatively, compose with `<DialBreadcrumbItem/>` as children.
+ * @param [titleClassName] - Additional CSS classes applied to each item when using `pathItems` prop.
  */
 export declare const DialBreadcrumb: FC<DialBreadcrumbProps>;

package/dist/src/components/Breadcrumb/BreadcrumbItem.d.ts

@@ -5,8 +5,8 @@ export interface DialBreadcrumbItemProps {
     onClick?: MouseEventHandler<HTMLAnchorElement>;
     disabled?: boolean;
     iconBefore?: ReactNode;
-    cssClass?: string;
-    titleCssClass?: string;
+    className?: string;
+    titleClassName?: string;
     isLast?: boolean;
     separator?: ReactNode;
 }

package/dist/src/components/Breadcrumb/constants.d.ts

@@ -1,12 +1,12 @@
 import { ReactNode } from 'react';
-export declare const breadcrumbBaseClasses = "w-full overflow-hidden";
-export declare const breadcrumbListClasses = "flex flex-nowrap items-center gap-2 min-w-0 px-0 py-0 whitespace-nowrap";
-export declare const breadcrumbItemBaseClasses = "flex items-center gap-2 min-w-0 shrink-0 dial-small";
-export declare const breadcrumbItemVisibleClasses = "max-w-[20%] basis-[20%] flex-none";
-export declare const breadcrumbItemLastClasses = "flex-1 min-w-0";
-export declare const breadcrumbLinkBaseClasses = "inline-flex items-center gap-1 min-w-0 transition-colors";
-export declare const breadcrumbLinkInteractiveClasses = "text-secondary hover:text-accent-primary";
-export declare const breadcrumbCurrentClasses = "text-primary cursor-default";
-export declare const breadcrumbSeparatorClasses = "flex-none inline-flex items-center leading-none text-icon-secondary";
-export declare const breadcrumbEllipsisButtonClasses = "items-center gap-1 min-w-0 transition-colors text-secondary hover:text-accent-primary";
+export declare const breadcrumbBaseClassName = "w-full overflow-hidden";
+export declare const breadcrumbListClassName = "flex flex-nowrap items-center gap-2 min-w-0 px-0 py-0 whitespace-nowrap";
+export declare const breadcrumbItemBaseClassName = "flex items-center gap-2 min-w-0 shrink-0 dial-small";
+export declare const breadcrumbItemVisibleClassName = "max-w-[20%] basis-[20%] flex-none";
+export declare const breadcrumbItemLastClassName = "flex-1 min-w-0";
+export declare const breadcrumbLinkBaseClassName = "inline-flex items-center gap-1 min-w-0 transition-colors";
+export declare const breadcrumbLinkInteractiveClassName = "text-secondary hover:text-accent-primary";
+export declare const breadcrumbCurrentClassName = "text-primary cursor-default";
+export declare const breadcrumbSeparatorClassName = "flex-none inline-flex items-center leading-none text-icon-secondary";
+export declare const breadcrumbEllipsisButtonClassName = "items-center gap-1 min-w-0 transition-colors text-secondary hover:text-accent-primary";
 export declare const defaultSeparator: ReactNode;

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

@@ -2,10 +2,10 @@ import { FC, ReactNode } from 'react';
 export interface DialDraggableItemProps {
     id: string;
     children: ReactNode;
-    cssClass?: string;
-    findItem?: (field: string) => number;
-    moveItem?: (field: string, atIndex: number) => void;
-    handleAriaLabel?: string;
+    className?: string;
+    ariaLabel?: string;
+    onFind?: (field: string) => number;
+    onMove?: (field: string, atIndex: number) => void;
 }
 /**
  * A lightweight wrapper that makes its children sortable via drag-and-drop.
@@ -23,9 +23,9 @@ export interface DialDraggableItemProps {
  *
  * @param id - Unique identifier of the draggable item
  * @param children - Content rendered within the draggable row
- * @param [cssClass] - Additional CSS classes applied to the root container
- * @param [findItem] - Function to resolve an item's current index by id
- * @param [moveItem] - Function to move an item (by id) to a target index
- * @param [handleAriaLabel='Drag item'] - Accessible label for the handle
+ * @param [className] - Additional CSS classes applied to the root container
+ * @param [onFind] - Function to resolve an item's current index by id
+ * @param [onMove] - Function to move an item (by id) to a target index
+ * @param [ariaLabel='Drag item'] - Accessible label for the handle
  */
 export declare const DialDraggableItem: FC<DialDraggableItemProps>;

package/dist/src/components/DraggableItem/constants.d.ts

@@ -1,3 +1,3 @@
 export declare const DRAG_TYPE = "column";
-export declare const containerBaseClasses = "flex items-center";
-export declare const handleBaseClasses = "mr-3 cursor-move text-secondary";
+export declare const containerBaseClassName = "flex items-center";
+export declare const handleBaseClassName = "mr-3 cursor-move text-secondary";

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

@@ -2,7 +2,6 @@ import { FC, ReactNode } from 'react';
 export interface DialIconProps {
     icon?: ReactNode;
     className?: string;
-    label?: string;
 }
 /**
  * A wrapper component for rendering icons with consistent styling

package/dist/src/models/breadcrumb.d.ts

@@ -4,6 +4,6 @@ export interface DialBreadcrumbPathItem {
     href?: string;
     onClick?: (e: MouseEvent<HTMLAnchorElement>) => void;
     disabled?: boolean;
-    cssClass?: string;
+    className?: string;
     iconBefore?: ReactNode;
 }

package/package.json

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