37 lines
900 B
TypeScript
37 lines
900 B
TypeScript
import type { ElementType, ReactNode } from 'react';
|
|
|
|
type ChipVariant = 'solid' | 'outlined';
|
|
type ChipTone = 'neutral' | 'indigo' | 'cyan';
|
|
|
|
type ChipProps<T extends ElementType> = {
|
|
variant?: ChipVariant;
|
|
tone?: ChipTone;
|
|
as?: T;
|
|
className?: string;
|
|
children: ReactNode;
|
|
};
|
|
|
|
const variantClassMap: Record<ChipVariant, string> = {
|
|
solid: 'chip-solid',
|
|
outlined: 'chip-outlined'
|
|
};
|
|
|
|
const toneClassMap: Record<ChipTone, string> = {
|
|
neutral: 'chip-neutral',
|
|
indigo: 'chip-indigo',
|
|
cyan: 'chip-cyan'
|
|
};
|
|
|
|
export function Chip<T extends ElementType = 'span'>({
|
|
variant = 'solid',
|
|
tone = 'neutral',
|
|
as,
|
|
className = '',
|
|
children
|
|
}: Readonly<ChipProps<T>>) {
|
|
const Component = as ?? 'span' as ElementType;
|
|
const classes = `chip-root ${variantClassMap[variant]} ${toneClassMap[tone]} ${className}`.trim();
|
|
|
|
return <Component className={classes}>{children}</Component>;
|
|
}
|