52 lines
1.8 KiB
JavaScript
52 lines
1.8 KiB
JavaScript
import * as React from "react"
|
|
import { cva } from "class-variance-authority";
|
|
|
|
import { cn } from "@/lib/utils"
|
|
|
|
/**
|
|
* Badge — a static label. For anything that communicates lifecycle or health,
|
|
* use `StatusBadge` from the design system instead: it maps domain states onto
|
|
* these tones so the same status never renders two different colours.
|
|
*/
|
|
const badgeVariants = cva(
|
|
"inline-flex items-center gap-1 border font-semibold whitespace-nowrap transition-colors duration-fast [&_svg]:size-3 [&_svg]:shrink-0",
|
|
{
|
|
variants: {
|
|
variant: {
|
|
default: "border-transparent bg-krow-blue text-white",
|
|
soft: "border-transparent bg-krow-blue-tint text-krow-blue",
|
|
accent: "border-transparent bg-krow-yellow text-krow-blue",
|
|
navy: "border-transparent bg-krow-navy text-white",
|
|
success: "border-transparent bg-success-muted text-success",
|
|
warning: "border-transparent bg-warning-muted text-warning",
|
|
destructive: "border-transparent bg-destructive-muted text-destructive",
|
|
info: "border-transparent bg-info-muted text-info",
|
|
neutral: "border-transparent bg-neutral-muted text-ink-3",
|
|
outline: "border-border bg-transparent text-ink-2",
|
|
},
|
|
size: {
|
|
sm: "h-[18px] px-1.5 text-[10px]",
|
|
default: "h-5 px-2 text-[11px]",
|
|
lg: "h-6 px-2.5 text-caption",
|
|
},
|
|
shape: {
|
|
pill: "rounded-full",
|
|
rounded: "rounded-md",
|
|
},
|
|
},
|
|
defaultVariants: {
|
|
variant: "default",
|
|
size: "default",
|
|
shape: "pill",
|
|
},
|
|
}
|
|
)
|
|
|
|
/** @type {React.ForwardRefExoticComponent<any>} */
|
|
const Badge = React.forwardRef(({ className, variant, size, shape, ...props }, ref) => (
|
|
<div ref={ref} className={cn(badgeVariants({ variant, size, shape }), className)} {...props} />
|
|
))
|
|
Badge.displayName = "Badge"
|
|
|
|
export { Badge, badgeVariants }
|