@dmsi/wedgekit-react 2.0.0 → 2.0.1

package/dist/classNames.js

@@ -0,0 +1,150 @@
+import { clsx as o } from "./node_modules/clsx/dist/clsx.js";
+const t = {
+  display1: o(
+    "font-sans font-semibold",
+    "text-display-1-mobile desktop:text-display-1-desktop compact:text-display-1-desktop-compact",
+    "leading-display-1-mobile desktop:leading-display-1-desktop"
+  ),
+  display2: o(
+    "font-sans font-bold",
+    "text-display-2-mobile desktop:text-display-2-desktop compact:text-display-2-desktop-compact",
+    "leading-display-2-mobile desktop:leading-display-2-desktop"
+  ),
+  heading1: o(
+    "font-sans font-semibold",
+    "text-heading-1-mobile desktop:text-heading-1-desktop compact:text-heading-1-desktop-compact",
+    "leading-heading-1-mobile desktop:leading-heading-1-desktop"
+  ),
+  heading2: o(
+    "font-sans font-normal",
+    "text-heading-2-mobile desktop:text-heading-2-desktop compact:text-heading-2-desktop-compact",
+    "leading-heading-2-mobile desktop:leading-heading-2-desktop"
+  ),
+  heading3: o(
+    "font-sans font-semibold",
+    "text-heading-3-mobile desktop:text-heading-3-desktop compact:text-heading-3-desktop-compact",
+    "leading-heading-3-mobile desktop:leading-heading-3-desktop"
+  ),
+  subheader: o(
+    "font-sans font-semibold",
+    "text-subheader-mobile desktop:text-subheader-desktop compact:text-subheader-desktop-compact",
+    "leading-subheader-mobile desktop:leading-subheader-desktop"
+  ),
+  link: o(
+    "font-sans font-normal",
+    "text-link-mobile desktop:text-link-desktop compact:text-link-desktop-compact",
+    "leading-link-mobile desktop:leading-link-desktop"
+  ),
+  buttonLabel: o(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  label: o(
+    "font-sans font-semibold",
+    "text-label-mobile desktop:text-label-desktop compact:text-label-desktop-compact",
+    "leading-label-mobile desktop:leading-label-desktop"
+  ),
+  paragraph: o(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-paragraph-mobile desktop:leading-paragraph-desktop"
+  ),
+  caption: o(
+    "font-sans font-normal",
+    "text-caption-mobile desktop:text-caption-desktop compact:text-caption-desktop-compact",
+    "leading-caption-mobile desktop:leading-caption-desktop"
+  ),
+  breadcrumb: o(
+    "font-sans font-normal",
+    "text-paragraph-mobile desktop:text-paragraph-desktop compact:text-paragraph-desktop-compact",
+    "leading-mobile-breadcrumb desktop:leading-desktop-breadcrumb"
+  )
+}, a = o(
+  "transition-colors duration-100 ease-in-out"
+), e = o(
+  "gap-mobile-component-gap desktop:gap-desktop-component-gap compact:gap-desktop-compact-component-gap"
+), n = o(
+  "mt-mobile-component-gap desktop:mt-desktop-component-gap compact:mt-desktop-compact-component-gap"
+), d = o(
+  "p-mobile-component-gap desktop:p-desktop-component-gap compact:p-desktop-compact-component-gap"
+), c = o(
+  "px-mobile-layout-group-gap desktop:px-desktop-layout-group-gap compact:px-desktop-compact-layout-group-gap"
+), s = o(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+), i = o(
+  "p-mobile-component-padding desktop:p-desktop-component-padding compact:p-desktop-compact-component-padding"
+), m = o(
+  "pb-mobile-component-padding desktop:pb-desktop-component-padding compact:pb-desktop-compact-component-padding"
+);
+o(
+  "px-mobile-component-padding desktop:px-desktop-component-padding compact:px-desktop-compact-component-padding"
+);
+const g = o(
+  "py-mobile-component-padding desktop:py-desktop-component-padding compact:py-desktop-compact-component-padding"
+), l = o(
+  "px-mobile-component-gap desktop:px-desktop-component-gap compact:px-desktop-compact-component-gap"
+), k = o(
+  "py-mobile-component-gap desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
+);
+o(
+  "py-[calc(var(--spacing-mobile-component-gap)_+_8px)] desktop:py-desktop-component-gap compact:py-desktop-compact-component-gap"
+);
+const b = o(
+  "pt-[calc(var(--spacing-mobile-component-gap)_+_8px)] desktop:pt-desktop-component-gap compact:pt-desktop-compact-component-gap"
+), r = o(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_1px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_1px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_1px)]"
+), y = o(
+  "p-[calc(var(--spacing-mobile-component-padding)_-_2px)] desktop:p-[calc(var(--spacing-desktop-component-padding)_-_2px)] compact:p-[calc(var(--spacing-desktop-compact-component-padding)_-_2px)]"
+), u = o(
+  "p-[calc(var(--spacing-desktop-component-padding)_-_1px)]"
+), x = o(
+  "p-mobile-layout-padding desktop:p-desktop-layout-padding compact:p-desktop-compact-layout-padding"
+), h = o(
+  "pb-mobile-layout-padding desktop:pb-desktop-layout-padding compact:pb-desktop-compact-layout-padding"
+), f = o(
+  "py-mobile-layout-padding desktop:py-desktop-layout-padding compact:py-desktop-compact-layout-padding"
+), _ = o(
+  "px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding"
+), P = o(
+  "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding"
+), G = o(
+  "py-mobile-container-padding desktop:py-desktop-container-padding compact:py-desktop-compact-container-padding"
+);
+o(
+  "py-mobile-layout-group-gap desktop:py-desktop-layout-group-gap compact:py-desktop-compact-layout-group-gap"
+);
+const v = o(
+  "gap-mobile-layout-group-gap desktop:gap-desktop-layout-group-gap compact:gap-desktop-compact-layout-group-gap"
+), U = o(
+  "gap-mobile-layout-gap desktop:gap-desktop-layout-gap compact:gap-desktop-compact-layout-gap"
+), C = o(
+  "gap-mobile-container-padding desktop:gap-desktop-container-padding compact:gap-desktop-compact-container-padding"
+);
+export {
+  a as baseTransition,
+  e as componentGap,
+  i as componentPadding,
+  m as componentPaddingBottom,
+  y as componentPaddingMinus2pxBorder,
+  r as componentPaddingMinusBorder,
+  u as componentPaddingMinusBorderDesktop,
+  b as componentPaddingTopUsingComponentGap2xMobile,
+  l as componentPaddingXUsingComponentGap,
+  g as componentPaddingY,
+  k as componentPaddingYUsingComponentGap,
+  P as containerPaddingX,
+  G as containerPaddingY,
+  C as gapUsingContainerPadding,
+  U as layoutGap,
+  v as layoutGroupGap,
+  x as layoutPaddding,
+  h as layoutPaddingBottom,
+  _ as layoutPaddingX,
+  f as layoutPaddingY,
+  n as marginTopUsingComponentGap,
+  d as paddingUsingComponentGap,
+  c as paddingXUsingLayoutGroupGap,
+  s as paddingYUsingLayoutGroupGap,
+  t as typography
+};

