refactor(ui): Improve SelectOption consistency

packages/ui/src/components/APIKeys/CreateAPIKeyForm.tsx

@@ -8,7 +8,6 @@ import { Form } from '@/ui/elements/Form';
 import { FormButtons } from '@/ui/elements/FormButtons';
 import { FormContainer } from '@/ui/elements/FormContainer';
 import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
-import { ChevronUpDown } from '@/ui/icons';
 import { mqu } from '@/ui/styledSystem';
 import { useFormControl } from '@/ui/utils/useFormControl';
 
@@ -99,20 +98,14 @@ const ExpirationSelector: React.FC<ExpirationSelectorProps> = ({ selectedExpirat
     >
       <SelectButton
         ref={buttonRef}
-        icon={ChevronUpDown}
         sx={t => ({
           justifyContent: 'space-between',
           backgroundColor: t.colors.$colorBackground,
         })}
         aria-labelledby='expiration-field'
         id='expiration-field'
       />
-      <SelectOptionList
-        sx={t => ({
-          paddingBlock: t.space.$1,
-          color: t.colors.$colorForeground,
-        })}
-      />
+      <SelectOptionList />
     </Select>
   );
 };

packages/ui/src/components/Checkout/CheckoutForm.tsx

@@ -15,7 +15,7 @@ import { handleError } from '@/ui/utils/errorHandler';
 import { DevOnly } from '../../common/DevOnly';
 import { useCheckoutContext, usePaymentMethods } from '../../contexts';
 import { Box, Button, Col, descriptors, Flex, Form, localizationKeys, Spinner, Text } from '../../customizables';
-import { ChevronUpDown, InformationCircle } from '../../icons';
+import { InformationCircle } from '../../icons';
 import type { PropsOfComponent, ThemableCssProp } from '../../styledSystem';
 import * as AddPaymentMethod from '../PaymentMethods/AddPaymentMethod';
 import { PaymentMethodRow } from '../PaymentMethods/PaymentMethodRow';
