fix(theme): sync with input theme on labelPlacement (#4597)

* fix(theme): sync with input theme on labelPlacement

* chore(select): revise width for labelPlacement

* chore(changeset): add changeset

.changeset/serious-sheep-camp.md

@@ -0,0 +1,5 @@
+---
+"@heroui/theme": patch
+---
+
+sync with input theme on labelPlacement (#4593)

packages/components/select/stories/select.stories.tsx

@@ -385,7 +385,7 @@ const MirrorTemplate = ({color, variant, ...args}: SelectProps) => (
 
 const LabelPlacementTemplate = ({color, variant, ...args}: SelectProps) => (
   <div className="w-full flex flex-col items-center gap-12">
-    <div className="w-full max-w-2xl flex flex-col gap-3">
+    <div className="w-full max-w-5xl flex flex-col gap-3">
       <h3>Without placeholder</h3>
       <div className="w-full flex flex-row items-end gap-4">
         <Select color={color} label="Select an animal" variant={variant} {...args}>
@@ -411,7 +411,7 @@ const LabelPlacementTemplate = ({color, variant, ...args}: SelectProps) => (
         </Select>
       </div>
     </div>
-    <div className="w-full max-w-2xl flex flex-col gap-3">
+    <div className="w-full max-w-5xl flex flex-col gap-3">
       <h3>With placeholder</h3>
       <div className="w-full flex flex-row items-end gap-4">
         <Select
@@ -445,7 +445,7 @@ const LabelPlacementTemplate = ({color, variant, ...args}: SelectProps) => (
         </Select>
       </div>
     </div>
-    <div className="w-full max-w-2xl flex flex-col gap-3">
+    <div className="w-full max-w-5xl flex flex-col gap-3">
       <h3>With placeholder and description</h3>
       <div className="w-full flex flex-row items-end gap-4">
         <Select

packages/core/theme/src/components/select.ts

@@ -11,6 +11,7 @@ const select = tv({
       "absolute",
       "z-10",
       "origin-top-left",
+      "flex-shrink-0",
       // Using RTL here as Tailwind CSS doesn't support `start` and `end` logical properties for transforms yet.
       "rtl:origin-top-right",
       "subpixel-antialiased",
@@ -29,7 +30,7 @@ const select = tv({
     listboxWrapper: "scroll-py-6 w-full",
     listbox: "",
     popoverContent: "w-full p-1 overflow-hidden",
-    helperWrapper: "p-1 flex relative flex-col gap-1.5",
+    helperWrapper: "p-1 flex relative flex-col gap-1.5 group-data-[has-helper=true]:flex",
     description: "text-tiny text-foreground-400",
     errorMessage: "text-tiny text-danger",
   },
@@ -143,7 +144,7 @@ const select = tv({
         base: "flex flex-col",
       },
       "outside-left": {
-        base: "flex-row items-center flex-nowrap items-start",
+        base: "flex-row items-center flex-nowrap data-[has-helper=true]:items-start",
         label: "relative pe-2 text-foreground",
       },
       inside: {
@@ -718,6 +719,28 @@ const select = tv({
         base: "data-[has-label=true]:mt-[calc(theme(fontSize.small)_+_12px)]",
       },
     },
+    // outside-left & size & hasHelper
+    {
+      labelPlacement: "outside-left",
+      size: "sm",
+      class: {
+        label: "group-data-[has-helper=true]:pt-2",
+      },
+    },
+    {
+      labelPlacement: "outside-left",
+      size: "md",
+      class: {
+        label: "group-data-[has-helper=true]:pt-3",
+      },
+    },
+    {
+      labelPlacement: "outside-left",
+      size: "lg",
+      class: {
+        label: "group-data-[has-helper=true]:pt-4",
+      },
+    },
     // isMultiline & labelPlacement="outside"
     {
       labelPlacement: "outside",