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

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

@@ -3435,9 +3435,9 @@ const jv = "flex", Kv = "pb-1 mt-2", qv = {
   icon: e,
   title: t,
   description: s,
-  containerCssClass: o,
-  titleCssClass: i,
-  descriptionCssClass: n
+  containerClassName: o,
+  titleClassName: i,
+  descriptionClassName: n
 }) => /* @__PURE__ */ z(
   "div",
   {
@@ -5819,7 +5819,7 @@ const hb = Y(
   tab: e,
   active: t,
   invalid: s,
-  cssClass: o,
+  className: o,
   horizontal: i,
   onClick: n
 }) => {
@@ -5849,7 +5849,7 @@ const hb = Y(
         /* @__PURE__ */ v(
           Yt,
           {
-            text: e.name,
+            text: e.label,
             contentClassName: "max-w-[200px]",
             cssClass: "max-w-[200px]"
           }
@@ -5875,9 +5875,9 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
   activeTab: t,
   onClick: s,
   orientation: o = $a.Horizontal,
-  smallScreenThreshold: i = Wn.Tablet,
-  smallScreenContainerCssClass: n,
-  smallScreenDropdownItemCssClass: r
+  screenThreshold: i = Wn.Tablet,
+  smallScreenContainerClassName: n,
+  smallScreenDropdownItemClassName: r
 }) => {
   const [a, l] = I(!1), [c, d] = I(!1), [u, h] = I(!1), g = vb(), p = g === Gs.Mobile || i === Wn.Tablet && g === Gs.Tablet, f = o === $a.Horizontal, m = L(null), C = L(null), w = L(null), b = e.find((x) => x.id === t), S = B(
     () => Y(
@@ -5927,7 +5927,7 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
               onClick: (E) => {
                 s(E), l(!1);
               },
-              cssClass: be(
+              className: be(
                 "w-full rounded-none h-11 items-center px-6",
                 r
               )
@@ -5941,7 +5941,7 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
                 tab: b,
                 active: !0,
                 onClick: s,
-                cssClass: "rounded-none bg-transparent border-l-0 border-b-0 h-full items-center px-0"
+                className: "rounded-none bg-transparent border-l-0 border-b-0 h-full items-center px-0"
               },
               t
             ),
@@ -5962,7 +5962,7 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
   ) : (
     // Desktop
     /* @__PURE__ */ z("div", { ref: m, className: "flex w-full items-start", children: [
-      /* @__PURE__ */ v("div", { ref: C, className: S, children: e.map((x) => /* @__PURE__ */ v(
+      /* @__PURE__ */ v("div", { ref: C, role: "tablist", className: S, children: e.map((x) => /* @__PURE__ */ v(
         "div",
         {
           ref: t === x.id ? w : void 0,
@@ -5974,7 +5974,7 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
               active: t === x.id,
               onClick: s,
               horizontal: f,
-              cssClass: "w-full"
+              className: "w-full"
             }
           )
         },
@@ -5995,7 +5995,7 @@ const vd = () => typeof window < "u" && window.innerWidth < 640, wd = () => {
               onClick: (E) => {
                 s(E), d(!1);
               },
-              cssClass: "w-full rounded-none h-[32px] items-center px-3 py-2"
+              className: "w-full rounded-none h-[32px] items-center px-3 py-2"
             },
             x.id
           )),
@@ -47691,8 +47691,8 @@ const qA = ({
       {
         title: m,
         description: C,
-        containerCssClass: "gap-3",
-        titleCssClass: "mt-2 !text-lg",
+        containerClassName: "gap-3",
+        titleClassName: "mt-2 !text-lg",
         icon: f || /* @__PURE__ */ v(
           UC,
           {
@@ -47788,9 +47788,9 @@ const Tm = () => {
       tabs: e,
       activeTab: t,
       onClick: (C) => s(C),
-      smallScreenThreshold: Wn.Tablet,
-      smallScreenContainerCssClass: "w-fit bg-transparent h-[38px]",
-      smallScreenDropdownItemCssClass: "px-3 h-[38px]"
+      screenThreshold: Wn.Tablet,
+      smallScreenContainerClassName: "w-fit bg-transparent h-[38px]",
+      smallScreenDropdownItemClassName: "px-3 h-[38px]"
     }
   ) : null, f = () => /* @__PURE__ */ z(je, { children: [
     /* @__PURE__ */ v(

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

@@ -1,10 +1,10 @@
 import { FC, LabelHTMLAttributes, ReactNode } from 'react';
-type NativeLabelProps = Omit<LabelHTMLAttributes<HTMLLabelElement>, 'children'>;
+type NativeLabelProps = Omit<LabelHTMLAttributes<HTMLLabelElement>, 'children' | 'defaultValue' | 'onChange'>;
 export interface DialFieldLabelProps extends NativeLabelProps {
     fieldTitle?: string | ReactNode;
     optional?: boolean;
     optionalText?: string;
-    description?: ReactNode;
+    description?: string;
 }
 /**
  * A field label component

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

@@ -3,9 +3,9 @@ export interface DialNoDataContentProps {
     icon?: ReactNode;
     title: string;
     description?: string;
-    containerCssClass?: string;
-    titleCssClass?: string;
-    descriptionCssClass?: string;
+    containerClassName?: string;
+    titleClassName?: string;
+    descriptionClassName?: string;
 }
 /**
  * A component for displaying a message and icon when there is no data to show.
@@ -21,5 +21,8 @@ export interface DialNoDataContentProps {
  * @param [icon] - Custom icon to display (defaults to clipboard icon)
  * @param title - The message to display when no data is present
  * @param [description] - The description to display when no data is present
+ * @param [containerClassName] - Additional CSS classes for the container
+ * @param [titleClassName] - Additional CSS classes for the title text
+ * @param [descriptionClassName] - Additional CSS classes for the description text
  */
 export declare const DialNoDataContent: FC<DialNoDataContentProps>;

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

@@ -1,11 +1,11 @@
+import { ButtonHTMLAttributes, FC } from 'react';
 import { TabModel } from '../../models/tab';
-import { FC } from 'react';
-export interface DialTabProps {
+type NativeButtonProps = Omit<ButtonHTMLAttributes<HTMLButtonElement>, 'onClick' | 'children' | 'type' | 'role' | 'disabled'>;
+export interface DialTabProps extends NativeButtonProps {
     tab: TabModel;
     active: boolean;
     invalid?: boolean;
     horizontal?: boolean;
-    cssClass?: string;
     onClick: (id: string) => void;
 }
 /**
@@ -26,7 +26,7 @@ export interface DialTabProps {
  * @param tab - The tab model containing its `id`, `name`, [`disabled`], [`invalid`].
  * @param active - Whether the tab is currently active.
  * @param [horizontal=false] - Whether the tab is displayed in horizontal orientation.
- * @param [cssClass] - Additional CSS classes applied to the tab element.
  * @param onClick - Callback fired when the tab is clicked. Receives the tab’s `id`.
  */
 export declare const DialTab: FC<DialTabProps>;
+export {};

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

@@ -1,14 +1,14 @@
 import { FC } from 'react';
 import { TabModel } from '../../models/tab';
-import { SmallScreenThreshold, TabOrientation } from '../../types/tab';
+import { ScreenResolution, TabOrientation } from '../../types/tab';
 export interface DialTabsProps {
     tabs: TabModel[];
     activeTab: string;
     onClick: (id: string) => void;
     orientation?: TabOrientation;
-    smallScreenThreshold?: SmallScreenThreshold;
-    smallScreenContainerCssClass?: string;
-    smallScreenDropdownItemCssClass?: string;
+    screenThreshold?: ScreenResolution;
+    smallScreenContainerClassName?: string;
+    smallScreenDropdownItemClassName?: string;
 }
 /**
  * A responsive and overflow-aware tabs component that automatically adapts its layout
@@ -43,17 +43,17 @@ export interface DialTabsProps {
  * @param activeTab - The identifier of the currently active tab.
  * @param onClick - Callback fired when a tab is selected. Receives the tab's `id` as an argument.
  * @param [orientation=TabOrientation.Horizontal] - Layout direction of the tabs. Uses the {@link TabOrientation} enum.
- * @param [smallScreenThreshold=SmallScreenThreshold.Tablet] - Defines the screen size threshold
- *   below which tabs collapse into a dropdown. Uses the {@link SmallScreenThreshold} enum.
+ * @param [screenThreshold=ScreenResolution.Tablet] - Defines the screen size threshold
+ *   below which tabs collapse into a dropdown. Uses the {@link ScreenRelosution} enum.
  *   When set to `Tablet`, both mobile and tablet screens will trigger dropdown mode.
- * @param [smallScreenContainerCssClass] - Optional CSS class applied to the dropdown container
+ * @param [smallScreenContainerClassNames] - Optional CSS class applied to the dropdown container
  *   in small-screen (collapsed) mode.
- * @param [smallScreenDropdownItemCssClass] - Optional CSS class applied to individual dropdown
+ * @param [smallScreenDropdownItemClassName] - Optional CSS class applied to individual dropdown
  *   items in small-screen mode.
  *
  * @remarks
  * - Automatically detects horizontal overflow via `ResizeObserver` and shows a dropdown when needed.
  * - Smoothly scrolls to keep the active tab visible when navigating.
- * - Switches layout responsively based on `smallScreenThreshold`.
+ * - Switches layout responsively based on `screenThreshold`.
  */
 export declare const DialTabs: FC<DialTabsProps>;

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

@@ -1,6 +1,7 @@
+import { ReactNode } from 'react';
 export interface TabModel {
     id: string;
-    name: string;
+    label: string | ReactNode;
     invalid?: boolean;
     disabled?: boolean;
 }

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

@@ -2,7 +2,7 @@ export declare enum TabOrientation {
     Horizontal = "horizontal",
     Vertical = "vertical"
 }
-export declare enum SmallScreenThreshold {
+export declare enum ScreenResolution {
     Mobile = "mobile",
     Tablet = "tablet"
 }

package/package.json

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