@sesamehr/react-design-system 3.11.0 → 3.12.0

package/dist/Display/AvatarGroup/AvatarGroup.d.ts

@@ -34,8 +34,22 @@ export interface AvatarGroupProps extends Omit<React.ButtonHTMLAttributes<HTMLBu
     interactive?: boolean;
     /** The size every avatar in the stack is drawn at. */
     size?: AvatarSize;
-    /** Click handler (only fired when interactive) */
-    onClick?: React.MouseEventHandler<HTMLButtonElement>;
+    /**
+     * Click handler (only fired when interactive). `avatar` is the avatar the
+     * click landed on and `index` its index into `avatars`.
+     *
+     * Avatars only report themselves while the stack is **complete**. The
+     * moment there is an overflow counter the stack is one affordance for the
+     * whole group, so every click fires with no payload at all, a click straight
+     * on a face included: what is on show is a subset, and pointing at one cannot
+     * stand for a person. So an absent avatar means "the group", and a caller
+     * written before this ignores the arguments and is unaffected.
+     *
+     * The faces are still not individually focusable, since the stack is one
+     * `<button>`, so this is a pointer-grade affordance. A caller that needs
+     * per-person keyboard access has to paint the avatars itself.
+     */
+    onClick?: (event: React.MouseEvent<HTMLButtonElement>, avatar?: AvatarItem, index?: number) => void;
     dataTestid: string;
 }
 export declare const AvatarGroup: import('react').ForwardRefExoticComponent<AvatarGroupProps & import('react').RefAttributes<HTMLButtonElement>>;

package/dist/Display/AvatarGroup/AvatarGroup.js

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

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

@@ -1,18 +1,20 @@
-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
+const o = "_oxAvatarGroup_1tcwh_2", a = "_oxAvatarGroupInteractive_1tcwh_2", r = "_oxAvatarGroupOverflowing_1tcwh_2", t = "_oxAvatarGroupStack_1tcwh_2", v = "_oxAvatarGroupItem_1tcwh_2", x = {
+  oxAvatarGroup: o,
+  "oxAvatarGroup--xs": "_oxAvatarGroup--xs_1tcwh_2",
+  "oxAvatarGroup--sm": "_oxAvatarGroup--sm_1tcwh_2",
+  "oxAvatarGroup--md": "_oxAvatarGroup--md_1tcwh_2",
+  "oxAvatarGroup--lg": "_oxAvatarGroup--lg_1tcwh_2",
+  "oxAvatarGroup--xl": "_oxAvatarGroup--xl_1tcwh_2",
+  oxAvatarGroupInteractive: a,
+  oxAvatarGroupOverflowing: r,
+  oxAvatarGroupStack: t,
+  oxAvatarGroupItem: v
 };
 export {
   x as default,
-  a as oxAvatarGroup,
-  t as oxAvatarGroupInteractive,
-  r as oxAvatarGroupItem,
-  o as oxAvatarGroupStack
+  o as oxAvatarGroup,
+  a as oxAvatarGroupInteractive,
+  v as oxAvatarGroupItem,
+  r as oxAvatarGroupOverflowing,
+  t as oxAvatarGroupStack
 };

package/dist/Feedback/Alert/Alert.d.ts

@@ -4,6 +4,11 @@ export interface AlertProps extends Omit<React.HTMLAttributes<HTMLDivElement>, '
     dismissible?: boolean;
     collapsible?: boolean;
     isOpen?: boolean;
+    /**
+     * Drops the "Generated with AI" marker from an `ai` alert. Read on `ai` and
+     * ignored everywhere else.
+     */
+    hideAiTag?: boolean;
     /** Called once the alert has been dismissed. */
     onDismissed?: () => void;
     /** Called with the next open state — the controlled half of `isOpen`. */

package/dist/Feedback/Alert/Alert.js

