@dxos/react-ui 0.1.41-next.adfd7c6 → 0.3.3-main.3ce60d4

package/dist/types/src/playground/helpers.d.ts

@@ -0,0 +1,6 @@
+import '@dxosTheme';
+import { type FunctionComponent } from 'react';
+export declare const createScenarios: (Component: FunctionComponent<any>) => ({ ...props }: {
+    [x: string]: any;
+}) => JSX.Element;
+//# sourceMappingURL=helpers.d.ts.map

package/dist/types/src/playground/helpers.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"helpers.d.ts","sourceRoot":"","sources":["../../../../src/playground/helpers.tsx"],"names":[],"mappings":"AAIA,OAAO,YAAY,CAAC;AAEpB,OAAc,EAAE,KAAK,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAOtD,eAAO,MAAM,eAAe,cACd,kBAAkB,GAAG,CAAC;;iBAiBjC,CAAC"}

package/dist/types/src/util/ThemedClassName.d.ts

@@ -0,0 +1,5 @@
+import { type ClassNameValue } from '@dxos/react-ui-types';
+export type ThemedClassName<P> = Omit<P, 'className'> & {
+    classNames?: ClassNameValue;
+};
+//# sourceMappingURL=ThemedClassName.d.ts.map

package/dist/types/src/util/ThemedClassName.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ThemedClassName.d.ts","sourceRoot":"","sources":["../../../../src/util/ThemedClassName.ts"],"names":[],"mappings":"AAIA,OAAO,EAAE,KAAK,cAAc,EAAE,MAAM,sBAAsB,CAAC;AAE3D,MAAM,MAAM,eAAe,CAAC,CAAC,IAAI,IAAI,CAAC,CAAC,EAAE,WAAW,CAAC,GAAG;IAAE,UAAU,CAAC,EAAE,cAAc,CAAA;CAAE,CAAC"}

package/dist/types/src/util/hasIosKeyboard.d.ts

@@ -0,0 +1,2 @@
+export declare const hasIosKeyboard: () => boolean;
+//# sourceMappingURL=hasIosKeyboard.d.ts.map

package/dist/types/src/util/hasIosKeyboard.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"hasIosKeyboard.d.ts","sourceRoot":"","sources":["../../../../src/util/hasIosKeyboard.ts"],"names":[],"mappings":"AAIA,eAAO,MAAM,cAAc,eAG1B,CAAC"}

package/dist/types/src/util/index.d.ts

@@ -1,3 +1,3 @@
-export * from './invitationStatusValue';
-export * from './toEmoji';
+export * from './hasIosKeyboard';
+export * from './ThemedClassName';
 //# sourceMappingURL=index.d.ts.map

package/dist/types/src/util/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,yBAAyB,CAAC;AACxC,cAAc,WAAW,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/util/index.ts"],"names":[],"mappings":"AAIA,cAAc,kBAAkB,CAAC;AACjC,cAAc,mBAAmB,CAAC"}

package/package.json

