sdaia-ui 1.0.1 → 1.0.2

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

@@ -1,149 +0,0 @@
-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

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

package/src/components/Avatar/Avatar.tsx

@@ -1,168 +0,0 @@
-'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

@@ -1,36 +0,0 @@
-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

@@ -1,102 +0,0 @@
-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

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

package/src/components/AvatarGroup/AvatarGroup.tsx

@@ -1,87 +0,0 @@
-'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

@@ -1,44 +0,0 @@
-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

@@ -1,17 +0,0 @@
-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

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