@sesamehr/react-design-system 3.9.0 → 3.10.1

package/dist/Display/Avatar/AvatarRounded/AvatarRounded.js

@@ -0,0 +1,75 @@
+import { jsxs as N, jsx as a } from "react/jsx-runtime";
+import { forwardRef as h } from "react";
+import { moduleClasses as b } from "../../../lib/cssModules.js";
+import { cn as B } from "../../../lib/utils.js";
+/* empty css                 */
+import { useAvatarBullet as C } from "../hooks/useAvatarBullet.js";
+import { avatarRoundedVariants as $ } from "../index.js";
+import r from "./AvatarRounded.module.css.js";
+import { Bullet as j } from "../../../Feedback/Bullet/Bullet.js";
+import { Tooltip as y } from "../../../Feedback/Tooltip/Tooltip.js";
+import { TooltipContent as I } from "../../../Feedback/Tooltip/TooltipContent.js";
+const T = h(
+  ({
+    className: p,
+    src: e,
+    size: m = "md",
+    tone: u = "brand",
+    disabled: c = !1,
+    status: d,
+    alt: f = "",
+    action: n,
+    label: s,
+    tooltip: t,
+    tabIndex: l,
+    children: v,
+    dataTestid: o,
+    ...x
+  }, A) => {
+    const { bulletSize: R } = C(m ?? "md"), g = t ? l ?? 0 : l, i = /* @__PURE__ */ N(
+      "span",
+      {
+        ref: A,
+        "data-slot": "avatar",
+        "data-testid": o,
+        className: B(
+          r.oxAvatarRounded,
+          b(
+            r,
+            $({ size: m, tone: u, disabled: c })
+          ),
+          p
+        ),
+        tabIndex: g,
+        ...x,
+        children: [
+          e ? /* @__PURE__ */ a(
+            "img",
+            {
+              className: r.oxAvatarRoundedImage,
+              "data-testid": `${o}-image`,
+              src: e,
+              alt: f
+            }
+          ) : /* @__PURE__ */ a("span", { className: r.oxAvatarRoundedContent, children: v }),
+          d && /* @__PURE__ */ a(
+            j,
+            {
+              className: r.oxAvatarRoundedBullet,
+              dataTestid: `${o}-bullet`,
+              color: d,
+              size: R
+            }
+          ),
+          n && /* @__PURE__ */ a("span", { className: r.oxAvatarRoundedAction, children: n }),
+          s && /* @__PURE__ */ a("span", { className: r.oxAvatarRoundedLabel, children: s })
+        ]
+      }
+    );
+    return t ? /* @__PURE__ */ a(y, { trigger: i, children: /* @__PURE__ */ a(I, { dataTestid: `${o}-tooltip`, children: t }) }) : i;
+  }
+);
+T.displayName = "OxAvatarRounded";
+export {
+  T as AvatarRounded
+};

package/dist/Display/Avatar/AvatarRounded/AvatarRounded.module.css.js

@@ -0,0 +1,20 @@
+const a = "_oxAvatarRoundedImage_mxm4c_2", o = "_oxAvatarRoundedContent_mxm4c_2", d = "_oxAvatarRounded_mxm4c_2", t = "_oxAvatarRoundedBullet_mxm4c_2", n = "_oxAvatarRoundedAction_mxm4c_2", e = "_oxAvatarRoundedLabel_mxm4c_2", r = {
+  oxAvatarRoundedImage: a,
+  oxAvatarRoundedContent: o,
+  oxAvatarRounded: d,
+  oxAvatarRoundedBullet: t,
+  oxAvatarRoundedAction: n,
+  oxAvatarRoundedLabel: e,
+  "ox-avatar-rounded--brand": "_ox-avatar-rounded--brand_mxm4c_2",
+  "ox-avatar-rounded--neutral": "_ox-avatar-rounded--neutral_mxm4c_2",
+  "ox-avatar-rounded--disabled": "_ox-avatar-rounded--disabled_mxm4c_2"
+};
+export {
+  r as default,
+  d as oxAvatarRounded,
+  n as oxAvatarRoundedAction,
+  t as oxAvatarRoundedBullet,
+  o as oxAvatarRoundedContent,
+  a as oxAvatarRoundedImage,
+  e as oxAvatarRoundedLabel
+};

