From 69656d96a91c7682b100cc121d12792788bae7f8 Mon Sep 17 00:00:00 2001
From: Driss Chelouati <driss.chelouati@gmail.com>
Date: Thu, 7 Dec 2023 15:01:17 +0100
Subject: [PATCH] feat(InputFileRegular): config redesign and implementation

---
 .../components/input-file-regular/index.ts    | 133 ++++++++--
 .../input-file-regular.component.ts           |   4 +-
 .../input-file-regular.config.ts              | 250 +++++++++++++-----
 .../input-file-regular.doc.mdx                |  10 +-
 .../input-file-regular.stories.ts             |  60 ++---
 .../input-file-regular.types.ts               |   2 +-
 .../input-file-regular.variants.ts            |  12 +-
 7 files changed, 330 insertions(+), 141 deletions(-)

diff --git a/src/plugins/components/input-file-regular/index.ts b/src/plugins/components/input-file-regular/index.ts
index 768ca60..50a3d4b 100644
--- a/src/plugins/components/input-file-regular/index.ts
+++ b/src/plugins/components/input-file-regular/index.ts
@@ -19,30 +19,47 @@ export default plugin.withOptions(
       const config = theme(`shurikenUi.${key}`) satisfies InputFileRegularConfig
 
       addComponents({
+        //Wrapper
         [`.${prefix}input-file-regular`]: {
           [`@apply relative w-full`]: {},
-
+          //Input:label
           [`.${prefix}input-file-label`]: {
             [`@apply ${prefix}label w-full`]: {},
           },
+          //Input:outer
           [`.${prefix}input-file-outer`]: {
             [`@apply relative`]: {},
           },
+          //Input:inner
           [`.${prefix}input-file-inner`]: {
-            [`@apply relative ${prefix}focus flex w-${config.inner.size} cursor-pointer items-center overflow-hidden font-${config.inner.font} transition-colors duration-${config.inner.duration} disabled:cursor-not-allowed disabled:opacity-75`]:
+            [`@apply relative ${prefix}focus w-${config.inner.width} flex cursor-pointer items-center overflow-hidden disabled:cursor-not-allowed disabled:opacity-75`]:
+              {},
+            //Font
+            [`@apply font-${config.inner.font.family}`]: {},
+            //Transition
+            [`@apply transition-${config.inner.transition.property} duration-${config.inner.transition.duration}`]:
               {},
           },
+          //Input:addon
           [`.${prefix}input-file-addon`]: {
             [`@apply pointer-events-none flex shrink-0 items-center justify-center gap-1 transition-colors duration-100`]:
               {},
           },
+          //Input:placeholder
           [`.${prefix}input-file-placeholder`]: {
-            [`@apply font-${config.placeholder.font} text-${config.placeholder.textSize} text-${config.placeholder.text}`]:
+            //Base
+            [`@apply font-${config.placeholder.font.family} text-${config.placeholder.font.size}`]:
+              {},
+            //Color
+            [`@apply text-${config.placeholder.font.color.light} dark:text-${config.placeholder.font.color.dark}`]:
               {},
           },
+          //Input:text
           [`.${prefix}input-file-text`]: {
-            [`@apply ms-2 inline-flex truncate text-${config.text.text}`]: {},
+            [`@apply ms-2 inline-flex truncate text-${config.font.color.light} dark:text-${config.font.color.dark}`]:
+              {},
           },
+          //Input:placeload
           [`.${prefix}input-file-placeload`]: {
             [`@apply absolute -end-8 flex w-[70%] items-center`]: {},
 
@@ -50,67 +67,121 @@ export default plugin.withOptions(
               [`@apply h-3 w-full max-w-[75%] rounded`]: {},
             },
           },
+          //Input:error
           [`.${prefix}input-file-error-text`]: {
-            [`@apply text-${config.error.text} mt-1 block font-${config.error.font} text-${config.error.textSize} font-${config.error.fontWeight} leading-none`]:
+            //Base
+            [`@apply mt-1 block font-${config.error.font.family} text-${config.error.font.size} font-${config.error.font.weight} leading-none`]:
+              {},
+            //Color
+            [`@apply text-${config.error.font.color.light} dark:text-${config.error.font.color.dark}`]:
               {},
           },
+          //Color:white
           [`&.${prefix}input-white`]: {
+            //Input:inner
             [`.${prefix}input-file-inner`]: {
-              [`@apply border bg-${config.white.inner.bg} border-${config.white.inner.border} text-${config.white.inner.text} placeholder:text-${config.white.inner.textPlaceholder} dark:border-${config.white.inner.borderDark} dark:bg-${config.white.inner.bgDark} dark:text-${config.white.inner.textDark} dark:placeholder:text-${config.white.inner.textPlaceholderDark}`]:
+              //Base
+              [`@apply text-${config.color.white.inner.font.color.light} dark:text-${config.color.white.inner.font.color.dark}`]:
+                {},
+              //Background
+              [`@apply bg-${config.color.white.inner.background.light} dark:bg-${config.color.white.inner.background.dark}`]:
+                {},
+              //Border
+              [`@apply border border-${config.color.white.inner.border.light} dark:border-${config.color.white.inner.border.dark}`]:
+                {},
+              //Placeholder
+              [`@apply placeholder:text-${config.color.white.inner.placeholder.light} dark:placeholder:text-${config.color.white.inner.placeholder.dark}`]:
                 {},
             },
+            //Input:addon
             [`.${prefix}input-file-addon`]: {
-              [`@apply bg-${config.white.addon.bg} border-${config.white.addon.border} dark:border-${config.white.addon.borderDark} dark:bg-${config.white.addon.bgDark} text-${config.white.addon.text} border-e`]:
+              //Background
+              [`@apply bg-${config.color.white.addon.background.light} dark:bg-${config.color.white.addon.background.dark}`]:
+                {},
+              //Color
+              [`@apply text-${config.color.white.addon.font.color.light} dark:text-${config.color.white.addon.font.color.dark}`]:
+                {},
+              //Border
+              [`@apply border-e border border-${config.color.white.addon.border.light} dark:border-${config.color.white.addon.border.dark}`]:
                 {},
             },
           },
           [`&.${prefix}input-white-contrast`]: {
+            //Input:inner
             [`.${prefix}input-file-inner`]: {
-              [`@apply border bg-${config.whiteContrast.inner.bg} border-${config.whiteContrast.inner.border} text-${config.whiteContrast.inner.text} placeholder:text-${config.whiteContrast.inner.textPlaceholder} dark:border-${config.whiteContrast.inner.borderDark} dark:bg-${config.whiteContrast.inner.bgDark} dark:text-${config.whiteContrast.inner.textDark} dark:placeholder:text-${config.whiteContrast.inner.textPlaceholderDark}`]:
+              //Base
+              [`@apply text-${config.color.whiteContrast.inner.font.color.light} dark:text-${config.color.whiteContrast.inner.font.color.dark}`]:
+                {},
+              //Background
+              [`@apply bg-${config.color.whiteContrast.inner.background.light} dark:bg-${config.color.whiteContrast.inner.background.dark}`]:
+                {},
+              //Border
+              [`@apply border border-${config.color.whiteContrast.inner.border.light} dark:border-${config.color.whiteContrast.inner.border.dark}`]:
+                {},
+              //Placeholder
+              [`@apply placeholder:text-${config.color.whiteContrast.inner.placeholder.light} dark:placeholder:text-${config.color.whiteContrast.inner.placeholder.dark}`]:
                 {},
             },
+            //Input:addon
             [`.${prefix}input-file-addon`]: {
-              [`@apply bg-${config.whiteContrast.addon.bg} border-${config.whiteContrast.addon.border} dark:border-${config.whiteContrast.addon.borderDark} dark:bg-${config.whiteContrast.addon.bgDark} text-${config.whiteContrast.addon.text} border-e`]:
+              //Background
+              [`@apply bg-${config.color.whiteContrast.addon.background.light} dark:bg-${config.color.whiteContrast.addon.background.dark}`]:
+                {},
+              //Color
+              [`@apply text-${config.color.whiteContrast.addon.font.color.light} dark:text-${config.color.whiteContrast.addon.font.color.dark}`]:
+                {},
+              //Border
+              [`@apply border-e border border-${config.color.whiteContrast.addon.border.light} dark:border-${config.color.whiteContrast.addon.border.dark}`]:
                 {},
             },
           },
+          //Input:focus
           [`&.${prefix}input-color-focus`]: {
             [`.${prefix}input-file-inner`]: {
-              [`@apply focus-within:!border-${config.colorFocus}`]: {},
+              [`@apply focus-within:!border-${config.focus.border.light} dark:focus-within:!border-${config.focus.border.dark}`]:
+                {},
             },
           },
+          //Input:loading
           [`&.${prefix}input-file-loading`]: {
             [`.${prefix}input-file-inner`]: {
               [`@apply text-transparent placeholder:text-transparent`]: {},
             },
           },
+          //Error:input
           [`&.${prefix}input-file-error`]: {
             [`.${prefix}input-file-inner`]: {
-              [`@apply border-${config.error.border}`]: {},
+              [`@apply border-${config.error.border.light} dark:border-${config.error.border.dark}`]:
+                {},
             },
           },
+          //Rounded:sm
           [`&.${prefix}input-rounded`]: {
             [`.${prefix}input-file-inner`]: {
-              [`@apply rounded-${config.rounded.default}`]: {},
+              [`@apply ${config.rounded.sm}`]: {},
             },
           },
+          //Rounded:md
           [`&.${prefix}input-smooth`]: {
             [`.${prefix}input-file-inner`]: {
-              [`@apply rounded-${config.rounded.smooth}`]: {},
+              [`@apply ${config.rounded.md}`]: {},
             },
           },
+          //Rounded:lg
           [`&.${prefix}input-curved`]: {
             [`.${prefix}input-file-inner`]: {
-              [`@apply rounded-${config.rounded.curved}`]: {},
+              [`@apply ${config.rounded.lg}`]: {},
             },
           },
+          //Rounded:full
           [`&.${prefix}input-full`]: {
             [`.${prefix}input-file-inner`]: {
-              [`@apply rounded-${config.rounded.full}`]: {},
+              [`@apply ${config.rounded.full}`]: {},
             },
           },
+          //Without icon && Size:sm
           [`&.${prefix}input-sm:not(.${prefix}has-icon)`]: {
-            [`@apply text-${config.hasNotIcon.sm} leading-4`]: {},
+            [`@apply text-${config.icon.disabled.sm.font.size} leading-4`]: {},
             [`.${prefix}input-file-inner`]: {
               [`@apply h-8 py-2 gap-1`]: {},
             },
@@ -121,8 +192,9 @@ export default plugin.withOptions(
               [`@apply top-2.5`]: {},
             },
           },
+          //With icon && Size:sm
           [`&.${prefix}input-sm.${prefix}has-icon`]: {
-            [`@apply text-${config.hasIcon.sm.text} leading-4`]: {},
+            [`@apply text-${config.icon.enabled.sm.font.size} leading-4`]: {},
             [`.${prefix}input-file-inner`]: {
               [`@apply h-8 py-2 pe-3`]: {},
             },
@@ -130,15 +202,16 @@ export default plugin.withOptions(
               [`@apply h-8 px-2`]: {},
             },
             [`.${prefix}input-file-icon`]: {
-              [`@apply w-${config.hasIcon.sm.iconSize} h-${config.hasIcon.sm.iconSize}`]:
+              [`@apply w-${config.icon.enabled.sm.icon.size} h-${config.icon.enabled.sm.icon.size}`]:
                 {},
             },
             [`.${prefix}input-file-placeload`]: {
               [`@apply top-2.5`]: {},
             },
           },
+          //Without icon && Size:md
           [`&.${prefix}input-md:not(.${prefix}has-icon)`]: {
-            [`@apply text-${config.hasNotIcon.md} leading-5`]: {},
+            [`@apply text-${config.icon.disabled.md.font.size} leading-5`]: {},
             [`.${prefix}input-file-inner`]: {
               [`@apply h-10 gap-2`]: {},
             },
@@ -149,8 +222,9 @@ export default plugin.withOptions(
               [`@apply top-3.5`]: {},
             },
           },
+          //With icon && Size:md
           [`&.${prefix}input-md.${prefix}has-icon`]: {
-            [`@apply text-${config.hasIcon.md.text} leading-5`]: {},
+            [`@apply text-${config.icon.enabled.md.font.size} leading-5`]: {},
             [`.${prefix}input-file-inner`]: {
               [`@apply h-10 pe-4`]: {},
             },
@@ -158,15 +232,16 @@ export default plugin.withOptions(
               [`@apply h-10 px-3`]: {},
             },
             [`.${prefix}input-file-icon`]: {
-              [`@apply w-${config.hasIcon.md.iconSize} h-${config.hasIcon.md.iconSize}`]:
+              [`@apply w-${config.icon.enabled.md.icon.size} h-${config.icon.enabled.md.icon.size}`]:
                 {},
             },
             [`.${prefix}input-file-placeload`]: {
               [`@apply top-3.5`]: {},
             },
           },
+          //Without icon && Size:lg
           [`&.${prefix}input-lg:not(.${prefix}has-icon)`]: {
-            [`@apply text-${config.hasNotIcon.lg} leading-5`]: {},
+            [`@apply text-${config.icon.disabled.lg.font.size} leading-5`]: {},
             [`.${prefix}input-file-inner`]: {
               [`@apply h-12 gap-2`]: {},
             },
@@ -177,8 +252,9 @@ export default plugin.withOptions(
               [`@apply top-[1.2rem]`]: {},
             },
           },
+          //With icon && Size:lg
           [`&.${prefix}input-lg.${prefix}has-icon`]: {
-            [`@apply text-${config.hasIcon.lg.text} leading-5`]: {},
+            [`@apply text-${config.icon.enabled.lg.font.size} leading-5`]: {},
             [`.${prefix}input-file-inner`]: {
               [`@apply h-12 pe-4`]: {},
             },
@@ -186,26 +262,31 @@ export default plugin.withOptions(
               [`@apply h-12 px-4`]: {},
             },
             [`.${prefix}input-file-icon`]: {
-              [`@apply w-${config.hasIcon.lg.iconSize} h-${config.hasIcon.lg.iconSize}`]:
+              [`@apply w-${config.icon.enabled.lg.icon.size} h-${config.icon.enabled.lg.icon.size}`]:
                 {},
             },
             [`.${prefix}input-file-placeload`]: {
               [`@apply top-[1.2rem]`]: {},
             },
           },
+          //Input:hover
           [`&:hover`]: {
             [`.${prefix}input-file-addon`]: {
-              [`@apply text-${config.hover}`]: {},
+              [`@apply text-${config.hover.font.color.light} dark:text-${config.hover.font.color.dark}`]:
+                {},
             },
           },
+          //Input:disabled
           [`&:disabled`]: {
             [`.${prefix}input-file-addon`]: {
               [`@apply cursor-not-allowed opacity-75`]: {},
             },
           },
+          //Input:focus
           [`&:focus-within`]: {
             [`.${prefix}input-file-addon`]: {
-              [`@apply text-${config.focusWhitin}`]: {},
+              [`@apply text-${config.focus.font.color.light} dark:text-${config.focus.font.color.dark}`]:
+                {},
             },
           },
         },
diff --git a/src/plugins/components/input-file-regular/input-file-regular.component.ts b/src/plugins/components/input-file-regular/input-file-regular.component.ts
index b3598ea..406144d 100644
--- a/src/plugins/components/input-file-regular/input-file-regular.component.ts
+++ b/src/plugins/components/input-file-regular/input-file-regular.component.ts
@@ -10,7 +10,7 @@ import * as variants from './input-file-regular.variants'
 export const InputFileRegular = ({
   id,
   textValue,
-  shape = 'rounded',
+  rounded = 'sm',
   size = 'md',
   label,
   loading,
@@ -33,7 +33,7 @@ export const InputFileRegular = ({
       class=${[
         'nui-input-file-regular',
         size && variants.size[size],
-        shape && variants.shape[shape],
+        rounded && variants.rounded[rounded],
         contrast && variants.contrast[contrast],
         error && !loading && 'nui-input-file-error',
         loading && 'nui-input-file-loading',
diff --git a/src/plugins/components/input-file-regular/input-file-regular.config.ts b/src/plugins/components/input-file-regular/input-file-regular.config.ts
index 58881d0..7afe671 100644
--- a/src/plugins/components/input-file-regular/input-file-regular.config.ts
+++ b/src/plugins/components/input-file-regular/input-file-regular.config.ts
@@ -1,92 +1,200 @@
 export const key = 'inputFileRegular' as const
 
 export const defaultConfig = {
-  inner: {
-    size: 'full',
-    font: 'sans',
-    duration: '300',
+  font: {
+    color: {
+      light: 'muted-400',
+      dark: 'muted-400',
+    },
   },
-  placeholder: {
-    font: 'sans',
-    text: 'muted-400',
-    textSize: 'xs',
+  rounded: {
+    sm: 'rounded-md',
+    md: 'rounded-lg',
+    lg: 'rounded-xl',
+    full: 'rounded-full',
   },
-  text: {
-    text: 'muted-400',
+  inner: {
+    width: 'full',
+    font: {
+      family: 'sans',
+    },
+    transition: {
+      property: 'colors',
+      duration: '300',
+    },
   },
-  error: {
-    text: 'danger-600',
-    textSize: '[0.65rem]',
-    font: 'sans',
-    fontWeight: 'medium',
-    border: 'danger-500',
+  placeholder: {
+    font: {
+      family: 'sans',
+      size: 'xs',
+      color: {
+        light: 'muted-400',
+        dark: 'muted-400',
+      },
+    },
   },
-  white: {
-    inner: {
-      bg: 'white',
-      bgDark: 'muted-800',
-      border: 'muted-300',
-      borderDark: 'muted-700',
-      text: 'muted-600',
-      textDark: 'muted-200',
-      textPlaceholder: 'muted-300',
-      textPlaceholderDark: 'muted-500',
+  hover: {
+    border: {
+      light: 'primary-500',
+      dark: 'primary-500',
     },
-    addon: {
-      bg: 'muted-50',
-      bgDark: 'muted-800',
-      border: 'muted-300',
-      borderDark: 'muted-700',
-      text: 'muted-400',
+    font: {
+      color: {
+        light: 'primary-500',
+        dark: 'primary-500',
+      },
     },
   },
-  whiteContrast: {
-    inner: {
-      bg: 'white',
-      bgDark: 'muted-900/75',
-      border: 'muted-300',
-      borderDark: 'muted-800',
-      text: 'muted-600',
-      textDark: 'muted-200',
-      textPlaceholder: 'muted-300',
-      textPlaceholderDark: 'muted-600',
+  focus: {
+    border: {
+      light: 'primary-500',
+      dark: 'primary-500',
     },
-    addon: {
-      bg: 'muted-50',
-      bgDark: 'muted-950',
-      border: 'muted-300',
-      borderDark: 'muted-800',
-      text: 'muted-400',
+    font: {
+      color: {
+        light: 'primary-500',
+        dark: 'primary-500',
+      },
     },
   },
-  colorFocus: 'primary-500',
-  rounded: {
-    default: 'md',
-    smooth: 'lg',
-    curved: 'xl',
-    full: 'full',
-  },
-  hasNotIcon: {
-    sm: 'xs',
-    md: '[0.825rem]',
-    lg: 'sm',
+  error: {
+    font: {
+      family: 'sans',
+      size: '[0.65rem]',
+      weight: 'medium',
+      color: {
+        light: 'danger-600',
+        dark: 'danger-600',
+      },
+    },
+    border: {
+      light: 'danger-500',
+      dark: 'danger-500',
+    },
   },
-  hasIcon: {
-    sm: {
-      text: 'xs',
-      iconSize: '3',
+  color: {
+    white: {
+      inner: {
+        background: {
+          light: 'white',
+          dark: 'muted-800',
+        },
+        border: {
+          light: 'muted-300',
+          dark: 'muted-700',
+        },
+        font: {
+          color: {
+            light: 'muted-600',
+            dark: 'muted-200',
+          },
+        },
+        placeholder: {
+          light: 'muted-300',
+          dark: 'muted-500',
+        },
+      },
+      addon: {
+        background: {
+          light: 'muted-50',
+          dark: 'muted-800',
+        },
+        border: {
+          light: 'muted-300',
+          dark: 'muted-700',
+        },
+        font: {
+          color: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+      },
     },
-    md: {
-      text: '[0.825rem]',
-      iconSize: '4',
+    whiteContrast: {
+      inner: {
+        background: {
+          light: 'white',
+          dark: 'muted-950',
+        },
+        border: {
+          light: 'muted-300',
+          dark: 'muted-800',
+        },
+        font: {
+          color: {
+            light: 'muted-600',
+            dark: 'muted-200',
+          },
+        },
+        placeholder: {
+          light: 'muted-300',
+          dark: 'muted-600',
+        },
+      },
+      addon: {
+        background: {
+          light: 'muted-50',
+          dark: 'muted-950',
+        },
+        border: {
+          light: 'muted-300',
+          dark: 'muted-800',
+        },
+        font: {
+          color: {
+            light: 'muted-400',
+            dark: 'muted-400',
+          },
+        },
+      },
+    },
+  },
+  icon: {
+    disabled: {
+      sm: {
+        font: {
+          size: 'xs',
+        },
+      },
+      md: {
+        font: {
+          size: '[0.825rem]',
+        },
+      },
+      lg: {
+        font: {
+          size: 'sm',
+        },
+      },
     },
-    lg: {
-      text: 'sm',
-      iconSize: '5',
+    enabled: {
+      sm: {
+        font: {
+          size: 'xs',
+        },
+        icon: {
+          size: '3',
+        },
+      },
+      md: {
+        font: {
+          size: '[0.825rem]',
+        },
+        icon: {
+          size: '4',
+        },
+      },
+      lg: {
+        font: {
+          size: 'sm',
+        },
+        icon: {
+          size: '5',
+        },
+      },
     },
   },
-  hover: 'primary-500',
-  focusWhitin: 'primary-500',
 }
 
 export type InputFileRegularConfig = typeof defaultConfig
diff --git a/src/plugins/components/input-file-regular/input-file-regular.doc.mdx b/src/plugins/components/input-file-regular/input-file-regular.doc.mdx
index 43fb85a..16459c8 100644
--- a/src/plugins/components/input-file-regular/input-file-regular.doc.mdx
+++ b/src/plugins/components/input-file-regular/input-file-regular.doc.mdx
@@ -18,7 +18,7 @@ File inputs are an essential part of any application. Shuriken UI file inputs ca
 
 <br />
 
-### Shape: straight
+### Rounded: none
 
 File input shapes allow you to change the border radiuses. Below is an example of a straight input.
 
@@ -28,7 +28,7 @@ File input shapes allow you to change the border radiuses. Below is an example o
 
 <br />
 
-### Shape: rounded
+### Rounded: sm
 
 File input shapes allow you to change the border radiuses. Below is an example of a rounded input.
 
@@ -38,7 +38,7 @@ File input shapes allow you to change the border radiuses. Below is an example o
 
 <br />
 
-### Shape: smooth
+### Rounded: md
 
 File input shapes allow you to change the border radiuses. Below is an example of a smooth input.
 
@@ -48,7 +48,7 @@ File input shapes allow you to change the border radiuses. Below is an example o
 
 <br />
 
-### Shape: curved
+### Rounded: lg
 
 File input shapes allow you to change the border radiuses. Below is an example of a curved input.
 
@@ -58,7 +58,7 @@ File input shapes allow you to change the border radiuses. Below is an example o
 
 <br />
 
-### Shape: full
+### Rounded: full
 
 File input shapes allow you to change the border radiuses. Below is an example of a full input.
 
diff --git a/src/plugins/components/input-file-regular/input-file-regular.stories.ts b/src/plugins/components/input-file-regular/input-file-regular.stories.ts
index 5dfa106..3ce2b16 100644
--- a/src/plugins/components/input-file-regular/input-file-regular.stories.ts
+++ b/src/plugins/components/input-file-regular/input-file-regular.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: 'none',
     },
     contrast: {
       control: { type: 'select' },
@@ -69,7 +69,7 @@ export const Main: Story = {
   args: {
     label: 'Upload files',
     size: 'md',
-    shape: 'rounded',
+    rounded: 'sm',
     id: 'input-file',
     placeholder: 'Select files',
     classes: {
@@ -79,14 +79,14 @@ export const Main: Story = {
 }
 // #endregion
 
-// #region Shapes
+// #region Rounded
 export const Straight: Story = {
-  name: 'Shape: straight',
+  name: 'Rounded: none',
   args: {
     id: 'input-file',
     label: 'Upload files',
     size: 'md',
-    shape: 'straight',
+    rounded: 'none',
     placeholder: 'Select files',
     classes: {
       wrapper: 'min-w-[320px] max-w-[320px]',
@@ -95,12 +95,12 @@ export const Straight: Story = {
 }
 
 export const Rounded: Story = {
-  name: 'Shape: rounded',
+  name: 'Rounded: sm',
   args: {
     id: 'input-file',
     label: 'Upload files',
     size: 'md',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Select files',
     classes: {
       wrapper: 'min-w-[320px] max-w-[320px]',
@@ -109,12 +109,12 @@ export const Rounded: Story = {
 }
 
 export const Smooth: Story = {
-  name: 'Shape: smooth',
+  name: 'Rounded: md',
   args: {
     id: 'input-file',
     label: 'Upload files',
     size: 'md',
-    shape: 'smooth',
+    rounded: 'md',
     placeholder: 'Select files',
     classes: {
       wrapper: 'min-w-[320px] max-w-[320px]',
@@ -123,12 +123,12 @@ export const Smooth: Story = {
 }
 
 export const Curved: Story = {
-  name: 'Shape: curved',
+  name: 'Rounded: lg',
   args: {
     id: 'input-file',
     label: 'Upload files',
     size: 'md',
-    shape: 'curved',
+    rounded: 'lg',
     placeholder: 'Select files',
     classes: {
       wrapper: 'min-w-[320px] max-w-[320px]',
@@ -137,12 +137,12 @@ export const Curved: Story = {
 }
 
 export const Full: Story = {
-  name: 'Shape: full',
+  name: 'Rounded: full',
   args: {
     id: 'input-file',
     label: 'Upload files',
     size: 'md',
-    shape: 'full',
+    rounded: 'full',
     placeholder: 'Select files',
     classes: {
       wrapper: 'min-w-[320px] max-w-[320px]',
@@ -158,7 +158,7 @@ export const SizeSm: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'sm',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Select files',
     classes: {
       wrapper: 'min-w-[260px] max-w-[260px]',
@@ -172,7 +172,7 @@ export const SizeMd: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'md',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Select files',
     classes: {
       wrapper: 'min-w-[260px] max-w-[260px]',
@@ -186,7 +186,7 @@ export const SizeLg: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'lg',
-    shape: 'rounded',
+    rounded: 'sm',
     placeholder: 'Select files',
     classes: {
       wrapper: 'min-w-[260px] max-w-[260px]',
@@ -202,7 +202,7 @@ export const ColorFocusSm: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'sm',
-    shape: 'rounded',
+    rounded: 'sm',
     colorFocus: true,
     placeholder: 'Select file',
     classes: {
@@ -217,7 +217,7 @@ export const ColorFocusMd: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'md',
-    shape: 'rounded',
+    rounded: 'sm',
     colorFocus: true,
     placeholder: 'Select file',
     classes: {
@@ -232,7 +232,7 @@ export const ColorFocusLg: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'lg',
-    shape: 'rounded',
+    rounded: 'sm',
     colorFocus: true,
     placeholder: 'Select file',
     classes: {
@@ -249,7 +249,7 @@ export const DisabledSm: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'sm',
-    shape: 'rounded',
+    rounded: 'sm',
     '?disabled': true,
     placeholder: 'Select file',
     classes: {
@@ -264,7 +264,7 @@ export const DisabledMd: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'md',
-    shape: 'rounded',
+    rounded: 'sm',
     '?disabled': true,
     placeholder: 'Select file',
     classes: {
@@ -279,7 +279,7 @@ export const DisabledLg: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'lg',
-    shape: 'rounded',
+    rounded: 'sm',
     '?disabled': true,
     placeholder: 'Select file',
     classes: {
@@ -296,7 +296,7 @@ export const LoadingSm: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'sm',
-    shape: 'rounded',
+    rounded: 'sm',
     loading: true,
     placeholder: 'Select file',
     classes: {
@@ -311,7 +311,7 @@ export const LoadingMd: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'md',
-    shape: 'rounded',
+    rounded: 'sm',
     loading: true,
     placeholder: 'Select file',
     classes: {
@@ -326,7 +326,7 @@ export const LoadingLg: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'lg',
-    shape: 'rounded',
+    rounded: 'sm',
     loading: true,
     placeholder: 'Select file',
     classes: {
@@ -343,7 +343,7 @@ export const ErrorSm: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'sm',
-    shape: 'rounded',
+    rounded: 'sm',
     error: 'Please select valid files',
     placeholder: 'Select file',
     classes: {
@@ -358,7 +358,7 @@ export const ErrorMd: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'md',
-    shape: 'rounded',
+    rounded: 'sm',
     error: 'Please select valid files',
     placeholder: 'Select file',
     classes: {
@@ -373,7 +373,7 @@ export const ErrorLg: Story = {
     id: 'input-file',
     label: 'Upload files',
     size: 'lg',
-    shape: 'rounded',
+    rounded: 'sm',
     error: 'Please select valid files',
     placeholder: 'Select file',
     classes: {
diff --git a/src/plugins/components/input-file-regular/input-file-regular.types.ts b/src/plugins/components/input-file-regular/input-file-regular.types.ts
index 7052af5..0aa2a4b 100644
--- a/src/plugins/components/input-file-regular/input-file-regular.types.ts
+++ b/src/plugins/components/input-file-regular/input-file-regular.types.ts
@@ -2,7 +2,7 @@ import type { PropertyVariant } from '~/types/utils'
 
 export interface InputFileRegularProps extends Record<string, unknown> {
   id?: string
-  shape?: 'straight' | 'rounded' | 'smooth' | 'curved' | 'full'
+  rounded?: 'none' | 'sm' | 'md' | 'lg' | 'full'
   label?: string
   placeholder?: string
   colorFocus?: boolean
diff --git a/src/plugins/components/input-file-regular/input-file-regular.variants.ts b/src/plugins/components/input-file-regular/input-file-regular.variants.ts
index b8f04a2..ec0dd1f 100644
--- a/src/plugins/components/input-file-regular/input-file-regular.variants.ts
+++ b/src/plugins/components/input-file-regular/input-file-regular.variants.ts
@@ -1,12 +1,12 @@
 import type { InputFileRegularVariant } from './input-file-regular.types'
 
-export const shape = {
-  straight: '',
-  rounded: 'nui-input-rounded',
-  smooth: 'nui-input-smooth',
-  curved: 'nui-input-curved',
+export const rounded = {
+  none: '',
+  sm: 'nui-input-rounded',
+  md: 'nui-input-smooth',
+  lg: 'nui-input-curved',
   full: 'nui-input-full',
-} as const satisfies InputFileRegularVariant<'shape'>
+} as const satisfies InputFileRegularVariant<'rounded'>
 
 export const size = {
   sm: 'nui-input-sm',