@sesamehr/react-design-system 3.10.0 → 3.10.1

package/dist/Display/PixelArt/PixelArt.js

@@ -0,0 +1,53 @@
+import { jsx as s } from "react/jsx-runtime";
+import { forwardRef as v, useMemo as E, useState as T, useRef as k, useEffect as I } from "react";
+import { cn as N } from "../../lib/utils.js";
+import o from "./PixelArt.module.css.js";
+import { pixelArtCells as C, PIXEL_ART_FULL_GRID as D, pixelArtColumns as F, pixelArtTravel as M, PIXEL_ART_HOLD_MS as O, PIXEL_ART_CELL_MS as S } from "./index.js";
+const X = v(
+  ({ className: x, style: p, rows: u, order: t = "random", dataTestid: l, ...f }, y) => {
+    const a = u ?? D, i = E(
+      () => C(a, t),
+      [a, t]
+    ), A = F(a), r = M(i), P = r - S, [n, _] = T(!1), m = k(r);
+    m.current = r, I(() => {
+      let e = 0, c = !1;
+      const d = () => {
+        c || (_((w) => !w), e = window.setTimeout(d, m.current + O));
+      }, R = requestAnimationFrame(d);
+      return () => {
+        c = !0, cancelAnimationFrame(R), window.clearTimeout(e);
+      };
+    }, []);
+    const L = (e) => !n && t === "bottom-up" ? P - e.delay : e.delay;
+    return /* @__PURE__ */ s(
+      "div",
+      {
+        ref: y,
+        "aria-hidden": "true",
+        "data-slot": "pixel-art",
+        "data-state": n ? "drawn" : "erased",
+        "data-testid": l,
+        className: N(o.oxPixelArt, x),
+        style: { ...p, "--ox-pixel-art-columns": A },
+        ...f,
+        children: i.map(
+          (e) => e.on ? /* @__PURE__ */ s(
+            "span",
+            {
+              className: o.oxPixelArtPixel,
+              style: {
+                "--ox-pixel-art-delay": `${L(e)}ms`
+              },
+              "data-testid": `${l}-pixel-${e.key}`
+            },
+            e.key
+          ) : /* @__PURE__ */ s("span", { className: o.oxPixelArtBlank }, e.key)
+        )
+      }
+    );
+  }
+);
+X.displayName = "OxPixelArt";
+export {
+  X as PixelArt
+};

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

@@ -0,0 +1,11 @@
+const x = "_oxPixelArt_1euxk_2", e = "_oxPixelArtBlank_1euxk_2", l = "_oxPixelArtPixel_1euxk_2", t = {
+  oxPixelArt: x,
+  oxPixelArtBlank: e,
+  oxPixelArtPixel: l
+};
+export {
+  t as default,
+  x as oxPixelArt,
+  e as oxPixelArtBlank,
+  l as oxPixelArtPixel
+};

package/dist/Display/PixelArt/index.js

@@ -0,0 +1,30 @@
+const m = 55, A = 500, E = 1200, f = Array.from(
+  { length: 15 },
+  () => "#".repeat(15)
+), L = (a, e) => {
+  const o = Array.from({ length: a }, (n, s) => s);
+  for (let n = o.length - 1; n > 0; n--) {
+    const s = Math.floor(e() * (n + 1));
+    [o[n], o[s]] = [o[s], o[n]];
+  }
+  return o;
+}, h = (a, e = "random", o = Math.random) => {
+  const n = a.flatMap(
+    (t, r) => [...t].map((p, l) => ({ key: `${l}-${r}`, x: l, y: r, on: p === "#" }))
+  ), s = n.filter((t) => t.on), _ = L(s.length, o);
+  e === "bottom-up" && s.map((t, r) => ({ index: r, sort: -t.y + o() * 0.9 })).sort((t, r) => t.sort - r.sort).forEach(({ index: t }, r) => _[t] = r);
+  let c = 0;
+  return n.map((t) => ({
+    ...t,
+    delay: t.on ? _[c++] * 55 : 0
+  }));
+}, M = (a) => Math.max(0, ...a.map((e) => e.delay)) + 500, T = (a) => Math.max(1, ...a.map((e) => e.length));
+export {
+  A as PIXEL_ART_CELL_MS,
+  f as PIXEL_ART_FULL_GRID,
+  E as PIXEL_ART_HOLD_MS,
+  m as PIXEL_ART_STEP_MS,
+  h as pixelArtCells,
+  T as pixelArtColumns,
+  M as pixelArtTravel
+};

