@dmsi/wedgekit-react 1.0.1 → 2.0.1

package/dist/components/Radio.js

@@ -0,0 +1,113 @@
+"use client";
+import { jsxs as d, jsx as o } from "react/jsx-runtime";
+import { clsx as r } from "../node_modules/clsx/dist/clsx.js";
+import { baseTransition as x, componentGap as g } from "../classNames.js";
+import { Paragraph as f } from "./Paragraph.js";
+function $({
+  className: i,
+  label: s,
+  error: c,
+  disabled: e,
+  checked: l,
+  readOnly: n,
+  id: p,
+  testid: a,
+  ...v
+}) {
+  const t = p, b = e ? "text-primary-disabled" : c ? "text-primary-error" : "text-primary-normal", h = r(
+    !c && !e && "border-border-primary-normal peer-hover:border-border-action-hover peer-hover:bg-background-action-secondary-hover peer-focus:border-border-action-hover peer-focus:bg-background-action-secondary-hover peer-active:border-border-action-active peer-active:bg-background-action-secondary-active peer-checked:border-0 peer-checked:bg-background-action-secondary-hover"
+  ), y = r(
+    c && !e && "border-border-action-critical-normal peer-hover:border-border-action-critical-hover peer-hover:bg-background-action-critical-secondary-hover peer-focus:border-border-action-critical-hover peer-focus:bg-background-action-critical-secondary-hover peer-active:border-border-action-critical-active peer-active:bg-background-action-secondary-active peer-checked:bg-background-action-critical-secondary-hover peer-checked:border-0 "
+  ), m = r(
+    e && "peer-disabled:bg-background-action-secondary-disabled peer-disabled:border-border-primary-normal peer-checked:border-0"
+  ), u = r(
+    n && "peer-read-only:bg-background-action-secondary-disabled peer-read-only:border-border-primary-normal peer-checked:border-0"
+  );
+  return /* @__PURE__ */ d(
+    "label",
+    {
+      htmlFor: t,
+      "data-testid": a,
+      className: r(
+        "flex items-center",
+        g,
+        e ? "cursor-default" : "cursor-pointer",
+        i
+      ),
+      children: [
+        /* @__PURE__ */ d("div", { className: "relative", children: [
+          /* @__PURE__ */ o(
+            "input",
+            {
+              id: t,
+              "data-testid": a ? `${a}-input` : void 0,
+              type: "radio",
+              className: "sr-only peer",
+              disabled: e,
+              checked: l,
+              readOnly: n,
+              ...v
+            }
+          ),
+          /* @__PURE__ */ o(
+            "div",
+            {
+              className: r(
+                "size-6 rounded-full border flex items-center justify-center",
+                x,
+                h,
+                y,
+                m,
+                u
+              ),
+              children: l && /* @__PURE__ */ o(
+                k,
+                {
+                  className: r(
+                    "transition-colors",
+                    !c && !e && "text-icon-on-action-secondary-normal hover:text-icon-on-action-secondary-hover active:text-icon-on-action-secondary-active peer-hover:text-icon-on-action-secondary-hover peer-focus:text-icon-on-action-secondary-hover peer-active:text-icon-on-action-secondary-active",
+                    c && !e && "text-icon-action-critical-secondary-normal hover:text-icon-action-critical-secondary-hover active:text-icon-action-critical-secondary-active peer-hover:text-icon-action-critical-secondary-hover peer-focus:text-icon-action-critical-secondary-hover peer-active:text-icon-action-critical-secondary-active",
+                    e && "text-icon-on-action-secondary-disabled",
+                    n && "text-icon-on-action-secondary-disabled"
+                  )
+                }
+              )
+            }
+          )
+        ] }),
+        s && /* @__PURE__ */ o(f, { id: t ? `${t}-label` : void 0, testid: a ? `${a}-label` : void 0, padded: !0, color: b, children: s })
+      ]
+    }
+  );
+}
+function k({ className: i }) {
+  return /* @__PURE__ */ d(
+    "svg",
+    {
+      className: i,
+      xmlns: "http://www.w3.org/2000/svg",
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      children: [
+        /* @__PURE__ */ o(
+          "rect",
+          {
+            x: "1",
+            y: "1",
+            width: "22",
+            height: "22",
+            rx: "11",
+            stroke: "currentColor",
+            strokeWidth: "2"
+          }
+        ),
+        /* @__PURE__ */ o("rect", { x: "4", y: "4", width: "16", height: "16", rx: "8", fill: "currentColor" })
+      ]
+    }
+  );
+}
+export {
+  $ as Radio
+};

