1const button = tv(
2  {
3    base: 'font-semibold text-white py-1 px-3 rounded-full active:opacity-80',
4    variants: {
5      color: {
6        primary: 'bg-blue-500 hover:bg-blue-700',
7        secondary: 'bg-purple-500 hover:bg-purple-700',
8      },
9    },
10  },
11  {
12    responsiveVariants: ['xs', 'sm', 'md'],
13  }
14);
15

1const card = tv({
2  slots: {
3    base: 'flex flex-col',
4    header: 'bg-gray-100 p-4',
5    body: 'p-4',
6    footer: 'bg-gray-100 p-4',
7  },
8});
9

1const pagination = tv({
2  slots: {
3    base: 'flex gap-1',
4    item: 'p-2',
5    prev: 'p-2',
6    next: 'p-2',
7  },
8  compoundSlots: [
9    {
10      slots: ['item', 'prev', 'next'],
11      class: 'bg-gray-200 hover:bg-gray-300',
12    },
13  ],
14});
15

1import { cva } from 'class-variance-authority';const button = cva('font-semibold rounded', {
2  variants: {
3    color: {
4      primary: 'bg-blue-500 text-white',
5      secondary: 'bg-purple-500 text-white',
6    },
7    size: {
8      sm: 'text-sm px-2',
9      md: 'text-md px-4',
10      lg: 'text-lg px-6',
11    },
12  },
13  defaultVariants: {
14    color: 'primary',
15    size: 'md',
16  },
17});
18