@dashforge/tw 0.11.0-beta → 1.1.0

package/src/components/Avatar/Avatar.tsx

@@ -0,0 +1,304 @@
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  useState,
+  type ReactElement,
+} from 'react';
+import { cn } from '../../utils/cn.js';
+import {
+  AVATAR_SOFT_FALLBACK,
+  AVATAR_TONE_FALLBACK,
+  avatarVariants,
+} from './avatar.variants.js';
+import type {
+  AvatarGroupProps,
+  AvatarProps,
+  AvatarShape,
+  AvatarSize,
+} from './avatar.types.js';
+import type { BoxProps } from '../Box/box.types.js';
+
+/**
+ * Generic user icon — inline SVG fallback when no `src` and no
+ * `name` are provided. Stroke uses `currentColor` so it inherits the
+ * resolved fallback text color. Same convention as Calendar +
+ * Autocomplete + Alert icons (no icon-library dep).
+ *
+ * @internal
+ */
+function DefaultUserIcon() {
+  return (
+    <svg
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      strokeWidth={1.75}
+      strokeLinecap="round"
+      strokeLinejoin="round"
+      aria-hidden="true"
+    >
+      <circle cx="12" cy="8" r="3.75" />
+      <path d="M4.5 20a7.5 7.5 0 0 1 15 0" />
+    </svg>
+  );
+}
+
+/**
+ * Map the semantic `shape` shortcut to a Box-style `radius` token.
+ * Used only when `radius` is NOT explicitly passed (explicit wins).
+ *
+ * @internal
+ */
+function shapeToRadius(shape: AvatarShape): BoxProps['rounded'] {
+  switch (shape) {
+    case 'circle':
+      return 'full';
+    case 'rounded':
+      return 'lg';
+    case 'square':
+      return 'none';
+  }
+}
+
+/**
+ * Extract initials from a name string. Strategy:
+ *   - Split by whitespace, filter empty.
+ *   - Take the first letter of the first 2 tokens, uppercased.
+ *   - "Maya Rodriguez" → "MR"
+ *   - "Cher" → "C"
+ *   - "  multiple   spaces  " → "MS" (if 2+ words after trim)
+ *   - "" → "" (empty string — caller falls back to icon)
+ *
+ * @internal
+ */
+function initialsFromName(name?: string): string {
+  if (!name) return '';
+  const tokens = name.trim().split(/\s+/).filter(Boolean);
+  if (tokens.length === 0) return '';
+  return (tokens[0]![0]! + (tokens[1]?.[0] ?? '')).toUpperCase();
+}
+
+/**
+ * `<Avatar>` — image / initials / icon visual identity.
+ *
+ * Fallback chain (top to bottom — first match wins):
+ *   1. `src` set + image loads OK    → render `<img>`
+ *   2. `src` set + image fails       → render initials from `name`
+ *   3. `src` absent + `name` set     → render initials from `name`
+ *   4. `fallbackIcon` set            → render that ReactNode
+ *   5. Nothing                        → render generic user SVG
+ *
+ * Color resolution (only for fallback content, image surface is
+ * independent):
+ *   - `color="primary"` only           → soft default (bg-100, text-900)
+ *   - `color="primary" tone={500}`     → bg-primary-500 + text-primary-50
+ *   - Outside the palette              → use `sx`
+ *
+ * No `access` / `visibleWhen` — Avatar is display-only by category.
+ * For visibility gating, wrap in `<Box>` (which has both since
+ * Sprint 4.4).
+ */
+export const Avatar = forwardRef<HTMLSpanElement, AvatarProps>(function Avatar(
+  props,
+  ref
+) {
+  const {
+    src,
+    alt,
+    imgProps,
+    name,
+    shape = 'circle',
+    radius,
+    size = 'md',
+    color = 'neutral',
+    tone,
+    fallbackIcon,
+    sx,
+    className,
+  } = props;
+
+  // Track image-load failures so we can fall through to initials/icon
+  // dynamically. `imgLoaded` distinguishes between "still loading"
+  // (don't show fallback yet — would flash) and "loaded successfully"
+  // (don't paint a fallback color underneath, which would peek through
+  // transparent PNGs).
+  const [imgFailed, setImgFailed] = useState(false);
+
+  // Resolve final radius: explicit `radius` prop wins over `shape`.
+  const finalRadius = radius ?? shapeToRadius(shape);
+
+  // Compute base classes from the TV recipe.
+  const v = avatarVariants({ size, radius: finalRadius });
+
+  // Fallback color resolution. `tone` (when set) drives the specific
+  // shade; otherwise the soft-default lookup is used.
+  const fallbackTone =
+    tone !== undefined
+      ? AVATAR_TONE_FALLBACK[color]?.[tone] ?? AVATAR_SOFT_FALLBACK[color]
+      : AVATAR_SOFT_FALLBACK[color];
+
+  // Image is "successful" when src is set AND the load hasn't failed.
+  const showImage = !!src && !imgFailed;
+  const initials = initialsFromName(name);
+
+  // The root carries the fallback color ONLY when we're showing the
+  // fallback content. Painting it underneath a successful image is
+  // wrong if the image has transparency.
+  const fallbackBgClasses = !showImage ? fallbackTone : '';
+
+  const rootClasses = cn(
+    v.root(),
+    fallbackBgClasses,
+    sx,
+    className
+  );
+
+  // Pick which fallback to render — priority: initials > custom icon > generic SVG.
+  const fallbackContent: ReactElement = initials ? (
+    <span className={v.initials()}>{initials}</span>
+  ) : fallbackIcon ? (
+    <span className="inline-flex items-center justify-center w-full h-full">
+      {fallbackIcon}
+    </span>
+  ) : (
+    <span className={v.icon() + ' inline-flex items-center justify-center'}>
+      <DefaultUserIcon />
+    </span>
+  );
+
+  return (
+    <span
+      ref={ref}
+      className={rootClasses}
+      role="img"
+      aria-label={alt ?? name ?? undefined}
+    >
+      {showImage ? (
+        // Inner img is DECORATIVE (alt="") — the parent span carries
+        // the accessible name via role="img" + aria-label. This avoids
+        // a duplicate role="img" announcement and matches MUI's a11y
+        // pattern.
+        <img
+          src={src}
+          alt=""
+          onError={() => setImgFailed(true)}
+          {...imgProps}
+          className={cn(v.img(), imgProps?.className)}
+        />
+      ) : (
+        fallbackContent
+      )}
+    </span>
+  );
+});
+
+Avatar.displayName = 'Avatar';
+
+// ─── AvatarGroup ─────────────────────────────────────────────────
+
+/**
+ * Horizontal spacing tokens for the group overlap. Negative margin
+ * pulls each child onto the previous, simulating the "stack of
+ * avatars" pattern. Tokens map to spacing scale.
+ *
+ * @internal
+ */
+const GROUP_SPACING: Record<NonNullable<AvatarGroupProps['spacing']>, string> = {
+  xs: '-space-x-1',
+  sm: '-space-x-2',
+  md: '-space-x-3',
+};
+
+/**
+ * `<AvatarGroup>` — thin horizontal wrapper for overlapping avatars.
+ *
+ * Slices children to `max - 1` visible items and renders a trailing
+ * "+N" overflow indicator with the remaining count (when more than
+ * `max` children are passed).
+ *
+ * Each child Avatar inherits the group's `size` unless it explicitly
+ * overrides. When `withRing` is `true` (default), each visible
+ * Avatar gets a `ring-2 ring-white` halo so overlapping borders
+ * stay visually separated.
+ *
+ * @example
+ * ```tsx
+ * <AvatarGroup max={3}>
+ *   <Avatar name="Maya Rodriguez" color="primary" />
+ *   <Avatar name="John Doe" color="success" />
+ *   <Avatar name="Sara Chen" color="warning" />
+ *   <Avatar name="Lila Park" color="info" />
+ *   <Avatar name="Eve Kim" color="danger" />
+ * </AvatarGroup>
+ * // Renders: MR, JD, SC + a "+2" overflow chip
+ * ```
+ */
+export const AvatarGroup = forwardRef<HTMLDivElement, AvatarGroupProps>(
+  function AvatarGroup(props, ref) {
+    const {
+      children,
+      max = 4,
+      size = 'md',
+      spacing = 'sm',
+      withRing = true,
+      className,
+      sx,
+    } = props;
+
+    const allChildren = Children.toArray(children).filter(isValidElement);
+    const total = allChildren.length;
+    const visibleCount = Math.min(total, max);
+    const overflow = Math.max(0, total - visibleCount);
+
+    // Decorate each visible child with size (if not overridden by the
+    // child) and optional ring halo. cloneElement is the standard
+    // React pattern for prop-injection across a children array.
+    const visible = allChildren.slice(0, visibleCount).map((child, idx) => {
+      const childProps = (child as ReactElement<AvatarProps>).props;
+      const inheritedSize: AvatarSize = childProps.size ?? size;
+      const ringClass = withRing ? 'ring-2 ring-neutral-50' : '';
+      const mergedSx = cn(
+        ringClass,
+        childProps.sx as string | undefined,
+        childProps.className
+      );
+      return cloneElement(child as ReactElement<AvatarProps>, {
+        key: idx,
+        size: inheritedSize,
+        sx: mergedSx,
+      });
+    });
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          'inline-flex items-center',
+          GROUP_SPACING[spacing],
+          sx,
+          className
+        )}
+      >
+        {visible}
+        {overflow > 0 && (
+          <Avatar
+            // The overflow indicator IS an avatar (same dimensions /
+            // radius), but with a +N text fallback rather than initials.
+            // We pass an empty `name` and a custom `fallbackIcon` that
+            // renders the count.
+            size={size}
+            color="neutral"
+            sx={cn(withRing && 'ring-2 ring-neutral-50')}
+            fallbackIcon={
+              <span className="text-xs font-medium">+{overflow}</span>
+            }
+          />
+        )}
+      </div>
+    );
+  }
+);
+
+AvatarGroup.displayName = 'AvatarGroup';

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

