@dmsi/wedgekit-react 2.0.0 → 2.0.1

package/dist/components/Icon.js

@@ -0,0 +1,73 @@
+import { jsx as l } from "react/jsx-runtime";
+import { clsx as d } from "../node_modules/clsx/dist/clsx.js";
+const y = [
+  "icon-primary-normal",
+  "icon-primary-disabled",
+  "icon-success-normal",
+  "icon-success-disabled",
+  "icon-warning-normal",
+  "icon-warning-disabled",
+  "icon-critical-normal",
+  "icon-critical-disabled",
+  "icon-action-primary-normal",
+  "icon-action-primary-hover",
+  "icon-action-primary-active",
+  "icon-action-primary-disabled",
+  "icon-action-secondary-normal",
+  "icon-action-secondary-hover",
+  "icon-action-secondary-active",
+  "icon-action-secondary-disabled",
+  "icon-on-action-primary-normal",
+  "icon-on-action-primary-hover",
+  "icon-on-action-primary-active",
+  "icon-on-action-primary-disabled",
+  "icon-on-action-secondary-normal",
+  "icon-on-action-secondary-hover",
+  "icon-on-action-secondary-active",
+  "icon-on-action-secondary-disabled",
+  "icon-action-critical-normal",
+  "icon-action-critical-hover",
+  "icon-action-critical-active",
+  "icon-action-critical-disabled",
+  "icon-action-critical-secondary-normal",
+  "icon-action-critical-secondary-hover",
+  "icon-action-critical-secondary-active",
+  "icon-action-critical-secondary-disabled",
+  "icon-brand-primary-normal",
+  "icon-brand-primary-hover",
+  "icon-brand-primary-active",
+  "icon-brand-primary-disabled"
+];
+function v({
+  name: o,
+  size: c = 24,
+  variant: a = "outline",
+  color: n,
+  testid: r,
+  ...i
+}) {
+  const t = a === "filled" ? '"FILL" 1' : '"FILL" 0', e = c === 16 ? '"wght" 400' : '"wght" 300';
+  return /* @__PURE__ */ l(
+    "span",
+    {
+      ...i,
+      "data-testid": r,
+      className: d(
+        "icon",
+        `icon-${c}`,
+        // size === 16 ? "font-normal" : "font-light", // size 16 font weight is not working as normal from before
+        i.className
+      ),
+      style: {
+        color: n ? `var(--color-${n})` : void 0,
+        fontVariationSettings: t + `, ${e}`,
+        ...i.style
+      },
+      children: o
+    }
+  );
+}
+export {
+  y as ICON_COLORS,
+  v as Icon
+};

package/dist/components/ImagePlaceholder.js

@@ -0,0 +1,22 @@
+import { jsxs as e, jsx as t } from "react/jsx-runtime";
+import { useId as l } from "react";
+function c(i) {
+  const h = l();
+  return /* @__PURE__ */ e(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      width: 242,
+      height: 243,
+      fill: "none",
+      ...i,
+      children: [
+        /* @__PURE__ */ t("g", { clipPath: `url(#${h})`, children: /* @__PURE__ */ t("rect", { width: i.width, height: i.width, fill: "#F7F7F7", rx: 2 }) }),
+        /* @__PURE__ */ t("defs", { children: /* @__PURE__ */ t("clipPath", { id: h, children: /* @__PURE__ */ t("rect", { width: i.width, height: i.width, fill: "#fff", rx: 2 }) }) })
+      ]
+    }
+  );
+}
+export {
+  c as ImagePlaceholder
+};

package/dist/components/Input.js

