From 1492a800ba0167a2e45b595ad6e111723d1d61be Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Wed, 6 Dec 2023 23:24:30 +0100
Subject: [PATCH] feat(Dropdown): config redesign and implementation

---
 .../components/dropdown/dropdown.component.ts |  14 +-
 .../components/dropdown/dropdown.config.ts    | 202 ++++++++++--------
 .../components/dropdown/dropdown.stories.ts   | 146 ++++++-------
 .../components/dropdown/dropdown.types.ts     |   4 +-
 .../components/dropdown/dropdown.variants.ts  |  12 +-
 src/plugins/components/dropdown/index.ts      | 135 ++++++++----
 6 files changed, 304 insertions(+), 209 deletions(-)

diff --git a/src/plugins/components/dropdown/dropdown.component.ts b/src/plugins/components/dropdown/dropdown.component.ts
index 1f14487..adc2c3c 100644
--- a/src/plugins/components/dropdown/dropdown.component.ts
+++ b/src/plugins/components/dropdown/dropdown.component.ts
@@ -13,8 +13,8 @@ export const Dropdown = ({
   label,
   headerLabel,
   buttonColor,
-  flavor = 'button',
-  shape = 'rounded',
+  variant = 'button',
+  rounded = 'sm',
   orientation = 'start',
   color = 'white',
   size = 'lg',
@@ -35,10 +35,10 @@ export const Dropdown = ({
       ${spread(attrs)}
     >
       <div class="nui-menu">
-        ${flavor === 'button'
+        ${variant === 'button'
           ? html`
               ${Button({
-                shape: shape,
+                rounded: rounded,
                 color: buttonColor,
                 children: html`
                   <span>${label}</span>
@@ -65,7 +65,7 @@ export const Dropdown = ({
               })}
             `
           : ''}
-        ${flavor === 'context'
+        ${variant === 'context'
           ? html`
               <button
                 type="button"
@@ -102,7 +102,7 @@ export const Dropdown = ({
               </button>
             `
           : ''}
-        ${flavor === 'text'
+        ${variant === 'text'
           ? html`
               <button
                 type="button"
@@ -134,7 +134,7 @@ export const Dropdown = ({
               <div
                 class=${[
                   'nui-dropdown-menu',
-                  shape && variants.shape[shape],
+                  rounded && variants.rounded[rounded],
                   color && variants.color[color],
                   size && variants.size[size],
                 ]
diff --git a/src/plugins/components/dropdown/dropdown.config.ts b/src/plugins/components/dropdown/dropdown.config.ts
index a842f76..14b296b 100644
--- a/src/plugins/components/dropdown/dropdown.config.ts
+++ b/src/plugins/components/dropdown/dropdown.config.ts
@@ -1,101 +1,135 @@
 export const key = 'dropdown' as const
 
 export const defaultConfig = {
-  textPosition: 'start',
-  contextButton: {
-    ringOffsetDark: 'muted-900',
-    size: '9',
-    rounded: 'full',
-    duration: '300',
-    ringGroupHover: 'offset-4',
-    inner: {
-      border: 'muted-200',
-      borderDark: 'muted-700',
-      bg: 'white',
-      bgDark: 'muted-800',
+  align: 'start',
+  button: {
+    context: {
       size: '9',
       rounded: 'full',
+      inner: {
+        size: '9',
+        rounded: 'full',
+        background: {
+          light: 'white',
+          dark: 'muted-800',
+        },
+        border: {
+          light: 'muted-200',
+          dark: 'muted-700',
+        },
+      },
+      icon: {
+        size: '5',
+        font: {
+          color: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+      },
+      ring: {
+        offset: {
+          size: '4',
+          color: {
+            light: 'white',
+            dark: 'muted-900',
+          },
+        },
+        color: {
+          hover: {
+            light: 'primary-500',
+            dark: 'primary-500',
+          },
+        },
+      },
+      transition: {
+        property: 'all',
+        duration: '300',
+      },
     },
-    icon: {
-      text: 'muted-400',
-      size: '5',
-      duration: '300',
+    text: {
+      font: {
+        family: 'sans',
+        color: {
+          light: 'muted-400',
+          dark: 'muted-400',
+        },
+      },
     },
-  },
-  textButton: {
-    text: 'muted-400',
-    inner: {
-      font: 'sans',
+    chevron: {
+      size: '4',
+      transition: {
+        property: 'transform',
+        duration: '300',
+      },
     },
   },
-  chevron: {
-    size: '4',
-    duration: '300',
-  },
-  dropdownMenu: {
-    shadow: 'lg',
-    shadowColor: 'muted-500/10',
-    shadowColorDark: 'muted-800/10',
-    headerTitle: {
-      font: 'sans',
-      fontSize: 'medium',
-      text: 'muted-500',
-      textDark: 'muted-200',
-      textSize: 'xs',
+  menu: {
+    header: {
+      title: {
+        font: {
+          family: 'sans',
+          weight: 'medium',
+          size: 'xs',
+          color: {
+            light: 'muted-500',
+            dark: 'muted-200',
+          },
+        },
+      },
     },
     rounded: {
-      default: 'md',
-      smooth: 'lg',
-      curved: 'xl',
-    },
-    white: {
-      bg: 'white',
-      bgDark: 'muted-800',
-      border: 'muted-200',
-      borderDark: 'muted-700',
-    },
-    whiteContrast: {
-      bg: 'white',
-      bgDark: 'muted-950',
-      border: 'muted-200',
-      borderDark: 'muted-800',
-    },
-    muted: {
-      bg: 'muted-100',
-      bgDark: 'muted-800',
-      border: 'muted-200',
-      borderDark: 'muted-700',
+      sm: 'rounded-md',
+      md: 'rounded-lg',
+      lg: 'rounded-xl',
     },
-    mutedContrast: {
-      bg: 'muted-100',
-      bgDark: 'muted-950',
-      border: 'muted-200',
-      borderDark: 'muted-800',
+    color: {
+      white: {
+        background: {
+          light: 'white',
+          dark: 'muted-800',
+        },
+        border: {
+          light: 'muted-200',
+          dark: 'muted-700',
+        },
+      },
+      whiteContrast: {
+        background: {
+          light: 'white',
+          dark: 'muted-950',
+        },
+        border: {
+          light: 'muted-200',
+          dark: 'muted-800',
+        },
+      },
+      muted: {
+        background: {
+          light: 'white',
+          dark: 'muted-800',
+        },
+        border: {
+          light: 'muted-200',
+          dark: 'muted-700',
+        },
+      },
+      mutedContrast: {
+        background: {
+          light: 'white',
+          dark: 'muted-950',
+        },
+        border: {
+          light: 'muted-200',
+          dark: 'muted-800',
+        },
+      },
     },
-    primary: {
-      bg: 'primary-500/10',
-      border: 'primary-500',
+    shadow: {
+      size: 'lg',
+      light: 'muted-300/30',
+      dark: 'muted-800/20',
     },
-    info: {
-      bg: 'info-500/10',
-      border: 'info-500',
-    },
-    success: {
-      bg: 'success-500/10',
-      border: 'success-500',
-    },
-    warning: {
-      bg: 'warning-500/10',
-      border: 'warning-500',
-    },
-    danger: {
-      bg: 'danger-500/10',
-      border: 'danger-500',
-    },
-  },
-  hover: {
-    ring: 'muted-200',
-    ringDark: 'muted-700/70',
   },
 }
 
diff --git a/src/plugins/components/dropdown/dropdown.stories.ts b/src/plugins/components/dropdown/dropdown.stories.ts
index 7b85190..db28c56 100644
--- a/src/plugins/components/dropdown/dropdown.stories.ts
+++ b/src/plugins/components/dropdown/dropdown.stories.ts
@@ -63,12 +63,12 @@ const meta = {
       options: ['md', 'lg'],
       defaultValue: 'lg',
     },
-    shape: {
+    rounded: {
       control: { type: 'select' },
-      options: ['straight', 'rounded', 'smooth', 'curved', 'full'],
+      options: ['none', 'sm', 'md', 'lg', 'full'],
       defaultValue: 'straight',
     },
-    flavor: {
+    variant: {
       control: { type: 'select' },
       options: ['button', 'context', 'text'],
       defaultValue: 'button',
@@ -93,9 +93,9 @@ export const Main: Story = {
     // set default values used for UI preview
     color: 'white',
     label: 'Dropdown',
-    flavor: 'button',
+    variant: 'button',
     orientation: 'start',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'lg',
     open: true,
     children: html`
@@ -104,28 +104,28 @@ export const Main: Story = {
         color: 'default',
         title: 'Account',
         text: 'View account info',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Products',
         text: 'Manage your inventory',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Orders',
         text: 'View and manage orders',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Settings',
         text: 'Manage store preferences',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
     `,
     style: 'min-height: 310px;',
@@ -139,9 +139,9 @@ export const ButtonEnd: Story = {
   args: {
     color: 'white',
     label: 'Dropdown',
-    flavor: 'button',
+    variant: 'button',
     orientation: 'end',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'lg',
     open: true,
     children: html`
@@ -150,28 +150,28 @@ export const ButtonEnd: Story = {
         color: 'default',
         title: 'Account',
         text: 'View account info',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Products',
         text: 'Manage your inventory',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Orders',
         text: 'View and manage orders',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Settings',
         text: 'Manage store preferences',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
     `,
     style: 'min-height: 310px;',
@@ -185,9 +185,9 @@ export const ContextStart: Story = {
   args: {
     color: 'white',
     label: 'Dropdown',
-    flavor: 'context',
+    variant: 'context',
     orientation: 'start',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'lg',
     open: true,
     children: html`
@@ -196,28 +196,28 @@ export const ContextStart: Story = {
         color: 'default',
         title: 'Account',
         text: 'View account info',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Products',
         text: 'Manage your inventory',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Orders',
         text: 'View and manage orders',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Settings',
         text: 'Manage store preferences',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
     `,
     style: 'min-height: 310px;',
@@ -229,9 +229,9 @@ export const ContextEnd: Story = {
   args: {
     color: 'white',
     label: 'Dropdown',
-    flavor: 'context',
+    variant: 'context',
     orientation: 'end',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'lg',
     open: true,
     children: html`
@@ -240,28 +240,28 @@ export const ContextEnd: Story = {
         color: 'default',
         title: 'Account',
         text: 'View account info',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Products',
         text: 'Manage your inventory',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Orders',
         text: 'View and manage orders',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Settings',
         text: 'Manage store preferences',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
     `,
     style: 'min-height: 310px;',
@@ -275,9 +275,9 @@ export const TextStart: Story = {
   args: {
     color: 'white',
     label: 'Dropdown',
-    flavor: 'text',
+    variant: 'text',
     orientation: 'start',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'lg',
     open: true,
     children: html`
@@ -286,28 +286,28 @@ export const TextStart: Story = {
         color: 'default',
         title: 'Account',
         text: 'View account info',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Products',
         text: 'Manage your inventory',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Orders',
         text: 'View and manage orders',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Settings',
         text: 'Manage store preferences',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
     `,
     style: 'min-height: 310px;',
@@ -319,9 +319,9 @@ export const TextEnd: Story = {
   args: {
     color: 'white',
     label: 'Dropdown',
-    flavor: 'text',
+    variant: 'text',
     orientation: 'end',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'lg',
     open: true,
     children: html`
@@ -330,28 +330,28 @@ export const TextEnd: Story = {
         color: 'default',
         title: 'Account',
         text: 'View account info',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Products',
         text: 'Manage your inventory',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Orders',
         text: 'View and manage orders',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Settings',
         text: 'Manage store preferences',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
     `,
     style: 'min-height: 310px;',
@@ -365,10 +365,10 @@ export const ButtonColor: Story = {
   args: {
     color: 'white',
     label: 'Dropdown',
-    flavor: 'button',
+    variant: 'button',
     buttonColor: 'primary',
     orientation: 'start',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'lg',
     open: true,
     children: html`
@@ -377,28 +377,28 @@ export const ButtonColor: Story = {
         color: 'default',
         title: 'Account',
         text: 'View account info',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Products',
         text: 'Manage your inventory',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Orders',
         text: 'View and manage orders',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Settings',
         text: 'Manage store preferences',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
     `,
     style: 'min-height: 310px;',
@@ -412,9 +412,9 @@ export const Divider: Story = {
   args: {
     color: 'white',
     label: 'Dropdown',
-    flavor: 'button',
+    variant: 'button',
     orientation: 'start',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'lg',
     open: true,
     children: html`
@@ -423,7 +423,7 @@ export const Divider: Story = {
         color: 'default',
         title: 'Account',
         text: 'View account info',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownDivider({})}
       ${DropdownItem({
@@ -431,14 +431,14 @@ export const Divider: Story = {
         color: 'default',
         title: 'Products',
         text: 'Manage your inventory',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownItem({
         href: '#',
         color: 'default',
         title: 'Orders',
         text: 'View and manage orders',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
       ${DropdownDivider({})}
       ${DropdownItem({
@@ -446,7 +446,7 @@ export const Divider: Story = {
         color: 'default',
         title: 'Settings',
         text: 'Manage store preferences',
-        shape: 'rounded',
+        rounded: 'sm',
       })}
     `,
     style: 'min-height: 310px;',
@@ -460,9 +460,9 @@ export const SlotIcon: Story = {
   args: {
     color: 'white',
     label: 'Dropdown',
-    flavor: 'context',
+    variant: 'context',
     orientation: 'start',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'lg',
     open: true,
     children: html`
@@ -471,7 +471,7 @@ export const SlotIcon: Story = {
         color: 'default',
         title: 'Account',
         text: 'View account info',
-        shape: 'rounded',
+        rounded: 'sm',
         start: html`
           <svg
             class="h-5 w-5"
@@ -497,7 +497,7 @@ export const SlotIcon: Story = {
         color: 'default',
         title: 'Products',
         text: 'Manage your inventory',
-        shape: 'rounded',
+        rounded: 'sm',
         start: html`
           <svg
             class="h-5 w-5"
@@ -520,7 +520,7 @@ export const SlotIcon: Story = {
         color: 'default',
         title: 'Orders',
         text: 'View and manage orders',
-        shape: 'rounded',
+        rounded: 'sm',
         start: html`
           <svg
             class="h-5 w-5"
@@ -546,7 +546,7 @@ export const SlotIcon: Story = {
         color: 'default',
         title: 'Settings',
         text: 'Manage store preferences',
-        shape: 'rounded',
+        rounded: 'sm',
         start: html`
           <svg
             class="h-5 w-5"
@@ -579,9 +579,9 @@ export const SlotAvatar: Story = {
   args: {
     color: 'white',
     label: 'Dropdown',
-    flavor: 'button',
+    variant: 'button',
     orientation: 'start',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'lg',
     open: true,
     children: html`
@@ -590,7 +590,7 @@ export const SlotAvatar: Story = {
         color: 'default',
         title: 'Anna Lopez',
         text: 'Software Engineer',
-        shape: 'rounded',
+        rounded: 'sm',
         start: html`
           ${Avatar({
             size: 'xs',
@@ -603,7 +603,7 @@ export const SlotAvatar: Story = {
         color: 'default',
         title: 'Melany Wright',
         text: 'Sales Manager',
-        shape: 'rounded',
+        rounded: 'sm',
         start: html`
           ${Avatar({
             size: 'xs',
@@ -616,7 +616,7 @@ export const SlotAvatar: Story = {
         color: 'default',
         title: 'Kendra Wilson',
         text: 'Project Manager',
-        shape: 'rounded',
+        rounded: 'sm',
         start: html`
           ${Avatar({
             size: 'xs',
@@ -629,7 +629,7 @@ export const SlotAvatar: Story = {
         color: 'default',
         title: 'Maya Piretti',
         text: 'Product manager',
-        shape: 'rounded',
+        rounded: 'sm',
         start: html`
           ${Avatar({
             size: 'xs',
@@ -649,9 +649,9 @@ export const SlotAction: Story = {
   args: {
     color: 'white',
     label: 'Dropdown',
-    flavor: 'button',
+    variant: 'button',
     orientation: 'start',
-    shape: 'rounded',
+    rounded: 'sm',
     size: 'lg',
     open: true,
     children: html`
@@ -660,7 +660,7 @@ export const SlotAction: Story = {
         color: 'default',
         title: 'Anna Lopez',
         text: 'Software Engineer',
-        shape: 'rounded',
+        rounded: 'sm',
         start: html`
           ${Avatar({
             size: 'xs',
@@ -671,7 +671,7 @@ export const SlotAction: Story = {
           ${Button({
             color: 'default',
             size: 'sm',
-            shape: 'rounded',
+            rounded: 'sm',
             children: html`
               <span>Action</span>
             `,
@@ -683,7 +683,7 @@ export const SlotAction: Story = {
         color: 'default',
         title: 'Melany Wright',
         text: 'Sales Manager',
-        shape: 'rounded',
+        rounded: 'sm',
         start: html`
           ${Avatar({
             size: 'xs',
@@ -694,7 +694,7 @@ export const SlotAction: Story = {
           ${Button({
             color: 'default',
             size: 'sm',
-            shape: 'rounded',
+            rounded: 'sm',
             children: html`
               <span>Action</span>
             `,
@@ -706,7 +706,7 @@ export const SlotAction: Story = {
         color: 'default',
         title: 'Kendra Wilson',
         text: 'Project Manager',
-        shape: 'rounded',
+        rounded: 'sm',
         start: html`
           ${Avatar({
             size: 'xs',
@@ -717,7 +717,7 @@ export const SlotAction: Story = {
           ${Button({
             color: 'default',
             size: 'sm',
-            shape: 'rounded',
+            rounded: 'sm',
             children: html`
               <span>Action</span>
             `,
@@ -729,7 +729,7 @@ export const SlotAction: Story = {
         color: 'default',
         title: 'Maya Piretti',
         text: 'Product manager',
-        shape: 'rounded',
+        rounded: 'sm',
         start: html`
           ${Avatar({
             size: 'xs',
@@ -740,7 +740,7 @@ export const SlotAction: Story = {
           ${Button({
             color: 'default',
             size: 'sm',
-            shape: 'rounded',
+            rounded: 'sm',
             children: html`
               <span>Action</span>
             `,
diff --git a/src/plugins/components/dropdown/dropdown.types.ts b/src/plugins/components/dropdown/dropdown.types.ts
index bc80b42..dc2adc8 100644
--- a/src/plugins/components/dropdown/dropdown.types.ts
+++ b/src/plugins/components/dropdown/dropdown.types.ts
@@ -1,7 +1,7 @@
 import type { PropertyVariant } from '~/types/utils'
 
 export interface DropdownProps extends Record<string, unknown> {
-  flavor?: 'button' | 'context' | 'text'
+  variant?: 'button' | 'context' | 'text'
   buttonColor?:
     | 'default'
     | 'primary'
@@ -23,7 +23,7 @@ export interface DropdownProps extends Record<string, unknown> {
     | 'warning'
     | 'danger'
     | 'none'
-  shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
   orientation?: 'start' | 'end'
   size?: 'md' | 'lg'
   label?: string
diff --git a/src/plugins/components/dropdown/dropdown.variants.ts b/src/plugins/components/dropdown/dropdown.variants.ts
index 8d5912d..73cc7a7 100644
--- a/src/plugins/components/dropdown/dropdown.variants.ts
+++ b/src/plugins/components/dropdown/dropdown.variants.ts
@@ -10,13 +10,13 @@ export const size = {
   lg: 'nui-menu-lg',
 } as const satisfies DropdownVariant<'size'>
 
-export const shape = {
-  straight: '',
-  rounded: 'nui-menu-rounded',
-  smooth: 'nui-menu-smooth',
-  curved: 'nui-menu-curved',
+export const rounded = {
+  none: '',
+  sm: 'nui-menu-rounded',
+  md: 'nui-menu-smooth',
+  lg: 'nui-menu-curved',
   full: 'nui-menu-curved',
-} as const satisfies DropdownVariant<'shape'>
+} as const satisfies DropdownVariant<'rounded'>
 
 export const color = {
   white: 'nui-menu-white',
diff --git a/src/plugins/components/dropdown/index.ts b/src/plugins/components/dropdown/index.ts
index 09790c7..accd2a6 100644
--- a/src/plugins/components/dropdown/index.ts
+++ b/src/plugins/components/dropdown/index.ts
@@ -15,119 +15,180 @@ export default plugin.withOptions(
       const config = theme(`shurikenUi.${key}`) satisfies DropdownConfig
 
       addComponents({
+        //Wrapper
         [`.${prefix}dropdown`]: {
-          [`@apply text-${config.textPosition}`]: {},
-
+          [`@apply text-${config.align}`]: {},
+          //Menu
           [`.${prefix}menu`]: {
             [`@apply relative inline-block`]: {},
           },
+          //Menu Content
           [`.${prefix}menu-content`]: {
             [`@apply p-2`]: {},
           },
+          //Button:context
           [`.${prefix}context-button`]: {
-            [`@apply dark:ring-offset-${config.contextButton.ringOffsetDark} inline-flex h-${config.contextButton.size} w-${config.contextButton.size} items-center justify-center rounded-${config.contextButton.rounded} ring-1 ring-transparent transition-all duration-${config.contextButton.duration} group-hover:ring-${config.contextButton.ringGroupHover}`]:
+            //Base
+            [`@apply inline-flex items-center justify-center rounded-${config.button.context.rounded}`]:
+              {},
+            //Size
+            [`@apply h-${config.button.context.size} w-${config.button.context.size}`]:
+              {},
+            //Ring
+            [`@apply ring-1 ring-transparent ring-offset-${config.button.context.ring.offset.color.light} dark:ring-offset-${config.button.context.ring.offset.color.dark}`]:
               {},
+            //Transition
+            [`@apply transition-${config.button.context.transition.property} duration-${config.button.context.transition.duration}`]:
+              {},
+            //Context:inner
             [`.${prefix}context-button-inner`]: {
-              [`@apply border-${config.contextButton.inner.border} dark:border-${config.contextButton.inner.borderDark} dark:bg-${config.contextButton.inner.bgDark} flex h-${config.contextButton.inner.size} w-${config.contextButton.inner.size} items-center justify-center rounded-${config.contextButton.inner.rounded} border bg-${config.contextButton.inner.bg}`]:
+              //Base
+              [`@apply flex items-center justify-center rounded-${config.button.context.inner.rounded}`]:
+                {},
+              //Size
+              [`@apply h-${config.button.context.inner.size} w-${config.button.context.inner.size}`]:
+                {},
+              //Background
+              [`@apply bg-${config.button.context.inner.background.light} dark:bg-${config.button.context.inner.background.dark}`]:
+                {},
+              //Border
+              [`@apply border border-${config.button.context.inner.border.light} dark:border-${config.button.context.inner.border.dark}`]:
                 {},
             },
+            //Context:icon
             [`.${prefix}context-icon`]: {
-              [`@apply text-${config.contextButton.icon.text} h-${config.contextButton.icon.size} w-${config.contextButton.icon.size} transition-transform duration-${config.contextButton.icon.duration}`]:
+              //Size
+              [`@apply h-${config.button.context.icon.size} w-${config.button.context.icon.size}`]:
+                {},
+              //Color
+              [`@apply text-${config.button.context.icon.font.color.light} dark:text-${config.button.context.icon.font.color.dark}`]:
+                {},
+              //Transition
+              [`@apply transition-${config.button.context.transition.property} duration-${config.button.context.transition.duration}`]:
                 {},
             },
           },
+          //Button:text
           [`.${prefix}text-button`]: {
-            [`@apply flex items-center space-x-1 text-${config.textButton.text}`]:
+            //Base
+            [`@apply flex items-center space-x-1`]: {},
+            //Font
+            [`@apply font-${config.button.text.font.family} text-${config.button.text.font.color.light} dark:text-${config.button.text.font.color.dark}`]:
               {},
+            //Text:inner
             [`.${prefix}text-button-inner`]: {
-              [`@apply font-${config.textButton.inner.font}`]: {},
+              [`@apply font-${config.button.text.font.family}`]: {},
             },
           },
+          //Button:chevron
           [`.${prefix}chevron`]: {
-            [`@apply h-${config.chevron.size} w-${config.chevron.size} transition-transform duration-${config.chevron.duration}`]:
+            [`@apply h-${config.button.chevron.size} w-${config.button.chevron.size}`]:
+              {},
+            //Transition
+            [`@apply transition-${config.button.chevron.transition.property} duration-${config.button.chevron.transition.duration}`]:
               {},
           },
+          //Dropdown:menu
           [`.${prefix}dropdown-menu`]: {
-            [`@apply absolute z-50 mt-2 shadow-${config.dropdownMenu.shadow} shadow-${config.dropdownMenu.shadowColor} dark:shadow-${config.dropdownMenu.shadowColorDark} focus:outline-none`]:
+            //Base
+            [`@apply absolute z-50 mt-2 focus:outline-none`]: {},
+            //Shadow
+            [`@apply shadow-${config.menu.shadow.size} shadow-${config.menu.shadow.light} dark:shadow-${config.menu.shadow.dark}`]:
               {},
+            //Menu:header
             [`.${prefix}menu-header`]: {
               [`@apply px-4 pt-5`]: {},
             },
+            //Header:inner
             [`.${prefix}menu-header-inner`]: {
               [`@apply relative flex items-center justify-between`]: {},
             },
+            //Header:title
             [`.${prefix}menu-header-title`]: {
-              [`@apply font-${config.dropdownMenu.headerTitle.font} font-${config.dropdownMenu.headerTitle.fontSize} text-${config.dropdownMenu.headerTitle.text} dark:text-${config.dropdownMenu.headerTitle.textDark} text-${config.dropdownMenu.headerTitle.textSize} uppercase`]:
+              //Base
+              [`@apply font-${config.menu.header.title.font.family} font-${config.menu.header.title.font.weight} text-${config.menu.header.title.font.size} uppercase`]:
+                {},
+              //Color
+              [`@apply text-${config.menu.header.title.font.color.light} dark:text-${config.menu.header.title.font.color.dark}`]:
                 {},
             },
+            //Menu:content
             [`.${prefix}menu-content`]: {
               [`@apply p-2 space-y-1`]: {},
             },
+            //Size:md
             [`&.${prefix}menu-md`]: {
               [`@apply w-56`]: {},
             },
+            //Size:lg
             [`&.${prefix}menu-lg`]: {
               [`@apply w-72`]: {},
             },
+            //Rounded:sm
             [`&.${prefix}menu-rounded`]: {
-              [`@apply rounded-${config.dropdownMenu.rounded.default}`]: {},
+              [`@apply ${config.menu.rounded.sm}`]: {},
             },
+            //Rounded:md
             [`&.${prefix}menu-smooth`]: {
-              [`@apply rounded-${config.dropdownMenu.rounded.smooth}`]: {},
+              [`@apply ${config.menu.rounded.md}`]: {},
             },
+            //Rounded:lg
             [`&.${prefix}menu-curved`]: {
-              [`@apply rounded-${config.dropdownMenu.rounded.curved}`]: {},
+              [`@apply ${config.menu.rounded.lg}`]: {},
             },
+            //Color:white
             [`&.${prefix}menu-white`]: {
-              [`@apply border bg-${config.dropdownMenu.white.bg} border-${config.dropdownMenu.white.border} dark:border-${config.dropdownMenu.white.borderDark} dark:bg-${config.dropdownMenu.white.bgDark}`]:
+              //Border
+              [`@apply border border-${config.menu.color.white.border.light} dark:border-${config.menu.color.white.border.dark}`]:
                 {},
-            },
-            [`&.${prefix}menu-white-contrast`]: {
-              [`@apply border bg-${config.dropdownMenu.whiteContrast.bg} border-${config.dropdownMenu.whiteContrast.border} dark:border-${config.dropdownMenu.whiteContrast.borderDark} dark:bg-${config.dropdownMenu.whiteContrast.bgDark}`]:
+              //Background
+              [`@apply bg-${config.menu.color.white.background.light} dark:bg-${config.menu.color.white.background.dark}`]:
                 {},
             },
-            [`&.${prefix}menu-muted`]: {
-              [`@apply border bg-${config.dropdownMenu.muted.bg} border-${config.dropdownMenu.muted.border} dark:border-${config.dropdownMenu.muted.borderDark} dark:bg-${config.dropdownMenu.muted.bgDark}`]:
+            //Color:white-contrast
+            [`&.${prefix}menu-white-contrast`]: {
+              //Border
+              [`@apply border border-${config.menu.color.whiteContrast.border.light} dark:border-${config.menu.color.whiteContrast.border.dark}`]:
                 {},
-            },
-            [`&.${prefix}menu-muted-contrast`]: {
-              [`@apply border bg-${config.dropdownMenu.mutedContrast.bg} border-${config.dropdownMenu.mutedContrast.border} dark:border-${config.dropdownMenu.mutedContrast.borderDark} dark:bg-${config.dropdownMenu.mutedContrast.bgDark}`]:
+              //Background
+              [`@apply bg-${config.menu.color.whiteContrast.background.light} dark:bg-${config.menu.color.whiteContrast.background.dark}`]:
                 {},
             },
-            [`&.${prefix}menu-primary`]: {
-              [`@apply border bg-${config.dropdownMenu.primary.bg} border-${config.dropdownMenu.primary.border}`]:
-                {},
-            },
-            [`&.${prefix}menu-info`]: {
-              [`@apply border bg-${config.dropdownMenu.info.bg} border-${config.dropdownMenu.info.border}`]:
+            //Color:muted
+            [`&.${prefix}menu-muted`]: {
+              //Border
+              [`@apply border border-${config.menu.color.muted.border.light} dark:border-${config.menu.color.muted.border.dark}`]:
                 {},
-            },
-            [`&.${prefix}menu-success`]: {
-              [`@apply border bg-${config.dropdownMenu.success.bg} border-${config.dropdownMenu.success.border}`]:
+              //Background
+              [`@apply bg-${config.menu.color.muted.background.light} dark:bg-${config.menu.color.muted.background.dark}`]:
                 {},
             },
-            [`&.${prefix}menu-warning`]: {
-              [`@apply border bg-${config.dropdownMenu.warning.bg} border-${config.dropdownMenu.warning.border}`]:
+            //Color:muted-contrast
+            [`&.${prefix}menu-muted-contrast`]: {
+              //Border
+              [`@apply border border-${config.menu.color.mutedContrast.border.light} dark:border-${config.menu.color.mutedContrast.border.dark}`]:
                 {},
-            },
-            [`&.${prefix}menu-danger`]: {
-              [`@apply border bg-${config.dropdownMenu.danger.bg} border-${config.dropdownMenu.danger.border}`]:
+              //Background
+              [`@apply bg-${config.menu.color.mutedContrast.background.light} dark:bg-${config.menu.color.mutedContrast.background.dark}`]:
                 {},
             },
           },
+          //Orientation:start
           [`&.${prefix}dropdown-start`]: {
             [`.${prefix}dropdown-menu`]: {
               [`@apply start-0 origin-top-left`]: {},
             },
           },
+          //Orientation:end
           [`&.${prefix}dropdown-end`]: {
             [`.${prefix}dropdown-menu`]: {
               [`@apply end-0 origin-top-right`]: {},
             },
           },
+          //Context:hover
           [`&:hover`]: {
             [`.${prefix}context-button`]: {
-              [`@apply ring-${config.hover.ring} dark:ring-${config.hover.ringDark}`]:
+              [`@apply ring-offset-${config.button.context.ring.offset.size} ring-${config.button.context.ring.color.hover.light} dark:ring-${config.button.context.ring.color.hover.dark}`]:
                 {},
             },
           },