package/dist/components/Search.js

@@ -0,0 +1,89 @@
+"use client";
+import { jsxs as k, Fragment as C, jsx as R } from "react/jsx-runtime";
+import { useRef as a, useState as S, useId as $, useEffect as M } from "react";
+import { Input as j } from "./Input.js";
+function T({
+  id: r,
+  testid: u,
+  label: q,
+  error: v,
+  children: A,
+  readOnly: f,
+  renderMenu: s,
+  onClick: F,
+  wrapperClassName: I,
+  removeRoundness: g,
+  autocompletePadding: x = !1,
+  ...n
+}) {
+  const m = a(null), d = a(null), p = a(!0), [c, l] = S(!1), [D, w] = S(!1), h = `search-menu-${$()}`;
+  return M(() => {
+    if (p.current) {
+      p.current = !1;
+      return;
+    }
+    m.current?.focus();
+  }, [n.value]), /* @__PURE__ */ k(C, { children: [
+    /* @__PURE__ */ R(
+      j,
+      {
+        id: r,
+        testid: u,
+        variant: "search",
+        inputContainerRef: d,
+        ref: m,
+        label: q,
+        wrapperClassName: I,
+        autocompletePadding: x,
+        onClick: (t) => {
+          if (!(n.disabled || f)) {
+            if (D) {
+              w(!1);
+              return;
+            }
+            F?.(t), l(!c);
+          }
+        },
+        onClear: () => {
+          w(!0);
+        },
+        onKeyDown: (t) => {
+          if (l(!0), ["ArrowUp", "ArrowDown"].includes(t.key)) {
+            t.preventDefault();
+            const o = document.querySelector(
+              `[data-menu="${h}"]`
+            ), y = o?.querySelector("[data-selected]");
+            if (y) {
+              const e = Array.from(
+                o?.querySelectorAll('[role="menuitem"]') || []
+              ), O = e.indexOf(y);
+              let i;
+              t.key === "ArrowDown" ? i = e[O + 1] || e[0] : i = e[O - 1] || e[e.length - 1], i?.focus();
+            } else
+              (t.key === "ArrowDown" ? o?.querySelector('[role="menuitem"]') : o?.querySelector(
+                '[role="menuitem"]:last-child'
+              ))?.focus();
+          }
+        },
+        error: v,
+        readOnly: f,
+        removeRoundness: g,
+        isFocused: s && c,
+        ...n
+      }
+    ),
+    s ? s({
+      id: r ? `${r}-menu` : void 0,
+      testid: u ? `${u}-menu` : void 0,
+      positionTo: d,
+      show: c,
+      setShow: l,
+      topOffset: n.caption ? -16 : null,
+      autoFocusOff: !0,
+      menuName: h
+    }) : A
+  ] });
+}
+export {
+  T as Search
+};

package/dist/components/SearchResultImage/index.js

@@ -0,0 +1,26 @@
+import { jsx as r, Fragment as n } from "react/jsx-runtime";
+import { useState as s } from "react";
+import { ImagePlaceholder as g } from "../ImagePlaceholder.js";
+function u({
+  width: e = 20,
+  height: o = 20,
+  src: a,
+  alt: l
+}) {
+  const [m, t] = s(!1);
+  return /* @__PURE__ */ r(n, { children: m || !a ? /* @__PURE__ */ r(g, { width: e, height: o }) : /* @__PURE__ */ r(
+    "img",
+    {
+      src: a,
+      alt: l,
+      width: e,
+      height: o,
+      draggable: !1,
+      loading: "lazy",
+      onError: () => t(!0)
+    }
+  ) });
+}
+export {
+  u as SearchResultImage
+};

