sdaia-ui 1.0.1

package/src/components/Autocomplete/Autocomplete.variants.ts

@@ -0,0 +1,149 @@
+import type { AutocompleteSize } from './Autocomplete.types';
+
+/* ── Outer wrapper ───────────────────────────────────────────── */
+export const WRAPPER = 'flex flex-col gap-spacing-sm w-full text-text-sm font-[400]';
+
+/* ── Label row ───────────────────────────────────────────────── */
+export const LABEL_WRAP =
+  'flex items-center gap-spacing-xxs text-text-sm font-[400] whitespace-nowrap';
+/** Figma variable: Form/field-text-label #161616 */
+export const LABEL_DEFAULT =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+export const LABEL_DISABLED =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+/** Figma variable: Form/field-border-error #b42318 */
+export const LABEL_REQUIRED =
+  'text-[rgba(180,35,24,1)] dark:text-[rgba(248,113,113,1)]';
+
+/* ── Input container ─────────────────────────────────────────── */
+export const INPUT_CONTAINER_BASE =
+  'flex items-center gap-spacing-md rounded-[8px] border w-full motion-feedback text-text-md font-[400]';
+
+export const INPUT_PADDING: Record<AutocompleteSize, string> = {
+  /** Figma Large: py = 8px (spacing-md), px = 12px (spacing-lg) */
+  large: 'px-spacing-lg py-spacing-md',
+  /** Figma Medium: py = 6px (spacing-sm), px = 12px (spacing-lg) */
+  medium: 'px-spacing-lg py-spacing-sm',
+};
+
+/** Figma variable: Form/field-background-default #ffffff */
+export const INPUT_BG_DEFAULT =
+  'bg-white dark:bg-[rgba(17,25,39,1)]';
+/** Figma variable: Background/background-neutral-50 #f9fafb */
+export const INPUT_BG_DISABLED =
+  'bg-[rgba(249,250,251,1)] dark:bg-[rgba(17,25,39,1)]';
+
+/** Figma variable: Border/border-neutral-primary #d2d6db */
+export const INPUT_BORDER_DEFAULT =
+  'border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)]';
+/**
+ * Focused / Open state — 2 px border.
+ * Figma variable: Colors/Alpha/alpha-600-primary-70 rgba(27,131,84,0.7)
+ */
+export const INPUT_BORDER_FOCUSED =
+  'border-2 border-[rgba(27,131,84,0.7)]';
+
+/* ── Text input element ──────────────────────────────────────── */
+export const INPUT_TEXT: Record<AutocompleteSize, string> = {
+  large: 'text-text-md font-[400]',
+  medium: 'text-text-sm font-[400]',
+};
+/** Figma variable: Form/field-text-placeholder #6c737f */
+export const INPUT_PLACEHOLDER_COLOR =
+  'placeholder:text-[rgba(108,115,127,1)] dark:placeholder:text-[rgba(107,114,128,1)]';
+/** Figma variable: Form/field-text-filled #161616 */
+export const INPUT_TEXT_FILLED =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+/** Figma variable: Form/field-text-placeholder #6c737f (no value) */
+export const INPUT_TEXT_PLACEHOLDER =
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)]';
+/** Figma variable: Global/text-default-disabled #9da4ae */
+export const INPUT_TEXT_DISABLED =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+/* ── Leading search icon ─────────────────────────────────────── */
+/** Figma variable: Icon/icon-default-500 #6c737f. Icon size: 20×20 → size-icon-md */
+export const ICON_DEFAULT =
+  'shrink-0 size-icon-md text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+export const ICON_DISABLED =
+  'shrink-0 size-icon-md text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)]';
+
+/* ── Trailing clear (×) button ───────────────────────────────── */
+/** Figma: cancel-01 icon, 16×16 → size-icon-sm */
+export const CLEAR_BUTTON =
+  [
+    'shrink-0 flex items-center justify-center rounded-full cursor-pointer',
+    'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]',
+    'hover:text-[rgba(22,22,22,1)] dark:hover:text-[rgba(229,231,235,1)]',
+    'motion-feedback',
+    'focus-visible:outline-none focus-visible:ring-2',
+    'focus-visible:ring-[rgba(22,22,22,1)] dark:focus-visible:ring-[rgba(210,214,219,1)]',
+    'focus-visible:ring-offset-2',
+  ].join(' ');
+export const CLEAR_BUTTON_DISABLED =
+  'shrink-0 flex items-center justify-center text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)] cursor-not-allowed';
+
+/* ── Helper text row ─────────────────────────────────────────── */
+export const HELPER_WRAP = 'flex items-center gap-spacing-sm ';
+export const HELPER_TEXT = 'text-text-sm font-[400]';
+/** Figma variable: Form/field-text-helper #6c737f */
+export const HELPER_DEFAULT =
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)] text-text-sm font-[400]';
+export const HELPER_DISABLED =
+  'text-[rgba(157,164,174,1)] dark:text-[rgba(75,85,99,1)] ';
+
+/* ── Dropdown panel ──────────────────────────────────────────── */
+/**
+ * Figma variable: Shadows/shadow-lg
+ *   DROP_SHADOW #10182808 offset (0,4) radius 6 spread -2
+ *   DROP_SHADOW #10182814 offset (0,12) radius 16 spread -4
+ * Background: Background/background-menu #ffffff
+ * Border: Border/border-neutral-primary #d2d6db
+ */
+export const DROPDOWN_PANEL =
+  'absolute start-0 end-0 top-full z-50 mt-1 rounded-[8px] ' +
+  'border border-[rgba(210,214,219,1)] dark:border-[rgba(44,57,79,1)] ' +
+  'bg-white dark:bg-[rgba(17,25,39,1)] ' +
+  'py-spacing-xs overflow-y-auto max-h-[248px] ' +
+  'shadow-[0px_4px_6px_-2px_rgba(16,24,40,0.03),0px_12px_16px_-4px_rgba(16,24,40,0.08)]';
+
+/* ── Dropdown section label ──────────────────────────────────── */
+/** Figma: px=6(spacing-sm) py=4(spacing-xs) wrapper; px=8(spacing-md) py=4(spacing-xs) content */
+export const SECTION_WRAPPER = 'flex flex-col px-spacing-sm py-spacing-xs';
+export const SECTION_CONTENT = 'px-spacing-md py-spacing-xs rounded-[8px]';
+/** Figma variable: Text/text-secondary-paragraph #6c737f */
+export const SECTION_TEXT =
+  'text-text-xs font-[400] ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(107,114,128,1)]';
+
+/* ── Dropdown item ───────────────────────────────────────────── */
+/** Figma: item wrapper px=6(spacing-sm) py=2(spacing-xxs) */
+export const ITEM_WRAPPER = 'flex flex-col px-spacing-sm py-spacing-xxs';
+/**
+ * Figma: item content p=8(spacing-md), gap=8(spacing-md), max-h=36px, rounded-[8px].
+ * Hover: background-neutral-50 #f9fafb / dark: rgba(31,42,55,1)
+ */
+export const ITEM_CONTENT =
+  [
+    'flex items-center gap-spacing-md p-spacing-md max-h-[36px] w-full rounded-[8px]',
+    'cursor-pointer motion-feedback',
+    'hover:bg-[rgba(249,250,251,1)] dark:hover:bg-[rgba(31,42,55,1)]',
+    'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-inset',
+    'focus-visible:ring-[rgba(27,131,84,0.7)]',
+  ].join(' ');
+
+/** Figma variable: Icon/icon-default-500 #6c737f. Icon size: 20×20 → size-icon-md */
+export const ITEM_ICON =
+  'shrink-0 size-icon-md flex items-center justify-center ' +
+  'text-[rgba(108,115,127,1)] dark:text-[rgba(156,163,175,1)]';
+
+/** Figma variable: Text/text-default #161616 */
+export const ITEM_TEXT =
+  'flex-1 min-w-0 truncate text-text-sm font-[400] ' +
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(229,231,235,1)]';
+
+/**
+ * Highlighted (matched) portion of suggestion text.
+ * Figma variable: Text/text-primary #1b8354
+ */
+export const ITEM_MATCH = 'text-[rgba(27,131,84,1)]';

