83ba47ab8f
- Card 新增 tone(panel/card/soft)/flat/interactive；cardClass 兼容旧字符串签名 - Button 新增 link(coral 文字链) 变体与 lg 尺寸 - 新增原子件 Eyebrow(统一眉题) / StatusDot(状态点·读屏可见) / Skeleton(motion-safe 占位) / Meter(进度条·progressbar) - PageHeader/SectionHeader 用 display/title 字阶 + Eyebrow 眉题
42 lines
949 B
TypeScript
42 lines
949 B
TypeScript
import { cn } from "@/lib/ui/variants";
|
|
|
|
export type StatusTone =
|
|
| "neutral"
|
|
| "accent"
|
|
| "success"
|
|
| "warning"
|
|
| "danger"
|
|
| "info";
|
|
|
|
const dotTones: Record<StatusTone, string> = {
|
|
neutral: "bg-ink-soft",
|
|
accent: "bg-cinnabar",
|
|
success: "bg-pass",
|
|
warning: "bg-overdue",
|
|
danger: "bg-conflict",
|
|
info: "bg-info",
|
|
};
|
|
|
|
interface StatusDotProps {
|
|
tone?: StatusTone;
|
|
/** 提供 label 时对读屏可见（不单靠颜色传达状态）。 */
|
|
label?: string;
|
|
className?: string;
|
|
}
|
|
|
|
// 状态点：语义色圆点，配合文案使用；有 label 时暴露给读屏。
|
|
export function StatusDot({ tone = "neutral", label, className }: StatusDotProps) {
|
|
return (
|
|
<span
|
|
className={cn(
|
|
"inline-block h-2 w-2 shrink-0 rounded-full",
|
|
dotTones[tone],
|
|
className,
|
|
)}
|
|
role={label ? "img" : undefined}
|
|
aria-label={label}
|
|
aria-hidden={label ? undefined : true}
|
|
/>
|
|
);
|
|
}
|