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

package/dist/components/New/Breadcrumbs/Breadcrumbs.js

@@ -0,0 +1,159 @@
+import { jsx as a, jsxs as c, Fragment as x } from "react/jsx-runtime";
+import { IconDots as A } from "@tabler/icons-react";
+import { useMemo as u, useCallback as B } from "react";
+import { Dropdown as D } from "../Dropdown/Dropdown.js";
+import { EllipsisTooltip as w } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { DIAL_KIT_ICON_STROKE as F } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as y } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as b } from "../../../constants/public-class-names.js";
+import { BreadcrumbsSize as K } from "../../../types/breadcrumbs.js";
+import { mergeClasses as o } from "../../../utils/merge-classes.js";
+import { listClassName as O, overflowButtonClassName as j, defaultSeparator as z, separatorClassName as g, sizeClassName as I, itemClassName as S, navClassName as R, DEFAULT_MAX_VISIBLE_ITEMS as V, MIN_VISIBLE_ITEMS as W, linkSegmentClassName as P, staticSegmentClassName as U, currentSegmentClassName as X, currentSizeClassName as Z, segmentClassName as $, segmentWidthClassName as q } from "./constants.js";
+const te = ({
+  items: s,
+  maxVisibleItems: k = V,
+  size: i = K.Small,
+  separator: f = z,
+  ariaLabel: _ = "Breadcrumb",
+  overflowAriaLabel: M = "Show hidden path segments",
+  className: E,
+  itemClassName: L
+}) => {
+  const m = Math.max(k, W), n = u(
+    () => s.length > m ? s.slice(1, -(m - 2)) : [],
+    [s, m]
+  ), T = u(
+    () => n.map((e, l) => ({
+      key: String(l),
+      label: e.label,
+      icon: e.icon
+    })),
+    [n]
+  ), v = B(
+    ({ key: e, domEvent: l }) => {
+      const r = n[Number(e)];
+      r && (r.onClick?.(l), !r.onClick && r.href && !l.defaultPrevented && (window.location.href = r.href));
+    },
+    [n]
+  );
+  if (s.length === 0) return null;
+  const d = s.slice(n.length + 1), C = (e, {
+    index: l,
+    isFirst: r,
+    isCurrent: t
+  }) => {
+    const N = !t && (!!e.href || !!e.onClick), h = o(
+      $,
+      N ? P : t ? o(X, Z[i]) : U,
+      L,
+      b.breadcrumbsItem
+    ), p = /* @__PURE__ */ c(x, { children: [
+      e.icon,
+      /* @__PURE__ */ a(w, { text: e.label })
+    ] });
+    return /* @__PURE__ */ c(
+      "li",
+      {
+        className: o(
+          S,
+          I[i],
+          q[t ? "last" : r ? "first" : "middle"]
+        ),
+        children: [
+          N ? e.href ? /* @__PURE__ */ a(
+            "a",
+            {
+              href: e.href,
+              onClick: e.onClick,
+              className: h,
+              children: p
+            }
+          ) : /* @__PURE__ */ a(
+            "button",
+            {
+              type: "button",
+              onClick: e.onClick,
+              className: h,
+              children: p
+            }
+          ) : /* @__PURE__ */ a(
+            "span",
+            {
+              className: h,
+              "aria-current": t ? "page" : void 0,
+              children: p
+            }
+          ),
+          !t && /* @__PURE__ */ a("span", { className: g, "aria-hidden": "true", children: f })
+        ]
+      },
+      `segment-${l}`
+    );
+  };
+  return /* @__PURE__ */ a(
+    "nav",
+    {
+      "aria-label": _,
+      className: o(
+        R,
+        E,
+        b.breadcrumbs
+      ),
+      children: /* @__PURE__ */ c("ol", { className: O, children: [
+        C(s[0], {
+          index: 0,
+          isFirst: !0,
+          isCurrent: s.length === 1
+        }),
+        n.length > 0 && /* @__PURE__ */ c(
+          "li",
+          {
+            className: o(
+              S,
+              I[i],
+              "shrink-0"
+            ),
+            children: [
+              /* @__PURE__ */ a(
+                D,
+                {
+                  items: T,
+                  onItemClick: v,
+                  placement: "bottom-start",
+                  matchReferenceWidth: !1,
+                  children: /* @__PURE__ */ a(
+                    "button",
+                    {
+                      type: "button",
+                      "aria-label": M,
+                      className: j,
+                      children: /* @__PURE__ */ a(
+                        A,
+                        {
+                          size: y.SM,
+                          stroke: F,
+                          "aria-hidden": "true"
+                        }
+                      )
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ a("span", { className: g, "aria-hidden": "true", children: f })
+            ]
+          }
+        ),
+        d.map(
+          (e, l) => C(e, {
+            index: s.length - d.length + l,
+            isFirst: !1,
+            isCurrent: l === d.length - 1
+          })
+        )
+      ] })
+    }
+  );
+};
+export {
+  te as Breadcrumbs
+};

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

@@ -0,0 +1,41 @@
+import { jsx as t } from "react/jsx-runtime";
+import { IconChevronRight as s } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as n } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as i } from "../../../constants/icon.js";
+import { BreadcrumbsSize as e } from "../../../types/breadcrumbs.js";
+const c = "w-full overflow-hidden", f = "flex min-w-0 flex-nowrap items-center gap-2 whitespace-nowrap", u = "flex min-w-0 items-center gap-2", d = {
+  [e.Small]: "dial-small-text",
+  [e.Heading]: "dial-h2-text"
+}, x = {
+  [e.Small]: "dial-small-semi-text",
+  [e.Heading]: "dial-h2-text"
+}, N = {
+  first: "shrink-0",
+  middle: "min-w-0 max-w-[30%] shrink",
+  last: "min-w-0 max-w-[51%] shrink"
+}, p = "flex min-w-0 flex-1 items-center gap-1 rounded-sm transition-colors", C = "text-secondary hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", S = "cursor-default text-primary", h = "cursor-default text-secondary", I = "inline-flex flex-none items-center leading-none text-secondary", g = "dial-kit-minimum-target flex shrink-0 items-center rounded-sm text-secondary transition-colors hover:text-accent focus-visible:outline focus-visible:outline-offset-2 focus-visible:outline-focus", w = 3, v = 4, _ = /* @__PURE__ */ t(
+  s,
+  {
+    size: i.SM,
+    stroke: n,
+    "aria-hidden": "true",
+    className: "rtl:scale-x-[-1]"
+  }
+);
+export {
+  v as DEFAULT_MAX_VISIBLE_ITEMS,
+  w as MIN_VISIBLE_ITEMS,
+  S as currentSegmentClassName,
+  x as currentSizeClassName,
+  _ as defaultSeparator,
+  u as itemClassName,
+  C as linkSegmentClassName,
+  f as listClassName,
+  c as navClassName,
+  g as overflowButtonClassName,
+  p as segmentClassName,
+  N as segmentWidthClassName,
+  I as separatorClassName,
+  d as sizeClassName,
+  h as staticSegmentClassName
+};

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,100 @@
-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 r, jsxs as B, Fragment as f } from "react/jsx-runtime";
+import { useId as h } from "react";
+import { ButtonAppearance as n, ButtonVariant as o } from "../../../types/button.js";
+import { Button as d } from "./Button.js";
+const l = (a, t) => ({ appearance: s, ...u }) => /* @__PURE__ */ r(
+  d,
   {
-    ...e,
-    variant: n,
-    appearance: a || o
+    ...u,
+    variant: a,
+    appearance: s || t
   }
-), p = (n, o) => ({ variant: a, ...e }) => /* @__PURE__ */ i(
-  B,
+), p = (a, t) => ({ variant: s, ...u }) => /* @__PURE__ */ r(
+  d,
   {
-    ...e,
-    variant: a || o,
-    appearance: n
+    ...u,
+    variant: s || t,
+    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
+), N = l(
+  o.Primary,
+  n.Solid
+), C = l(
+  o.Neutral,
+  n.Solid
+), G = l(
+  o.Danger,
+  n.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)"
+}, O = ({
+  appearance: a = n.Outlined,
+  iconBefore: t,
+  iconAfter: i,
+  style: s,
+  ...u
+}) => {
+  const c = `dial-kit-starter-gradient-${h().replace(/[^\w-]/g, "")}`, g = /* @__PURE__ */ r(
+    "svg",
+    {
+      className: "pointer-events-none absolute size-0 overflow-hidden",
+      "aria-hidden": "true",
+      focusable: "false",
+      children: /* @__PURE__ */ r("defs", { children: /* @__PURE__ */ B(
+        "linearGradient",
+        {
+          id: c,
+          x1: e.x1,
+          y1: e.y1,
+          x2: e.x2,
+          y2: e.y2,
+          gradientUnits: "userSpaceOnUse",
+          children: [
+            /* @__PURE__ */ r("stop", { stopColor: e.from }),
+            /* @__PURE__ */ r("stop", { offset: "1", stopColor: e.to })
+          ]
+        }
+      ) })
+    }
+  ), m = (y) => /* @__PURE__ */ B(f, { children: [
+    g,
+    y
+  ] });
+  return /* @__PURE__ */ r(
+    d,
+    {
+      ...u,
+      variant: o.Starter,
+      appearance: a,
+      iconBefore: t ? m(t) : void 0,
+      iconAfter: i && !t ? m(i) : i,
+      style: {
+        "--dial-kit-starter-icon-stroke": `url(#${c})`,
+        ...s
+      }
+    }
+  );
+}, D = p(
+  n.Link,
+  o.Primary
+), I = p(
+  n.Ghost,
+  o.Primary
+), P = p(
+  n.Outlined,
+  o.Neutral
 );
 export {
-  P as DangerButton,
-  f as GhostButton,
-  W as LinkButton,
-  y as NeutralButton,
-  N as OutlinedButton,
-  d as PrimaryButton
+  G as DangerButton,
+  I as GhostButton,
+  D as LinkButton,
+  C as NeutralButton,
+  P as OutlinedButton,
+  N as PrimaryButton,
+  O 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,28 +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 { 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 B } from "./constants.js";
-const g = ({
+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(() => B(o), [o]);
-  return /* @__PURE__ */ r("div", { children: /* @__PURE__ */ r(h, { 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 {
-  g as ButtonDropdown
+  O as ButtonDropdown
 };