Badge

import { cn as merge } from 'cn';
import type { VariantProps } from 'cva';
import { defineConfig } from 'cva/config';
import { getSchema } from 'cva/tools';

export const { cva, cx: cn } = defineConfig({
  cx: merge,
});

export type { VariantProps };
export { getSchema };

'use client';

import { mergeProps } 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: mergeProps<'span'>(defaultProps, props),
  });
}