package/dist/components/Select.js

@@ -0,0 +1,122 @@
+"use client";
+import { jsxs as L, Fragment as U, jsx as p } from "react/jsx-runtime";
+import { useRef as f, useState as w, useId as _, useEffect as z, useCallback as G } from "react";
+import { InputBase as H } from "./Input.js";
+import { Icon as J } from "./Icon.js";
+import { clsx as x } from "../node_modules/clsx/dist/clsx.js";
+function b({
+  id: l,
+  testid: I,
+  label: Q,
+  error: T,
+  children: C,
+  readOnly: m,
+  renderMenu: k,
+  onClick: R,
+  className: F,
+  wrapperClassName: K,
+  removeRoundness: N,
+  displayValue: B,
+  value: O,
+  searchable: r,
+  onChange: A,
+  ...a
+}) {
+  const S = f(null), y = f(null), [t, $] = w(!1), [h, v] = w(""), g = `select-menu-${_()}`, u = f(""), c = f(null), [j, d] = w("");
+  z(() => {
+    r && t && S.current?.focus();
+  }, [r, t]);
+  const E = G(() => {
+    y.current?.querySelector("input")?.focus();
+  }, []);
+  function i(e) {
+    $(e), e || (v(""), d(""), u.current = "", c.current && clearTimeout(c.current), r && requestAnimationFrame(E));
+  }
+  const s = r && t;
+  return /* @__PURE__ */ L(U, { children: [
+    /* @__PURE__ */ p(
+      H,
+      {
+        id: l,
+        testid: I,
+        inputContainerRef: y,
+        ref: S,
+        label: Q,
+        after: !m && /* @__PURE__ */ p(
+          "span",
+          {
+            className: x(
+              a.disabled ? "text-icon-action-primary-disabled" : "text-icon-action-primary-normal",
+              "contents"
+            ),
+            children: /* @__PURE__ */ p(J, { name: "keyboard_arrow_down" })
+          }
+        ),
+        maxLength: s ? void 0 : 0,
+        className: x(!s && "!caret-transparent !cursor-default", F),
+        wrapperClassName: K,
+        onKeyDown: (e) => {
+          if (s && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+            e.preventDefault();
+            const n = document.querySelector(
+              `[data-menu="${g}"]`
+            ), D = n?.querySelector("[data-selected]");
+            if (D) {
+              const o = Array.from(
+                n?.querySelectorAll('[role="menuitem"]') ?? []
+              ), q = o.indexOf(D);
+              (e.key === "ArrowDown" ? o[q + 1] ?? o[0] : o[q - 1] ?? o[o.length - 1])?.focus();
+            } else
+              (e.key === "ArrowDown" ? n?.querySelector('[role="menuitem"]') : n?.querySelector('[role="menuitem"]:last-child'))?.focus();
+            return;
+          }
+          if (!t && (e.key === "ArrowDown" || e.key === "ArrowUp")) {
+            e.preventDefault(), i(!0);
+            return;
+          }
+          if (!t && (e.key === " " || e.key === "Enter")) {
+            e.preventDefault(), e.target.click();
+            return;
+          }
+          if (t && !r && e.key === " " && !u.current) {
+            e.preventDefault(), i(!1);
+            return;
+          }
+          if (!r && e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
+            e.preventDefault(), c.current && clearTimeout(c.current);
+            const n = u.current + e.key.toLowerCase();
+            u.current = n, c.current = setTimeout(() => {
+              u.current = "", d("");
+            }, 1e3), d(n), t || i(!0);
+          }
+        },
+        onClick: (e) => {
+          a.disabled || m || (i(!t), R?.(e));
+        },
+        error: T,
+        readOnly: m,
+        removeRoundness: N,
+        isFocused: t,
+        ...a,
+        onChange: (e) => {
+          s && v(e.target.value), A?.(e);
+        },
+        value: s ? h : B ?? O ?? (A ? "" : void 0)
+      }
+    ),
+    k ? k({
+      id: l ? `${l}-menu` : void 0,
+      positionTo: y,
+      show: t,
+      setShow: i,
+      topOffset: a.caption ? -16 : null,
+      searchQuery: r ? h : void 0,
+      autoFocusOff: r ? !0 : void 0,
+      menuName: g,
+      typeAheadQuery: r ? void 0 : j || void 0
+    }) : C
+  ] });
+}
+export {
+  b as Select
+};

