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 眉题
46 lines
1.1 KiB
TypeScript
46 lines
1.1 KiB
TypeScript
import { cn } from "@/lib/ui/variants";
|
||
|
||
export type MeterTone = "accent" | "success" | "warning" | "danger" | "info";
|
||
|
||
const meterTones: Record<MeterTone, string> = {
|
||
accent: "bg-cinnabar",
|
||
success: "bg-pass",
|
||
warning: "bg-overdue",
|
||
danger: "bg-conflict",
|
||
info: "bg-info",
|
||
};
|
||
|
||
interface MeterProps {
|
||
/** 0..1，超出范围自动夹取。 */
|
||
value: number;
|
||
tone?: MeterTone;
|
||
label?: string;
|
||
className?: string;
|
||
}
|
||
|
||
// 进度条：语义色填充，宽度过渡走动效 token；对读屏暴露 progressbar。
|
||
export function Meter({ value, tone = "accent", label, className }: MeterProps) {
|
||
const pct = Math.max(0, Math.min(1, value)) * 100;
|
||
return (
|
||
<div
|
||
className={cn(
|
||
"h-1.5 w-full overflow-hidden rounded-full bg-line/60",
|
||
className,
|
||
)}
|
||
role="progressbar"
|
||
aria-valuenow={Math.round(pct)}
|
||
aria-valuemin={0}
|
||
aria-valuemax={100}
|
||
aria-label={label}
|
||
>
|
||
<div
|
||
className={cn(
|
||
"h-full rounded-full transition-[width] duration-base ease-standard",
|
||
meterTones[tone],
|
||
)}
|
||
style={{ width: `${pct}%` }}
|
||
/>
|
||
</div>
|
||
);
|
||
}
|