@sesamehr/react-design-system 3.9.0 → 3.10.1

package/dist/Display/ReactionButton/ReactionButton.js

@@ -0,0 +1,73 @@
+import { jsxs as f, jsx as n } from "react/jsx-runtime";
+import { IconAddReaction as x } from "@sesame/orxata-icons/IconAddReaction";
+import { Icon as b } from "@sesame/orxata-icons/react";
+import { forwardRef as N } from "react";
+import { moduleClasses as h } from "../../lib/cssModules.js";
+import { cn as R } from "../../lib/utils.js";
+import a from "./ReactionButton.module.css.js";
+import { reactionButtonVariants as j } from "./index.js";
+import { useTranslate as y } from "../../Locale/useTranslate.js";
+const B = N(
+  ({
+    className: d,
+    variant: o = "reaction",
+    emoji: e,
+    count: t,
+    reacted: s = !1,
+    dataTestid: i,
+    ...m
+  }, l) => {
+    const r = y(), c = t === void 0 ? "" : t > 99 ? "99+" : String(t), p = o === "more" ? `+${c}` : c, u = o === "add" ? r("orxata.reaction.add") : o === "more" ? r("orxata.reaction.more", { count: t ?? 0 }) : r("orxata.reaction.reacted", {
+      count: t ?? 0,
+      emoji: e ?? ""
+    });
+    return /* @__PURE__ */ f(
+      "button",
+      {
+        ref: l,
+        type: "button",
+        "data-slot": "reaction-button",
+        "data-testid": i,
+        "data-reacted": s || void 0,
+        "aria-pressed": o === "reaction" ? s : void 0,
+        "aria-label": u,
+        className: R(
+          h(a, j({ variant: o })),
+          d
+        ),
+        ...m,
+        children: [
+          o === "add" ? /* @__PURE__ */ n(
+            b,
+            {
+              icon: x,
+              className: a["ox-reaction-button-icon"],
+              "data-slot": "icon",
+              "data-testid": `${i}-icon`
+            }
+          ) : null,
+          o === "reaction" && e ? /* @__PURE__ */ n(
+            "span",
+            {
+              className: a["ox-reaction-button-emoji"],
+              "data-slot": "emoji",
+              children: e
+            }
+          ) : null,
+          o !== "add" && t !== void 0 ? /* @__PURE__ */ n(
+            "span",
+            {
+              className: a["ox-reaction-button-count"],
+              "data-slot": "count",
+              children: p
+            }
+          ) : null
+        ]
+      }
+    );
+  }
+);
+B.displayName = "OxReactionButton";
+export {
+  B as ReactionButton
+};

package/dist/Display/ReactionButton/ReactionButton.module.css.js

@@ -0,0 +1,11 @@
+const o = {
+  "ox-reaction-button": "_ox-reaction-button_fyj7i_2",
+  "ox-reaction-button--add": "_ox-reaction-button--add_fyj7i_2",
+  "ox-reaction-button-icon": "_ox-reaction-button-icon_fyj7i_2",
+  "ox-reaction-button-emoji": "_ox-reaction-button-emoji_fyj7i_2",
+  "ox-reaction-button-count": "_ox-reaction-button-count_fyj7i_2",
+  "ox-reaction-button--more": "_ox-reaction-button--more_fyj7i_2"
+};
+export {
+  o as default
+};

package/dist/Display/ReactionButton/index.js

@@ -0,0 +1,17 @@
+import { cva as t } from "class-variance-authority";
+const o = t("ox-reaction-button", {
+  variants: {
+    variant: {
+      /* The pill as the base rule already draws it. */
+      reaction: "",
+      add: "ox-reaction-button--add",
+      more: "ox-reaction-button--more"
+    }
+  },
+  defaultVariants: {
+    variant: "reaction"
+  }
+});
+export {
+  o as reactionButtonVariants
+};

package/dist/Display/ReactionPicker/ReactionPicker.js

