Create Link typography component

Author: buberdds

src/components/link/index.tsx

@@ -0,0 +1,37 @@
+import * as React from 'react'
+import { Slot } from '@radix-ui/react-slot'
+import { cva, type VariantProps } from 'class-variance-authority'
+
+import { cn } from '../../lib/utils'
+
+const linkVariants = cva(
+  'text-primary text-inherit leading-tight inline-flex items-center transition-colors hover:text-primary/80 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
+  {
+    variants: {
+      variant: {
+        default: '',
+        underline: 'underline underline-offset-4',
+        hover: 'hover:underline hover:underline-offset-4',
+      },
+    },
+    defaultVariants: {
+      variant: 'default',
+    },
+  }
+)
+
+export interface LinkProps
+  extends React.AnchorHTMLAttributes<HTMLAnchorElement>,
+    VariantProps<typeof linkVariants> {
+  asChild?: boolean
+}
+
+const Link = React.forwardRef<HTMLAnchorElement, LinkProps>(
+  ({ className, variant, asChild = false, ...props }, ref) => {
+    const Comp = asChild ? Slot : 'a'
+    return <Comp className={cn(linkVariants({ variant, className }))} ref={ref} {...props} />
+  }
+)
+Link.displayName = 'Link'
+
+export { Link, linkVariants }

src/stories/Typography/Typography.stories.tsx

@@ -0,0 +1,32 @@
+import type { Meta, StoryObj } from '@storybook/react'
+import { Link } from '../../components/link'
+
+const meta = {
+  title: 'Typography/Link',
+  component: Link,
+  parameters: {
+    layout: 'centered',
+  },
+  tags: ['autodocs'],
+  argTypes: {
+    variant: {
+      control: 'select',
+      options: ['default', 'underline', 'hover'],
+      description: 'The visual style variant of the link',
+    },
+    asChild: {
+      control: 'boolean',
+      description: 'Pass true to render a custom component instead of an anchor tag',
+    },
+  },
+} satisfies Meta<typeof Link>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+export const Default: Story = {
+  args: {
+    children: 'Oasis Explorer',
+    href: '#',
+  },
+}