@loke/design-system
Version:
A design system with individually importable components
2 lines (1 loc) • 1.19 kB
JavaScript
import{cn}from"@loke/design-system/cn";import{X}from"@loke/icons";import{cva}from"class-variance-authority";import{jsx,jsxs}from"react/jsx-runtime";var badgeVariants=cva("inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-hidden focus:ring-2 focus:ring-ring focus:ring-offset-2",{defaultVariants:{variant:"default"},variants:{removable:{false:"",true:"cursor-pointer pr-6 relative"},variant:{default:"border-transparent bg-primary text-primary-foreground hover:bg-brand-800 dark:hover:bg-brand-200",destructive:"border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",outline:"text-foreground",secondary:"border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80"}}});function Badge({className,variant,onRemove,...props}){if(onRemove)return jsxs("button",{className:cn(badgeVariants({removable:Boolean(onRemove),variant}),className),onClick:onRemove,type:"button",children:[jsx("div",{...props}),jsx(X,{className:"absolute top-1/2 right-1 size-3 -translate-y-1/2"})]});return jsx("div",{className:cn(badgeVariants({variant}),className),...props})}export{badgeVariants,Badge};