45 lines
1.7 KiB
TypeScript
45 lines
1.7 KiB
TypeScript
import { cva } from "../lib/cva";
|
|
import { getMotionRecipeClassNames } from "../lib/motion";
|
|
|
|
export const alertVariants = cva(
|
|
[
|
|
"relative grid gap-x-3 gap-y-1 rounded-[var(--ui-card-radius)] border p-4 shadow-[var(--ui-card-subtle-shadow)] [border-width:var(--ui-card-border-width)]",
|
|
"text-[var(--color-foreground)]",
|
|
getMotionRecipeClassNames("transition", "ring")
|
|
],
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default:
|
|
"border-[var(--ui-card-default-border)] bg-[var(--ui-card-default-bg)]",
|
|
success:
|
|
"border-[color-mix(in_oklch,var(--color-success)_34%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-success)_10%,var(--ui-card-default-bg))]",
|
|
warning:
|
|
"border-[color-mix(in_oklch,var(--color-warning)_34%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-warning)_12%,var(--ui-card-default-bg))]",
|
|
destructive:
|
|
"border-[color-mix(in_oklch,var(--color-destructive)_38%,var(--ui-card-default-border))] bg-[color-mix(in_oklch,var(--color-destructive)_10%,var(--ui-card-default-bg))]"
|
|
},
|
|
hasIcon: {
|
|
false: "",
|
|
true: "grid-cols-[auto_1fr]"
|
|
}
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
hasIcon: false
|
|
}
|
|
}
|
|
);
|
|
|
|
export const alertIconVariants = cva(
|
|
"row-span-2 mt-0.5 inline-flex size-5 items-center justify-center rounded-[var(--radius-full)] text-[var(--color-muted-foreground)]"
|
|
);
|
|
|
|
export const alertTitleVariants = cva(
|
|
"text-sm font-semibold tracking-[var(--tracking-tight)] text-[var(--color-foreground)]"
|
|
);
|
|
|
|
export const alertDescriptionVariants = cva(
|
|
"text-sm leading-6 text-[var(--color-muted-foreground)]"
|
|
);
|