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

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

@@ -0,0 +1,57 @@
+import { jsx as a } from "react/jsx-runtime";
+import { IconChevronRight as o, IconChevronLeft as n, IconCalendar as l } from "@tabler/icons-react";
+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 = {
+  [e.Date]: "Select date",
+  [e.DateTime]: "Select date and time",
+  [e.Time]: "--:--",
+  [e.Weekday]: "Select day"
+}, f = (
+  // 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(
+  l,
+  {
+    size: t.MD,
+    stroke: r,
+    "aria-hidden": "true",
+    className: s
+  }
+), g = {
+  prev: /* @__PURE__ */ a(
+    n,
+    {
+      size: t.SM,
+      stroke: r,
+      "aria-hidden": "true"
+    }
+  ),
+  next: /* @__PURE__ */ a(
+    o,
+    {
+      size: t.SM,
+      stroke: r,
+      "aria-hidden": "true"
+    }
+  )
+};
+export {
+  u as DEFAULT_CALENDAR_LOCALE,
+  h as calendarDayButtonBaseClassName,
+  D as calendarDayOutsideClassName,
+  N as calendarDaySelectedClassName,
+  v as calendarDayTodayClassName,
+  f as calendarFieldBaseClassName,
+  y as calendarFieldDisabledClassName,
+  s as calendarFieldIconClassName,
+  b as calendarFieldInvalidClassName,
+  I as calendarIcon,
+  x as calendarModeDefaultPlaceholder,
+  g as calendarNavIcons,
+  C as calendarPopoverClassName
+};

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

@@ -0,0 +1,77 @@
+const g = (t, e) => {
+  const r = (new Date(t, e, 1).getDay() + 6) % 7, a = new Date(t, e, 1 - r);
+  return Array.from({ length: 42 }, (c, i) => {
+    const o = new Date(a);
+    return o.setDate(a.getDate() + i), o;
+  });
+}, l = (t, e) => !!t && !!e && t.getFullYear() === e.getFullYear() && t.getMonth() === e.getMonth() && t.getDate() === e.getDate(), u = (t, e, n) => {
+  const r = new Date(t.getFullYear(), t.getMonth(), t.getDate());
+  if (e) {
+    const a = new Date(
+      e.getFullYear(),
+      e.getMonth(),
+      e.getDate()
+    );
+    if (r < a) return !0;
+  }
+  if (n) {
+    const a = new Date(
+      n.getFullYear(),
+      n.getMonth(),
+      n.getDate()
+    );
+    if (r > a) return !0;
+  }
+  return !1;
+}, D = (t, e) => t.toLocaleDateString(e, { month: "long", year: "numeric" }), m = (t, e) => t.toLocaleDateString(e, {
+  day: "numeric",
+  month: "short",
+  year: "numeric"
+}), h = (t, e) => t.toLocaleDateString(e, {
+  weekday: "long",
+  day: "numeric",
+  month: "long",
+  year: "numeric"
+}), f = (t) => `${String(t.getHours()).padStart(2, "0")}:${String(t.getMinutes()).padStart(2, "0")}`, d = (t, e) => {
+  const [n, r] = e.split(":").map(Number), a = new Date(t);
+  return a.setHours(n || 0, r || 0, 0, 0), a;
+}, y = (t) => /^([01]\d|2[0-3]):[0-5]\d$/.test(t), S = (t) => {
+  const e = t.replace(/\D/g, "").slice(0, 4);
+  let n = e.slice(0, 2);
+  const r = e.slice(2, 4);
+  if (n.length === 2 && (n = String(Math.min(Number(n), 23)).padStart(2, "0")), r.length === 0) return n;
+  const a = String(Math.min(Number(r), 59)).padStart(
+    r.length,
+    "0"
+  );
+  return `${n}:${a}`;
+};
+const s = (t) => t.charAt(0).toUpperCase() + t.slice(1), M = (t) => Array.from({ length: 7 }, (e, n) => {
+  const r = new Date(Date.UTC(1970, 0, 5 + n));
+  return s(
+    r.toLocaleDateString(t, { weekday: "short", timeZone: "UTC" })
+  );
+}), p = (t) => Array.from({ length: 7 }, (e, n) => {
+  const r = new Date(Date.UTC(1970, 0, 5 + n));
+  return {
+    value: String(n + 1),
+    // ISO weekday: 1 = Monday, 7 = Sunday
+    label: s(
+      r.toLocaleDateString(t, { weekday: "long", timeZone: "UTC" })
+    )
+  };
+});
+export {
+  m as formatDateLabel,
+  h as formatDayAriaLabel,
+  D as formatMonthLabel,
+  f as formatTimeLabel,
+  g as getMonthGrid,
+  p as getWeekdayOptions,
+  M as getWeekdayShortLabels,
+  y as isCompleteTimeString,
+  u as isDateOutOfRange,
+  l as isSameDay,
+  S as sanitizeTimeInput,
+  d as setTimeOnDate
+};

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

