From b7b1b86d8abb241d224c061307e23d6c89f625bb Mon Sep 17 00:00:00 2001
From: Charles de Dreuille <charles.dedreuille@gmail.com>
Date: Sat, 14 Mar 2026 18:11:39 +0000
Subject: [PATCH] fix(ui): update ListBox item check and icon design

- Check icon is now only rendered when the item is selected, so it
  takes no space when unselected and pushes content in when selected
- Icon slot is now a fixed 32x32px box to consistently frame any
  React icon component (e.g. from Remix icons)

Signed-off-by: Charles de Dreuille <charles.dedreuille@gmail.com>
Made-with: Cursor
---
 .../src/components/ListBox/ListBox.module.css | 10 ++-----
 .../ui/src/components/ListBox/ListBox.tsx     | 30 +++++++++++--------
 2 files changed, 20 insertions(+), 20 deletions(-)

diff --git a/packages/ui/src/components/ListBox/ListBox.module.css b/packages/ui/src/components/ListBox/ListBox.module.css
index 7b26605a8c..4862aa6607 100644
--- a/packages/ui/src/components/ListBox/ListBox.module.css
+++ b/packages/ui/src/components/ListBox/ListBox.module.css
@@ -50,12 +50,6 @@
       background-color: var(--bui-bg-neutral-2);
     }
 
-    &[data-selected] {
-      .bui-ListBoxItemCheck {
-        opacity: 1;
-      }
-    }
-
     &[data-disabled] {
       cursor: not-allowed;
       color: var(--bui-fg-disabled);
@@ -67,8 +61,6 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
-    opacity: 0;
-    transition: opacity 0.2s ease-in-out;
     width: 1rem;
     height: 1rem;
 
@@ -83,6 +75,8 @@
     align-items: center;
     justify-content: center;
     flex-shrink: 0;
+    width: 2rem;
+    height: 2rem;
     color: var(--bui-fg-secondary);
 
     & svg {
diff --git a/packages/ui/src/components/ListBox/ListBox.tsx b/packages/ui/src/components/ListBox/ListBox.tsx
index 91ffbae50a..51d7132dce 100644
--- a/packages/ui/src/components/ListBox/ListBox.tsx
+++ b/packages/ui/src/components/ListBox/ListBox.tsx
@@ -62,18 +62,24 @@ export const ListBoxItem = (props: ListBoxItemProps) => {
       className={classes.root}
       {...restProps}
     >
-      <div className={classes.check}>
-        <RiCheckLine />
-      </div>
-      {icon && <span className={classes.icon}>{icon}</span>}
-      <div className={classes.label}>
-        <Text slot="label">{children}</Text>
-        {description && (
-          <Text slot="description" className={classes.description}>
-            {description}
-          </Text>
-        )}
-      </div>
+      {({ isSelected }) => (
+        <>
+          {isSelected && (
+            <div className={classes.check}>
+              <RiCheckLine />
+            </div>
+          )}
+          {icon && <div className={classes.icon}>{icon}</div>}
+          <div className={classes.label}>
+            <Text slot="label">{children}</Text>
+            {description && (
+              <Text slot="description" className={classes.description}>
+                {description}
+              </Text>
+            )}
+          </div>
+        </>
+      )}
     </RAListBoxItem>
   );
 };