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

package/dist/components/New/Avatar/Avatar.js

@@ -0,0 +1,70 @@
+import { jsx as a } from "react/jsx-runtime";
+import { useState as C } from "react";
+import { DIAL_KIT_CLASS as b } from "../../../constants/public-class-names.js";
+import { AvatarShape as d } from "../../../types/avatar.js";
+import { pickAvatarColor as w, extractInitials as I } from "../../../utils/avatar.js";
+import { mergeClasses as e } from "../../../utils/merge-classes.js";
+const N = {
+  [d.Circle]: "rounded-full",
+  [d.Square]: "rounded-md"
+}, E = ({
+  name: s,
+  initials: c,
+  src: r,
+  alt: t = "",
+  size: o = 32,
+  shape: f = d.Circle,
+  className: h,
+  textClassName: l,
+  onImageError: u
+}) => {
+  const [S, p] = C(), v = !!r && S !== r, i = t !== "", m = (n) => e(
+    "inline-flex shrink-0 select-none items-center justify-center overflow-hidden",
+    N[f],
+    n,
+    h,
+    b.avatar
+  );
+  if (v)
+    return /* @__PURE__ */ a(
+      "img",
+      {
+        src: r,
+        alt: t,
+        width: o,
+        height: o,
+        className: e(m(), "object-cover"),
+        onError: (n) => {
+          p(r), u?.(n);
+        }
+      }
+    );
+  const { background: g, foreground: A } = w(s);
+  return /* @__PURE__ */ a(
+    "span",
+    {
+      role: i ? "img" : void 0,
+      "aria-label": i ? t : void 0,
+      "aria-hidden": i ? void 0 : !0,
+      className: m(e(g, A)),
+      style: {
+        width: o,
+        height: o,
+        fontSize: l ? void 0 : Math.round(o * 0.4)
+      },
+      children: /* @__PURE__ */ a(
+        "span",
+        {
+          className: e(
+            "leading-none",
+            l ?? "font-semibold"
+          ),
+          children: c ?? I(s)
+        }
+      )
+    }
+  );
+};
+export {
+  E as Avatar
+};

package/dist/components/New/Badge/Badge.js

@@ -0,0 +1,45 @@
+import { jsxs as g, jsx as i } from "react/jsx-runtime";
+import { DIAL_KIT_CLASS as m } from "../../../constants/public-class-names.js";
+import { BadgeVariant as t, BadgeColor as e } from "../../../types/badge.js";
+import { mergeClasses as x } from "../../../utils/merge-classes.js";
+const b = {
+  [e.Blue]: "bg-blue text-blue",
+  [e.Green]: "bg-green-2 text-green-1",
+  [e.Violet]: "bg-violet-2 text-violet-1",
+  [e.Indigo]: "bg-violet-1 text-violet-2",
+  [e.Brown]: "bg-brown text-brown-2",
+  [e.Red]: "bg-red text-red"
+}, c = {
+  [t.Outlined]: "rounded-md border border-tertiary bg-layer-sunken text-secondary",
+  [t.Filled]: "rounded-full"
+}, p = {
+  [t.Outlined]: "dial-tiny-text",
+  [t.Filled]: "dial-caption-lead-semi-text"
+}, L = ({
+  label: n,
+  variant: r = t.Outlined,
+  color: d = e.Blue,
+  icon: l,
+  textClassName: o,
+  className: s,
+  ...a
+}) => /* @__PURE__ */ g(
+  "span",
+  {
+    ...a,
+    className: x(
+      "inline-flex h-6 w-fit shrink-0 items-center gap-1 whitespace-nowrap px-2",
+      c[r],
+      r === t.Filled && b[d],
+      s,
+      m.badge
+    ),
+    children: [
+      l && /* @__PURE__ */ i("span", { className: "flex shrink-0 items-center", "aria-hidden": "true", children: l }),
+      /* @__PURE__ */ i("span", { className: o ?? p[r], children: n })
+    ]
+  }
+);
+export {
+  L as Badge
+};

package/dist/components/New/BottomSheet/BottomSheet.js

