@sesamehr/react-design-system 3.9.0 → 3.10.1

package/dist/Display/FileCard/FileCard.js

@@ -0,0 +1,71 @@
+import { jsxs as c, jsx as e } from "react/jsx-runtime";
+import { IconFile as h } from "@sesame/orxata-icons/IconFile";
+import { Icon as v } from "@sesame/orxata-icons/react";
+import { forwardRef as C, useId as y } from "react";
+import { moduleClasses as I } from "../../lib/cssModules.js";
+import { cn as $ } from "../../lib/utils.js";
+import a from "./FileCard.module.css.js";
+import { fileCardVariants as b } from "./index.js";
+import { Card as g } from "../../Layout/Card/Card.js";
+const F = C(
+  ({
+    className: n,
+    children: d,
+    type: t = "file",
+    surface: f = "default",
+    state: p = "default",
+    progress: l,
+    meta: s,
+    icon: x,
+    action: i,
+    dataTestid: r,
+    ...u
+  }, N) => {
+    const o = `${y()}-name`, m = Math.min(100, Math.max(0, l ?? 0));
+    return /* @__PURE__ */ c(
+      g,
+      {
+        ref: N,
+        flat: !0,
+        "data-slot": "file-card",
+        dataTestid: r,
+        className: $(
+          I(a, b({ type: t, surface: f, state: p })),
+          n
+        ),
+        ...u,
+        children: [
+          /* @__PURE__ */ e("span", { className: a["ox-file-card-icon"], "data-slot": "icon", children: x ?? /* @__PURE__ */ e(v, { icon: h, "data-testid": `${r}-icon` }) }),
+          /* @__PURE__ */ c("span", { className: a["ox-file-card-text"], children: [
+            /* @__PURE__ */ e("span", { id: o, className: a["ox-file-card-name"], children: d }),
+            s && /* @__PURE__ */ e("span", { className: a["ox-file-card-meta"], children: s })
+          ] }),
+          i && /* @__PURE__ */ e("span", { className: a["ox-file-card-action"], children: i }),
+          l !== void 0 && /* @__PURE__ */ e(
+            "span",
+            {
+              className: a["ox-file-card-progress"],
+              role: "progressbar",
+              "aria-valuemin": 0,
+              "aria-valuemax": 100,
+              "aria-valuenow": m,
+              "aria-labelledby": o,
+              "data-testid": `${r}-progress`,
+              children: /* @__PURE__ */ e(
+                "span",
+                {
+                  className: a["ox-file-card-progress-value"],
+                  style: { inlineSize: `${m}%` }
+                }
+              )
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+F.displayName = "OxFileCard";
+export {
+  F as FileCard
+};

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

@@ -0,0 +1,20 @@
+const e = {
+  "ox-file-card": "_ox-file-card_1uum8_2",
+  "ox-file-card--brand": "_ox-file-card--brand_1uum8_2",
+  "ox-file-card-icon": "_ox-file-card-icon_1uum8_2",
+  "ox-file-card--pdf": "_ox-file-card--pdf_1uum8_2",
+  "ox-file-card--word": "_ox-file-card--word_1uum8_2",
+  "ox-file-card--excel": "_ox-file-card--excel_1uum8_2",
+  "ox-file-card--powerpoint": "_ox-file-card--powerpoint_1uum8_2",
+  "ox-file-card--file": "_ox-file-card--file_1uum8_2",
+  "ox-file-card-text": "_ox-file-card-text_1uum8_2",
+  "ox-file-card-name": "_ox-file-card-name_1uum8_2",
+  "ox-file-card-meta": "_ox-file-card-meta_1uum8_2",
+  "ox-file-card-action": "_ox-file-card-action_1uum8_2",
+  "ox-file-card-progress": "_ox-file-card-progress_1uum8_2",
+  "ox-file-card-progress-value": "_ox-file-card-progress-value_1uum8_2",
+  "ox-file-card--error": "_ox-file-card--error_1uum8_2"
+};
+export {
+  e as default
+};

package/dist/Display/FileCard/index.js

@@ -0,0 +1,30 @@
+import { cva as e } from "class-variance-authority";
+const a = e("ox-file-card", {
+  variants: {
+    type: {
+      pdf: "ox-file-card--pdf",
+      word: "ox-file-card--word",
+      excel: "ox-file-card--excel",
+      powerpoint: "ox-file-card--powerpoint",
+      file: "ox-file-card--file"
+    },
+    surface: {
+      /* No class: the default surface is the one `Card` already draws, and the
+         base class carries the rest. */
+      default: "",
+      brand: "ox-file-card--brand"
+    },
+    state: {
+      default: "",
+      error: "ox-file-card--error"
+    }
+  },
+  defaultVariants: {
+    type: "file",
+    surface: "default",
+    state: "default"
+  }
+});
+export {
+  a as fileCardVariants
+};

package/dist/Display/FilePreviewCard/FilePreviewCard.js

@@ -0,0 +1,51 @@
+import { jsxs as n, jsx as e } from "react/jsx-runtime";
+import { IconPhoto as f } from "@sesame/orxata-icons/IconPhoto";
+import { Icon as p } from "@sesame/orxata-icons/react";
+import { forwardRef as w, useState as x, useEffect as v } from "react";
+import { cn as C } from "../../lib/utils.js";
+import r from "./FilePreviewCard.module.css.js";
+import { Card as F } from "../../Layout/Card/Card.js";
+const P = w(
+  ({ className: s, src: i, alt: o, meta: m, dataTestid: a, ...t }, c) => {
+    const [d, l] = x(!1);
+    return v(() => {
+      l(!1);
+    }, [i]), /* @__PURE__ */ n(
+      F,
+      {
+        ref: c,
+        flat: !0,
+        "data-slot": "file-preview-card",
+        dataTestid: a,
+        className: C(r.oxFilePreviewCard, s),
+        ...t,
+        children: [
+          /* @__PURE__ */ e("span", { className: r.oxFilePreviewCardMedia, children: d ? /* @__PURE__ */ e(
+            "span",
+            {
+              className: r.oxFilePreviewCardFallback,
+              role: "img",
+              "aria-label": o,
+              "data-testid": `${a}-fallback`,
+              children: /* @__PURE__ */ e(p, { icon: f })
+            }
+          ) : /* @__PURE__ */ e(
+            "img",
+            {
+              className: r.oxFilePreviewCardImage,
+              src: i,
+              alt: o,
+              "data-testid": `${a}-image`,
+              onError: () => l(!0)
+            }
+          ) }),
+          /* @__PURE__ */ e("span", { className: r.oxFilePreviewCardMeta, children: m })
+        ]
+      }
+    );
+  }
+);
+P.displayName = "OxFilePreviewCard";
+export {
+  P as FilePreviewCard
+};

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

@@ -0,0 +1,15 @@
+const e = "_oxFilePreviewCard_f28bd_2", i = "_oxFilePreviewCardMedia_f28bd_2", a = "_oxFilePreviewCardImage_f28bd_2", r = "_oxFilePreviewCardFallback_f28bd_2", d = "_oxFilePreviewCardMeta_f28bd_2", l = {
+  oxFilePreviewCard: e,
+  oxFilePreviewCardMedia: i,
+  oxFilePreviewCardImage: a,
+  oxFilePreviewCardFallback: r,
+  oxFilePreviewCardMeta: d
+};
+export {
+  l as default,
+  e as oxFilePreviewCard,
+  r as oxFilePreviewCardFallback,
+  a as oxFilePreviewCardImage,
+  i as oxFilePreviewCardMedia,
+  d as oxFilePreviewCardMeta
+};

package/dist/Display/ImageAttachment/ImageAttachment.js

@@ -0,0 +1,57 @@
+import { jsx as c, jsxs as p } from "react/jsx-runtime";
+import { forwardRef as u } from "react";
+import { cn as $ } from "../../lib/utils.js";
+import a from "./ImageAttachment.module.css.js";
+import { AttachmentMedia as x } from "../../internal/AttachmentMedia/AttachmentMedia.js";
+const s = 4, y = u(
+  ({ className: h, images: e, surface: n = "default", onOpen: m, dataTestid: r, ...d }, g) => {
+    const l = e.slice(0, s), o = Math.max(e.length - s, 0), f = e.length > 1;
+    return /* @__PURE__ */ c(
+      "div",
+      {
+        ref: g,
+        "data-slot": "image-attachment",
+        "data-testid": r,
+        className: $(
+          a["ox-image-attachment"],
+          f && a["ox-image-attachment--gallery"],
+          h
+        ),
+        ...d,
+        children: l.map((i, t) => /* @__PURE__ */ c(
+          "button",
+          {
+            type: "button",
+            className: a["ox-image-attachment-tile"],
+            "data-testid": `${r}-tile-${t}`,
+            onClick: () => m == null ? void 0 : m(t),
+            children: /* @__PURE__ */ c(
+              x,
+              {
+                image: i,
+                surface: n,
+                dataTestid: `${r}-media-${t}`,
+                children: o > 0 && t === l.length - 1 ? /* @__PURE__ */ p(
+                  "span",
+                  {
+                    className: a["ox-image-attachment-more"],
+                    "aria-hidden": "true",
+                    children: [
+                      "+",
+                      o
+                    ]
+                  }
+                ) : null
+              }
+            )
+          },
+          `${t}-${i.src}`
+        ))
+      }
+    );
+  }
+);
+y.displayName = "OxImageAttachment";
+export {
+  y as ImageAttachment
+};

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

@@ -0,0 +1,9 @@
+const t = {
+  "ox-image-attachment": "_ox-image-attachment_18sj9_2",
+  "ox-image-attachment--gallery": "_ox-image-attachment--gallery_18sj9_2",
+  "ox-image-attachment-tile": "_ox-image-attachment-tile_18sj9_2",
+  "ox-image-attachment-more": "_ox-image-attachment-more_18sj9_2"
+};
+export {
+  t as default
+};

package/dist/Display/LinkPreview/LinkPreview.js

@@ -0,0 +1,91 @@
+import { jsxs as l, jsx as r } from "react/jsx-runtime";
+import { IconWorld as k } from "@sesame/orxata-icons/IconWorld";
+import { Icon as w } from "@sesame/orxata-icons/react";
+import { forwardRef as f, useId as v } from "react";
+import { cn as N } from "../../lib/utils.js";
+import e from "./LinkPreview.module.css.js";
+import { AttachmentMedia as h } from "../../internal/AttachmentMedia/AttachmentMedia.js";
+const b = f(
+  ({
+    className: m,
+    href: p,
+    image: n,
+    surface: t = "default",
+    domain: o,
+    description: a,
+    children: d,
+    dataTestid: i,
+    ...c
+  }, x) => {
+    const s = `${v()}-title`;
+    return /* @__PURE__ */ l(
+      "a",
+      {
+        ref: x,
+        href: p,
+        target: "_blank",
+        rel: "noopener noreferrer",
+        "aria-labelledby": s,
+        "data-slot": "link-preview",
+        "data-testid": i,
+        className: N(
+          e["ox-link-preview"],
+          t === "brand" && e["ox-link-preview--brand"],
+          m
+        ),
+        ...c,
+        children: [
+          n ? /* @__PURE__ */ r(
+            h,
+            {
+              image: n,
+              surface: t,
+              dataTestid: `${i}-media`
+            }
+          ) : null,
+          /* @__PURE__ */ l("span", { className: e["ox-link-preview-text"], children: [
+            o ? /* @__PURE__ */ l(
+              "span",
+              {
+                className: e["ox-link-preview-domain"],
+                "data-testid": `${i}-domain`,
+                children: [
+                  /* @__PURE__ */ r(
+                    w,
+                    {
+                      icon: k,
+                      className: e["ox-link-preview-domain-glyph"],
+                      "data-slot": "icon"
+                    }
+                  ),
+                  o
+                ]
+              }
+            ) : null,
+            /* @__PURE__ */ r(
+              "span",
+              {
+                id: s,
+                className: e["ox-link-preview-title"],
+                "data-testid": `${i}-title`,
+                children: d
+              }
+            ),
+            a ? /* @__PURE__ */ r(
+              "span",
+              {
+                className: e["ox-link-preview-description"],
+                "data-testid": `${i}-description`,
+                children: a
+              }
+            ) : null
+          ] })
+        ]
+      }
+    );
+  }
+);
+b.displayName = "OxLinkPreview";
+export {
+  b as LinkPreview
+};

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

@@ -0,0 +1,12 @@
+const i = {
+  "ox-link-preview": "_ox-link-preview_1ybch_2",
+  "ox-link-preview--brand": "_ox-link-preview--brand_1ybch_2",
+  "ox-link-preview-text": "_ox-link-preview-text_1ybch_2",
+  "ox-link-preview-domain": "_ox-link-preview-domain_1ybch_2",
+  "ox-link-preview-domain-glyph": "_ox-link-preview-domain-glyph_1ybch_2",
+  "ox-link-preview-title": "_ox-link-preview-title_1ybch_2",
+  "ox-link-preview-description": "_ox-link-preview-description_1ybch_2"
+};
+export {
+  i as default
+};

package/dist/Display/LocationAttachment/LocationAttachment.js

@@ -0,0 +1,73 @@
+import { jsxs as m, jsx as o } from "react/jsx-runtime";
+import { IconMapPin as d } from "@sesame/orxata-icons/IconMapPin";
+import { Icon as h } from "@sesame/orxata-icons/react";
+import { forwardRef as x } from "react";
+import { cn as f } from "../../lib/utils.js";
+import t from "./LocationAttachment.module.css.js";
+import { AttachmentMedia as N } from "../../internal/AttachmentMedia/AttachmentMedia.js";
+const A = x(
+  ({
+    className: e,
+    href: i,
+    image: l,
+    surface: n = "default",
+    address: c,
+    children: s,
+    dataTestid: a,
+    ...r
+  }, p) => /* @__PURE__ */ m(
+    "a",
+    {
+      ref: p,
+      href: i,
+      "data-slot": "location-attachment",
+      "data-testid": a,
+      className: f(
+        t["ox-location-attachment"],
+        n === "brand" && t["ox-location-attachment--brand"],
+        e
+      ),
+      ...r,
+      children: [
+        /* @__PURE__ */ o(
+          N,
+          {
+            image: l,
+            surface: n,
+            dataTestid: `${a}-map`,
+            placeholder: /* @__PURE__ */ o(
+              h,
+              {
+                icon: d,
+                className: t["ox-location-attachment-pin"],
+                "data-slot": "icon"
+              }
+            )
+          }
+        ),
+        /* @__PURE__ */ m("span", { className: t["ox-location-attachment-text"], children: [
+          /* @__PURE__ */ o(
+            "span",
+            {
+              className: t["ox-location-attachment-place"],
+              "data-testid": `${a}-place`,
+              children: s
+            }
+          ),
+          c ? /* @__PURE__ */ o(
+            "span",
+            {
+              className: t["ox-location-attachment-address"],
+              "data-testid": `${a}-address`,
+              children: c
+            }
+          ) : null
+        ] })
+      ]
+    }
+  )
+);
+A.displayName = "OxLocationAttachment";
+export {
+  A as LocationAttachment
+};

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

@@ -0,0 +1,11 @@
+const t = {
+  "ox-location-attachment": "_ox-location-attachment_e3cts_2",
+  "ox-location-attachment--brand": "_ox-location-attachment--brand_e3cts_2",
+  "ox-location-attachment-pin": "_ox-location-attachment-pin_e3cts_2",
+  "ox-location-attachment-text": "_ox-location-attachment-text_e3cts_2",
+  "ox-location-attachment-place": "_ox-location-attachment-place_e3cts_2",
+  "ox-location-attachment-address": "_ox-location-attachment-address_e3cts_2"
+};
+export {
+  t as default
+};

package/dist/Display/Mention/Mention.js

@@ -0,0 +1,27 @@
+import { jsx as s } from "react/jsx-runtime";
+import { Slot as i } from "@radix-ui/react-slot";
+import { forwardRef as p } from "react";
+import { moduleClasses as a } from "../../lib/cssModules.js";
+import { cn as f } from "../../lib/utils.js";
+import l from "./Mention.module.css.js";
+import { mentionVariants as c } from "./index.js";
+const d = p(
+  ({ className: t, personal: m = !1, asChild: o = !1, children: r, ...e }, n) => /* @__PURE__ */ s(
+    o ? i : "button",
+    {
+      ref: n,
+      type: o ? void 0 : "button",
+      "data-slot": "mention",
+      className: f(
+        a(l, c({ personal: m })),
+        t
+      ),
+      ...e,
+      children: r
+    }
+  )
+);
+d.displayName = "OxMention";
+export {
+  d as Mention
+};

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

@@ -0,0 +1,8 @@
+const o = {
+  "ox-mention": "_ox-mention_10cwt_2",
+  "ox-mention--other": "_ox-mention--other_10cwt_2",
+  "ox-mention--personal": "_ox-mention--personal_10cwt_2"
+};
+export {
+  o as default
+};

package/dist/Display/Mention/index.js

@@ -0,0 +1,15 @@
+import { cva as n } from "class-variance-authority";
+const a = n("ox-mention", {
+  variants: {
+    personal: {
+      false: "ox-mention--other",
+      true: "ox-mention--personal"
+    }
+  },
+  defaultVariants: {
+    personal: !1
+  }
+});
+export {
+  a as mentionVariants
+};

package/dist/Display/NumberFlow/NumberFlow.js

@@ -0,0 +1,31 @@
+import { jsx as d } from "react/jsx-runtime";
+import f from "@number-flow/react";
+import { forwardRef as c } from "react";
+import { useLocale as n } from "../../Locale/useLocale.js";
+import { cn as p } from "../../lib/utils.js";
+import u from "./NumberFlow.module.css.js";
+import { resolveNumberFlowPreset as b } from "./index.js";
+const w = c(
+  ({ className: r, preset: e = "number", value: t, dataTestid: m, ...s }, l) => {
+    const o = b(e), a = n(), i = o.locales ?? a;
+    return /* @__PURE__ */ d(
+      f,
+      {
+        ref: l,
+        value: t,
+        format: o.format,
+        locales: i,
+        trend: o.trend,
+        digits: o.digits,
+        "data-slot": "number-flow",
+        "data-testid": m,
+        className: p(u.oxNumberFlow, r),
+        ...s
+      }
+    );
+  }
+);
+w.displayName = "OxNumberFlow";
+export {
+  w as NumberFlow
+};

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

@@ -0,0 +1,7 @@
+const o = "_oxNumberFlow_1gbln_2", e = {
+  oxNumberFlow: o
+};
+export {
+  e as default,
+  o as oxNumberFlow
+};

package/dist/Display/NumberFlow/index.js

@@ -0,0 +1,23 @@
+const r = {
+  /** Intl already groups thousands, which is most of what makes this look good. */
+  number: {},
+  currency: { format: { style: "currency", currency: "EUR" } },
+  /**
+   * `Intl` multiplies by 100 for this style: `0.42` renders as "42 %", not
+   * "0,42 %". Pass the ratio, not the percentage.
+   */
+  percent: { format: { style: "percent", maximumFractionDigits: 1 } },
+  compact: { format: { notation: "compact", compactDisplay: "short" } },
+  /**
+   * One two-digit sexagesimal segment — minutes, or seconds, not `mm:ss`. A
+   * clock is two of these with a colon between them, because a single
+   * `Intl.NumberFormat` cannot render one number as two counters that roll
+   * independently. The tens digit is capped at 5 so it loops 0-5 and never
+   * spins through 6-9 on the way round.
+   */
+  time: { format: { minimumIntegerDigits: 2 }, digits: { 1: { max: 5 } } }
+}, c = (t = "number") => typeof t == "string" ? r[t] : t, e = Object.keys(r);
+export {
+  e as NUMBER_FLOW_PRESETS,
+  c as resolveNumberFlowPreset
+};

package/dist/Display/PaymentCard/PaymentCard.js

@@ -0,0 +1,107 @@
+import { jsxs as t, jsx as e, Fragment as x } from "react/jsx-runtime";
+import { forwardRef as f } from "react";
+import C from "../../assets/images/sesame-logo-white.svg.js";
+import { moduleClasses as u } from "../../lib/cssModules.js";
+import { cn as i } from "../../lib/utils.js";
+import a from "./PaymentCard.module.css.js";
+import { paymentCardVariants as g } from "./index.js";
+import { useTranslate as h } from "../../Locale/useTranslate.js";
+const N = (c) => ({
+  cardNumber: "0000 00** **** 0000",
+  cardholderName: c,
+  expiryDate: "00/00",
+  cvc: "CVC ***",
+  lastFourDigits: "7661"
+}), P = {
+  background: "linear-gradient(59.34deg, rgb(26, 26, 18) 0%, rgb(51, 65, 85) 100%)"
+}, v = {
+  virtual: "orxata.paymentCard.type.virtual",
+  physical: "orxata.paymentCard.type.physical",
+  subscription: "orxata.paymentCard.type.subscription"
+}, D = f(
+  ({
+    className: c,
+    size: r = "default",
+    disabled: d = !1,
+    badgeType: o,
+    cardData: n,
+    dataTestid: m,
+    ...y
+  }, p) => {
+    const s = h(), l = n ?? N(s("orxata.paymentCard.cardholderName"));
+    return /* @__PURE__ */ t(
+      "div",
+      {
+        ref: p,
+        "data-slot": "payment-card",
+        "data-testid": m,
+        className: i(
+          u(a, g({ size: r, disabled: d })),
+          c
+        ),
+        style: P,
+        ...y,
+        children: [
+          /* @__PURE__ */ e(
+            "img",
+            {
+              src: C,
+              alt: "Sesame",
+              className: i(
+                a.oxPaymentCardLogo,
+                r === "default" ? a.oxPaymentCardLogoDefault : a.oxPaymentCardLogoCompact
+              )
+            }
+          ),
+          r === "default" && o && /* @__PURE__ */ e(
+            "span",
+            {
+              "data-testid": `${m}-badge`,
+              className: a.oxPaymentCardBadge,
+              children: s(v[o])
+            }
+          ),
+          r === "default" && /* @__PURE__ */ t("div", { className: a.oxPaymentCardInfo, children: [
+            /* @__PURE__ */ e("span", { className: a.oxPaymentCardNumber, children: l.cardNumber }),
+            /* @__PURE__ */ e("span", { className: a.oxPaymentCardDetail, children: l.cardholderName })
+          ] }),
+          r === "compact" && /* @__PURE__ */ t(x, { children: [
+            /* @__PURE__ */ e("span", { className: a.oxPaymentCardDigits, children: l.lastFourDigits }),
+            /* @__PURE__ */ t(
+              "svg",
+              {
+                className: a.oxPaymentCardSchemeCompact,
+                viewBox: "0 0 40 24",
+                fill: "none",
+                children: [
+                  /* @__PURE__ */ e("circle", { cx: "14", cy: "12", r: "10", fill: "#E33A24", fillOpacity: "0.6" }),
+                  /* @__PURE__ */ e("circle", { cx: "26", cy: "12", r: "10", fill: "#F8CB2E", fillOpacity: "0.6" })
+                ]
+              }
+            )
+          ] }),
+          r === "default" && /* @__PURE__ */ t("div", { className: a.oxPaymentCardFooter, children: [
+            /* @__PURE__ */ e("span", { className: a.oxPaymentCardDetail, children: l.expiryDate }),
+            /* @__PURE__ */ e("span", { className: a.oxPaymentCardDetail, children: l.cvc }),
+            /* @__PURE__ */ t(
+              "svg",
+              {
+                className: a.oxPaymentCardScheme,
+                viewBox: "0 0 40 24",
+                fill: "none",
+                children: [
+                  /* @__PURE__ */ e("circle", { cx: "14", cy: "12", r: "10", fill: "#E33A24" }),
+                  /* @__PURE__ */ e("circle", { cx: "26", cy: "12", r: "10", fill: "#F8CB2E", fillOpacity: "0.6" })
+                ]
+              }
+            )
+          ] })
+        ]
+      }
+    );
+  }
+);
+D.displayName = "OxPaymentCard";
+export {
+  D as PaymentCard
+};