@@ -0,0 +1,27 @@
+import { jsx as e } from "react/jsx-runtime";
+import { mergeClasses as a } from "../../../utils/merge-classes.js";
+import { CaptionType as t } from "../../../types/caption.js";
+const s = ({
+  text: r,
+  className: o,
+  variant: n = t.Description,
+  ...i
+}) => r ? /* @__PURE__ */ e(
+  "span",
+  {
+    ...i,
+    role: "alert",
+    className: a(
+      "dial-tiny-text",
+      n === t.Error ? "text-error" : "text-secondary",
+      o
+    ),
+    children: r
+  }
+) : null, c = ({
+  ...r
+}) => /* @__PURE__ */ e(s, { ...r, variant: t.Error });
+export {
+  s as CaptionText,
+  c as ErrorText
+};

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

@@ -0,0 +1,22 @@
+import { jsx as a } from "react/jsx-runtime";
+import "react";
+import { mergeClasses as t } from "../../../utils/merge-classes.js";
+const i = ({
+  className: r,
+  children: e,
+  ...o
+}) => /* @__PURE__ */ a(
+  "article",
+  {
+    ...o,
+    className: t(
+      "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
+    ),
+    children: e
+  }
+);
+export {
+  i as CardShell
+};

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

@@ -0,0 +1,92 @@
+import { jsxs as p, jsx as c } from "react/jsx-runtime";
+import { useId as u, useCallback as x } from "react";
+import { ElementSize as v } from "../../../types/size.js";
+import { mergeClasses as f } from "../../../utils/merge-classes.js";
+import { resolveAccessibleName as C } from "../../../utils/accessible-name.js";
+import { Label as j } from "../Label/Label.js";
+import { CheckboxBox as z } from "./CheckboxBox.js";
+const T = ({
+  id: h,
+  labelProps: e,
+  isSelected: t = !1,
+  isIndeterminate: r = !1,
+  invalid: i = !1,
+  disabled: s,
+  onChange: m,
+  caption: l,
+  className: y,
+  boxClassName: b,
+  ...n
+}) => {
+  const g = u(), a = h ?? g, d = l ? `${a}-caption` : void 0, k = x(
+    (o) => {
+      m?.(o.target.checked);
+    },
+    [m]
+  ), N = x(
+    (o) => {
+      o && (o.indeterminate = r);
+    },
+    [r]
+  );
+  return /* @__PURE__ */ p("div", { className: "flex flex-col gap-1", children: [
+    /* @__PURE__ */ p("div", { className: f("flex items-center gap-2", y), children: [
+      /* @__PURE__ */ c(
+        "input",
+        {
+          ...n,
+          ref: N,
+          type: "checkbox",
+          id: a,
+          checked: t,
+          disabled: s,
+          onChange: k,
+          "aria-checked": r ? "mixed" : t,
+          "aria-invalid": i || void 0,
+          "aria-label": C(
+            typeof e?.label != "string" ? n["aria-label"] : void 0
+          ),
+          "aria-describedby": d,
+          className: "peer sr-only"
+        }
+      ),
+      /* @__PURE__ */ c(
+        z,
+        {
+          htmlFor: a,
+          isSelected: t,
+          isIndeterminate: r,
+          invalid: i,
+          disabled: s,
+          className: b
+        }
+      ),
+      e && /* @__PURE__ */ c(
+        j,
+        {
+          size: v.Standard,
+          ...e,
+          htmlFor: a,
+          className: f(
+            // `Label` defaults to the secondary colour; a checkbox's own label
+            // is primary while the control is usable.
+            "py-[1px]",
+            s ? "cursor-not-allowed text-control-disable-primary" : "cursor-pointer text-primary",
+            e.className
+          )
+        }
+      )
+    ] }),
+    l && /* @__PURE__ */ c(
+      "span",
+      {
+        id: d,
+        className: "dial-tiny-text text-secondary ml-[28px]",
+        children: l
+      }
+    )
+  ] });
+};
+export {
+  T as Checkbox
+};

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