package/dist/components/SideMenu.js

@@ -0,0 +1,24 @@
+import { jsx as p } from "react/jsx-runtime";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
+function l({
+  children: o,
+  cardStyle: a = !1,
+  id: d,
+  testid: t
+}) {
+  return /* @__PURE__ */ p(
+    "div",
+    {
+      id: d,
+      "data-testid": t,
+      className: e(
+        "flex flex-col",
+        a && "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding rounded shadow-4 bg-background-primary-normal"
+      ),
+      children: o
+    }
+  );
+}
+export {
+  l as SideMenu
+};

package/dist/components/SideMenuGroup.js

@@ -0,0 +1,80 @@
+"use client";
+import { jsxs as l, Fragment as x, jsx as t } from "react/jsx-runtime";
+import { clsx as o } from "../node_modules/clsx/dist/clsx.js";
+import { useState as b, useEffect as g } from "react";
+import { Label as h } from "./Label.js";
+import { baseTransition as k } from "../classNames.js";
+import { Stack as y } from "./Stack.js";
+import { Icon as N } from "./Icon.js";
+function A({
+  id: e,
+  testid: a,
+  label: d,
+  groupIndentLevel: r = 1,
+  collapsed: n = !1,
+  disabled: i = !1,
+  children: m
+}) {
+  const [s, c] = b(n);
+  g(() => {
+    c(n);
+  }, [n]);
+  const p = () => {
+    i || c((f) => !f);
+  }, u = i ? o("text-text-action-disabled pointer-events-none") : o("text-text-primary-normal"), v = {
+    "data-disabled": i || null
+  };
+  return /* @__PURE__ */ l(x, { children: [
+    /* @__PURE__ */ t(
+      "div",
+      {
+        id: e,
+        "data-testid": a,
+        className: o(
+          "group/sm-group flex rounded cursor-pointer",
+          "bg-transparent",
+          "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
+          "active:bg-background-action-secondary-active active:text-text-action-active",
+          k,
+          u
+        ),
+        onClick: p,
+        ...v,
+        children: /* @__PURE__ */ l(
+          y,
+          {
+            id: e ? `${e}-stack` : void 0,
+            horizontal: !0,
+            items: "center",
+            sizing: "component",
+            padding: !0,
+            children: [
+              r === 2 && /* @__PURE__ */ t("div", { className: "pl-6" }),
+              r === 3 && /* @__PURE__ */ t("div", { className: "pl-13" }),
+              r === 4 && /* @__PURE__ */ t("div", { className: "pl-20" }),
+              /* @__PURE__ */ t(
+                N,
+                {
+                  name: "keyboard_arrow_down",
+                  className: o(
+                    "transition duration-100 ease-in-out",
+                    "pointer-events-none",
+                    {
+                      "rotate-180": !s
+                    }
+                  ),
+                  size: 24
+                }
+              ),
+              /* @__PURE__ */ t(h, { id: e ? `${e}-label` : void 0, testid: a ? `${a}-label` : void 0, padded: !0, children: d })
+            ]
+          }
+        )
+      }
+    ),
+    !s && m
+  ] });
+}
+export {
+  A as SideMenuGroup
+};

package/dist/components/SideMenuItem.js

