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

package/dist/components/New/FileName/FileName.js

@@ -0,0 +1,78 @@
+import { jsxs as a, jsx as e } from "react/jsx-runtime";
+import { EllipsisTooltip as T } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { FileIcon as g } from "../FileIcon/FileIcon.js";
+import { DIAL_KIT_CLASS as v } from "../../../constants/public-class-names.js";
+import { DialItemType as w } from "../../../types/item.js";
+import { mergeClasses as l } from "../../../utils/merge-classes.js";
+const D = ({
+  name: s,
+  type: o = w.File,
+  fileExtension: t,
+  shared: i = !1,
+  loading: m = !1,
+  loadingLabel: p,
+  iconSize: f,
+  details: r,
+  isInvalidName: c = !1,
+  className: n,
+  nameClassName: x,
+  sharedIndicatorClassName: d,
+  sharedIndicatorTooltip: N,
+  sharedLabel: h = "Shared",
+  hideTooltip: y = !1,
+  tooltipContent: I
+}) => /* @__PURE__ */ a(
+  "div",
+  {
+    className: l(
+      "flex w-full min-w-0 items-center gap-2",
+      n,
+      v.fileName
+    ),
+    children: [
+      /* @__PURE__ */ e(
+        g,
+        {
+          name: s,
+          type: o,
+          fileExtension: t,
+          shared: i,
+          loading: m,
+          loadingLabel: p,
+          size: f,
+          sharedIndicatorClassName: d,
+          sharedIndicatorTooltip: N,
+          decorative: !m
+        }
+      ),
+      /* @__PURE__ */ a(
+        "div",
+        {
+          className: l("flex min-w-0 flex-1", {
+            "flex-col gap-1": !!r
+          }),
+          children: [
+            /* @__PURE__ */ e(
+              T,
+              {
+                className: l(
+                  "dial-small-paragraph-text",
+                  c ? "text-secondary" : "text-primary",
+                  x
+                ),
+                text: s,
+                hideTooltip: y,
+                customTooltipContent: I
+              }
+            ),
+            i && /* @__PURE__ */ e("span", { className: "sr-only", children: h }),
+            r
+          ]
+        }
+      )
+    ]
+  }
+);
+export {
+  D as FileName
+};

package/dist/components/New/FilterChips/FilterChips.js

@@ -0,0 +1,43 @@
+import { jsx as e } from "react/jsx-runtime";
+import { Tag as b } from "../Tag/Tag.js";
+import { DIAL_KIT_CLASS as n } from "../../../constants/public-class-names.js";
+import { TagAppearance as f } from "../../../types/tag.js";
+import { mergeClasses as l } from "../../../utils/merge-classes.js";
+import { chipStretchClassName as C, containerClassName as d } from "./constants.js";
+const A = ({
+  items: r,
+  value: o,
+  onChange: i,
+  stretch: s = !1,
+  className: p,
+  chipClassName: c,
+  "aria-label": m,
+  "aria-labelledby": t
+}) => /* @__PURE__ */ e(
+  "div",
+  {
+    role: "group",
+    "aria-label": m,
+    "aria-labelledby": t,
+    className: l(
+      d,
+      p,
+      n.filterChips
+    ),
+    children: r.map((a) => /* @__PURE__ */ e(
+      b,
+      {
+        label: a.label,
+        icon: a.icon,
+        appearance: f.Selectable,
+        selected: a.value === o,
+        onClick: () => i(a.value),
+        className: l(s && C, c)
+      },
+      a.value
+    ))
+  }
+);
+export {
+  A as FilterChips
+};

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

@@ -0,0 +1,5 @@
+const e = "flex flex-nowrap items-center gap-1", t = "min-w-max flex-1 justify-center";
+export {
+  t as chipStretchClassName,
+  e as containerClassName
+};

package/dist/components/New/FolderName/FolderName.js