package/src/components/Autocomplete/index.ts

@@ -0,0 +1,6 @@
+export { Autocomplete } from './Autocomplete';
+export type {
+  AutocompleteProps,
+  AutocompleteSize,
+  AutocompleteItem,
+} from './Autocomplete.types';

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,168 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { StatusDot } from '../StatusDot';
+import { UserIcon } from '../../icons/IconFactory';
+import {
+  BG_LAYER,
+  BORDER_LAYER,
+  CONTAINER_SIZE,
+  ICON_COLOR,
+  IMAGE_EL,
+  IMAGE_WRAP,
+  INITIALS_COLOR,
+  INITIALS_TEXT_CLASS,
+  INNER_SIZE,
+  PADDING_CLASS,
+  PLACEHOLDER,
+  ROOT_BASE,
+  SHAPE_ROOT_RADIUS,
+  STATUS_DOT_POSITION,
+  STATUS_DOT_SIZE,
+  STATUS_DOT_WRAP,
+} from './Avatar.variants';
+import type { AvatarProps } from './Avatar.types';
+
+/** Truncate and uppercase to at most 2 characters for initials display. */
+function formatInitials(value: string | undefined): string {
+  if (!value) return '';
+  return value.trim().slice(0, 2).toUpperCase();
+}
+
+export const Avatar = forwardRef<HTMLDivElement, AvatarProps>(function Avatar(
+  {
+    size = 'md',
+    type = 'initials',
+    shape = 'round',
+    initials,
+    src,
+    alt = '',
+    icon,
+    statusDot = false,
+    background = true,
+    border = true,
+    className,
+    style,
+    ...rest
+  },
+  ref
+) {
+  const outer = CONTAINER_SIZE[type][size];
+  const inner = INNER_SIZE[type][size];
+  const dotSize = STATUS_DOT_SIZE[size];
+  const useIconDot = size === 'lg' || size === 'xl';
+  const shapeRadius = SHAPE_ROOT_RADIUS[shape];
+  const isImage = type === 'image';
+
+  return (
+    <div
+      ref={ref}
+      data-slot="avatar"
+      data-size={size}
+      data-type={type}
+      data-shape={shape}
+      className={cn(
+        ROOT_BASE,
+        shapeRadius,
+        !isImage && PADDING_CLASS[size],
+        className
+      )}
+      style={{ width: `${outer}px`, height: `${outer}px`, ...style }}
+      {...rest}
+    >
+      {/* Background fill layer — non-image types only (image covers the whole area) */}
+      {background && !isImage && (
+        <div
+          data-slot="avatar-background"
+          aria-hidden="true"
+          className={cn(BG_LAYER, shapeRadius)}
+        />
+      )}
+
+      {/* Placeholder: initials | icon | image */}
+      {type === 'initials' && (
+        <div
+          data-slot="avatar-placeholder"
+          className={PLACEHOLDER}
+          style={{ width: `${inner}px`, height: `${inner}px` }}
+        >
+          <span
+            data-slot="avatar-initials"
+            className={cn(INITIALS_COLOR, INITIALS_TEXT_CLASS[size], 'w-full')}
+          >
+            {formatInitials(initials)}
+          </span>
+        </div>
+      )}
+
+      {type === 'icon' && (
+        <div
+          data-slot="avatar-placeholder"
+          className={cn(PLACEHOLDER, ICON_COLOR)}
+          style={{ width: `${inner}px`, height: `${inner}px` }}
+        >
+          {icon ?? <UserIcon aria-hidden="true" />}
+        </div>
+      )}
+
+      {isImage && (
+        <div
+          data-slot="avatar-placeholder"
+          className={cn(IMAGE_WRAP, shapeRadius)}
+        >
+          {src ? (
+            <img src={src} alt={alt} className={IMAGE_EL} />
+          ) : (
+            // Graceful fallback: a gray background with a user glyph,
+            // so consumers who forget to pass `src` still see a valid avatar.
+            <>
+              <div
+                aria-hidden="true"
+                className={cn(BG_LAYER, shapeRadius)}
+              />
+              <div
+                className={cn(
+                  'relative inline-flex h-full w-full items-center justify-center',
+                  ICON_COLOR
+                )}
+              >
+                <div
+                  style={{
+                    width: `${INNER_SIZE.icon[size]}px`,
+                    height: `${INNER_SIZE.icon[size]}px`,
+                  }}
+                >
+                  <UserIcon aria-hidden="true" />
+                </div>
+              </div>
+            </>
+          )}
+        </div>
+      )}
+
+      {/* White ring — non-image only (on image types the picture IS the boundary) */}
+      {border && !isImage && (
+        <div
+          data-slot="avatar-border"
+          aria-hidden="true"
+          className={cn(BORDER_LAYER, shapeRadius)}
+        />
+      )}
+
+      {/* Status indicator — composed from the shared StatusDot primitive */}
+      {statusDot && (
+        <StatusDot
+          data-slot="avatar-status"
+          size={dotSize}
+          type={useIconDot ? 'icon' : 'dot'}
+          shape={shape}
+          status={useIconDot ? 'neutral' : 'online'}
+          className={cn(STATUS_DOT_WRAP, STATUS_DOT_POSITION[shape][size])}
+        />
+      )}
+    </div>
+  );
+});
+
+Avatar.displayName = 'Avatar';