@@ -0,0 +1,34 @@
+import { jsx as t } from "react/jsx-runtime";
+import { IconMinus as u, IconCheck as d } from "@tabler/icons-react";
+import { mergeClasses as b } from "../../../utils/merge-classes.js";
+import { CHECKBOX_ICON_PROPS as p } from "./constants.js";
+const C = ({
+  isSelected: n = !1,
+  isIndeterminate: c = !1,
+  invalid: r = !1,
+  disabled: a = !1,
+  htmlFor: s,
+  className: m
+}) => {
+  const o = c || n, e = !!s, l = b(
+    "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
+    // overhang by 12px per side and swallow the adjacent label. A decorative
+    // box is not a target at all — the row around it is.
+    e && "dial-kit-minimum-target",
+    e && "peer-focus-visible:outline peer-focus-visible:outline-focus",
+    a ? "border-transparent bg-control-disable-primary text-control-disable-primary" : b(
+      r && o && "border-transparent bg-control-error text-control-permanent",
+      r && !o && "border-error bg-control-neutral",
+      !r && o && "border-transparent bg-control-accent text-control-permanent hover:bg-control-accent-hover",
+      !r && !o && "border-default bg-control-neutral hover:border-accent hover:bg-control-accent-alpha-hover"
+    ),
+    a ? "cursor-not-allowed" : e && "cursor-pointer",
+    m
+  ), 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 });
+};
+export {
+  C as CheckboxBox
+};

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

@@ -0,0 +1,8 @@
+const e = {
+  size: 14,
+  stroke: 3,
+  "aria-hidden": !0
+};
+export {
+  e as CHECKBOX_ICON_PROPS
+};

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

@@ -0,0 +1,33 @@
+import { jsx as r } from "react/jsx-runtime";
+import { IconX as I } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as a } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as t } from "../../../constants/icon.js";
+import { ElementSize as m } from "../../../types/size.js";
+import { GhostIconButton as p } from "../IconButton/IconButtonWrappers.js";
+const u = ({
+  ariaLabel: i = "Close",
+  className: e,
+  size: o = m.Small,
+  onClose: l,
+  ...n
+}) => /* @__PURE__ */ r(
+  p,
+  {
+    ...n,
+    size: o,
+    "aria-label": i,
+    className: e,
+    onClick: l,
+    icon: /* @__PURE__ */ r(
+      I,
+      {
+        size: o === m.Small ? t.SM : t.MD,
+        stroke: a,
+        "aria-hidden": "true"
+      }
+    )
+  }
+);
+export {
+  u as CloseButton
+};

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