@@ -0,0 +1,114 @@
+import { jsx as e, jsxs as m } from "react/jsx-runtime";
+import { useFloating as C, useRole as L, useDismiss as _, useInteractions as k, FloatingPortal as A, FloatingOverlay as O, FloatingFocusManager as w } from "@floating-ui/react";
+import { IconArrowLeft as z } from "@tabler/icons-react";
+import { useId as D } from "react";
+import { CloseButton as T } from "../CloseButton/CloseButton.js";
+import { DIAL_KIT_ICON_STROKE as j } from "../constants/icon.js";
+import { GhostIconButton as B } from "../IconButton/IconButtonWrappers.js";
+import { useThemeScope as E } from "../ThemeScope/ThemeScope.js";
+import { DIAL_ICON_SIZE as K } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as P } from "../../../constants/public-class-names.js";
+import { ElementSize as G } from "../../../types/size.js";
+import { mergeClasses as t } from "../../../utils/merge-classes.js";
+const Y = ({
+  open: i,
+  onClose: a,
+  title: o,
+  ariaLabel: c,
+  onBack: s,
+  backAriaLabel: d = "Back",
+  closeAriaLabel: u = "Close",
+  closeOnOutsideClick: f = !0,
+  children: p,
+  className: h,
+  overlayClassName: b,
+  bodyClassName: g,
+  titleClassName: x,
+  portalId: I
+}) => {
+  const S = E(), l = `bottom-sheet-title-${D()}`, { refs: n, context: r } = C({
+    open: i,
+    onOpenChange: (F) => {
+      F || a();
+    }
+  }), N = L(r, { role: "dialog" }), v = _(r, { outsidePress: f }), { getFloatingProps: y } = k([N, v]);
+  return i ? /* @__PURE__ */ e(A, { id: I, children: /* @__PURE__ */ e(
+    O,
+    {
+      lockScroll: !0,
+      className: t(
+        "z-popup flex items-end bg-backdrop",
+        S,
+        b
+      ),
+      children: /* @__PURE__ */ e(w, { context: r, initialFocus: n.floating, children: /* @__PURE__ */ m(
+        "div",
+        {
+          ref: n.setFloating,
+          ...y(),
+          role: "dialog",
+          "aria-modal": "true",
+          "aria-labelledby": o ? l : void 0,
+          "aria-label": o ? void 0 : c,
+          className: t(
+            "flex max-h-[85dvh] w-full flex-col rounded-t-lg bg-layer-raised outline-none",
+            "animate-slideUp motion-reduce:animate-none",
+            h,
+            P.bottomSheet
+          ),
+          children: [
+            o && /* @__PURE__ */ m("div", { className: "relative flex h-[60px] shrink-0 items-center justify-center border-b border-tertiary px-14", children: [
+              s && /* @__PURE__ */ e(
+                B,
+                {
+                  "aria-label": d,
+                  className: "absolute start-4",
+                  onClick: s,
+                  icon: /* @__PURE__ */ e(
+                    z,
+                    {
+                      size: K.LG,
+                      stroke: j,
+                      className: "rtl:-scale-x-100",
+                      "aria-hidden": "true"
+                    }
+                  )
+                }
+              ),
+              /* @__PURE__ */ e(
+                "h2",
+                {
+                  id: l,
+                  className: t(
+                    "min-w-0 truncate text-primary",
+                    x ?? "dial-body-semi-text"
+                  ),
+                  children: o
+                }
+              ),
+              /* @__PURE__ */ e(
+                T,
+                {
+                  ariaLabel: u,
+                  onClose: a,
+                  size: G.Standard,
+                  className: "absolute end-4"
+                }
+              )
+            ] }),
+            /* @__PURE__ */ e(
+              "div",
+              {
+                className: t("min-h-0 overflow-y-auto", g),
+                children: p
+              }
+            )
+          ]
+        }
+      ) })
+    }
+  ) }) : null;
+};
+export {
+  Y as BottomSheet
+};

package/dist/components/New/SideDrawer/SideDrawer.js

