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

package/dist/components/New/Accordion/Accordion.js

@@ -0,0 +1,103 @@
+import { jsxs as i, Fragment as _, jsx as e } from "react/jsx-runtime";
+import { IconChevronRight as j } from "@tabler/icons-react";
+import { useState as A, useId as C } from "react";
+import { DIAL_KIT_ICON_STROKE as S } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as k } from "../../../constants/icon.js";
+import { resolveAccessibleName as O } from "../../../utils/accessible-name.js";
+import { mergeClasses as n } from "../../../utils/merge-classes.js";
+const F = ({
+  title: p,
+  description: s,
+  children: h,
+  expanded: l,
+  defaultExpanded: y = !1,
+  disabled: r,
+  nonCollapsible: o,
+  ariaLabel: v,
+  onToggle: I,
+  className: g,
+  headerClassName: c,
+  contentClassName: N
+}) => {
+  const d = l !== void 0, [b, w] = A(y), t = o ? !0 : d ? l : b, m = C(), a = `accordion-header-${m}`, x = `accordion-content-${m}`, E = () => {
+    if (r) return;
+    const u = !t;
+    d || w(u), I?.(u);
+  }, f = /* @__PURE__ */ i(_, { children: [
+    /* @__PURE__ */ i("span", { className: "flex min-w-0 flex-col", children: [
+      /* @__PURE__ */ e("span", { className: "truncate dial-body-text text-primary", children: p }),
+      s ? /* @__PURE__ */ e("span", { className: "truncate dial-tiny-text text-secondary", children: s }) : null
+    ] }),
+    !o && // Caret at the leading edge; it turns a quarter turn to point down when open.
+    /* @__PURE__ */ e(
+      j,
+      {
+        size: k.SM,
+        stroke: S,
+        "aria-hidden": "true",
+        className: n(
+          "shrink-0 text-secondary transition-transform motion-reduce:transition-none",
+          t && "rotate-90"
+        )
+      }
+    )
+  ] });
+  return /* @__PURE__ */ i(
+    "div",
+    {
+      className: n(
+        "flex flex-col gap-3 py-3 overflow-hidden bg-transparent ",
+        g
+      ),
+      children: [
+        o ? /* @__PURE__ */ e(
+          "div",
+          {
+            id: a,
+            className: n(
+              "flex w-full px-4 rounded-xl items-center justify-between dial-tiny-text",
+              c
+            ),
+            children: f
+          }
+        ) : /* @__PURE__ */ e(
+          "button",
+          {
+            id: a,
+            type: "button",
+            "aria-expanded": t,
+            "aria-controls": t ? x : void 0,
+            "aria-label": O(v),
+            disabled: r,
+            onClick: E,
+            className: n(
+              "flex w-full px-4 rounded-xl items-center justify-between dial-tiny-text",
+              r ? "cursor-not-allowed opacity-75" : (
+                // Applied only to a header that can actually be operated.
+                "cursor-pointer hover:bg-control-accent-alpha-hover focus-visible:outline focus-visible:outline-focus"
+              ),
+              c
+            ),
+            children: f
+          }
+        ),
+        t && /* @__PURE__ */ e(
+          "div",
+          {
+            id: x,
+            role: "region",
+            "aria-labelledby": a,
+            className: n(
+              "px-4 dial-small-text text-primary",
+              N
+            ),
+            children: h
+          }
+        )
+      ]
+    }
+  );
+};
+export {
+  F as Accordion
+};

package/dist/components/New/Button/Button.js