@@ -0,0 +1,108 @@
+import { jsxs as l, jsx as t } from "react/jsx-runtime";
+import { useState as w, useId as E } from "react";
+import { IconChevronsLeft as O, IconChevronsRight as k } from "@tabler/icons-react";
+import { DIAL_KIT_ICON_STROKE as d } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as p } from "../../../constants/icon.js";
+import { ButtonAppearance as z, ButtonVariant as A } from "../../../types/button.js";
+import { ElementSize as B } from "../../../types/size.js";
+import { mergeClasses as r } from "../../../utils/merge-classes.js";
+import { IconButton as P } from "../IconButton/IconButton.js";
+const T = 48, q = ({
+  children: c,
+  title: m,
+  width: f = 280,
+  collapsedWidth: h = T,
+  isOpened: o,
+  defaultOpened: x = !0,
+  onToggle: b,
+  additionalButtons: u,
+  ariaLabel: I = "Sidebar",
+  collapseLabel: y = "Collapse sidebar",
+  expandLabel: C = "Expand sidebar",
+  className: v,
+  titleClassName: S,
+  contentClassName: g,
+  footerClassName: D
+}) => {
+  const i = o !== void 0, [L, N] = w(x), e = i ? o : L, a = `collapsible-sidebar-content-${E()}`, n = e ? y : C, _ = (j) => {
+    const s = !e;
+    i || N(s), b?.(s, j);
+  };
+  return /* @__PURE__ */ l(
+    "aside",
+    {
+      "aria-label": I,
+      style: { width: `${e ? f : h}px` },
+      className: r("flex flex-col justify-between", v),
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            id: a,
+            hidden: !e,
+            className: r(
+              "min-h-0 flex-1 overflow-auto p-4",
+              g
+            ),
+            children: c
+          }
+        ),
+        /* @__PURE__ */ t(
+          "div",
+          {
+            hidden: e,
+            className: r(
+              "rotate-180 px-3 py-4 [writing-mode:tb-rl] dial-small-text text-primary",
+              S
+            ),
+            children: m
+          }
+        ),
+        /* @__PURE__ */ l(
+          "div",
+          {
+            className: r(
+              "flex h-12 shrink-0 flex-row items-center gap-2 border-t border-tertiary py-1",
+              e ? "justify-end px-2" : "justify-center",
+              D
+            ),
+            children: [
+              e && u,
+              /* @__PURE__ */ t(
+                P,
+                {
+                  variant: A.Primary,
+                  appearance: z.Ghost,
+                  size: B.Standard,
+                  onClick: _,
+                  "aria-label": n,
+                  "aria-expanded": e,
+                  "aria-controls": a,
+                  tooltipProps: { tooltip: n },
+                  icon: e ? /* @__PURE__ */ t(
+                    O,
+                    {
+                      size: p.MD,
+                      stroke: d,
+                      "aria-hidden": "true"
+                    }
+                  ) : /* @__PURE__ */ t(
+                    k,
+                    {
+                      size: p.MD,
+                      stroke: d,
+                      "aria-hidden": "true"
+                    }
+                  )
+                }
+              )
+            ]
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  q as CollapsibleSidebar
+};

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

@@ -0,0 +1,78 @@
+import { jsxs as S, jsx as r } from "react/jsx-runtime";
+import { useCallback as j } from "react";
+import { Button as z } from "../Button/Button.js";
+import { NeutralButton as F } from "../Button/ButtonWrappers.js";
+import { Popup as I } from "../Popup/Popup.js";
+import { Spinner as V } from "../../Spinner/Spinner.js";
+import { ConfirmationPopupVariant as q } from "../../../types/confirmation-popup.js";
+import { PopupSize as w } from "../../../types/popup.js";
+import { mergeClasses as f } from "../../../utils/merge-classes.js";
+import { actionsBaseClassName as y, defaultCancelLabel as A, defaultConfirmLabel as D, variantConfig as t, loaderContainerClassName as E, descriptionBaseClassName as G } from "./constants.js";
+const X = ({
+  header: p,
+  description: a,
+  descriptionClassName: m,
+  open: u = !1,
+  confirmLabel: c = D,
+  cancelLabel: C = A,
+  isLoading: e = !1,
+  disableConfirmButton: d = !1,
+  className: N,
+  confirmClassName: b,
+  onClose: n,
+  onConfirm: v,
+  onCancel: i,
+  children: o,
+  variant: l = q.Info,
+  size: B = w.Sm,
+  footer: s,
+  hideClose: P,
+  ...h
+}) => {
+  const k = e ? null : /* @__PURE__ */ S("div", { className: y, children: [
+    /* @__PURE__ */ r(
+      F,
+      {
+        label: C,
+        onClick: () => i ? i() : n?.()
+      }
+    ),
+    /* @__PURE__ */ r(
+      z,
+      {
+        variant: t[l].confirm.variant,
+        appearance: t[l].confirm.appearance,
+        className: b,
+        label: c,
+        disabled: d,
+        onClick: v
+      }
+    )
+  ] }), x = j(() => e ? /* @__PURE__ */ r("div", { className: E, children: /* @__PURE__ */ r(V, { size: 40 }) }) : o ?? (a ? /* @__PURE__ */ r(
+    "div",
+    {
+      className: f(
+        G,
+        m
+      ),
+      children: a
+    }
+  ) : null), [o, a, e, m]);
+  return /* @__PURE__ */ r(
+    I,
+    {
+      ...h,
+      open: u,
+      header: p,
+      className: f(t[l].container, N),
+      onClose: () => n?.(),
+      footer: s ?? k,
+      size: B,
+      hideClose: P ?? (!e && s === void 0),
+      children: x()
+    }
+  );
+};
+export {
+  X as ConfirmationPopup
+};

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

@@ -0,0 +1,27 @@
+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]: {
+    confirm: {
+      variant: r.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",
+    confirm: {
+      variant: r.Danger,
+      appearance: a.Solid
+    }
+  }
+};
+export {
+  t as actionsBaseClassName,
+  s as defaultCancelLabel,
+  c as defaultConfirmLabel,
+  i as descriptionBaseClassName,
+  p as loaderContainerClassName,
+  l as variantConfig
+};