rift-ds 1.0.0

package/components/AppSidebar/AppSidebar.js

@@ -0,0 +1,295 @@
+"use client";
+import { jsxs, Fragment, jsx } from "react/jsx-runtime";
+import React, { useState, useRef, useEffect, useCallback, useId } from "react";
+import { useLayer } from "../../behaviors/useLayer.js";
+import { useFocusScope } from "../../behaviors/useFocusScope.js";
+import { useScrollLock } from "../../behaviors/useScrollLock.js";
+import { Avatar } from "../Avatar/Avatar.js";
+import "./AppSidebar.css";
+import "../../fonts/material-symbols.css";
+function DefaultLogo() {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      width: "24",
+      height: "24",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      xmlns: "http://www.w3.org/2000/svg",
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M12 1.5 V22.5", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx("path", { d: "M6.5 7 V12 L2 16.5", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round" }),
+        /* @__PURE__ */ jsx("path", { d: "M17.5 7 V12 L22 16.5", stroke: "currentColor", strokeWidth: "2.4", strokeLinecap: "round", strokeLinejoin: "round" })
+      ]
+    }
+  );
+}
+const AppSidebar = ({
+  sections,
+  profile,
+  activeKey,
+  activeSubKey,
+  defaultExpanded = false,
+  expanded: controlledExpanded,
+  onExpandedChange,
+  onProfileMore,
+  floating = false,
+  topSlot,
+  footerSlot,
+  className = "",
+  logo,
+  logoText = "Rift",
+  showMobileTrigger = true
+}) => {
+  const baseClass = "ds-app-sidebar";
+  const [internalExpanded, setInternalExpanded] = useState(defaultExpanded);
+  const isExpanded = controlledExpanded ?? internalExpanded;
+  const onExpandedChangeRef = useRef(onExpandedChange);
+  useEffect(() => {
+    onExpandedChangeRef.current = onExpandedChange;
+  }, [onExpandedChange]);
+  const toggleExpanded = useCallback(() => {
+    const next = !isExpanded;
+    setInternalExpanded(next);
+    onExpandedChange?.(next);
+  }, [isExpanded, onExpandedChange]);
+  useEffect(() => {
+    const band = window.matchMedia("(min-width: 769px) and (max-width: 959px)");
+    const onChange = () => {
+      if (band.matches) {
+        setInternalExpanded(false);
+        onExpandedChangeRef.current?.(false);
+      }
+    };
+    onChange();
+    band.addEventListener("change", onChange);
+    return () => band.removeEventListener("change", onChange);
+  }, []);
+  const [mobileOpen, setMobileOpen] = useState(false);
+  const drawerRef = useRef(null);
+  const drawerId = useId();
+  const closeMobile = useCallback(() => setMobileOpen(false), []);
+  useLayer({ open: mobileOpen, onDismiss: closeMobile });
+  useFocusScope(drawerRef, { active: mobileOpen });
+  useScrollLock(mobileOpen);
+  useEffect(() => {
+    if (!mobileOpen) return;
+    const query = window.matchMedia("(min-width: 769px)");
+    const onChange = () => {
+      if (query.matches) setMobileOpen(false);
+    };
+    onChange();
+    query.addEventListener("change", onChange);
+    return () => query.removeEventListener("change", onChange);
+  }, [mobileOpen]);
+  const [openKeys, setOpenKeys] = useState(/* @__PURE__ */ new Set());
+  const toggleAccordion = useCallback((key) => {
+    setOpenKeys((prev) => {
+      const next = new Set(prev);
+      if (next.has(key)) {
+        next.delete(key);
+      } else {
+        next.add(key);
+      }
+      return next;
+    });
+  }, []);
+  const classes = [
+    baseClass,
+    // The drawer always shows the expanded layout: an icon rail inside
+    // a modal overlay would be all cost and no labels.
+    isExpanded || mobileOpen ? `${baseClass}--expanded` : "",
+    floating ? `${baseClass}--floating` : "",
+    mobileOpen ? `${baseClass}--mobile-open` : "",
+    className
+  ].filter(Boolean).join(" ");
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    showMobileTrigger && /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        className: `${baseClass}__mobile-trigger`,
+        "aria-label": "Open navigation",
+        "aria-expanded": mobileOpen,
+        "aria-controls": drawerId,
+        onClick: () => setMobileOpen(true),
+        children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", "aria-hidden": "true", children: "menu" })
+      }
+    ),
+    mobileOpen && /* @__PURE__ */ jsx("div", { className: `${baseClass}__scrim`, onClick: closeMobile, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs("nav", { ref: drawerRef, id: drawerId, className: classes, "aria-label": "App navigation", children: [
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__top`, children: [
+        /* @__PURE__ */ jsxs("div", { className: `${baseClass}__logo`, children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              className: `${baseClass}__logo-inner`,
+              onClick: !isExpanded ? toggleExpanded : void 0,
+              role: !isExpanded ? "button" : void 0,
+              tabIndex: !isExpanded ? 0 : void 0,
+              "aria-label": !isExpanded ? "Expand sidebar" : void 0,
+              onKeyDown: !isExpanded ? (e) => {
+                if (e.key === "Enter" || e.key === " ") {
+                  e.preventDefault();
+                  toggleExpanded();
+                }
+              } : void 0,
+              style: !isExpanded ? { cursor: "pointer" } : void 0,
+              children: [
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__logo-icon`, children: logo || /* @__PURE__ */ jsx(DefaultLogo, {}) }),
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__logo-text`, children: logoText })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `${baseClass}__toggle`,
+              onClick: mobileOpen ? closeMobile : toggleExpanded,
+              "aria-label": mobileOpen ? "Close navigation" : isExpanded ? "Collapse sidebar" : "Expand sidebar",
+              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: mobileOpen ? "close" : isExpanded ? "left_panel_close" : "left_panel_open" })
+            }
+          )
+        ] }),
+        topSlot && /* @__PURE__ */ jsx("div", { className: `${baseClass}__top-slot`, children: topSlot }),
+        sections.map((section, si) => /* @__PURE__ */ jsxs("div", { className: `${baseClass}__nav`, children: [
+          section.category && /* @__PURE__ */ jsx("div", { className: `${baseClass}__category`, children: section.category }),
+          section.items.map((item) => {
+            const hasChildren = item.children && item.children.length > 0;
+            const isOpen = openKeys.has(item.key);
+            const isActive = activeKey === item.key;
+            const isLink = Boolean(item.href) && !hasChildren;
+            const itemClasses = [
+              `${baseClass}__btn`,
+              isActive ? `${baseClass}__btn--active` : ""
+            ].filter(Boolean).join(" ");
+            const itemContent = /* @__PURE__ */ jsxs(Fragment, { children: [
+              /* @__PURE__ */ jsxs("span", { className: `${baseClass}__btn-left`, children: [
+                /* @__PURE__ */ jsx(
+                  "span",
+                  {
+                    className: `${baseClass}__btn-icon${typeof item.icon === "string" ? " material-symbols-rounded" : ""}`,
+                    children: item.icon
+                  }
+                ),
+                /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-label`, children: item.label })
+              ] }),
+              item.badge !== void 0 && /* @__PURE__ */ jsx("span", { className: `${baseClass}__btn-badge`, children: item.badge }),
+              hasChildren && /* @__PURE__ */ jsx(
+                "span",
+                {
+                  className: [
+                    `${baseClass}__btn-chevron material-symbols-rounded`,
+                    isOpen ? `${baseClass}__btn-chevron--open` : ""
+                  ].filter(Boolean).join(" "),
+                  children: "chevron_right"
+                }
+              )
+            ] });
+            return /* @__PURE__ */ jsxs(React.Fragment, { children: [
+              isLink ? /* @__PURE__ */ jsx(
+                "a",
+                {
+                  className: itemClasses,
+                  href: item.href,
+                  onClick: () => item.onClick?.(),
+                  "aria-current": isActive ? "page" : void 0,
+                  title: !isExpanded ? item.label : void 0,
+                  children: itemContent
+                }
+              ) : /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: itemClasses,
+                  onClick: () => {
+                    if (hasChildren && isExpanded) {
+                      toggleAccordion(item.key);
+                    }
+                    item.onClick?.();
+                  },
+                  "aria-expanded": hasChildren ? isOpen : void 0,
+                  "aria-current": isActive ? "page" : void 0,
+                  title: !isExpanded ? item.label : void 0,
+                  children: itemContent
+                }
+              ),
+              hasChildren && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: [
+                    `${baseClass}__sub-items`,
+                    isOpen && isExpanded ? `${baseClass}__sub-items--open` : ""
+                  ].filter(Boolean).join(" "),
+                  children: item.children.map((sub) => {
+                    const subActive = activeSubKey === sub.key;
+                    const subClasses = [
+                      `${baseClass}__sub-btn`,
+                      subActive ? `${baseClass}__sub-btn--active` : ""
+                    ].filter(Boolean).join(" ");
+                    const subLabel = /* @__PURE__ */ jsx("span", { className: `${baseClass}__sub-label`, children: sub.label });
+                    return /* @__PURE__ */ jsxs("div", { className: `${baseClass}__sub-item`, children: [
+                      /* @__PURE__ */ jsx("div", { className: `${baseClass}__sub-line` }),
+                      sub.href ? /* @__PURE__ */ jsx(
+                        "a",
+                        {
+                          className: subClasses,
+                          href: sub.href,
+                          onClick: sub.onClick,
+                          "aria-current": subActive ? "page" : void 0,
+                          children: subLabel
+                        }
+                      ) : /* @__PURE__ */ jsx(
+                        "button",
+                        {
+                          type: "button",
+                          className: subClasses,
+                          onClick: sub.onClick,
+                          "aria-current": subActive ? "page" : void 0,
+                          children: subLabel
+                        }
+                      )
+                    ] }, sub.key);
+                  })
+                }
+              )
+            ] }, item.key);
+          })
+        ] }, si))
+      ] }),
+      /* @__PURE__ */ jsxs("div", { className: `${baseClass}__bottom`, children: [
+        footerSlot && /* @__PURE__ */ jsx("div", { className: `${baseClass}__footer-slot`, children: footerSlot }),
+        profile && /* @__PURE__ */ jsxs("div", { className: `${baseClass}__profile`, children: [
+          /* @__PURE__ */ jsxs("div", { className: `${baseClass}__profile-left`, children: [
+            /* @__PURE__ */ jsx(
+              Avatar,
+              {
+                className: `${baseClass}__avatar`,
+                size: "md",
+                name: profile.name,
+                src: profile.avatarUrl
+              }
+            ),
+            /* @__PURE__ */ jsxs("div", { className: `${baseClass}__profile-info`, children: [
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__profile-name`, children: profile.name }),
+              /* @__PURE__ */ jsx("span", { className: `${baseClass}__profile-email`, children: profile.email })
+            ] })
+          ] }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              className: `${baseClass}__profile-more`,
+              onClick: onProfileMore,
+              "aria-label": "Profile options",
+              children: /* @__PURE__ */ jsx("span", { className: "material-symbols-rounded", children: "more_horiz" })
+            }
+          )
+        ] })
+      ] })
+    ] })
+  ] });
+};
+export {
+  AppSidebar
+};

package/components/Avatar/Avatar.css

@@ -0,0 +1,133 @@
+/* ============================================
+   AVATAR COMPONENT
+   User profile image with initials fallback
+   ============================================ */
+
+.ds-avatar {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: var(--radius-pill); /* 999px */
+  background-color: var(--color-bg-container-secondary);
+  flex-shrink: 0;
+}
+
+/* ============================================
+   SIZES
+   ============================================ */
+
+.ds-avatar--sm {
+  width: 32px;
+  height: 32px;
+}
+
+.ds-avatar--md {
+  width: 40px;
+  height: 40px;
+}
+
+.ds-avatar--lg {
+  width: 56px;
+  height: 56px;
+}
+
+/* ============================================
+   IMAGE
+   ============================================ */
+
+.ds-avatar__image {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  display: block;
+  border-radius: var(--radius-pill);
+}
+
+/* ============================================
+   INITIALS FALLBACK
+   ============================================ */
+
+.ds-avatar__initials {
+  font-family: var(--font-paragraph-emphasis-family);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  color: var(--color-text-primary);
+  line-height: 1;
+  user-select: none;
+}
+
+.ds-avatar--sm .ds-avatar__initials {
+  font-size: 12px;
+}
+
+.ds-avatar--md .ds-avatar__initials {
+  font-size: 14px;
+}
+
+.ds-avatar--lg .ds-avatar__initials {
+  font-size: 18px;
+}
+
+/* ============================================
+   ICON FALLBACK
+   ============================================ */
+
+.ds-avatar__icon {
+  color: var(--color-icon-secondary);
+  line-height: 1;
+}
+
+.ds-avatar--sm .ds-avatar__icon {
+  --icon-size: var(--icon-size-500);
+}
+
+.ds-avatar--md .ds-avatar__icon {
+  --icon-size: var(--icon-size-600);
+}
+
+.ds-avatar--lg .ds-avatar__icon {
+  --icon-size: var(--icon-size-800);
+}
+
+/* ============================================
+   STATUS INDICATOR
+   ============================================ */
+
+.ds-avatar__status {
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  border-radius: var(--radius-pill);
+  border: 2px solid var(--color-bg-page-primary);
+}
+
+.ds-avatar--sm .ds-avatar__status {
+  width: 10px;
+  height: 10px;
+}
+
+.ds-avatar--md .ds-avatar__status {
+  width: 12px;
+  height: 12px;
+}
+
+.ds-avatar--lg .ds-avatar__status {
+  width: 14px;
+  height: 14px;
+}
+
+.ds-avatar__status--online {
+  background-color: var(--color-status-positive-border);
+}
+
+.ds-avatar__status--away {
+  background-color: var(--color-status-warning-border);
+}
+
+.ds-avatar__status--offline {
+  background-color: var(--color-bg-container-border);
+}
+
+.ds-avatar__status--busy {
+  background-color: var(--color-status-error-border);
+}

package/components/Avatar/Avatar.d.ts

@@ -0,0 +1,20 @@
+export interface AvatarProps {
+    /** Image source URL */
+    src?: string;
+    /** Alt text for the image */
+    alt?: string;
+    /** User's name — used for initials fallback */
+    name?: string;
+    /** Avatar size */
+    size?: 'sm' | 'md' | 'lg';
+    /** Online status indicator */
+    status?: 'online' | 'away' | 'offline' | 'busy';
+    /** Additional CSS classes */
+    className?: string;
+}
+/**
+ * Avatar component for user profile images.
+ * Falls back to initials derived from the name prop,
+ * or a person icon when neither image nor name is provided.
+ */
+export declare const Avatar: ({ src, alt, name, size, status, className, }: AvatarProps) => import("react").JSX.Element;

package/components/Avatar/Avatar.js

@@ -0,0 +1,58 @@
+"use client";
+import { jsxs, jsx } from "react/jsx-runtime";
+import { useState } from "react";
+import "./Avatar.css";
+import "../../fonts/material-symbols.css";
+const Avatar = ({
+  src,
+  alt,
+  name,
+  size = "md",
+  status,
+  className = ""
+}) => {
+  const [imgError, setImgError] = useState(false);
+  const baseClass = "ds-avatar";
+  const sizeClass = `${baseClass}--${size}`;
+  const classes = [baseClass, sizeClass, className].filter(Boolean).join(" ");
+  const getInitials = (fullName) => {
+    const parts = fullName.trim().split(/\s+/);
+    if (parts.length === 1) return parts[0][0].toUpperCase();
+    return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+  };
+  const showImage = src && !imgError;
+  const showInitials = !showImage && name;
+  const showIcon = !showImage && !name;
+  const label = alt || name || "User avatar";
+  return /* @__PURE__ */ jsxs("span", { className: classes, role: "img", "aria-label": label, children: [
+    showImage && /* @__PURE__ */ jsx(
+      "img",
+      {
+        className: `${baseClass}__image`,
+        src,
+        alt: alt || name || "",
+        onError: () => setImgError(true)
+      }
+    ),
+    showInitials && /* @__PURE__ */ jsx("span", { className: `${baseClass}__initials`, "aria-hidden": "true", children: getInitials(name) }),
+    showIcon && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${baseClass}__icon material-symbols-rounded`,
+        "aria-hidden": "true",
+        children: "person"
+      }
+    ),
+    status && /* @__PURE__ */ jsx(
+      "span",
+      {
+        className: `${baseClass}__status ${baseClass}__status--${status}`,
+        role: "img",
+        "aria-label": status
+      }
+    )
+  ] });
+};
+export {
+  Avatar
+};

package/components/Avatar/demoAvatars.d.ts

@@ -0,0 +1,18 @@
+/**
+ * Self-contained demo avatar portraits for docs and stories.
+ *
+ * The Avatar showcase (website page + Storybook stories) needs sample photos to
+ * demonstrate the image state. Pointing at a third-party host (e.g. pravatar.cc)
+ * made the docs depend on an external service — when it was rate-limited or
+ * blocked, every avatar rendered as a broken image with alt text bleeding
+ * through the circle. These inline SVG data URIs render the same everywhere with
+ * no network request, so the docs stay self-contained.
+ *
+ * The pigments are deliberately theme-frozen — the same face must read as the
+ * same person in light and dark — so they are literals, not tokens. The first
+ * portrait's background snapshots the brand teal primitive.
+ */
+/** Distinct demo portraits so multiple avatars in a row read as different people. */
+export declare const demoAvatar1: string;
+export declare const demoAvatar2: string;
+export declare const demoAvatar3: string;

package/components/Avatar/demoAvatars.js

@@ -0,0 +1,16 @@
+const portrait = (bg, accent) => {
+  const svg = `<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96">
+    <rect width="96" height="96" fill="${bg}"/>
+    <circle cx="48" cy="38" r="17" fill="${accent}"/>
+    <path d="M18 84c0-16.6 13.4-30 30-30s30 13.4 30 30z" fill="${accent}"/>
+  </svg>`;
+  return `data:image/svg+xml;utf8,${encodeURIComponent(svg)}`;
+};
+const demoAvatar1 = portrait("#0E6E8F", "#8FD3E8");
+const demoAvatar2 = portrait("#C05B8B", "#F3C6DC");
+const demoAvatar3 = portrait("#4E7A3A", "#C7E6B2");
+export {
+  demoAvatar1,
+  demoAvatar2,
+  demoAvatar3
+};

package/components/AvatarGroup/AvatarGroup.css

@@ -0,0 +1,61 @@
+/* ============================================
+   AVATAR GROUP COMPONENT
+   Overlapping avatar stack with a "+N" counter.
+   The pixel size ladder matches Avatar's sizes
+   so the counter circle sits flush in the row.
+   ============================================ */
+
+/* Base */
+
+.ds-avatar-group {
+  display: inline-flex;
+  align-items: center;
+}
+
+/* Items — each avatar (and the counter) sits in a ring-bearing wrapper
+   so the overlaps stay legible on any surface. */
+
+.ds-avatar-group__item {
+  position: relative;
+  display: inline-flex;
+  border-radius: var(--radius-pill);
+  box-shadow: 0 0 0 var(--border-050) var(--color-bg-page-primary);
+}
+
+.ds-avatar-group__item + .ds-avatar-group__item {
+  margin-left: calc(var(--gap-200) * -1);
+}
+
+/* Overflow counter */
+
+.ds-avatar-group__overflow {
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  background-color: var(--color-bg-container-secondary);
+  color: var(--color-text-secondary);
+  font-family: var(--font-paragraph-emphasis-family);
+  font-weight: var(--font-paragraph-emphasis-weight);
+  line-height: 1;
+  user-select: none;
+}
+
+/* Sizes — matching Avatar's ladder */
+
+.ds-avatar-group--sm .ds-avatar-group__overflow {
+  width: 32px;
+  height: 32px;
+  font-size: 12px;
+}
+
+.ds-avatar-group--md .ds-avatar-group__overflow {
+  width: 40px;
+  height: 40px;
+  font-size: 14px;
+}
+
+.ds-avatar-group--lg .ds-avatar-group__overflow {
+  width: 56px;
+  height: 56px;
+  font-size: 18px;
+}

package/components/AvatarGroup/AvatarGroup.d.ts

@@ -0,0 +1,32 @@
+import { default as React } from 'react';
+/** Props owned by AvatarGroup itself — everything else falls through to the root div. */
+type AvatarGroupOwnProps = {
+    /** The avatars to stack, in display order — normally `Avatar` elements. */
+    children: React.ReactNode;
+    /** Avatars shown before the rest collapse into a "+N" counter. */
+    max?: number;
+    /**
+     * Size applied to every avatar in the stack and to the overflow counter.
+     * Cloned onto the children so the group cannot render mixed sizes.
+     */
+    size?: 'sm' | 'md' | 'lg';
+    /**
+     * Accessible label for the overflow counter. Defaults to "N more" —
+     * override it to localise or add context, e.g. "4 more reviewers".
+     */
+    overflowLabel?: string;
+    /** Additional CSS classes */
+    className?: string;
+};
+export interface AvatarGroupProps extends AvatarGroupOwnProps, Omit<React.ComponentPropsWithoutRef<'div'>, keyof AvatarGroupOwnProps> {
+}
+/**
+ * AvatarGroup — an overlapping stack of avatars with a "+N" counter for the
+ * overflow, the "who's here" affordance in collaboration UIs. Purely
+ * presentational: it lays out the `Avatar` children it is given (forcing a
+ * uniform size onto them) and counts the rest, so it renders from a Server
+ * Component. Each avatar carries a page-coloured ring so the overlaps stay
+ * legible on any surface.
+ */
+export declare const AvatarGroup: React.ForwardRefExoticComponent<AvatarGroupProps & React.RefAttributes<HTMLDivElement>>;
+export {};

package/components/AvatarGroup/AvatarGroup.js

@@ -0,0 +1,31 @@
+import { jsxs, jsx } from "react/jsx-runtime";
+import React from "react";
+import "./AvatarGroup.css";
+const AvatarGroup = React.forwardRef(
+  ({ children, max = 5, size = "md", overflowLabel, className = "", ...rest }, ref) => {
+    const baseClass = "ds-avatar-group";
+    const classes = [baseClass, `${baseClass}--${size}`, className].filter(Boolean).join(" ");
+    const allChildren = React.Children.toArray(children);
+    const visible = allChildren.slice(0, Math.max(max, 0));
+    const overflow = allChildren.length - visible.length;
+    return /* @__PURE__ */ jsxs("div", { ...rest, ref, className: classes, role: "group", children: [
+      visible.map((child, index) => /* @__PURE__ */ jsx("span", { className: `${baseClass}__item`, children: React.isValidElement(child) ? React.cloneElement(child, { size }) : child }, index)),
+      overflow > 0 && /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: `${baseClass}__item ${baseClass}__overflow`,
+          role: "img",
+          "aria-label": overflowLabel ?? `${overflow} more`,
+          children: /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", children: [
+            "+",
+            overflow
+          ] })
+        }
+      )
+    ] });
+  }
+);
+AvatarGroup.displayName = "AvatarGroup";
+export {
+  AvatarGroup
+};