@@ -0,0 +1,469 @@
+"use client";
+import { jsx as s, jsxs as O } from "react/jsx-runtime";
+import { useState as Z, useRef as Y, useEffect as q } from "react";
+import { clsx as f } from "../node_modules/clsx/dist/clsx.js";
+import { componentGap as Q, baseTransition as F, componentPaddingMinusBorder as C, componentPaddingMinusBorderDesktop as tt, typography as W, componentPaddingXUsingComponentGap as et } from "../classNames.js";
+import { Label as rt } from "./Label.js";
+import { Icon as k } from "./Icon.js";
+import { formatDecimalValue as w, formatCurrencyDisplay as E, getDecimalPlaceholder as nt } from "../utils/formatting.js";
+import { Paragraph as at } from "./Paragraph.js";
+function st(e, i) {
+  if (!e || !i)
+    return !1;
+  const y = Number(e.replace(/,/g, "")), l = Number(i.replace(/,/g, ""));
+  return !Number.isNaN(y) && !Number.isNaN(l) && y === l;
+}
+function ct({
+  id: e,
+  testid: i,
+  before: y,
+  after: l,
+  rightAdornment: h,
+  type: A,
+  label: g,
+  error: r,
+  className: M,
+  align: R = "left",
+  caption: S,
+  required: $,
+  selectOnFocus: U,
+  removeRoundness: d,
+  inputContainerRef: N,
+  removeBorder: H,
+  wrapperClassName: D,
+  isFocused: L,
+  secondaryIconColor: P,
+  fullWidth: j = !0,
+  width: o,
+  wrapperRef: B,
+  autocompletePadding: G = !1,
+  ...m
+}) {
+  const X = {
+    "data-error": r && !L || null,
+    "data-focus": L || null
+  }, I = Y(null), T = e ? `${e}-input` : void 0;
+  q(() => {
+    const n = I.current, x = () => {
+      n?.select();
+    };
+    if (U)
+      return I.current?.addEventListener("focus", x), () => {
+        n?.removeEventListener("focus", x);
+      };
+  }, [U]);
+  const z = f(
+    j ? "w-full" : "w-fit",
+    "flex flex-row items-center",
+    "bg-background-action-secondary-normal caret-icon-on-action-secondary-normal",
+    Q,
+    F,
+    "outline-transparent outline-2 -outline-offset-2",
+    !G && C,
+    G && tt,
+    !d && "rounded-base",
+    !H && "border border-border-primary-normal",
+    "relative"
+  ), J = f(
+    "has-[[data-focus]]:border-transparent has-[[data-focus]]:outline-border-primary-focus focus-within:border-transparent focus-within:outline-border-primary-focus"
+  ), t = f(
+    "has-disabled:bg-background-action-secondary-disabled"
+  ), a = f(
+    "has-[input:not(:disabled):read-only]:outline-none has-[input:not(:disabled):read-only]:bg-transparent has-[input:not(:disabled):read-only]:border-transparent has-[input:not(:disabled):read-only]:pl-0"
+  ), c = f(
+    "has-[[data-error]]:border-transparent has-[[data-error]]:not-focus-within:outline-border-primary-error has-[[data-error]]:not-focus-within:outline-1"
+  );
+  return /* @__PURE__ */ O(
+    "label",
+    {
+      id: e,
+      "data-testid": i,
+      htmlFor: T,
+      ref: N,
+      className: f(
+        "w-full flex flex-col",
+        "block",
+        "text-text-primary-normal has-disabled:text-text-primary-disabled",
+        Q
+      ),
+      style: {
+        ...m.style
+      },
+      children: [
+        g && /* @__PURE__ */ O("div", { className: f("flex items-center", Q), children: [
+          /* @__PURE__ */ s(
+            rt,
+            {
+              id: e ? `${e}-label` : void 0,
+              color: r ? "text-primary-error" : void 0,
+              className: f(
+                m.disabled || m.readOnly ? "cursor-default" : "cursor-pointer"
+              ),
+              children: g
+            }
+          ),
+          $ && /* @__PURE__ */ s(
+            "span",
+            {
+              className: f(W.label, "text-text-critical-normal"),
+              children: "*"
+            }
+          )
+        ] }),
+        /* @__PURE__ */ O(
+          "div",
+          {
+            className: f(
+              z,
+              !m.disabled && c,
+              J,
+              t,
+              a,
+              D
+            ),
+            ref: (n) => {
+              B && (B.current = n);
+            },
+            children: [
+              y,
+              /* @__PURE__ */ s(
+                "input",
+                {
+                  ref: (n) => {
+                    I.current = n;
+                  },
+                  type: A,
+                  required: $,
+                  ...m,
+                  ...X,
+                  id: T,
+                  "data-testid": i ? `${i}-input` : void 0,
+                  className: f(
+                    "flex-1 outline-none w-full max-w-full min-h-6 min-w-0",
+                    "[appearance:textfield] [&::-webkit-outer-spin-button]:appearance-none [&::-webkit-inner-spin-button]:appearance-none",
+                    "placeholder:text-text-secondary-normal disabled:text-text-secondary-disabled",
+                    R === "right" && "text-right",
+                    R === "center" && "text-center",
+                    et,
+                    W.paragraph,
+                    M,
+                    m.readOnly && !m.disabled && "!px-0"
+                  ),
+                  style: { ...m.style, width: o }
+                }
+              ),
+              P ? /* @__PURE__ */ s("span", { className: "contents text-text-secondary-normal", children: l }) : l,
+              h
+            ]
+          }
+        ),
+        S && /* @__PURE__ */ s(
+          "div",
+          {
+            id: e ? `${e}-caption` : void 0,
+            "data-testid": i ? `${i}-caption` : void 0,
+            className: f(W.caption),
+            children: S
+          }
+        )
+      ]
+    }
+  );
+}
+function _({
+  variant: e = "default",
+  decimals: i,
+  uom: y,
+  currencyFormat: l = !1,
+  formatOnBlur: h = !1,
+  removeSearchIcon: A,
+  value: g,
+  onChange: r,
+  onBlur: M,
+  onClear: R,
+  id: S,
+  testid: $,
+  rightAdornment: U,
+  ...d
+}) {
+  const [N, H] = Z(""), [D, L] = Z(""), P = Y(!1), j = Y(""), o = (t, a) => {
+    j.current = t, H(t), L(a);
+  };
+  q(() => {
+    const t = g?.toString() ?? "", a = e === "currency" || e === "uom" && l;
+    if (!t) {
+      o("", "");
+      return;
+    }
+    if (!a) {
+      o(t, t);
+      return;
+    }
+    if (P.current && st(j.current, t))
+      return;
+    if (h && P.current) {
+      o(t, t);
+      return;
+    }
+    const c = w(t, i ?? 2);
+    o(c, E(c));
+  }, [g, e, l, i, h]);
+  const B = () => {
+    const t = {
+      ...d,
+      id: S,
+      ...nt(i),
+      value: g
+    };
+    switch (e) {
+      case "search":
+        return {
+          ...t,
+          placeholder: d.placeholder ?? "Search",
+          className: "!mr-6",
+          value: D
+        };
+      case "finder":
+        return t;
+      case "currency":
+        return {
+          ...t,
+          align: "right",
+          type: "text",
+          inputMode: "decimal",
+          value: D
+        };
+      case "percentage":
+      case "uom":
+        return {
+          ...t,
+          type: l ? "text" : "number",
+          align: "right",
+          inputMode: l ? "decimal" : void 0,
+          value: l ? D : g
+        };
+      default:
+        return t;
+    }
+  }, G = () => {
+    if (d.before) return d.before;
+    switch (e) {
+      case "search":
+        return A ? null : /* @__PURE__ */ s("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ s(k, { name: "search" }) });
+      case "currency":
+        return /* @__PURE__ */ s("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ s(k, { name: "attach_money" }) });
+      case "uom":
+        return l ? /* @__PURE__ */ s("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ s(k, { name: "attach_money" }) }) : null;
+      default:
+        return null;
+    }
+  }, m = () => {
+    if (d.after) return d.after;
+    switch (e) {
+      case "search":
+        return D.length > 0 && !d.readOnly ? /* @__PURE__ */ s(
+          k,
+          {
+            id: S ? `${S}-clear-button` : void 0,
+            testid: $ ? `${$}-clear-button` : void 0,
+            name: "close",
+            onClick: X,
+            className: "cursor-pointer absolute right-2 bottom-2/4 translate-y-2/4"
+          }
+        ) : null;
+      case "finder":
+        return /* @__PURE__ */ s(k, { name: "search" });
+      case "uom":
+        return y ? /* @__PURE__ */ s(at, { color: "text-secondary-normal", children: y.toUpperCase() }) : null;
+      case "percentage":
+        return /* @__PURE__ */ s("span", { className: "text-icon-primary-normal contents", children: /* @__PURE__ */ s(k, { name: "percent" }) });
+      default:
+        return null;
+    }
+  }, X = () => {
+    o("", ""), r && typeof r == "function" && r({
+      target: { value: "" }
+    }), R?.();
+  }, I = (t) => {
+    const a = t.target.value, c = d.max != null ? Number(String(d.max).replace(/,/g, "")) : void 0;
+    if (e === "currency") {
+      const n = a.replace(/,/g, "");
+      if (n === "") {
+        if (o("", ""), r) {
+          const u = {
+            ...t,
+            target: { ...t.target, value: "" }
+          };
+          r(u);
+        }
+        return;
+      }
+      if (!/^\d*\.?\d*$/.test(n)) return;
+      const b = n.split("."), v = i ?? 2;
+      if (b.length === 2 && b[1].length > v) return;
+      const p = Number(n);
+      if (!isNaN(p) && c != null && p > c) {
+        const u = c, V = w(
+          u.toString(),
+          v
+        );
+        if (o(
+          V,
+          h ? V : E(V)
+        ), r) {
+          const K = {
+            ...t,
+            target: { ...t.target, value: u.toString() }
+          };
+          r(K);
+        }
+        return;
+      }
+      if (o(n, h ? n : E(n)), !isNaN(p) && r) {
+        const u = {
+          ...t,
+          target: { ...t.target, value: p.toString() }
+        };
+        r(u);
+      }
+      return;
+    }
+    if (e === "uom" && l) {
+      const n = a.replace(/,/g, "");
+      if (n === "") {
+        if (o("", ""), r) {
+          const u = {
+            ...t,
+            target: { ...t.target, value: "" }
+          };
+          r(u);
+        }
+        return;
+      }
+      if (!/^\d*\.?\d*$/.test(n)) return;
+      const b = n.split("."), v = i ?? 2;
+      if (b.length === 2 && b[1].length > v) return;
+      const p = Number(n);
+      if (!isNaN(p) && c != null && p > c) {
+        const u = c, V = w(
+          u.toString(),
+          v
+        );
+        if (o(
+          V,
+          E(V)
+        ), r) {
+          const K = {
+            ...t,
+            target: { ...t.target, value: u.toString() }
+          };
+          r(K);
+        }
+        return;
+      }
+      if (o(n, E(n)), !isNaN(p) && r) {
+        const u = {
+          ...t,
+          target: { ...t.target, value: p.toString() }
+        };
+        r(u);
+      }
+      return;
+    }
+    if (e === "uom" && t.target.type === "number") {
+      const n = Number(a);
+      if (!isNaN(n) && c != null && n > c) {
+        const x = c, b = w(
+          x.toString(),
+          i ?? 0
+        );
+        if (o(b, b), typeof r == "function") {
+          const v = {
+            ...t,
+            target: { ...t.target, value: x.toString() }
+          };
+          r(v);
+        }
+        return;
+      }
+      o(a, a), typeof r == "function" && r(t);
+      return;
+    }
+    o(a, a), typeof r == "function" && r(t);
+  }, T = (t) => {
+    if (P.current = !1, !N) {
+      M?.(t);
+      return;
+    }
+    if (e === "currency") {
+      const a = w(N, i ?? 2);
+      o(a, E(a));
+      const c = Number(a);
+      if (!isNaN(c) && r) {
+        const n = {
+          ...t,
+          target: { ...t.target, value: c.toString() }
+        };
+        r(n);
+      }
+    } else if (e === "uom")
+      if (l) {
+        const a = w(N, i ?? 2);
+        o(a, E(a));
+        const c = Number(a);
+        if (!isNaN(c) && r) {
+          const n = {
+            ...t,
+            target: { ...t.target, value: c.toString() }
+          };
+          r(n);
+        }
+      } else {
+        const a = w(t.target.value, i);
+        t.target.value = a;
+      }
+    M?.(t);
+  }, z = (t) => {
+    P.current = !0, h && (e === "currency" || e === "uom" && l) && o(N, N), d.onFocus?.(t);
+  }, J = B();
+  return /* @__PURE__ */ s(
+    ct,
+    {
+      ...J,
+      before: G(),
+      after: m(),
+      onFocus: z,
+      onChange: I,
+      onBlur: T,
+      testid: $,
+      rightAdornment: U
+    }
+  );
+}
+function bt(e) {
+  return /* @__PURE__ */ s(_, { ...e, variant: "finder" });
+}
+function yt(e) {
+  return /* @__PURE__ */ s(_, { ...e, variant: "uom" });
+}
+function ht(e) {
+  return /* @__PURE__ */ s(
+    _,
+    {
+      ...e,
+      variant: "currency",
+      decimals: e.decimals ?? 2
+    }
+  );
+}
+function gt(e) {
+  return /* @__PURE__ */ s(_, { ...e, variant: "percentage" });
+}
+export {
+  ht as Currency,
+  bt as Finder,
+  _ as Input,
+  ct as InputBase,
+  gt as Percentage,
+  yt as UOM
+};

package/dist/components/InputGroup.js

@@ -0,0 +1,45 @@
+"use client";
+import { jsxs as f, jsx as a } from "react/jsx-runtime";
+import { Label as x } from "./Label.js";
+import { clsx as t } from "../node_modules/clsx/dist/clsx.js";
+import { useId as v } from "react";
+import { layoutGap as b, componentGap as u } from "../classNames.js";
+function k({
+  id: o,
+  testid: e,
+  label: l,
+  orientation: r = "horizontal",
+  error: n = !1,
+  children: c,
+  caption: p,
+  ...i
+}) {
+  const m = v(), d = o ? `${o}-label` : void 0, s = e ? `${e}-label` : void 0;
+  return /* @__PURE__ */ f("div", { id: o, "data-testid": e, ...i, className: t("flex flex-col", u), children: [
+    l && /* @__PURE__ */ a(
+      x,
+      {
+        id: d,
+        testid: s,
+        as: "label",
+        className: t({ "!text-text-primary-error": n }),
+        htmlFor: m,
+        children: l
+      }
+    ),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: t(
+          "flex *:py-mobile-component-padding desktop:*:py-desktop-component-padding compact:*:py-desktop-compact-component-padding",
+          r === "vertical" ? "flex-col" : t("items-center", b)
+        ),
+        children: c
+      }
+    ),
+    p && /* @__PURE__ */ a("div", { id: o ? `${o}-caption` : void 0, "data-testid": e ? `${e}-caption` : void 0, children: p })
+  ] });
+}
+export {
+  k as InputGroup
+};

package/dist/components/Label.js

@@ -0,0 +1,37 @@
+import { jsx as s } from "react/jsx-runtime";
+import { clsx as c } from "../node_modules/clsx/dist/clsx.js";
+import { typography as i, componentPaddingXUsingComponentGap as p } from "../classNames.js";
+function g({
+  as: r = "span",
+  padded: n,
+  className: m,
+  color: e,
+  align: t,
+  id: l,
+  testid: a,
+  ...o
+}) {
+  return /* @__PURE__ */ s(
+    r,
+    {
+      id: l,
+      "data-testid": a,
+      className: c(
+        i.label,
+        t === "left" && "text-left",
+        t === "center" && "text-center",
+        t === "right" && "text-right",
+        m,
+        n && p
+      ),
+      ...o,
+      style: {
+        ...o.style,
+        color: e ? `var(--color-${e})` : void 0
+      }
+    }
+  );
+}
+export {
+  g as Label
+};