@@ -0,0 +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 { 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 = ({
+  label: a,
+  variant: c,
+  appearance: l = s.Solid,
+  size: n = o.Standard,
+  className: k,
+  textClassName: S,
+  iconAfter: g,
+  iconBefore: v,
+  type: N = "button",
+  tooltipProps: r,
+  href: d,
+  target: p,
+  rel: C,
+  disabled: i,
+  ...e
+}) => {
+  const h = y(
+    "dial-kit-base-button",
+    c && L(c, l),
+    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"),
+    // 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",
+    k
+  ), B = a ? void 0 : r?.tooltip, x = 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(
+    "a",
+    {
+      ...m,
+      href: i ? void 0 : d,
+      target: p,
+      rel: C ?? (p === "_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
+    }
+  ) : /* @__PURE__ */ t(
+    "button",
+    {
+      ...e,
+      type: N,
+      disabled: i,
+      className: h,
+      "aria-label": x,
+      children: b
+    }
+  );
+  return r ? /* @__PURE__ */ t(F, { asChild: !0, ...r, children: f }) : f;
+};
+export {
+  J as Button
+};

package/dist/components/New/Button/ButtonWrappers.js

@@ -0,0 +1,44 @@
+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,
+  {
+    ...e,
+    variant: n,
+    appearance: a || o
+  }
+), p = (n, o) => ({ variant: a, ...e }) => /* @__PURE__ */ i(
+  B,
+  {
+    ...e,
+    variant: a || o,
+    appearance: n
+  }
+), 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
+);
+export {
+  P as DangerButton,
+  f as GhostButton,
+  W as LinkButton,
+  y as NeutralButton,
+  N as OutlinedButton,
+  d as PrimaryButton
+};

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

@@ -0,0 +1,27 @@
+import { ButtonVariant as i, ButtonAppearance as t } from "../../../types/button.js";
+const o = {
+  [i.Primary]: {
+    [t.Solid]: "dial-kit-primary-solid-button",
+    [t.Ghost]: "dial-kit-primary-ghost-button",
+    [t.Link]: "dial-kit-primary-link-button"
+  },
+  [i.Neutral]: {
+    [t.Solid]: "dial-kit-neutral-solid-button",
+    [t.Outlined]: "dial-kit-neutral-outlined-button"
+  },
+  [i.Danger]: {
+    [t.Solid]: "dial-kit-danger-solid-button",
+    [t.Ghost]: "dial-kit-danger-ghost-button",
+    [t.Outlined]: "dial-kit-danger-outlined-button"
+  },
+  [i.Static]: {
+    [t.Solid]: "dial-kit-static-solid-button"
+  },
+  // TODO: remove these once we have a design for the icon button variants
+  [i.Success]: {},
+  [i.Secondary]: {},
+  [i.Tertiary]: {}
+};
+export {
+  o as variantClassMap
+};

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

@@ -0,0 +1,11 @@
+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]);
+};
+export {
+  l as getButtonClassNames
+};

package/dist/components/New/ButtonDropdown/ButtonDropdown.js

@@ -0,0 +1,28 @@
+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 { Dropdown as h } from "../Dropdown/Dropdown.js";
+import { getButtonChevron as B } from "./constants.js";
+const g = ({
+  variant: n,
+  appearance: t,
+  items: e,
+  ...p
+}) => {
+  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,
+    {
+      ...p,
+      iconAfter: i,
+      variant: n || c.Primary,
+      appearance: t || d.Solid,
+      "aria-haspopup": "menu",
+      "aria-expanded": o
+    }
+  ) }) });
+};
+export {
+  g as ButtonDropdown
+};

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

@@ -0,0 +1,17 @@
+import { jsx as r } from "react/jsx-runtime";
+import { DIAL_KIT_ICON_STROKE as t } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as e } from "../../../constants/icon.js";
+import { mergeClasses as m } from "../../../utils/merge-classes.js";
+import { IconChevronDown as s } from "@tabler/icons-react";
+const p = (o) => /* @__PURE__ */ r(
+  s,
+  {
+    size: e.SM,
+    stroke: t,
+    "aria-hidden": !0,
+    className: m("transition-transform", o && "rotate-180")
+  }
+);
+export {
+  p as getButtonChevron
+};

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

