feat: link fully migrated to tv

packages/components/link/src/link-icon.tsx

@@ -1,5 +1,6 @@
 export const LinkIcon = () => (
   <svg
+    aria-hidden="true"
     className="flex mx-1 text-current self-center"
     fill="none"
     height="1em"

packages/components/link/src/use-link.ts

@@ -22,7 +22,7 @@ export interface Props extends HTMLNextUIProps<"a">, LinkVariantProps {
    * Whether the link is disabled.
    * @default false
    */
-  isDisabled?: boolean;
+  isDisabled?: LinkVariantProps["isDisabled"];
   /**
    * Whether to show the icon when the link is external.
    * @default false

packages/components/link/stories/link.stories.tsx

@@ -1,10 +1,9 @@
 import {ComponentStory, ComponentMeta} from "@storybook/react";
 import React from "react";
-// import {cva, linkVariants, type VariantProps, ExtendVariantProps} from "@nextui-org/theme";
+import {tv, type VariantProps} from "@nextui-org/theme";
 
 import {Link, LinkProps} from "../src";
 
-// const meta: Meta<typeof Link> = {
 export default {
   title: "Navigation/Link",
   component: Link,
@@ -29,8 +28,6 @@ export default {
   },
 } as ComponentMeta<typeof Link>;
 
-// type Story = StoryObj<LinkProps>;
-
 const text = `"First solve the problem. Then, write the code." - Jon Johnson.`;
 
 const Template: ComponentStory<typeof Link> = (args: LinkProps) => (
@@ -40,7 +37,6 @@ const Template: ComponentStory<typeof Link> = (args: LinkProps) => (
 );
 
 export const Default = Template.bind({});
-// More on args: https://storybook.js.org/docs/react/writing-stories/args
 Default.args = {
   isDisabled: false,
   color: "foreground",
@@ -90,30 +86,31 @@ isBlock.args = {
   color: "secondary",
 };
 
-// const customLink = cva(null, {
-//   variants: {
-//     color: {
-//       ...linkVariants.color,
-//       teal: "text-teal-600",
-//     },
-//     link: {
-//       true: "before:content-['👉'] before:mr-1",
-//     },
-//   },
-// });
+const customLink = tv({
+  variants: {
+    color: {
+      teal: "text-teal-600",
+    },
+    isLink: {
+      true: "before:content-['👉'] before:mr-1",
+    },
+  },
+});
 
-// type MyLinkProps = ExtendVariantProps<LinkProps, VariantProps<typeof customLink>>;
+type MyLinkVariantProps = VariantProps<typeof customLink>;
 
-// const MyLink = (props: MyLinkProps) => {
-//   const {link, color, ...otherProps} = props;
+type MyLinkProps = MyLinkVariantProps & Omit<LinkProps, "color">;
 
-//   return <Link {...otherProps} className={customLink({color, link})} isExternal={!!link} />;
-// };
+const MyLink = (props: MyLinkProps) => {
+  const {isLink, color, ...otherProps} = props;
 
-// export const CustomVariant = () => {
-//   return (
-//     <MyLink link color="teal" href="#">
-//       Visit out new Store
-//     </MyLink>
-//   );
-// };
+  return <Link className={customLink({color, isLink})} isExternal={!!isLink} {...otherProps} />;
+};
+
+export const CustomVariant = () => {
+  return (
+    <MyLink isLink color="teal" href="#">
+      Visit out new Store
+    </MyLink>
+  );
+};

packages/components/link/tsconfig.json

@@ -1,9 +1,4 @@
 {
   "extends": "../../../tsconfig.json",
-  "compilerOptions": {
-    "paths": {
-      "@stitches/react": ["../../../node_modules/@stitches/react"]
-    }
-  },
   "include": ["src", "index.ts"]
 }

packages/components/storybook/package.json

@@ -25,7 +25,7 @@
     "url": "https://github.com/nextui-org/nextui/issues"
   },
   "scripts": {
-    "storybook": "concurrently \"pnpm:watch:*\"",
+    "storybook": "concurrently \"pnpm watch:css\" \"pnpm watch:storybook\"",
     "build-storybook": "concurrently \"pnpm:build:*\"",
     "build:css": "npx tailwindcss -i ./.storybook/style.css -o ./public/tailwind.css",
     "build:storybook": "build-storybook build",

packages/components/storybook/tailwind.config.js

@@ -1,6 +1,6 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
-  content: ["../**/src/**/*.{js,jsx,ts,tsx}"],
+  content: ["../**/src/**/*.{js,jsx,ts,tsx}", "../**/stories/**/*.{js,jsx,ts,tsx}"],
   theme: {
     extend: {},
   },

packages/core/theme/src/components/link/index.ts

@@ -9,7 +9,7 @@ import {focusVisibleClasses} from "../../utils";
  * <a className={link({ color: "secondary", isBlock: true })} href="#" />
  */
 const link = tv({
-  base: focusVisibleClasses,
+  base: [...focusVisibleClasses, "relative inline-flex items-center [&_svg]:ml-1"],
   variants: {
     size: {
       xs: "text-xs",

packages/core/theme/src/index.ts

@@ -1,2 +1,3 @@
 export * from "./components";
 export * from "./utils";
+export * from "tailwind-variants";