@epam/ai-dial-ui-kit 0.16.0-dev.62 → 0.16.0-dev.66

package/dist/components/New/ErrorBoundary/ErrorBoundary.js

@@ -0,0 +1,67 @@
+import { jsxs as E, Fragment as g, jsx as e } from "react/jsx-runtime";
+import { IconAlertTriangle as I } from "@tabler/icons-react";
+import { useState as v, useRef as A, useEffect as L, Component as S } from "react";
+import { DIAL_KIT_ICON_STROKE as _ } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as D } from "../../../constants/icon.js";
+import { LiveRegionPoliteness as O } from "../../../types/live-region.js";
+import { PrimaryButton as F } from "../Button/ButtonWrappers.js";
+import { LiveRegion as T } from "../LiveRegion/LiveRegion.js";
+import { StateScreen as j } from "../StateScreen/StateScreen.js";
+class x extends S {
+  state = { hasError: !1 };
+  static getDerivedStateFromError = () => ({ hasError: !0 });
+  componentDidCatch(r, o) {
+    this.props.onCatch(r, o);
+  }
+  render() {
+    return this.state.hasError ? null : this.props.children;
+  }
+}
+const N = /* @__PURE__ */ e(I, { size: D.LG, stroke: _ }), R = (t = [], r = []) => t.length !== r.length || t.some((o, i) => !Object.is(o, r[i])), K = ({
+  children: t,
+  title: r,
+  description: o,
+  actionLabel: i,
+  onReset: c,
+  resetKeys: n,
+  onError: m,
+  icon: h = N,
+  className: f
+}) => {
+  const [s, a] = v(!1), l = A(n);
+  L(() => {
+    s && R(l.current, n) && a(!1), l.current = n;
+  }, [s, n]);
+  const u = (d, C) => {
+    a(!0), m?.(d, C);
+  }, p = () => {
+    if (!c) {
+      window.location.reload();
+      return;
+    }
+    c(), a(!1);
+  };
+  return /* @__PURE__ */ E(g, { children: [
+    /* @__PURE__ */ e(T, { politeness: O.Assertive, visuallyHidden: !0, children: s && r }),
+    s ? /* @__PURE__ */ e(
+      j,
+      {
+        icon: h,
+        title: r,
+        description: o,
+        className: f,
+        action: /* @__PURE__ */ e(
+          F,
+          {
+            autoFocus: !0,
+            label: i,
+            onClick: p
+          }
+        )
+      }
+    ) : /* @__PURE__ */ e(x, { onCatch: u, children: t })
+  ] });
+};
+export {
+  K as ErrorBoundary
+};

package/dist/components/Spinner/Spinner.js

@@ -1,26 +1,31 @@
-import { jsx as r } from "react/jsx-runtime";
-import { mergeClasses as n } from "../../utils/merge-classes.js";
+import { jsx as s } from "react/jsx-runtime";
+import { mergeClasses as l } from "../../utils/merge-classes.js";
 import { DIAL_KIT_CLASS as o } from "../../constants/public-class-names.js";