@@ -0,0 +1,205 @@
+import type { ImgHTMLAttributes, ReactNode } from 'react';
+import type { ClassValue } from 'tailwind-variants';
+import type { BoxProps } from '../Box/box.types.js';
+
+/**
+ * Avatar size scale — maps to spacing tokens via avatar.variants.ts:
+ *   - xs → w-5  / 20px
+ *   - sm → w-7  / 28px
+ *   - md → w-9  / 36px  ← default
+ *   - lg → w-12 / 48px
+ *   - xl → w-16 / 64px
+ */
+export type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl';
+
+/**
+ * Avatar shape — semantic shortcut. Maps internally to a Box-style
+ * `radius` value:
+ *   - circle → 'full'
+ *   - rounded → 'lg'
+ *   - square → 'none'
+ *
+ * When both `shape` and `radius` are set, `radius` wins (explicit
+ * token reference takes precedence over semantic shortcut).
+ */
+export type AvatarShape = 'circle' | 'rounded' | 'square';
+
+/**
+ * Intent color — drives the fallback bg + text colors when no `src`
+ * is provided (or when the image fails to load). Reuses the 7
+ * Dashforge intent tokens.
+ */
+export type AvatarColor =
+  | 'neutral'
+  | 'primary'
+  | 'secondary'
+  | 'success'
+  | 'warning'
+  | 'danger'
+  | 'info';
+
+/**
+ * Tone shade for the fallback background — gives type-safe access to
+ * any specific shade within the chosen `color` palette. When omitted,
+ * the default "soft" treatment is applied (bg-{color}-100 +
+ * text-{color}-900). When set, both bg and text are computed:
+ *   - tones 50-400  → bg-{color}-{tone} + text-{color}-900 (dark text)
+ *   - tones 500-900 → bg-{color}-{tone} + text-{color}-50  (light text)
+ *
+ * For colors outside the token palette (custom hex, gradient, image
+ * patterns), use the `sx` escape hatch with arbitrary Tailwind
+ * utilities.
+ */
+export type AvatarTone =
+  | 50
+  | 100
+  | 200
+  | 300
+  | 400
+  | 500
+  | 600
+  | 700
+  | 800
+  | 900;
+
+/**
+ * Props for `<Avatar>`.
+ *
+ * Fallback resolution chain:
+ *   1. `src` set + image loads OK   → render `<img>`
+ *   2. `src` set + image fails      → render initials from `name`
+ *      (or a generic user icon if `name` is also absent)
+ *   3. `src` absent + `name` set    → render initials from `name`
+ *      (first letter of first two words, uppercased)
+ *   4. Everything absent            → render a generic user icon
+ *
+ * No `access` / `visibleWhen` — Avatar is display-only by category.
+ * For visibility gating, wrap in `<Box>` (which has both props since
+ * Sprint 4.4).
+ */
+export interface AvatarProps {
+  // ─── Image source ──────────────────────────────────────────────
+  /** Image URL. Falls back to initials/icon on load failure. */
+  src?: string;
+
+  /**
+   * `alt` text for the image. **Required when `src` is set** (a11y
+   * — screen readers need a name). When `src` is absent, the alt is
+   * implied from `name`.
+   */
+  alt?: string;
+
+  /** Additional `<img>` HTML attributes (sizes, loading, srcSet, …). */
+  imgProps?: ImgHTMLAttributes<HTMLImageElement>;
+
+  // ─── Fallback ──────────────────────────────────────────────────
+  /**
+   * Person / entity name. Auto-generates initials when `src` is
+   * absent or the image fails to load. Algorithm: take the first
+   * letter of the first two whitespace-separated words, uppercased.
+   * "Maya Rodriguez" → "MR". "Cher" → "C". Empty → generic icon.
+   */
+  name?: string;
+
+  // ─── Visual ────────────────────────────────────────────────────
+  /**
+   * Shape — semantic shortcut. Override with `radius` for fine
+   * control on the Box token scale.
+   * @default 'circle'
+   */
+  shape?: AvatarShape;
+
+  /**
+   * Border radius — same enum as `<Box rounded>` (Box token scale).
+   * When set, overrides the `shape` mapping. Useful for matching a
+   * specific Card/Box radius (e.g., `radius='2xl'`).
+   */
+  radius?: BoxProps['rounded'];
+
+  /** @default 'md' */
+  size?: AvatarSize;
+
+  /**
+   * Intent color used for the fallback background. Ignored when the
+   * image loads successfully.
+   * @default 'neutral'
+   */
+  color?: AvatarColor;
+
+  /**
+   * Specific shade within the `color` palette (TS-safe). When set,
+   * overrides the default "soft" treatment. See `AvatarTone` for the
+   * full scale.
+   */
+  tone?: AvatarTone;
+
+  // ─── Override ──────────────────────────────────────────────────
+  /** Root-element class shortcut (string or clsx-compatible value). */
+  sx?: ClassValue;
+
+  /** Standard React className — appended to the root via `cn()`. */
+  className?: string;
+
+  /**
+   * Optional custom fallback ReactNode — replaces both initials and
+   * the generic icon when the image is absent / fails. Useful for
+   * Avatar-with-emoji or Avatar-with-custom-icon patterns. When
+   * passed, `name` is ignored for initials generation but kept as
+   * `alt` semantic.
+   *
+   * **NB**: this is the ONE exception to the "no fallback prop —
+   * only name" rule from the spec. Kept narrow because emoji /
+   * custom icon avatars are common enough that forcing `sx` for
+   * them would be friction.
+   */
+  fallbackIcon?: ReactNode;
+}
+
+/**
+ * Props for `<AvatarGroup>` — thin horizontal wrapper.
+ *
+ * Renders the first `max` children visibly (with negative-margin
+ * overlap), then an overflow indicator avatar with the remaining
+ * count. Each child Avatar inherits `size` from the group unless it
+ * overrides explicitly. Optional `ring-2 ring-white` halo on each
+ * child via the group's `withRing` prop (visually separates
+ * overlapping avatars on a busy background).
+ */
+export interface AvatarGroupProps {
+  /** Avatar children. */
+  children: ReactNode;
+
+  /**
+   * Max number of avatars to render visibly. Excess collapses into
+   * a trailing "+N" overflow indicator.
+   * @default 4
+   */
+  max?: number;
+
+  /**
+   * Size applied to every child Avatar (unless the child explicitly
+   * overrides). Propagated via React.cloneElement.
+   * @default 'md'
+   */
+  size?: AvatarSize;
+
+  /**
+   * Negative margin between overlapping avatars. Tighter = more
+   * overlap. Looser = more space.
+   * @default 'sm'
+   */
+  spacing?: 'xs' | 'sm' | 'md';
+
+  /**
+   * Wrap each child avatar with a `ring-2 ring-white` halo for
+   * separation on busy backgrounds.
+   * @default true
+   */
+  withRing?: boolean;
+
+  /** Standard className. */
+  className?: string;
+
+  /** sx escape hatch. */
+  sx?: ClassValue;
+}

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