package/dist/Display/PlayerPill/PlayerPill.js

@@ -0,0 +1,31 @@
+import { jsx as l } from "react/jsx-runtime";
+import { forwardRef as p, useMemo as s } from "react";
+import { moduleClasses as f } from "../../lib/cssModules.js";
+import { cn as n } from "../../lib/utils.js";
+import P from "./PlayerPill.module.css.js";
+import { playerPillVariants as d } from "./index.js";
+import { PlayerPillContext as y } from "./playerPillContext.js";
+const c = p(
+  ({ className: e, state: r = "stopped", children: m, dataTestid: o, ...i }, t) => {
+    const a = s(() => ({ state: r, dataTestid: o }), [r, o]);
+    return /* @__PURE__ */ l(y.Provider, { value: a, children: /* @__PURE__ */ l(
+      "div",
+      {
+        ref: t,
+        className: n(
+          f(P, d({ state: r })),
+          e
+        ),
+        "data-slot": "player-pill",
+        "data-testid": o,
+        "data-state": r,
+        ...i,
+        children: m
+      }
+    ) });
+  }
+);
+c.displayName = "OxPlayerPill";
+export {
+  c as PlayerPill
+};

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

@@ -0,0 +1,9 @@
+const l = {
+  "ox-player-pill": "_ox-player-pill_wzduq_2",
+  "ox-player-pill--running": "_ox-player-pill--running_wzduq_2",
+  "ox-player-pill--paused": "_ox-player-pill--paused_wzduq_2",
+  "ox-player-pill--stopped": "_ox-player-pill--stopped_wzduq_2"
+};
+export {
+  l as default
+};

package/dist/Display/PlayerPill/PlayerPillAction.js

@@ -0,0 +1,62 @@
+import { jsx as a } from "react/jsx-runtime";
+import { IconPlayerPause as m } from "@sesame/orxata-icons/IconPlayerPause";
+import { IconPlayerPlay as o } from "@sesame/orxata-icons/IconPlayerPlay";
+import { IconStop as u } from "@sesame/orxata-icons/IconStop";
+import { Icon as c } from "@sesame/orxata-icons/react";
+import { forwardRef as f } from "react";
+import { cn as y } from "../../lib/utils.js";
+import r from "./PlayerPillAction.module.css.js";
+import { usePlayerPill as d } from "./playerPillContext.js";
+import { useTranslate as P } from "../../Locale/useTranslate.js";
+import { IconButton as x } from "../../Button/IconButton/IconButton.js";
+const I = {
+  start: ["stopped"],
+  pause: ["running"],
+  resume: ["paused"],
+  stop: ["running", "paused"]
+}, A = {
+  start: o,
+  pause: m,
+  resume: o,
+  stop: u
+}, S = {
+  start: "default",
+  pause: null,
+  resume: "success",
+  stop: "destructive"
+}, N = {
+  start: "orxata.playerPill.action.start",
+  pause: "orxata.playerPill.action.pause",
+  resume: "orxata.playerPill.action.resume",
+  stop: "orxata.playerPill.action.stop"
+}, T = f(({ className: e, action: t, ...s }, l) => {
+  const p = P(), { state: i, dataTestid: n } = d();
+  return I[t].includes(i) ? /* @__PURE__ */ a(
+    x,
+    {
+      ref: l,
+      variant: S[t],
+      size: null,
+      "aria-label": p(N[t]),
+      className: y(
+        r["ox-player-pill-action"],
+        t === "pause" && r["ox-player-pill-action--pause"],
+        e
+      ),
+      "data-testid": `${n}-${t}`,
+      "data-action": t,
+      ...s,
+      children: /* @__PURE__ */ a(
+        c,
+        {
+          icon: A[t],
+          className: r["ox-player-pill-action-icon"]
+        }
+      )
+    }
+  ) : null;
+});
+T.displayName = "OxPlayerPillAction";
+export {
+  T as PlayerPillAction
+};