@@ -0,0 +1,119 @@
+import { jsxs as h, jsx as l, Fragment as E } from "react/jsx-runtime";
+import { IconAddReaction as O } from "@sesame/orxata-icons/IconAddReaction";
+import { Icon as C } from "@sesame/orxata-icons/react";
+import { forwardRef as D, useRef as f, useState as $ } from "react";
+import { cn as L } from "../../lib/utils.js";
+import e from "./ReactionPicker.module.css.js";
+import { DEFAULT_REACTION_EMOJIS as P } from "./index.js";
+import { useTranslate as T } from "../../Locale/useTranslate.js";
+const _ = D(
+  ({
+    className: j,
+    emojis: N = P,
+    showMore: v = !0,
+    onReact: u,
+    onShowMore: m,
+    dataTestid: p,
+    ...y
+  }, n) => {
+    const d = T(), a = N.map(
+      (t) => typeof t == "string" ? { emoji: t, label: void 0 } : t
+    ), g = f(null), c = f([]), [i, b] = $(0), s = f(!1), A = (t) => {
+      var k;
+      const o = c.current.filter(
+        (B) => !!B
+      );
+      if (o.length === 0) return;
+      const r = (t % o.length + o.length) % o.length;
+      b(r), (k = o[r]) == null || k.focus();
+    }, I = (t) => {
+      const o = c.current.filter(Boolean).length - 1, r = {
+        ArrowRight: s.current ? i + 1 : 0,
+        ArrowLeft: s.current ? i - 1 : o,
+        Home: 0,
+        End: o
+      }[t.key];
+      r !== void 0 && (t.preventDefault(), A(r));
+    }, x = (t) => {
+      b(t), s.current = !0;
+    }, F = (t) => {
+      var r;
+      const o = t.relatedTarget;
+      o instanceof Node && ((r = g.current) != null && r.contains(o)) || (s.current = !1);
+    };
+    return /* @__PURE__ */ h(
+      "div",
+      {
+        ref: (t) => {
+          g.current = t, typeof n == "function" ? n(t) : n && (n.current = t);
+        },
+        role: "toolbar",
+        "aria-label": d("orxata.reaction.react"),
+        "data-slot": "reaction-picker",
+        "data-testid": p,
+        className: L(e["ox-reaction-picker"], j),
+        onKeyDown: I,
+        onBlur: F,
+        ...y,
+        children: [
+          a.map((t, o) => /* @__PURE__ */ l(
+            "button",
+            {
+              ref: (r) => {
+                c.current[o] = r;
+              },
+              type: "button",
+              className: e["ox-reaction-picker-emoji"],
+              "data-slot": "emoji",
+              "data-testid": `${p}-emoji-${o}`,
+              "aria-label": t.label || void 0,
+              tabIndex: o === i ? 0 : -1,
+              onClick: () => u == null ? void 0 : u(t.emoji),
+              onFocus: () => x(o),
+              children: t.emoji
+            },
+            t.emoji
+          )),
+          v ? /* @__PURE__ */ h(E, { children: [
+            /* @__PURE__ */ l(
+              "span",
+              {
+                className: e["ox-reaction-picker-separator"],
+                role: "separator",
+                "aria-orientation": "vertical"
+              }
+            ),
+            /* @__PURE__ */ l(
+              "button",
+              {
+                ref: (t) => {
+                  c.current[a.length] = t;
+                },
+                type: "button",
+                className: e["ox-reaction-picker-more"],
+                "data-slot": "more",
+                "data-testid": `${p}-more`,
+                "aria-label": d("orxata.reaction.showMore"),
+                tabIndex: a.length === i ? 0 : -1,
+                onClick: () => m == null ? void 0 : m(),
+                onFocus: () => x(a.length),
+                children: /* @__PURE__ */ l(
+                  C,
+                  {
+                    icon: O,
+                    className: e["ox-reaction-picker-more-icon"],
+                    "data-slot": "icon"
+                  }
+                )
+              }
+            )
+          ] }) : null
+        ]
+      }
+    );
+  }
+);
+_.displayName = "OxReactionPicker";
+export {
+  _ as ReactionPicker
+};

package/dist/Display/ReactionPicker/ReactionPicker.module.css.js

@@ -0,0 +1,10 @@
+const o = {
+  "ox-reaction-picker": "_ox-reaction-picker_mtnd1_2",
+  "ox-reaction-picker-emoji": "_ox-reaction-picker-emoji_mtnd1_2",
+  "ox-reaction-picker-more": "_ox-reaction-picker-more_mtnd1_2",
+  "ox-reaction-picker-separator": "_ox-reaction-picker-separator_mtnd1_2",
+  "ox-reaction-picker-more-icon": "_ox-reaction-picker-more-icon_mtnd1_2"
+};
+export {
+  o as default
+};

package/dist/Display/ReactionPicker/index.js

@@ -0,0 +1,11 @@
+const E = [
+  "👍",
+  "❤️",
+  "😂",
+  "🎉",
+  "😮",
+  "🙏"
+];
+export {
+  E as DEFAULT_REACTION_EMOJIS
+};

package/dist/Display/RichText/RichText.js

