web-ui/src/components/Chip.tsx

import * as tailwindColors from 'tailwindcss/colors';
import type { CSSProperties, ElementType, ReactNode } from 'react';

type ChipVariant = 'solid' | 'outlined';

type ChipProps<T extends ElementType> = {
  variant?: ChipVariant;
  // Tailwind color token, e.g. "cyan-700", "indigo-500", "rose-600".
  tone?: string;
  as?: T;
  className?: string;
  children: ReactNode;
};

const variantClassMap: Record<ChipVariant, string> = {
  solid: 'chip-solid',
  outlined: 'chip-outlined'
};

type TailwindPalette = Record<string, string>;

function resolveTailwindToneColor(tone: string | undefined): string | null {
  const normalizedTone = tone?.trim().toLowerCase();
  if (normalizedTone == null || normalizedTone === '') {
    return null;
  }

  const colorSource = tailwindColors as unknown as Record<string, unknown>;
  const lastDashIndex = normalizedTone.lastIndexOf('-');

  if (lastDashIndex === -1) {
    const direct = colorSource[normalizedTone];
    return typeof direct === 'string' ? direct : null;
  }

  const colorName = normalizedTone.slice(0, lastDashIndex);
  const shade = normalizedTone.slice(lastDashIndex + 1);
  const palette = colorSource[colorName];

  if (palette == null || typeof palette !== 'object') {
    return null;
  }

  const shadeColor = (palette as TailwindPalette)[shade];
  return typeof shadeColor === 'string' ? shadeColor : null;
}

export function Chip<T extends ElementType = 'span'>({
  variant = 'solid',
  tone,
  as,
  className = '',
  children
}: Readonly<ChipProps<T>>) {
  const Component = as ?? 'span' as ElementType;
  const toneColor = resolveTailwindToneColor(tone);
  const toneStyle: CSSProperties | undefined = toneColor == null
    ? undefined
    : variant === 'solid'
      ? { borderColor: toneColor, backgroundColor: toneColor, color: '#ffffff' }
      : { borderColor: toneColor, color: toneColor };
  const classes = `chip-root ${variantClassMap[variant]} ${className}`.trim();

  return <Component className={classes} style={toneStyle}>{children}</Component>;
}