package/dist/Display/PlayerPill/PlayerPillAction.module.css.js

@@ -0,0 +1,8 @@
+const l = {
+  "ox-player-pill-action": "_ox-player-pill-action_x1ub7_2",
+  "ox-player-pill-action-icon": "_ox-player-pill-action-icon_x1ub7_2",
+  "ox-player-pill-action--pause": "_ox-player-pill-action--pause_x1ub7_2"
+};
+export {
+  l as default
+};

package/dist/Display/PlayerPill/PlayerPillStatus.js

@@ -0,0 +1,43 @@
+import { jsx as i } from "react/jsx-runtime";
+import { IconClock as u } from "@sesame/orxata-icons/IconClock";
+import { Icon as m } from "@sesame/orxata-icons/react";
+import { forwardRef as d } from "react";
+import { cn as e } from "../../lib/utils.js";
+import t from "./PlayerPillStatus.module.css.js";
+import { usePlayerPill as c } from "./playerPillContext.js";
+import { useTranslate as f } from "../../Locale/useTranslate.js";
+const y = d(({ className: a, ...n }, p) => {
+  const r = f(), { state: o, dataTestid: s } = c();
+  if (o === "stopped")
+    return /* @__PURE__ */ i(
+      m,
+      {
+        icon: u,
+        className: e(t["ox-player-pill-status-icon"], a),
+        "data-slot": "icon",
+        "data-testid": `${s}-status`,
+        "aria-hidden": "true"
+      }
+    );
+  const l = o === "running";
+  return /* @__PURE__ */ i(
+    "span",
+    {
+      ref: p,
+      className: e(
+        t["ox-player-pill-status-dot"],
+        l ? t["ox-player-pill-status-dot--running"] : t["ox-player-pill-status-dot--paused"],
+        a
+      ),
+      "data-slot": "icon",
+      "data-testid": `${s}-status`,
+      role: "img",
+      "aria-label": r(l ? "orxata.playerPill.status.running" : "orxata.playerPill.status.paused"),
+      ...n
+    }
+  );
+});
+y.displayName = "OxPlayerPillStatus";
+export {
+  y as PlayerPillStatus
+};

package/dist/Display/PlayerPill/PlayerPillStatus.module.css.js

@@ -0,0 +1,9 @@
+const l = {
+  "ox-player-pill-status-dot": "_ox-player-pill-status-dot_14jme_2",
+  "ox-player-pill-status-dot--running": "_ox-player-pill-status-dot--running_14jme_2",
+  "ox-player-pill-status-dot--paused": "_ox-player-pill-status-dot--paused_14jme_2",
+  "ox-player-pill-status-icon": "_ox-player-pill-status-icon_14jme_2"
+};
+export {
+  l as default
+};

package/dist/Display/PlayerPill/PlayerPillTime.js

@@ -0,0 +1,32 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import { cn as c } from "../../lib/utils.js";
+import y from "./PlayerPillTime.module.css.js";
+import { usePlayerPill as P } from "./playerPillContext.js";
+import { useElapsedSeconds as u, formatElapsed as x } from "./useElapsedSeconds.js";
+import { useTranslate as T } from "../../Locale/useTranslate.js";
+const g = f(
+  ({ className: r, seconds: t = 0, startedAt: a, children: l, ...o }, i) => {
+    const s = T(), { state: e, dataTestid: m } = P(), p = u({
+      seconds: t,
+      startedAt: a,
+      running: e === "running"
+    }), n = e === "stopped" ? s("orxata.playerPill.idle") : x(p);
+    return /* @__PURE__ */ d(
+      "span",
+      {
+        ref: i,
+        className: c(y["ox-player-pill-time"], r),
+        "data-slot": "label",
+        "data-testid": `${m}-time`,
+        "aria-live": "off",
+        ...o,
+        children: l ?? n
+      }
+    );
+  }
+);
+g.displayName = "OxPlayerPillTime";
+export {
+  g as PlayerPillTime
+};

package/dist/Display/PlayerPill/PlayerPillTime.module.css.js

@@ -0,0 +1,6 @@
+const l = {
+  "ox-player-pill-time": "_ox-player-pill-time_u54ur_2"
+};
+export {
+  l as default
+};