@@ -0,0 +1,49 @@
+import { jsx as o } from "react/jsx-runtime";
+import { forwardRef as x, useState as p, useEffect as u } from "react";
+import { moduleClasses as s } from "../../lib/cssModules.js";
+import { cn as v } from "../../lib/utils.js";
+import n from "./RichText.module.css.js";
+import { sanitizeHtml as R, SANITIZER_UNAVAILABLE_ERROR as N } from "./sanitizeHtml.js";
+const h = x(
+  ({ className: a, html: e, children: c, ...m }, d) => {
+    const [f, t] = p("");
+    u(() => {
+      if (e === void 0) {
+        t("");
+        return;
+      }
+      let r = !0;
+      return R(e).then(
+        (l) => {
+          r && t(l);
+        },
+        () => {
+          r && t(""), console.error(N);
+        }
+      ), () => {
+        r = !1;
+      };
+    }, [e]);
+    const i = s(n, "ox-rich-text-content");
+    return /* @__PURE__ */ o(
+      "div",
+      {
+        ref: d,
+        "data-slot": "rich-text",
+        className: v(s(n, "ox-rich-text"), a),
+        ...m,
+        children: e === void 0 ? /* @__PURE__ */ o("div", { className: i, children: c }) : /* @__PURE__ */ o(
+          "div",
+          {
+            className: i,
+            dangerouslySetInnerHTML: { __html: f }
+          }
+        )
+      }
+    );
+  }
+);
+h.displayName = "OxRichText";
+export {
+  h as RichText
+};

package/dist/Display/RichText/RichText.module.css.js

@@ -0,0 +1,7 @@
+const t = {
+  "ox-rich-text": "_ox-rich-text_qn8x2_2",
+  "ox-rich-text-content": "_ox-rich-text-content_qn8x2_2"
+};
+export {
+  t as default
+};

package/dist/Display/RichText/index.js

@@ -0,0 +1,19 @@
+const e = {
+  nodes: [
+    "doc",
+    "text",
+    "paragraph",
+    "heading",
+    "bulletList",
+    "orderedList",
+    "listItem",
+    "blockquote",
+    "codeBlock",
+    "horizontalRule",
+    "hardBreak"
+  ],
+  marks: ["bold", "italic", "strike", "underline", "code", "link"]
+};
+export {
+  e as RICH_TEXT_SCHEMA
+};

package/dist/Display/RichText/sanitizeHtml.js

@@ -0,0 +1,14 @@
+const s = (e) => "setHTML" in e;
+let i;
+const a = "[OxRichText] The HTML sanitiser could not be loaded, so nothing was rendered — markup is never written unsanitised. This browser has no native `setHTML`, so `dompurify` is what it needs, and that request failed.", r = async (e) => {
+  const t = document.createElement("div");
+  if (s(t))
+    return t.setHTML(e), t.innerHTML;
+  i ?? (i = import("dompurify"));
+  const { default: n } = await i;
+  return n.sanitize(e);
+};
+export {
+  a as SANITIZER_UNAVAILABLE_ERROR,
+  r as sanitizeHtml
+};

package/dist/Display/Tag/Tag.js

@@ -0,0 +1,32 @@
+import { jsx as i } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { moduleClasses as e } from "../../lib/cssModules.js";
+import { cn as d } from "../../lib/utils.js";
+import l from "./Tag.module.css.js";
+import { tagVariants as n } from "./index.js";
+const g = p(
+  ({
+    className: a,
+    color: o = "brand",
+    variant: t = "soft",
+    size: r = "sm",
+    dataTestid: m,
+    ...s
+  }, f) => /* @__PURE__ */ i(
+    "span",
+    {
+      ref: f,
+      "data-slot": "tag",
+      "data-testid": m,
+      className: d(
+        e(l, n({ color: o, variant: t, size: r })),
+        a
+      ),
+      ...s
+    }
+  )
+);
+g.displayName = "OxTag";
+export {
+  g as Tag
+};

package/dist/Display/Tag/Tag.module.css.js

