mirror of
https://github.com/hanzoai/sign.git
synced 2026-10-21 01:21:51 +00:00
zooqueen
f31a87bf93
State now reads through shape, weight and tone rather than hue: the active editor step and selected file carry a filled mark and heavier label, recipients are told apart by six neutral tones, and status icons lean on the clock/check/file glyphs they already draw. Red stays as the one accent, reserved for destructive and rejected. Drops the unreferenced --new-* ramps and the dawn/water scales, points the stock Tailwind ring at --ring, and desaturates the sign scale so the PDF certificate, audit log and email templates match the app.
44 lines
1.3 KiB
TypeScript
44 lines
1.3 KiB
TypeScript
import * as React from 'react';
|
|
|
|
import type { VariantProps } from 'class-variance-authority';
|
|
import { cva } from 'class-variance-authority';
|
|
|
|
import { cn } from '../lib/utils';
|
|
|
|
const badgeVariants = cva(
|
|
'inline-flex items-center rounded-md text-xs font-medium ring-1 ring-inset w-fit',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
neutral: 'bg-muted text-muted-foreground ring-border',
|
|
destructive:
|
|
'bg-red-50 text-red-700 ring-red-600/10 dark:bg-red-400/10 dark:text-red-400 dark:ring-red-400/20',
|
|
warning: 'bg-muted text-foreground ring-foreground/30',
|
|
default: 'bg-muted text-foreground ring-border',
|
|
secondary: 'bg-transparent text-muted-foreground ring-border',
|
|
},
|
|
size: {
|
|
small: 'px-1.5 py-0.5 text-xs',
|
|
default: 'px-2 py-1.5 text-xs',
|
|
large: 'px-3 py-2 text-sm',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
size: 'default',
|
|
},
|
|
},
|
|
);
|
|
|
|
export interface BadgeProps
|
|
extends React.HTMLAttributes<HTMLDivElement>,
|
|
VariantProps<typeof badgeVariants> {}
|
|
|
|
function Badge({ className, variant, size, ...props }: BadgeProps) {
|
|
return (
|
|
<div role="status" className={cn(badgeVariants({ variant, size }), className)} {...props} />
|
|
);
|
|
}
|
|
|
|
export { Badge, badgeVariants };
|