@open-mercato/core 0.5.1-develop.2953.6647bb2c43 → 0.5.1-develop.2964.d5ac4a6ebb

package/src/modules/sales/components/documents/SalesDocumentForm.tsx

@@ -5,7 +5,14 @@ import { CrudForm, type CrudCustomFieldRenderProps, type CrudField, type CrudFor
 import { LookupSelect, type LookupSelectItem } from '@open-mercato/ui/backend/inputs'
 import { Input } from '@open-mercato/ui/primitives/input'
 import { Button } from '@open-mercato/ui/primitives/button'
-import { Switch } from '@open-mercato/ui/primitives/switch'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
+import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 import {
   Dialog,
   DialogContent,
@@ -885,33 +892,37 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
                     : t('sales.documents.form.shipping.hint', 'Select an address or define a new one.')}
                 </p>
               </div>
-              <label className="flex items-center gap-2 text-sm">
-                <Switch
-                  checked={useCustom}
-                  onCheckedChange={(checked) => updateValue('useCustomShipping', checked)}
-                />
-                <span>{t('sales.documents.form.shipping.custom', 'Define new address')}</span>
-              </label>
+              <SwitchField
+                label={t('sales.documents.form.shipping.custom', 'Define new address')}
+                flip
+                checked={useCustom}
+                onCheckedChange={(checked) => updateValue('useCustomShipping', checked)}
+              />
             </div>
             {!useCustom ? (
-              <select
-                className="w-full rounded border px-2 py-2 text-sm"
-                value={selectedId}
-                onChange={(evt) => updateValue('shippingAddressId', evt.target.value || null)}
+              <Select
+                value={selectedId || undefined}
+                onValueChange={(value) => updateValue('shippingAddressId', value || null)}
                 disabled={addressesLoading || customerRequired}
               >
-                <option value="">
-                  {addressesLoading
-                    ? t('sales.documents.form.address.loading', 'Loading addresses…')
-                    : t('sales.documents.form.address.placeholder', 'Select address')}
-                </option>
-                {addressOptions.map((addr) => {
-                  const optionLabel = addr.summary ? `${addr.label} — ${addr.summary}` : addr.label
-                  return (
-                    <option key={addr.id} value={addr.id}>{optionLabel}</option>
-                  )
-                })}
-              </select>
+                <SelectTrigger>
+                  <SelectValue
+                    placeholder={
+                      addressesLoading
+                        ? t('sales.documents.form.address.loading', 'Loading addresses…')
+                        : t('sales.documents.form.address.placeholder', 'Select address')
+                    }
+                  />
+                </SelectTrigger>
+                <SelectContent>
+                  {addressOptions.map((addr) => {
+                    const optionLabel = addr.summary ? `${addr.label} — ${addr.summary}` : addr.label
+                    return (
+                      <SelectItem key={addr.id} value={addr.id}>{optionLabel}</SelectItem>
+                    )
+                  })}
+                </SelectContent>
+              </Select>
             ) : null}
             {useCustom ? (
               <div className="space-y-3">
@@ -922,13 +933,13 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
                   onChange={(next) => updateValue('shippingAddressDraft', next)}
                   hidePrimaryToggle
                 />
-                <label className="col-span-2 flex items-center gap-2 text-sm">
-                  <Switch
-                    checked={formValues.saveShippingAddress === true}
-                    onCheckedChange={(checked) => updateValue('saveShippingAddress', checked)}
-                  />
-                  {t('sales.documents.form.address.saveToCustomer', 'Save this address to the customer')}
-                </label>
+                <SwitchField
+                  containerClassName="col-span-2"
+                  label={t('sales.documents.form.address.saveToCustomer', 'Save this address to the customer')}
+                  flip
+                  checked={formValues.saveShippingAddress === true}
+                  onCheckedChange={(checked) => updateValue('saveShippingAddress', checked)}
+                />
               </div>
             ) : null}
             {addressesError && customerId ? (
@@ -1004,53 +1015,56 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
                     : t('sales.documents.form.billing.hint', 'Select an address or define a new one.')}
                 </p>
               </div>
-              <label className="flex items-center gap-2 text-sm">
-                <Switch
-                  checked={sameAsShipping}
-                  onCheckedChange={(checked) => {
-                    updateValue('sameAsShipping', checked)
-                    if (checked) {
-                      updateValue('useCustomBilling', useCustomShipping)
-                      updateValue('billingAddressId', shippingId)
-                      updateValue('billingAddressDraft', shippingDraft)
-                    }
-                  }}
-                />
-                <span>{t('sales.documents.form.address.sameAsShipping', 'Same as shipping')}</span>
-              </label>
+              <SwitchField
+                label={t('sales.documents.form.address.sameAsShipping', 'Same as shipping')}
+                flip
+                checked={sameAsShipping}
+                onCheckedChange={(checked) => {
+                  updateValue('sameAsShipping', checked)
+                  if (checked) {
+                    updateValue('useCustomBilling', useCustomShipping)
+                    updateValue('billingAddressId', shippingId)
+                    updateValue('billingAddressDraft', shippingDraft)
+                  }
+                }}
+              />
             </div>
 
             {!sameAsShipping ? (
               <>
                 {!useCustom ? (
-                  <select
-                    className="w-full rounded border px-2 py-2 text-sm"
-                    value={selectedId}
-                    onChange={(evt) => updateValue('billingAddressId', evt.target.value || null)}
+                  <Select
+                    value={selectedId || undefined}
+                    onValueChange={(value) => updateValue('billingAddressId', value || null)}
                     disabled={addressesLoading || customerRequired}
                   >
-                    <option value="">
-                      {addressesLoading
-                        ? t('sales.documents.form.address.loading', 'Loading addresses…')
-                        : t('sales.documents.form.address.placeholder', 'Select address')}
-                    </option>
-                    {addressOptions.map((addr) => {
-                      const optionLabel = addr.summary ? `${addr.label} — ${addr.summary}` : addr.label
-                      return (
-                        <option key={addr.id} value={addr.id}>{optionLabel}</option>
-                      )
-                    })}
-                  </select>
+                    <SelectTrigger>
+                      <SelectValue
+                        placeholder={
+                          addressesLoading
+                            ? t('sales.documents.form.address.loading', 'Loading addresses…')
+                            : t('sales.documents.form.address.placeholder', 'Select address')
+                        }
+                      />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {addressOptions.map((addr) => {
+                        const optionLabel = addr.summary ? `${addr.label} — ${addr.summary}` : addr.label
+                        return (
+                          <SelectItem key={addr.id} value={addr.id}>{optionLabel}</SelectItem>
+                        )
+                      })}
+                    </SelectContent>
+                  </Select>
                 ) : null}
 
-                <label className="flex items-center gap-2 text-sm">
-                  <Switch
-                    checked={useCustom}
-                    onCheckedChange={(checked) => updateValue('useCustomBilling', checked)}
-                    disabled={false}
-                  />
-                  <span>{t('sales.documents.form.shipping.custom', 'Define new address')}</span>
-                </label>
+                <SwitchField
+                  label={t('sales.documents.form.shipping.custom', 'Define new address')}
+                  flip
+                  checked={useCustom}
+                  onCheckedChange={(checked) => updateValue('useCustomBilling', checked)}
+                  disabled={false}
+                />
 
                 {useCustom ? (
                   <div className="space-y-3">
@@ -1061,13 +1075,13 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
                       onChange={(next) => updateValue('billingAddressDraft', next)}
                       hidePrimaryToggle
                     />
-                    <label className="col-span-2 flex items-center gap-2 text-sm">
-                      <Switch
-                        checked={formValues.saveBillingAddress === true}
-                        onCheckedChange={(checked) => updateValue('saveBillingAddress', checked)}
-                      />
-                      {t('sales.documents.form.address.saveToCustomer', 'Save this address to the customer')}
-                    </label>
+                    <SwitchField
+                      containerClassName="col-span-2"
+                      label={t('sales.documents.form.address.saveToCustomer', 'Save this address to the customer')}
+                      flip
+                      checked={formValues.saveBillingAddress === true}
+                      onCheckedChange={(checked) => updateValue('saveBillingAddress', checked)}
+                    />
                   </div>
                 ) : null}
               </>
@@ -1208,17 +1222,14 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
               />
             </div>
             <div className="space-y-2">
-              <div className="relative">
-                <Mail className="pointer-events-none absolute left-2 top-2.5 h-4 w-4 text-muted-foreground" />
-                <input
-                  type="email"
-                  className="w-full rounded border pl-8 pr-2 py-2 text-sm"
-                  value={emailValue}
-                  onChange={(event) => setValue('customerEmail', event.target.value)}
-                  placeholder={t('sales.documents.form.email.placeholder', 'Email used for the document')}
-                  spellCheck={false}
-                />
-              </div>
+              <Input
+                type="email"
+                leftIcon={<Mail />}
+                value={emailValue}
+                onChange={(event) => setValue('customerEmail', event.target.value)}
+                placeholder={t('sales.documents.form.email.placeholder', 'Email used for the document')}
+                spellCheck={false}
+              />
               {duplicate ? (
                 <div className="flex items-center justify-between rounded border bg-muted px-3 py-2 text-xs text-muted-foreground">
                   <span>

package/src/modules/sales/widgets/dashboard/new-orders/widget.client.tsx

@@ -4,6 +4,14 @@ import * as React from 'react'
 import Link from 'next/link'
 import type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { formatRelativeTime } from '@open-mercato/shared/lib/time'
@@ -126,12 +134,12 @@ const SalesNewOrdersWidget: React.FC<DashboardWidgetComponentProps<SalesNewOrder
           <label htmlFor="sales-new-orders-page-size" className="text-xs font-semibold uppercase text-muted-foreground">
             {translate('sales.widgets.newOrders.settings.pageSize', 'Number of Orders')}
           </label>
-          <input
+          <Input
             id="sales-new-orders-page-size"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border border-input bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="w-24"
             value={hydrated.pageSize}
             onChange={(event) => {
               const next = Number(event.target.value)
@@ -146,19 +154,22 @@ const SalesNewOrdersWidget: React.FC<DashboardWidgetComponentProps<SalesNewOrder
           <label htmlFor="sales-new-orders-date-period" className="text-xs font-semibold uppercase text-muted-foreground">
             {translate('sales.widgets.newOrders.settings.datePeriod', 'Date Period')}
           </label>
-          <select
-            id="sales-new-orders-date-period"
+          <Select
             value={hydrated.datePeriod}
-            onChange={(event) => {
-              onSettingsChange?.({ ...hydrated, datePeriod: event.target.value as DatePeriodOption })
+            onValueChange={(value) => {
+              onSettingsChange?.({ ...hydrated, datePeriod: value as DatePeriodOption })
             }}
-            className="w-full rounded-md border border-input bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           >
-            <option value="last24h">{translate('sales.widgets.newOrders.settings.last24h', 'Last 24 hours')}</option>
-            <option value="last7d">{translate('sales.widgets.newOrders.settings.last7d', 'Last 7 days')}</option>
-            <option value="last30d">{translate('sales.widgets.newOrders.settings.last30d', 'Last 30 days')}</option>
-            <option value="custom">{translate('sales.widgets.newOrders.settings.custom', 'Custom range')}</option>
-          </select>
+            <SelectTrigger id="sales-new-orders-date-period" size="sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="last24h">{translate('sales.widgets.newOrders.settings.last24h', 'Last 24 hours')}</SelectItem>
+              <SelectItem value="last7d">{translate('sales.widgets.newOrders.settings.last7d', 'Last 7 days')}</SelectItem>
+              <SelectItem value="last30d">{translate('sales.widgets.newOrders.settings.last30d', 'Last 30 days')}</SelectItem>
+              <SelectItem value="custom">{translate('sales.widgets.newOrders.settings.custom', 'Custom range')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
 
         {hydrated.datePeriod === 'custom' ? (

package/src/modules/sales/widgets/dashboard/new-quotes/widget.client.tsx

@@ -4,6 +4,14 @@ import * as React from 'react'
 import Link from 'next/link'
 import type { DashboardWidgetComponentProps } from '@open-mercato/shared/modules/dashboard/widgets'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
+import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { formatRelativeTime } from '@open-mercato/shared/lib/time'
@@ -132,12 +140,12 @@ const SalesNewQuotesWidget: React.FC<DashboardWidgetComponentProps<SalesNewQuote
           <label htmlFor="sales-new-quotes-page-size" className="text-xs font-semibold uppercase text-muted-foreground">
             {translate('sales.widgets.newQuotes.settings.pageSize', 'Number of Quotes')}
           </label>
-          <input
+          <Input
             id="sales-new-quotes-page-size"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border border-input bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+            className="w-24"
             value={hydrated.pageSize}
             onChange={(event) => {
               const next = Number(event.target.value)
@@ -152,19 +160,22 @@ const SalesNewQuotesWidget: React.FC<DashboardWidgetComponentProps<SalesNewQuote
           <label htmlFor="sales-new-quotes-date-period" className="text-xs font-semibold uppercase text-muted-foreground">
             {translate('sales.widgets.newQuotes.settings.datePeriod', 'Date Period')}
           </label>
-          <select
-            id="sales-new-quotes-date-period"
+          <Select
             value={hydrated.datePeriod}
-            onChange={(event) => {
-              onSettingsChange?.({ ...hydrated, datePeriod: event.target.value as DatePeriodOption })
+            onValueChange={(value) => {
+              onSettingsChange?.({ ...hydrated, datePeriod: value as DatePeriodOption })
             }}
-            className="w-full rounded-md border border-input bg-background px-2 py-1 text-sm text-foreground focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
           >
-            <option value="last24h">{translate('sales.widgets.newQuotes.settings.last24h', 'Last 24 hours')}</option>
-            <option value="last7d">{translate('sales.widgets.newQuotes.settings.last7d', 'Last 7 days')}</option>
-            <option value="last30d">{translate('sales.widgets.newQuotes.settings.last30d', 'Last 30 days')}</option>
-            <option value="custom">{translate('sales.widgets.newQuotes.settings.custom', 'Custom range')}</option>
-          </select>
+            <SelectTrigger id="sales-new-quotes-date-period" size="sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="last24h">{translate('sales.widgets.newQuotes.settings.last24h', 'Last 24 hours')}</SelectItem>
+              <SelectItem value="last7d">{translate('sales.widgets.newQuotes.settings.last7d', 'Last 7 days')}</SelectItem>
+              <SelectItem value="last30d">{translate('sales.widgets.newQuotes.settings.last30d', 'Last 30 days')}</SelectItem>
+              <SelectItem value="custom">{translate('sales.widgets.newQuotes.settings.custom', 'Custom range')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
 
         {hydrated.datePeriod === 'custom' ? (

package/src/modules/shipping_carriers/lib/shipment-wizard/components/ConfigureStep.tsx

@@ -2,6 +2,14 @@
 
 import * as React from 'react'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { Card, CardContent, CardHeader, CardTitle } from '@open-mercato/ui/primitives/card'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -106,13 +114,14 @@ export const ConfigureStep = (props: ConfigureStepProps) => {
                 <label className="text-xs font-medium text-muted-foreground">
                   {t('shipping_carriers.create.field.phone', 'Phone')}
                 </label>
-                <input
-                  className={`w-full rounded border bg-background px-2 py-1.5 text-sm ${senderContactErrors.phone ? 'border-destructive' : ''}`}
+                <Input
                   type="tel"
+                  size="sm"
                   value={senderContact.phone}
                   onChange={(e) => onSenderContactChange({ ...senderContact, phone: e.target.value })}
                   disabled={isFetchingRates}
                   placeholder="e.g. 500000000"
+                  aria-invalid={senderContactErrors.phone ? true : undefined}
                 />
                 {senderContactErrors.phone ? (
                   <p className="text-xs text-destructive">{senderContactErrors.phone}</p>
@@ -122,13 +131,14 @@ export const ConfigureStep = (props: ConfigureStepProps) => {
                 <label className="text-xs font-medium text-muted-foreground">
                   {t('shipping_carriers.create.field.email', 'Email')}
                 </label>
-                <input
-                  className={`w-full rounded border bg-background px-2 py-1.5 text-sm ${senderContactErrors.email ? 'border-destructive' : ''}`}
+                <Input
                   type="email"
+                  size="sm"
                   value={senderContact.email}
                   onChange={(e) => onSenderContactChange({ ...senderContact, email: e.target.value })}
                   disabled={isFetchingRates}
                   placeholder="e.g. sender@example.com"
+                  aria-invalid={senderContactErrors.email ? true : undefined}
                 />
                 {senderContactErrors.email ? (
                   <p className="text-xs text-destructive">{senderContactErrors.email}</p>
@@ -150,13 +160,14 @@ export const ConfigureStep = (props: ConfigureStepProps) => {
                 <label className="text-xs font-medium text-muted-foreground">
                   {t('shipping_carriers.create.field.phone', 'Phone')}
                 </label>
-                <input
-                  className={`w-full rounded border bg-background px-2 py-1.5 text-sm ${receiverContactErrors.phone ? 'border-destructive' : ''}`}
+                <Input
                   type="tel"
+                  size="sm"
                   value={receiverContact.phone}
                   onChange={(e) => onReceiverContactChange({ ...receiverContact, phone: e.target.value })}
                   disabled={isFetchingRates}
                   placeholder="e.g. 500000000"
+                  aria-invalid={receiverContactErrors.phone ? true : undefined}
                 />
                 {receiverContactErrors.phone ? (
                   <p className="text-xs text-destructive">{receiverContactErrors.phone}</p>
@@ -166,13 +177,14 @@ export const ConfigureStep = (props: ConfigureStepProps) => {
                 <label className="text-xs font-medium text-muted-foreground">
                   {t('shipping_carriers.create.field.email', 'Email')}
                 </label>
-                <input
-                  className={`w-full rounded border bg-background px-2 py-1.5 text-sm ${receiverContactErrors.email ? 'border-destructive' : ''}`}
+                <Input
                   type="email"
+                  size="sm"
                   value={receiverContact.email}
                   onChange={(e) => onReceiverContactChange({ ...receiverContact, email: e.target.value })}
                   disabled={isFetchingRates}
                   placeholder="e.g. receiver@example.com"
+                  aria-invalid={receiverContactErrors.email ? true : undefined}
                 />
                 {receiverContactErrors.email ? (
                   <p className="text-xs text-destructive">{receiverContactErrors.email}</p>
@@ -194,17 +206,20 @@ export const ConfigureStep = (props: ConfigureStepProps) => {
             <label className="text-xs font-medium text-muted-foreground">
               {t('shipping_carriers.create.field.c2cSendingMethod', 'Sending method (applies to courier_c2c service only)')}
             </label>
-            <select
-              className="w-full rounded border bg-background px-2 py-1.5 text-sm"
-              value={c2cSendingMethod}
-              onChange={(e) => onC2cSendingMethodChange(e.target.value)}
+            <Select
+              value={c2cSendingMethod || undefined}
+              onValueChange={(value) => onC2cSendingMethodChange(value ?? '')}
               disabled={isFetchingRates}
             >
-              <option value="">{t('shipping_carriers.create.c2cSendingMethod.default', 'Dispatch order (default)')}</option>
-              <option value="parcel_locker">{t('shipping_carriers.create.c2cSendingMethod.parcel_locker', 'Parcel locker')}</option>
-              <option value="pop">{t('shipping_carriers.create.c2cSendingMethod.pop', 'POP (parcel pickup point)')}</option>
-              <option value="any_point">{t('shipping_carriers.create.c2cSendingMethod.any_point', 'Any point')}</option>
-            </select>
+              <SelectTrigger size="sm">
+                <SelectValue placeholder={t('shipping_carriers.create.c2cSendingMethod.default', 'Dispatch order (default)')} />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectItem value="parcel_locker">{t('shipping_carriers.create.c2cSendingMethod.parcel_locker', 'Parcel locker')}</SelectItem>
+                <SelectItem value="pop">{t('shipping_carriers.create.c2cSendingMethod.pop', 'POP (parcel pickup point)')}</SelectItem>
+                <SelectItem value="any_point">{t('shipping_carriers.create.c2cSendingMethod.any_point', 'Any point')}</SelectItem>
+              </SelectContent>
+            </Select>
           </div>
         </CardContent>
       </Card>
@@ -237,8 +252,9 @@ export const ConfigureStep = (props: ConfigureStepProps) => {
             )}
 
             <div className="flex gap-2">
-              <input
-                className="flex-1 rounded border bg-background px-2 py-1.5 text-sm"
+              <Input
+                size="sm"
+                className="flex-1"
                 value={searchInput}
                 onChange={(e) => setSearchInput(e.target.value)}
                 onKeyDown={(e) => {

package/src/modules/staff/components/TeamMemberForm.tsx

@@ -8,6 +8,13 @@ import { normalizeCustomFieldValues } from '@open-mercato/shared/lib/custom-fiel
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { LookupSelect, type LookupSelectItem } from '@open-mercato/ui/backend/inputs'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { AttachmentsSection, TagsSection, type TagOption, type TagsSectionLabels } from '@open-mercato/ui/backend/detail'
 import { E } from '#generated/entities.ids.generated'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -292,12 +299,11 @@ export function TeamMemberForm(props: TeamMemberFormProps) {
                   {translate('staff.teamMembers.form.actions.createTeam', 'Create new team')}
                 </Button>
               </div>
-              <select
-                className="w-full h-9 rounded border px-2 text-sm"
-                value={currentValue}
-                onChange={(event) => {
-                  const nextValue = event.target.value || undefined
-                  const nextTeamId = event.target.value || null
+              <Select
+                value={currentValue || undefined}
+                onValueChange={(value) => {
+                  const nextValue = value || undefined
+                  const nextTeamId = value || null
                   setValue(nextValue)
                   setSelectedTeamId(nextTeamId)
                   if (!setFormValue) return
@@ -310,16 +316,19 @@ export function TeamMemberForm(props: TeamMemberFormProps) {
                     setFormValue('roleIds', nextRoleIds)
                   }
                 }}
-                data-crud-focus-target=""
                 disabled={disabled}
               >
-                <option value="">{translate('ui.forms.select.emptyOption', '—')}</option>
-                {teamOptions.map((option) => (
-                  <option key={option.value} value={option.value}>
-                    {option.label}
-                  </option>
-                ))}
-              </select>
+                <SelectTrigger data-crud-focus-target="">
+                  <SelectValue placeholder={translate('ui.forms.select.emptyOption', '—')} />
+                </SelectTrigger>
+                <SelectContent>
+                  {teamOptions.map((option) => (
+                    <SelectItem key={option.value} value={option.value}>
+                      {option.label}
+                    </SelectItem>
+                  ))}
+                </SelectContent>
+              </Select>
             </div>
           )
         },