package/src/components/Avatar/Avatar.types.ts

@@ -0,0 +1,36 @@
+import type { HTMLAttributes, ReactNode } from 'react';
+
+/** Visual size tier */
+export type AvatarSize = 'sm' | 'md' | 'lg' | 'xl';
+
+/** Content type */
+export type AvatarType = 'initials' | 'icon' | 'image';
+
+/** Shape: round (circle) or rounded-square */
+export type AvatarShape = 'round' | 'square';
+
+export interface AvatarProps extends HTMLAttributes<HTMLDivElement> {
+  /** Size tier */
+  size?: AvatarSize;
+  /** Content type */
+  type?: AvatarType;
+  /** Shape */
+  shape?: AvatarShape;
+  /**
+   * Initials text — used when `type="initials"`.
+   * The first two characters will be uppercased and shown.
+   */
+  initials?: string;
+  /** Image source — used when `type="image"` */
+  src?: string;
+  /** Alt text for the image — used when `type="image"` */
+  alt?: string;
+  /** Custom icon — replaces the default user icon when `type="icon"` */
+  icon?: ReactNode;
+  /** Shows the status indicator overlay */
+  statusDot?: boolean;
+  /** Shows the inner neutral background fill. @default true */
+  background?: boolean;
+  /** Shows the outer white ring border. @default true */
+  border?: boolean;
+}

