@uisatin/ui 0.1.1 → 0.3.0

package/chunk-7Q76HLRQ.js

@@ -0,0 +1,128 @@
+import { Progress } from './chunk-M2HEVFQ3.js';
+import { Badge } from './chunk-XUOSJMEJ.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
+import * as React from 'react';
+import { ArrowRight } from 'iconoir-react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
+
+function AgentSuggestion({
+  kind,
+  icon,
+  meta,
+  title,
+  description,
+  actions,
+  children,
+  className,
+  ...props
+}) {
+  const titleId = React.useId();
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "data-slot": "agent-suggestion",
+      "aria-labelledby": title ? titleId : void 0,
+      className: cn(
+        "sa:flex sa:w-full sa:max-w-[400px] sa:flex-col sa:gap-3 sa:rounded-xl sa:border sa:border-border-subtle sa:bg-bg-card sa:p-3 sa:text-text-default sa:[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]",
+        className
+      ),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-h-6 sa:items-center sa:gap-1.5", children: [
+          /* @__PURE__ */ jsx("div", { className: "sa:flex sa:min-w-0 sa:flex-1", children: /* @__PURE__ */ jsxs(
+            Badge,
+            {
+              size: "lg",
+              tone: "neutral",
+              variant: "outline",
+              className: "sa:max-w-full sa:[&_img]:size-3.5 sa:[&_img]:shrink-0",
+              children: [
+                icon,
+                /* @__PURE__ */ jsx("span", { className: "sa:truncate", children: kind })
+              ]
+            }
+          ) }),
+          meta && /* @__PURE__ */ jsx("div", { className: "sa:flex sa:shrink-0 sa:items-center", children: meta })
+        ] }),
+        (title || description) && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:flex-col sa:gap-2", children: [
+          title && /* @__PURE__ */ jsx("div", { id: titleId, className: "sa:text-base sa:leading-[14px] sa:font-medium sa:tracking-normal sa:text-text-default", children: title }),
+          description && /* @__PURE__ */ jsx("div", { className: "sa:text-base sa:text-text-muted", children: description })
+        ] }),
+        children,
+        actions && /* @__PURE__ */ jsx("div", { className: "sa:flex sa:flex-wrap sa:items-center sa:justify-end sa:gap-2 sa:pt-1", children: actions })
+      ]
+    }
+  );
+}
+function AgentSuggestionQuote({
+  from,
+  avatar,
+  children,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("blockquote", { "data-slot": "agent-suggestion-quote", className: cn("sa:m-0 sa:flex sa:flex-col sa:gap-1 sa:rounded-lg sa:bg-bg-muted sa:px-3 sa:py-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-center sa:gap-1.5", children: [
+      avatar,
+      /* @__PURE__ */ jsx("span", { className: "sa:text-xs sa:leading-3 sa:font-medium sa:tracking-normal sa:text-text-default", children: from })
+    ] }),
+    /* @__PURE__ */ jsx("p", { className: "sa:m-0 sa:text-base sa:text-text-muted", children })
+  ] });
+}
+function AgentSuggestionMetric({
+  value,
+  unit,
+  used,
+  max,
+  className
+}) {
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "agent-suggestion-metric", className: cn("sa:flex sa:flex-col sa:gap-2", className), children: [
+    /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:items-baseline sa:gap-2", children: [
+      /* @__PURE__ */ jsx("span", { className: "sa:text-2xl sa:leading-[1.5] sa:font-medium sa:tabular-nums", children: value }),
+      unit && /* @__PURE__ */ jsx("span", { className: "sa:text-base sa:text-text-muted", children: unit })
+    ] }),
+    used != null && max != null && /* @__PURE__ */ jsx(
+      Progress,
+      {
+        value: used,
+        max,
+        showValue: false,
+        "aria-label": typeof unit === "string" ? unit : void 0,
+        className: "sa:[&_[role=progressbar]]:h-1.5"
+      }
+    )
+  ] });
+}
+function AgentSuggestionDiff({ before, after, className }) {
+  const labels = useSatinLabels();
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "agent-suggestion-diff", className: cn("sa:flex sa:flex-col sa:gap-1 sa:text-base", className), children: [
+    /* @__PURE__ */ jsxs("del", { className: "sa:rounded-lg sa:bg-bg-muted sa:px-2 sa:py-1.5 sa:text-text-muted", children: [
+      /* @__PURE__ */ jsxs("span", { className: "sa:sr-only", children: [
+        labels.remove,
+        ": "
+      ] }),
+      before
+    ] }),
+    /* @__PURE__ */ jsxs("ins", { className: "sa:rounded-lg sa:bg-status-green-bg sa:px-2 sa:py-1.5 sa:text-status-green-fg sa:no-underline", children: [
+      /* @__PURE__ */ jsxs("span", { className: "sa:sr-only", children: [
+        labels.add,
+        ": "
+      ] }),
+      after
+    ] })
+  ] });
+}
+function AgentSuggestionChanges({ changes, className }) {
+  return /* @__PURE__ */ jsx("dl", { "data-slot": "agent-suggestion-changes", className: cn("sa:m-0 sa:flex sa:flex-col sa:gap-2 sa:text-base", className), children: changes.map((c, i) => /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-h-[21px] sa:items-center sa:gap-2", children: [
+    /* @__PURE__ */ jsx("dt", { className: "sa:w-[88px] sa:shrink-0 sa:text-text-muted", children: c.field }),
+    /* @__PURE__ */ jsxs("dd", { className: "sa:m-0 sa:flex sa:min-w-0 sa:items-center sa:gap-2", children: [
+      c.from != null && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx("del", { className: "sa:text-text-subtle", children: c.from }),
+        /* @__PURE__ */ jsx(ArrowRight, { "aria-hidden": true, className: "sa:size-4 sa:shrink-0 sa:text-text-subtle sa:[stroke-width:1.875]" })
+      ] }),
+      typeof c.to === "string" ? /* @__PURE__ */ jsx("span", { className: "sa:font-medium sa:text-text-default", children: c.to }) : c.to
+    ] })
+  ] }, i)) });
+}
+
+export { AgentSuggestion, AgentSuggestionChanges, AgentSuggestionDiff, AgentSuggestionMetric, AgentSuggestionQuote };

