link

1import { mergeProps } from '@base-ui/react/merge-props';
2import { useRender } from '@base-ui/react/use-render';
3import { cva, type VariantProps } from 'class-variance-authority';
4 
5import { cn } from '@/registry/lib/utils';
6 
7type Theme = 'gray' | 'accent' | 'destructive' | (string & {});
8 
9const linkVariants = cva(
10  'decoration-1 decoration-secondary underline-offset-[calc(.025em+2px)] focus-visible:outline-2 focus-visible:outline-focus rounded-xs',
11  {
12    variants: {
13      underline: {
14        always: 'underline',
15        hover: 'no-underline hover:underline',
16        none: 'no-underline',
17      },
18      theme: {
19        gray: '',
20        accent: 'text-secondary',
21        destructive: 'text-secondary',
22      },
23    },
24    defaultVariants: {
25      underline: 'hover',
26      theme: 'gray',
27    },
28  }
29);
30 
31interface LinkProps
32  extends useRender.ComponentProps<'a'>, Omit<VariantProps<typeof linkVariants>, 'theme'> {
33  theme?: Theme;
34}
35 
36function Link({ className, underline, theme = 'gray', render, ...props }: LinkProps) {
37  return useRender({
38    defaultTagName: 'a',
39    props: mergeProps<'a'>(
40      {
41        className: cn(
42          linkVariants({ underline, theme: theme as 'gray' | 'accent' | 'destructive', className })
43        ),
44        ...({
45          'data-slot': 'link',
46          'data-theme': theme !== 'gray' ? theme : undefined,
47        } as React.HTMLAttributes<HTMLAnchorElement>),
48      },
49      props
50    ),
51    render,
52    state: { slot: 'link' },
53  });
54}
55 
56export { Link, linkVariants };