package/dist/Display/PlayerPill/index.js

@@ -0,0 +1,16 @@
+import { cva as p } from "class-variance-authority";
+const l = p("ox-player-pill", {
+  variants: {
+    state: {
+      running: "ox-player-pill--running",
+      paused: "ox-player-pill--paused",
+      stopped: "ox-player-pill--stopped"
+    }
+  },
+  defaultVariants: {
+    state: "stopped"
+  }
+});
+export {
+  l as playerPillVariants
+};

package/dist/Display/PlayerPill/playerPillContext.js

@@ -0,0 +1,13 @@
+import { createContext as t, useContext as r } from "react";
+const l = t(
+  null
+), n = "A PlayerPill part has to be rendered inside OxPlayerPill.", P = () => {
+  const e = r(l);
+  if (e === null) throw new Error(n);
+  return e;
+};
+export {
+  n as MISSING_PLAYER_PILL,
+  l as PlayerPillContext,
+  P as usePlayerPill
+};

package/dist/Display/PlayerPill/useElapsedSeconds.js

@@ -0,0 +1,36 @@
+import { useState as u, useEffect as f } from "react";
+const m = (t) => {
+  const e = Math.max(0, Math.floor(t)), n = (o) => String(o).padStart(2, "0");
+  return [
+    n(Math.floor(e / 3600)),
+    n(Math.floor(e / 60) % 60),
+    n(e % 60)
+  ].join(":");
+}, l = (t) => {
+  if (t !== void 0)
+    return t instanceof Date ? t.getTime() : t;
+}, h = ({
+  seconds: t,
+  startedAt: e,
+  running: n
+}) => {
+  const o = l(e), r = n && o !== void 0, [c, i] = u(() => Date.now());
+  return f(() => {
+    if (!r || o === void 0) return;
+    i(Date.now());
+    let a;
+    const s = () => {
+      a = setTimeout(
+        () => {
+          i(Date.now()), s();
+        },
+        1e3 - (Date.now() - o) % 1e3
+      );
+    };
+    return s(), () => clearTimeout(a);
+  }, [r, o]), !r || o === void 0 ? t : t + Math.max(0, Math.floor((c - o) / 1e3));
+};
+export {
+  m as formatElapsed,
+  h as useElapsedSeconds
+};

package/dist/Display/PointMarker/PointMarker.js

@@ -0,0 +1,30 @@
+import { jsx as t } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { moduleClasses as n } from "../../lib/cssModules.js";
+import { cn as p } from "../../lib/utils.js";
+import o from "./PointMarker.module.css.js";
+import { pointMarkerVariants as l } from "./index.js";
+const c = i(
+  ({ className: a, color: e = "category-1", dataTestid: r, ...m }, s) => /* @__PURE__ */ t(
+    "span",
+    {
+      ref: s,
+      "data-slot": "point-marker",
+      "data-testid": r,
+      className: p(o.oxPointMarker, a),
+      ...m,
+      children: /* @__PURE__ */ t(
+        "span",
+        {
+          "data-slot": "point-marker-center",
+          "data-testid": `${r}-center`,
+          className: n(o, l({ color: e }))
+        }
+      )
+    }
+  )
+);
+c.displayName = "OxPointMarker";
+export {
+  c as PointMarker
+};

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

