feat: create accordion plugin component (#33)

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

README.md

@@ -61,6 +61,56 @@ export default withShurikenUI({
   theme: {
     extend: {
       shurikenUi: {
+        accordion: {
+          size: 'full',
+          border: 'muted-200',
+          borderDark: 'muted-700',
+          bg: 'white',
+          bgDark: 'muted-800',
+          detail: {
+            border: 'muted-200',
+            borderDark: 'muted-700',
+          },
+          detailAndDot: {
+            bg: 'muted-200',
+            bgDark: 'muted-700',
+          },
+          detailOpenAndDot: {
+            bg: 'primary-500',
+          },
+          dot: {
+            size: '3',
+            rounded: 'full',
+            duration: '300',
+          },
+          outer: {
+            border: 'muted-200',
+            borderDark: 'muted-700',
+            bg: 'white',
+            bgDark: 'muted-700/60',
+            size: '8',
+            rounded: 'full',
+            duration: '300',
+          },
+          chevronIcon: {
+            size: '4',
+            duration: '300',
+          },
+          plusIcon: {
+            size: '4',
+            duration: '300',
+          },
+          content: {
+            space: '5',
+            font: 'sans',
+            text: 'muted-500',
+            textDark: 'muted-400',
+          },
+          rounded: {
+            default: 'md',
+            smooth: 'lg',
+            curved: 'xl',
+          }
         dropdown: {
           textPosition: 'start',
           contextButton: {

src/plugins/components/accordion.ts

@@ -0,0 +1,165 @@
+import plugin from 'tailwindcss/plugin'
+import { defu } from 'defu'
+import { type PluginOption, defaultPluginOptions } from '../options'
+
+const defaultAccordionConfig = {
+  size: 'full',
+  border: 'muted-200',
+  borderDark: 'muted-700',
+  bg: 'white',
+  bgDark: 'muted-800',
+  detail: {
+    border: 'muted-200',
+    borderDark: 'muted-700',
+  },
+  detailAndDot: {
+    bg: 'muted-200',
+    bgDark: 'muted-700',
+  },
+  detailOpenAndDot: {
+    bg: 'primary-500',
+  },
+  dot: {
+    size: '3',
+    rounded: 'full',
+    duration: '300',
+  },
+  outer: {
+    border: 'muted-200',
+    borderDark: 'muted-700',
+    bg: 'white',
+    bgDark: 'muted-700/60',
+    size: '8',
+    rounded: 'full',
+    duration: '300',
+  },
+  chevronIcon: {
+    size: '4',
+    duration: '300',
+  },
+  plusIcon: {
+    size: '4',
+    duration: '300',
+  },
+  content: {
+    space: '5',
+    font: 'sans',
+    text: 'muted-500',
+    textDark: 'muted-400',
+  },
+  rounded: {
+    default: 'md',
+    smooth: 'lg',
+    curved: 'xl',
+  },
+}
+
+export default plugin.withOptions(
+  function (options: PluginOption) {
+    const { prefix } = defu(options, defaultPluginOptions)
+
+    return function ({ addComponents, theme }) {
+      const config = theme(
+        'shurikenUi.accordion'
+      ) satisfies typeof defaultAccordionConfig
+
+      addComponents({
+        [`.${prefix}-accordion`]: {
+          [`@apply w-${config.size} border-${config.border} dark:border-${config.borderDark} dark:bg-${config.bgDark} block overflow-hidden border bg-${config.bg}`]:
+            {},
+
+          [`.${prefix}-accordion-detail[open]:not(:first-child)`]: {
+            [`@apply border-${config.detail.border} dark:border-${config.detail.borderDark} border-t`]:
+              {},
+          },
+          [`.${prefix}-accordion-detail .${prefix}-accordion-dot`]: {
+            [`@apply bg-${config.detailAndDot.bg} dark:bg-${config.detailAndDot.bgDark}`]:
+              {},
+          },
+          [`.${prefix}-accordion-detail[open] .${prefix}-accordion-dot`]: {
+            [`@apply bg-${config.detailOpenAndDot.bg}`]: {},
+          },
+          [`.${prefix}-accordion-summary`]: {
+            [`@apply cursor-pointer list-none outline-none`]: {},
+          },
+          [`.${prefix}-accordion-header`]: {
+            [`@apply flex items-center justify-between`]: {},
+          },
+          [`.${prefix}-accordion-dot`]: {
+            [`@apply ms-2 h-${config.dot.size} w-${config.dot.size} rounded-${config.dot.rounded} transition-colors duration-${config.dot.duration}`]:
+              {},
+          },
+          [`.${prefix}-icon-outer`]: {
+            [`@apply border-${config.outer.border} dark:border-${config.outer.borderDark} dark:bg-${config.outer.bgDark} ms-2 flex h-${config.outer.size} w-${config.outer.size} items-center justify-center rounded-${config.outer.rounded} border bg-${config.outer.bg} transition-all duration-${config.outer.duration}`]:
+              {},
+          },
+          [`.${prefix}-chevron-icon`]: {
+            [`@apply h-${config.chevronIcon.size} w-${config.chevronIcon.size} transition-transform duration-${config.chevronIcon.duration}`]:
+              {},
+          },
+          [`.${prefix}-plus-icon`]: {
+            [`@apply h-${config.plusIcon.size} w-${config.plusIcon.size} transition-transform duration-${config.plusIcon.duration}`]:
+              {},
+          },
+          [`.${prefix}-accordion-content`]: {
+            [`@apply px-${config.content.space} pb-${config.content.space} font-${config.content.font} text-${config.content.text} dark:text-${config.content.textDark}`]:
+              {},
+          },
+          [`&.${prefix}-accordion-dot`]: {
+            [`.${prefix}-accordion-header`]: {
+              [`@apply p-5`]: {},
+            },
+          },
+          [`&.${prefix}-accordion-chevron, &.${prefix}-accordion-plus`]: {
+            [`.${prefix}-accordion-header`]: {
+              [`@apply px-5 py-3`]: {},
+            },
+          },
+          [`&.${prefix}-accordion-chevron`]: {
+            [`.${prefix}-accordion-detail[open] .${prefix}-icon-outer`]: {
+              [`@apply rotate-180`]: {},
+            },
+          },
+          [`&.${prefix}-accordion-plus`]: {
+            [`.${prefix}-accordion-detail[open] .${prefix}-icon-outer`]: {
+              [`@apply rotate-45`]: {},
+            },
+          },
+          [`&.${prefix}-accordion-rounded`]: {
+            [`&.${prefix}-accordion:first-child`]: {
+              [`@apply rounded-t-${config.rounded.default}`]: {},
+            },
+            [`&.${prefix}-accordion:last-child`]: {
+              [`@apply rounded-b-${config.rounded.default}`]: {},
+            },
+          },
+          [`&.${prefix}-accordion-smooth`]: {
+            [`&.${prefix}-accordion:first-child`]: {
+              [`@apply rounded-t-${config.rounded.smooth}`]: {},
+            },
+            [`&.${prefix}-accordion:last-child`]: {
+              [`@apply rounded-b-${config.rounded.smooth}`]: {},
+            },
+          },
+          [`&.${prefix}-accordion-curved`]: {
+            [`&.${prefix}-accordion:first-child`]: {
+              [`@apply rounded-t-${config.rounded.curved}`]: {},
+            },
+            [`&.${prefix}-accordion:last-child`]: {
+              [`@apply rounded-b-${config.rounded.curved}`]: {},
+            },
+          },
+        },
+      })
+    }
+  },
+  function () {
+    return {
+      theme: {
+        shurikenUi: {
+          accordion: defaultAccordionConfig,
+        },
+      },
+    }
+  }
+)

src/plugins/components/index.ts

@@ -1,6 +1,7 @@
 import plugin from 'tailwindcss/plugin'
 import { defu } from 'defu'
 import { type PluginOption } from '../options'
+import accordion from './accordion'
 import card from './card'
 import avatarGroup from './avatar-group'
 import autocomplete from './autocomplete'
@@ -47,6 +48,7 @@ import tag from './tag'
 import breadcrumb from './breadcrumb'
 
 const components = [
+  accordion,
   card,
   breadcrumb,
   avatarGroup,