package/dist/Display/Avatar/AvatarSkeleton/AvatarSkeleton.js

@@ -0,0 +1,29 @@
+import { jsx as d } from "react/jsx-runtime";
+import { forwardRef as i } from "react";
+import { cn as o } from "../../../lib/utils.js";
+/* empty css                 */
+import { avatarSquareVariants as p, avatarRoundedVariants as u } from "../index.js";
+import r from "./AvatarSkeleton.module.css.js";
+import { Skeleton as f } from "../../../Feedback/Skeleton/Skeleton.js";
+const v = i(
+  ({ className: t, size: a = "md", shape: e = "rounded", dataTestid: l, ...n }, s) => {
+    const m = e === "square" ? p({ size: a, tone: null, disabled: null }) : o(
+      r["ox-avatar-skeleton--rounded"],
+      u({ size: a, tone: null, disabled: null })
+    );
+    return /* @__PURE__ */ d(
+      f,
+      {
+        ref: s,
+        "data-slot": "avatar-skeleton",
+        dataTestid: l,
+        className: o(r["ox-avatar-skeleton"], m, t),
+        ...n
+      }
+    );
+  }
+);
+v.displayName = "OxAvatarSkeleton";
+export {
+  v as AvatarSkeleton
+};

package/dist/Display/Avatar/AvatarSkeleton/AvatarSkeleton.module.css.js

@@ -0,0 +1,7 @@
+const a = {
+  "ox-avatar-skeleton": "_ox-avatar-skeleton_1c9kd_2",
+  "ox-avatar-skeleton--rounded": "_ox-avatar-skeleton--rounded_1c9kd_2"
+};
+export {
+  a as default
+};

package/dist/Display/Avatar/AvatarSquare/AvatarSquare.js

@@ -0,0 +1,72 @@
+import { jsxs as g, jsx as a } from "react/jsx-runtime";
+import { forwardRef as N } from "react";
+import { moduleClasses as h } from "../../../lib/cssModules.js";
+import { cn as b } from "../../../lib/utils.js";
+/* empty css                 */
+import { useAvatarBullet as B } from "../hooks/useAvatarBullet.js";
+import { avatarSquareVariants as C } from "../index.js";
+import r from "./AvatarSquare.module.css.js";
+import { Bullet as $ } from "../../../Feedback/Bullet/Bullet.js";
+import { Tooltip as j } from "../../../Feedback/Tooltip/Tooltip.js";
+import { TooltipContent as y } from "../../../Feedback/Tooltip/TooltipContent.js";
+const I = N(
+  ({
+    className: u,
+    src: o,
+    size: m = "md",
+    tone: c = "brand",
+    disabled: d = !1,
+    status: s,
+    alt: f = "",
+    action: l,
+    label: i,
+    tooltip: e,
+    tabIndex: n,
+    children: v,
+    dataTestid: t,
+    ...x
+  }, A) => {
+    const { bulletSize: S } = B(m ?? "md"), q = e ? n ?? 0 : n, p = /* @__PURE__ */ g(
+      "span",
+      {
+        ref: A,
+        "data-slot": "avatar",
+        "data-testid": t,
+        className: b(
+          r.oxAvatarSquare,
+          h(r, C({ size: m, tone: c, disabled: d })),
+          u
+        ),
+        tabIndex: q,
+        ...x,
+        children: [
+          o ? /* @__PURE__ */ a(
+            "img",
+            {
+              className: r.oxAvatarSquareImage,
+              "data-testid": `${t}-image`,
+              src: o,
+              alt: f
+            }
+          ) : /* @__PURE__ */ a("span", { className: r.oxAvatarSquareContent, children: v }),
+          s && /* @__PURE__ */ a(
+            $,
+            {
+              className: r.oxAvatarSquareBullet,
+              dataTestid: `${t}-bullet`,
+              color: s,
+              size: S
+            }
+          ),
+          l && /* @__PURE__ */ a("span", { className: r.oxAvatarSquareAction, children: l }),
+          i && /* @__PURE__ */ a("span", { className: r.oxAvatarSquareLabel, children: i })
+        ]
+      }
+    );
+    return e ? /* @__PURE__ */ a(j, { trigger: p, children: /* @__PURE__ */ a(y, { dataTestid: `${t}-tooltip`, children: e }) }) : p;
+  }
+);
+I.displayName = "OxAvatarSquare";
+export {
+  I as AvatarSquare
+};

