From a05f94f456f5248cf80607d6a6b4b4f2b280b43e Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Fri, 8 Dec 2023 13:28:34 +0100
Subject: [PATCH] feat(Select): config redesign and implementation

---
 src/plugins/components/select/index.ts        | 238 ++++++---
 .../components/select/select.component.ts     |   6 +-
 .../components/select/select.config.ts        | 452 +++++++++++++-----
 src/plugins/components/select/select.doc.mdx  |  10 +-
 .../components/select/select.stories.ts       |  78 +--
 src/plugins/components/select/select.types.ts |   2 +-
 .../components/select/select.variants.ts      |  12 +-
 7 files changed, 566 insertions(+), 232 deletions(-)

diff --git a/src/plugins/components/select/index.ts b/src/plugins/components/select/index.ts
index 7f38e6a..93b5a5d 100644
--- a/src/plugins/components/select/index.ts
+++ b/src/plugins/components/select/index.ts
@@ -15,45 +15,78 @@ export default plugin.withOptions(
       const config = theme(`shurikenUi.${key}`) satisfies SelectConfig
 
       addComponents({
+        //Wrapper
         [`.${prefix}select-wrapper`]: {
           [`@apply relative`]: {},
-
+          //Select:label
           [`.${prefix}select-label, .${prefix}label-float`]: {
             [`@apply ${prefix}label`]: {},
           },
+          //Label:float
           [`.${prefix}label-float`]: {
-            [`@apply text-${config.labelFloat.text} pointer-events-none absolute inline-flex h-${config.labelFloat.size} select-none items-center leading-none transition-all duration-${config.labelFloat.duration}`]:
+            [`@apply h-${config.label.float.height} absolute inline-flex items-center select-none pointer-events-none`]:
+              {},
+            //Font
+            [`@apply font-${config.label.float.font.family} text-${config.label.float.font.color} leading-${config.label.float.font.lead}`]:
+              {},
+            //Transition
+            [`@apply transition-${config.label.float.transition.property} duration-${config.label.float.transition.duration}`]:
               {},
           },
+          //Select:outer
           [`.${prefix}select-outer`]: {
             [`@apply relative`]: {},
           },
+          //Select:icon
           [`.${prefix}select-icon`]: {
-            [`@apply text-${config.icon.text} absolute start-0 top-0 z-10 flex items-center justify-center transition-colors duration-${config.icon.duration}`]:
+            [`@apply absolute start-0 top-0 z-10 flex items-center justify-center`]:
+              {},
+            //Color
+            [`@apply text-${config.select.icon.color.base.light} dark:text-${config.select.icon.color.base.dark}`]:
+              {},
+            //Transition
+            [`@apply transition-${config.select.icon.transition.property} duration-${config.select.icon.transition.duration}`]:
               {},
           },
+          //Error:text
           [`.${prefix}select-error-text`]: {
-            [`@apply text-${config.errorText.text} mt-1 block font-${config.errorText.font} text-${config.errorText.textSize} font-${config.errorText.fontWeight} leading-none`]:
+            //Base
+            [`@apply mt-1 block`]: {},
+            //Font
+            [`@apply font-${config.error.font.family} text-${config.error.font.size} font-${config.error.font.weight} leading-none`]:
+              {},
+            //Font color
+            [`@apply text-${config.error.font.color.light} dark:text-${config.error.font.color.dark}`]:
               {},
           },
+          //Select
           [`.${prefix}select`]: {
-            [`@apply ${prefix}focus appearance-none w-${config.select.size} font-${config.select.font} transition-all duration-${config.select.duration} disabled:cursor-not-allowed disabled:opacity-75`]:
+            //Base
+            [`@apply ${prefix}focus appearance-none w-${config.select.width} font-${config.select.font.family} disabled:cursor-not-allowed disabled:opacity-75`]:
               {},
-
+            //Transition
+            [`@apply transition-${config.select.transition.property} duration-${config.select.transition.duration}`]:
+              {},
+            //Focus:label:float
             [`&:focus-visible ~ .${prefix}label-float`]: {
-              [`@apply !text-${config.select.focusVisible.labelFloat.text} dark:!text-${config.select.focusVisible.labelFloat.textDark}`]:
+              [`@apply !text-${config.select.focus.label.float.font.color.light} dark:!text-${config.select.focus.label.float.font.color.dark}`]:
                 {},
             },
+            //Focus:icon
             [`&:focus-visible ~ .${prefix}select-icon`]: {
-              [`@apply !text-${config.select.focusVisible.icon.text}`]: {},
+              [`@apply !text-${config.select.icon.color.focus.light} dark:!text-${config.select.icon.color.focus.dark}`]:
+                {},
             },
+            //Focus:chevron
             [`&:focus-visible ~ .${prefix}select-chevron`]: {
               [`@apply rotate-180`]: {},
             },
+            //Disabled:icon
             [`&:disabled ~ .${prefix}select-icon`]: {
               [`@apply cursor-not-allowed opacity-75`]: {},
             },
           },
+          //Select:placeload
           [`.${prefix}select-placeload`]: {
             [`@apply absolute start-0 top-0 flex w-full items-center px-4`]: {},
 
@@ -61,135 +94,211 @@ export default plugin.withOptions(
               [`@apply h-3 w-full max-w-[75%] rounded`]: {},
             },
           },
-          [`.${prefix}select-chevron`]: {
+          //Select:chevron
+          [`.${prefix}select-chevron.${prefix}chevron`]: {
             '@apply pointer-events-none': {},
-            [`@apply text-${config.select.chevron.text} absolute end-0 top-0 z-10 flex items-center justify-center transition-transform duration-${config.select.chevron.duration}`]:
+            [`@apply absolute end-0 top-0 z-10 flex items-center justify-center`]:
+              {},
+            //Color
+            [`@apply text-${config.select.chevron.color.light} dark:text-${config.select.chevron.color.dark}`]:
+              {},
+            //Transition
+            [`@apply transition-${config.select.chevron.transition.property} duration-${config.select.chevron.transition.duration}`]:
               {},
           },
+          //Select:multiple
           [`&.${prefix}select-multiple`]: {
             [`.${prefix}select`]: {
-              [`@apply p-${config.select.multiple.space} h-${config.select.multiple.size}`]:
+              [`@apply p-${config.select.multiple.padding} h-${config.select.multiple.size}`]:
                 {},
             },
           },
+          //Rounded:sm
           [`&.${prefix}select-rounded`]: {
             [`.${prefix}select`]: {
-              [`@apply rounded-${config.select.rounded.default}`]: {},
+              [`@apply ${config.rounded.sm}`]: {},
             },
           },
+          //Rounded:md
           [`&.${prefix}select-smooth`]: {
             [`.${prefix}select`]: {
-              [`@apply rounded-${config.select.rounded.smooth}`]: {},
+              [`@apply ${config.rounded.md}`]: {},
             },
           },
+          //Rounded:lg
           [`&.${prefix}select-curved`]: {
             [`.${prefix}select`]: {
-              [`@apply rounded-${config.select.rounded.curved}`]: {},
+              [`@apply ${config.rounded.lg}`]: {},
             },
           },
+          //Rounded:full
           [`&.${prefix}select-full`]: {
             [`.${prefix}select`]: {
-              [`@apply rounded-${config.select.rounded.full}`]: {},
+              [`@apply ${config.rounded.full}`]: {},
             },
           },
+          //Size:sm
           [`&.${prefix}select-sm`]: {
+            //Select
             [`.${prefix}select`]: {
-              [`@apply pe-${config.select.sm.space}`]: {},
+              [`@apply pe-${config.size.sm.padding}`]: {},
             },
+            //Select:label
             [`.${prefix}select-label`]: {
-              [`@apply pb-1 text-${config.select.sm.labelText}`]: {},
+              [`@apply pb-1 text-${config.size.sm.label.font.size}`]: {},
             },
+            //Label:float
             [`.${prefix}label-float`]: {
               [`@apply top-1.5`]: {},
             },
+            //Select:icon
             [`.${prefix}select-icon, .${prefix}select-chevron`]: {
-              [`@apply h-${config.select.sm.iconOrChevronSize} w-${config.select.sm.iconOrChevronSize}`]:
+              [`@apply h-${config.size.sm.icon.outer.size} w-${config.size.sm.icon.outer.size}`]:
                 {},
 
               [`.${prefix}select-icon-inner, .${prefix}select-chevron-inner`]: {
-                [`@apply h-${config.select.sm.iconOrChevronSizeInner} w-${config.select.sm.iconOrChevronSizeInner}`]:
+                [`@apply h-${config.size.sm.icon.inner.size} w-${config.size.sm.icon.inner.size}`]:
                   {},
               },
             },
+            //Select:placeload
             [`.${prefix}select-placeload`]: {
-              [`@apply h-${config.select.sm.placeloadSize}`]: {},
+              [`@apply h-${config.size.sm.placeload.size}`]: {},
             },
           },
+          //Size:md
           [`&.${prefix}select-md`]: {
+            //Select
             [`.${prefix}select`]: {
-              [`@apply pe-${config.select.md.space}`]: {},
+              [`@apply pe-${config.size.md.padding}`]: {},
             },
+            //Select:label
             [`.${prefix}select-label`]: {
-              [`@apply pb-1 text-${config.select.md.labelText}`]: {},
+              [`@apply pb-1 text-${config.size.md.label.font.size}`]: {},
             },
+            //Label:float
             [`.${prefix}label-float`]: {
               [`@apply top-1.5`]: {},
             },
+            //Select:icon
             [`.${prefix}select-icon, .${prefix}select-chevron`]: {
-              [`@apply h-${config.select.md.iconOrChevronSize} w-${config.select.md.iconOrChevronSize}`]:
+              [`@apply h-${config.size.md.icon.outer.size} w-${config.size.md.icon.outer.size}`]:
                 {},
 
               [`.${prefix}select-icon-inner, .${prefix}select-chevron-inner`]: {
-                [`@apply h-${config.select.md.iconOrChevronSizeInner} w-${config.select.md.iconOrChevronSizeInner}`]:
+                [`@apply h-${config.size.md.icon.inner.size} w-${config.size.md.icon.inner.size}`]:
                   {},
               },
             },
+            //Select:placeload
             [`.${prefix}select-placeload`]: {
-              [`@apply h-${config.select.md.placeloadSize}`]: {},
+              [`@apply h-${config.size.md.placeload.size}`]: {},
             },
           },
+          //Size:lg
           [`&.${prefix}select-lg`]: {
+            //Select
             [`.${prefix}select`]: {
-              [`@apply pe-${config.select.lg.space}`]: {},
+              [`@apply pe-${config.size.lg.padding}`]: {},
             },
+            //Select:label
             [`.${prefix}select-label`]: {
-              [`@apply pb-1 text-${config.select.lg.labelText}`]: {},
+              [`@apply pb-1 text-${config.size.lg.label.font.size}`]: {},
             },
+            //Label:float
             [`.${prefix}label-float`]: {
               [`@apply top-1.5`]: {},
             },
+            //Select:icon
             [`.${prefix}select-icon, .${prefix}select-chevron`]: {
-              [`@apply h-${config.select.lg.iconOrChevronSize} w-${config.select.lg.iconOrChevronSize}`]:
+              [`@apply h-${config.size.lg.icon.outer.size} w-${config.size.lg.icon.outer.size}`]:
                 {},
 
               [`.${prefix}select-icon-inner, .${prefix}select-chevron-inner`]: {
-                [`@apply h-${config.select.lg.iconOrChevronSizeInner} w-${config.select.lg.iconOrChevronSizeInner}`]:
+                [`@apply h-${config.size.lg.icon.inner.size} w-${config.size.lg.icon.inner.size}`]:
                   {},
               },
             },
+            //Select:placeload
             [`.${prefix}select-placeload`]: {
-              [`@apply h-${config.select.lg.placeloadSize}`]: {},
+              [`@apply h-${config.size.lg.placeload.size}`]: {},
             },
           },
+          //Color:default
           [`&.${prefix}select-default`]: {
             [`.${prefix}select`]: {
-              [`@apply border bg-${config.select.default.bg} border-${config.select.default.border} text-${config.select.default.text} placeholder:text-${config.select.default.textPlaceholder} dark:border-${config.select.default.borderDark} dark:bg-${config.select.default.bgDark} dark:text-${config.select.default.textDark} dark:placeholder:text-${config.select.default.textPlaceholderDark}`]:
+              //Font
+              [`@apply text-${config.color.default.color.light} dark:text-${config.color.default.color.dark}`]:
+                {},
+              //Background
+              [`@apply bg-${config.color.default.background.light} dark:bg-${config.color.default.background.dark}`]:
+                {},
+              //Border
+              [`@apply border border-${config.color.default.border.base.light} dark:border-${config.color.default.border.base.dark}`]:
+                {},
+              //Border:hover
+              [`@apply hover:border-${config.color.default.border.hover.light} dark:hover:border-${config.color.default.border.hover.dark}`]:
                 {},
             },
           },
+          //Color:default-contrast
           [`&.${prefix}select-default-contrast`]: {
             [`.${prefix}select`]: {
-              [`@apply border bg-${config.select.defaultContrast.bg} border-${config.select.defaultContrast.border} text-${config.select.defaultContrast.text} placeholder:text-${config.select.defaultContrast.textPlaceholder} dark:border-${config.select.defaultContrast.borderDark} dark:bg-${config.select.defaultContrast.bgDark} dark:text-${config.select.defaultContrast.textDark} dark:placeholder:text-${config.select.defaultContrast.textPlaceholderDark}`]:
+              //Font
+              [`@apply text-${config.color.defaultContrast.color.light} dark:text-${config.color.defaultContrast.color.dark}`]:
+                {},
+              //Background
+              [`@apply bg-${config.color.defaultContrast.background.light} dark:bg-${config.color.defaultContrast.background.dark}`]:
+                {},
+              //Border
+              [`@apply border border-${config.color.defaultContrast.border.base.light} dark:border-${config.color.defaultContrast.border.base.dark}`]:
+                {},
+              //Border:hover
+              [`@apply hover:border-${config.color.defaultContrast.border.hover.light} dark:hover:border-${config.color.defaultContrast.border.hover.dark}`]:
                 {},
             },
           },
+          //Color:muted
           [`&.${prefix}select-muted`]: {
             [`.${prefix}select`]: {
-              [`@apply border bg-${config.select.muted.bg} border-${config.select.muted.border} text-${config.select.muted.text} placeholder:text-${config.select.muted.textPlaceholder} dark:border-${config.select.muted.borderDark} dark:bg-${config.select.muted.bgDark} dark:text-${config.select.muted.textDark} dark:placeholder:text-${config.select.muted.textPlaceholderDark}`]:
+              //Font
+              [`@apply text-${config.color.muted.color.light} dark:text-${config.color.muted.color.dark}`]:
+                {},
+              //Background
+              [`@apply bg-${config.color.muted.background.light} dark:bg-${config.color.muted.background.dark}`]:
+                {},
+              //Border
+              [`@apply border border-${config.color.muted.border.base.light} dark:border-${config.color.muted.border.base.dark}`]:
+                {},
+              //Border:hover
+              [`@apply hover:border-${config.color.muted.border.hover.light} dark:hover:border-${config.color.muted.border.hover.dark}`]:
                 {},
             },
           },
+          //Color:muted-contrast
           [`&.${prefix}select-muted-contrast`]: {
             [`.${prefix}select`]: {
-              [`@apply border bg-${config.select.mutedContrast.bg} border-${config.select.mutedContrast.border} text-${config.select.mutedContrast.text} placeholder:text-${config.select.mutedContrast.textPlaceholder} dark:border-${config.select.mutedContrast.borderDark} dark:bg-${config.select.mutedContrast.bgDark} dark:text-${config.select.mutedContrast.textDark} dark:placeholder:text-${config.select.mutedContrast.textPlaceholderDark}`]:
+              //Font
+              [`@apply text-${config.color.mutedContrast.color.light} dark:text-${config.color.mutedContrast.color.dark}`]:
+                {},
+              //Background
+              [`@apply bg-${config.color.mutedContrast.background.light} dark:bg-${config.color.mutedContrast.background.dark}`]:
+                {},
+              //Border
+              [`@apply border border-${config.color.mutedContrast.border.base.light} dark:border-${config.color.mutedContrast.border.base.dark}`]:
+                {},
+              //Border:hover
+              [`@apply hover:border-${config.color.mutedContrast.border.hover.light} dark:hover:border-${config.color.mutedContrast.border.hover.dark}`]:
                 {},
             },
           },
+          //Loaded
           [`&:not(.${prefix}select-loading)`]: {
             [`.${prefix}select ~ .${prefix}label-float`]: {
               [`@apply text-transparent`]: {},
             },
           },
+          //Loading
           [`&.${prefix}select-loading`]: {
             [`.${prefix}select`]: {
               [`@apply !text-transparent placeholder:!text-transparent dark:placeholder:!text-transparent`]:
@@ -203,62 +312,72 @@ export default plugin.withOptions(
               [`@apply opacity-0`]: {},
             },
           },
+          //Label:float
           [`&.${prefix}select-label-float`]: {
             [`.${prefix}select`]: {
               [`@apply placeholder:text-transparent dark:placeholder:text-transparent`]:
                 {},
             },
           },
+          //Select:error
           [`&.${prefix}select-error`]: {
             [`.${prefix}select`]: {
-              [`@apply !border-${config.select.error.border} dark:!border-${config.select.error.borderDark}`]:
+              [`@apply !border-${config.error.select.border.light} dark:!border-${config.error.select.border.dark}`]:
                 {},
             },
-
+            //Select:icon
             [`.${prefix}select-icon`]: {
-              [`@apply !text-${config.select.error.icon.text}`]: {},
+              [`@apply !text-${config.error.icon.color.light} dark:!text-${config.error.icon.color.dark}`]:
+                {},
             },
           },
+          //Without:icon && Size:sm
           [`&:not(.${prefix}has-icon).${prefix}select-sm`]: {
             [`.${prefix}select`]: {
-              [`@apply h-8 py-1 text-${config.select.hasNotIcon.text.sm} leading-4 ps-2 pe-7`]:
+              [`@apply h-8 py-1 text-${config.icon.disabled.select.sm.font.size} leading-4 ps-2 pe-7`]:
                 {},
             },
           },
+          //With:icon && Size:sm
           [`&.${prefix}has-icon.${prefix}select-sm`]: {
             [`.${prefix}select`]: {
-              [`@apply h-8 py-1 text-${config.select.hasIcon.text.sm} leading-4 pe-7 ps-8`]:
+              [`@apply h-8 py-1 text-${config.icon.enabled.select.sm.font.size} leading-4 pe-7 ps-8`]:
                 {},
             },
           },
+          //Without:icon && Size:md
           [`&:not(.${prefix}has-icon).${prefix}select-md`]: {
             [`.${prefix}select`]: {
-              [`@apply h-10 py-2 text-${config.select.hasNotIcon.text.md} leading-5 ps-3 pe-8`]:
+              [`@apply h-10 py-2 text-${config.icon.disabled.select.md.font.size} leading-5 ps-3 pe-8`]:
                 {},
             },
           },
+          //With:icon && Size:md
           [`&.${prefix}has-icon.${prefix}select-md`]: {
             [`.${prefix}select`]: {
-              [`@apply h-10 py-2 text-${config.select.hasIcon.text.md} leading-5 pe-8 ps-10`]:
+              [`@apply h-10 py-2 text-${config.icon.enabled.select.md.font.size} leading-5 pe-8 ps-10`]:
                 {},
             },
           },
+          //Without:icon && Size:lg
           [`&:not(.${prefix}has-icon).${prefix}select-lg`]: {
             [`.${prefix}select`]: {
-              [`@apply h-12 py-2 text-${config.select.hasNotIcon.text.lg} leading-5 ps-4 pe-9`]:
+              [`@apply h-12 py-2 text-${config.icon.disabled.select.lg.font.size} leading-5 ps-4 pe-9`]:
                 {},
             },
           },
+          //With:icon && Size:lg
           [`&.${prefix}has-icon.${prefix}select-lg`]: {
             [`.${prefix}select`]: {
-              [`@apply h-12 py-2 text-${config.select.hasIcon.text.lg} leading-5 pe-9 ps-11`]:
+              [`@apply h-12 py-2 text-${config.icon.enabled.select.lg.font.size} leading-5 pe-9 ps-11`]:
                 {},
             },
           },
+          //Without:icon && Size:sm && Label:float
           [`&.${prefix}select-label-float:not(.${prefix}has-icon).${prefix}select-sm`]:
             {
               [`.${prefix}label-float`]: {
-                [`@apply start-3 -ms-3 -mt-7 text-${config.select.hasNotIcon.labelFloat.sm}`]:
+                [`@apply start-3 -ms-3 -mt-7 text-${config.icon.disabled.label.float.sm.font.size}`]:
                   {},
               },
 
@@ -270,10 +389,11 @@ export default plugin.withOptions(
                 [`@apply ms-0 mt-0`]: {},
               },
             },
+          //With:icon && Size:sm && Label:float
           [`&.${prefix}select-label-float.${prefix}has-icon.${prefix}select-sm`]:
             {
               [`.${prefix}label-float`]: {
-                [`@apply start-8 -ms-8 -mt-7 text-${config.select.hasIcon.labelFloat.sm}`]:
+                [`@apply start-8 -ms-8 -mt-7 text-${config.icon.enabled.label.float.sm.font.size}`]:
                   {},
               },
 
@@ -285,63 +405,67 @@ export default plugin.withOptions(
                 [`@apply ms-0 mt-0`]: {},
               },
             },
+          //Without:icon && Size:md && Label:float
           [`&.${prefix}select-label-float:not(.${prefix}has-icon).${prefix}select-md`]:
             {
               [`.${prefix}label-float`]: {
-                [`@apply start-3 -ms-3 -mt-8 text-${config.select.hasNotIcon.labelFloat.md.text}`]:
+                [`@apply start-3 -ms-3 -mt-8 text-${config.icon.disabled.label.float.md.font.size.base}`]:
                   {},
               },
               [`.${prefix}select:focus-visible ~ .${prefix}label-float`]: {
-                [`@apply !-ms-3 !-mt-8 !text-${config.select.hasNotIcon.labelFloat.md.focusVisible.text}`]:
+                [`@apply !-ms-3 !-mt-8 !text-${config.icon.disabled.label.float.md.font.size.focus}`]:
                   {},
               },
               [`.${prefix}select ~ .${prefix}label-float`]: {
-                [`@apply ms-0 mt-0 text-${config.select.hasNotIcon.labelFloat.md.placeholderShown.text}`]:
+                [`@apply ms-0 mt-0 text-${config.icon.disabled.label.float.md.font.size.unfocus}`]:
                   {},
               },
             },
+          //With:icon && Size:md && Label:float
           [`&.${prefix}select-label-float.${prefix}has-icon.${prefix}select-md`]:
             {
               [`.${prefix}label-float`]: {
-                [`@apply start-10 -ms-10 -mt-8 text-${config.select.hasIcon.labelFloat.md.text}`]:
+                [`@apply start-10 -ms-10 -mt-8 text-${config.icon.enabled.label.float.md.font.size.base}`]:
                   {},
               },
               [`.${prefix}select:focus-visible ~ .${prefix}label-float`]: {
-                [`@apply !-ms-10 !-mt-8 !text-${config.select.hasIcon.labelFloat.md.focusVisible.text}`]:
+                [`@apply !-ms-10 !-mt-8 !text-${config.icon.enabled.label.float.md.font.size.focus}`]:
                   {},
               },
               [`.${prefix}select ~ .${prefix}label-float`]: {
-                [`@apply ms-0 mt-0 text-${config.select.hasIcon.labelFloat.md.placeholderShown.text}`]:
+                [`@apply ms-0 mt-0 text-${config.icon.enabled.label.float.md.font.size.unfocus}`]:
                   {},
               },
             },
+          //Without:icon && Size:lg && Label:float
           [`&.${prefix}select-label-float:not(.${prefix}has-icon).${prefix}select-lg`]:
             {
               [`.${prefix}label-float`]: {
-                [`@apply start-3 -ms-3 -mt-8 text-${config.select.hasNotIcon.labelFloat.lg.text}`]:
+                [`@apply start-3 -ms-3 -mt-8 text-${config.icon.disabled.label.float.lg.font.size.base}`]:
                   {},
               },
               [`.${prefix}select:focus-visible ~ .${prefix}label-float`]: {
-                [`@apply !-ms-3 !-mt-9 !text-${config.select.hasNotIcon.labelFloat.lg.focusVisible.text}`]:
+                [`@apply !-ms-3 !-mt-9 !text-${config.icon.disabled.label.float.lg.font.size.focus}`]:
                   {},
               },
               [`.${prefix}select ~ .${prefix}label-float`]: {
-                [`@apply ms-0 mt-0 text-${config.select.hasNotIcon.labelFloat.lg.placeholderShown.text}`]:
+                [`@apply ms-0 mt-0 text-${config.icon.disabled.label.float.lg.font.size.unfocus}`]:
                   {},
               },
             },
+          //With:icon && Size:lg && Label:float
           [`&.${prefix}select-label-float.${prefix}has-icon.${prefix}select-lg`]:
             {
               [`.${prefix}label-float`]: {
-                [`@apply start-11 -ms-10 -mt-8 text-${config.select.hasIcon.labelFloat.lg.text}`]:
+                [`@apply start-11 -ms-10 -mt-8 text-${config.icon.enabled.label.float.lg.font.size.base}`]:
                   {},
               },
               [`.${prefix}select:focus-visible ~ .${prefix}label-float`]: {
-                [`@apply !-ms-10 !-mt-9 !text-${config.select.hasIcon.labelFloat.lg.focusVisible.text}`]:
+                [`@apply !-ms-10 !-mt-9 !text-${config.icon.enabled.label.float.lg.font.size.focus}`]:
                   {},
               },
               [`.${prefix}select ~ .${prefix}label-float`]: {
-                [`@apply ms-0 mt-0 text-${config.select.hasIcon.labelFloat.lg.placeholderShown.text}`]:
+                [`@apply ms-0 mt-0 text-${config.icon.enabled.label.float.lg.font.size.unfocus}`]:
                   {},
               },
             },
diff --git a/src/plugins/components/select/select.component.ts b/src/plugins/components/select/select.component.ts
index 6d599e9..c3e53de 100644
--- a/src/plugins/components/select/select.component.ts
+++ b/src/plugins/components/select/select.component.ts
@@ -9,7 +9,7 @@ import * as variants from './select.variants'
  */
 export const Select = ({
   id,
-  shape = 'rounded',
+  rounded = 'sm',
   size = 'md',
   contrast = 'default',
   label,
@@ -35,7 +35,7 @@ export const Select = ({
         'nui-select-wrapper',
         contrast && variants.contrast[contrast],
         size && variants.size[size],
-        shape && variants.shape[shape],
+        rounded && variants.rounded[rounded],
         error && !loading && 'nui-select-error',
         loading && 'nui-select-loading',
         labelFloat && 'nui-select-label-float',
@@ -99,7 +99,7 @@ export const Select = ({
           </div>
         `}
         <div
-          class="${['nui-select-chevron', classes?.chevron]
+          class="${['nui-select-chevron nui-chevron', classes?.chevron]
             .filter(Boolean)
             .join(' ')}"
         >
diff --git a/src/plugins/components/select/select.config.ts b/src/plugins/components/select/select.config.ts
index 55ec09d..298b5c7 100644
--- a/src/plugins/components/select/select.config.ts
+++ b/src/plugins/components/select/select.config.ts
@@ -1,168 +1,378 @@
 export const key = 'select' as const
 
 export const defaultConfig = {
-  labelFloat: {
-    text: 'primary-500',
-    size: '5',
-    duration: '300',
+  rounded: {
+    none: 'rounded-none',
+    sm: 'rounded-md',
+    md: 'rounded-lg',
+    lg: 'rounded-xl',
+    full: 'rounded-full',
   },
-  icon: {
-    text: 'muted-400',
-    duration: '300',
-  },
-  errorText: {
-    text: 'danger-600',
-    textSize: '[0.65rem]',
-    font: 'sans',
-    fontWeight: 'medium',
+  label: {
+    float: {
+      height: '5',
+      font: {
+        family: 'sans',
+        color: 'primary-500',
+        lead: 'none',
+      },
+      transition: {
+        property: 'all',
+        duration: '300',
+      },
+    },
   },
   select: {
-    size: 'full',
-    font: 'sans',
-    duration: '300',
-    focusVisible: {
-      labelFloat: {
-        text: 'primary-500',
-        textDark: 'primary-500',
+    width: 'full',
+    font: {
+      family: 'sans',
+    },
+    icon: {
+      color: {
+        base: {
+          light: 'muted-400',
+          dark: 'muted-400',
+        },
+        focus: {
+          light: 'primary-500',
+          dark: 'primary-500',
+        },
       },
-      icon: {
-        text: 'primary-500',
+      transition: {
+        property: 'colors',
+        duration: '300',
       },
     },
-    chevron: {
-      text: 'muted-400',
+    transition: {
+      property: 'all',
       duration: '300',
     },
+    focus: {
+      label: {
+        float: {
+          font: {
+            color: {
+              light: 'primary-500',
+              dark: 'primary-500',
+            },
+          },
+        },
+      },
+      border: {
+        color: {
+          light: 'primary-500',
+          dark: 'primary-500',
+        },
+      },
+    },
+    chevron: {
+      color: {
+        light: 'muted-400',
+        dark: 'muted-400',
+      },
+      transition: {
+        property: 'transform',
+        duration: '300',
+      },
+    },
     multiple: {
-      space: '2',
+      padding: '2',
       size: '32',
     },
-    rounded: {
-      default: 'md',
-      smooth: 'lg',
-      curved: 'xl',
-      full: 'full',
-    },
+  },
+  size: {
     sm: {
-      space: '8',
-      labelText: 'xs',
-      iconOrChevronSize: '8',
-      iconOrChevronSizeInner: '4',
-      placeloadSize: '8',
+      padding: '8',
+      chevron: {
+        outer: {
+          size: '8',
+        },
+        inner: {
+          size: '4',
+        },
+      },
+      label: {
+        font: {
+          size: 'xs',
+        },
+      },
+      icon: {
+        outer: {
+          size: '8',
+        },
+        inner: {
+          size: '4',
+        },
+      },
+      placeload: {
+        size: '8',
+      },
     },
     md: {
-      space: '10',
-      labelText: '[0.825rem]',
-      iconOrChevronSize: '10',
-      iconOrChevronSizeInner: '[1.15rem]',
-      placeloadSize: '10',
+      padding: '10',
+      chevron: {
+        outer: {
+          size: '10',
+        },
+        inner: {
+          size: '[1.15rem]',
+        },
+      },
+      label: {
+        font: {
+          size: '[0.825rem]',
+        },
+      },
+      icon: {
+        outer: {
+          size: '10',
+        },
+        inner: {
+          size: '[1.15rem]',
+        },
+      },
+      placeload: {
+        size: '10',
+      },
     },
     lg: {
-      space: '12',
-      labelText: 'sm',
-      iconOrChevronSize: '12',
-      iconOrChevronSizeInner: '5',
-      placeloadSize: '12',
+      padding: '12',
+      chevron: {
+        outer: {
+          size: '12',
+        },
+        inner: {
+          size: '5',
+        },
+      },
+      label: {
+        font: {
+          size: 'sm',
+        },
+      },
+      icon: {
+        outer: {
+          size: '12',
+        },
+        inner: {
+          size: '5',
+        },
+      },
+      placeload: {
+        size: '12',
+      },
     },
+  },
+  color: {
     default: {
-      bg: 'white',
-      bgDark: 'muted-900/75',
-      border: 'muted-300',
-      borderDark: 'muted-700',
-      text: 'muted-600',
-      textDark: 'muted-200',
-      textPlaceholder: 'muted-300',
-      textPlaceholderDark: 'muted-500',
+      background: {
+        light: 'white',
+        dark: 'muted-900',
+      },
+      border: {
+        base: {
+          light: 'muted-300',
+          dark: 'muted-700',
+        },
+        hover: {
+          light: 'muted-300',
+          dark: 'muted-700',
+        },
+      },
+      color: {
+        light: 'muted-600',
+        dark: 'muted-200',
+      },
+      placeholder: {
+        light: 'muted-300',
+        dark: 'muted-500',
+      },
     },
     defaultContrast: {
-      bg: 'white',
-      bgDark: 'muted-950/75',
-      border: 'muted-300',
-      borderDark: 'muted-800',
-      text: 'muted-600',
-      textDark: 'muted-200',
-      textPlaceholder: 'muted-300',
-      textPlaceholderDark: 'muted-600',
+      background: {
+        light: 'white',
+        dark: 'muted-950',
+      },
+      border: {
+        base: {
+          light: 'muted-300',
+          dark: 'muted-800',
+        },
+        hover: {
+          light: 'muted-300',
+          dark: 'muted-800',
+        },
+      },
+      color: {
+        light: 'muted-600',
+        dark: 'muted-200',
+      },
+      placeholder: {
+        light: 'muted-300',
+        dark: 'muted-600',
+      },
     },
     muted: {
-      bg: 'muted-100',
-      bgDark: 'muted-900/75',
-      border: 'muted-200',
-      borderDark: 'muted-700',
-      text: 'muted-600',
-      textDark: 'muted-200',
-      textPlaceholder: 'muted-300',
-      textPlaceholderDark: 'muted-500',
+      background: {
+        light: 'muted-100',
+        dark: 'muted-900',
+      },
+      border: {
+        base: {
+          light: 'muted-100',
+          dark: 'muted-700',
+        },
+        hover: {
+          light: 'muted-100',
+          dark: 'muted-700',
+        },
+      },
+      color: {
+        light: 'muted-600',
+        dark: 'muted-200',
+      },
+      placeholder: {
+        light: 'muted-300',
+        dark: 'muted-500',
+      },
     },
     mutedContrast: {
-      bg: 'muted-100',
-      bgDark: 'muted-950/75',
-      border: 'muted-100',
-      borderDark: 'muted-800',
-      text: 'muted-600',
-      textDark: 'muted-200',
-      textPlaceholder: 'muted-300',
-      textPlaceholderDark: 'muted-600',
-    },
-    error: {
-      border: 'danger-500',
-      borderDark: 'danger-500',
-      icon: {
-        text: 'danger-500',
+      background: {
+        light: 'muted-100',
+        dark: 'muted-950',
+      },
+      border: {
+        base: {
+          light: 'muted-100',
+          dark: 'muted-800',
+        },
+        hover: {
+          light: 'muted-100',
+          dark: 'muted-800',
+        },
+      },
+      color: {
+        light: 'muted-600',
+        dark: 'muted-200',
+      },
+      placeholder: {
+        light: 'muted-300',
+        dark: 'muted-600',
       },
     },
-    hasNotIcon: {
-      text: {
-        sm: 'xs',
-        md: 'sm',
-        lg: 'sm',
+  },
+  error: {
+    select: {
+      border: {
+        light: 'danger-500',
+        dark: 'danger-500',
       },
-      labelFloat: {
-        sm: 'xs',
-        md: {
-          text: 'xs',
-          focusVisible: {
-            text: 'xs',
+    },
+    icon: {
+      color: {
+        light: 'danger-500',
+        dark: 'danger-500',
+      },
+    },
+    font: {
+      family: 'sans',
+      size: '[0.65rem]',
+      weight: 'medium',
+      color: {
+        light: 'danger-600',
+        dark: 'danger-600',
+      },
+    },
+  },
+  icon: {
+    disabled: {
+      select: {
+        sm: {
+          font: {
+            size: 'xs',
           },
-          placeholderShown: {
-            text: '[0.825rem]',
+        },
+        md: {
+          font: {
+            size: 'sm',
           },
         },
         lg: {
-          text: 'xs',
-          focusVisible: {
-            text: 'xs',
+          font: {
+            size: 'sm',
           },
-          placeholderShown: {
-            text: '[0.825rem]',
+        },
+      },
+      label: {
+        float: {
+          sm: {
+            font: {
+              size: 'xs',
+            },
+          },
+          md: {
+            font: {
+              size: {
+                base: 'xs',
+                focus: 'xs',
+                unfocus: '[0.825rem]',
+              },
+            },
+          },
+          lg: {
+            font: {
+              size: {
+                base: 'xs',
+                focus: 'xs',
+                unfocus: '[0.825rem]',
+              },
+            },
           },
         },
       },
     },
-    hasIcon: {
-      text: {
-        sm: 'xs',
-        md: 'sm',
-        lg: 'base',
-      },
-      labelFloat: {
-        sm: 'xs',
-        md: {
-          text: 'xs',
-          focusVisible: {
-            text: 'xs',
+    enabled: {
+      select: {
+        sm: {
+          font: {
+            size: 'xs',
           },
-          placeholderShown: {
-            text: '[0.825rem]',
+        },
+        md: {
+          font: {
+            size: 'sm',
           },
         },
         lg: {
-          text: 'xs',
-          focusVisible: {
-            text: 'xs',
+          font: {
+            size: 'base',
+          },
+        },
+      },
+      label: {
+        float: {
+          sm: {
+            font: {
+              size: 'xs',
+            },
+          },
+          md: {
+            font: {
+              size: {
+                base: 'xs',
+                focus: 'xs',
+                unfocus: '[0.825rem]',
+              },
+            },
           },
-          placeholderShown: {
-            text: '[0.825rem]',
+          lg: {
+            font: {
+              size: {
+                base: 'xs',
+                focus: 'xs',
+                unfocus: '[0.825rem]',
+              },
+            },
           },
         },
       },
diff --git a/src/plugins/components/select/select.doc.mdx b/src/plugins/components/select/select.doc.mdx
index c817c63..59f3fb3 100644
--- a/src/plugins/components/select/select.doc.mdx
+++ b/src/plugins/components/select/select.doc.mdx
@@ -18,7 +18,7 @@ Selects are an essential part of any application. Shuriken UI selects can have d
 
 <br />
 
-### Shape: straight
+### Rounded: none
 
 Select shapes allow you to change the border radiuses. Below is an example of a straight select.
 
@@ -28,7 +28,7 @@ Select shapes allow you to change the border radiuses. Below is an example of a
 
 <br />
 
-### Shape: rounded
+### Rounded: sm
 
 Select shapes allow you to change the border radiuses. Below is an example of a rounded select.
 
@@ -38,7 +38,7 @@ Select shapes allow you to change the border radiuses. Below is an example of a
 
 <br />
 
-### Shape: smooth
+### Rounded: md
 
 Select shapes allow you to change the border radiuses. Below is an example of a smooth select.
 
@@ -48,7 +48,7 @@ Select shapes allow you to change the border radiuses. Below is an example of a
 
 <br />
 
-### Shape: curved
+### Rounded: lg
 
 Select shapes allow you to change the border radiuses. Below is an example of a curved select.
 
@@ -58,7 +58,7 @@ Select shapes allow you to change the border radiuses. Below is an example of a
 
 <br />
 
-### Shape: full
+### Rounded: full
 
 Select shapes allow you to change the border radiuses. Below is an example of a full select.
 
diff --git a/src/plugins/components/select/select.stories.ts b/src/plugins/components/select/select.stories.ts
index 3cfa1ed..fb49859 100644
--- a/src/plugins/components/select/select.stories.ts
+++ b/src/plugins/components/select/select.stories.ts
@@ -25,10 +25,10 @@ const meta = {
       options: ['sm', 'md', 'lg'],
       defaultValue: 'md',
     },
-    shape: {
+    rounded: {
       control: { type: 'select' },
-      options: ['straight', 'rounded', 'smooth', 'curved', 'full'],
-      defaultValue: 'straight',
+      options: ['none', 'sm', 'md', 'lg', 'full'],
+      defaultValue: 'sm',
     },
     contrast: {
       control: { type: 'select' },
@@ -70,7 +70,7 @@ export const Main: Story = {
     label: 'Superhero',
     size: 'md',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     id: 'input',
     placeholder: 'Choose a hero...',
     options: html`
@@ -86,15 +86,15 @@ export const Main: Story = {
 }
 // #endregion
 
-// #region Shapes
+// #region Rounded
 export const Straight: Story = {
-  name: 'Shape: straight',
+  name: 'Rounded: none',
   args: {
     id: 'select',
     label: 'Superhero',
     size: 'md',
     contrast: 'default',
-    shape: 'straight',
+    rounded: 'none',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -109,13 +109,13 @@ export const Straight: Story = {
 }
 
 export const Rounded: Story = {
-  name: 'Shape: rounded',
+  name: 'Rounded: sm',
   args: {
     id: 'select',
     label: 'Superhero',
     size: 'md',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -130,13 +130,13 @@ export const Rounded: Story = {
 }
 
 export const Smooth: Story = {
-  name: 'Shape: smooth',
+  name: 'Rounded: md',
   args: {
     id: 'select',
     label: 'Superhero',
     size: 'md',
     contrast: 'default',
-    shape: 'smooth',
+    rounded: 'md',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -151,13 +151,13 @@ export const Smooth: Story = {
 }
 
 export const Curved: Story = {
-  name: 'Shape: curved',
+  name: 'Rounded: lg',
   args: {
     id: 'select',
     label: 'Superhero',
     size: 'md',
     contrast: 'default',
-    shape: 'curved',
+    rounded: 'lg',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -172,13 +172,13 @@ export const Curved: Story = {
 }
 
 export const Full: Story = {
-  name: 'Shape: full',
+  name: 'Rounded: full',
   args: {
     id: 'select',
     label: 'Superhero',
     size: 'md',
     contrast: 'default',
-    shape: 'full',
+    rounded: 'full',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -201,7 +201,7 @@ export const SizeSm: Story = {
     label: 'Superhero',
     size: 'sm',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -222,7 +222,7 @@ export const SizeMd: Story = {
     label: 'Superhero',
     size: 'md',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -243,7 +243,7 @@ export const SizeLg: Story = {
     label: 'Superhero',
     size: 'lg',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -266,7 +266,7 @@ export const ContrastMutedSm: Story = {
     label: 'Superhero',
     size: 'sm',
     contrast: 'muted',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -287,7 +287,7 @@ export const ContrastMutedMd: Story = {
     label: 'Superhero',
     size: 'md',
     contrast: 'muted',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -308,7 +308,7 @@ export const ContrastMutedLg: Story = {
     label: 'Superhero',
     size: 'lg',
     contrast: 'muted',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -332,7 +332,7 @@ export const LabelFloatSm: Story = {
     labelFloat: true,
     size: 'sm',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -354,7 +354,7 @@ export const LabelFloatMd: Story = {
     labelFloat: true,
     size: 'md',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -376,7 +376,7 @@ export const LabelFloatLg: Story = {
     labelFloat: true,
     size: 'lg',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -400,7 +400,7 @@ export const DisabledSm: Story = {
     '?disabled': true,
     size: 'sm',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -422,7 +422,7 @@ export const DisabledMd: Story = {
     '?disabled': true,
     size: 'md',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -444,7 +444,7 @@ export const DisabledLg: Story = {
     '?disabled': true,
     size: 'lg',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -468,7 +468,7 @@ export const LoadingSm: Story = {
     loading: true,
     size: 'sm',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -490,7 +490,7 @@ export const LoadingMd: Story = {
     loading: true,
     size: 'md',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -512,7 +512,7 @@ export const LoadingLg: Story = {
     loading: true,
     size: 'lg',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -536,7 +536,7 @@ export const ErrorSm: Story = {
     error: 'Please select a valid value',
     size: 'sm',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -558,7 +558,7 @@ export const ErrorMd: Story = {
     error: 'Please select a valid value',
     size: 'md',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -580,7 +580,7 @@ export const ErrorLg: Story = {
     error: 'Please select a valid value',
     size: 'lg',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -603,7 +603,7 @@ export const SlotIconSm: Story = {
     label: 'Superhero',
     size: 'sm',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -648,7 +648,7 @@ export const SlotIconMd: Story = {
     label: 'Superhero',
     size: 'md',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -693,7 +693,7 @@ export const SlotIconLg: Story = {
     label: 'Superhero',
     size: 'lg',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -741,7 +741,7 @@ export const SlotIconFloatSm: Story = {
     labelFloat: true,
     size: 'sm',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -787,7 +787,7 @@ export const SlotIconFloatMd: Story = {
     labelFloat: true,
     size: 'md',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
@@ -833,7 +833,7 @@ export const SlotIconFloatLg: Story = {
     labelFloat: true,
     size: 'lg',
     contrast: 'default',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Choose a hero...',
     options: html`
       <option value="1">Superman</option>
diff --git a/src/plugins/components/select/select.types.ts b/src/plugins/components/select/select.types.ts
index 8fd6bfa..20de65f 100644
--- a/src/plugins/components/select/select.types.ts
+++ b/src/plugins/components/select/select.types.ts
@@ -2,7 +2,7 @@ import type { PropertyVariant } from '~/types/utils'
 
 export interface SelectProps extends Record<string, unknown> {
   id?: string
-  shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
   label?: string
   placeholder?: string
   labelFloat?: boolean
diff --git a/src/plugins/components/select/select.variants.ts b/src/plugins/components/select/select.variants.ts
index 8fe9763..70d4b02 100644
--- a/src/plugins/components/select/select.variants.ts
+++ b/src/plugins/components/select/select.variants.ts
@@ -1,12 +1,12 @@
 import type { SelectVariant } from './select.types'
 
-export const shape = {
-  straight: '',
-  rounded: 'nui-select-rounded',
-  smooth: 'nui-select-smooth',
-  curved: 'nui-select-curved',
+export const rounded = {
+  none: '',
+  sm: 'nui-select-rounded',
+  md: 'nui-select-smooth',
+  lg: 'nui-select-curved',
   full: 'nui-select-full',
-} as const satisfies SelectVariant<'shape'>
+} as const satisfies SelectVariant<'rounded'>
 
 export const size = {
   sm: 'nui-select-sm',