@@ -0,0 +1,144 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useFloating as O, useRole as z, useDismiss as A, useInteractions as E, FloatingPortal as K, FloatingOverlay as P, FloatingFocusManager as j } from "@floating-ui/react";
+import { IconChevronLeft as M } from "@tabler/icons-react";
+import { useId as R } from "react";
+import { CloseButton as B } from "../CloseButton/CloseButton.js";
+import { DIAL_KIT_ICON_STROKE as G } from "../constants/icon.js";
+import { GhostIconButton as H } from "../IconButton/IconButtonWrappers.js";
+import { useThemeScope as Z } from "../ThemeScope/ThemeScope.js";
+import { DIAL_ICON_SIZE as $ } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as q } from "../../../constants/public-class-names.js";
+import { ElementSize as J } from "../../../types/size.js";
+import { mergeClasses as r } from "../../../utils/merge-classes.js";
+const ae = ({
+  open: t,
+  onClose: l,
+  header: o,
+  ariaLabel: f,
+  headerActions: p,
+  onBack: i,
+  backAriaLabel: u = "Back",
+  backDisabled: x = !1,
+  closeAriaLabel: g = "Close",
+  closeDisabled: b = !1,
+  hideClose: n = !1,
+  closeOnOutsideClick: h = !0,
+  children: y,
+  className: I,
+  overlayClassName: v,
+  headerClassName: S,
+  bodyClassName: w,
+  titleClassName: N,
+  portalId: k
+}) => {
+  const F = Z(), d = `side-drawer-title-${R()}`, s = typeof o == "string", { refs: m, context: a } = O({
+    open: t,
+    onOpenChange: (T) => {
+      T || l();
+    }
+  }), C = z(a, { role: "dialog" }), D = A(a, { outsidePress: h }), { getFloatingProps: _ } = E([C, D]), L = o != null || i != null || !n;
+  return /* @__PURE__ */ e(K, { id: k, children: /* @__PURE__ */ e(
+    P,
+    {
+      lockScroll: t,
+      className: r(
+        "z-popup bg-backdrop transition-opacity duration-300 motion-reduce:transition-none",
+        t ? "opacity-100" : "pointer-events-none opacity-0",
+        F,
+        v
+      ),
+      children: /* @__PURE__ */ e(
+        j,
+        {
+          context: a,
+          disabled: !t,
+          initialFocus: m.floating,
+          children: /* @__PURE__ */ c(
+            "div",
+            {
+              ref: m.setFloating,
+              ..._(),
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": s ? d : void 0,
+              "aria-label": s ? void 0 : f,
+              inert: !t,
+              className: r(
+                "fixed inset-y-0 end-0 flex w-full flex-col overflow-hidden bg-layer-raised outline-none",
+                "desktop:w-[540px] desktop:rounded-s-xl desktop:border-s desktop:border-secondary",
+                "transition-transform duration-300 motion-reduce:transition-none",
+                t ? "translate-x-0" : "translate-x-full rtl:-translate-x-full",
+                I,
+                q.sideDrawer
+              ),
+              children: [
+                L && /* @__PURE__ */ c(
+                  "div",
+                  {
+                    className: r(
+                      "flex shrink-0 items-center gap-2 border-b border-tertiary px-6 py-3",
+                      S
+                    ),
+                    children: [
+                      i && /* @__PURE__ */ e(
+                        H,
+                        {
+                          "aria-label": u,
+                          disabled: x,
+                          onClick: i,
+                          icon: /* @__PURE__ */ e(
+                            M,
+                            {
+                              size: $.MD,
+                              stroke: G,
+                              className: "rtl:-scale-x-100",
+                              "aria-hidden": "true"
+                            }
+                          )
+                        }
+                      ),
+                      s ? /* @__PURE__ */ e(
+                        "h2",
+                        {
+                          id: d,
+                          className: r(
+                            "min-w-0 flex-1 truncate text-primary",
+                            N ?? "dial-h2-text"
+                          ),
+                          children: o
+                        }
+                      ) : /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: o }),
+                      p,
+                      !n && /* @__PURE__ */ e(
+                        B,
+                        {
+                          ariaLabel: g,
+                          onClose: l,
+                          disabled: b,
+                          size: J.Standard
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: r(
+                      "min-h-0 flex-1 overflow-y-auto",
+                      w
+                    ),
+                    children: y
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+};
+export {
+  ae as SideDrawer
+};