@@ -496,20 +496,14 @@ const ExistingPaymentMethodForm = withCardStateProvider(
               value={selectedPaymentMethod?.id}
             />
             <SelectButton
-              icon={ChevronUpDown}
               sx={t => ({
                 justifyContent: 'space-between',
                 backgroundColor: t.colors.$colorBackground,
               })}
             >
               {selectedPaymentMethod && <PaymentMethodRow paymentMethod={selectedPaymentMethod} />}
             </SelectButton>
-            <SelectOptionList
-              sx={t => ({
-                paddingBlock: t.space.$1,
-                color: t.colors.$colorForeground,
-              })}
-            />
+            <SelectOptionList />
           </Select>
         ) : (
           <input

packages/ui/src/components/OAuthConsent/OrgSelect.tsx

@@ -1,11 +1,9 @@
 import { useRef } from 'react';
 
 import { InfiniteListSpinner } from '@/ui/common/InfiniteListSpinner';
-import { Box, Icon, Image, Text } from '@/ui/customizables';
-import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
+import { Image, Text } from '@/ui/customizables';
+import { Select, SelectButton, SelectOption, SelectOptionList } from '@/ui/elements/Select';
 import { useInView } from '@/ui/hooks/useInView';
-import { Check } from '@/ui/icons';
-import { common } from '@/ui/styledSystem';
 
 export type OrgOption = {
   value: string;
@@ -40,50 +38,13 @@ export function OrgSelect({ options, value, onChange, hasMore, onLoadMore }: Org
       onChange={option => onChange(option.value)}
       referenceElement={buttonRef}
       renderOption={(option, _index, isSelected) => (
-        <Box
-          as='span'
-          sx={theme => ({
-            width: '100%',
-            display: 'grid',
-            gridTemplateColumns: `${theme.sizes.$5} 1fr ${theme.sizes.$3}`,
-            columnGap: theme.space.$2,
-            paddingInlineStart: theme.space.$1,
-            paddingInlineEnd: theme.space.$1x5,
-            paddingBlock: theme.space.$1,
-            alignItems: 'center',
-            borderRadius: theme.radii.$md,
-            '&:hover, &[data-focused="true"]': {
-              background: common.mutedBackground(theme),
-            },
-          })}
-        >
-          <Image
+        <SelectOption isSelected={isSelected}>
+          <SelectOption.Image
             src={option.logoUrl}
             alt={option.label}
-            sx={theme => ({
-              width: theme.sizes.$5,
-              height: theme.sizes.$5,
-              objectFit: 'contain',
-              flexShrink: 0,
-              borderRadius: theme.radii.$md,
-            })}
           />
-          <Text
-            sx={{ flex: 1, textAlign: 'start', minWidth: 0, maxInlineSize: '200px' }}
-            truncate
-            as='span'
-            variant='subtitle'
-          >
-            {option.label}
-          </Text>
-          {isSelected && (
-            <Icon
-              icon={Check}
-              size='sm'
-              sx={theme => ({ color: theme.colors.$primary500 })}
-            />
-          )}
-        </Box>
+          <SelectOption.Label>{option.label}</SelectOption.Label>
+        </SelectOption>
       )}
     >
       <SelectButton

packages/ui/src/components/OrganizationProfile/MemberListTable.tsx

@@ -1,7 +1,7 @@
-import React, { memo, useMemo } from 'react';
+import React, { useMemo } from 'react';
 
 import { Pagination } from '@/ui/elements/Pagination';
-import { Select, SelectButton, SelectOptionList } from '@/ui/elements/Select';
+import { Select, SelectButton, SelectOption, SelectOptionList } from '@/ui/elements/Select';
 
 import type { LocalizationKey } from '../../customizables';
 import {
@@ -175,10 +175,9 @@ export const RoleSelect = (props: {
       placeholder={t(localizationKeys('organizationProfile.invitePage.selectDropdown__role'))}
       onChange={role => onChange(role.value)}
       renderOption={(option, _index, isSelected) => (
-        <RolesListItem
-          isSelected={isSelected}
-          option={option}
-        />
+        <SelectOption isSelected={isSelected}>
+          <SelectOption.Label>{option.label}</SelectOption.Label>
+        </SelectOption>
       )}
     >
       {/*Store value inside an input in order to be accessible as form data*/}
@@ -230,36 +229,3 @@ export const RoleSelect = (props: {
     </Select>
   );
 };
-
-type RolesListItemProps = PropsOfComponent<typeof Flex> & {
-  isSelected?: boolean;
-  option?: {
-    label: string;
-    value: string;
-  };
-};
-
-const RolesListItem = memo((props: RolesListItemProps) => {
-  const { option, isSelected, sx, ...rest } = props;
-  return (
-    <Flex
-      sx={[
-        theme => ({
-          width: '100%',
-          padding: `${theme.space.$2} ${theme.space.$4}`,
-          borderRadius: theme.radii.$md,
-          '&:hover': {
-            backgroundColor: theme.colors.$neutralAlpha100,
-          },
-          '&[data-focused="true"]': {
-            backgroundColor: theme.colors.$neutralAlpha150,
-          },
-        }),
-        sx,
-      ]}
-      {...rest}
-    >
-      <Text variant='subtitle'>{option?.label}</Text>
-    </Flex>
-  );
-});

packages/ui/src/components/SignIn/SignInStart.tsx

@@ -14,6 +14,7 @@ import { isWebAuthnAutofillSupported, isWebAuthnSupported } from '@clerk/shared/
 import { useEffect, useLayoutEffect, useMemo, useRef, useState } from 'react';
 
 import { Card } from '@/ui/elements/Card';
+import { Select, SelectButton, SelectOption, SelectOptionList } from '@/ui/elements/Select';
 import { useCardState, withCardStateProvider } from '@/ui/elements/contexts';
 import { Form } from '@/ui/elements/Form';
 import { Header } from '@/ui/elements/Header';
@@ -33,7 +34,7 @@ import {
   withRedirectToSignInTask,
 } from '../../common';
 import { useCoreSignIn, useEnvironment, useSignInContext } from '../../contexts';
-import { Col, descriptors, Flow, localizationKeys } from '../../customizables';
+import { Col, descriptors, Flow, localizationKeys, Text } from '../../customizables';
 import { CaptchaElement } from '../../elements/CaptchaElement';
 import { useLoadingStatus } from '../../hooks';
 import { useSupportEmail } from '../../hooks/useSupportEmail';
@@ -78,6 +79,139 @@ const useAutoFillPasskey = () => {
   };
 };
 
+// PROTOTYPE: Remove before merging
+const SelectOptionDemo = () => {
+  const [orgValue, setOrgValue] = useState<string | null>('org_1');
+  const [phoneValue, setPhoneValue] = useState<string | null>('us');
+  const [roleValue, setRoleValue] = useState<string | null>('admin');
+  const [defaultValue, setDefaultValue] = useState<string | null>('30d');
+
+  const orgOptions = [
+    { value: 'org_1', label: 'Acme Corp', logoUrl: 'https://img.clerk.com/placeholder' },
+    {
+      value: 'org_2',
+      label: 'Globex Industries Globex Industries Globex Industries',
+      logoUrl: 'https://img.clerk.com/placeholder',
+    },
+    { value: 'org_3', label: 'Initech', logoUrl: 'https://img.clerk.com/placeholder' },
+  ];
+
+  const phoneOptions = [
+    { value: 'us', label: 'United States', code: '1' },
+    { value: 'gb', label: 'United Kingdom', code: '44' },
+    { value: 'de', label: 'Germany', code: '49' },
+    { value: 'fr', label: 'France', code: '33' },
+  ];
+
+  const roleOptions = [
+    { value: 'admin', label: 'Admin' },
+    { value: 'member', label: 'Member' },
+    { value: 'guest', label: 'Guest' },
+  ];
+
+  const expirationOptions = [
+    { value: '7d', label: '7 days' },
+    { value: '30d', label: '30 days' },
+    { value: '90d', label: '90 days' },
+    { value: 'never', label: 'Never' },
+  ];
+
+  return (
+    <Col
+      gap={4}
+      sx={{ padding: '16px 0' }}
+    >
+      <Text variant='subtitle'>SelectOption Variants (prototype)</Text>
+
+      <Text
+        colorScheme='secondary'
+        sx={{ fontSize: '12px' }}
+      >
+        Image + Label (OrgSelect pattern)
+      </Text>
+      <Select
+        options={orgOptions}
+        value={orgValue}
+        onChange={option => setOrgValue(option.value)}
+        matchTriggerWidth
+        renderOption={(option, _index, isSelected) => (
+          <SelectOption isSelected={isSelected}>
+            <SelectOption.Image
+              src={option.logoUrl}
+              alt={option.label}
+            />
+            <SelectOption.Label>{option.label}</SelectOption.Label>
+          </SelectOption>
+        )}
+      >
+        <SelectButton>{orgOptions.find(o => o.value === orgValue)?.label || 'Select org'}</SelectButton>
+        <SelectOptionList />
+      </Select>
+
+      <Text
+        colorScheme='secondary'
+        sx={{ fontSize: '12px' }}
+      >
+        Label + Detail (PhoneInput pattern)
+      </Text>
+      <Select
+        options={phoneOptions}
+        value={phoneValue}
+        onChange={option => setPhoneValue(option.value)}
+        matchTriggerWidth
+        renderOption={(option, _index, isSelected) => (
+          <SelectOption isSelected={isSelected}>
+            <SelectOption.Label>{option.label}</SelectOption.Label>
+            <SelectOption.Detail>+{option.code}</SelectOption.Detail>
+          </SelectOption>
+        )}
+      >
+        <SelectButton>{phoneOptions.find(o => o.value === phoneValue)?.label || 'Select country'}</SelectButton>
+        <SelectOptionList />
+      </Select>
+
+      <Text
+        colorScheme='secondary'
+        sx={{ fontSize: '12px' }}
+      >
+        Label only (RoleSelect pattern)
+      </Text>
+      <Select
+        options={roleOptions}
+        value={roleValue}
+        onChange={option => setRoleValue(option.value)}
+        matchTriggerWidth
+        renderOption={(option, _index, isSelected) => (
+          <SelectOption isSelected={isSelected}>
+            <SelectOption.Label>{option.label}</SelectOption.Label>
+          </SelectOption>
+        )}
+      >
+        <SelectButton>{roleOptions.find(o => o.value === roleValue)?.label || 'Select role'}</SelectButton>
+        <SelectOptionList />
+      </Select>
+
+      <Text
+        colorScheme='secondary'
+        sx={{ fontSize: '12px' }}
+      >
+        Default renderer (Checkout/APIKeys pattern)
+      </Text>
+      <Select
+        options={expirationOptions}
+        value={defaultValue}
+        onChange={option => setDefaultValue(option.value)}
+        matchTriggerWidth
+      >
+        <SelectButton>
+          {expirationOptions.find(o => o.value === defaultValue)?.label || 'Select expiration'}
+        </SelectButton>
+        <SelectOptionList />
+      </Select>
+    </Col>
+  );
+};
+
 function SignInStartInternal(): JSX.Element {
   const card = useCardState();
   const clerk = useClerk();
@@ -571,6 +705,8 @@ function SignInStartInternal(): JSX.Element {
               />
             </Header.Root>
             <Card.Alert>{card.error}</Card.Alert>
+            {/* PROTOTYPE: SelectOption variants demo — remove before merging */}
+            <SelectOptionDemo />
             {/*TODO: extract main in its own component */}
             <Col
               elementDescriptor={descriptors.main}