@epam/ai-dial-ui-kit 0.5.0-rc.35 → 0.5.0-rc.37

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

@@ -2905,43 +2905,38 @@ const kv = {
   [He.Tertiary]: "dial-tertiary-button",
   [He.Danger]: "dial-danger-button"
 }, Ie = ({
-  title: e,
+  label: e,
   variant: t,
-  cssClass: s,
-  textCssClass: o,
-  ref: i,
-  onClick: n,
-  disable: r,
-  iconAfter: a,
-  iconBefore: l,
-  hideTitleOnMobile: c,
-  ariaLabel: d,
-  type: u = "button"
+  className: s,
+  textClassName: o,
+  iconAfter: i,
+  iconBefore: n,
+  hideTitleOnMobile: r,
+  type: a = "button",
+  ...l
 }) => {
-  const h = Y(
+  const c = Y(
     "dial-small-semi",
-    a ? "mr-2" : "",
-    l ? "ml-2" : "",
-    c ? "hidden sm:inline" : "inline",
+    i ? "mr-2" : "",
+    n ? "ml-2" : "",
+    r ? "hidden sm:inline" : "inline",
     o
-  ), g = Y(
+  ), d = Y(
     t && kv[t],
-    s,
-    "focus-visible:outline outline-offset-0"
+    "focus-visible:outline outline-offset-0",
+    s
   );
   return /* @__PURE__ */ z(
     "button",
     {
-      ref: i,
-      type: u,
-      className: g,
-      onClick: (p) => n?.(p),
-      disabled: r,
-      "aria-label": e || d,
+      ...l,
+      type: a,
+      className: d,
+      "aria-label": e || l["aria-label"],
       children: [
-        /* @__PURE__ */ v(Ne, { icon: l }),
-        e && /* @__PURE__ */ v("span", { className: h, children: e }),
-        /* @__PURE__ */ v(Ne, { icon: a })
+        /* @__PURE__ */ v(Ne, { icon: n }),
+        e && /* @__PURE__ */ v("span", { className: c, children: e }),
+        /* @__PURE__ */ v(Ne, { icon: i })
       ]
     }
   );
@@ -2980,8 +2975,8 @@ const Av = {
       o && /* @__PURE__ */ v(
         Ie,
         {
-          cssClass: "ml-2 text-secondary hover:text-primary",
-          ariaLabel: "Close alert",
+          className: "ml-2 text-secondary hover:text-primary",
+          "aria-label": "Close alert",
           iconBefore: /* @__PURE__ */ v(Uo, { size: 16 }),
           onClick: (n) => i?.(n)
         }
@@ -3528,7 +3523,7 @@ const jv = "flex", Kv = "pb-1 mt-2", qv = {
               /* @__PURE__ */ v(
                 Ie,
                 {
-                  cssClass: "hover:text-icon-accent-primary p-1",
+                  className: "hover:text-icon-accent-primary p-1",
                   onClick: w,
                   iconBefore: f ? /* @__PURE__ */ v(dC, { size: i, stroke: n }) : /* @__PURE__ */ v(uC, { size: i, stroke: n })
                 }
@@ -5583,14 +5578,14 @@ const hb = Y(
   "dial-small h-[34px] rounded text-primary"
 ), fb = "opacity-75 !cursor-not-allowed", mb = "text-error", Cb = "my-1 border-t border-hover border-secondary", ni = 4, qh = ({
   ariaLabel: e,
-  cssClass: t,
+  className: t,
   size: s = 24,
   onClose: o
 }) => /* @__PURE__ */ v(
   Ie,
   {
-    ariaLabel: e,
-    cssClass: be("text-secondary hover:text-accent-primary", t),
+    "aria-label": e,
+    className: be("text-secondary hover:text-accent-primary", t),
     onClick: o,
     iconBefore: /* @__PURE__ */ v(Uo, { size: s })
   }
@@ -6017,7 +6012,7 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
             Ie,
             {
               iconBefore: /* @__PURE__ */ v(mr, { size: 18 }),
-              cssClass: Y(
+              className: Y(
                 "w-8 h-8 flex items-center justify-center rounded border",
                 c ? "bg-layer-4 border-transparent" : "border-primary"
               )
@@ -6034,15 +6029,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" : ""
@@ -6078,20 +6076,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];
@@ -6108,7 +6099,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);
@@ -6125,7 +6116,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: [
@@ -6157,7 +6148,7 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
           ...u,
           key: `item-${r.length - 2}`,
           separator: t,
-          titleCssClass: n
+          titleClassName: n
         }
       ),
       /* @__PURE__ */ ui(
@@ -6167,7 +6158,7 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
           key: `item-${r.length - 1}`,
           isLast: !0,
           separator: t,
-          titleCssClass: n
+          titleClassName: n
         }
       )
     ] });
@@ -6181,13 +6172,13 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
     }
   );
 }, Pb = ({
-  iconClass: e,
+  iconClassName: e,
   ...t
 }) => /* @__PURE__ */ v(
   Ie,
   {
-    iconBefore: /* @__PURE__ */ v(Vi, { ...re, className: e || "" }),
-    ...t
+    ...t,
+    iconBefore: /* @__PURE__ */ v(Vi, { ...re, className: e || "" })
   }
 ), Tb = ({
   value: e,
@@ -6635,7 +6626,7 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
       Ie,
       {
         variant: He.Secondary,
-        title: n,
+        label: n,
         onClick: () => h ? h() : d?.()
       }
     ),
@@ -6643,9 +6634,9 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
       Ie,
       {
         variant: Sd[f].confirmVariant,
-        cssClass: c,
-        title: i,
-        disable: a,
+        className: c,
+        label: i,
+        disabled: a,
         onClick: () => u()
       }
     )
