@dmsi/wedgekit-react 2.0.0 → 2.0.1

package/dist/components/Textarea.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsxs as h, jsx as n } from "react/jsx-runtime";
+import { clsx as a } from "../node_modules/clsx/dist/clsx.js";
+import { useState as p, useRef as y, useEffect as g } from "react";
+import { componentPaddingMinusBorder as v, baseTransition as w, typography as f, componentGap as C } from "../classNames.js";
+const B = a(
+  "w-full min-h-19",
+  "rounded-base border border-border-primary-normal bg-background-primary-normal caret-text-action-normal",
+  "outline-transparent outline-2 -outline-offset-2",
+  v,
+  w
+), F = a(
+  "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1"
+), k = a(
+  "has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus focus-within:border-transparent focus-within:outline-border-primary-focus"
+), E = a(
+  "has-disabled:bg-background-action-secondary-disabled"
+), N = a(
+  "has-[textarea:not(:disabled):read-only]:outline-none has-[textarea:not(:disabled):read-only]:bg-transparent has-[textarea:not(:disabled):read-only]:border-transparent has-[textarea:not(:disabled):read-only]:pl-0"
+);
+function T({
+  id: t,
+  testid: o,
+  label: s,
+  error: m,
+  caption: d,
+  selectOnFocus: l,
+  ...e
+}) {
+  const [i, c] = p(!1), u = y(null);
+  g(() => {
+    const r = u.current, b = () => {
+      r?.select();
+    };
+    if (l)
+      return r?.addEventListener("focus", b), () => {
+        r?.removeEventListener("focus", b);
+      };
+  }, [l]);
+  const x = {
+    "data-error": m && !i || null,
+    "data-focus": i || null
+  };
+  return /* @__PURE__ */ h(
+    "label",
+    {
+      htmlFor: t,
+      className: a(
+        "flex flex-col w-full",
+        "text-text-primary-normal has-disabled:text-text-primary-disabled",
+        !e.disabled && !e.readOnly && "has-[[data-error]]:text-text-primary-error",
+        C
+      ),
+      children: [
+        s && /* @__PURE__ */ n(
+          "span",
+          {
+            className: a(
+              f.label,
+              "text-inherit",
+              e.disabled || e.readOnly ? "cursor-default" : "cursor-pointer",
+              "inline-block"
+            ),
+            children: s
+          }
+        ),
+        /* @__PURE__ */ n(
+          "textarea",
+          {
+            ...e,
+            ...x,
+            id: t,
+            "data-testid": o,
+            ref: u,
+            className: a(
+              "disabled:text-text-primary-disabled",
+              f.paragraph,
+              B,
+              F,
+              k,
+              E,
+              N
+            ),
+            onFocus: (r) => {
+              e.onFocus?.(r), c(!0);
+            },
+            onBlur: (r) => {
+              e.onBlur?.(r), c(!1);
+            }
+          }
+        ),
+        d && /* @__PURE__ */ n(
+          "div",
+          {
+            id: t ? `${t}-caption` : void 0,
+            "data-testid": o ? `${o}-caption` : void 0,
+            children: d
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  T as Textarea
+};

package/dist/components/Theme.js

@@ -0,0 +1,25 @@
+import { jsx as m } from "react/jsx-runtime";
+function s({
+  theme: e,
+  children: r,
+  id: a,
+  testid: n,
+  ref: t
+}) {
+  return /* @__PURE__ */ m(
+    "div",
+    {
+      id: a,
+      "data-testid": n,
+      className: "contents",
+      "data-theme": e,
+      ref: (i) => {
+        t && (t.current = i);
+      },
+      children: r
+    }
+  );
+}
+export {
+  s as Theme
+};

package/dist/components/Time.js

@@ -0,0 +1,225 @@
+import { jsxs as L, jsx as l } from "react/jsx-runtime";
+import { useState as v, useRef as w, useEffect as A } from "react";
+import { InputBase as Q } from "./Input.js";
+import { createPortal as W } from "react-dom";
+import { clsx as R } from "../node_modules/clsx/dist/clsx.js";
+import { componentPadding as Z, typography as ee } from "../classNames.js";
+import { Icon as te } from "./Icon.js";
+import { findDocumentRoot as re } from "../utils.js";
+import { Stack as ne } from "./Stack.js";
+const U = "overflow-auto max-h-full py-4 no-scrollbar w-12 desktop:w-10";
+function he({ onChange: P, format: V = "12h", id: a, testid: f, wrapperClassName: $, ...c }) {
+  const [i, h] = v(!1), [T, j] = v(!1), y = w(null), D = w(null), x = w(null), [N, H] = v({ top: 0, left: 0, width: 0 }), [s, k] = v(null), [p, I] = v(null), [d, S] = v(null), [X, O] = v(""), C = w(/* @__PURE__ */ new Set()), n = V === "12h", b = s && p ? n ? d ? `${s}:${p} ${d}` : `${s}:${p}` : `${s}:${p}` : "", Y = () => {
+    const r = y.current?.parentElement ?? D.current;
+    if (r) {
+      const e = r.getBoundingClientRect();
+      H({
+        top: e.bottom + window.scrollY + 4,
+        left: e.left + window.scrollX,
+        width: e.width
+      });
+    }
+  };
+  A(() => {
+    i && Y();
+  }, [i, n]), A(() => {
+    i && n && d === null && S("AM");
+  }, [i, n, d]), A(() => {
+    const r = (e) => {
+      y.current && x.current && !y.current.contains(e.target) && !x.current.contains(e.target) && h(!1);
+    };
+    return i && document.addEventListener("mousedown", r), () => {
+      document.removeEventListener("mousedown", r);
+    };
+  }, [i, n]), A(() => {
+    b && T && (O(b), P?.({
+      target: { value: b }
+    }));
+  }, [b, T, P]);
+  const _ = () => {
+    !c.disabled && !c.readOnly && (j(!0), h(!0), C.current = /* @__PURE__ */ new Set(), n && d === null && S("AM"));
+  }, z = (r, e) => {
+    r === "hour" && k(e), r === "minute" && I(e), r === "meridiem" && S(e), C.current.add(r), setTimeout(() => {
+      (n ? ["hour", "minute", "meridiem"] : ["hour", "minute"]).every((o) => C.current.has(o)) && h(!1);
+    }, 100);
+  };
+  A(() => {
+    !i && b && O(b);
+  }, [i, b]);
+  const G = (r) => {
+    const e = r.target.value.toUpperCase().replace(/[^0-9:APM ]/gi, "").trim();
+    O(e), e === "" && (k(null), I(null), S(null), h(!0), C.current = /* @__PURE__ */ new Set());
+    const t = e.match(
+      n ? /^(\d{1,2}):(\d{2})\s*(AM|PM)$/i : /^(\d{1,2}):(\d{2})$/
+    );
+    if (t) {
+      const [, o, u, M] = t, m = parseInt(o, 10), F = parseInt(u, 10);
+      if (m >= 0 && m <= 23 && F >= 0 && F <= 59) {
+        let E;
+        const K = F.toString().padStart(2, "0");
+        let B = M;
+        n ? (E = (m % 12 || 12).toString().padStart(2, "0"), m > 12 && (B = "PM"), k(E), I(K), B && S(B)) : (E = m.toString().padStart(2, "0"), k(E), I(K));
+      }
+    }
+    P?.(r);
+  }, g = {
+    hour: w(null),
+    minute: w(null),
+    meridiem: w(null)
+  }, J = (r) => {
+    if (r.key === "Enter") {
+      h(!1);
+      return;
+    }
+    if (r.key !== "ArrowUp" && r.key !== "ArrowDown") return;
+    r.preventDefault();
+    let e, t, o;
+    if (s === null || p === null || n && d === null) {
+      const m = /* @__PURE__ */ new Date();
+      e = m.getHours(), t = Math.round(m.getMinutes() / 5) * 5, t === 60 && (t = 0, e += 1), n ? (o = e >= 12 ? "PM" : "AM", e = e % 12 || 12) : o = "AM";
+    } else
+      e = parseInt(s, 10), t = parseInt(p, 10), o = d || "AM";
+    const u = 5, M = t % u;
+    t += r.key === "ArrowDown" ? M === 0 ? u : u - M : -(M === 0 ? u : M), t >= 60 ? (t -= 60, e += 1) : t < 0 && (t += 60, e -= 1), n ? e > 12 ? (e = 1, o = o === "AM" ? "PM" : "AM") : e <= 0 && (e = 12, o = o === "AM" ? "PM" : "AM") : e = (e + 24) % 24, k(e.toString().padStart(2, "0")), I(t.toString().padStart(2, "0")), n && S(o);
+  };
+  A(() => {
+    i && setTimeout(() => {
+      g.hour.current?.scrollIntoView({
+        block: "nearest",
+        behavior: "instant"
+      }), g.minute.current?.scrollIntoView({
+        block: "nearest",
+        behavior: "instant"
+      }), n && g.meridiem.current?.scrollIntoView({
+        block: "nearest",
+        behavior: "instant"
+      });
+    }, 0);
+  }, [
+    i,
+    n,
+    g.hour,
+    g.minute,
+    g.meridiem
+  ]);
+  const q = (r, e) => r.map((t) => {
+    const o = e === "hour" && t === s || e === "minute" && t === p || e === "meridiem" && t === d;
+    return /* @__PURE__ */ l(
+      oe,
+      {
+        id: a ? `${a}-${e}-${t}` : void 0,
+        testid: f ? `${f}-${e}-${t}` : void 0,
+        selected: o,
+        ref: o ? (u) => {
+          g[e].current = u;
+        } : null,
+        onClick: () => z(e, t),
+        className: R(Z, "cursor-pointer", ee.caption),
+        children: t
+      },
+      t
+    );
+  });
+  return /* @__PURE__ */ L("div", { className: R("relative max-w-38", $), children: [
+    /* @__PURE__ */ l(
+      Q,
+      {
+        ...c,
+        id: a,
+        testid: f,
+        ref: y,
+        inputContainerRef: D,
+        value: X,
+        placeholder: n ? "hh:mm am" : "hh:mm",
+        after: /* @__PURE__ */ l("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ l(te, { name: "schedule" }) }),
+        onFocus: _,
+        caption: c.caption,
+        onChange: G,
+        onKeyDown: J,
+        type: "text"
+      }
+    ),
+    i && W(
+      /* @__PURE__ */ l(
+        ne,
+        {
+          id: a ? `${a}-timepicker` : void 0,
+          elevation: 4,
+          height: 240,
+          position: "absolute",
+          backgroundColor: "background-grouped-primary-normal",
+          overflowX: "hidden",
+          overflowY: "hidden",
+          zIndex: 50,
+          top: N.top,
+          left: N.left,
+          width: "fit",
+          rounded: !0,
+          children: /* @__PURE__ */ L("div", { ref: x, className: "px-4 flex justify-center h-60", children: [
+            /* @__PURE__ */ l("div", { className: R(U), children: q(
+              Array.from(
+                { length: n ? 12 : 24 },
+                (r, e) => (e + (n ? 1 : 0)).toString().padStart(2, "0")
+              ),
+              "hour"
+            ) }),
+            /* @__PURE__ */ l("div", { className: R(U), children: q(
+              Array.from(
+                { length: 12 },
+                (r, e) => (e * 5).toString().padStart(2, "0")
+              ),
+              "minute"
+            ) }),
+            n && /* @__PURE__ */ l("div", { className: "py-4 w-12 desktop:w-10", children: q(["AM", "PM"], "meridiem") })
+          ] })
+        }
+      ),
+      re(x.current)
+    )
+  ] });
+}
+function oe({
+  id: P,
+  testid: V,
+  selected: a = !1,
+  start: f = !1,
+  intermediate: $ = !1,
+  end: c = !1,
+  today: i = !1,
+  disabled: h = !1,
+  onClick: T,
+  onHover: j,
+  onKeyDown: y,
+  children: D,
+  className: x,
+  ref: N,
+  ...H
+}) {
+  return /* @__PURE__ */ l(
+    "button",
+    {
+      id: P,
+      "data-testid": V,
+      onPointerOver: j,
+      onClick: T,
+      onKeyDown: y,
+      disabled: h,
+      ref: N,
+      className: R(
+        "w-full aspect-square flex items-center justify-center",
+        !a && !f && !$ && !c && !i && "text-text-primary-normal hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover active:text-text-action-primary-active disabled:text-text-primary-disabled disabled:pointer-events-none rounded",
+        i && !a && !f && !$ && !c && "rounded-full border border-border-primary-normal hover:bg-background-action-secondary-hover hover:text-text-action-primary-hover active:text-text-action-primary-active disabled:text-text-primary-disabled",
+        a && "text-text-on-action-primary-normal bg-background-action-primary-normal hover:bg-background-action-primary-hover active:bg-background-action-primary-active disabled:text-text-primary-disabled disabled:bg-neutral-200 rounded",
+        f && "bg-background-action-primary-normal hover:bg-background-action-primary-hover active:bg-background-action-primary-active disabled:text-text-primary-disabled disabled:bg-neutral-200 rounded-l",
+        c && "bg-background-action-primary-normal hover:bg-background-action-primary-hover active:bg-background-action-primary-active disabled:text-text-primary-disabled disabled:bg-neutral-200 rounded-r",
+        $ && "bg-action-100 border-y border-action-400",
+        x
+      ),
+      ...H,
+      children: D
+    }
+  );
+}
+export {
+  he as Time
+};

package/dist/components/Toast.js

@@ -0,0 +1,170 @@
+"use client";
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { clsx as h } from "../node_modules/clsx/dist/clsx.js";
+import { useRef as m, useEffect as b } from "react";
+import { useMatchesMobile as E } from "../hooks/useMatchesMedia.js";
+import { Heading3 as B } from "./Heading.js";
+import { Paragraph as O } from "./Paragraph.js";
+import { Icon as d } from "./Icon.js";
+import { Button as z } from "./Button.js";
+import { createRoot as L } from "react-dom/client";
+import { componentGap as Y, layoutGroupGap as M, componentPadding as D } from "../classNames.js";
+const R = {
+  success: {
+    className: "border-background-success-normal",
+    icon: /* @__PURE__ */ o("span", { className: "text-icon-success-normal contents", children: /* @__PURE__ */ o(d, { name: "check_circle", size: 24 }) })
+  },
+  warning: {
+    className: "border-background-warning-normal",
+    icon: /* @__PURE__ */ o("span", { className: "text-icon-warning-normal contents", children: /* @__PURE__ */ o(d, { name: "warning", size: 24 }) })
+  },
+  error: {
+    className: "border-border-action-critical-normal",
+    icon: /* @__PURE__ */ o("span", { className: "text-icon-critical-normal contents", children: /* @__PURE__ */ o(d, { name: "error", size: 24 }) })
+  },
+  info: {
+    className: "border-border-action-normal",
+    icon: /* @__PURE__ */ o("span", { className: "text-icon-on-action-secondary-normal contents", children: /* @__PURE__ */ o(d, { name: "info", size: 24 }) })
+  }
+}, U = 8e3, G = 50, H = 50, P = (e, n = !1, r = U, t = G, a = H) => {
+  const s = t + r + a, c = e.getBoundingClientRect(), i = n ? -(c.top + 16) : window.innerHeight - c.bottom + 16;
+  return e.animate(
+    [
+      { opacity: 0, transform: `translateY(${i}px)`, offset: 0 },
+      { opacity: 1, transform: "translateY(0)", offset: t / s },
+      { opacity: 1, transform: "translateY(0)", offset: (t + r) / s },
+      { opacity: 0, transform: `translateY(${i}px)`, offset: 1 }
+    ],
+    {
+      duration: s,
+      easing: "cubic-bezier(0.4, 0, 0.2, 1)",
+      fill: "both"
+    }
+  );
+}, y = "toast-root";
+function S() {
+  const r = `${window.matchMedia("(width < 48rem)").matches ? "fixed top-mobile-container-padding left-1/2 -translate-x-1/2 items-center" : "fixed bottom-desktop-container-padding right-desktop-container-padding items-end"} z-50 flex flex-col gap-4 pointer-events-none`;
+  let t = document.getElementById(y);
+  return t || (t = document.createElement("div"), t.id = y, document.body.appendChild(t)), t.className = r, t;
+}
+function V({
+  id: e,
+  testid: n,
+  variant: r = "success",
+  title: t,
+  message: a,
+  show: s = !1,
+  showToast: c = !1,
+  // deprecated
+  onClose: i,
+  viewButtonLink: I,
+  viewButtonLabel: A = "View",
+  showViewButton: T = !1,
+  ...v
+}) {
+  const u = m(null), l = m(null), f = E(), g = m(i);
+  b(() => {
+    g.current = i;
+  }, [i]);
+  const N = m(f);
+  b(() => {
+    N.current = f;
+  }, [f]);
+  const w = m(!1);
+  b(() => {
+    if (s && !c) {
+      if (u.current) {
+        const x = P(u.current, N.current === !0);
+        l.current = x, x.onfinish = () => {
+          g.current?.();
+        };
+      }
+      return () => {
+        l.current?.cancel();
+      };
+    }
+  }, [s, c]);
+  const _ = () => {
+    w.current = !0, l.current?.pause();
+  }, $ = () => {
+    w.current = !1, l.current?.playState === "paused" && l.current.play();
+  }, { className: k, icon: C } = R[r] ?? R.success;
+  return s ? /* @__PURE__ */ p(
+    "div",
+    {
+      id: e,
+      "data-testid": n,
+      ref: u,
+      onMouseEnter: _,
+      onMouseLeave: $,
+      className: h(
+        "flex items-start border-2 rounded-sm bg-background-grouped-primary-normal shadow-16 cursor-pointer pointer-events-auto transition-colors w-fit",
+        D,
+        M,
+        k
+      ),
+      ...v,
+      style: v.style,
+      children: [
+        C,
+        /* @__PURE__ */ p("div", { className: h("flex items-center", M), children: [
+          /* @__PURE__ */ p("div", { className: h("flex flex-col w-68", Y), children: [
+            t && /* @__PURE__ */ o(
+              B,
+              {
+                testid: n ? `${n}-title` : void 0,
+                id: e ? `${e}-title` : void 0,
+                children: t
+              }
+            ),
+            a && /* @__PURE__ */ o(
+              O,
+              {
+                testid: n ? `${n}-message` : void 0,
+                id: e ? `${e}-message` : void 0,
+                children: a
+              }
+            )
+          ] }),
+          T && /* @__PURE__ */ o(
+            z,
+            {
+              id: e ? `${e}-view-button` : void 0,
+              testid: n ? `${n}-view-button` : void 0,
+              variant: "tertiary",
+              href: I,
+              children: A
+            }
+          )
+        ] })
+      ]
+    }
+  ) : null;
+}
+function te(e) {
+  const n = S(), r = document.createElement("div");
+  n.appendChild(r);
+  const t = L(r), a = () => {
+    t.unmount(), r.remove();
+  };
+  t.render(
+    /* @__PURE__ */ o(
+      V,
+      {
+        id: e.id,
+        testid: e.testid,
+        show: !0,
+        onClose: a,
+        variant: e.variant,
+        title: e.title,
+        message: e.message,
+        showViewButton: e.showViewButton,
+        viewButtonLink: e.viewButtonLink
+      }
+    )
+  );
+}
+export {
+  V as Toast,
+  te as createToast
+};

package/dist/components/Tooltip.js

@@ -0,0 +1,102 @@
+"use client";
+import { jsxs as L, jsx as $ } from "react/jsx-runtime";
+import { clsx as q } from "../node_modules/clsx/dist/clsx.js";
+import { useRef as g, useState as d, useEffect as v } from "react";
+import { createPortal as z } from "react-dom";
+import { typography as F, componentPadding as j } from "../classNames.js";
+import { useMatchesMobile as A } from "../hooks/useMatchesMedia.js";
+function W({
+  id: c,
+  testid: l,
+  message: b,
+  position: w = "top",
+  children: x,
+  showOnTruncation: p = !1,
+  offset: s = 8,
+  keepHidden: y = !1
+}) {
+  const o = g(null), a = g(null), [f, M] = d({ top: 0, left: 0 }), [i, m] = d(!1), [R, h] = d(!1), u = () => {
+    if (!o.current || !a.current) return;
+    const e = o.current.getBoundingClientRect(), t = a.current.getBoundingClientRect();
+    let n = 0, r = 0;
+    switch (w) {
+      case "top":
+        n = e.top - t.height - s, r = e.left + e.width / 2 - t.width / 2;
+        break;
+      case "bottom":
+        n = e.bottom + s, r = e.left + e.width / 2 - t.width / 2;
+        break;
+      case "left":
+        n = e.top + e.height / 2 - t.height / 2, r = e.left - t.width - s;
+        break;
+      case "right":
+        n = e.top + e.height / 2 - t.height / 2, r = e.right + s;
+        break;
+    }
+    M({ top: n, left: r }), requestAnimationFrame(() => {
+      h(!0);
+    });
+  }, k = () => {
+    (!p || T()) && m(!0);
+  }, E = () => {
+    m(!1), h(!1);
+  };
+  v(() => {
+    i && a.current && requestAnimationFrame(() => {
+      u();
+    });
+  }, [i]), v(() => {
+    if (i)
+      return window.addEventListener("resize", u), () => window.removeEventListener("resize", u);
+  }, [i]);
+  const P = A();
+  return /* @__PURE__ */ L(
+    "div",
+    {
+      id: c,
+      "data-testid": l,
+      ref: o,
+      className: "relative inline-grid grid-cols-[auto_1fr] items-center cursor-pointer",
+      onMouseEnter: k,
+      onMouseLeave: E,
+      children: [
+        x,
+        !y && i && !P && typeof document < "u" && z(
+          /* @__PURE__ */ $(
+            "div",
+            {
+              id: c ? `${c}-message` : void 0,
+              "data-testid": l ? `${l}-message` : void 0,
+              ref: a,
+              style: {
+                position: "fixed",
+                top: `${f.top}px`,
+                left: `${f.left}px`,
+                zIndex: 9999
+              },
+              className: q(
+                F.caption,
+                "bg-neutral-500 text-neutral-100 rounded whitespace-nowrap shadow-2 pointer-events-none transition-opacity duration-100 ease-in-out",
+                j,
+                !R && "opacity-0"
+              ),
+              children: b
+            }
+          ),
+          document.body
+        )
+      ]
+    }
+  );
+  function T() {
+    if (p && o.current) {
+      const e = o.current.querySelector("p, a");
+      if (e)
+        return e.scrollWidth > e.clientWidth;
+    }
+    return !1;
+  }
+}
+export {
+  W as Tooltip
+};