MicroClub Badge

1import { mergeProps } from '@base-ui/react/merge-props';
2import { useRender } from '@base-ui/react/use-render';
3import { cva, type VariantProps } from 'class-variance-authority';
4import type { ReactNode } from 'react';
5import { cloneElement, isValidElement } from 'react';
6 
7import { cn } from '@/lib/utils';
8 
9const McBadgeVariants = cva(
10  'group/badge inline-flex shrink-0 items-center justify-center gap-1 overflow-hidden rounded-[16px] border border-[#E6E9FF] text-xs font-medium whitespace-nowrap transition-all focus-visible:border-ring focus-visible:ring-[3px] focus-visible:ring-ring/50 has-data-[icon=inline-end]:pr-1.5 has-data-[icon=inline-start]:pl-1.5 aria-invalid:border-destructive aria-invalid:ring-destructive/20 dark:aria-invalid:ring-destructive/40 [&>svg]:size-3 [&>svg]:shrink-0 [&>svg]:self-center',
11  {
12    variants: {
13      variant: {
14        default: 'bg-primary-foreground text-primary [a]:hover:bg-primary-foreground/80',
15        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',
16        destructive:
17          'bg-destructive/10 text-destructive focus-visible:ring-destructive/20 dark:bg-destructive/20 dark:focus-visible:ring-destructive/40 [a]:hover:bg-destructive/20',
18        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',
19        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',
20        leading: 'bg-accent-foreground text-accent',
21      },
22      size: {
23        sm: 'h-[22px] min-w-[47px] px-2 py-0.5 text-sm leading-[18px]',
24        md: 'h-[24px] min-w-[56px] px-[10px] py-0.5 text-sm leading-[20px]',
25        lg: 'h-[32px] min-w-[65px] px-3 py-1 text-sm leading-[24px]',
26        groupMd: 'h-[22px] min-w-[47px] px-2 py-0.5 text-sm leading-[18px]',
27        groupLg: 'h-[28px] min-w-[56px] px-[10px] py-1 text-sm leading-[20px]',
28      },
29    },
30    defaultVariants: {
31      variant: 'default',
32      size: 'sm',
33    },
34  }
35);
36 
37function McBadge({
38  className,
39  variant = 'default',
40  size = 'sm',
41  render,
42  icon,
43  iconPosition = 'start',
44  iconOnly = false,
45  image,
46  imageAlt = '',
47  imagePosition = 'start',
48  leadingBadge,
49  leadingBadgePosition = 'start',
50  leadingBadgeIcon,
51  groupSize = 'md',
52  children,
53  ...props
54}: useRender.ComponentProps<'span'> &
55  VariantProps<typeof McBadgeVariants> & {
56    icon?: ReactNode;
57    iconPosition?: 'start' | 'end';
58    iconOnly?: boolean;
59    image?: string;
60    imageAlt?: string;
61// … truncated