package/src/components/Avatar/Avatar.variants.ts

@@ -0,0 +1,102 @@
+import type { StatusDotSize } from '../StatusDot';
+import type { AvatarShape, AvatarSize, AvatarType } from './Avatar.types';
+
+/**
+ * Outer container dimension (px) per (size × type).
+ * Icon types at lg/xl are one step larger to accommodate the bigger inner glyph.
+ */
+export const CONTAINER_SIZE: Record<AvatarType, Record<AvatarSize, number>> = {
+  initials: { sm: 24, md: 32, lg: 40, xl: 48 },
+  image: { sm: 24, md: 32, lg: 40, xl: 48 },
+  icon: { sm: 24, md: 32, lg: 48, xl: 48 },
+};
+
+/** Inner placeholder (where initials/icon render) size per (size × type) */
+export const INNER_SIZE: Record<AvatarType, Record<AvatarSize, number>> = {
+  initials: { sm: 16, md: 24, lg: 32, xl: 32 },
+  image: { sm: 24, md: 32, lg: 40, xl: 48 },
+  icon: { sm: 16, md: 24, lg: 32, xl: 40 },
+};
+
+/** Root padding per size (comes from Figma design-context) */
+export const PADDING_CLASS: Record<AvatarSize, string> = {
+  sm: 'p-spacing-xs',
+  md: 'p-spacing-xs',
+  lg: 'p-spacing-xs',
+  xl: 'p-spacing-md',
+};
+
+/** Typography for initials per size */
+export const INITIALS_TEXT_CLASS: Record<AvatarSize, string> = {
+  sm: 'text-text-2xs font-[700] leading-[14px]',
+  md: 'text-text-xs font-[600] leading-[18px]',
+  lg: 'text-text-sm font-[600] leading-[20px]',
+  xl: 'text-text-md font-[500] leading-[24px]',
+};
+
+/** Shape → root border radius */
+export const SHAPE_ROOT_RADIUS: Record<AvatarShape, string> = {
+  round: 'rounded-full',
+  square: 'rounded-[4px]',
+};
+
+/** Pixel size of the status dot per Avatar size tier. */
+export const STATUS_DOT_SIZE: Record<AvatarSize, StatusDotSize> = {
+  sm: 8,
+  md: 10,
+  lg: 12,
+  xl: 16,
+};
+
+/**
+ * Anchor position classes for the status dot.
+ * Uses logical properties (`end-*`) so the dot flips to bottom-left in RTL.
+ */
+export const STATUS_DOT_POSITION: Record<AvatarShape, Record<AvatarSize, string>> = {
+  round: {
+    sm: 'bottom-0 end-0',
+    md: 'bottom-0 end-0',
+    lg: 'bottom-0 end-0',
+    xl: 'bottom-0 end-0',
+  },
+  square: {
+    sm: 'bottom-0 end-0',
+    md: 'bottom-0 end-0',
+    lg: 'bottom-0 end-0',
+    xl: 'bottom-0 end-0',
+  },
+};
+
+/** Shared root base classes */
+export const ROOT_BASE =
+  'relative inline-flex items-center justify-center shrink-0';
+
+/** Background fill layer (when `background` is true) */
+export const BG_LAYER =
+  'absolute inset-0 bg-[rgba(243,244,246,1)] dark:bg-[rgba(31,41,55,1)]';
+
+/** White ring layer (when `border` is true) */
+export const BORDER_LAYER =
+  'absolute inset-0 border-2 border-white dark:border-[rgba(17,24,39,1)]';
+
+/** Placeholder wrapper — centers initials/icon */
+export const PLACEHOLDER =
+  'relative inline-flex items-center justify-center shrink-0';
+
+/** Initials text color (light + dark) */
+export const INITIALS_COLOR =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(243,244,246,1)] text-center';
+
+/** User-icon color (light + dark) */
+export const ICON_COLOR =
+  'text-[rgba(22,22,22,1)] dark:text-[rgba(243,244,246,1)]';
+
+/** Image wrapper */
+export const IMAGE_WRAP = 'relative block w-full h-full overflow-hidden';
+
+/** Image element */
+export const IMAGE_EL =
+  'absolute inset-0 w-full h-full object-cover pointer-events-none';
+
+/** Status dot anchor wrapper (absolute-positioned on the avatar root). */
+export const STATUS_DOT_WRAP = 'absolute';

