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

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

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

@@ -0,0 +1,148 @@
+import { jsx as e, jsxs as c } from "react/jsx-runtime";
+import { useFloating as A, useRole as E, useDismiss as K, useInteractions as P, FloatingPortal as j, FloatingOverlay as M, FloatingFocusManager as R } from "@floating-ui/react";
+import { IconChevronLeft as B } from "@tabler/icons-react";
+import { useId as G } from "react";
+import { CloseButton as H } from "../CloseButton/CloseButton.js";
+import { DIAL_KIT_ICON_STROKE as Z } from "../constants/icon.js";
+import { GhostIconButton as $ } from "../IconButton/IconButtonWrappers.js";
+import { useThemeScope as q } from "../ThemeScope/ThemeScope.js";
+import { DIAL_ICON_SIZE as J } from "../../../constants/icon.js";
+import { DIAL_KIT_CLASS as Q } from "../../../constants/public-class-names.js";
+import { ElementSize as U } from "../../../types/size.js";
+import { mergeClasses as r } from "../../../utils/merge-classes.js";
+const ne = ({
+  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,
+  style: w,
+  overlayStyle: N,
+  bodyClassName: k,
+  titleClassName: F,
+  portalId: C
+}) => {
+  const D = q(), d = `side-drawer-title-${G()}`, s = typeof o == "string", { refs: m, context: a } = A({
+    open: t,
+    onOpenChange: (z) => {
+      z || l();
+    }
+  }), _ = E(a, { role: "dialog" }), L = K(a, { outsidePress: h }), { getFloatingProps: T } = P([_, L]), O = o != null || i != null || !n;
+  return /* @__PURE__ */ e(j, { id: C, children: /* @__PURE__ */ e(
+    M,
+    {
+      lockScroll: t,
+      style: N,
+      className: r(
+        "z-popup bg-backdrop transition-opacity duration-300 motion-reduce:transition-none",
+        t ? "opacity-100" : "pointer-events-none opacity-0",
+        D,
+        v
+      ),
+      children: /* @__PURE__ */ e(
+        R,
+        {
+          context: a,
+          disabled: !t,
+          initialFocus: m.floating,
+          children: /* @__PURE__ */ c(
+            "div",
+            {
+              ref: m.setFloating,
+              ...T(),
+              role: "dialog",
+              "aria-modal": "true",
+              "aria-labelledby": s ? d : void 0,
+              "aria-label": s ? void 0 : f,
+              inert: !t,
+              style: w,
+              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: [
+                O && /* @__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(
+                        $,
+                        {
+                          "aria-label": u,
+                          disabled: x,
+                          onClick: i,
+                          icon: /* @__PURE__ */ e(
+                            B,
+                            {
+                              size: J.MD,
+                              stroke: Z,
+                              className: "rtl:-scale-x-100",
+                              "aria-hidden": "true"
+                            }
+                          )
+                        }
+                      ),
+                      s ? /* @__PURE__ */ e(
+                        "h2",
+                        {
+                          id: d,
+                          className: r(
+                            "min-w-0 flex-1 truncate text-primary",
+                            F ?? "dial-h2-text"
+                          ),
+                          children: o
+                        }
+                      ) : /* @__PURE__ */ e("div", { className: "min-w-0 flex-1", children: o }),
+                      p,
+                      !n && /* @__PURE__ */ e(
+                        H,
+                        {
+                          ariaLabel: g,
+                          onClose: l,
+                          disabled: b,
+                          size: U.Standard
+                        }
+                      )
+                    ]
+                  }
+                ),
+                /* @__PURE__ */ e(
+                  "div",
+                  {
+                    className: r(
+                      "min-h-0 flex-1 overflow-y-auto",
+                      k
+                    ),
+                    children: y
+                  }
+                )
+              ]
+            }
+          )
+        }
+      )
+    }
+  ) });
+};
+export {
+  ne as SideDrawer
+};