@epam/ai-dial-ui-kit 0.15.0-dev.9 → 0.15.0

package/dist/components/New/Button/Button.js

@@ -1,76 +1,76 @@
 import { jsx as t, jsxs as I, Fragment as j } from "react/jsx-runtime";
-import { DialIcon as u } from "../../Icon/Icon.js";
-import { ButtonAppearance as s } from "../../../types/button.js";
+import { DialIcon as f } from "../../Icon/Icon.js";
+import { ButtonAppearance as c } from "../../../types/button.js";
 import { ElementSize as o } from "../../../types/size.js";
 import { mergeClasses as y } from "../../../utils/merge-classes.js";
 import { resolveAccessibleName as A } from "../../../utils/accessible-name.js";
-import { Tooltip as F } from "../Tooltip/Tooltip.js";
-import { getButtonClassNames as L } from "./utils.js";
-const J = ({
+import { Tooltip as D } from "../Tooltip/Tooltip.js";
+import { getButtonClassNames as F, getDisabledButtonProps as L } from "./utils.js";
+const K = ({
   label: a,
-  variant: c,
-  appearance: l = s.Solid,
+  variant: s,
+  appearance: r = c.Solid,
   size: n = o.Standard,
   className: k,
-  textClassName: S,
-  iconAfter: g,
+  textClassName: g,
+  iconAfter: S,
   iconBefore: v,
-  type: N = "button",
-  tooltipProps: r,
+  type: C = "button",
+  tooltipProps: l,
   href: d,
-  target: p,
-  rel: C,
+  target: b,
+  rel: N,
   disabled: i,
   ...e
 }) => {
   const h = y(
     "dial-kit-base-button",
-    c && L(c, l),
+    s && F(s, r),
     n === o.Small ? "dial-tiny-semi-text" : "dial-small-paragraph-semi-text",
     n === o.Small ? "h-[24px] gap-1" : "h-[40px] gap-2",
     // Corner radius is themable per size — see the radius tokens in
     // `buttons.scss`; the standard radius comes from `dial-kit-base-button`.
     n === o.Small && "dial-kit-base-button-small",
-    l !== s.Link && (n === o.Small ? "px-2" : "px-4"),
+    r !== c.Link && (n === o.Small ? "px-2" : "px-4"),
     // A link-appearance button sits inline in text, where WCAG 2.5.5 exempts
     // it and an expanded target would overlap the surrounding copy.
-    n !== o.Small && l !== s.Link && "dial-kit-enhanced-target",
+    n !== o.Small && r !== c.Link && "dial-kit-enhanced-target",
     k
-  ), B = a ? void 0 : r?.tooltip, x = A(
+  ), B = a ? void 0 : l?.tooltip, p = A(
     typeof a == "string" ? a : void 0,
     e["aria-label"],
     B
-  ), b = /* @__PURE__ */ I(j, { children: [
-    /* @__PURE__ */ t(u, { icon: v }),
-    a && /* @__PURE__ */ t("span", { className: S, children: a }),
-    /* @__PURE__ */ t(u, { icon: g })
-  ] }), m = e, f = d !== void 0 ? /* @__PURE__ */ t(
+  ), u = /* @__PURE__ */ I(j, { children: [
+    /* @__PURE__ */ t(f, { icon: v }),
+    a && /* @__PURE__ */ t("span", { className: g, children: a }),
+    /* @__PURE__ */ t(f, { icon: S })
+  ] }), m = e, x = d !== void 0 ? /* @__PURE__ */ t(
     "a",
     {
       ...m,
       href: i ? void 0 : d,
-      target: p,
-      rel: C ?? (p === "_blank" ? "noopener noreferrer" : void 0),
+      target: b,
+      rel: N ?? (b === "_blank" ? "noopener noreferrer" : void 0),
       "aria-disabled": i || void 0,
       tabIndex: i ? -1 : m.tabIndex,
       onClick: i ? void 0 : m.onClick,
       className: h,
-      "aria-label": x,
-      children: b
+      "aria-label": p,
+      children: u
     }
   ) : /* @__PURE__ */ t(
     "button",
     {
       ...e,
-      type: N,
-      disabled: i,
+      ...L(i, l, e.onClick),
+      type: C,
       className: h,
-      "aria-label": x,
-      children: b
+      "aria-label": p,
+      children: u
     }
   );
-  return r ? /* @__PURE__ */ t(F, { asChild: !0, ...r, children: f }) : f;
+  return l ? /* @__PURE__ */ t(D, { asChild: !0, ...l, children: x }) : x;
 };
 export {
-  J as Button
+  K as Button
 };

package/dist/components/New/Button/ButtonWrappers.js

@@ -1,44 +1,110 @@
-import { jsx as i } from "react/jsx-runtime";
-import { ButtonAppearance as t, ButtonVariant as r } from "../../../types/button.js";
-import { Button as B } from "./Button.js";
-const u = (n, o) => ({ appearance: a, ...e }) => /* @__PURE__ */ i(
-  B,
+import { jsx as t, jsxs as B, Fragment as g } from "react/jsx-runtime";
+import { IconSparkles as y } from "@tabler/icons-react";
+import { useId as S } from "react";
+import { DIAL_KIT_ICON_STROKE as h } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as k } from "../../../constants/icon.js";
+import { ButtonAppearance as o, ButtonVariant as n } from "../../../types/button.js";
+import { Button as d } from "./Button.js";
+const p = (a, r) => ({ appearance: s, ...u }) => /* @__PURE__ */ t(
+  d,
   {
-    ...e,
-    variant: n,
-    appearance: a || o
+    ...u,
+    variant: a,
+    appearance: s || r
   }
-), p = (n, o) => ({ variant: a, ...e }) => /* @__PURE__ */ i(
-  B,
+), c = (a, r) => ({ variant: s, ...u }) => /* @__PURE__ */ t(
+  d,
   {
-    ...e,
-    variant: a || o,
-    appearance: n
+    ...u,
+    variant: s || r,
+    appearance: a
   }
-), d = u(
-  r.Primary,
-  t.Solid
-), y = u(
-  r.Neutral,
-  t.Solid
-), P = u(
-  r.Danger,
-  t.Solid
-), W = p(
-  t.Link,
-  r.Primary
-), f = p(
-  t.Ghost,
-  r.Primary
-), N = p(
-  t.Outlined,
-  r.Neutral
+), A = p(
+  n.Primary,
+  o.Solid
+), E = p(
+  n.Neutral,
+  o.Solid
+), R = p(
+  n.Danger,
+  o.Solid
+), e = {
+  x1: "-5.06",
+  y1: "2.26",
+  x2: "30.62",
+  y2: "22.63",
+  from: "var(--stroke-gradient-1, #5976E9)",
+  to: "var(--stroke-gradient-2, #885DF2)"
+}, x = /* @__PURE__ */ t(
+  y,
+  {
+    size: k.MD,
+    stroke: h,
+    "aria-hidden": !0
+  }
+), G = ({
+  appearance: a = o.Outlined,
+  iconBefore: r = x,
+  iconAfter: i,
+  style: s,
+  ...u
+}) => {
+  const l = `dial-kit-starter-gradient-${S().replace(/[^\w-]/g, "")}`, f = /* @__PURE__ */ t(
+    "svg",
+    {
+      className: "pointer-events-none absolute size-0 overflow-hidden",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ B(
+        "linearGradient",
+        {
+          id: l,
+          x1: e.x1,
+          y1: e.y1,
+          x2: e.x2,
+          y2: e.y2,
+          gradientUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ t("stop", { stopColor: e.from }),
+            /* @__PURE__ */ t("stop", { offset: "1", stopColor: e.to })
+          ]
+        }
+      ) })
+    }
+  ), m = (I) => /* @__PURE__ */ B(g, { children: [
+    f,
+    I
+  ] });
+  return /* @__PURE__ */ t(
+    d,
+    {
+      ...u,
+      variant: n.Starter,
+      appearance: a,
+      iconBefore: r ? m(r) : void 0,
+      iconAfter: i && !r ? m(i) : i,
+      style: {
+        "--dial-kit-starter-icon-stroke": `url(#${l})`,
+        ...s
+      }
+    }
+  );
+}, L = c(
+  o.Link,
+  n.Primary
+), P = c(
+  o.Ghost,
+  n.Primary
+), W = c(
+  o.Outlined,
+  n.Neutral
 );
 export {
-  P as DangerButton,
-  f as GhostButton,
-  W as LinkButton,
-  y as NeutralButton,
-  N as OutlinedButton,
-  d as PrimaryButton
+  R as DangerButton,
+  P as GhostButton,
+  L as LinkButton,
+  E as NeutralButton,
+  W as OutlinedButton,
+  A as PrimaryButton,
+  G as StarterButton
 };

