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

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 {

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>
   );
 };