Sergey Krylov
53659a36b1
- Inputs: TextField, Select, Checkbox - Surfaces: Surface, Card, Chip, Badge - Feedback: Alert, Dialog, Skeleton, Progress - Financial data: DataTable, Metric, Money, PriceChange - Form & page-state: FormField, FilterBar, EmptyState, ErrorState, LoadingState - MUI CssVarsProvider -> ThemeProvider deprecation fix - Inter font bundled via @fontsource/inter - ESLint no-restricted-imports (warn) for gradual migration - storybook-static gitignored All 268 tests pass (157 design-system + 111 frontend)
30 lines
727 B
TypeScript
30 lines
727 B
TypeScript
import { Chip as MuiChip } from '@mui/material';
|
|
import CancelIcon from '@mui/icons-material/Cancel';
|
|
|
|
type Tone = 'neutral' | 'info' | 'success' | 'warning' | 'error';
|
|
|
|
const TONE_MAP: Record<Tone, 'default' | 'info' | 'success' | 'warning' | 'error'> = {
|
|
neutral: 'default',
|
|
info: 'info',
|
|
success: 'success',
|
|
warning: 'warning',
|
|
error: 'error',
|
|
};
|
|
|
|
export interface ChipProps {
|
|
label: string;
|
|
tone?: Tone;
|
|
onDelete?: () => void;
|
|
}
|
|
|
|
export function Chip({ label, tone = 'neutral', onDelete }: ChipProps) {
|
|
return (
|
|
<MuiChip
|
|
label={label}
|
|
color={TONE_MAP[tone]}
|
|
onDelete={onDelete}
|
|
{...(onDelete ? { deleteIcon: <CancelIcon aria-label={`Remove ${label}`} /> } : {})}
|
|
/>
|
|
);
|
|
}
|