package/{chunk-JPNWHWAQ.js → chunk-AIMQNLPY.js}

@@ -1,5 +1,6 @@
-import { Button } from './chunk-HNQUX43Z.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { Button } from './chunk-T6L32XXH.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import 'react';
 import { Dialog as Dialog$1 } from 'radix-ui';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
@@ -32,8 +33,10 @@ function Dialog({
   modal = true,
   container,
   onOpenAutoFocus,
-  className
+  className,
+  ...props
 }) {
+  const labels = useSatinLabels();
   const position = container ? "absolute" : "fixed";
   const hasBody = children != null || alert != null;
   return /* @__PURE__ */ jsxs(Dialog$1.Root, { open, defaultOpen, onOpenChange, modal, children: [
@@ -44,40 +47,41 @@ function Dialog({
         {
           className: cn(
             position,
-            "inset-0 z-50 bg-black-a40"
+            "sa:inset-0 sa:z-50 sa:bg-black-a40"
           )
         }
       ),
-      /* @__PURE__ */ jsx("div", { className: cn(position, "pointer-events-none inset-0 z-50 grid grid-cols-[minmax(0,1fr)] grid-rows-[minmax(0,1fr)] place-items-center p-4"), children: /* @__PURE__ */ jsxs(
+      /* @__PURE__ */ jsx("div", { className: cn(position, "sa:pointer-events-none sa:inset-0 sa:z-50 sa:grid sa:grid-cols-[minmax(0,1fr)] sa:grid-rows-[minmax(0,1fr)] sa:place-items-center sa:p-4"), children: /* @__PURE__ */ jsxs(
         Dialog$1.Content,
         {
+          ...description ? {} : { "aria-describedby": void 0 },
+          ...props,
           role: variant === "destructive" ? "alertdialog" : "dialog",
           "data-slot": "dialog",
           "data-variant": variant,
           onOpenAutoFocus,
-          ...description ? {} : { "aria-describedby": void 0 },
           className: cn(
-            "pointer-events-auto relative flex max-h-full w-[425px] max-w-[min(560px,100%)] min-w-[min(360px,100%)] flex-col overflow-clip",
-            "rounded-2xl border border-border-default bg-bg-popover",
-            "[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]",
-            "focus-visible:outline-none",
-            "data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]",
+            "sa:pointer-events-auto sa:relative sa:flex sa:max-h-full sa:w-[425px] sa:max-w-[min(560px,100%)] sa:min-w-[min(360px,100%)] sa:flex-col sa:overflow-clip",
+            "sa:rounded-2xl sa:border sa:border-border-default sa:bg-bg-popover",
+            "sa:[box-shadow:0_4px_6px_-4px_var(--effect-shadow-sm),0_10px_15px_-3px_var(--effect-shadow-sm)]",
+            "sa:focus-visible:outline-none",
+            "sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]",
             className
           ),
           children: [
-            /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col gap-3", children: [
-              /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-col gap-0.5 px-4 pt-4 pb-2", children: [
-                /* @__PURE__ */ jsx(Dialog$1.Title, { className: "pr-8 text-base leading-[14px] font-medium tracking-normal text-text-default", children: title }),
-                description ? /* @__PURE__ */ jsx(Dialog$1.Description, { className: "text-body text-text-muted", children: description }) : null
+            /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-h-0 sa:flex-col sa:gap-3", children: [
+              /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:shrink-0 sa:flex-col sa:gap-0.5 sa:px-4 sa:pt-4 sa:pb-2", children: [
+                /* @__PURE__ */ jsx(Dialog$1.Title, { className: "sa:pr-8 sa:text-base sa:leading-[14px] sa:font-medium sa:tracking-normal sa:text-text-default", children: title }),
+                description ? /* @__PURE__ */ jsx(Dialog$1.Description, { className: "sa:text-body sa:text-text-muted", children: description }) : null
               ] }),
-              hasBody && /* @__PURE__ */ jsxs("div", { className: "flex min-h-0 flex-col gap-3 overflow-y-auto px-4 pb-3", children: [
-                typeof children === "string" ? /* @__PURE__ */ jsx("p", { className: "text-body text-text-default", children }) : children,
+              hasBody && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-h-0 sa:flex-col sa:gap-3 sa:overflow-y-auto sa:px-4 sa:pb-3", children: [
+                typeof children === "string" ? /* @__PURE__ */ jsx("p", { className: "sa:text-body sa:text-text-default", children }) : children,
                 alert
               ] })
             ] }),
-            (footer || footerStart) && /* @__PURE__ */ jsxs("div", { className: "flex shrink-0 flex-wrap items-center justify-end gap-3 p-4", children: [
-              footerStart && /* @__PURE__ */ jsx("div", { className: "flex min-w-0 flex-1 items-center", children: footerStart }),
-              /* @__PURE__ */ jsx("div", { className: "flex shrink-0 items-center gap-2", children: footer })
+            (footer || footerStart) && /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:shrink-0 sa:flex-wrap sa:items-center sa:justify-end sa:gap-3 sa:p-4", children: [
+              footerStart && /* @__PURE__ */ jsx("div", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:items-center", children: footerStart }),
+              /* @__PURE__ */ jsx("div", { className: "sa:flex sa:shrink-0 sa:items-center sa:gap-2", children: footer })
             ] }),
             closeButton && /* @__PURE__ */ jsx(Dialog$1.Close, { asChild: true, children: /* @__PURE__ */ jsx(
               Button,
@@ -85,8 +89,8 @@ function Dialog({
                 variant: "tertiary",
                 size: "xl",
                 iconOnly: true,
-                "aria-label": "Close",
-                className: "absolute top-[7px] right-[7px] rounded-lg",
+                "aria-label": labels.close,
+                className: "sa:absolute sa:top-[7px] sa:right-[7px] sa:rounded-lg",
                 children: /* @__PURE__ */ jsx(CloseIcon, {})
               }
             ) })
@@ -98,13 +102,13 @@ function Dialog({
 }
 var DialogClose = Dialog$1.Close;
 var alertTint = {
-  info: "bg-status-sky-bg text-status-sky-fg",
-  success: "bg-status-green-bg text-status-green-fg",
-  warning: "bg-status-amber-bg text-status-amber-fg",
-  error: "bg-status-red-bg text-status-red-fg"
+  info: "sa:bg-status-sky-bg sa:text-status-sky-fg",
+  success: "sa:bg-status-green-bg sa:text-status-green-fg",
+  warning: "sa:bg-status-amber-bg sa:text-status-amber-fg",
+  error: "sa:bg-status-red-bg sa:text-status-red-fg"
 };
 function StatusIcon({ intent }) {
-  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "shrink-0", children: /* @__PURE__ */ jsx("g", { stroke: "currentColor", style: { strokeWidth: 1.25 }, strokeLinecap: "round", strokeLinejoin: "round", children: intent === "success" ? /* @__PURE__ */ jsx("path", { d: "M3.33333 8.66667L6 11.3333L12.6667 4.66667" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "sa:shrink-0", children: /* @__PURE__ */ jsx("g", { stroke: "currentColor", style: { strokeWidth: 1.25 }, strokeLinecap: "round", strokeLinejoin: "round", children: intent === "success" ? /* @__PURE__ */ jsx("path", { d: "M3.33333 8.66667L6 11.3333L12.6667 4.66667" }) : /* @__PURE__ */ jsxs(Fragment, { children: [
     intent === "info" ? /* @__PURE__ */ jsxs(Fragment, { children: [
       /* @__PURE__ */ jsx("path", { d: "M8 7.70494V10.6557" }),
       /* @__PURE__ */ jsx("path", { d: "M8 5.35022L8.0059 5.34366" })
@@ -124,28 +128,27 @@ function DialogAlert({
   className,
   ...props
 }) {
+  const labels = useSatinLabels();
   return /* @__PURE__ */ jsxs(
     "div",
     {
       role: intent === "error" || intent === "warning" ? "alert" : "status",
       "data-slot": "dialog-alert",
       "data-intent": intent,
-      className: cn("flex w-full items-center gap-3 rounded-xl px-4 py-3", alertTint[intent], className),
+      className: cn("sa:flex sa:w-full sa:items-center sa:gap-3 sa:rounded-xl sa:px-4 sa:py-3", alertTint[intent], className),
       ...props,
       children: [
-        /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-2.5", children: [
+        /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:items-center sa:gap-2.5", children: [
           icon && /* @__PURE__ */ jsx(StatusIcon, { intent }),
-          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-            /* @__PURE__ */ jsx("p", { className: "text-base font-medium text-text-default", children: title }),
-            description ? /* @__PURE__ */ jsx("p", { className: "text-body text-text-muted", children: description }) : null
+          /* @__PURE__ */ jsxs("div", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:flex-col", children: [
+            /* @__PURE__ */ jsx("p", { className: "sa:text-base sa:font-medium sa:text-text-default", children: title }),
+            description ? /* @__PURE__ */ jsx("p", { className: "sa:text-body sa:text-text-muted", children: description }) : null
           ] })
         ] }),
-        onDismiss && /* @__PURE__ */ jsx(Button, { variant: "tertiary", iconOnly: true, "aria-label": "Dismiss", onClick: onDismiss, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
+        onDismiss && /* @__PURE__ */ jsx(Button, { variant: "tertiary", iconOnly: true, "aria-label": labels.dismiss, onClick: onDismiss, children: /* @__PURE__ */ jsx(CloseIcon, {}) })
       ]
     }
   );
 }
 
 export { CloseIcon, Dialog, DialogAlert, DialogClose, StatusIcon };
-//# sourceMappingURL=chunk-JPNWHWAQ.js.map
-//# sourceMappingURL=chunk-JPNWHWAQ.js.map

package/chunk-BN7FDKCJ.js

@@ -0,0 +1,164 @@
+import { Tooltip, TooltipBubble } from './chunk-GMETYACH.js';
+import { cn } from './chunk-O46O6LFQ.js';
+import * as React from 'react';
+import { createPortal } from 'react-dom';
+import { cva } from 'class-variance-authority';
+import { jsx, jsxs } from 'react/jsx-runtime';
+
+var avatarVariants = cva(
+  "sa:inline-flex sa:shrink-0 sa:items-center sa:justify-center sa:overflow-clip sa:bg-tone-bg sa:text-center sa:whitespace-nowrap sa:text-tone-fg sa:select-none",
+  {
+    variants: {
+      size: {
+        16: "sa:size-4 sa:text-[7px] sa:leading-[8px] sa:font-semibold sa:tracking-normal",
+        20: "sa:size-5 sa:text-[9px] sa:leading-[10px] sa:font-semibold sa:tracking-normal",
+        24: "sa:size-6 sa:text-2xs sa:font-semibold",
+        32: "sa:size-8 sa:text-sm sa:leading-4 sa:font-medium sa:tracking-normal",
+        40: "sa:size-10 sa:text-base sa:leading-[14px] sa:font-medium sa:tracking-normal",
+        48: "sa:size-12 sa:text-lg sa:font-medium"
+      },
+      shape: {
+        circle: "sa:rounded-full",
+        rounded: ""
+      }
+    },
+    compoundVariants: [
+      { shape: "sa:rounded", size: 16, className: "sa:rounded-xs" },
+      { shape: "sa:rounded", size: 20, className: "sa:rounded-xs" },
+      { shape: "sa:rounded", size: 24, className: "sa:rounded-sm" },
+      { shape: "sa:rounded", size: 32, className: "sa:rounded-md" },
+      { shape: "sa:rounded", size: 40, className: "sa:rounded-lg" },
+      { shape: "sa:rounded", size: 48, className: "sa:rounded-xl" }
+    ],
+    defaultVariants: { size: 32, shape: "circle" }
+  }
+);
+var AVATAR_TOOLTIP_DELAY = 400;
+var AVATAR_TOOLTIP_CLOSE = 150;
+var AvatarGroupContext = React.createContext(null);
+function Avatar({ className, initials, tone = "neutral", size = 32, shape, name, ...props }) {
+  const group = React.useContext(AvatarGroupContext);
+  const grouped = group && name ? group : null;
+  const avatar = /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-slot": "avatar",
+      "data-tone": tone,
+      ...name ? { role: "img", "aria-label": name, tabIndex: 0 } : {},
+      className: cn(
+        avatarVariants({ size, shape }),
+        name && "sa:outline-none sa:focus-visible:[box-shadow:0_0_0_2px_var(--action-focus-ring)]",
+        className
+      ),
+      ...props,
+      ...grouped && {
+        onPointerEnter: (e) => (props.onPointerEnter?.(e), grouped.show(e.currentTarget, name)),
+        onPointerLeave: (e) => (props.onPointerLeave?.(e), grouped.hide()),
+        onFocus: (e) => (props.onFocus?.(e), grouped.show(e.currentTarget, name, true)),
+        onBlur: (e) => (props.onBlur?.(e), grouped.hide(true)),
+        onKeyDown: (e) => (props.onKeyDown?.(e), e.key === "Escape" && grouped.hide(true))
+      },
+      children: /* @__PURE__ */ jsx("span", { "aria-hidden": name ? true : void 0, children: initials })
+    }
+  );
+  if (!name || grouped) return avatar;
+  return /* @__PURE__ */ jsx(Tooltip, { label: name, delay: AVATAR_TOOLTIP_DELAY, closeDelay: AVATAR_TOOLTIP_CLOSE, children: avatar });
+}
+var GAP = 8;
+var BUBBLE_PADDING = 20;
+function AvatarGroup({ className, side = "top", children, ...props }) {
+  const [target, setTarget] = React.useState(null);
+  const [open, setOpen] = React.useState(false);
+  const shown = React.useRef(false);
+  const openTimer = React.useRef(void 0);
+  const closeTimer = React.useRef(void 0);
+  const api = React.useMemo(() => {
+    const set = (next) => {
+      shown.current = next;
+      setOpen(next);
+    };
+    return {
+      show(el, name, now) {
+        clearTimeout(closeTimer.current);
+        clearTimeout(openTimer.current);
+        setTarget({ el, name });
+        if (shown.current || now) set(true);
+        else openTimer.current = setTimeout(() => set(true), AVATAR_TOOLTIP_DELAY);
+      },
+      hide(now) {
+        clearTimeout(openTimer.current);
+        clearTimeout(closeTimer.current);
+        if (now) set(false);
+        else closeTimer.current = setTimeout(() => set(false), AVATAR_TOOLTIP_CLOSE);
+      }
+    };
+  }, []);
+  React.useEffect(
+    () => () => {
+      clearTimeout(openTimer.current);
+      clearTimeout(closeTimer.current);
+    },
+    []
+  );
+  return /* @__PURE__ */ jsxs(AvatarGroupContext.Provider, { value: api, children: [
+    /* @__PURE__ */ jsx("div", { "data-slot": "avatar-group", role: "group", className: cn("sa:flex sa:items-center sa:gap-2", className), ...props, children }),
+    open && target && /* @__PURE__ */ jsx(GroupTooltip, { anchor: target.el, name: target.name, side })
+  ] });
+}
+function GroupTooltip({ anchor, name, side }) {
+  const label = React.useRef(null);
+  const [width, setWidth] = React.useState();
+  const [point, setPoint] = React.useState();
+  React.useLayoutEffect(() => {
+    if (label.current) setWidth(label.current.offsetWidth + BUBBLE_PADDING);
+  }, [name]);
+  React.useLayoutEffect(() => {
+    const place = () => {
+      const r = anchor.getBoundingClientRect();
+      const half = (width ?? 0) / 2;
+      const x = Math.min(Math.max(r.left + r.width / 2, half + GAP), window.innerWidth - half - GAP);
+      setPoint({ x, y: side === "top" ? r.top - GAP : r.bottom + GAP });
+    };
+    place();
+    addEventListener("scroll", place, true);
+    addEventListener("resize", place);
+    return () => {
+      removeEventListener("scroll", place, true);
+      removeEventListener("resize", place);
+    };
+  }, [anchor, side, width]);
+  if (!point) return null;
+  return createPortal(
+    // A point at the avatar's edge, moved with transform so a change of person slides; the
+    // bubble hangs off it, centred, so a width change grows evenly on both sides.
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        "aria-hidden": true,
+        "data-side": side,
+        className: "sa:pointer-events-none sa:fixed sa:top-0 sa:left-0 sa:z-50 sa:transition-transform sa:duration-(--sa-duration-base) sa:ease-(--sa-ease-out) sa:motion-reduce:transition-none",
+        style: { transform: `translate(${point.x}px, ${point.y}px)` },
+        children: /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: cn(
+              "sa:-translate-x-1/2 sa:transition-[opacity,translate] sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:starting:opacity-0",
+              side === "top" ? "sa:-translate-y-full sa:starting:-translate-y-[calc(100%-4px)]" : "sa:starting:translate-y-[-4px]"
+            ),
+            children: /* @__PURE__ */ jsx(
+              TooltipBubble,
+              {
+                className: "sa:overflow-hidden sa:transition-[width] sa:duration-(--sa-duration-base) sa:ease-(--sa-ease-out) sa:motion-reduce:transition-none",
+                style: { width },
+                label: /* @__PURE__ */ jsx("span", { ref: label, className: "sa:inline-block sa:shrink-0 sa:transition-opacity sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out) sa:starting:opacity-0", children: name }, name)
+              }
+            )
+          }
+        )
+      }
+    ),
+    document.body
+  );
+}
+
+export { AVATAR_TOOLTIP_DELAY, Avatar, AvatarGroup, avatarVariants };

package/{chunk-3DINAQLL.js → chunk-BR2B4OIT.js}

@@ -1,15 +1,16 @@
-import { KbdGroup } from './chunk-BKZBWPUH.js';
-import { cn } from './chunk-H63FYCMY.js';
+import { KbdGroup } from './chunk-57QEOCDZ.js';
+import { useSatinLabels } from './chunk-SSOFFQ5T.js';
+import { cn } from './chunk-O46O6LFQ.js';
 import 'react';
 import { DropdownMenu as DropdownMenu$1 } from 'radix-ui';
 import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 
 var menuSurfaceClass = cn(
-  "rounded-xl border border-border-subtle bg-bg-popover",
-  "[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]"
+  "sa:rounded-xl sa:border sa:border-border-subtle sa:bg-bg-popover",
+  "sa:[box-shadow:0_1px_3px_0_var(--effect-shadow-sm),0_1px_2px_-1px_var(--effect-shadow-sm)]"
 );
-var menuGroupClass = "flex flex-col gap-1 not-last:after:block not-last:after:h-px not-last:after:bg-bg-muted";
-var menuGroupLabelClass = "flex h-6 items-center px-3 text-xs leading-3 tracking-normal text-text-subtle";
+var menuGroupClass = "sa:flex sa:flex-col sa:gap-1 sa:not-last:after:block sa:not-last:after:h-px sa:not-last:after:bg-bg-muted";
+var menuGroupLabelClass = "sa:flex sa:h-6 sa:items-center sa:px-3 sa:text-xs sa:leading-3 sa:tracking-normal sa:text-text-subtle";
 function DropdownMenu({
   trigger,
   children,
@@ -30,19 +31,19 @@ function DropdownMenu({
     /* @__PURE__ */ jsx(DropdownMenu$1.Portal, { container, children: /* @__PURE__ */ jsx(
       DropdownMenu$1.Content,
       {
+        collisionPadding: 8,
+        ...props,
         "data-slot": "dropdown-menu",
-        "aria-label": props["aria-label"],
         side,
         align,
         sideOffset,
-        collisionPadding: 8,
         onFocusOutside,
         className: cn(
-          "pointer-events-auto z-50 flex w-[255px] max-w-[520px] flex-col gap-1 overflow-x-clip overflow-y-auto p-1",
-          "max-h-(--radix-dropdown-menu-content-available-height)",
+          "sa:pointer-events-auto sa:z-50 sa:flex sa:w-[255px] sa:max-w-[520px] sa:flex-col sa:gap-1 sa:overflow-x-clip sa:overflow-y-auto sa:p-1",
+          "sa:max-h-(--radix-dropdown-menu-content-available-height)",
           menuSurfaceClass,
-          "origin-(--radix-dropdown-menu-content-transform-origin) outline-none",
-          "data-[state=open]:animate-[satin-enter_var(--duration-base)_var(--ease-out)]",
+          "sa:origin-(--radix-dropdown-menu-content-transform-origin) sa:outline-none",
+          "sa:data-[state=open]:animate-[satin-enter_var(--sa-duration-base)_var(--sa-ease-out)]",
           className
         ),
         children
@@ -65,11 +66,11 @@ function DropdownMenuGroup({ label, children, className, ...props }) {
   );
 }
 var menuItemClass = cn(
-  "flex min-h-menu-row w-full cursor-pointer items-center gap-2 rounded-lg px-3 py-1.5 text-left outline-none select-none focus-visible:ring-0",
-  "transition-colors duration-(--duration-fast) ease-(--ease-out)",
-  "data-[highlighted]:bg-bg-selected data-[force=hover]:bg-bg-selected data-[selected]:bg-bg-selected",
-  "data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-  "[&_svg]:pointer-events-none [&_svg]:shrink-0"
+  "sa:flex sa:min-h-menu-row sa:w-full sa:cursor-pointer sa:items-center sa:gap-2 sa:rounded-lg sa:px-3 sa:py-1.5 sa:text-left sa:outline-none sa:select-none sa:focus-visible:ring-0",
+  "sa:transition-colors sa:duration-(--sa-duration-fast) sa:ease-(--sa-ease-out)",
+  "sa:data-[highlighted]:bg-bg-selected sa:data-[force=hover]:bg-bg-selected sa:data-[selected]:bg-bg-selected",
+  "sa:data-[disabled]:pointer-events-none sa:data-[disabled]:opacity-50",
+  "sa:[&_svg]:pointer-events-none sa:[&_svg]:shrink-0"
 );
 function MenuItemContent({
   label,
@@ -81,27 +82,32 @@ function MenuItemContent({
   shortcut,
   renderLabel = (l) => l
 }) {
+  const labels = useSatinLabels();
   return /* @__PURE__ */ jsxs(Fragment, { children: [
     icon ? /* @__PURE__ */ jsx(
       "span",
       {
         className: cn(
-          "grid shrink-0 place-items-center text-text-muted",
-          iconSize === 20 ? "size-5 [&_svg]:size-5 [&_svg]:[stroke-width:1.5]" : "size-4 [&_svg]:size-4 [&_svg]:[stroke-width:1.875]"
+          "sa:grid sa:shrink-0 sa:place-items-center sa:text-text-muted",
+          iconSize === 20 ? "sa:size-5 sa:[&_svg]:size-5 sa:[&_svg]:[stroke-width:1.5]" : "sa:size-4 sa:[&_svg]:size-4 sa:[&_svg]:[stroke-width:1.875]"
         ),
         children: icon
       }
     ) : null,
-    layout === "stacked" ? /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 flex-col justify-center gap-0.5", children: [
-      /* @__PURE__ */ jsx("span", { className: "text-base leading-5 font-medium text-text-default", children: renderLabel(label) }),
-      description ? /* @__PURE__ */ jsx("span", { className: "text-sm leading-[18px] text-text-muted", children: description }) : null
-    ] }) : /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-1 items-baseline gap-3", children: [
-      /* @__PURE__ */ jsx("span", { className: "shrink-0 text-base leading-5 font-medium whitespace-nowrap text-text-default", children: renderLabel(label) }),
-      description ? /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate text-sm text-text-muted", children: description }) : null
+    layout === "stacked" ? /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:flex-col sa:justify-center sa:gap-0.5", children: [
+      /* @__PURE__ */ jsx("span", { className: "sa:text-base sa:leading-5 sa:font-medium sa:text-text-default", children: renderLabel(label) }),
+      description ? /* @__PURE__ */ jsx("span", { className: "sa:text-sm sa:leading-[18px] sa:text-text-muted", children: description }) : null
+    ] }) : /* @__PURE__ */ jsxs("span", { className: "sa:flex sa:min-w-0 sa:flex-1 sa:items-baseline sa:gap-3", children: [
+      /* @__PURE__ */ jsx("span", { className: "sa:shrink-0 sa:text-base sa:leading-5 sa:font-medium sa:whitespace-nowrap sa:text-text-default", children: renderLabel(label) }),
+      description ? /* @__PURE__ */ jsx("span", { className: "sa:min-w-0 sa:flex-1 sa:truncate sa:text-sm sa:text-text-muted", children: description }) : null
     ] }),
     shortcut && /* @__PURE__ */ jsx(KbdGroup, { keys: shortcut, "aria-hidden": true }),
-    selected && /* @__PURE__ */ jsx("span", { className: "sr-only", children: "(selected)" }),
-    selected && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "text-status-green-fg", children: /* @__PURE__ */ jsx(
+    selected && /* @__PURE__ */ jsxs("span", { className: "sa:sr-only", children: [
+      "(",
+      labels.selected,
+      ")"
+    ] }),
+    selected && /* @__PURE__ */ jsx("svg", { width: "16", height: "16", viewBox: "0 0 16 16", fill: "none", "aria-hidden": true, className: "sa:text-status-green-fg", children: /* @__PURE__ */ jsx(
       "path",
       {
         d: "M3.33333 8.66667L6 11.3333L12.6667 4.66667",
@@ -149,5 +155,3 @@ function DropdownMenuItem({
 }
 
 export { DropdownMenu, DropdownMenuGroup, DropdownMenuItem, MenuItemContent, menuGroupClass, menuGroupLabelClass, menuItemClass, menuSurfaceClass };
-//# sourceMappingURL=chunk-3DINAQLL.js.map
-//# sourceMappingURL=chunk-3DINAQLL.js.map