package/dist/components/New/Button/constants.js

@@ -17,6 +17,9 @@ const o = {
   [i.Static]: {
     [t.Solid]: "dial-kit-static-solid-button"
   },
+  [i.Starter]: {
+    [t.Outlined]: "dial-kit-starter-outlined-button"
+  },
   // TODO: remove these once we have a design for the icon button variants
   [i.Success]: {},
   [i.Secondary]: {},

package/dist/components/New/Button/utils.js

@@ -1,11 +1,21 @@
-import { ButtonVariant as o, ButtonAppearance as a } from "../../../types/button.js";
-import { variantClassMap as i } from "./constants.js";
-const l = (t = o.Primary, r = a.Solid) => {
-  const n = i[t]?.[r];
-  return n || (console.warn(
-    `Could not find Button styles for variant: ${t} and appearance: ${r}. Using default primary solid button styles.`
-  ), i[o.Primary][a.Solid]);
+import { ButtonVariant as o, ButtonAppearance as r } from "../../../types/button.js";
+import { variantClassMap as a } from "./constants.js";
+const l = (t) => {
+  t.preventDefault();
+}, d = (t, n, i) => {
+  const e = n != null && !n.hideTooltip && n.tooltip != null && n.tooltip !== "";
+  return t && e ? {
+    disabled: void 0,
+    "aria-disabled": !0,
+    onClick: l
+  } : { disabled: t, onClick: i };
+}, c = (t = o.Primary, n = r.Solid) => {
+  const i = a[t]?.[n];
+  return i || (console.warn(
+    `Could not find Button styles for variant: ${t} and appearance: ${n}. Using default primary solid button styles.`
+  ), a[o.Primary][r.Solid]);
 };
 export {
-  l as getButtonClassNames
+  c as getButtonClassNames,
+  d as getDisabledButtonProps
 };

package/dist/components/New/ButtonDropdown/ButtonDropdown.js

@@ -1,29 +1,38 @@
 import { jsx as r } from "react/jsx-runtime";
-import { useState as s, useMemo as u } from "react";
-import { ButtonAppearance as d, ButtonVariant as c } from "../../../types/button.js";
-import { Button as f } from "../Button/Button.js";
-import { Dropdown as D } from "../Dropdown/Dropdown.js";
-import { getButtonChevron as h } from "./constants.js";
-import { DIAL_KIT_CLASS as l } from "../../../constants/public-class-names.js";
-const I = ({
+import { useState as u, useMemo as d } from "react";
+import { ButtonAppearance as c, ButtonVariant as f } from "../../../types/button.js";
+import { Button as D } from "../Button/Button.js";
+import { Dropdown as h } from "../Dropdown/Dropdown.js";
+import { getButtonChevron as l } from "./constants.js";
+import { DIAL_KIT_CLASS as w } from "../../../constants/public-class-names.js";
+const O = ({
   variant: n,
   appearance: t,
   items: e,
-  ...p
+  dropdownProps: p,
+  ...a
 }) => {
-  const [o, a] = s(!1), i = u(() => h(o), [o]);
-  return /* @__PURE__ */ r("div", { className: l.buttonDropdown, children: /* @__PURE__ */ r(D, { items: e, onOpenChange: (m) => a(m), children: /* @__PURE__ */ r(
-    f,
+  const [o, i] = u(!1), m = d(() => l(o), [o]);
+  return /* @__PURE__ */ r("div", { className: w.buttonDropdown, children: /* @__PURE__ */ r(
+    h,
     {
       ...p,
-      iconAfter: i,
-      variant: n || c.Primary,
-      appearance: t || d.Solid,
-      "aria-haspopup": "menu",
-      "aria-expanded": o
+      items: e,
+      onOpenChange: (s) => i(s),
+      children: /* @__PURE__ */ r(
+        D,
+        {
+          ...a,
+          iconAfter: m,
+          variant: n || f.Primary,
+          appearance: t || c.Solid,
+          "aria-haspopup": "menu",
+          "aria-expanded": o
+        }
+      )
     }
-  ) }) });
+  ) });
 };
 export {
-  I as ButtonDropdown
+  O as ButtonDropdown
 };

package/dist/components/New/Calendar/Calendar.js

@@ -173,9 +173,9 @@ const q = ({
       "div",
       {
         className: d(
-          E.calendar,
           "flex flex-col gap-y-3",
-          f
+          f,
+          E.calendar
         ),
         children: [
           _,
@@ -203,9 +203,9 @@ const q = ({
       "div",
       {
         className: d(
-          E.calendar,
           "flex flex-col gap-y-3",
-          f
+          f,
+          E.calendar
         ),
         children: [
           _,
@@ -275,9 +275,9 @@ const q = ({
     "div",
     {
       className: d(
-        E.calendar,
         "flex flex-col gap-y-3",
-        f
+        f,
+        E.calendar
       ),
       children: [
         _,

package/dist/components/New/Calendar/constants.js

@@ -3,18 +3,18 @@ import { IconChevronRight as o, IconChevronLeft as n, IconCalendar as l } from "
 import { DIAL_KIT_ICON_STROKE as r } from "../constants/icon.js";
 import { DIAL_ICON_SIZE as t } from "../../../constants/icon.js";
 import { CalendarMode as e } from "../../../types/calendar.js";
-const u = "en-GB", x = {
+const u = "en-GB", f = {
   [e.Date]: "Select date",
   [e.DateTime]: "Select date and time",
   [e.Time]: "--:--",
   [e.Weekday]: "Select day"
-}, f = (
+}, x = (
   // TODO: check after design review for input
   "flex w-full items-center justify-between gap-2 rounded-xl border border-secondary bg-layer-raised px-4 py-3 dial-small-text text-primary outline-none transition-colors hover:border-accent-alpha focus-within:border-accent-focus"
 ), y = (
   // TODO: check after design review for input
   "!cursor-not-allowed !border-transparent bg-layer-sunken text-control-disable-primary hover:!border-transparent"
-), b = "!border-error", C = "z-[53] flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md", h = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-none focus-visible:outline focus-visible:outline-focus", N = "bg-control-accent text-control-permanent", v = "text-accent dial-small-semi-text", D = "text-control-disable-primary", s = "text-secondary", I = /* @__PURE__ */ a(
+), b = "!border-error", C = "z-floating flex w-[248px] flex-col gap-4 rounded-lg bg-layer-raised px-2 py-4 shadow-md", h = "flex size-10 items-center justify-center rounded-full dial-small-text text-primary hover:bg-control-accent-alpha-hover hover:text-primary focus:outline-none focus-visible:outline focus-visible:outline-focus", N = "bg-control-accent text-control-permanent", v = "text-accent dial-small-semi-text", D = "text-control-disable-primary", s = "text-secondary", I = /* @__PURE__ */ a(
   l,
   {
     size: t.MD,
@@ -46,12 +46,12 @@ export {
   D as calendarDayOutsideClassName,
   N as calendarDaySelectedClassName,
   v as calendarDayTodayClassName,
-  f as calendarFieldBaseClassName,
+  x as calendarFieldBaseClassName,
   y as calendarFieldDisabledClassName,
   s as calendarFieldIconClassName,
   b as calendarFieldInvalidClassName,
   I as calendarIcon,
-  x as calendarModeDefaultPlaceholder,
+  f as calendarModeDefaultPlaceholder,
   g as calendarNavIcons,
   C as calendarPopoverClassName
 };

package/dist/components/New/CaptionText/CaptionText.js

@@ -13,11 +13,11 @@ const a = ({
     ...p,
     role: "alert",
     className: s(
-      e.captionText,
-      o === t.Error && e.errorText,
       "dial-tiny-text",
       o === t.Error ? "text-error" : "text-secondary",
-      i
+      i,
+      e.captionText,
+      o === t.Error && e.errorText
     ),
     children: r
   }

package/dist/components/New/CardShell/CardShell.js

@@ -11,10 +11,10 @@ const m = ({
   {
     ...o,
     className: t(
-      s.cardShell,
       "relative flex flex-col gap-3 rounded-[20px] border-2 border-transparent p-5",
       "bg-layer-raised shadow-md transition-[transform,box-shadow] duration-200 ease-out hover:-translate-y-[3px] hover:shadow-lg motion-reduce:transition-none motion-reduce:hover:translate-y-0",
-      r
+      r,
+      s.cardShell
     ),
     children: e
   }

package/dist/components/New/Checkbox/Checkbox.js

@@ -35,9 +35,9 @@ const D = ({
       "div",
       {
         className: f(
-          L.checkbox,
           "flex items-center gap-2",
-          y
+          y,
+          L.checkbox
         ),
         children: [
           /* @__PURE__ */ c(

package/dist/components/New/Checkbox/CheckboxBox.js

@@ -12,7 +12,6 @@ const v = ({
   className: m
 }) => {
   const o = c || n, e = !!s, l = b(
-    f.checkboxBox,
     "grid size-[20px] shrink-0 place-items-center rounded border transition-colors duration-200",
     // 20px is below the 24x24 minimum target, so grow the pointer target
     // without touching the rendered size. The 44px enhanced target would
@@ -27,7 +26,8 @@ const v = ({
       !r && !o && "border-default bg-control-neutral hover:border-accent hover:bg-control-accent-alpha-hover"
     ),
     a ? "cursor-not-allowed" : e && "cursor-pointer",
-    m
+    m,
+    f.checkboxBox
   ), i = c ? /* @__PURE__ */ t(u, { ...p }) : n && /* @__PURE__ */ t(d, { ...p });
   return e ? /* @__PURE__ */ t("label", { htmlFor: s, className: l, children: i }) : /* @__PURE__ */ t("span", { "aria-hidden": "true", className: l, children: i });
 };

package/dist/components/New/CloseButton/CloseButton.js

@@ -18,7 +18,7 @@ const B = ({
     ...s,
     size: o,
     "aria-label": e,
-    className: f(p.closeButton, i),
+    className: f(i, p.closeButton),
     onClick: l,
     icon: /* @__PURE__ */ r(
       n,

package/dist/components/New/CollapsibleSidebar/CollapsibleSidebar.js

@@ -35,9 +35,9 @@ const P = 48, J = ({
       "aria-label": u,
       style: { width: `${e ? f : b}px` },
       className: r(
-        K.collapsibleSidebar,
         "flex flex-col justify-between",
-        y
+        y,
+        K.collapsibleSidebar
       ),
       children: [
         /* @__PURE__ */ t(

package/dist/components/New/ConfirmationPopup/ConfirmationPopup.js

@@ -6,13 +6,13 @@ import { Popup as A } from "../Popup/Popup.js";
 import { Spinner as _ } from "../../Spinner/Spinner.js";
 import { ConfirmationPopupVariant as D } from "../../../types/confirmation-popup.js";
 import { PopupSize as F } from "../../../types/popup.js";
-import { mergeClasses as s } from "../../../utils/merge-classes.js";
-import { actionsBaseClassName as K, defaultCancelLabel as L, defaultConfirmLabel as T, variantConfig as t, loaderContainerClassName as V, descriptionBaseClassName as q } from "./constants.js";
+import { mergeClasses as f } from "../../../utils/merge-classes.js";
+import { actionsBaseClassName as K, defaultCancelLabel as L, defaultConfirmLabel as T, variantConfig as s, loaderContainerClassName as V, descriptionBaseClassName as q } from "./constants.js";
 import { DIAL_KIT_CLASS as w } from "../../../constants/public-class-names.js";
 const X = ({
   header: p,
-  description: e,
-  descriptionClassName: l,
+  description: a,
+  descriptionClassName: m,
   open: u = !1,
   confirmLabel: c = T,
   cancelLabel: C = L,
@@ -20,13 +20,13 @@ const X = ({
   disableConfirmButton: d = !1,
   className: N,
   confirmClassName: b,
-  onClose: n,
+  onClose: t,
   onConfirm: v,
-  onCancel: i,
-  children: a,
-  variant: m = D.Info,
+  onCancel: l,
+  children: e,
+  variant: n = D.Info,
   size: P = F.Sm,
-  footer: f,
+  footer: i,
   hideClose: S,
   ...B
 }) => {
@@ -35,45 +35,41 @@ const X = ({
       z,
       {
         label: C,
-        onClick: () => i ? i() : n?.()
+        onClick: () => l ? l() : t?.()
       }
     ),
     /* @__PURE__ */ r(
       j,
       {
-        variant: t[m].confirm.variant,
-        appearance: t[m].confirm.appearance,
+        variant: s[n].confirm.variant,
+        appearance: s[n].confirm.appearance,
         className: b,
         label: c,
         disabled: d,
         onClick: v
       }
     )
-  ] }), k = I(() => o ? /* @__PURE__ */ r("div", { className: V, children: /* @__PURE__ */ r(_, { size: 40 }) }) : a ?? (e ? /* @__PURE__ */ r(
+  ] }), k = I(() => o ? /* @__PURE__ */ r("div", { className: V, children: /* @__PURE__ */ r(_, { size: 40 }) }) : e ?? (a ? /* @__PURE__ */ r(
     "div",
     {
-      className: s(
+      className: f(
         q,
-        l
+        m
       ),
-      children: e
+      children: a
     }
-  ) : null), [a, e, o, l]);
+  ) : null), [e, a, o, m]);
   return /* @__PURE__ */ r(
     A,
     {
       ...B,
       open: u,
       header: p,
-      className: s(
-        w.confirmationPopup,
-        t[m].container,
-        N
-      ),
-      onClose: () => n?.(),
-      footer: f ?? h,
+      className: f(N, w.confirmationPopup),
+      onClose: () => t?.(),
+      footer: i ?? h,
       size: P,
-      hideClose: S ?? (!o && f === void 0),
+      hideClose: S ?? (!o && i === void 0),
       children: k()
     }
   );

package/dist/components/New/ConfirmationPopup/constants.js

@@ -1,24 +1,21 @@
-import { ButtonAppearance as a, ButtonVariant as r } from "../../../types/button.js";
-import { ConfirmationPopupVariant as e } from "../../../types/confirmation-popup.js";
-const t = "flex justify-end gap-2 px-6 py-4 border-t border-tertiary", i = "text-secondary dial-small-paragraph-text px-6 pb-4", p = "px-6 py-4 h-[120px]", s = "Cancel", c = "Ok", l = {
-  [e.Info]: {
+import { ButtonAppearance as a, ButtonVariant as n } from "../../../types/button.js";
+import { ConfirmationPopupVariant as r } from "../../../types/confirmation-popup.js";
+const o = "flex justify-end gap-2 px-6 py-4 border-t border-tertiary", i = "text-secondary dial-small-paragraph-text px-6 pb-4", p = "px-6 py-4 h-[120px]", s = "Cancel", c = "Ok", l = {
+  [r.Info]: {
     confirm: {
-      variant: r.Primary,
+      variant: n.Primary,
       appearance: a.Solid
     }
   },
-  [e.Danger]: {
-    // Utilities rather than the legacy `.dial-danger-popup` SCSS rule, which is
-    // scoped as `div .dial-danger-popup` and only lands by accident of nesting.
-    container: "border-t-4 border-error",
+  [r.Danger]: {
     confirm: {
-      variant: r.Danger,
+      variant: n.Danger,
       appearance: a.Solid
     }
   }
 };
 export {
-  t as actionsBaseClassName,
+  o as actionsBaseClassName,
   s as defaultCancelLabel,
   c as defaultConfirmLabel,
   i as descriptionBaseClassName,