package/src/components/Avatar/index.ts

@@ -0,0 +1,7 @@
+export { Avatar } from './Avatar';
+export type {
+  AvatarProps,
+  AvatarSize,
+  AvatarType,
+  AvatarShape,
+} from './Avatar.types';

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -0,0 +1,87 @@
+'use client';
+
+import { forwardRef } from 'react';
+import { cn } from '../../lib/cn';
+import { Avatar } from '../Avatar';
+import type { AvatarGroupProps } from './AvatarGroup.types';
+import { ROOT_BASE, ROOT_LAYOUT } from './AvatarGroup.variants';
+
+/**
+ * AvatarGroup — stack or row of avatars.
+ *
+ * `type="group"` overlaps avatars by 8 px (logical margin, RTL-safe).
+ * `type="individual"` spaces them with a normal gap.
+ *
+ * When `max` is set and the list exceeds it, the remaining avatars are
+ * replaced with a `+N` counter rendered as an `initials` Avatar matching
+ * the rest of the group's size and shape.
+ */
+export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(function AvatarGroup(
+  {
+    type = 'group',
+    items,
+    max,
+    size = 'md',
+    dir: dirProp,
+    rtl,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const dir = dirProp ?? (rtl ? 'rtl' : undefined);
+
+  const visibleItems =
+    max !== undefined && items.length > max ? items.slice(0, max) : items;
+  const overflowCount =
+    max !== undefined ? Math.max(0, items.length - visibleItems.length) : 0;
+
+  const shape = visibleItems[0]?.shape ?? 'round';
+
+  return (
+    <div
+      ref={ref}
+      data-slot="avatar-group"
+      data-type={type}
+      dir={dir}
+      className={cn(ROOT_BASE, ROOT_LAYOUT[type], className)}
+      {...rest}
+    >
+      {visibleItems.map((item, index) => {
+        const { active, ...avatarProps } = item;
+        const avatar = (
+          <Avatar
+            key={index}
+            {...avatarProps}
+            size={size}
+            statusDot={false}
+            style={{ zIndex: visibleItems.length - index, ...item.style }}
+          />
+        );
+        if (!active) return avatar;
+        return (
+          <div
+            key={index}
+            className="relative shrink-0 rounded-full"
+            style={{ zIndex: visibleItems.length - index }}
+            aria-label="Active user"
+          >
+            <div className="absolute -inset-[3px] rounded-full border-2 border-[rgba(27,131,84,1)] dark:border-[rgba(52,211,153,1)]" aria-hidden="true" />
+            <Avatar {...avatarProps} size={size} statusDot={false} />
+          </div>
+        );
+      })}
+
+      {overflowCount > 0 && (
+        <Avatar
+          data-slot="avatar-group-overflow"
+          type="initials"
+          initials={`+${overflowCount}`}
+          size={size}
+          shape={shape}
+          style={{ zIndex: 0 }}
+        />
+      )}
+    </div>
+  );
+});

package/src/components/AvatarGroup/AvatarGroup.types.ts

@@ -0,0 +1,44 @@
+import type { HTMLAttributes } from 'react';
+import type { AvatarProps, AvatarSize } from '../Avatar/Avatar.types';
+
+/** Layout mode. */
+export type AvatarGroupType = 'group' | 'individual';
+
+/**
+ * One avatar inside the group. Accepts every Avatar prop except `size`
+ * (controlled by the group) and `statusDot` (not shown in group context).
+ *
+ * Set `active: true` on the item that represents the currently active user —
+ * it will render with a green outline ring to distinguish it from the others.
+ */
+export type AvatarGroupItem = Omit<AvatarProps, 'size' | 'statusDot'> & {
+  active?: boolean;
+};
+
+export interface AvatarGroupProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'children'> {
+  /**
+   * Layout mode.
+   * - `group` (default): avatars overlap in a stack via a negative inline margin.
+   * - `individual`: avatars are spaced side-by-side.
+   */
+  type?: AvatarGroupType;
+
+  /** Avatars to render, in visual stacking order (first = on top). */
+  items: AvatarGroupItem[];
+
+  /**
+   * Maximum number of avatars to render before collapsing the rest into a
+   * `+N` counter. If omitted, every item in `items` is rendered.
+   */
+  max?: number;
+
+  /** Size applied to every avatar in the group. @default 'md' */
+  size?: AvatarSize;
+
+  /** Direction for RTL support. */
+  dir?: 'ltr' | 'rtl';
+
+  /** @deprecated Use `dir="rtl"` instead. */
+  rtl?: boolean;
+}

package/src/components/AvatarGroup/AvatarGroup.variants.ts

@@ -0,0 +1,17 @@
+import type { AvatarGroupType } from './AvatarGroup.types';
+
+/** Shared root classes for every layout mode. */
+export const ROOT_BASE = 'inline-flex items-center';
+
+/**
+ * Layout per type.
+ *
+ * - `group`: every avatar after the first gets a negative inline-start
+ *   margin of 8 px, so siblings overlap by 8 px in LTR and RTL alike
+ *   (logical `-ms-*` flips automatically with `dir="rtl"`).
+ * - `individual`: small gap between avatars.
+ */
+export const ROOT_LAYOUT: Record<AvatarGroupType, string> = {
+  group: '[&>*+*]:-ms-[8px]',
+  individual: 'gap-spacing-md',
+};

package/src/components/AvatarGroup/index.ts

@@ -0,0 +1,6 @@
+export { AvatarGroup } from './AvatarGroup';
+export type {
+  AvatarGroupProps,
+  AvatarGroupType,
+  AvatarGroupItem,
+} from './AvatarGroup.types';