package/dist/components/AccessCard.js

@@ -0,0 +1,63 @@
+import { jsxs as o, Fragment as g, jsx as e } from "react/jsx-runtime";
+import { clsx as h } from "../node_modules/clsx/dist/clsx.js";
+import { Subheader as u } from "./Subheader.js";
+import { Caption as c } from "./Caption.js";
+import { Icon as x } from "./Icon.js";
+import { Radio as C } from "./Radio.js";
+function N(s) {
+  const {
+    title: l,
+    description: a,
+    status: n,
+    onClick: m,
+    onDefaultGrantedChange: p,
+    defaultGranted: r,
+    testid: t,
+    error: i,
+    unavailable: d
+  } = s;
+  return /* @__PURE__ */ o(g, { children: [
+    /* @__PURE__ */ o(
+      "div",
+      {
+        "data-testid": t,
+        className: h(
+          "cursor-pointer bg-background-grouped-secondary-normal",
+          "px-4 py-2 gap-2",
+          "shadow-access-card rounded",
+          "flex items-center",
+          d && "opacity-50 pointer-events-none"
+        ),
+        onClick: (f) => {
+          f.target.closest("label") || r || m?.();
+        },
+        children: [
+          n === "granted" && /* @__PURE__ */ e(
+            C,
+            {
+              testid: t ? `${t}-radio` : void 0,
+              checked: r,
+              onChange: () => {
+                d || p?.();
+              }
+            }
+          ),
+          /* @__PURE__ */ o("div", { className: "flex flex-col gap-1 flex-1", children: [
+            /* @__PURE__ */ e(u, { children: l }),
+            a && /* @__PURE__ */ e(c, { color: "text-primary-normal", children: a })
+          ] }),
+          !r && /* @__PURE__ */ e(
+            x,
+            {
+              name: n === "granted" ? "remove" : "add"
+            }
+          )
+        ]
+      }
+    ),
+    i && /* @__PURE__ */ e(c, { style: "error", children: i })
+  ] });
+}
+export {
+  N as AccessCard
+};