@@ -1,65 +1,64 @@
 {
   "name": "@dxos/react-ui",
-  "version": "0.1.41-next.adfd7c6",
-  "description": "A React component library for DXOS’s OS experiences",
+  "version": "0.3.3-main.3ce60d4",
+  "description": "Opinionated, styled, low-level React components for DXOS.",
   "homepage": "https://dxos.org",
   "bugs": "https://github.com/dxos/dxos/issues",
   "license": "MIT",
   "author": "DXOS.org",
-  "exports": {
-    ".": "./dist/lib/browser/index.mjs",
-    "./testing": "./dist/lib/browser/testing/index.mjs",
-    "./theme-extensions": "./theme-extensions.js"
-  },
+  "main": "dist/lib/browser/index.mjs",
   "types": "dist/types/src/index.d.ts",
-  "typesVersions": {
-    "*": {
-      "testing": [
-        "dist/types/src/testing/index.d.ts"
-      ]
-    }
-  },
   "files": [
     "dist",
     "src",
-    "theme-extensions.js"
+    "plugin.js",
+    "plugin.d.ts"
   ],
   "dependencies": {
-    "@radix-ui/react-accordion": "^1.1.1",
     "@radix-ui/react-alert-dialog": "^1.0.3",
+    "@radix-ui/react-avatar": "^1.0.2",
+    "@radix-ui/react-checkbox": "^1.0.3",
+    "@radix-ui/react-context": "^1.0.0",
     "@radix-ui/react-dialog": "^1.0.3",
-    "@radix-ui/react-radio-group": "^1.1.2",
-    "@react-hook/async": "^3.1.1",
-    "@xstate/react": "^3.2.1",
-    "debug": "^4.3.3",
-    "lodash.toarray": "^4.4.0",
-    "qrcode.react": "^3.1.0",
-    "url-join": "^5.0.0",
-    "xstate": "^4.37.0",
-    "@dxos/client": "0.1.41-next.adfd7c6",
-    "@dxos/config": "0.1.41-next.adfd7c6",
-    "@dxos/debug": "0.1.41-next.adfd7c6",
-    "@dxos/keys": "0.1.41-next.adfd7c6",
-    "@dxos/protocols": "0.1.41-next.adfd7c6",
-    "@dxos/react-client": "0.1.41-next.adfd7c6",
-    "@dxos/react-components": "0.1.41-next.adfd7c6",
-    "@dxos/util": "0.1.41-next.adfd7c6"
+    "@radix-ui/react-dropdown-menu": "^2.0.5",
+    "@radix-ui/react-popover": "^1.0.6",
+    "@radix-ui/react-popper": "^1.1.2",
+    "@radix-ui/react-primitive": "^1.0.2",
+    "@radix-ui/react-scroll-area": "^1.0.3",
+    "@radix-ui/react-select": "^1.2.1",
+    "@radix-ui/react-separator": "^1.0.3",
+    "@radix-ui/react-slot": "^1.0.1",
+    "@radix-ui/react-switch": "^1.0.3",
+    "@radix-ui/react-toast": "^1.1.3",
+    "@radix-ui/react-toggle": "^1.0.2",
+    "@radix-ui/react-toggle-group": "^1.0.3",
+    "@radix-ui/react-toolbar": "^1.0.3",
+    "@radix-ui/react-tooltip": "^1.0.5",
+    "@radix-ui/react-use-controllable-state": "^1.0.0",
+    "downshift": "^8.1.0",
+    "i18next": "^21.10.0",
+    "jdenticon": "^3.2.0",
+    "keyborg": "^2.0.0",
+    "react-i18next": "^11.18.6",
+    "@dxos/react-hooks": "0.3.3-main.3ce60d4",
+    "@dxos/react-input": "0.3.3-main.3ce60d4",
+    "@dxos/react-list": "0.3.3-main.3ce60d4",
+    "@dxos/react-ui-types": "0.3.3-main.3ce60d4"
   },
   "devDependencies": {
-    "@faker-js/faker": "^7.6.0",
+    "@dnd-kit/core": "^6.0.5",
+    "@dnd-kit/sortable": "^7.0.1",
+    "@dnd-kit/utilities": "^3.2.0",
+    "@faker-js/faker": "^8.0.2",
     "@phosphor-icons/react": "^2.0.5",
-    "@types/debug": "^4.1.7",
-    "@types/lodash.toarray": "^4.4.7",
     "@types/react": "^18.0.21",
     "@types/react-dom": "^18.0.6",
-    "@vitejs/plugin-react": "^3.0.1",
+    "chromatic": "^6.17.0",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
-    "vite": "^4.2.0",
-    "@dxos/async": "0.1.41-next.adfd7c6",
-    "@dxos/client-services": "0.1.41-next.adfd7c6",
-    "@dxos/log": "0.1.41-next.adfd7c6",
-    "@dxos/react-async": "0.1.41-next.adfd7c6"
+    "vite": "^4.3.9",
+    "vite-plugin-turbosnap": "^1.0.2",
+    "@dxos/react-ui-theme": "0.3.3-main.3ce60d4"
   },
   "peerDependencies": {
     "@phosphor-icons/react": "^2.0.5",
@@ -68,5 +67,8 @@
   },
   "publishConfig": {
     "access": "public"
+  },
+  "scripts": {
+    "chromatic": "chromatic --only-changed --project-token=\"44ade288043a\" --storybook-build-dir out/react-ui --exit-zero-on-changes"
   }
 }

package/src/components/Avatars/Avatar.stories.tsx

