Badge

import { defineConfig, type VariantProps } from 'cva';import { twMerge } from 'tailwind-merge';export const {  compose,  cva,  cx: cn,} = defineConfig({  hooks: {    onComplete: (className: string) => twMerge(className),  },});export type { VariantProps };

'use client';import { mergePropsN } from '@base-ui/react/merge-props';import { useRender } from '@base-ui/react/use-render';import { cva, type VariantProps } from '@/lib/utils';export const badgeVariants = cva({  base: 'inline-flex w-fit shrink-0 items-center justify-center gap-1 overflow-hidden whitespace-nowrap rounded-full border px-2 py-0.5 font-medium text-xs transition-[color,box-shadow] focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:pointer-events-none [&>svg]:size-3',  variants: {    variant: {      default: 'border-transparent bg-primary text-primary-foreground [a&]:hover:bg-primary/90',      secondary:        'border-transparent bg-secondary text-secondary-foreground [a&]:hover:bg-secondary/90',      destructive:        'border-transparent bg-destructive text-white focus-visible:ring-destructive/20 dark:bg-destructive/60 dark:focus-visible:ring-destructive/40 [a&]:hover:bg-destructive/90',      outline: 'text-foreground [a&]:hover:bg-accent [a&]:hover:text-accent-foreground',    },  },  defaultVariants: {    variant: 'default',  },});/** * A badge component that displays a small amount of information. * Renders a `<span>` element. * * Documentation: [Caprice UI Badge](https://caprice-ui.com/docs/components/badge) */export namespace Badge {  export type Props = useRender.ComponentProps<'span'> & VariantProps<typeof badgeVariants>;}export function Badge({ className, variant, render = <span />, ...props }: Badge.Props) {  const defaultProps: useRender.ElementProps<'span'> & { 'data-slot'?: string } = {    'data-slot': 'badge',    className: badgeVariants({ variant, className }),  };  return useRender({    render,    defaultTagName: 'span',    props: mergePropsN<'span'>([defaultProps, props]),  });}