@@ -0,0 +1,343 @@
+import { jsx as t, jsxs as o, Fragment as O } from "react/jsx-runtime";
+import { useFloating as ne, autoUpdate as re, offset as se, flip as ie, shift as oe, useClick as ce, useDismiss as de, useRole as me, useInteractions as fe, FloatingPortal as pe, FloatingFocusManager as ue } from "@floating-ui/react";
+import { IconChevronDown as he } from "@tabler/icons-react";
+import { useId as ge, useState as E, useMemo as S, useEffect as be } from "react";
+import { Label as xe } from "../Label/Label.js";
+import { StaticIconButton as $ } from "../IconButton/IconButtonWrappers.js";
+import { DIAL_KIT_ICON_STROKE as ye } from "../constants/icon.js";
+import { DIAL_ICON_SIZE as ve } from "../../../constants/icon.js";
+import { CalendarMode as v } from "../../../types/calendar.js";
+import { ElementSize as j } from "../../../types/size.js";
+import { useThemeScope as De } from "../ThemeScope/ThemeScope.js";
+import { mergeClasses as c } from "../../../utils/merge-classes.js";
+import { DEFAULT_CALENDAR_LOCALE as Ne, calendarModeDefaultPlaceholder as Ce, calendarFieldIconClassName as Ie, calendarNavIcons as V, calendarDaySelectedClassName as Le, calendarDayTodayClassName as Te, calendarDayOutsideClassName as Fe, calendarDayButtonBaseClassName as Se, calendarIcon as Me, calendarFieldDisabledClassName as Z, calendarFieldInvalidClassName as q, calendarFieldBaseClassName as H, calendarPopoverClassName as Oe } from "./constants.js";
+import { getWeekdayShortLabels as we, getWeekdayOptions as ke, getMonthGrid as Be, formatTimeLabel as M, formatMonthLabel as Ee, isSameDay as P, isDateOutOfRange as W, formatDayAriaLabel as Ae, sanitizeTimeInput as _e, isCompleteTimeString as Re, setTimeOnDate as K, formatDateLabel as U } from "./utils.js";
+const Y = ({
+  id: s,
+  disabled: l,
+  invalid: m,
+  trigger: i,
+  panelClassName: N,
+  fieldClassName: h,
+  panel: g,
+  labelledBy: C,
+  panelLabel: b
+}) => {
+  const x = De(), [f, n] = E(!1), { refs: D, floatingStyles: p, context: a } = ne({
+    open: f,
+    onOpenChange: (F) => n(l ? !1 : F),
+    placement: "bottom-start",
+    whileElementsMounted: re,
+    middleware: [se(8), ie({ padding: 8 }), oe({ padding: 8 })]
+  }), w = ce(a, { enabled: !l }), u = de(a), T = me(a, { role: "dialog" }), { getReferenceProps: k, getFloatingProps: I } = fe([
+    w,
+    u,
+    T
+  ]);
+  return /* @__PURE__ */ o(O, { children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        id: s,
+        ref: D.setReference,
+        role: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": f,
+        "aria-disabled": l,
+        "aria-labelledby": C,
+        tabIndex: l ? -1 : 0,
+        className: c(
+          H,
+          "focus-visible:outline focus-visible:outline-focus",
+          m && q,
+          l && Z,
+          h
+        ),
+        ...k(),
+        children: i
+      }
+    ),
+    f && /* @__PURE__ */ t(pe, { children: /* @__PURE__ */ t(
+      ue,
+      {
+        context: a,
+        modal: !1,
+        initialFocus: -1,
+        returnFocus: !0,
+        children: /* @__PURE__ */ t(
+          "div",
+          {
+            ref: D.setFloating,
+            style: p,
+            "aria-label": b,
+            className: c(
+              Oe,
+              x,
+              N
+            ),
+            ...I(),
+            children: g(() => n(!1))
+          }
+        )
+      }
+    ) })
+  ] });
+}, G = ({
+  id: s,
+  value: l,
+  onChange: m,
+  disabled: i,
+  invalid: N,
+  className: h,
+  ariaLabel: g,
+  placeholder: C = "--:--"
+}) => {
+  const [b, x] = E(l);
+  return be(() => {
+    x(l);
+  }, [l]), /* @__PURE__ */ t(
+    "input",
+    {
+      id: s,
+      type: "text",
+      inputMode: "numeric",
+      autoComplete: "off",
+      "aria-label": g,
+      placeholder: C,
+      disabled: i,
+      value: b,
+      onChange: (f) => {
+        const n = _e(f.target.value);
+        x(n), Re(n) && m(n);
+      },
+      className: c(
+        H,
+        N && q,
+        i && Z,
+        h
+      )
+    }
+  );
+}, Qe = ({
+  mode: s = v.Date,
+  value: l,
+  onChange: m,
+  labelProps: i,
+  placeholder: N,
+  disabled: h = !1,
+  invalid: g = !1,
+  id: C,
+  className: b,
+  minDate: x,
+  maxDate: f,
+  locale: n = Ne,
+  fieldClassName: D
+}) => {
+  const p = N ?? Ce[s], a = l instanceof Date ? l : null, w = ge(), u = C ?? w, T = i?.id ?? `${u}-label`, k = !!i?.label, I = typeof i?.label == "string" ? i.label : void 0, F = k ? `${T} ${u}` : void 0, B = i ? /* @__PURE__ */ t(xe, { ...i, id: T, htmlFor: u }) : null, [L, J] = E(
+    () => a ?? /* @__PURE__ */ new Date()
+  ), Q = S(() => /* @__PURE__ */ new Date(), []), X = S(
+    () => we(n),
+    [n]
+  ), A = S(() => ke(n), [n]), ee = S(
+    () => Be(L.getFullYear(), L.getMonth()),
+    [L]
+  ), _ = (r) => {
+    J(
+      (e) => new Date(e.getFullYear(), e.getMonth() + r, 1)
+    );
+  }, te = (r, e) => {
+    if (W(r, x, f)) return;
+    const y = s === v.DateTime && a ? K(r, M(a)) : r;
+    m?.(y), s === v.Date && e();
+  }, ae = (r) => {
+    m?.(K(a ?? /* @__PURE__ */ new Date(), r));
+  }, le = () => a ? s === v.DateTime ? `${U(a, n)}, ${M(a)}` : U(a, n) : p;
+  if (s === v.Time) {
+    const r = typeof l == "string" ? l : a ? M(a) : "";
+    return /* @__PURE__ */ o("div", { className: c("flex flex-col gap-y-3", b), children: [
+      B,
+      /* @__PURE__ */ t(
+        G,
+        {
+          id: u,
+          value: r,
+          onChange: (e) => m?.(e),
+          disabled: h,
+          invalid: g,
+          placeholder: p,
+          className: D
+        }
+      )
+    ] });
+  }
+  if (s === v.Weekday) {
+    const r = typeof l == "string" ? l : void 0, e = A.find((y) => y.value === r);
+    return /* @__PURE__ */ o("div", { className: c("flex flex-col gap-y-3", b), children: [
+      B,
+      /* @__PURE__ */ t(
+        Y,
+        {
+          id: u,
+          disabled: h,
+          invalid: g,
+          labelledBy: F,
+          panelLabel: I ?? p,
+          fieldClassName: D,
+          trigger: /* @__PURE__ */ o(O, { children: [
+            /* @__PURE__ */ t(
+              "span",
+              {
+                className: c(
+                  "truncate",
+                  !e && "text-secondary"
+                ),
+                children: e?.label ?? p
+              }
+            ),
+            /* @__PURE__ */ t(
+              he,
+              {
+                size: ve.MD,
+                stroke: ye,
+                "aria-hidden": "true",
+                className: Ie
+              }
+            )
+          ] }),
+          panel: (y) => /* @__PURE__ */ t(
+            "div",
+            {
+              role: "listbox",
+              "aria-label": I ?? p,
+              className: "flex flex-col gap-0.5",
+              children: A.map((d) => /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  role: "option",
+                  "aria-selected": d.value === r,
+                  className: c(
+                    "flex w-full items-center rounded-lg px-3 py-2 text-left dial-small-text text-primary hover:bg-control-accent-alpha-hover",
+                    "focus-visible:outline focus-visible:outline-focus",
+                    d.value === r && "bg-control-accent-alpha-hover"
+                  ),
+                  onClick: () => {
+                    m?.(d.value), y();
+                  },
+                  children: d.label
+                },
+                d.value
+              ))
+            }
+          )
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ o("div", { className: c("flex flex-col gap-y-3", b), children: [
+    B,
+    /* @__PURE__ */ t(
+      Y,
+      {
+        id: u,
+        disabled: h,
+        invalid: g,
+        labelledBy: F,
+        panelLabel: I ?? p,
+        fieldClassName: D,
+        trigger: /* @__PURE__ */ o(O, { children: [
+          /* @__PURE__ */ t(
+            "span",
+            {
+              className: c(
+                "truncate",
+                !a && "text-secondary"
+              ),
+              children: le()
+            }
+          ),
+          Me
+        ] }),
+        panel: (r) => /* @__PURE__ */ o(O, { children: [
+          /* @__PURE__ */ o("div", { className: "flex items-center justify-between", children: [
+            /* @__PURE__ */ t(
+              $,
+              {
+                "aria-label": "Previous month",
+                icon: V.prev,
+                size: j.Small,
+                onClick: () => _(-1)
+              }
+            ),
+            /* @__PURE__ */ t(
+              "div",
+              {
+                className: "dial-small-semi-text text-primary",
+                "aria-live": "polite",
+                children: Ee(L, n)
+              }
+            ),
+            /* @__PURE__ */ t(
+              $,
+              {
+                "aria-label": "Next month",
+                icon: V.next,
+                size: j.Small,
+                onClick: () => _(1)
+              }
+            )
+          ] }),
+          /* @__PURE__ */ o("div", { className: "grid grid-cols-7 gap-y-1 text-center", children: [
+            X.map((e) => /* @__PURE__ */ t(
+              "div",
+              {
+                "aria-hidden": "true",
+                className: "dial-tiny-text py-1 text-secondary",
+                children: e
+              },
+              e
+            )),
+            ee.map((e) => {
+              const y = e.getMonth() !== L.getMonth(), d = P(e, a), R = P(e, Q), z = W(e, x, f);
+              return /* @__PURE__ */ t(
+                "button",
+                {
+                  type: "button",
+                  disabled: z,
+                  "aria-label": Ae(e, n),
+                  "aria-pressed": d,
+                  "aria-current": R ? "date" : void 0,
+                  className: c(
+                    Se,
+                    y && Fe,
+                    R && !d && Te,
+                    d && Le,
+                    z && "cursor-not-allowed opacity-40 hover:bg-transparent"
+                  ),
+                  onClick: () => te(e, r),
+                  children: e.getDate()
+                },
+                e.toISOString()
+              );
+            })
+          ] }),
+          s === v.DateTime && /* @__PURE__ */ o("div", { className: "flex items-center justify-between gap-3 border-t border-secondary pt-3", children: [
+            /* @__PURE__ */ t("span", { className: "dial-small-text text-primary", children: "Time" }),
+            /* @__PURE__ */ t(
+              G,
+              {
+                ariaLabel: "Time",
+                value: a ? M(a) : "",
+                onChange: ae,
+                className: "w-[120px] px-3 py-1.5"
+              }
+            )
+          ] })
+        ] })
+      }
+    )
+  ] });
+};
+export {
+  Qe as Calendar
+};