@@ -0,0 +1,16 @@
+import { jsx as o } from "react/jsx-runtime";
+import { FileName as r } from "../FileName/FileName.js";
+import { DIAL_KIT_CLASS as t } from "../../../constants/public-class-names.js";
+import { DialItemType as p } from "../../../types/item.js";
+import { mergeClasses as a } from "../../../utils/merge-classes.js";
+const d = ({ className: m, ...e }) => /* @__PURE__ */ o(
+  r,
+  {
+    ...e,
+    type: p.Folder,
+    className: a(m, t.folderName)
+  }
+);
+export {
+  d as FolderName
+};

package/dist/components/New/FolderPath/FolderPath.js

@@ -1,45 +1,46 @@
-import { jsx as e } from "react/jsx-runtime";
-import { IconFolder as p, IconChevronRight as I } from "@tabler/icons-react";
-import { DialBreadcrumb as f } from "../../Breadcrumb/Breadcrumb.js";
+import { jsx as r } from "react/jsx-runtime";
+import { IconFolder as I, IconChevronRight as f } from "@tabler/icons-react";
+import { DialBreadcrumb as h } from "../../Breadcrumb/Breadcrumb.js";
 import { DialIcon as t } from "../../Icon/Icon.js";
 import { DIAL_KIT_ICON_STROKE as s } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as h } from "../../../constants/icon.js";
