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.
65 lines
2.0 KiB
TypeScript
65 lines
2.0 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 alertVariants = cva(
|
|
'relative w-full rounded-lg p-4 [&>svg]:absolute [&>svg]:text-foreground [&>svg]:left-4 [&>svg]:top-4 [&>svg+div]:translate-y-[-3px] [&>svg~*]:pl-8',
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: 'bg-muted text-foreground [&_.alert-title]:text-foreground',
|
|
neutral:
|
|
'bg-gray-50 dark:bg-neutral-900/20 text-muted-foreground [&_.alert-title]:text-foreground',
|
|
secondary: 'bg-transparent ring-1 ring-border text-muted-foreground',
|
|
destructive: 'bg-red-50 text-red-700 [&_.alert-title]:text-red-800 [&>svg]:text-red-400',
|
|
warning: 'bg-muted ring-1 ring-foreground/30 text-foreground',
|
|
},
|
|
padding: {
|
|
tighter: 'p-2',
|
|
tight: 'px-4 py-2',
|
|
default: 'p-4',
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: 'default',
|
|
padding: 'default',
|
|
},
|
|
},
|
|
);
|
|
|
|
const Alert = React.forwardRef<
|
|
HTMLDivElement,
|
|
React.HTMLAttributes<HTMLDivElement> & VariantProps<typeof alertVariants>
|
|
>(({ className, variant, padding, ...props }, ref) => (
|
|
<div
|
|
ref={ref}
|
|
role="alert"
|
|
className={cn('space-y-2', alertVariants({ variant, padding }), className)}
|
|
{...props}
|
|
/>
|
|
));
|
|
|
|
Alert.displayName = 'Alert';
|
|
|
|
const AlertTitle = React.forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLHeadingElement>>(
|
|
({ className, ...props }, ref) => (
|
|
<h5 ref={ref} className={cn('alert-title text-base font-medium', className)} {...props} />
|
|
),
|
|
);
|
|
|
|
AlertTitle.displayName = 'AlertTitle';
|
|
|
|
const AlertDescription = React.forwardRef<
|
|
HTMLParagraphElement,
|
|
React.HTMLAttributes<HTMLParagraphElement>
|
|
>(({ className, ...props }, ref) => (
|
|
<div ref={ref} className={cn('text-sm', className)} {...props} />
|
|
));
|
|
|
|
AlertDescription.displayName = 'AlertDescription';
|
|
|
|
export { Alert, AlertTitle, AlertDescription };
|