@@ -0,0 +1,27 @@
+const o = "_oxPointMarker_1u39i_2", t = {
+  oxPointMarker: o,
+  "ox-point-marker-dot": "_ox-point-marker-dot_1u39i_2",
+  "ox-point-marker-dot--category-1": "_ox-point-marker-dot--category-1_1u39i_2",
+  "ox-point-marker-dot--category-2": "_ox-point-marker-dot--category-2_1u39i_2",
+  "ox-point-marker-dot--category-3": "_ox-point-marker-dot--category-3_1u39i_2",
+  "ox-point-marker-dot--category-4": "_ox-point-marker-dot--category-4_1u39i_2",
+  "ox-point-marker-dot--category-5": "_ox-point-marker-dot--category-5_1u39i_2",
+  "ox-point-marker-dot--category-6": "_ox-point-marker-dot--category-6_1u39i_2",
+  "ox-point-marker-dot--category-7": "_ox-point-marker-dot--category-7_1u39i_2",
+  "ox-point-marker-dot--category-8": "_ox-point-marker-dot--category-8_1u39i_2",
+  "ox-point-marker-dot--category-9": "_ox-point-marker-dot--category-9_1u39i_2",
+  "ox-point-marker-dot--category-10": "_ox-point-marker-dot--category-10_1u39i_2",
+  "ox-point-marker-dot--category-11": "_ox-point-marker-dot--category-11_1u39i_2",
+  "ox-point-marker-dot--category-12": "_ox-point-marker-dot--category-12_1u39i_2",
+  "ox-point-marker-dot--category-13": "_ox-point-marker-dot--category-13_1u39i_2",
+  "ox-point-marker-dot--category-14": "_ox-point-marker-dot--category-14_1u39i_2",
+  "ox-point-marker-dot--category-15": "_ox-point-marker-dot--category-15_1u39i_2",
+  "ox-point-marker-dot--category-16": "_ox-point-marker-dot--category-16_1u39i_2",
+  "ox-point-marker-dot--category-17": "_ox-point-marker-dot--category-17_1u39i_2",
+  "ox-point-marker-dot--category-18": "_ox-point-marker-dot--category-18_1u39i_2",
+  "ox-point-marker-dot--category-19": "_ox-point-marker-dot--category-19_1u39i_2"
+};
+export {
+  t as default,
+  o as oxPointMarker
+};

package/dist/Display/PointMarker/index.js

@@ -0,0 +1,32 @@
+import { cva as o } from "class-variance-authority";
+const t = o("ox-point-marker-dot", {
+  variants: {
+    color: {
+      "category-1": "ox-point-marker-dot--category-1",
+      "category-2": "ox-point-marker-dot--category-2",
+      "category-3": "ox-point-marker-dot--category-3",
+      "category-4": "ox-point-marker-dot--category-4",
+      "category-5": "ox-point-marker-dot--category-5",
+      "category-6": "ox-point-marker-dot--category-6",
+      "category-7": "ox-point-marker-dot--category-7",
+      "category-8": "ox-point-marker-dot--category-8",
+      "category-9": "ox-point-marker-dot--category-9",
+      "category-10": "ox-point-marker-dot--category-10",
+      "category-11": "ox-point-marker-dot--category-11",
+      "category-12": "ox-point-marker-dot--category-12",
+      "category-13": "ox-point-marker-dot--category-13",
+      "category-14": "ox-point-marker-dot--category-14",
+      "category-15": "ox-point-marker-dot--category-15",
+      "category-16": "ox-point-marker-dot--category-16",
+      "category-17": "ox-point-marker-dot--category-17",
+      "category-18": "ox-point-marker-dot--category-18",
+      "category-19": "ox-point-marker-dot--category-19"
+    }
+  },
+  defaultVariants: {
+    color: "category-1"
+  }
+});
+export {
+  t as pointMarkerVariants
+};

package/dist/Display/ReactionBar/ReactionBar.js

