fix(number-stepper): stepper button pseudo height (#4968)

heroui-inc · Mar 8, 2025 · e9c67fa · e9c67fa
1 parent 6f94545
commit e9c67fa
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 2 deletions.
diff --git a/.changeset/chatty-planets-talk.md b/.changeset/chatty-planets-talk.md
@@ -0,0 +1,5 @@
+---
+"@heroui/theme": patch
+---
+
+fixed stepper button pseudo height in number-input (#4920)
diff --git a/packages/core/theme/src/components/number-input.ts b/packages/core/theme/src/components/number-input.ts
@@ -708,6 +708,7 @@ const numberInput = tv({
       size: ["sm", "md"],
       class: {
         label: "text-small",
+        stepperButton: "before:h-6",
       },
     },
     // inside & size & [faded, bordered]
@@ -786,6 +787,7 @@ const numberInput = tv({
           "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.tiny)/2_+_16px)]",
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_8px)]",
+        stepperButton: "before:h-4",
       },
     },
     {
@@ -799,6 +801,7 @@ const numberInput = tv({
           "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_20px)]",
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_10px)]",
+        stepperButton: "before:h-4",
       },
     },
     {
@@ -812,7 +815,7 @@ const numberInput = tv({
           "group-data-[filled-within=true]:-translate-y-[calc(100%_+_theme(fontSize.small)/2_+_24px)]",
         ],
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]",
-        stepperButton: "min-4 w-4 h-4",
+        stepperButton: "min-4 w-4 h-4 before:h-6",
       },
     },
     // outside-left & size & hasHelper
@@ -821,21 +824,23 @@ const numberInput = tv({
       size: "sm",
       class: {
         label: "group-data-[has-helper=true]:pt-2",
+        stepperButton: "before:h-4",
       },
     },
     {
       labelPlacement: "outside-left",
       size: "md",
       class: {
         label: "group-data-[has-helper=true]:pt-3",
+        stepperButton: "before:h-4",
       },
     },
     {
       labelPlacement: "outside-left",
       size: "lg",
       class: {
         label: "group-data-[has-helper=true]:pt-4",
-        stepperButton: "min-4 w-4 h-4",
+        stepperButton: "min-4 w-4 h-4 before:h-6",
       },
     },
     // text truncate labelPlacement=[inside,outside]