{
  "$schema": "https://ui.shadcn.com/schema/registry-item.json",
  "name": "mc-badge",
  "title": "MicroClub Badge",
  "description": "A badge component for MicroClub UI",
  "dependencies": [
    "@base-ui/react"
  ],
  "files": [
    {
      "path": "registry/ui/mc-badge.tsx",
      "content": "import { mergeProps } from '@base-ui/react/merge-props';\nimport { useRender } from '@base-ui/react/use-render';\nimport { cva, type VariantProps } from 'class-variance-authority';\nimport type { ReactNode } from 'react';\nimport { cloneElement, isValidElement } from 'react';\n\nimport { cn } from '@/lib/utils';\n\nconst McBadgeVariants = cva(\n  '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',\n  {\n    variants: {\n      variant: {\n        default: 'bg-primary-foreground text-primary [a]:hover:bg-primary-foreground/80',\n        secondary: 'bg-secondary text-secondary-foreground [a]:hover:bg-secondary/80',\n        destructive:\n          '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',\n        outline: 'border-border text-foreground [a]:hover:bg-muted [a]:hover:text-muted-foreground',\n        ghost: 'hover:bg-muted hover:text-muted-foreground dark:hover:bg-muted/50',\n        leading: 'bg-accent-foreground text-accent',\n      },\n      size: {\n        sm: 'h-[22px] min-w-[47px] px-2 py-0.5 text-sm leading-[18px]',\n        md: 'h-[24px] min-w-[56px] px-[10px] py-0.5 text-sm leading-[20px]',\n        lg: 'h-[32px] min-w-[65px] px-3 py-1 text-sm leading-[24px]',\n        groupMd: 'h-[22px] min-w-[47px] px-2 py-0.5 text-sm leading-[18px]',\n        groupLg: 'h-[28px] min-w-[56px] px-[10px] py-1 text-sm leading-[20px]',\n      },\n    },\n    defaultVariants: {\n      variant: 'default',\n      size: 'sm',\n    },\n  }\n);\n\nfunction McBadge({\n  className,\n  variant = 'default',\n  size = 'sm',\n  render,\n  icon,\n  iconPosition = 'start',\n  iconOnly = false,\n  image,\n  imageAlt = '',\n  imagePosition = 'start',\n  leadingBadge,\n  leadingBadgePosition = 'start',\n  leadingBadgeIcon,\n  groupSize = 'md',\n  children,\n  ...props\n}: useRender.ComponentProps<'span'> &\n  VariantProps<typeof McBadgeVariants> & {\n    icon?: ReactNode;\n    iconPosition?: 'start' | 'end';\n    iconOnly?: boolean;\n    image?: string;\n    imageAlt?: string;\n    imagePosition?: 'start' | 'end';\n    leadingBadge?: ReactNode;\n    leadingBadgePosition?: 'start' | 'end';\n    leadingBadgeIcon?: ReactNode;\n    groupSize?: 'md' | 'lg';\n  }) {\n  const groupSizeClasses = {\n    md: 'h-[30px] leading-[22px]',\n    lg: 'h-[36px] leading-[26px]',\n  } as const;\n  const groupChildSize = groupSize === 'md' ? 'groupMd' : 'groupLg';\n\n  const imageEl = image ? (\n    <img src={image} alt={imageAlt} className=\"size-4 shrink-0 rounded-full object-cover\" />\n  ) : null;\n\n  const useParentIcon = !leadingBadge || leadingBadgePosition === 'start';\n  const rawIcon = useParentIcon ? icon : undefined;\n  const parentIcon = rawIcon ? (\n    <span style={{ display: 'contents', pointerEvents: 'none' }}>\n      <span\n        style={{\n          width: 12,\n          height: 12,\n          display: 'inline-flex',\n          alignItems: 'center',\n          justifyContent: 'center',\n          flexShrink: 0,\n        }}\n      >\n        {rawIcon}\n      </span>\n    </span>\n  ) : undefined;\n\n  const parentIconPlacement = parentIcon\n    ? iconPosition === 'end'\n      ? 'inline-end'\n      : 'inline-start'\n    : undefined;\n\n  const contentWithIcon = parentIcon ? (\n    iconPosition === 'end' ? (\n      <>\n        {children}\n        {parentIcon}\n      </>\n    ) : (\n      <>\n        {parentIcon}\n        {children}\n      </>\n    )\n  ) : (\n    children\n  );\n\n  const content = imageEl ? (\n    imagePosition === 'end' ? (\n      <>\n        {contentWithIcon}\n        {imageEl}\n      </>\n    ) : (\n      <>\n        {imageEl}\n        {contentWithIcon}\n      </>\n    )\n  ) : (\n    contentWithIcon\n  );\n\n  const resolvedLeadingBadge = leadingBadge ? (\n    isValidElement(leadingBadge) ? (\n      cloneElement(leadingBadge as React.ReactElement<Record<string, unknown>>, {\n        size: groupChildSize,\n        variant: 'leading', // ← forcé\n        icon: leadingBadgePosition === 'end' ? leadingBadgeIcon : undefined,\n        iconPosition: 'end',\n      })\n    ) : (\n      <McBadge\n        size={groupChildSize}\n        variant=\"leading\" // ← forcé\n        icon={leadingBadgePosition === 'end' ? leadingBadgeIcon : undefined}\n        iconPosition=\"end\"\n      >\n        {leadingBadge}\n      </McBadge>\n    )\n  ) : null;\n\n  const groupedContent = resolvedLeadingBadge ? (\n    leadingBadgePosition === 'end' ? (\n      <div className=\"flex items-center gap-3\">\n        {content}\n        {resolvedLeadingBadge}\n      </div>\n    ) : (\n      <div className=\"flex items-center gap-3\">\n        {resolvedLeadingBadge}\n        {content}\n      </div>\n    )\n  ) : (\n    content\n  );\n\n  const dataIconProps = parentIconPlacement\n    ? ({ 'data-icon': parentIconPlacement } as Record<string, string>)\n    : undefined;\n\n  const iconOnlyClasses = iconOnly ? 'min-w-0 px-1.5' : undefined;\n\n  const imagePaddingClasses = image\n    ? imagePosition === 'start'\n      ? 'pl-[3px]'\n      : 'pr-[3px]'\n    : undefined;\n\n  const groupPaddingClasses = resolvedLeadingBadge\n    ? leadingBadgePosition === 'start'\n      ? 'pl-1 pr-[10px]'\n      : 'pl-[10px] pr-1'\n    : undefined;\n\n  return useRender({\n    defaultTagName: 'span',\n    props: mergeProps<'span'>(\n      {\n        className: cn(\n          McBadgeVariants({ variant, size }),\n          leadingBadge ? groupSizeClasses[groupSize] : undefined,\n          iconOnlyClasses,\n          imagePaddingClasses,\n          groupPaddingClasses,\n          className\n        ),\n        ...(dataIconProps ?? {}),\n        children: groupedContent,\n      },\n      props\n    ),\n    render,\n    state: {\n      slot: 'badge',\n      variant,\n      size,\n    },\n  });\n}\n\nexport { McBadge, McBadgeVariants };\n",
      "type": "registry:component"
    }
  ],
  "type": "registry:component"
}