From ad4d331cd3edfea020452214b7e550777b29aaee Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 19 Jan 2025 13:02:10 +0800
Subject: [PATCH 1/3] fix(theme): sync with input theme on labelPlacement

---
 packages/core/theme/src/components/select.ts | 27 ++++++++++++++++++--
 1 file changed, 25 insertions(+), 2 deletions(-)

diff --git a/packages/core/theme/src/components/select.ts b/packages/core/theme/src/components/select.ts
index 32d20ff1dd..db4a8452f9 100644
--- a/packages/core/theme/src/components/select.ts
+++ b/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: {
@@ -719,6 +720,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",

From 65dbcfe26c8a48b58e73d4ed728767a80f7c9a4b Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 19 Jan 2025 13:02:42 +0800
Subject: [PATCH 2/3] chore(select): revise width for labelPlacement

---
 packages/components/select/stories/select.stories.tsx | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/packages/components/select/stories/select.stories.tsx b/packages/components/select/stories/select.stories.tsx
index 209dfafca4..531da2f07b 100644
--- a/packages/components/select/stories/select.stories.tsx
+++ b/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

From be3b0d443fc84eac2e7e071872cdb7bf7eb4ae72 Mon Sep 17 00:00:00 2001
From: WK Wong <wingkwong.code@gmail.com>
Date: Sun, 19 Jan 2025 13:05:15 +0800
Subject: [PATCH 3/3] chore(changeset): add changeset

---
 .changeset/serious-sheep-camp.md | 5 +++++
 1 file changed, 5 insertions(+)
 create mode 100644 .changeset/serious-sheep-camp.md

diff --git a/.changeset/serious-sheep-camp.md b/.changeset/serious-sheep-camp.md
new file mode 100644
index 0000000000..ccb7dc9c86
--- /dev/null
+++ b/.changeset/serious-sheep-camp.md
@@ -0,0 +1,5 @@
+---
+"@heroui/theme": patch
+---
+
+sync with input theme on labelPlacement (#4593)