Richie
d915443b8c
Token foundation: fix 16 palette colours to match official ADS_COLORS, add 5 new palettes (teal, brown, purple, fuchsia, yellow), realign semantic tokens (primary=navy, info=bright blue), fix border radii to 8px base, add responsive heading typography. Component migration: swap primary/info references across all existing components, update Button (44px/semibold), Switch (green/compact), Chip (30px/8px radius + colour variants), SideNav (80px rail), Tag (11 colours). New components: SideNav, TopBar, Avatar, Tabs, PageHeader, Slider, RangeSlider, FileInput, DataTable, List, Autocomplete. Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>
62 lines
1.6 KiB
TypeScript
62 lines
1.6 KiB
TypeScript
import type { HTMLAttributes, ReactNode } from 'react'
|
|
import { cn } from '@/lib/utils'
|
|
|
|
export interface BadgeProps extends HTMLAttributes<HTMLSpanElement> {
|
|
variant?:
|
|
| 'navy'
|
|
| 'info'
|
|
| 'info-light'
|
|
| 'success'
|
|
| 'success-light'
|
|
| 'error'
|
|
| 'error-light'
|
|
| 'warning'
|
|
| 'warning-light'
|
|
| 'neutral'
|
|
| 'white'
|
|
leftIcon?: ReactNode
|
|
rightIcon?: ReactNode
|
|
}
|
|
|
|
const variantStyles: Record<string, string> = {
|
|
navy: 'bg-badge-navy text-white',
|
|
info: 'bg-badge-info text-white',
|
|
'info-light': 'bg-badge-info-light text-primary',
|
|
success: 'bg-badge-success text-white',
|
|
'success-light': 'bg-badge-success-light text-badge-on-success-light',
|
|
error: 'bg-badge-error text-white',
|
|
'error-light': 'bg-badge-error-light text-badge-on-error-light',
|
|
warning: 'bg-badge-warning text-white',
|
|
'warning-light': 'bg-badge-warning-light text-badge-on-warning-light',
|
|
neutral: 'bg-badge-neutral text-text-secondary',
|
|
white: 'bg-surface text-primary border border-primary',
|
|
}
|
|
|
|
export function Badge({
|
|
variant = 'info',
|
|
leftIcon,
|
|
rightIcon,
|
|
className,
|
|
children,
|
|
...props
|
|
}: BadgeProps) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
'inline-flex h-[30px] items-center gap-1 rounded-lg px-3 text-small font-bold leading-[19px]',
|
|
variantStyles[variant],
|
|
className,
|
|
)}
|
|
{...props}
|
|
>
|
|
{leftIcon && (
|
|
<span className="shrink-0 [&>svg]:size-full size-[18px]">{leftIcon}</span>
|
|
)}
|
|
{children}
|
|
{rightIcon && (
|
|
<span className="shrink-0 [&>svg]:size-full size-[18px]">{rightIcon}</span>
|
|
)}
|
|
</span>
|
|
)
|
|
}
|