@@ -0,0 +1,26 @@
+const _ = {
+  "ox-tag": "_ox-tag_1q4yb_2",
+  "ox-tag--sm": "_ox-tag--sm_1q4yb_2",
+  "ox-tag--md": "_ox-tag--md_1q4yb_2",
+  "ox-tag--brand": "_ox-tag--brand_1q4yb_2",
+  "ox-tag--zinc": "_ox-tag--zinc_1q4yb_2",
+  "ox-tag--red": "_ox-tag--red_1q4yb_2",
+  "ox-tag--orange": "_ox-tag--orange_1q4yb_2",
+  "ox-tag--amber": "_ox-tag--amber_1q4yb_2",
+  "ox-tag--yellow": "_ox-tag--yellow_1q4yb_2",
+  "ox-tag--lime": "_ox-tag--lime_1q4yb_2",
+  "ox-tag--green": "_ox-tag--green_1q4yb_2",
+  "ox-tag--teal": "_ox-tag--teal_1q4yb_2",
+  "ox-tag--sky": "_ox-tag--sky_1q4yb_2",
+  "ox-tag--blue": "_ox-tag--blue_1q4yb_2",
+  "ox-tag--indigo": "_ox-tag--indigo_1q4yb_2",
+  "ox-tag--violet": "_ox-tag--violet_1q4yb_2",
+  "ox-tag--purple": "_ox-tag--purple_1q4yb_2",
+  "ox-tag--fuchsia": "_ox-tag--fuchsia_1q4yb_2",
+  "ox-tag--pink": "_ox-tag--pink_1q4yb_2",
+  "ox-tag--soft": "_ox-tag--soft_1q4yb_2",
+  "ox-tag--solid": "_ox-tag--solid_1q4yb_2"
+};
+export {
+  _ as default
+};

package/dist/Display/Tag/index.js

@@ -0,0 +1,39 @@
+import { cva as a } from "class-variance-authority";
+const t = a("ox-tag", {
+  variants: {
+    color: {
+      brand: "ox-tag--brand",
+      zinc: "ox-tag--zinc",
+      red: "ox-tag--red",
+      orange: "ox-tag--orange",
+      amber: "ox-tag--amber",
+      yellow: "ox-tag--yellow",
+      lime: "ox-tag--lime",
+      green: "ox-tag--green",
+      teal: "ox-tag--teal",
+      sky: "ox-tag--sky",
+      blue: "ox-tag--blue",
+      indigo: "ox-tag--indigo",
+      violet: "ox-tag--violet",
+      purple: "ox-tag--purple",
+      fuchsia: "ox-tag--fuchsia",
+      pink: "ox-tag--pink"
+    },
+    variant: {
+      soft: "ox-tag--soft",
+      solid: "ox-tag--solid"
+    },
+    size: {
+      sm: "ox-tag--sm",
+      md: "ox-tag--md"
+    }
+  },
+  defaultVariants: {
+    color: "brand",
+    variant: "soft",
+    size: "sm"
+  }
+});
+export {
+  t as tagVariants
+};

package/dist/Display/VideoAttachment/VideoAttachment.js

@@ -0,0 +1,69 @@
+import { jsx as a, jsxs as h } from "react/jsx-runtime";
+import { IconPlayerPlay as l } from "@sesame/orxata-icons/IconPlayerPlay";
+import { Icon as f } from "@sesame/orxata-icons/react";
+import { forwardRef as x } from "react";
+import { cn as u } from "../../lib/utils.js";
+import e from "./VideoAttachment.module.css.js";
+import { AttachmentMedia as v } from "../../internal/AttachmentMedia/AttachmentMedia.js";
+const y = x(
+  ({
+    className: i,
+    image: d,
+    surface: s = "default",
+    duration: r,
+    onPlay: m,
+    onClick: o,
+    dataTestid: t,
+    ...c
+  }, n) => /* @__PURE__ */ a(
+    "button",
+    {
+      ref: n,
+      type: "button",
+      "data-slot": "video-attachment",
+      "data-testid": t,
+      className: u(e["ox-video-attachment"], i),
+      onClick: (p) => {
+        o == null || o(p), m == null || m();
+      },
+      ...c,
+      children: /* @__PURE__ */ h(
+        v,
+        {
+          image: d,
+          surface: s,
+          dataTestid: `${t}-media`,
+          children: [
+            /* @__PURE__ */ a(
+              "span",
+              {
+                className: e["ox-video-attachment-play"],
+                "aria-hidden": "true",
+                "data-testid": `${t}-play`,
+                children: /* @__PURE__ */ a(
+                  f,
+                  {
+                    icon: l,
+                    className: e["ox-video-attachment-play-glyph"]
+                  }
+                )
+              }
+            ),
+            r ? /* @__PURE__ */ a(
+              "span",
+              {
+                className: e["ox-video-attachment-duration"],
+                "data-testid": `${t}-duration`,
+                children: r
+              }
+            ) : null
+          ]
+        }
+      )
+    }
+  )
+);
+y.displayName = "OxVideoAttachment";
+export {
+  y as VideoAttachment
+};

package/dist/Display/VideoAttachment/VideoAttachment.module.css.js

@@ -0,0 +1,9 @@
+const t = {
+  "ox-video-attachment": "_ox-video-attachment_2vv9g_2",
+  "ox-video-attachment-play": "_ox-video-attachment-play_2vv9g_2",
+  "ox-video-attachment-play-glyph": "_ox-video-attachment-play-glyph_2vv9g_2",
+  "ox-video-attachment-duration": "_ox-video-attachment-duration_2vv9g_2"
+};
+export {
+  t as default
+};

