59 lines
1.8 KiB
TypeScript
59 lines
1.8 KiB
TypeScript
'use client';
|
|
|
|
import * as React from 'react';
|
|
import { Slot } from '@radix-ui/react-slot';
|
|
import { cva, type VariantProps } from 'class-variance-authority';
|
|
import { cn } from '@/lib/utils';
|
|
|
|
const badgeVariants = cva(
|
|
'inline-flex items-center justify-center rounded-sm border px-3 py-1 text-xs font-medium w-fit whitespace-nowrap shrink-0 [&>svg]:size-3 gap-1.5 [&>svg]:pointer-events-none focus-visible:border-ink focus-visible:ring-2 focus-visible:ring-ink/20 transition-all duration-fast ease-out',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: 'bg-brand text-white border-transparent',
|
|
secondary:
|
|
'bg-bg-secondary text-text-secondary border-border-primary',
|
|
outline:
|
|
'border-border-accent text-text-primary bg-transparent',
|
|
ghost: 'text-text-muted hover:text-text-primary hover:bg-bg-secondary',
|
|
/* 状态色 DEFAULT 仅 3.2-3.7:1，作文字不达 AA，故统一用 -text 变体 */
|
|
success: 'bg-success/10 text-success-text border-transparent',
|
|
warning: 'bg-warning/10 text-warning-text border-transparent',
|
|
error: 'bg-error/10 text-error border-transparent',
|
|
info: 'bg-info/10 text-info-text border-transparent',
|
|
},
|
|
size: {
|
|
sm: 'px-2 py-0.5 text-[10px]',
|
|
default: 'px-2.5 py-1 text-xs',
|
|
lg: 'px-3 py-1.5 text-sm',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
size: 'default',
|
|
},
|
|
}
|
|
);
|
|
|
|
function Badge({
|
|
className,
|
|
variant = 'default',
|
|
size,
|
|
asChild = false,
|
|
...props
|
|
}: React.ComponentProps<'span'> &
|
|
VariantProps<typeof badgeVariants> & { asChild?: boolean }) {
|
|
const Comp = asChild ? Slot : 'span';
|
|
|
|
return (
|
|
<Comp
|
|
data-slot="badge"
|
|
data-variant={variant}
|
|
className={cn(badgeVariants({ variant, size }), className)}
|
|
{...props}
|
|
/>
|
|
);
|
|
}
|
|
|
|
export { Badge, badgeVariants };
|