@@ -0,0 +1,115 @@
+import { jsxs as p, jsx as r } from "react/jsx-runtime";
+import * as d from "@radix-ui/react-popover";
+import { forwardRef as $, useState as g } from "react";
+import { cn as O } from "../../lib/utils.js";
+import a from "./ReactionBar.module.css.js";
+import { splitReactions as k } from "./overflow.js";
+import { useTranslate as C } from "../../Locale/useTranslate.js";
+import { ReactionButton as l } from "../ReactionButton/ReactionButton.js";
+import { Popover as m } from "../../Feedback/Popover/Popover.js";
+import { PopoverContent as N } from "../../Feedback/Popover/PopoverContent.js";
+import { ReactionPicker as b } from "../ReactionPicker/ReactionPicker.js";
+const w = 6, j = 16, I = $(
+  ({
+    className: c,
+    reactions: f,
+    max: v = 3,
+    emojis: h,
+    onReact: i,
+    onShowMore: n,
+    dataTestid: o,
+    ...P
+  }, y) => {
+    const T = C(), [u, s] = g(!1), t = k(f, v), x = (e) => {
+      s(!1), i == null || i(e);
+    };
+    return /* @__PURE__ */ p(
+      "div",
+      {
+        ref: y,
+        "data-slot": "reaction-bar",
+        "data-testid": o,
+        className: O(a["ox-reaction-bar"], c),
+        ...P,
+        children: [
+          t.visible.map((e) => /* @__PURE__ */ r(
+            l,
+            {
+              emoji: e.reactionType,
+              count: e.total,
+              reacted: e.iReact,
+              dataTestid: `${o}-reaction-${e.reactionType}`,
+              onClick: () => i == null ? void 0 : i(e.reactionType)
+            },
+            e.reactionType
+          )),
+          t.hidden.length > 0 ? /* @__PURE__ */ r(
+            m,
+            {
+              trigger: /* @__PURE__ */ r(
+                l,
+                {
+                  variant: "more",
+                  count: t.hidden.length,
+                  dataTestid: `${o}-more`
+                }
+              ),
+              children: /* @__PURE__ */ r(N, { showArrow: !0, dataTestid: `${o}-overflow`, children: /* @__PURE__ */ p(
+                "div",
+                {
+                  className: a["ox-reaction-bar-overflow"],
+                  "data-slot": "reaction-overflow",
+                  "data-testid": `${o}-overflow-panel`,
+                  children: [
+                    /* @__PURE__ */ r("p", { className: a["ox-reaction-bar-overflow-title"], children: T("orxata.reaction.moreTitle") }),
+                    /* @__PURE__ */ r("div", { className: a["ox-reaction-bar-overflow-list"], children: t.hidden.map((e) => /* @__PURE__ */ r(
+                      l,
+                      {
+                        emoji: e.reactionType,
+                        count: e.total,
+                        reacted: e.iReact,
+                        dataTestid: `${o}-hidden-${e.reactionType}`,
+                        onClick: () => i == null ? void 0 : i(e.reactionType)
+                      },
+                      e.reactionType
+                    )) })
+                  ]
+                }
+              ) })
+            }
+          ) : null,
+          /* @__PURE__ */ r(
+            m,
+            {
+              open: u,
+              onOpenChange: s,
+              trigger: /* @__PURE__ */ r(l, { variant: "add", dataTestid: `${o}-add` }),
+              children: /* @__PURE__ */ r(d.Portal, { children: /* @__PURE__ */ r(
+                d.Content,
+                {
+                  sideOffset: w,
+                  collisionPadding: j,
+                  children: /* @__PURE__ */ r(
+                    b,
+                    {
+                      emojis: h,
+                      dataTestid: `${o}-picker`,
+                      onReact: x,
+                      onShowMore: () => {
+                        s(!1), n == null || n();
+                      }
+                    }
+                  )
+                }
+              ) })
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+I.displayName = "OxReactionBar";
+export {
+  I as ReactionBar
+};

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

@@ -0,0 +1,9 @@
+const o = {
+  "ox-reaction-bar": "_ox-reaction-bar_dsp0r_2",
+  "ox-reaction-bar-overflow": "_ox-reaction-bar-overflow_dsp0r_2",
+  "ox-reaction-bar-overflow-title": "_ox-reaction-bar-overflow-title_dsp0r_2",
+  "ox-reaction-bar-overflow-list": "_ox-reaction-bar-overflow-list_dsp0r_2"
+};
+export {
+  o as default
+};

package/dist/Display/ReactionBar/overflow.js

@@ -0,0 +1,17 @@
+const a = (o, i) => i.total - o.total || o.reactionType.localeCompare(i.reactionType), d = (o, i) => {
+  const n = [...o].sort(a), t = Math.max(0, Math.trunc(i));
+  if (n.length <= t) return { visible: n, hidden: [] };
+  const s = n.slice(0, t), c = n.slice(t), r = s.some((e) => e.iReact) ? void 0 : c.find((e) => e.iReact);
+  if (!r || t === 0) return { visible: s, hidden: c };
+  const l = s[t - 1];
+  return {
+    visible: [...s.slice(0, t - 1), r],
+    hidden: [
+      ...c.filter((e) => e !== r),
+      l
+    ].sort(a)
+  };
+};
+export {
+  d as splitReactions
+};