feat(DropdownItem): config redesign and implementation

src/plugins/components/dropdown-item/dropdown-item.component.ts

@@ -12,7 +12,7 @@ export const DropdownItem = ({
   target,
   rel,
   type,
-  shape = 'rounded',
+  rounded = 'sm',
   color = 'default',
   title,
   text,
@@ -33,7 +33,7 @@ export const DropdownItem = ({
               class=${[
                 'nui-dropdown-item',
                 active && 'nui-active',
-                shape && variants.shape[shape],
+                rounded && variants.rounded[rounded],
                 color && variants.color[color],
               ]
                 .filter(Boolean)
@@ -67,7 +67,7 @@ export const DropdownItem = ({
               class=${[
                 'nui-dropdown-item',
                 active && 'nui-active',
-                shape && variants.shape[shape],
+                rounded && variants.rounded[rounded],
                 color && variants.color[color],
               ]
                 .filter(Boolean)

src/plugins/components/dropdown-item/dropdown-item.config.ts

@@ -1,28 +1,52 @@
 export const key = 'dropdownItem' as const
 
 export const defaultConfig = {
-  itemRounded: 'md',
-  textPosition: 'left',
-  textSize: 'sm',
-  duration: '300',
-  notActive: {
-    text: 'muted-500',
+  align: 'start',
+  font: {
+    family: 'sans',
+    size: 'sm',
+    color: {
+      inactive: {
+        light: 'muted-500',
+        dark: 'muted-500',
+      },
+    },
   },
-  default: {
-    bg: 'muted-100',
-    bgDark: 'muted-700',
-    text: 'primary-500',
+  rounded: {
+    none: 'none',
+    sm: 'md',
+    md: 'lg',
+    lg: 'xl',
   },
-  contrast: {
-    bg: 'muted-100',
-    bgDark: 'muted-900',
-    text: 'primary-500',
+  color: {
+    default: {
+      background: {
+        light: 'muted-100',
+        dark: 'muted-700',
+      },
+      font: {
+        color: {
+          light: 'primary-500',
+          dark: 'primary-500',
+        },
+      },
+    },
+    contrast: {
+      background: {
+        light: 'muted-100',
+        dark: 'muted-900',
+      },
+      font: {
+        color: {
+          light: 'primary-500',
+          dark: 'primary-500',
+        },
+      },
+    },
   },
-  rounded: {
-    straight: 'none',
-    default: 'md',
-    smooth: 'lg',
-    curved: 'xl',
+  transition: {
+    property: 'colors',
+    duration: '300',
   },
 }
 

src/plugins/components/dropdown-item/dropdown-item.doc.mdx

@@ -18,7 +18,7 @@ Dropdown items are an essential part of any application. Shuriken UI dropdown it
 
 <br />
 
-### Shape: straight
+### Rounded: none
 
 Dropdown item shapes allow you to change the border radiuses. Below is an example of a straight item.
 
@@ -28,7 +28,7 @@ Dropdown item shapes allow you to change the border radiuses. Below is an exampl
 
 <br />
 
-### Shape: rounded
+### Rounded: sm
 
 Dropdown item shapes allow you to change the border radiuses. Below is an example of a rounded item.
 
@@ -38,7 +38,7 @@ Dropdown item shapes allow you to change the border radiuses. Below is an exampl
 
 <br />
 
-### Shape: smooth
+### Rounded: md
 
 Dropdown item shapes allow you to change the border radiuses. Below is an example of a smooth item.
 
@@ -48,7 +48,7 @@ Dropdown item shapes allow you to change the border radiuses. Below is an exampl
 
 <br />
 
-### Shape: curved
+### Rounded: lg
 
 Dropdown item shapes allow you to change the border radiuses. Below is an example of a curved item.
 

src/plugins/components/dropdown-item/dropdown-item.stories.ts

@@ -30,10 +30,10 @@ const meta = {
       options: ['default', 'contrast'],
       defaultValue: 'default',
     },
-    shape: {
+    rounded: {
       control: { type: 'select' },
-      options: ['straight', 'rounded', 'smooth', 'curved'],
-      defaultValue: 'straight',
+      options: ['none', 'sm', 'md', 'lg'],
+      defaultValue: 'none',
     },
     onClick: { action: 'onClick' },
   },
@@ -53,57 +53,57 @@ export const Main: Story = {
     color: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
-    shape: 'rounded',
+    rounded: 'sm',
     style: 'max-width: 200px',
   },
 }
 // #endregion
 
-// #region Shapes
+// #region Rounded
 export const ShapeStraight: Story = {
-  name: 'Shape: straight',
+  name: 'Rounded: none',
   args: {
     href: '#',
     color: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
-    shape: 'straight',
+    rounded: 'none',
     style: 'min-width: 200px',
   },
 }
 
 export const ShapeRounded: Story = {
-  name: 'Shape: rounded',
+  name: 'Rounded: sm',
   args: {
     href: '#',
     color: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
-    shape: 'rounded',
+    rounded: 'sm',
     style: 'min-width: 200px',
   },
 }
 
 export const ShapeSmooth: Story = {
-  name: 'Shape: smooth',
+  name: 'Rounded: md',
   args: {
     href: '#',
     color: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
-    shape: 'smooth',
+    rounded: 'md',
     style: 'min-width: 200px',
   },
 }
 
 export const ShapeCurved: Story = {
-  name: 'Shape: curved',
+  name: 'Rounded: lg',
   args: {
     href: '#',
     color: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
-    shape: 'curved',
+    rounded: 'lg',
     style: 'min-width: 200px',
   },
 }
@@ -117,7 +117,7 @@ export const SlotStartIcon: Story = {
     color: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
-    shape: 'rounded',
+    rounded: 'sm',
     start: html`
       <svg
         class="h-5 w-5"
@@ -150,7 +150,7 @@ export const SlotStartAvatar: Story = {
     color: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
-    shape: 'rounded',
+    rounded: 'sm',
     start: html`
       ${Avatar({
         size: 'xs',
@@ -170,7 +170,7 @@ export const SlotEndAction: Story = {
     color: 'default',
     title: 'Dropdown Item',
     text: 'Some nice item subtitle',
-    shape: 'rounded',
+    rounded: 'sm',
     start: html`
       ${Avatar({
         size: 'xs',
@@ -181,7 +181,7 @@ export const SlotEndAction: Story = {
       ${Button({
         color: 'default',
         size: 'sm',
-        shape: 'rounded',
+        rounded: 'sm',
         children: html`
           <span>Action</span>
         `,

src/plugins/components/dropdown-item/dropdown-item.types.ts

@@ -5,7 +5,7 @@ export interface DropdownItemProps extends Record<string, unknown> {
   href?: string
   active?: boolean
   disabled?: boolean
-  shape?: 'straight' | 'rounded' | 'smooth' | 'curved'
+  rounded?: 'none' | 'sm' | 'md' | 'lg'
   color?: 'default' | 'contrast'
   rel?: string
   target?: string

src/plugins/components/dropdown-item/dropdown-item.variants.ts

@@ -1,11 +1,11 @@
 import type { DropdownItemVariant } from './dropdown-item.types'
 
-export const shape = {
-  straight: '',
-  rounded: 'nui-item-rounded',
-  smooth: 'nui-item-smooth',
-  curved: 'nui-item-curved',
-} as const satisfies DropdownItemVariant<'shape'>
+export const rounded = {
+  none: '',
+  sm: 'nui-item-rounded',
+  md: 'nui-item-smooth',
+  lg: 'nui-item-curved',
+} as const satisfies DropdownItemVariant<'rounded'>
 
 export const color = {
   default: 'nui-item-default',

src/plugins/components/dropdown-item/index.ts

@@ -19,36 +19,58 @@ export default plugin.withOptions(
       const config = theme(`shurikenUi.${key}`) satisfies DropdownItemConfig
 
       addComponents({
+        //Wrapper
         [`.${prefix}dropdown-item`]: {
-          [`@apply ${prefix}focus flex w-full items-center justify-start gap-2 px-3 py-2 text-${config.textPosition} text-${config.textSize} cursor-pointer transition-colors duration-${config.duration}`]:
+          [`@apply ${prefix}focus flex w-full items-center justify-start gap-2 px-3 py-2 cursor-pointer`]:
             {},
-
+          //Font
+          [`@apply text-${config.align} font-${config.font.family} text-${config.font.size}`]:
+            {},
+          //Transition
+          [`@apply transition-${config.transition.property} duration-${config.transition.duration}`]:
+            {},
+          //Item:content
           [`.${prefix}item-content`]: {
             [`@apply grow`]: {},
           },
+          //Item:text
           [`&:not(.${prefix}active)`]: {
-            [`@apply text-${config.notActive.text}`]: {},
+            [`@apply text-${config.font.color.inactive.light} dark:text-${config.font.color.inactive.dark}`]:
+              {},
           },
+          //Color:default
           [`&.${prefix}item-default`]: {
             [`&.${prefix}active, &:hover`]: {
-              [`@apply bg-${config.default.bg} dark:bg-${config.default.bgDark} text-${config.default.text}`]:
+              //Background:hover
+              [`@apply bg-${config.color.default.background.light} dark:bg-${config.color.default.background.dark}`]:
+                {},
+              //Font:hover
+              [`@apply text-${config.color.default.font.color.light} dark:text-${config.color.default.font.color.dark}`]:
                 {},
             },
           },
+          //Color:contrast
           [`&.${prefix}item-contrast`]: {
             [`&.${prefix}active, &:hover`]: {
-              [`@apply bg-${config.contrast.bg} dark:bg-${config.contrast.bgDark} text-${config.contrast.text}`]:
+              //Background:hover
+              [`@apply bg-${config.color.contrast.background.light} dark:bg-${config.color.contrast.background.dark}`]:
+                {},
+              //Font:hover
+              [`@apply text-${config.color.contrast.font.color.light} dark:text-${config.color.contrast.font.color.dark}`]:
                 {},
             },
           },
+          //Rounded:sm
           [`&.${prefix}item-rounded`]: {
-            [`@apply rounded-${config.rounded.default}`]: {},
+            [`@apply rounded-${config.rounded.sm}`]: {},
           },
+          //Rounded:md
           [`&.${prefix}item-smooth`]: {
-            [`@apply rounded-${config.rounded.smooth}`]: {},
+            [`@apply rounded-${config.rounded.md}`]: {},
           },
+          //Rounded:lg
           [`&.${prefix}item-curved`]: {
-            [`@apply rounded-${config.rounded.curved}`]: {},
+            [`@apply rounded-${config.rounded.lg}`]: {},
           },
         },
       })