package/dist/components/AccessCardGroup.js

@@ -0,0 +1,73 @@
+"use client";
+import { jsxs as r, jsx as a } from "react/jsx-runtime";
+import { clsx as o } from "../node_modules/clsx/dist/clsx.js";
+import { useState as b } from "react";
+import { Icon as t } from "./Icon.js";
+import { Subheader as h } from "./Subheader.js";
+function C(i) {
+  const {
+    title: n,
+    children: s,
+    status: d,
+    expanded: l,
+    hasDefault: p,
+    onClick: c,
+    onGrantDenyClick: m,
+    testid: u,
+    unavailable: f
+  } = i, [e, g] = b(l);
+  return /* @__PURE__ */ r("div", { "data-testid": u, className: "mb-mobile-layout-group-gap desktop:mb-desktop-layout-group-gap compact:mb-desktop-compact-layout-group-gap", children: [
+    /* @__PURE__ */ r(
+      "div",
+      {
+        className: o(
+          "flex items-center",
+          "p-2 pr-4 gap-2",
+          "rounded",
+          "bg-neutral-500 text-neutral-000",
+          "cursor-pointer",
+          e && "mb-2",
+          f && "opacity-75"
+        ),
+        onClick: () => {
+          g(!e), c?.();
+        },
+        children: [
+          /* @__PURE__ */ a(
+            t,
+            {
+              name: "keyboard_arrow_down",
+              className: o(
+                e && "rotate-180",
+                "transform transition-all duration-300 ease-in-out"
+              )
+            }
+          ),
+          /* @__PURE__ */ a("div", { className: "flex-1", children: /* @__PURE__ */ a(h, { children: n }) }),
+          !p && /* @__PURE__ */ a(
+            t,
+            {
+              name: d === "granted" ? "remove" : "add",
+              onClick: (x) => {
+                x.stopPropagation(), m?.();
+              }
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ a(
+      "div",
+      {
+        className: o(
+          "grid transition-all duration-300 ease-in-out",
+          e ? "grid-rows-[1fr]" : "grid-rows-[0fr]"
+        ),
+        children: /* @__PURE__ */ a("div", { className: "overflow-hidden -m-[3px] p-[4px]", children: s })
+      }
+    )
+  ] });
+}
+export {
+  C as AccessCardGroup
+};

package/dist/components/AccessChangerTabItem.js

@@ -0,0 +1,51 @@
+import { jsxs as t, jsx as r } from "react/jsx-runtime";
+import { clsx as f } from "../node_modules/clsx/dist/clsx.js";
+import { Subheader as l } from "./Subheader.js";
+import { Icon as g } from "./Icon.js";
+function N(d) {
+  const {
+    additionalText: a,
+    borderTop: o,
+    borderBottom: i,
+    selected: e,
+    children: m,
+    loading: n,
+    disabled: c,
+    onClick: s,
+    testid: p,
+    ...x
+  } = d;
+  return /* @__PURE__ */ t(
+    "div",
+    {
+      "data-testid": p,
+      className: f(
+        "flex items-center justify-between",
+        "py-[15px] px-4 gap-4",
+        "bg-background-grouped-primary-normal cursor-pointer",
+        o && "border-t",
+        i && "border-b",
+        o || i ? "border-border-primary-normal" : "border-transparent",
+        e ? "text-text-action-primary-normal" : "text-text-primary-normal hover:text-text-action-primary-normal"
+      ),
+      onClick: (b) => {
+        n || c || s?.(b);
+      },
+      ...x,
+      children: [
+        /* @__PURE__ */ t("div", { className: "flex flex-col gap-0.5", children: [
+          /* @__PURE__ */ r(l, { children: m }),
+          a && /* @__PURE__ */ r("p", { className: "text-text-primary-normal text-[13px] leading-[1.38462] font-normal", children: a })
+        ] }),
+        n && !e && /* @__PURE__ */ r(g, { name: "cached", size: 16 }),
+        e && /* @__PURE__ */ t("div", { className: "flex items-center gap-1", children: [
+          /* @__PURE__ */ r("div", { className: "rounded-full size-2 bg-text-action-primary-normal" }),
+          /* @__PURE__ */ r(l, { children: "Active" })
+        ] })
+      ]
+    }
+  );
+}
+export {
+  N as AccessChangerTabItem
+};

package/dist/components/Accordion.js

@@ -0,0 +1,99 @@
+"use client";
+import { jsx as e, jsxs as n } from "react/jsx-runtime";
+import { clsx as r } from "../node_modules/clsx/dist/clsx.js";
+import { typography as x } from "../classNames.js";
+import { Card as y } from "./Card.js";
+import { Icon as k } from "./Icon.js";
+import { Stack as s } from "./Stack.js";
+import { Paragraph as v } from "./Paragraph.js";
+function A(l) {
+  const {
+    isOpen: i,
+    onClick: c,
+    className: d,
+    disabled: m,
+    testid: t,
+    titleAlign: p = "center"
+  } = l, {
+    title: a,
+    before: f,
+    after: u = /* @__PURE__ */ e(
+      k,
+      {
+        name: "expand_more",
+        className: r(
+          "text-icon-primary-normal transform transition-all duration-300 ease-in-out",
+          i ? "rotate-180" : "rotate-0"
+        )
+      }
+    ),
+    children: h
+  } = l;
+  function g(o) {
+    o.stopPropagation(), o.preventDefault(), c?.();
+  }
+  return /* @__PURE__ */ n(
+    y,
+    {
+      className: r(
+        "overflow-hidden select-none",
+        { "cursor-pointer": !m },
+        d
+      ),
+      selected: i,
+      onClick: g,
+      testid: t,
+      children: [
+        /* @__PURE__ */ n(
+          s,
+          {
+            sizing: "component",
+            horizontal: !0,
+            horizontalMobile: !0,
+            justify: "between",
+            items: "center",
+            children: [
+              /* @__PURE__ */ n(s, { sizing: "layout-group", horizontal: !0, items: p, children: [
+                f,
+                typeof a == "string" ? /* @__PURE__ */ e(
+                  v,
+                  {
+                    testid: t ? `${t}-title` : void 0,
+                    className: "text-text-primary-normal",
+                    children: a
+                  }
+                ) : a
+              ] }),
+              u
+            ]
+          }
+        ),
+        /* @__PURE__ */ e(
+          "div",
+          {
+            className: r("grid transition-all duration-300 ease-in-out"),
+            style: {
+              gridTemplateRows: i ? "1fr" : "0fr"
+            },
+            "data-testid": t ? `${t}-content-container` : void 0,
+            children: /* @__PURE__ */ e("div", { className: "overflow-hidden", children: /* @__PURE__ */ e(
+              "div",
+              {
+                className: r(
+                  x.paragraph,
+                  "text-text-primary-normal desktop:pt-desktop-layout-gap",
+                  "flex flex-col gap-desktop-layout-gap"
+                ),
+                onClick: (o) => o.stopPropagation(),
+                children: h
+              }
+            ) })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  A as Accordion
+};

package/dist/components/Alert.js

@@ -0,0 +1,78 @@
+import { jsxs as a, jsx as r } from "react/jsx-runtime";
+import { clsx as e } from "../node_modules/clsx/dist/clsx.js";
+import { Button as g } from "./Button.js";
+import { Heading2 as b } from "./Heading.js";
+import { Icon as t } from "./Icon.js";
+import { Paragraph as h } from "./Paragraph.js";
+import { Stack as l } from "./Stack.js";
+import { useCallback as x } from "react";
+function A({
+  id: m,
+  testId: i,
+  variant: c,
+  title: s,
+  message: d,
+  dismissible: p = !1,
+  onClose: n,
+  ...u
+}) {
+  const o = c === "error", f = x(() => {
+    n && n();
+  }, [n]);
+  return /* @__PURE__ */ a(
+    l,
+    {
+      id: m,
+      "data-testid": i,
+      sizing: "container",
+      backgroundColor: "background-grouped-primary-normal",
+      borderColor: "border-primary-normal",
+      items: "start",
+      elevation: 4,
+      rounded: !0,
+      padding: !0,
+      horizontal: !0,
+      horizontalMobile: !0,
+      ...u,
+      children: [
+        /* @__PURE__ */ r(
+          "div",
+          {
+            className: e("min-w-[2px] min-h-full flex", {
+              "bg-background-critical-normal": o,
+              "bg-background-warning-normal": !o
+            })
+          }
+        ),
+        /* @__PURE__ */ r(
+          "span",
+          {
+            className: e({
+              "text-icon-critical-normal": o,
+              "text-icon-warning-normal": !o
+            }),
+            children: /* @__PURE__ */ r(t, { name: "warning" })
+          }
+        ),
+        /* @__PURE__ */ a(l, { flexGrow: 1, sizing: "component", children: [
+          /* @__PURE__ */ r(b, { children: s }),
+          /* @__PURE__ */ r(h, { className: "whitespace-pre-line", children: d })
+        ] }),
+        p && /* @__PURE__ */ r(
+          g,
+          {
+            testid: i ? `${i}-dismiss-button` : void 0,
+            "aria-label": "Dismiss alert",
+            iconOnly: !0,
+            variant: "tertiary",
+            leftIcon: /* @__PURE__ */ r(t, { name: "close" }),
+            onClick: f
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  A as Alert
+};

package/dist/components/Breadcrumbs.js

@@ -0,0 +1,111 @@
+"use client";
+import { jsx as t, jsxs as d } from "react/jsx-runtime";
+import m, { useState as v, useLayoutEffect as k } from "react";
+import { clsx as c } from "../node_modules/clsx/dist/clsx.js";
+import { Link as x } from "./Link.js";
+import { Icon as b } from "./Icon.js";
+function y({
+  href: a,
+  children: o,
+  onClick: r,
+  id: n,
+  testid: e
+}) {
+  const i = c(
+    "!text-text-link-normal  whitespace-nowrap",
+    "py-mobile-component-padding",
+    "desktop:py-desktop-layout-group-padding",
+    "compact:py-desktop-compact-component-padding"
+  );
+  return /* @__PURE__ */ t("li", { id: n, "data-testid": e, className: "flex items-center", children: /* @__PURE__ */ t(
+    x,
+    {
+      id: n ? `${n}-link` : void 0,
+      "data-testid": e ? `${e}-link` : void 0,
+      className: c(i, "!text-caption-desktop"),
+      href: a,
+      typographyStyle: "caption",
+      onClick: r,
+      children: o
+    }
+  ) }, a);
+}
+const w = () => /* @__PURE__ */ t("li", { className: "flex items-center", "aria-hidden": "true", children: /* @__PURE__ */ t(b, { name: "chevron_right", size: 16 }) });
+function O({
+  asCardStyle: a,
+  id: o,
+  testid: r,
+  crumbs: n
+}) {
+  const e = m.useRef(null), [i, u] = v(!1);
+  k(() => {
+    e.current?.scrollTo({
+      left: e.current?.scrollWidth ?? 0,
+      behavior: "instant"
+    }), p();
+  }, [e, n]);
+  const p = () => {
+    e.current && u(
+      e.current.scrollWidth !== e.current.clientWidth && e.current.scrollLeft > 0
+    );
+  };
+  return /* @__PURE__ */ d(
+    "nav",
+    {
+      id: o,
+      "data-testid": r,
+      className: c(
+        "relative select-none flex items-center  max-w-full w-full",
+        {
+          "bg-white rounded-base shadow-4 px-mobile-layout-padding desktop:px-desktop-layout-padding compact:px-desktop-compact-layout-padding": a,
+          "px-mobile-container-padding desktop:px-desktop-container-padding compact:px-desktop-compact-container-padding": !a
+        }
+      ),
+      "aria-label": "Breadcrumb",
+      children: [
+        /* @__PURE__ */ t(
+          "div",
+          {
+            className: c(
+              i ? "opacity-100" : "opacity-0",
+              "absolute left-6 top-0 h-full w-12 bg-gradient-to-r from-white to-transparent pointer-events-none z-10 transition"
+            )
+          }
+        ),
+        /* @__PURE__ */ t(
+          "ol",
+          {
+            id: o ? `${o}-list` : void 0,
+            "data-testid": r ? `${r}-list` : void 0,
+            className: "flex items-center overflow-x-scroll",
+            style: { scrollbarWidth: "none" },
+            onScroll: p,
+            ref: (s) => {
+              e.current = s;
+            },
+            children: n.map((s, l) => {
+              const { href: f, children: h, onClick: g } = s;
+              return /* @__PURE__ */ d(m.Fragment, { children: [
+                l > 0 && /* @__PURE__ */ t(w, {}),
+                /* @__PURE__ */ t(
+                  y,
+                  {
+                    href: f,
+                    onClick: g,
+                    id: o ? `${o}-crumb-${l}` : void 0,
+                    testid: r ? `${r}-crumb-${l}` : void 0,
+                    children: h
+                  }
+                )
+              ] }, l);
+            })
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  y as Breadcrumb,
+  O as Breadcrumbs
+};