@@ -1,60 +1,71 @@
-import { jsx as s } from "react/jsx-runtime";
-import { forwardRef as p, useState as I } from "react";
-import { TransitionFade as y } from "../../Transitions/TransitionFade/TransitionFade.js";
-import { cn as M } from "../../lib/utils.js";
-import o from "./Alert.module.css.js";
-import { AlertContext as N } from "./alert-context.js";
-const j = 200, w = p(
+import { jsx as i, jsxs as s } from "react/jsx-runtime";
+import { IconSesameIa as j } from "@sesame/orxata-icons/IconSesameIa";
+import { Icon as y } from "@sesame/orxata-icons/react";
+import { forwardRef as M, useState as N } from "react";
+import { AiTag as T } from "../../Display/AiTag/AiTag.js";
+import { TransitionFade as w } from "../../Transitions/TransitionFade/TransitionFade.js";
+import { cn as D } from "../../lib/utils.js";
+import m from "./Alert.module.css.js";
+import { AlertContext as F } from "./alert-context.js";
+import { useTranslate as P } from "../../Locale/useTranslate.js";
+const R = 200, _ = M(
   ({
-    className: m,
+    className: c,
     variant: r = "info",
     dismissible: f = !1,
-    collapsible: c = !1,
+    collapsible: x = !1,
     isOpen: t = !0,
-    onDismissed: e,
-    onOpenChange: l,
-    onToggled: i,
+    hideAiTag: d = !1,
+    onDismissed: a,
+    onOpenChange: e,
+    onToggled: o,
     children: u,
-    ...x
+    ...p
   }, A) => {
-    const [a, S] = I(!1), v = () => {
-      S(!0), e == null || e();
-    }, d = () => {
-      l == null || l(!t), i == null || i(!t);
+    const [l, I] = N(!1), S = P(), v = () => {
+      I(!0), a == null || a();
+    }, h = () => {
+      e == null || e(!t), o == null || o(!t);
     };
-    return /* @__PURE__ */ s(
-      N.Provider,
+    return /* @__PURE__ */ i(
+      F.Provider,
       {
         value: {
           variant: r,
-          isDismissed: a,
+          isDismissed: l,
           isOpen: t,
           dismissible: f,
-          collapsible: c,
+          collapsible: x,
           handleDismiss: v,
-          handleToggle: d
+          handleToggle: h
         },
-        children: /* @__PURE__ */ s(y, { in: !a, leaveDuration: j, children: /* @__PURE__ */ s(
+        children: /* @__PURE__ */ i(w, { in: !l, leaveDuration: R, children: /* @__PURE__ */ s(
           "div",
           {
             ref: A,
-            className: M(
-              o.oxAlert,
-              o[`oxAlert-${r}`],
-              m
+            className: D(
+              m.oxAlert,
+              m[`oxAlert-${r}`],
+              c
             ),
             role: "alert",
             "aria-live": r === "error" ? "assertive" : "polite",
             "aria-atomic": "true",
-            ...x,
-            children: u
+            ...p,
+            children: [
+              r === "ai" && !d && /* @__PURE__ */ s(T, { dataTestid: "ox-alert-ai-tag", children: [
+                /* @__PURE__ */ i(y, { icon: j, "data-slot": "icon" }),
+                S("orxata.alert.aiTag")
+              ] }),
+              u
+            ]
           }
         ) })
       }
     );
   }
 );
-w.displayName = "OxAlert";
+_.displayName = "OxAlert";
 export {
-  w as Alert
+  _ as Alert
 };

package/dist/Feedback/Alert/Alert.module.css.js

@@ -1,10 +1,11 @@
-const e = "_oxAlert_gm4hh_2", r = {
+const e = "_oxAlert_1nisp_2", r = {
   oxAlert: e,
-  "oxAlert-warning": "_oxAlert-warning_gm4hh_2",
-  "oxAlert-error": "_oxAlert-error_gm4hh_2",
-  "oxAlert-info": "_oxAlert-info_gm4hh_2",
-  "oxAlert-success": "_oxAlert-success_gm4hh_2",
-  "oxAlert-muted": "_oxAlert-muted_gm4hh_2"
+  "oxAlert-warning": "_oxAlert-warning_1nisp_2",
+  "oxAlert-error": "_oxAlert-error_1nisp_2",
+  "oxAlert-info": "_oxAlert-info_1nisp_2",
+  "oxAlert-success": "_oxAlert-success_1nisp_2",
+  "oxAlert-muted": "_oxAlert-muted_1nisp_2",
+  "oxAlert-ai": "_oxAlert-ai_1nisp_2"
 };
 export {
   r as default,

package/dist/Feedback/Alert/AlertDescription.module.css.js

@@ -1,4 +1,4 @@
-const t = "_oxAlertDescription_tbt8n_2", e = {
+const t = "_oxAlertDescription_1swes_2", e = {
   oxAlertDescription: t
 };
 export {

package/dist/Feedback/Alert/AlertIcon.js

@@ -1,37 +1,39 @@
 import { jsx as r } from "react/jsx-runtime";
-import { IconAlertCircle as f } from "@sesame/orxata-icons/IconAlertCircle";
-import { IconAlertTriangle as l } from "@sesame/orxata-icons/IconAlertTriangle";
-import { IconCircleCheck as a } from "@sesame/orxata-icons/IconCircleCheck";
+import { IconAlertCircle as a } from "@sesame/orxata-icons/IconAlertCircle";
+import { IconAlertTriangle as f } from "@sesame/orxata-icons/IconAlertTriangle";
+import { IconCircleCheck as l } from "@sesame/orxata-icons/IconCircleCheck";
 import { IconInfoCircle as s } from "@sesame/orxata-icons/IconInfoCircle";
-import { IconStar as p } from "@sesame/orxata-icons/IconStar";
-import { Icon as I } from "@sesame/orxata-icons/react";
-import { forwardRef as d } from "react";
-import { cn as u } from "../../lib/utils.js";
-import A from "./AlertIcon.module.css.js";
-import { useAlertContext as x } from "./alert-context.js";
-const C = {
+import { IconSesameIa as p } from "@sesame/orxata-icons/IconSesameIa";
+import { IconStar as I } from "@sesame/orxata-icons/IconStar";
+import { Icon as d } from "@sesame/orxata-icons/react";
+import { forwardRef as u } from "react";
+import { cn as A } from "../../lib/utils.js";
+import x from "./AlertIcon.module.css.js";
+import { useAlertContext as C } from "./alert-context.js";
+const g = {
   info: s,
-  warning: l,
-  error: f,
-  success: a,
-  muted: p
-}, g = d(
-  ({ className: t, children: e, dataTestid: o, ...n }, c) => {
-    const { variant: m } = x(), i = C[m];
+  warning: f,
+  error: a,
+  success: l,
+  muted: I,
+  ai: p
+}, h = u(
+  ({ className: t, children: e, dataTestid: o, ...m }, n) => {
+    const { variant: c } = C(), i = g[c];
     return /* @__PURE__ */ r(
       "div",
       {
-        ref: c,
-        className: u(A.oxAlertIcon, t),
+        ref: n,
+        className: A(x.oxAlertIcon, t),
         "data-slot": "icon",
         "data-testid": o,
-        ...n,
-        children: e ?? /* @__PURE__ */ r(I, { icon: i, "data-testid": `${o}-default` })
+        ...m,
+        children: e ?? /* @__PURE__ */ r(d, { icon: i, "data-testid": `${o}-default` })
       }
     );
   }
 );
-g.displayName = "OxAlertIcon";
+h.displayName = "OxAlertIcon";
 export {
-  g as AlertIcon
+  h as AlertIcon
 };

package/dist/Feedback/Alert/AlertLink.d.ts

@@ -1,7 +1,8 @@
 export type AlertLinkProps = React.AnchorHTMLAttributes<HTMLAnchorElement>;
 /**
- * AlertLink — the action link the board sits to the right of the text, before
- * the close. A `link` prop on `Alert` would carry the text and the destination
- * as configuration; `href` and the rest arrive here as native attributes.
+ * AlertLink — the action link, which the board puts in a row of its own under
+ * the description rather than beside it. A `link` prop on `Alert` would carry
+ * the text and the destination as configuration; `href` and the rest arrive
+ * here as native attributes.
  */
 export declare const AlertLink: import('react').ForwardRefExoticComponent<AlertLinkProps & import('react').RefAttributes<HTMLAnchorElement>>;

package/dist/Feedback/Alert/AlertLink.module.css.js

@@ -1,4 +1,4 @@
-const t = "_oxAlertLink_1kej5_2", e = {
+const t = "_oxAlertLink_manc3_2", e = {
   oxAlertLink: t
 };
 export {

package/dist/Feedback/Alert/alert-context.d.ts

@@ -1,4 +1,4 @@
-export type AlertVariant = 'warning' | 'error' | 'info' | 'success' | 'muted';
+export type AlertVariant = 'warning' | 'error' | 'info' | 'success' | 'muted' | 'ai';
 export interface AlertContextValue {
     variant: AlertVariant;
     isDismissed: boolean;