package/dist/Display/Avatar/AvatarSquare/AvatarSquare.module.css.js

@@ -0,0 +1,20 @@
+const a = "_oxAvatarSquareImage_1il3w_2", r = "_oxAvatarSquareContent_1il3w_2", t = "_oxAvatarSquare_1il3w_2", e = "_oxAvatarSquareBullet_1il3w_2", o = "_oxAvatarSquareAction_1il3w_2", u = "_oxAvatarSquareLabel_1il3w_2", _ = {
+  oxAvatarSquareImage: a,
+  oxAvatarSquareContent: r,
+  oxAvatarSquare: t,
+  oxAvatarSquareBullet: e,
+  oxAvatarSquareAction: o,
+  oxAvatarSquareLabel: u,
+  "ox-avatar-square--brand": "_ox-avatar-square--brand_1il3w_2",
+  "ox-avatar-square--neutral": "_ox-avatar-square--neutral_1il3w_2",
+  "ox-avatar-square--disabled": "_ox-avatar-square--disabled_1il3w_2"
+};
+export {
+  _ as default,
+  t as oxAvatarSquare,
+  o as oxAvatarSquareAction,
+  e as oxAvatarSquareBullet,
+  r as oxAvatarSquareContent,
+  a as oxAvatarSquareImage,
+  u as oxAvatarSquareLabel
+};

package/dist/Display/Avatar/hooks/useAvatarBullet.js

@@ -0,0 +1,13 @@
+const l = {
+  xs: "8",
+  sm: "8",
+  md: "12",
+  lg: "16",
+  xl: "16"
+};
+function t(e) {
+  return { bulletSize: l[e] };
+}
+export {
+  t as useAvatarBullet
+};

package/dist/Display/Avatar/index.js