-import { mergeClasses as x } from "../../../utils/merge-classes.js";
-const F = ({
-  segments: r,
-  labelClassName: l = "dial-small-text",
-  leafClassName: m = "dial-small-semi-text",
-  className: i,
-  ariaLabel: c = "Folder path"
+import { DIAL_ICON_SIZE as x } from "../../../constants/icon.js";
+import { mergeClasses as l } from "../../../utils/merge-classes.js";
+import { DIAL_KIT_CLASS as N } from "../../../constants/public-class-names.js";
+const y = ({
+  segments: e,
+  labelClassName: m = "dial-small-text",
+  leafClassName: i = "dial-small-semi-text",
+  className: c,
+  ariaLabel: d = "Folder path"
 }) => {
-  const n = /* @__PURE__ */ e(
+  const n = /* @__PURE__ */ r(
     t,
     {
-      icon: /* @__PURE__ */ e(
-        p,
+      icon: /* @__PURE__ */ r(
+        I,
         {
-          size: h.SM,
+          size: x.SM,
           stroke: s,
           "aria-hidden": "true"
         }
       ),
       className: "text-secondary"
     }
-  ), d = r.map((o, a) => ({
-    label: a === r.length - 1 ? /* @__PURE__ */ e("span", { className: m, children: o }) : o,
+  ), p = e.map((o, a) => ({
+    label: a === e.length - 1 ? /* @__PURE__ */ r("span", { className: i, children: o }) : o,
     disabled: !0,
     ...a === 0 ? { iconBefore: n } : {}
   }));
-  return /* @__PURE__ */ e(
-    f,
+  return /* @__PURE__ */ r(
+    h,
     {
-      className: i,
-      ariaLabel: c,
-      separator: /* @__PURE__ */ e(
+      className: l(c, N.folderPath),
+      ariaLabel: d,
+      separator: /* @__PURE__ */ r(
         t,
         {
-          icon: /* @__PURE__ */ e(
-            I,
+          icon: /* @__PURE__ */ r(
+            f,
             {
               size: 14,
               stroke: s,
@@ -50,9 +51,9 @@ const F = ({
           className: "text-secondary"
         }
       ),
-      pathItems: d,
-      labelClassName: x(
-        l,
+      pathItems: p,
+      labelClassName: l(
+        m,
         "text-secondary",
         "!cursor-default"
       )
@@ -60,5 +61,5 @@ const F = ({
   );
 };
 export {
-  F as FolderPath
+  y as FolderPath
 };

package/dist/components/New/Highlight/Highlight.js

@@ -1,50 +1,43 @@
-import { jsx as c, jsxs as h, Fragment as g } from "react/jsx-runtime";
-import { mergeClasses as s } from "../../../utils/merge-classes.js";
-import { EllipsisTooltip as t } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { jsx as a, jsxs as h, Fragment as g } from "react/jsx-runtime";
+import { mergeClasses as t } from "../../../utils/merge-classes.js";
+import { EllipsisTooltip as o } from "../EllipsisTooltip/EllipsisTooltip.js";
+import { DIAL_KIT_CLASS as C } from "../../../constants/public-class-names.js";
 const i = {
   2: "line-clamp-2",
   3: "line-clamp-3",
   4: "line-clamp-4",
   5: "line-clamp-5",
   6: "line-clamp-6"
-}, C = (e) => e === 1 ? "!truncate !whitespace-nowrap" : `${i[e] ?? i[2]} !whitespace-normal`, d = ({
+}, N = (e) => e === 1 ? "!truncate !whitespace-nowrap" : `${i[e] ?? i[2]} !whitespace-normal`, S = ({
   text: e,
-  query: a,
-  markClassName: m,
-  className: n,
+  query: s,
+  markClassName: n,
+  className: m,
   maxLines: r = 2
 }) => {
-  const o = C(r);
-  if (!a.trim())
-    return /* @__PURE__ */ c(
-      t,
-      {
-        className: s(o, n),
-        text: e
-      }
-    );
-  const l = e.toLowerCase().indexOf(a.toLowerCase()), p = l === -1 ? e : /* @__PURE__ */ h(g, { children: [
+  const c = t(
+    N(r),
+    m,
+    C.highlight
+  );
+  if (!s.trim())
+    return /* @__PURE__ */ a(o, { className: c, text: e });
+  const l = e.toLowerCase().indexOf(s.toLowerCase()), p = l === -1 ? e : /* @__PURE__ */ h(g, { children: [
     e.slice(0, l),
-    /* @__PURE__ */ c(
+    /* @__PURE__ */ a(
       "mark",
       {
-        className: s(
+        className: t(
           "text-accent bg-control-accent-alpha-hover",
-          m
+          n
         ),
-        children: e.slice(l, l + a.length)
+        children: e.slice(l, l + s.length)
       }
     ),
-    e.slice(l + a.length)
+    e.slice(l + s.length)
   ] });
-  return /* @__PURE__ */ c(
-    t,
-    {
-      className: s(o, n),
-      text: p
-    }
-  );
+  return /* @__PURE__ */ a(o, { className: c, text: p });
 };
 export {
-  d as Highlight
+  S as Highlight
 };

package/dist/components/New/IconButton/IconButton.js

@@ -1,46 +1,48 @@
-import { jsx as r } from "react/jsx-runtime";
-import { ButtonAppearance as b } from "../../../types/button.js";
-import { mergeClasses as u } from "../../../utils/merge-classes.js";
-import { resolveAccessibleName as p } from "../../../utils/accessible-name.js";
-import { ElementSize as t } from "../../../types/size.js";
-import { Tooltip as S } from "../Tooltip/Tooltip.js";
-import { getButtonClassNames as f } from "../Button/utils.js";
-const g = {
-  [t.Small]: "size-[24px]",
-  [t.Standard]: "size-[40px] dial-kit-enhanced-target",
-  [t.Large]: "size-[48px] dial-kit-enhanced-target"
-}, B = ({
-  variant: a,
-  appearance: n = b.Solid,
-  size: l = t.Standard,
+import { jsx as o } from "react/jsx-runtime";
+import { ButtonAppearance as u } from "../../../types/button.js";
+import { mergeClasses as S } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as f } from "../../../utils/accessible-name.js";
+import { ElementSize as e } from "../../../types/size.js";
+import { Tooltip as g } from "../Tooltip/Tooltip.js";
+import { getButtonClassNames as p, getDisabledButtonProps as C } from "../Button/utils.js";
+const h = {
+  [e.Small]: "size-[24px]",
+  [e.Standard]: "size-[40px] dial-kit-enhanced-target",
+  [e.Large]: "size-[48px] dial-kit-enhanced-target"
+}, I = ({
+  variant: i,
+  appearance: r = u.Solid,
+  size: l = e.Standard,
   className: m,
   icon: s,
-  tooltipProps: e,
+  tooltipProps: t,
   type: c = "button",
-  ...o
+  disabled: d,
+  ...a
 }) => {
-  const d = u(
+  const b = S(
     "dial-kit-base-icon-button dial-kit-base-button",
-    a && f(a, n),
+    i && p(i, r),
     // 24px is below the AAA target size, so only the larger tiers get the
     // enhanced pointer target — see the accessibility rules in AGENTS.md.
-    g[l],
+    h[l],
     m
-  ), i = /* @__PURE__ */ r(
+  ), n = /* @__PURE__ */ o(
     "button",
     {
-      ...o,
+      ...a,
+      ...C(d, t, a.onClick),
       type: c,
-      className: d,
-      "aria-label": p(
-        o["aria-label"],
-        e?.tooltip
+      className: b,
+      "aria-label": f(
+        a["aria-label"],
+        t?.tooltip
       ),
       children: s
     }
   );
-  return e ? /* @__PURE__ */ r(S, { asChild: !0, ...e, children: i }) : i;
+  return t ? /* @__PURE__ */ o(g, { asChild: !0, ...t, children: n }) : n;
 };
 export {
-  B as IconButton
+  I as IconButton
 };

package/dist/components/New/InfoButton/InfoButton.js

@@ -1,39 +1,41 @@
 import { jsx as t } from "react/jsx-runtime";
 import { IconInfoCircle as n } from "@tabler/icons-react";
 import { DIAL_KIT_ICON_STROKE as l } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as s } from "../../../constants/icon.js";
-import { ElementSize as m } from "../../../types/size.js";
+import { DIAL_ICON_SIZE as m } from "../../../constants/icon.js";
+import { ElementSize as s } from "../../../types/size.js";
 import { mergeClasses as a } from "../../../utils/merge-classes.js";
 import { IconButton as c } from "../IconButton/IconButton.js";
-const S = ({
+import { DIAL_KIT_CLASS as f } from "../../../constants/public-class-names.js";
+const b = ({
   caption: o,
-  onClick: e,
-  "aria-label": r
+  onClick: r,
+  "aria-label": e
 }) => {
   if (!o) return null;
   const i = a(
     "text-secondary hover:text-control-accent-hover active:text-control-accent-active",
-    "focus-visible:outline focus-visible:outline-focus"
+    "focus-visible:outline focus-visible:outline-focus",
+    f.infoButton
   );
   return /* @__PURE__ */ t(
     c,
     {
-      "aria-label": r,
+      "aria-label": e,
       className: i,
       icon: /* @__PURE__ */ t(
         n,
         {
-          size: s.SM,
+          size: m.SM,
           stroke: l,
           "aria-hidden": "true"
         }
       ),
-      onClick: e,
-      size: m.Small,
+      onClick: r,
+      size: s.Small,
       tooltipProps: { tooltip: o }
     }
   );
 };
 export {
-  S as InfoButton
+  b as InfoButton
 };

package/dist/components/New/InlineSelect/InlineSelect.js

@@ -1,96 +1,114 @@
-import { jsx as c, jsxs as y } from "react/jsx-runtime";
-import { IconChevronDown as N } from "@tabler/icons-react";
-import { useState as p, useMemo as D, useCallback as O } from "react";
-import { Dropdown as _ } from "../Dropdown/Dropdown.js";
-import { DIAL_KIT_ICON_STROKE as K } from "../constants/icon.js";
-import { DIAL_ICON_SIZE as E } from "../../../constants/icon.js";
-import { mergeClasses as f } from "../../../utils/merge-classes.js";
-import { ElementSize as T } from "../../../types/size.js";
-const j = ({
+import { jsx as s, jsxs as E } from "react/jsx-runtime";
+import { IconChevronDown as j } from "@tabler/icons-react";
+import { useState as b, useCallback as v, useMemo as w } from "react";
+import { Dropdown as z } from "../Dropdown/Dropdown.js";
+import { DIAL_KIT_ICON_STROKE as M } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as U } from "../../../constants/icon.js";
+import { mergeClasses as I } from "../../../utils/merge-classes.js";
+import { ElementSize as $ } from "../../../types/size.js";
+import { DIAL_KIT_CLASS as R } from "../../../constants/public-class-names.js";
+const Z = ({
   label: e,
-  size: a,
+  size: l,
   isOpen: n = !1,
+  labelClassName: a,
+  className: c,
   "aria-label": t,
-  ...r
+  ...m
 }) => {
-  const l = a === T.Small ? "h-[32px]" : "h-[40px] dial-kit-enhanced-target";
-  return /* @__PURE__ */ y(
+  const d = l === $.Small ? "h-[32px]" : "h-[40px] dial-kit-enhanced-target";
+  return /* @__PURE__ */ E(
     "button",
     {
       type: "button",
+      ...m,
       "aria-haspopup": "menu",
       "aria-expanded": n,
       "aria-label": t ? `${t} ${e}` : void 0,
-      className: f(
+      className: I(
         "dial-small-paragraph-text px-3 focus-visible:outline focus-visible:outline-focus",
         "flex items-center gap-1 rounded-full text-primary disabled:text-control-disable-primary",
         "hover:bg-control-accent-alpha-hover focus-visible:outline-offset-2 active:bg-control-accent-alpha-active",
-        l,
-        r.className
+        d,
+        c,
+        R.inlineSelect
       ),
-      ...r,
       children: [
-        e,
-        /* @__PURE__ */ c(
-          N,
+        /* @__PURE__ */ s("span", { className: a, children: e }),
+        /* @__PURE__ */ s(
+          j,
           {
-            size: E.MD,
-            stroke: K,
+            size: U.MD,
+            stroke: M,
             "aria-hidden": !0,
-            className: f("transition-transform", n && "rotate-180")
+            className: I("transition-transform", n && "rotate-180")
           }
         )
       ]
     }
   );
-}, Z = ({
+}, W = ({
   items: e,
-  selectedKey: a,
+  selectedKey: l,
   defaultSelectedKey: n,
-  onSelect: t,
-  size: r,
-  disabled: l,
-  placement: d = "bottom-end",
-  matchReferenceWidth: u = !1,
-  listClassName: b,
-  ariaLabel: h
+  onSelect: a,
+  size: c,
+  disabled: t,
+  placement: m = "bottom-end",
+  matchReferenceWidth: d = !1,
+  listClassName: C,
+  listStyle: S,
+  ariaLabel: g,
+  triggerClassName: x,
+  triggerLabelClassName: N,
+  open: p,
+  onOpenChange: u
 }) => {
-  const [v, I] = p(!1), [x, g] = p(
+  const [k, y] = b(!1), r = p !== void 0, O = r ? p : k, _ = v(
+    (o) => {
+      r || y(o), u?.(o);
+    },
+    [r, u]
+  ), [D, K] = b(
     n ?? e[0]?.key
-  ), s = a !== void 0, m = s ? a : x, C = D(() => {
-    const o = e.find((i) => i.key === m);
+  ), f = l !== void 0, h = f ? l : D, A = w(() => {
+    const o = e.find((i) => i.key === h);
     return o?.label ? String(o.label) : "";
-  }, [e, m]), S = O(
+  }, [e, h]), L = v(
     ({ key: o }) => {
-      const i = e.find((k) => k.key === o);
-      i && (s || g(o), t?.(i));
+      const i = e.find((T) => T.key === o);
+      i && (f || K(o), a?.(i));
     },
-    [e, s, t]
+    [e, f, a]
   );
-  return /* @__PURE__ */ c(
-    _,
+  return /* @__PURE__ */ s(
+    z,
     {
       items: e,
-      placement: d,
-      matchReferenceWidth: u,
-      listClassName: b,
-      disabled: l,
-      onOpenChange: I,
-      onItemClick: S,
-      children: /* @__PURE__ */ c(
-        j,
+      placement: m,
+      matchReferenceWidth: d,
+      listClassName: C,
+      listStyle: S,
+      disabled: t,
+      open: r ? p : void 0,
+      onOpenChange: _,
+      onItemClick: L,
+      children: /* @__PURE__ */ s(
+        Z,
         {
-          label: C,
-          size: r,
-          isOpen: v,
-          disabled: l,
-          "aria-label": h
+          label: A,
+          size: c,
+          isOpen: O,
+          disabled: t,
+          "aria-label": g,
+          className: x,
+          labelClassName: N
         }
       )
     }
   );
 };
 export {
-  Z as InlineSelect,
-  j as InlineSelectTrigger
+  W as InlineSelect,
+  Z as InlineSelectTrigger
 };