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

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

@@ -2872,24 +2872,24 @@ function be(...e) {
 }
 const Ko = ({
   fieldTitle: e,
-  htmlFor: t,
-  optional: s,
-  optionalText: o,
-  cssClass: i,
-  description: n
+  optional: t,
+  optionalText: s,
+  className: o,
+  description: i,
+  ...n
 }) => e ? /* @__PURE__ */ z(
   "label",
   {
+    ...n,
     className: be(
       "dial-tiny text-secondary flex gap-1",
-      i,
-      !i?.includes("mb") && "mb-2"
+      o,
+      !o?.includes("mb") && "mb-2"
     ),
-    htmlFor: t,
     children: [
       typeof e == "string" ? /* @__PURE__ */ v("span", { className: "min-h-4", children: e }) : e,
-      s && /* @__PURE__ */ v("span", { children: o ?? "(Optional)" }),
-      n && /* @__PURE__ */ v(Ts, { tooltip: n, children: /* @__PURE__ */ v(
+      t && /* @__PURE__ */ v("span", { children: s ?? "(Optional)" }),
+      i && /* @__PURE__ */ v(Ts, { tooltip: i, children: /* @__PURE__ */ v(
         Ne,
         {
           icon: /* @__PURE__ */ v(ch, { size: 14, className: "text-secondary" })
@@ -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,15 +2978,15 @@ 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
         }
       )
     ]
   }
 ), Nv = "flex items-center justify-center text-secondary", Hv = "shrink-0 grow-0 basis-auto animate-spin-steps", Gv = (e) => /* @__PURE__ */ pe.createElement("svg", { viewBox: "0 0 48 48", fill: "none", xmlns: "http://www.w3.org/2000/svg", ...e }, /* @__PURE__ */ pe.createElement("path", { d: "M24 39V46.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ pe.createElement("path", { opacity: 0.4, d: "M9 24H1.5", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ pe.createElement("path", { opacity: 0.5, d: "M8.0918 8.0918L13.3994 13.3994", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ pe.createElement("path", { opacity: 0.6, d: "M24 1.5V9", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ pe.createElement("path", { opacity: 0.7, d: "M39.9121 8.08594L37.2607 10.7373L34.6094 13.3887", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ pe.createElement("path", { opacity: 0.8, d: "M46.5 24H39", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ pe.createElement("path", { opacity: 0.9, d: "M34.6055 34.6055L39.9082 39.9082", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" }), /* @__PURE__ */ pe.createElement("path", { opacity: 0.3, d: "M13.3936 34.6055L8.08594 39.9131", stroke: "currentColor", strokeWidth: 3, strokeLinecap: "round", strokeLinejoin: "round" })), Cr = ({
   size: e = 18,
-  cssClass: t,
-  iconClass: s,
+  className: t,
+  iconClassName: s,
   fullWidth: o = !0,
   ariaLabel: i = "Loading"
 }) => /* @__PURE__ */ v(
@@ -3319,7 +3319,7 @@ const Uv = "w-full flex", $v = {
                 fieldTitle: t,
                 optional: s,
                 optionalText: o,
-                cssClass: be(
+                className: be(
                   a && "sr-only",
                   c
                 ),
@@ -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,
       {

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

@@ -1,11 +1,10 @@
-import { FC, ReactNode } from 'react';
-export interface DialFieldLabelProps {
+import { FC, LabelHTMLAttributes, ReactNode } from 'react';
+type NativeLabelProps = Omit<LabelHTMLAttributes<HTMLLabelElement>, 'children'>;
+export interface DialFieldLabelProps extends NativeLabelProps {
     fieldTitle?: string | ReactNode;
-    htmlFor: string;
     optional?: boolean;
     optionalText?: string;
-    cssClass?: string;
-    description?: string;
+    description?: ReactNode;
 }
 /**
  * A field label component
@@ -16,11 +15,10 @@ export interface DialFieldLabelProps {
  * <DialFieldLabel htmlFor="email-input" fieldTitle="Email Address" />
  * ```
  *
- * @param htmlFor - The ID of the form element this label is associated with
  * @param [fieldTitle] - The title/label text to display for the field
  * @param [optional=false] - Whether the field is optional (displays "(Optional)" text if optionalText is not provided)
  * @param [optionalText="(Optional)"] - Custom text for optional indicator
- * @param [cssClass] - Additional CSS classes to apply to the label element
  * @param [description] - Additional description text, displayed below the label.
  */
 export declare const DialFieldLabel: FC<DialFieldLabelProps>;
+export {};

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

@@ -1,8 +1,8 @@
 import { FC } from 'react';
 export interface DialLoaderProps {
     size?: number;
-    cssClass?: string;
-    iconClass?: string;
+    className?: string;
+    iconClassName?: string;
     fullWidth?: boolean;
     ariaLabel?: string;
 }
@@ -20,12 +20,12 @@ export interface DialLoaderProps {
  * <DialLoader fullWidth={false} />
  *
  * // Custom size and classes
- * <DialLoader size={24} iconClass="text-accent-primary" />
+ * <DialLoader size={24} iconClassName="text-accent-primary" />
  * ```
  *
  * @param [size=18] - Icon size in px
- * @param [cssClass] - Additional classes for the container
- * @param [iconClass] - Additional classes for the SVG icon
+ * @param [className] - Additional classes for the container
+ * @param [iconClassName] - Additional classes for the SVG icon
  * @param [fullWidth=true] - Stretch to full width/height of container
  * @param [ariaLabel='Loading'] - Accessible label for screen readers
  */

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

@@ -1,2 +1,2 @@
-export declare const loaderBaseClasses = "flex items-center justify-center text-secondary";
-export declare const loaderIconBaseClasses = "shrink-0 grow-0 basis-auto animate-spin-steps";
+export declare const loaderBaseClassName = "flex items-center justify-center text-secondary";
+export declare const loaderIconBaseClassName = "shrink-0 grow-0 basis-auto animate-spin-steps";

package/package.json

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