@@ -0,0 +1,194 @@
+import { tv, type VariantProps } from 'tailwind-variants';
+
+/**
+ * Tailwind-variants recipe for `<Avatar>`.
+ *
+ * Axes:
+ *   - `size`   — 5 steps (xs/sm/md/lg/xl), maps to w/h spacing tokens
+ *                + matching text-size for the initials inside.
+ *   - `radius` — 7 steps (none/sm/md/lg/xl/2xl/full), same scale as
+ *                `<Box rounded>`. `shape` prop in the component maps
+ *                semantically: circle → full, rounded → lg, square → none.
+ *   - `color`  — 7 intents. Drives the FALLBACK bg+text only (image
+ *                surface is independent of color).
+ *
+ * The `color` × `tone` combo is resolved at render time in
+ * `Avatar.tsx` via compound lookup — see the SOFT_TINT and TONE
+ * tables there. We do NOT expand the matrix exhaustively in this TV
+ * recipe (it would be 7 colors × 10 tones × 5 sizes = 350 rules; the
+ * runtime resolver keeps the recipe slim).
+ */
+export const avatarVariants = tv({
+  slots: {
+    /** Outer wrapper — sets dimensions + radius + ring + alignment. */
+    root: [
+      'relative inline-flex items-center justify-center shrink-0',
+      'overflow-hidden align-middle',
+      'select-none',
+      // The font weight + leading are baked into root so initials slot
+      // inherits them without an extra class layer.
+      'font-medium leading-none',
+    ],
+    /** `<img>` slot — fills the root, object-cover for crop-to-square. */
+    img: 'block w-full h-full object-cover',
+    /** Initials text slot. */
+    initials: 'uppercase tracking-tight',
+    /** Generic user icon SVG fallback. */
+    icon: 'w-1/2 h-1/2 opacity-80',
+  },
+  variants: {
+    size: {
+      xs: {
+        root: 'w-5 h-5 text-[10px]',
+        initials: '',
+      },
+      sm: {
+        root: 'w-7 h-7 text-xs',
+        initials: '',
+      },
+      md: {
+        root: 'w-9 h-9 text-sm',
+        initials: '',
+      },
+      lg: {
+        root: 'w-12 h-12 text-base',
+        initials: '',
+      },
+      xl: {
+        root: 'w-16 h-16 text-xl',
+        initials: '',
+      },
+    },
+    radius: {
+      none: { root: 'rounded-none' },
+      sm:   { root: 'rounded-sm' },
+      md:   { root: 'rounded-md' },
+      lg:   { root: 'rounded-lg' },
+      xl:   { root: 'rounded-xl' },
+      '2xl':{ root: 'rounded-2xl' },
+      full: { root: 'rounded-full' },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    radius: 'full',
+  },
+});
+
+export type AvatarVariants = VariantProps<typeof avatarVariants>;
+
+/**
+ * Default "soft" fallback treatment per intent — what you get when
+ * `tone` is omitted. Light tinted bg + dark text for legibility.
+ * Neutral row uses no `dark:` because the dashforgePreset() CSS-var
+ * swap auto-inverts neutral; color rows keep `dark:` for the
+ * intentional palette shift (palette colors don't auto-invert).
+ */
+export const AVATAR_SOFT_FALLBACK: Record<string, string> = {
+  neutral:   'bg-neutral-100 text-neutral-900',
+  primary:   'bg-primary-100 text-primary-900 dark:bg-primary-950 dark:text-primary-100',
+  secondary: 'bg-secondary-100 text-secondary-900 dark:bg-secondary-950 dark:text-secondary-100',
+  success:   'bg-success-100 text-success-900 dark:bg-success-950 dark:text-success-100',
+  warning:   'bg-warning-100 text-warning-900 dark:bg-warning-950 dark:text-warning-100',
+  danger:    'bg-danger-100 text-danger-900 dark:bg-danger-950 dark:text-danger-100',
+  info:      'bg-info-100 text-info-900 dark:bg-info-950 dark:text-info-100',
+};
+
+/**
+ * Specific-tone resolver — when the consumer sets `tone={500}` (or
+ * any other value), this lookup builds the matching bg + text class.
+ *
+ * Text color logic:
+ *   - tones 50-400  → dark text (uses the 900 step)
+ *   - tones 500-900 → light text (uses the 50 step)
+ *
+ * Tailwind JIT requires literal class strings, so we enumerate them
+ * explicitly here. The bundle cost is ~70 lines, acceptable for the
+ * type-safety win of letting consumers pick any palette shade.
+ */
+export const AVATAR_TONE_FALLBACK: Record<string, Record<number, string>> = {
+  neutral: {
+    50:  'bg-neutral-50 text-neutral-900',
+    100: 'bg-neutral-100 text-neutral-900',
+    200: 'bg-neutral-200 text-neutral-900',
+    300: 'bg-neutral-300 text-neutral-900',
+    400: 'bg-neutral-400 text-neutral-900',
+    500: 'bg-neutral-500 text-neutral-50',
+    600: 'bg-neutral-600 text-neutral-50',
+    700: 'bg-neutral-700 text-neutral-50',
+    800: 'bg-neutral-800 text-neutral-50',
+    900: 'bg-neutral-900 text-neutral-50',
+  },
+  primary: {
+    50:  'bg-primary-50 text-primary-900',
+    100: 'bg-primary-100 text-primary-900',
+    200: 'bg-primary-200 text-primary-900',
+    300: 'bg-primary-300 text-primary-900',
+    400: 'bg-primary-400 text-primary-900',
+    500: 'bg-primary-500 text-primary-50',
+    600: 'bg-primary-600 text-primary-50',
+    700: 'bg-primary-700 text-primary-50',
+    800: 'bg-primary-800 text-primary-50',
+    900: 'bg-primary-900 text-primary-50',
+  },
+  secondary: {
+    50:  'bg-secondary-50 text-secondary-900',
+    100: 'bg-secondary-100 text-secondary-900',
+    200: 'bg-secondary-200 text-secondary-900',
+    300: 'bg-secondary-300 text-secondary-900',
+    400: 'bg-secondary-400 text-secondary-900',
+    500: 'bg-secondary-500 text-secondary-50',
+    600: 'bg-secondary-600 text-secondary-50',
+    700: 'bg-secondary-700 text-secondary-50',
+    800: 'bg-secondary-800 text-secondary-50',
+    900: 'bg-secondary-900 text-secondary-50',
+  },
+  success: {
+    50:  'bg-success-50 text-success-900',
+    100: 'bg-success-100 text-success-900',
+    200: 'bg-success-200 text-success-900',
+    300: 'bg-success-300 text-success-900',
+    400: 'bg-success-400 text-success-900',
+    500: 'bg-success-500 text-success-50',
+    600: 'bg-success-600 text-success-50',
+    700: 'bg-success-700 text-success-50',
+    800: 'bg-success-800 text-success-50',
+    900: 'bg-success-900 text-success-50',
+  },
+  warning: {
+    50:  'bg-warning-50 text-warning-900',
+    100: 'bg-warning-100 text-warning-900',
+    200: 'bg-warning-200 text-warning-900',
+    300: 'bg-warning-300 text-warning-900',
+    400: 'bg-warning-400 text-warning-900',
+    500: 'bg-warning-500 text-warning-50',
+    600: 'bg-warning-600 text-warning-50',
+    700: 'bg-warning-700 text-warning-50',
+    800: 'bg-warning-800 text-warning-50',
+    900: 'bg-warning-900 text-warning-50',
+  },
+  danger: {
+    50:  'bg-danger-50 text-danger-900',
+    100: 'bg-danger-100 text-danger-900',
+    200: 'bg-danger-200 text-danger-900',
+    300: 'bg-danger-300 text-danger-900',
+    400: 'bg-danger-400 text-danger-900',
+    500: 'bg-danger-500 text-danger-50',
+    600: 'bg-danger-600 text-danger-50',
+    700: 'bg-danger-700 text-danger-50',
+    800: 'bg-danger-800 text-danger-50',
+    900: 'bg-danger-900 text-danger-50',
+  },
+  info: {
+    50:  'bg-info-50 text-info-900',
+    100: 'bg-info-100 text-info-900',
+    200: 'bg-info-200 text-info-900',
+    300: 'bg-info-300 text-info-900',
+    400: 'bg-info-400 text-info-900',
+    500: 'bg-info-500 text-info-50',
+    600: 'bg-info-600 text-info-50',
+    700: 'bg-info-700 text-info-50',
+    800: 'bg-info-800 text-info-50',
+    900: 'bg-info-900 text-info-50',
+  },
+};