feat: create text plugin component (#14)

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

README.md

@@ -2026,6 +2026,32 @@ export default withShurikenUI({
           bgHover: 'black/20',
           bgHoverDark: 'white/20',
         },
+        text: {
+          textXS: 'xs',
+          textSM: 'sm',
+          textMD: 'base',
+          textLG: 'lg',
+          textXL: 'xl',
+          text2XL: '2xl',
+          text3XL: '3xl',
+          text4XL: '4xl',
+          text5XL: '5xl',
+          text6XL: '6xl',
+          text7XL: '7xl',
+          text8XL: '8xl',
+          text9XL: '9xl',
+          textLight: 'light',
+          textNormal: 'normal',
+          textMedium: 'medium',
+          textSemibold: 'semibold',
+          textBold: 'bold',
+          textExtrabold: 'extrabold',
+          textLeadNone: 'none',
+          textLeadNormal: 'normal',
+          textLeadTight: 'tight',
+          textLeadSnug: 'snug',
+          textLeadLoose: 'loose',
+        },
         switchThin: {
         switchBall: {
           handle: {

src/plugins/components/index.ts

@@ -29,6 +29,7 @@ import select from './select'
 import radio from './radio'
 import progressCircle from './progress-circle'
 import slimscroll from './slimscroll'
+import text from './text'
 import switchThin from './switch-thin'
 import switchBall from './switch-ball'
 import textarea from './textarea'
@@ -64,6 +65,7 @@ const components = [
   radio,
   progressCircle,
   slimscroll,
+  text,
   switchThin,
   switchBall,
   snack,

src/plugins/components/text.ts

@@ -0,0 +1,128 @@
+import plugin from 'tailwindcss/plugin'
+import { defu } from 'defu'
+import { type PluginOption, defaultPluginOptions } from '../options'
+
+const defaultTextConfig = {
+  textXS: 'xs',
+  textSM: 'sm',
+  textMD: 'base',
+  textLG: 'lg',
+  textXL: 'xl',
+  text2XL: '2xl',
+  text3XL: '3xl',
+  text4XL: '4xl',
+  text5XL: '5xl',
+  text6XL: '6xl',
+  text7XL: '7xl',
+  text8XL: '8xl',
+  text9XL: '9xl',
+  textLight: 'light',
+  textNormal: 'normal',
+  textMedium: 'medium',
+  textSemibold: 'semibold',
+  textBold: 'bold',
+  textExtrabold: 'extrabold',
+  textLeadNone: 'none',
+  textLeadNormal: 'normal',
+  textLeadTight: 'tight',
+  textLeadSnug: 'snug',
+  textLeadLoose: 'loose',
+}
+
+export default plugin.withOptions(
+  function (options: PluginOption) {
+    const { prefix } = defu(options, defaultPluginOptions)
+
+    return function ({ addComponents, theme }) {
+      const config = theme('shurikenUi.text') satisfies typeof defaultTextConfig
+
+      addComponents({
+        [`.${prefix}-text`]: {
+          [`@apply font-sans`]: {},
+
+          [`&.${prefix}-content-xs`]: {
+            [`@apply text-${config.textXS}`]: {},
+          },
+          [`&.${prefix}-content-sm`]: {
+            [`@apply text-${config.textSM}`]: {},
+          },
+          [`&.${prefix}-content-md`]: {
+            [`@apply text-${config.textMD}`]: {},
+          },
+          [`&.${prefix}-content-lg`]: {
+            [`@apply text-${config.textLG}`]: {},
+          },
+          [`&.${prefix}-content-xl`]: {
+            [`@apply text-${config.textXL}`]: {},
+          },
+          [`&.${prefix}-content-2xl`]: {
+            [`@apply text-${config.text2XL}`]: {},
+          },
+          [`&.${prefix}-content-3xl`]: {
+            [`@apply text-${config.text3XL}`]: {},
+          },
+          [`&.${prefix}-content-4xl`]: {
+            [`@apply text-${config.text4XL}`]: {},
+          },
+          [`&.${prefix}-content-5xl`]: {
+            [`@apply text-${config.text5XL}`]: {},
+          },
+          [`&.${prefix}-content-6xl`]: {
+            [`@apply text-${config.text6XL}`]: {},
+          },
+          [`&.${prefix}-content-7xl`]: {
+            [`@apply text-${config.text7XL}`]: {},
+          },
+          [`&.${prefix}-content-8xl`]: {
+            [`@apply text-${config.text8XL}`]: {},
+          },
+          [`&.${prefix}-content-9xl`]: {
+            [`@apply text-${config.text9XL}`]: {},
+          },
+          [`&.${prefix}-weight-light`]: {
+            [`@apply font-${config.textLight}`]: {},
+          },
+          [`&.${prefix}-weight-normal`]: {
+            [`@apply font-${config.textNormal}`]: {},
+          },
+          [`&.${prefix}-weight-medium`]: {
+            [`@apply font-${config.textMedium}`]: {},
+          },
+          [`&.${prefix}-weight-semibold`]: {
+            [`@apply font-${config.textSemibold}`]: {},
+          },
+          [`&.${prefix}-weight-bold`]: {
+            [`@apply font-${config.textBold}`]: {},
+          },
+          [`&.${prefix}-weight-extrabold`]: {
+            [`@apply font-${config.textExtrabold}`]: {},
+          },
+          [`&.${prefix}-lead-none`]: {
+            [`@apply leading-${config.textLeadNone}`]: {},
+          },
+          [`&.${prefix}-lead-normal`]: {
+            [`@apply leading-${config.textLeadNormal}`]: {},
+          },
+          [`&.${prefix}-lead-tight`]: {
+            [`@apply leading-${config.textLeadTight}`]: {},
+          },
+          [`&.${prefix}-lead-snug`]: {
+            [`@apply leading-${config.textLeadSnug}`]: {},
+          },
+          [`&.${prefix}-lead-loose`]: {
+            [`@apply leading-${config.textLeadLoose}`]: {},
+          },
+        },
+      })
+    }
+  },
+  function () {
+    return {
+      theme: {
+        shurikenUi: {
+          text: defaultTextConfig,
+        },
+      },
+    }
+  }
+)