package/dist/Display/VoiceMessage/VoiceMessage.js

@@ -0,0 +1,115 @@
+import { jsxs as g, jsx as s } from "react/jsx-runtime";
+import { IconPlayerPause as j } from "@sesame/orxata-icons/IconPlayerPause";
+import { IconPlayerPlay as D } from "@sesame/orxata-icons/IconPlayerPlay";
+import { Icon as B } from "@sesame/orxata-icons/react";
+import { forwardRef as K, useId as O } from "react";
+import { cn as R } from "../../lib/utils.js";
+import e from "./VoiceMessage.module.css.js";
+import { useVoiceWaveform as U } from "./useVoiceWaveform.js";
+const W = K(
+  ({
+    className: v,
+    peaks: u,
+    playing: t = !1,
+    progress: f = 0,
+    surface: x = "default",
+    label: i,
+    duration: y,
+    onPlayingChange: r,
+    onProgressChange: m,
+    dataTestid: a,
+    ...b
+  }, N) => {
+    const c = O(), l = `${c}-label`, d = `${c}-duration`, n = i ? l : d, {
+      track: $,
+      bars: k,
+      percent: I,
+      onPointerDown: w,
+      onPointerMove: M,
+      onPointerUp: p,
+      onKeyDown: V
+    } = U({
+      peaks: u,
+      progress: f,
+      seek: (o) => m == null ? void 0 : m(o)
+    });
+    return /* @__PURE__ */ g(
+      "div",
+      {
+        ref: N,
+        "data-slot": "voice-message",
+        "data-testid": a,
+        className: R(
+          e["ox-voice-message"],
+          x === "brand" && e["ox-voice-message--brand"],
+          v
+        ),
+        ...b,
+        children: [
+          /* @__PURE__ */ s(
+            "button",
+            {
+              type: "button",
+              className: e["ox-voice-message-toggle"],
+              "aria-pressed": t,
+              "aria-labelledby": n,
+              "data-testid": `${a}-toggle`,
+              onClick: () => r == null ? void 0 : r(!t),
+              children: /* @__PURE__ */ s(
+                B,
+                {
+                  icon: t ? j : D,
+                  className: e["ox-voice-message-toggle-glyph"],
+                  "data-testid": `${a}-glyph`
+                }
+              )
+            }
+          ),
+          i ? /* @__PURE__ */ s("span", { id: l, className: e["ox-voice-message-label"], children: i }) : null,
+          /* @__PURE__ */ s(
+            "div",
+            {
+              ref: $,
+              role: "slider",
+              tabIndex: 0,
+              className: e["ox-voice-message-waveform"],
+              "aria-labelledby": n,
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": I,
+              "data-testid": `${a}-waveform`,
+              onPointerDown: w,
+              onPointerMove: M,
+              onPointerUp: p,
+              onPointerCancel: p,
+              onKeyDown: V,
+              children: k.map((o) => /* @__PURE__ */ s(
+                "span",
+                {
+                  className: e["ox-voice-message-bar"],
+                  "data-played": o.played ? !0 : void 0,
+                  "data-testid": `${a}-bar-${o.key}`,
+                  style: { "--ox-voice-message-peak": o.peak }
+                },
+                o.key
+              ))
+            }
+          ),
+          /* @__PURE__ */ s(
+            "span",
+            {
+              id: d,
+              className: e["ox-voice-message-duration"],
+              "data-testid": `${a}-duration`,
+              children: y
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+W.displayName = "OxVoiceMessage";
+export {
+  W as VoiceMessage
+};

package/dist/Display/VoiceMessage/VoiceMessage.module.css.js

@@ -0,0 +1,13 @@
+const e = {
+  "ox-voice-message": "_ox-voice-message_1s19w_2",
+  "ox-voice-message--brand": "_ox-voice-message--brand_1s19w_2",
+  "ox-voice-message-toggle": "_ox-voice-message-toggle_1s19w_2",
+  "ox-voice-message-toggle-glyph": "_ox-voice-message-toggle-glyph_1s19w_2",
+  "ox-voice-message-label": "_ox-voice-message-label_1s19w_2",
+  "ox-voice-message-waveform": "_ox-voice-message-waveform_1s19w_2",
+  "ox-voice-message-bar": "_ox-voice-message-bar_1s19w_2",
+  "ox-voice-message-duration": "_ox-voice-message-duration_1s19w_2"
+};
+export {
+  e as default
+};