@@ -0,0 +1,104 @@
+//
+// Copyright 2022 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React, { type PropsWithChildren } from 'react';
+
+import { type Size } from '@dxos/react-ui-types';
+
+import { Avatar, useJdenticonHref, type AvatarVariant, type AvatarStatus, type AvatarAnimation } from './Avatar';
+
+type StorybookAvatarProps = {
+  imgSrc?: string;
+  fallbackValue?: string;
+  fallbackText?: string;
+  label?: string;
+  description?: string;
+  status?: AvatarStatus;
+  variant?: AvatarVariant;
+  animation?: AvatarAnimation;
+  size?: Size;
+};
+
+const StorybookAvatar = (props: PropsWithChildren<StorybookAvatarProps>) => {
+  const {
+    status,
+    size = 12,
+    variant = 'circle',
+    label = 'Alice',
+    description = 'Online',
+    fallbackValue = '20970b563fc49b5bb194a6ffdff376031a3a11f9481360c071c3fed87874106b',
+    fallbackText = '',
+    animation,
+    imgSrc,
+  } = props;
+  const jdenticon = useJdenticonHref(fallbackValue ?? '', size);
+  return (
+    <Avatar.Root {...{ size, variant, status, animation }}>
+      <Avatar.Frame>
+        <Avatar.Image href={imgSrc} />
+        <Avatar.Fallback href={fallbackValue ? jdenticon : ''} text={fallbackText} />
+      </Avatar.Frame>
+      <div>
+        <Avatar.Label classNames='block'>{label}</Avatar.Label>
+        <Avatar.Description classNames='block'>{description}</Avatar.Description>
+      </div>
+    </Avatar.Root>
+  );
+};
+
+export default {
+  component: StorybookAvatar,
+};
+
+export const Default = () => (
+  <div className='flex flex-row gap-4'>
+    <StorybookAvatar description='Offline' />
+    <StorybookAvatar status='active' />
+    <StorybookAvatar status='error' description='Error' />
+    <StorybookAvatar status='warning' description='Warning' />
+  </div>
+);
+
+export const Square = () => (
+  <div className='flex flex-row gap-4'>
+    <StorybookAvatar variant='square' description='Offline' />
+    <StorybookAvatar variant='square' status='active' />
+    <StorybookAvatar variant='square' status='error' />
+    <StorybookAvatar variant='square' status='warning' />
+  </div>
+);
+
+export const DefaultEmoji = () => (
+  <div className='flex flex-row gap-4'>
+    <StorybookAvatar fallbackText='🦄' fallbackValue='' status='active' animation='pulse' />
+    <StorybookAvatar fallbackText='🐒' fallbackValue='' animation='pulse' />
+    <StorybookAvatar fallbackText='🪲' fallbackValue='' />
+  </div>
+);
+
+export const SquareEmoji = () => <StorybookAvatar variant='square' fallbackText='🦄' fallbackValue='' />;
+
+export const DefaultText = () => (
+  <div className='flex flex-row gap-4'>
+    <StorybookAvatar fallbackText='PT' fallbackValue='' />
+    <StorybookAvatar fallbackText='AP' fallbackValue='' />
+    <StorybookAvatar fallbackText='Z' fallbackValue='' />
+    <StorybookAvatar fallbackText='pt' fallbackValue='' />
+    <StorybookAvatar fallbackText='ap' fallbackValue='' />
+    <StorybookAvatar fallbackText='z' fallbackValue='' />
+  </div>
+);
+
+export const Error = () => <StorybookAvatar status='error' description='Errored' />;
+
+export const Pulse = () => (
+  <div className='flex flex-row gap-4'>
+    <StorybookAvatar description='Online' status='active' animation='pulse' />
+    <StorybookAvatar description='Offline' status='inactive' animation='pulse' />
+    <StorybookAvatar description='Error' status='error' animation='pulse' />
+    <StorybookAvatar description='Warning' status='warning' animation='pulse' />
+  </div>
+);

package/src/components/Avatars/Avatar.tsx