@@ -0,0 +1,79 @@
+import { jsx as e, jsxs as S } from "react/jsx-runtime";
+import { clsx as t } from "../node_modules/clsx/dist/clsx.js";
+import { baseTransition as y, componentPaddingMinus2pxBorder as g } from "../classNames.js";
+import { Stack as f } from "./Stack.js";
+import { Paragraph as N } from "./Paragraph.js";
+function E({
+  id: a,
+  as: d = "a",
+  testid: s,
+  label: l,
+  leftIcon: c,
+  rightIcon: i,
+  href: m,
+  groupIndentLevel: r,
+  selected: n = !1,
+  disabled: o = !1,
+  onClick: b
+}) {
+  const p = !n && !o && t("border-transparent"), v = !n && o && t("bg-transparent border-transparent"), x = n && !o && t(
+    "bg-background-action-secondary-hover border-border-action-normal",
+    "hover:border-border-action-hover",
+    "active:border-border-action-active"
+  ), u = n && o && t(
+    "bg-background-action-secondary-disabled border-border-action-disabled"
+  ), h = o ? t("text-text-action-disabled pointer-events-none") : t("text-text-primary-normal");
+  return /* @__PURE__ */ e(
+    d,
+    {
+      id: a,
+      "data-testid": s,
+      href: m,
+      className: t(
+        "group flex w-full rounded border-2 cursor-pointer",
+        "hover:bg-background-action-secondary-hover hover:text-text-action-hover",
+        "active:bg-background-action-secondary-active active:text-text-action-active",
+        y,
+        g,
+        p,
+        v,
+        x,
+        u,
+        h
+      ),
+      onClick: b,
+      children: /* @__PURE__ */ S(
+        f,
+        {
+          id: a ? `${a}-stack` : void 0,
+          horizontal: !0,
+          items: "center",
+          sizing: "component",
+          children: [
+            r === 2 && /* @__PURE__ */ e("div", { className: "pl-6" }),
+            r === 3 && /* @__PURE__ */ e("div", { className: "pl-13" }),
+            r === 4 && /* @__PURE__ */ e("div", { className: "pl-20" }),
+            r === 5 && /* @__PURE__ */ e("div", { className: "pl-27" }),
+            c && c,
+            !c && r && /* @__PURE__ */ e("div", { className: "w-6 h-6" }),
+            /* @__PURE__ */ e(
+              N,
+              {
+                id: a ? `${a}-label` : void 0,
+                testid: s ? `${s}-label` : void 0,
+                as: "span",
+                padded: !0,
+                className: "mr-auto !leading-6",
+                children: l
+              }
+            ),
+            i && i
+          ]
+        }
+      )
+    }
+  );
+}
+export {
+  E as SideMenuItem
+};

package/dist/components/SimpleTable.js

@@ -0,0 +1,60 @@
+import { jsx as e, jsxs as h } from "react/jsx-runtime";
+import { Subheader as c } from "./Subheader.js";
+import { clsx as n } from "../node_modules/clsx/dist/clsx.js";
+import { Stack as b } from "./Stack.js";
+function v({
+  columns: l,
+  data: i,
+  additionalRows: t,
+  testid: m
+}) {
+  const p = t && t.length > 0 ? [...i, ...t] : i;
+  return /* @__PURE__ */ e(
+    b,
+    {
+      elevation: 4,
+      rounded: !0,
+      overflowX: "hidden",
+      overflowY: "hidden",
+      testid: m,
+      children: /* @__PURE__ */ h("table", { className: "w-full border-collapse text-left text-sm border overflow-hidden rounded border-border-primary-normal", children: [
+        /* @__PURE__ */ e("thead", { children: /* @__PURE__ */ e("tr", { className: "bg-background-primary-normal divide-x divide-border-primary-normal", children: l.map((d, o) => /* @__PURE__ */ e(
+          "th",
+          {
+            scope: "col",
+            className: n(
+              "p-mobile-layout-padding desktop:p-desktop-layout-padding font-semibold text-text-primary-normal",
+              d.meta?.headerWidth ? d.meta.headerWidth : "w-2/3"
+            ),
+            children: /* @__PURE__ */ e(c, { children: d.header?.toString() })
+          },
+          o
+        )) }) }),
+        /* @__PURE__ */ e("tbody", { children: p.map((d, o) => /* @__PURE__ */ e(
+          "tr",
+          {
+            className: "border-t border-border-primary-normal divide-x divide-border-primary-normal",
+            children: l.map((a, s) => {
+              const r = (a.id ? d[a.id] : null) ?? null;
+              return /* @__PURE__ */ e(
+                "td",
+                {
+                  className: n(
+                    "p-mobile-layout-padding desktop:p-desktop-layout-padding align-middle text-text-primary-normal",
+                    a.meta?.headerWidth
+                  ),
+                  children: r != null ? typeof r == "string" || typeof r == "number" ? r.toString() : r : ""
+                },
+                s
+              );
+            })
+          },
+          o
+        )) })
+      ] })
+    }
+  );
+}
+export {
+  v as SimpleTable
+};