@@ -6827,7 +6818,7 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
                 Ie,
                 {
                   variant: He.Secondary,
-                  title: g,
+                  label: g,
                   onClick: E
                 }
               ),
@@ -6835,9 +6826,9 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
                 Ie,
                 {
                   variant: He.Primary,
-                  title: p,
+                  label: p,
                   onClick: R,
-                  disable: !f
+                  disabled: !f
                 }
               )
             ] }),
@@ -6879,7 +6870,7 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
       Ie,
       {
         variant: He.Secondary,
-        title: o,
+        label: o,
         onClick: () => d ? d() : l?.()
       }
     ),
@@ -6887,9 +6878,9 @@ const Gb = "flex justify-end gap-2 px-6 py-4", Vb = "text-secondary dial-small-1
       Ie,
       {
         variant: He.Primary,
-        cssClass: a,
-        title: s,
-        disable: n,
+        className: a,
+        label: s,
+        disabled: n,
         onClick: () => c()
       }
     )
@@ -7376,8 +7367,8 @@ const o0 = ({
               b && /* @__PURE__ */ v(
                 Ie,
                 {
-                  ariaLabel: "Close select",
-                  cssClass: "shrink-0",
+                  "aria-label": "Close select",
+                  className: "shrink-0",
                   iconBefore: /* @__PURE__ */ v(Uo, { size: 16 }),
                   onClick: (W) => {
                     x?.(W), O(!1);
@@ -8232,7 +8223,7 @@ const C0 = function(t, s, o) {
                   Ie,
                   {
                     variant: He.Tertiary,
-                    title: o,
+                    label: o,
                     onClick: () => u.current?.click()
                   }
                 )
@@ -8288,7 +8279,7 @@ const C0 = function(t, s, o) {
   }, c = (u) => /* @__PURE__ */ v(
     Pb,
     {
-      ariaLabel: a,
+      "aria-label": a,
       onClick: (h) => l(h, u)
     }
   ), d = (u) => {
@@ -8351,9 +8342,9 @@ const C0 = function(t, s, o) {
           Ie,
           {
             variant: He.Tertiary,
-            cssClass: "!text-error",
+            className: "!text-error",
             iconBefore: /* @__PURE__ */ v(Vi, { ...re }),
-            title: c,
+            label: c,
             onClick: p
           }
         ),
@@ -8362,7 +8353,7 @@ const C0 = function(t, s, o) {
           {
             variant: He.Tertiary,
             iconBefore: /* @__PURE__ */ v(BC, { ...re }),
-            title: d,
+            label: d,
             onClick: g
           }
         )
@@ -8795,7 +8786,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,
@@ -8853,8 +8844,8 @@ const dg = ({
       {
         pathItems: w,
         ariaLabel: e,
-        titleCssClass: t,
-        cssClass: l
+        titleClassName: t,
+        className: l
       }
     ) }),
     c && /* @__PURE__ */ v(
@@ -47840,7 +47831,7 @@ const Tm = () => {
         children: /* @__PURE__ */ v(
           Ie,
           {
-            cssClass: "h-[38px]",
+            className: "h-[38px]",
             iconBefore: /* @__PURE__ */ v(
               mr,
               {
@@ -47938,7 +47929,7 @@ const JA = ({ selectionLabel: e, onClearSelection: t, actions: s }) => {
           Ie,
           {
             iconBefore: d,
-            title: u,
+            label: u,
             variant: He.Secondary,
             hideTitleOnMobile: !0
           },
@@ -47957,9 +47948,9 @@ const JA = ({ selectionLabel: e, onClearSelection: t, actions: s }) => {
           /* @__PURE__ */ v("div", { ref: n, children: /* @__PURE__ */ v(
             Ie,
             {
-              title: e,
+              label: e,
               onClick: t,
-              textCssClass: "text-accent-primary whitespace-nowrap",
+              textClassName: "text-accent-primary whitespace-nowrap",
               variant: He.Tertiary,
               iconBefore: /* @__PURE__ */ v(Uo, { ...re, className: "text-accent-primary" })
             }
@@ -47973,7 +47964,7 @@ const JA = ({ selectionLabel: e, onClearSelection: t, actions: s }) => {
                 children: /* @__PURE__ */ v(
                   Ie,
                   {
-                    cssClass: "h-[38px]",
+                    className: "h-[38px]",
                     iconBefore: /* @__PURE__ */ v(
                       mr,
                       {
@@ -47988,12 +47979,12 @@ const JA = ({ selectionLabel: e, onClearSelection: t, actions: s }) => {
             a.map(({ key: c, icon: d, title: u, onClick: h, disabled: g }) => /* @__PURE__ */ v(
               Ie,
               {
-                cssClass: "!p-[9px]",
+                className: "!p-[9px]",
                 iconBefore: d,
-                title: u,
+                label: u,
                 variant: He.Secondary,
                 hideTitleOnMobile: !0,
-                disable: g,
+                disabled: g,
                 onClick: (p) => h?.({ key: c, domEvent: p })
               },
               c
@@ -48737,7 +48728,7 @@ const u8 = ({
         /* @__PURE__ */ v(
           Ie,
           {
-            cssClass: "hover:text-icon-accent-primary p-1",
+            className: "hover:text-icon-accent-primary p-1",
             onClick: Um,
             iconBefore: /* @__PURE__ */ v(jC, { size: 24, stroke: 1.5 })
           }
@@ -48909,7 +48900,7 @@ const u8 = ({
           /* @__PURE__ */ v(
             Ie,
             {
-              title: n,
+              label: n,
               variant: He.Tertiary,
               iconBefore: /* @__PURE__ */ v(KC, { ...re })
             }
@@ -48939,7 +48930,7 @@ const u8 = ({
             Ie,
             {
               onClick: e,
-              title: "Cancel",
+              label: "Cancel",
               variant: He.Secondary
             }
           ),
@@ -48947,7 +48938,7 @@ const u8 = ({
             Ie,
             {
               onClick: t,
-              title: r === "copy" ? o : i,
+              label: r === "copy" ? o : i,
               variant: He.Primary
             }
           )

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

@@ -1,18 +1,12 @@
-import { FC, MouseEvent, ReactNode, Ref } from 'react';
+import { ButtonHTMLAttributes, DetailedHTMLProps, FC, ReactNode } from 'react';
 import { ButtonVariant } from '../../types/button';
-export interface DialButtonProps {
-    type?: 'button' | 'submit' | 'reset';
+export interface DialButtonProps extends DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement> {
     variant?: ButtonVariant;
-    cssClass?: string;
-    textCssClass?: string;
-    disable?: boolean;
-    title?: string;
+    textClassName?: string;
+    label?: string;
     iconBefore?: ReactNode;
     iconAfter?: ReactNode;
-    onClick?: (e: MouseEvent<HTMLButtonElement>) => void;
-    ref?: Ref<HTMLButtonElement>;
     hideTitleOnMobile?: boolean;
-    ariaLabel?: string;
 }
 /**
  * A Button component with flexible icon and text positioning
@@ -20,24 +14,20 @@ export interface DialButtonProps {
  * @example
  * ```tsx
  * <DialButton
- *   title="Click me"
+ *   label="Click me"
  *   onClick={handleClick}
  *   iconBefore={<Icon />}
- *   cssClass="custom-button"
+ *   className="custom-button"
  * />
  * ```
  *
- * @param [title] - The text content of the button
- * @param [type='button'] - The HTML button type attribute
+ * inherits all properties from the `ButtonHTMLAttributes<HTMLButtonElement>`
+ *
+ * @param [label] - The text content of the button
  * @param [variant=ButtonVariant.Primary] - Defines the visual style of the button
- * @param [cssClass] - Additional CSS classes to apply to the button
- * @param [textCssClass] - Additional CSS classes to apply specifically to the button text
- * @param [onClick] - Click event handler for the button
- * @param [disable=false] - Whether the button should be disabled
+ * @param [textClassName] - Additional CSS classes to apply specifically to the button text
  * @param [iconAfter] - Icon or element to display after the button text
  * @param [iconBefore] - Icon or element to display before the button text
  * @param [hideTitleOnMobile=false] - Whether to hide the title text on mobile devices
- * @param [ariaLabel] - Accessible label for screen readers when no title is provided
- * @param [ref] - Ref to access the button DOM element
  */
 export declare const DialButton: FC<DialButtonProps>;

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

@@ -1,7 +1,7 @@
 import { FC, MouseEvent } from 'react';
 export interface DialCloseButtonProps {
     ariaLabel?: string;
-    cssClass?: string;
+    className?: string;
     size?: number;
     onClose: (e: MouseEvent<HTMLButtonElement>) => void;
 }
@@ -13,13 +13,13 @@ export interface DialCloseButtonProps {
  * <DialCloseButton
  *   ariaLabel="Close dialog"
  *   onClose={handleClose}
- *   cssClass="custom-close"
+ *   className="custom-close"
  *   size={32}
  * />
  * ```
  *
  * @param [ariaLabel] - Accessible label for screen readers
- * @param [cssClass] - Additional CSS classes to apply to the button
+ * @param [className] - Additional CSS classes to apply to the button
  * @param [size=24] - Size of the close icon
  * @param onClose - Click event handler for the close button
  */

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

@@ -1,9 +1,7 @@
-import { FC, MouseEvent } from 'react';
-export interface DialRemoveButtonProps {
-    iconClass?: string;
-    cssClass?: string;
-    ariaLabel?: string;
-    onClick: (e: MouseEvent) => void;
+import { FC } from 'react';
+import { DialButtonProps } from '../Button/Button';
+export interface DialRemoveButtonProps extends Omit<DialButtonProps, 'iconBefore' | 'iconAfter'> {
+    iconClassName?: string;
 }
 /**
  * A specialized button component for removal or delete actions.
@@ -14,11 +12,11 @@ export interface DialRemoveButtonProps {
  * <DialRemoveButton
  *   label="Delete item"
  *   onClick={handleDelete}
- *   iconClass="text-error"
+ *   iconClassName="text-error"
  * />
  * @component
  * @param {DialRemoveButtonProps} props - The properties for the remove button component.
- * @param {string} [props.iconClass] - Optional CSS class applied to the trash icon for styling or sizing.
+ * @param {string} [props.iconClassName] - Optional CSS class applied to the trash icon for styling or sizing.
  * @returns {JSX.Element} The rendered remove button component.
  */
 export declare const DialRemoveButton: FC<DialRemoveButtonProps>;

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.35",
+  "version": "0.5.0-rc.37",
   "type": "module",
   "license": "Apache-2.0",
   "description": "A modern UI kit for building AI DIAL interfaces with React",