Tagline

1
import { mergeProps } from "@base-ui/react/merge-props";
2
import { useRender } from "@base-ui/react/use-render";
3
import { cva, type VariantProps } from "class-variance-authority";
4

5
import { cn } from "@/lib/utils";
6

7
const taglineVariants = cva(
8
  "inline-flex w-fit shrink-0 items-center justify-center gap-1 font-medium whitespace-nowrap [&_svg]:shrink-0 [&>svg]:pointer-events-none [&>svg]:size-3!",
9
  {
10
    variants: {
11
      variant: {
12
        default: "text-base text-foreground",
13
        primary:
14
          "pixel-rounded pixel-size-lg bg-primary px-[calc(var(--pixel-size-lg)+(--spacing(2)))] py-[calc(var(--pixel-size-lg)+(--spacing(0.5)))] text-xs text-primary-foreground [a&]:hover:bg-primary/80",
15
        secondary:
16
          "pixel-rounded pixel-size-lg bg-secondary px-[calc(var(--pixel-size-lg)+(--spacing(2)))] py-[calc(var(--pixel-size-lg)+(--spacing(0.5)))] text-xs text-secondary-foreground [a&]:hover:bg-secondary/80",
17
        badge:
18
          "pixel-border pixel-size-lg bg-background px-[calc(var(--pixel-size-lg)+(--spacing(2)))] py-[calc(var(--pixel-size-lg)+(--spacing(0.5)))] text-xs [a&]:hover:bg-muted [a&]:hover:text-muted-foreground",
19
        outline:
20
          "pixel-border pixel-size-lg bg-transparent px-[calc(var(--pixel-size-lg)+(--spacing(2)))] py-[calc(var(--pixel-size-lg)+(--spacing(0.5)))] text-xs [a&]:hover:bg-muted [a&]:hover:text-muted-foreground",
21
        ghost:
22
          "bg-transparent text-xs text-muted-foreground hover:bg-muted hover:text-muted-foreground",
23
      },
24
    },
25
    defaultVariants: {
26
      variant: "default",
27
    },
28
  },
29
);
30

31
function Tagline({
32
  children,
33
  className,
34
  render,
35
  variant,
36
  ...props
37
}: useRender.ComponentProps<"div"> & VariantProps<typeof taglineVariants>) {
38
  return useRender({
39
    defaultTagName: "div",
40
    render,
41
    props: mergeProps<"div">(
42
      {
43
        "data-slot": "tagline",
44
        "data-variant": variant,
45
        className: cn(taglineVariants({ variant }), className),
46
        children,
47
      },
48
      props,
49
    ),
50
  });
51
}
52

53
export { Tagline, taglineVariants };