feat: create list plugin component (#23)

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

README.md

@@ -1486,6 +1486,21 @@ export default withShurikenUI({
           text: 'muted-400',
           textDark: 'muted-400/80',
         },
+        list: {
+          ul: 'disc',
+          ol: 'decimal',
+          base: {
+            list: 'disc',
+            textMarker: 'muted-500',
+            textMarkerDark: 'muted-400',
+            text: 'slate-700',
+            textDark: 'slate-300',
+            font: 'sans',
+          },
+          media: {
+            textMarker: 'slate-500',
+            textMarkerDark: 'slate-400',
+          }
         link: {
           font: 'sans',
           textHover: 'primary-500',

src/plugins/components/index.ts

@@ -19,6 +19,7 @@ import heading from './heading'
 import input from './input'
 import inputFileRegular from './input-file-regular'
 import label from './label'
+import list from './list'
 import link from './link'
 import listbox from './listbox'
 import mark from './mark'
@@ -60,6 +61,7 @@ const components = [
   input,
   inputFileRegular,
   label,
+  list,
   link,
   listbox,
   mark,

src/plugins/components/list.ts

@@ -0,0 +1,61 @@
+import plugin from 'tailwindcss/plugin'
+import { defu } from 'defu'
+import { type PluginOption, defaultPluginOptions } from '../options'
+
+const defaultlistConfig = {
+  ul: 'disc',
+  ol: 'decimal',
+  base: {
+    list: 'disc',
+    textMarker: 'muted-500',
+    textMarkerDark: 'muted-400',
+    text: 'slate-700',
+    textDark: 'slate-300',
+    font: 'sans',
+  },
+  media: {
+    textMarker: 'slate-500',
+    textMarkerDark: 'slate-400',
+  },
+}
+
+export default plugin.withOptions(
+  function (options: PluginOption) {
+    const { prefix } = defu(options, defaultPluginOptions)
+
+    return function ({ addComponents, theme }) {
+      const config = theme('shurikenUi.list') satisfies typeof defaultlistConfig
+
+      addComponents({
+        [`.${prefix}-list`]: {
+          [`&.${prefix}-list-ul`]: {
+            [`@apply list-${config.ul}`]: {},
+          },
+          [`&.${prefix}-list-ol`]: {
+            [`@apply list-${config.ol}`]: {},
+          },
+          [`&.${prefix}-list-base`]: {
+            [`@apply list-${config.base.list} space-y-1 marker:text-${config.base.textMarker} dark:marker:text-${config.base.textMarkerDark} font-${config.base.font} text-${config.base.text} dark:text-${config.base.textDark}`]:
+              {},
+          },
+          [`&.${prefix}-list-media`]: {
+            [`@apply space-y-4 marker:text-${config.media.textMarker} dark:marker:text-${config.media.textMarkerDark}`]:
+              {},
+            [`.${prefix}-list-item`]: {
+              [`@apply flex gap-2`]: {},
+            },
+          },
+        },
+      })
+    }
+  },
+  function () {
+    return {
+      theme: {
+        shurikenUi: {
+          list: defaultlistConfig,
+        },
+      },
+    }
+  }
+)