package/dist/components/SkeletonParagraph.js

@@ -0,0 +1,24 @@
+import { jsx as r } from "react/jsx-runtime";
+function i({
+  className: a = "",
+  heightClassName: e = "h-6",
+  size: s = "large",
+  testid: l
+}) {
+  return /* @__PURE__ */ r(
+    "div",
+    {
+      "aria-label": "Loading content",
+      role: "status",
+      className: `skeleton-paragraph ${e} ${{
+        small: "min-w-10 w-1/4",
+        medium: "min-w-20 w-1/2",
+        large: "min-w-32 w-full"
+      }[s]} rounded-xs ${a}`,
+      "data-testid": l
+    }
+  );
+}
+export {
+  i as SkeletonParagraph
+};

package/dist/components/Spinner.d.ts

@@ -1,5 +1,5 @@
 type SpinnerProps = {
-    size?: "small" | "large";
+    size?: 'small' | 'large';
     testid?: string;
 };
 export declare function Spinner({ size, testid }: SpinnerProps): import("react/jsx-runtime").JSX.Element;

package/dist/components/Spinner.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,KAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,OAAO,CAAE,EAAE,IAAc,EAAE,MAAM,EAAE,EAAE,YAAY,2CAuBhE"}
+{"version":3,"file":"Spinner.d.ts","sourceRoot":"","sources":["../../src/components/Spinner.tsx"],"names":[],"mappings":"AAAA,KAAK,YAAY,GAAG;IAClB,IAAI,CAAC,EAAE,OAAO,GAAG,OAAO,CAAC;IACzB,MAAM,CAAC,EAAE,MAAM,CAAC;CACjB,CAAC;AAEF,wBAAgB,OAAO,CAAC,EAAE,IAAc,EAAE,MAAM,EAAE,EAAE,YAAY,2CAuB/D"}

package/dist/components/Spinner.js

@@ -0,0 +1,30 @@
+import { jsxs as o, jsx as c } from "react/jsx-runtime";
+function e({ size: r = "small", testid: a }) {
+  const i = r === "large" ? 48 : 24;
+  return /* @__PURE__ */ o(
+    "svg",
+    {
+      "data-testid": a,
+      width: i,
+      height: i,
+      viewBox: "0 0 24 24",
+      xmlns: "http://www.w3.org/2000/svg",
+      fill: "var(--color-icon-action-primary-normal)",
+      className: "spinner",
+      "aria-label": "Loading",
+      children: [
+        /* @__PURE__ */ c("circle", { cx: "12", cy: "4", r: "2", opacity: "1" }),
+        /* @__PURE__ */ c("circle", { cx: "17.666", cy: "6.334", r: "2", opacity: "0.125" }),
+        /* @__PURE__ */ c("circle", { cx: "20", cy: "12", r: "2", opacity: "0.25" }),
+        /* @__PURE__ */ c("circle", { cx: "17.666", cy: "17.666", r: "2", opacity: "0.375" }),
+        /* @__PURE__ */ c("circle", { cx: "12", cy: "20", r: "2", opacity: "0.5" }),
+        /* @__PURE__ */ c("circle", { cx: "6.334", cy: "17.666", r: "2", opacity: "0.625" }),
+        /* @__PURE__ */ c("circle", { cx: "4", cy: "12", r: "2", opacity: "0.75" }),
+        /* @__PURE__ */ c("circle", { cx: "6.334", cy: "6.334", r: "2", opacity: "0.875" })
+      ]
+    }
+  );
+}
+export {
+  e as Spinner
+};