@@ -0,0 +1,303 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import {
+  Root as AvatarRootPrimitive,
+  type AvatarProps as AvatarRootPrimitiveProps,
+  Image as AvatarImagePrimitive,
+  type ImageLoadingStatus,
+  Fallback as AvatarFallbackPrimitive,
+} from '@radix-ui/react-avatar';
+import { createContext } from '@radix-ui/react-context';
+import { Primitive } from '@radix-ui/react-primitive';
+import { Slot } from '@radix-ui/react-slot';
+import { toSvg } from 'jdenticon';
+import React, { type ComponentPropsWithRef, forwardRef, type PropsWithChildren, useMemo } from 'react';
+
+import { useId } from '@dxos/react-hooks';
+import { type Size } from '@dxos/react-ui-types';
+
+import { useThemeContext } from '../../hooks';
+import { type ThemedClassName } from '../../util';
+
+type AvatarVariant = 'square' | 'circle';
+type AvatarStatus = 'active' | 'inactive' | 'error' | 'warning';
+type AvatarAnimation = 'pulse' | 'none';
+
+export type AvatarRootProps = PropsWithChildren<Partial<AvatarContextValue>>;
+
+type AvatarContextValue = {
+  labelId: string;
+  descriptionId: string;
+  maskId: string;
+  size: Size;
+  variant: AvatarVariant;
+  status?: AvatarStatus;
+  animation?: AvatarAnimation;
+  inGroup?: boolean;
+};
+const AVATAR_NAME = 'Avatar';
+const [AvatarProvider, useAvatarContext] = createContext<AvatarContextValue>(AVATAR_NAME);
+
+const AvatarRoot = ({
+  size = 10,
+  variant = 'circle',
+  status,
+  animation,
+  children,
+  labelId: propsLabelId,
+  descriptionId: propsDescriptionId,
+  maskId: propsMaskId,
+  inGroup,
+}: AvatarRootProps) => {
+  const labelId = useId('avatar__label', propsLabelId);
+  const descriptionId = useId('avatar__description', propsDescriptionId);
+  const maskId = useId('avatar__mask', propsMaskId);
+  return (
+    <AvatarProvider {...{ labelId, descriptionId, maskId, size, variant, status, animation, inGroup }}>
+      {children}
+    </AvatarProvider>
+  );
+};
+
+type AvatarFrameProps = ThemedClassName<AvatarRootPrimitiveProps>;
+
+const strokeWidth = 2;
+const rx = 8;
+
+const AvatarFrame = forwardRef<HTMLSpanElement, AvatarFrameProps>(
+  ({ classNames, children, ...props }, forwardedRef) => {
+    const { size, variant, labelId, descriptionId, maskId, inGroup, status, animation } =
+      useAvatarContext('AvatarFrame');
+
+    const { tx } = useThemeContext();
+    const imageSizeNumber = size === 'px' ? 1 : size * 4;
+    const ringGap = 3;
+    const ringWidth = 2;
+    const r = imageSizeNumber / 2 - ringGap - ringWidth;
+    return (
+      <AvatarRootPrimitive
+        role='img'
+        {...props}
+        className={tx('avatar.root', 'avatar', { size, variant, inGroup }, classNames)}
+        ref={forwardedRef}
+        {...(!inGroup && {
+          'aria-labelledby': labelId,
+          'aria-describedby': descriptionId,
+        })}
+      >
+        <svg
+          viewBox={`0 0 ${imageSizeNumber} ${imageSizeNumber}`}
+          width={imageSizeNumber}
+          height={imageSizeNumber}
+          className={tx('avatar.frame', 'avatar__frame', {})}
+        >
+          <defs>
+            <mask id={maskId}>
+              {variant === 'circle' ? (
+                <circle fill='white' cx='50%' cy='50%' r={r} />
+              ) : (
+                <rect fill='white' width={2 * r} height={2 * r} x={ringGap + ringWidth} y={ringGap + ringWidth} />
+              )}
+            </mask>
+          </defs>
+          {variant === 'circle' ? (
+            <g>
+              <circle fill='#999' stroke='none' opacity={0.1} cx='50%' cy='50%' r={r} />
+              <circle stroke='#888' fill='none' opacity={0.3} cx='50%' cy='50%' r={r} />
+            </g>
+          ) : (
+            <g>
+              <rect
+                fill='#999'
+                stroke='none'
+                opacity={0.1}
+                width={2 * r}
+                height={2 * r}
+                x={ringGap + ringWidth}
+                y={ringGap + ringWidth}
+                rx={2}
+              />
+              <rect
+                fill='none'
+                stroke='#333'
+                opacity={0.15}
+                width={2 * r}
+                height={2 * r}
+                x={ringGap + ringWidth}
+                y={ringGap + ringWidth}
+                rx={2}
+              />
+            </g>
+            //   <circle
+            //     className='avatarFrameFill fill-[var(--surface-bg)]'
+            //     cx={imageSizeNumber / 2}
+            //     cy={imageSizeNumber / 2}
+            //     r={imageSizeNumber / 2}
+            //   />
+            // ) : (
+            //   <rect
+            //     className='avatarFrameFill fill-[var(--surface-bg)]'
+            //     width={imageSizeNumber}
+            //     height={imageSizeNumber}
+            //     rx={rx}
+            //   />
+          )}
+          {children}
+          {variant === 'circle' ? (
+            <circle
+              className='avatarFrameStroke fill-transparent stroke-[var(--surface-bg)]'
+              strokeWidth={strokeWidth}
+              cx={imageSizeNumber / 2}
+              cy={imageSizeNumber / 2}
+              r={imageSizeNumber / 2 - strokeWidth / 4}
+            />
+          ) : (
+            <rect
+              className='avatarFrameStroke fill-transparent stroke-[var(--surface-bg)]'
+              strokeWidth={strokeWidth}
+              x={strokeWidth / 4}
+              y={strokeWidth / 4}
+              rx={rx}
+              width={imageSizeNumber - strokeWidth / 4}
+              height={imageSizeNumber - strokeWidth / 4}
+            />
+          )}
+        </svg>
+        <span className={tx('avatar.ring', 'avatar__ring', { size, variant, status, animation })}></span>
+      </AvatarRootPrimitive>
+    );
+  },
+);
+
+type AvatarLabelProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'>> & {
+  asChild?: boolean;
+  srOnly?: boolean;
+};
+
+const AvatarLabel = forwardRef<HTMLSpanElement, AvatarLabelProps>(
+  ({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+    const Root = asChild ? Slot : Primitive.span;
+    const { tx } = useThemeContext();
+    const { labelId } = useAvatarContext('AvatarLabel');
+    return (
+      <Root
+        {...props}
+        id={labelId}
+        ref={forwardedRef}
+        className={tx('avatar.label', 'avatar__label', { srOnly }, classNames)}
+      />
+    );
+  },
+);
+
+type AvatarDescriptionProps = ThemedClassName<Omit<ComponentPropsWithRef<typeof Primitive.span>, 'id'>> & {
+  asChild?: boolean;
+  srOnly?: boolean;
+};
+
+const AvatarDescription = forwardRef<HTMLSpanElement, AvatarDescriptionProps>(
+  ({ asChild, srOnly, classNames, ...props }, forwardedRef) => {
+    const Root = asChild ? Slot : Primitive.span;
+    const { tx } = useThemeContext();
+    const { descriptionId } = useAvatarContext('AvatarDescription');
+    return (
+      <Root
+        {...props}
+        id={descriptionId}
+        ref={forwardedRef}
+        className={tx('avatar.description', 'avatar__description', { srOnly }, classNames)}
+      />
+    );
+  },
+);
+
+type AvatarMaskedImageProps = ComponentPropsWithRef<'image'>;
+
+const AvatarMaskedImage = forwardRef<SVGImageElement, AvatarMaskedImageProps>((props, forwardedRef) => {
+  const { maskId } = useAvatarContext('AvatarFallback');
+  return <image width='100%' height='100%' {...props} mask={`url(#${maskId})`} ref={forwardedRef} />;
+});
+
+type AvatarMaskedTextProps = PropsWithChildren<{ large?: boolean }>;
+
+const AvatarMaskedText = (props: AvatarMaskedTextProps) => {
+  const { maskId, size } = useAvatarContext('AvatarFallback');
+  const { large } = props;
+  const fontScale = (large ? 4 : 3) * (1 / 1.612);
+  const { tx } = useThemeContext();
+  return (
+    <text
+      x='50%'
+      y='50%'
+      className={tx('avatar.fallbackText', 'avatar__fallback-text')}
+      textAnchor='middle'
+      alignmentBaseline='central'
+      fontSize={size === 'px' ? '200%' : size * fontScale}
+      mask={`url(#${maskId})`}
+    >
+      {props.children}
+    </text>
+  );
+};
+
+type AvatarImageProps = ComponentPropsWithRef<'image'> & {
+  onLoadingStatusChange?: (status: ImageLoadingStatus) => void;
+};
+
+const AvatarImage = forwardRef<SVGImageElement, AvatarImageProps>(
+  ({ onLoadingStatusChange, ...props }, forwardedRef) => {
+    return (
+      <AvatarImagePrimitive onLoadingStatusChange={onLoadingStatusChange} asChild>
+        <AvatarMaskedImage {...props} ref={forwardedRef} />
+      </AvatarImagePrimitive>
+    );
+  },
+);
+
+type AvatarFallbackProps = ComponentPropsWithRef<'image'> & {
+  delayMs?: number;
+  text?: string;
+};
+
+const AvatarFallback = forwardRef<SVGImageElement, AvatarFallbackProps>(({ delayMs, text, ...props }, forwardedRef) => {
+  const isTextOnly = Boolean(text && /[0-9a-zA-Z]+/.test(text));
+  return (
+    <AvatarFallbackPrimitive delayMs={delayMs} asChild>
+      <>
+        <AvatarMaskedImage {...props} ref={forwardedRef} />
+        {text && <AvatarMaskedText large={!isTextOnly}>{text.toLocaleUpperCase()}</AvatarMaskedText>}
+      </>
+    </AvatarFallbackPrimitive>
+  );
+});
+
+const getJdenticonHref = (value: string, size: Size) =>
+  `data:image/svg+xml;utf8,${encodeURIComponent(toSvg(value, size === 'px' ? 1 : size * 4, { padding: 0 }))}`;
+
+const useJdenticonHref = (value: string, size: Size) => {
+  return useMemo(() => getJdenticonHref(value, size), [value]);
+};
+
+export const Avatar = {
+  Root: AvatarRoot,
+  Frame: AvatarFrame,
+  Image: AvatarImage,
+  Fallback: AvatarFallback,
+  Label: AvatarLabel,
+  Description: AvatarDescription,
+};
+
+export { useJdenticonHref, useAvatarContext, getJdenticonHref };
+
+export type {
+  AvatarStatus,
+  AvatarVariant,
+  AvatarAnimation,
+  AvatarFrameProps,
+  AvatarImageProps,
+  AvatarFallbackProps,
+  AvatarLabelProps,
+  AvatarDescriptionProps,
+};

package/src/components/Avatars/AvatarGroup.stories.tsx

@@ -0,0 +1,49 @@
+//
+// Copyright 2023 DXOS.org
+//
+
+import '@dxosTheme';
+
+import React from 'react';
+
+import { Avatar, useJdenticonHref } from './Avatar';
+import { AvatarGroup, AvatarGroupItem } from './AvatarGroup';
+
+const items = [
+  '[&_.avatarFrameFill]:fill-lime-500',
+  '[&_.avatarFrameFill]:fill-teal-500',
+  '[&_.avatarFrameFill]:fill-purple-500',
+  '[&_.avatarFrameFill]:fill-pink-500',
+];
+
+const StorybookAvatarGroupItem = ({ n }: { n: number }) => {
+  const href = useJdenticonHref(`StorybookAvatarGroupItem--${n}`, 4);
+  return (
+    <AvatarGroupItem.Root>
+      <Avatar.Frame classNames={items[n]}>
+        <Avatar.Fallback href={href} />
+      </Avatar.Frame>
+    </AvatarGroupItem.Root>
+  );
+};
+
+const StorybookAvatarGroup = () => {
+  return (
+    <AvatarGroup.Root size={8} variant='circle'>
+      {[0, 1, 2, 3].map((n) => (
+        <StorybookAvatarGroupItem key={n} n={n} />
+      ))}
+      <AvatarGroup.Label srOnly>
+        <span>23</span>
+      </AvatarGroup.Label>
+    </AvatarGroup.Root>
+  );
+};
+
+export default {
+  component: StorybookAvatarGroup,
+};
+
+export const Default = {
+  args: {},
+};