@@ -0,0 +1,65 @@
+import { cva as a } from "class-variance-authority";
+const e = a("", {
+  variants: {
+    /* Every radius below is the exact token the design asks for. The ladder
+    stops climbing at 48px: v3 holds 8px from there up, so the 80px avatar
+    has the same corner as the 48px one rather than a proportional one. */
+    size: {
+      xs: "ox-avatar-square--xs",
+      // 24px, radius 4
+      sm: "ox-avatar-square--sm",
+      // 32px, radius 6
+      md: "ox-avatar-square--md",
+      // 48px, radius 8
+      lg: "ox-avatar-square--lg",
+      // 64px, radius 8
+      xl: "ox-avatar-square--xl"
+      // 80px, radius 8
+    },
+    tone: {
+      brand: "ox-avatar-square--brand",
+      neutral: "ox-avatar-square--neutral"
+    },
+    disabled: {
+      true: "ox-avatar-square--disabled",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    tone: "brand",
+    disabled: !1
+  }
+}), d = a("", {
+  variants: {
+    size: {
+      xs: "ox-avatar-rounded--xs",
+      // 24px
+      sm: "ox-avatar-rounded--sm",
+      // 32px
+      md: "ox-avatar-rounded--md",
+      // 48px
+      lg: "ox-avatar-rounded--lg",
+      // 64px
+      xl: "ox-avatar-rounded--xl"
+      // 80px
+    },
+    tone: {
+      brand: "ox-avatar-rounded--brand",
+      neutral: "ox-avatar-rounded--neutral"
+    },
+    disabled: {
+      true: "ox-avatar-rounded--disabled",
+      false: ""
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    tone: "brand",
+    disabled: !1
+  }
+});
+export {
+  d as avatarRoundedVariants,
+  e as avatarSquareVariants
+};

package/dist/Display/AvatarDetails/AvatarDetails.js

@@ -0,0 +1,49 @@
+import { jsxs as r, jsx as i } from "react/jsx-runtime";
+import { forwardRef as p } from "react";
+import { cn as a } from "../../lib/utils.js";
+import e from "./AvatarDetails.module.css.js";
+import { AvatarSquare as x } from "../Avatar/AvatarSquare/AvatarSquare.js";
+const A = p(
+  ({
+    className: m,
+    avatar: s,
+    name: d,
+    subtitle: l,
+    disabled: c = !1,
+    dataTestid: o,
+    ...n
+  }, f) => {
+    const t = (s == null ? void 0 : s.size) ?? "md";
+    return /* @__PURE__ */ r(
+      "div",
+      {
+        ref: f,
+        className: a(e.oxAvatarDetails, m),
+        "data-slot": "avatar-details",
+        "data-size": t,
+        "data-testid": o,
+        ...n,
+        children: [
+          /* @__PURE__ */ i(
+            x,
+            {
+              dataTestid: `${o}-avatar`,
+              src: s == null ? void 0 : s.src,
+              size: t,
+              disabled: c,
+              children: s == null ? void 0 : s.initials
+            }
+          ),
+          /* @__PURE__ */ r("div", { className: e.oxAvatarDetailsInfo, children: [
+            /* @__PURE__ */ i("span", { className: e.oxAvatarDetailsName, children: d }),
+            l && /* @__PURE__ */ i("span", { className: e.oxAvatarDetailsSubtitle, children: l })
+          ] })
+        ]
+      }
+    );
+  }
+);
+A.displayName = "OxAvatarDetails";
+export {
+  A as AvatarDetails
+};

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

@@ -0,0 +1,13 @@
+const a = "_oxAvatarDetails_1pqua_2", t = "_oxAvatarDetailsInfo_1pqua_2", e = "_oxAvatarDetailsName_1pqua_2", o = "_oxAvatarDetailsSubtitle_1pqua_2", s = {
+  oxAvatarDetails: a,
+  oxAvatarDetailsInfo: t,
+  oxAvatarDetailsName: e,
+  oxAvatarDetailsSubtitle: o
+};
+export {
+  s as default,
+  a as oxAvatarDetails,
+  t as oxAvatarDetailsInfo,
+  e as oxAvatarDetailsName,
+  o as oxAvatarDetailsSubtitle
+};

package/dist/Display/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,101 @@
+import { jsx as t, jsxs as m } from "react/jsx-runtime";
+import * as d from "@radix-ui/react-tooltip";
+import { forwardRef as b, useMemo as f } from "react";
+import { cn as y } from "../../lib/utils.js";
+import o from "./AvatarGroup.module.css.js";
+import { AvatarRounded as g } from "../Avatar/AvatarRounded/AvatarRounded.js";
+import { TooltipContent as I } from "../../Feedback/Tooltip/TooltipContent.js";
+const N = 300, $ = b(
+  ({
+    className: v,
+    avatars: e,
+    max: c = 3,
+    total: p,
+    interactive: u = !0,
+    size: a = "xs",
+    onClick: s,
+    dataTestid: n,
+    ...x
+  }, G) => {
+    const i = f(() => e.slice(0, c), [e, c]), h = f(() => {
+      const r = p ?? e.length;
+      return Math.max(0, Math.trunc(r) - i.length) || 0;
+    }, [p, e.length, i.length]);
+    return /* @__PURE__ */ t(
+      "button",
+      {
+        ref: G,
+        type: "button",
+        "data-slot": "avatar-group",
+        "data-testid": n,
+        className: y(
+          o.oxAvatarGroup,
+          o[`oxAvatarGroup--${a}`],
+          u && o.oxAvatarGroupInteractive,
+          v
+        ),
+        onClick: (r) => {
+          u && (s == null || s(r));
+        },
+        ...x,
+        children: /* @__PURE__ */ t(d.Provider, { delayDuration: N, children: /* @__PURE__ */ m("div", { className: o.oxAvatarGroupStack, children: [
+          i.map((r, l) => {
+            const A = /* @__PURE__ */ t(
+              g,
+              {
+                role: r.name ? "img" : void 0,
+                "aria-label": r.name,
+                dataTestid: `${n}-avatar-${l}`,
+                src: r.src,
+                size: a,
+                disabled: r.disabled,
+                children: r.initials
+              }
+            );
+            return /* @__PURE__ */ t(
+              "div",
+              {
+                className: o.oxAvatarGroupItem,
+                style: { zIndex: l },
+                children: r.name ? /* @__PURE__ */ m(d.Root, { children: [
+                  /* @__PURE__ */ t(d.Trigger, { asChild: !0, children: A }),
+                  /* @__PURE__ */ t(
+                    I,
+                    {
+                      dataTestid: `${n}-tooltip-${l}`,
+                      children: r.name
+                    }
+                  )
+                ] }) : A
+              },
+              l
+            );
+          }),
+          h > 0 && /* @__PURE__ */ t(
+            "div",
+            {
+              className: o.oxAvatarGroupItem,
+              style: { zIndex: i.length },
+              children: /* @__PURE__ */ m(
+                g,
+                {
+                  dataTestid: `${n}-count`,
+                  size: a,
+                  tone: "neutral",
+                  children: [
+                    "+",
+                    h
+                  ]
+                }
+              )
+            }
+          )
+        ] }) })
+      }
+    );
+  }
+);
+$.displayName = "OxAvatarGroup";
+export {
+  $ as AvatarGroup
+};

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

@@ -0,0 +1,18 @@
+const a = "_oxAvatarGroup_11xgt_2", t = "_oxAvatarGroupInteractive_11xgt_2", o = "_oxAvatarGroupStack_11xgt_2", r = "_oxAvatarGroupItem_11xgt_2", x = {
+  oxAvatarGroup: a,
+  "oxAvatarGroup--xs": "_oxAvatarGroup--xs_11xgt_2",
+  "oxAvatarGroup--sm": "_oxAvatarGroup--sm_11xgt_2",
+  "oxAvatarGroup--md": "_oxAvatarGroup--md_11xgt_2",
+  "oxAvatarGroup--lg": "_oxAvatarGroup--lg_11xgt_2",
+  "oxAvatarGroup--xl": "_oxAvatarGroup--xl_11xgt_2",
+  oxAvatarGroupInteractive: t,
+  oxAvatarGroupStack: o,
+  oxAvatarGroupItem: r
+};
+export {
+  x as default,
+  a as oxAvatarGroup,
+  t as oxAvatarGroupInteractive,
+  r as oxAvatarGroupItem,
+  o as oxAvatarGroupStack
+};

package/dist/Display/Badge/Badge.js

@@ -0,0 +1,25 @@
+import { jsx as e } from "react/jsx-runtime";
+import { forwardRef as d } from "react";
+import { moduleClasses as i } from "../../lib/cssModules.js";
+import { cn as p } from "../../lib/utils.js";
+import f from "./Badge.module.css.js";
+import { badgeVariants as l } from "./index.js";
+const g = d(
+  ({ className: r, size: o = "md", color: a = "error", dataTestid: m, ...t }, s) => /* @__PURE__ */ e(
+    "span",
+    {
+      ref: s,
+      "data-slot": "badge",
+      "data-testid": m,
+      className: p(
+        i(f, l({ size: o, color: a })),
+        r
+      ),
+      ...t
+    }
+  )
+);
+g.displayName = "OxBadge";
+export {
+  g as Badge
+};

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

@@ -0,0 +1,12 @@
+const e = {
+  "ox-badge": "_ox-badge_186jw_2",
+  "ox-badge--sm": "_ox-badge--sm_186jw_2",
+  "ox-badge--md": "_ox-badge--md_186jw_2",
+  "ox-badge--lg": "_ox-badge--lg_186jw_2",
+  "ox-badge--error": "_ox-badge--error_186jw_2",
+  "ox-badge--brand": "_ox-badge--brand_186jw_2",
+  "ox-badge--neutral": "_ox-badge--neutral_186jw_2"
+};
+export {
+  e as default
+};

package/dist/Display/Badge/index.js

@@ -0,0 +1,22 @@
+import { cva as r } from "class-variance-authority";
+const o = r("ox-badge", {
+  variants: {
+    size: {
+      sm: "ox-badge--sm",
+      md: "ox-badge--md",
+      lg: "ox-badge--lg"
+    },
+    color: {
+      error: "ox-badge--error",
+      brand: "ox-badge--brand",
+      neutral: "ox-badge--neutral"
+    }
+  },
+  defaultVariants: {
+    size: "md",
+    color: "error"
+  }
+});
+export {
+  o as badgeVariants
+};

package/dist/Display/BrandLogo/BrandLogo.js

@@ -0,0 +1,45 @@
+import { jsxs as p, jsx as o } from "react/jsx-runtime";
+import { forwardRef as g } from "react";
+import { moduleClasses as w } from "../../lib/cssModules.js";
+import { cn as x } from "../../lib/utils.js";
+import L from "./BrandLogo.module.css.js";
+import { BRAND_LOGO_MARK as c, BRAND_LOGO_FULL as B } from "./brandLogoArt.js";
+import { brandLogoVariants as O } from "./index.js";
+const h = g(
+  ({
+    className: l,
+    type: t = "full",
+    color: n = "dark",
+    size: i = "md",
+    dataTestid: e,
+    children: a,
+    ...f
+  }, d) => {
+    const m = t === "mark" ? c : B;
+    return /* @__PURE__ */ p(
+      "svg",
+      {
+        ref: d,
+        className: x(
+          w(L, O({ type: t, color: n, size: i })),
+          l
+        ),
+        "data-slot": "brand-logo",
+        "data-testid": e,
+        viewBox: m.viewBox,
+        xmlns: "http://www.w3.org/2000/svg",
+        fill: "none",
+        role: "img",
+        ...f,
+        children: [
+          a ? /* @__PURE__ */ o("title", { children: a }) : null,
+          m.groups.map((r) => /* @__PURE__ */ o("g", { transform: r.transform, children: r.paths.map((s) => /* @__PURE__ */ o("path", { d: s, fill: "currentColor" }, s)) }, r.transform))
+        ]
+      }
+    );
+  }
+);
+h.displayName = "OxBrandLogo";
+export {
+  h as BrandLogo
+};

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

@@ -0,0 +1,10 @@
+const o = {
+  "ox-brand-logo": "_ox-brand-logo_51b7b_2",
+  "ox-brand-logo--md": "_ox-brand-logo--md_51b7b_2",
+  "ox-brand-logo--lg": "_ox-brand-logo--lg_51b7b_2",
+  "ox-brand-logo--dark": "_ox-brand-logo--dark_51b7b_2",
+  "ox-brand-logo--light": "_ox-brand-logo--light_51b7b_2"
+};
+export {
+  o as default
+};