-const d = ({
+const f = ({
   size: e = 40,
-  className: s,
+  className: i,
   fullWidth: t = !1,
-  ariaLabel: i = "Loading"
-}) => /* @__PURE__ */ r(
+  fullScreen: a = !1,
+  ariaLabel: n = "Loading",
+  focusRef: r
+}) => /* @__PURE__ */ s(
   "div",
   {
     role: "status",
-    className: n(
+    className: l(
       "flex items-center justify-center",
       { "size-full": t },
-      s,
+      { "fixed inset-0 z-popup bg-layer-base": a },
+      i,
       o.spinner
     ),
-    children: /* @__PURE__ */ r(
+    children: /* @__PURE__ */ s(
       "div",
       {
+        ref: r,
+        tabIndex: r ? -1 : void 0,
         role: "img",
-        "aria-label": i,
+        "aria-label": n,
         style: { width: e, height: e },
         className: "rounded-full border-2 border-secondary border-t-accent animate-spin-steps shrink-0"
       }
@@ -28,5 +33,5 @@ const d = ({
   }
 );
 export {
-  d as Spinner
+  f as Spinner
 };

package/dist/components-manifest.json

@@ -1,6 +1,6 @@
 {
-  "version": "0.16.0-dev.62",
-  "generatedAt": "2026-11-02T12:21:52.558Z",
+  "version": "0.16.0-dev.66",
+  "generatedAt": "2026-11-02T14:50:07.690Z",
   "kit": {
     "name": "@epam/ai-dial-ui-kit",
     "description": "A modern UI kit for building AI DIAL interfaces with React",
@@ -27,27 +27,46 @@
           "name": "size",
           "type": "number",
           "required": false,
-          "defaultValue": "40"
+          "defaultValue": "40",
+          "description": "Ring diameter in px."
         },
         {
           "name": "className",
           "type": "string",
-          "required": false
+          "required": false,
+          "description": "Additional container classes."
         },
         {
           "name": "fullWidth",
           "type": "boolean",
           "required": false,
-          "defaultValue": "false"
+          "defaultValue": "false",
+          "description": "Stretches the container to its parent's width and height."
+        },
+        {
+          "name": "fullScreen",
+          "type": "boolean",
+          "required": false,
+          "defaultValue": "false",
+          "description": "Covers the whole viewport with the ring centred."
         },
         {
           "name": "ariaLabel",
           "type": "string",
           "required": false,
-          "defaultValue": "'Loading'"
+          "defaultValue": "'Loading'",
+          "description": "Accessible label for screen readers."
+        },
+        {
+          "name": "focusRef",
+          "type": "Ref<HTMLDivElement>",
+          "required": false,
+          "description": "Makes the ring focusable and points this ref at it."
         }
       ],
-      "examples": [],
+      "examples": [
+        "<Spinner fullScreen size={48} ariaLabel=\"Checking your session…\" />"
+      ],
       "sourceFile": "components/Spinner/Spinner.tsx"
     },
     {
@@ -553,6 +572,18 @@
           "required": false,
           "defaultValue": "true",
           "description": "`time` mode only: shows a clock button that opens an hour/minute list popover next to the typeable field"
+        },
+        {
+          "name": "renderTimeField",
+          "type": "(props: CalendarTimeFieldRenderProps) => ReactNode",
+          "required": false,
+          "description": "`datetime` mode only: renders a custom control in place of the popover footer's time field; receives the `\"HH:mm\"` value, `onChange`, `onBlur`, `disabled`, `invalid`, `ariaLabel` and `timezoneLabel`"
+        },
+        {
+          "name": "pickerButtonClassName",
+          "type": "string",
+          "required": false,
+          "description": "`time` mode only: classes merged onto the clock button after its defaults, so a conflicting utility overrides them"
         }
       ],
       "examples": [
@@ -5860,6 +5891,73 @@
       ],
       "sourceFile": "components/New/StateScreen/StateScreen.tsx"
     },
+    {
+      "name": "ErrorBoundary",
+      "category": "Components_2_0",
+      "generation": "2.0",
+      "description": "Catches a render error in its subtree and replaces the subtree with a\nfull-container error screen that has one way out.\naliases: ErrorFallback|CrashScreen|ErrorPage|SomethingWentWrong|RootErrorBoundary\nDesign system 2.0\n\nThe fallback is a `StateScreen` with a warning badge and a `PrimaryButton`\nthat takes focus, since the control the user was on is gone. The crash is\nannounced through an assertive `LiveRegion` that is mounted with the\nboundary, before any error: a region mounted together with its message is\noften not read.\n\nThe button calls `onReset` and renders the children again, or reloads the\npage when `onReset` is omitted. `resetKeys` clears the error without a click.\nLike every React error boundary, it does not catch errors in event handlers,\nasync code or the boundary itself. All text comes from props.",
+      "props": [
+        {
+          "name": "children",
+          "type": "ReactNode",
+          "required": false,
+          "description": "The subtree to guard."
+        },
+        {
+          "name": "title",
+          "type": "ReactNode",
+          "required": true,
+          "description": "Headline of the fallback; also the announcement."
+        },
+        {
+          "name": "description",
+          "type": "ReactNode",
+          "required": false,
+          "description": "Optional line under the title."
+        },
+        {
+          "name": "actionLabel",
+          "type": "string",
+          "required": true,
+          "description": "Text of the recovery button."
+        },
+        {
+          "name": "onReset",
+          "type": "() => void",
+          "required": false,
+          "description": "Recovery handler; the page reloads without one."
+        },
+        {
+          "name": "resetKeys",
+          "type": "readonly unknown[]",
+          "required": false,
+          "description": "Values that clear the error when one of them changes."
+        },
+        {
+          "name": "onError",
+          "type": "(error: unknown, info: ErrorInfo) => void",
+          "required": false,
+          "description": "Called once per caught error."
+        },
+        {
+          "name": "icon",
+          "type": "ReactNode",
+          "required": false,
+          "defaultValue": "DEFAULT_ICON",
+          "description": "Glyph in the fallback badge; `null` drops it."
+        },
+        {
+          "name": "className",
+          "type": "string",
+          "required": false,
+          "description": "Additional CSS classes for the fallback screen."
+        }
+      ],
+      "examples": [
+        "<ErrorBoundary\n  title={t('error.title')}\n  description={t('error.description')}\n  actionLabel={t('error.reload')}\n  onError={(error) => logger.error(error)}\n>\n  <App />\n</ErrorBoundary>\n\n<ErrorBoundary\n  title={t('error.title')}\n  actionLabel={t('error.tryAgain')}\n  onReset={() => {}}\n  resetKeys={[pathname]}\n>\n  <SettingsPage />\n</ErrorBoundary>"
+      ],
+      "sourceFile": "components/New/ErrorBoundary/ErrorBoundary.tsx"
+    },
     {
       "name": "LoginScreen",
       "category": "Components_2_0",