feat: create link plugin component (#15)

Co-authored-by: Sacha Stafyniak <sacha@digisquad.io>

README.md

@@ -1256,6 +1256,12 @@ export default withShurikenUI({
           text: 'muted-400',
           textDark: 'muted-400/80',
         },
+        link: {
+          font: 'sans',
+          textHover: 'primary-500',
+          textHoverDark: 'primary-400',
+          textFocus: 'primary-500',
+          textFocusDark: 'primary-400',
         listbox: {  
           labelFloat: {
             text: 'primary-500',

src/plugins/components/index.ts

@@ -15,6 +15,7 @@ import focus from './focus'
 import input from './input'
 import inputFileRegular from './input-file-regular'
 import label from './label'
+import link from './link'
 import listbox from './listbox'
 import mark from './mark'
 import mask from './mask'
@@ -46,6 +47,7 @@ const components = [
   input,
   inputFileRegular,
   label,
+  link,
   listbox,
   mark,
   mask,

src/plugins/components/link.ts

@@ -0,0 +1,37 @@
+import plugin from 'tailwindcss/plugin'
+import { defu } from 'defu'
+import { type PluginOption, defaultPluginOptions } from '../options'
+
+const defaultLinkConfig = {
+  font: 'sans',
+  textHover: 'primary-500',
+  textHoverDark: 'primary-400',
+  textFocus: 'primary-500',
+  textFocusDark: 'primary-400',
+}
+
+export default plugin.withOptions(
+  function (options: PluginOption) {
+    const { prefix } = defu(options, defaultPluginOptions)
+
+    return function ({ addComponents, theme }) {
+      const config = theme('shurikenUi.link') satisfies typeof defaultLinkConfig
+
+      addComponents({
+        [`.${prefix}-link`]: {
+          [`@apply font-${config.font} hover:text-${config.textHover} dark:hover:text-${config.textHoverDark} underline-offset-4 hover:underline focus:text-${config.textFocus} dark:focus:text-${config.textFocusDark} focus:underline`]:
+            {},
+        },
+      })
+    }
+  },
+  function () {
+    return {
+      theme: {
+        shurikenUi: {
+          link: defaultLinkConfig,
+        },
+      },
+    }
+  }
+)