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

package/src/modules/customers/backend/customers/deals/pipeline/page.tsx

@@ -4,6 +4,13 @@ import * as React from 'react'
 import Link from 'next/link'
 import { useQuery, useMutation, useQueryClient } from '@tanstack/react-query'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { ErrorNotice } from '@open-mercato/ui/primitives/ErrorNotice'
 import { apiCallOrThrow, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
@@ -399,9 +406,8 @@ export default function SalesPipelinePage(): React.ReactElement {
     event.stopPropagation()
   }, [])
 
-  const handleSortChange = React.useCallback((event: React.ChangeEvent<HTMLSelectElement>) => {
-    const value = event.target.value as SortOption
-    if (sortOptions.includes(value)) setSortBy(value)
+  const handleSortChange = React.useCallback((value: string) => {
+    if (sortOptions.includes(value as SortOption)) setSortBy(value as SortOption)
   }, [])
 
   const handleDragStart = React.useCallback((dealId: string) => {
@@ -478,15 +484,19 @@ export default function SalesPipelinePage(): React.ReactElement {
               {pipelinesQuery.data && pipelinesQuery.data.length > 0 ? (
                 <label className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
                   <span>{translate('customers.deals.pipeline.switch.label', 'Pipeline')}</span>
-                  <select
-                    className="h-9 rounded-md border border-border bg-background px-3 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
-                    value={selectedPipelineId ?? ''}
-                    onChange={(e) => setSelectedPipelineId(e.target.value || null)}
+                  <Select
+                    value={selectedPipelineId || undefined}
+                    onValueChange={(value) => setSelectedPipelineId(value || null)}
                   >
-                    {pipelinesQuery.data.map((p) => (
-                      <option key={p.id} value={p.id}>{p.name}</option>
-                    ))}
-                  </select>
+                    <SelectTrigger className="w-auto min-w-[12rem]">
+                      <SelectValue />
+                    </SelectTrigger>
+                    <SelectContent>
+                      {pipelinesQuery.data.map((p) => (
+                        <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
+                      ))}
+                    </SelectContent>
+                  </Select>
                 </label>
               ) : null}
               <Link
@@ -497,21 +507,22 @@ export default function SalesPipelinePage(): React.ReactElement {
               </Link>
               <label className="flex items-center gap-2 text-sm font-medium text-muted-foreground">
                 <span>{translate('customers.deals.pipeline.sort.label', 'Sort by')}</span>
-                <select
-                  className="h-9 rounded-md border border-border bg-background px-3 text-sm text-foreground shadow-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/40"
-                  value={sortBy}
-                  onChange={handleSortChange}
-                >
-                  <option value="probability">
-                    {translate('customers.deals.pipeline.sort.probability', 'Probability (high to low)')}
-                  </option>
-                  <option value="createdAt">
-                    {translate('customers.deals.pipeline.sort.createdAt', 'Created (newest first)')}
-                  </option>
-                  <option value="expectedCloseAt">
-                    {translate('customers.deals.pipeline.sort.expectedCloseAt', 'Expected close (soonest first)')}
-                  </option>
-                </select>
+                <Select value={sortBy} onValueChange={handleSortChange}>
+                  <SelectTrigger className="w-auto min-w-[14rem]">
+                    <SelectValue />
+                  </SelectTrigger>
+                  <SelectContent>
+                    <SelectItem value="probability">
+                      {translate('customers.deals.pipeline.sort.probability', 'Probability (high to low)')}
+                    </SelectItem>
+                    <SelectItem value="createdAt">
+                      {translate('customers.deals.pipeline.sort.createdAt', 'Created (newest first)')}
+                    </SelectItem>
+                    <SelectItem value="expectedCloseAt">
+                      {translate('customers.deals.pipeline.sort.expectedCloseAt', 'Expected close (soonest first)')}
+                    </SelectItem>
+                  </SelectContent>
+                </Select>
               </label>
             </div>
           </div>

package/src/modules/customers/components/AddressEditor.tsx

@@ -6,6 +6,13 @@ import { usePathname, useSearchParams } from 'next/navigation'
 import { Plus, Settings } from 'lucide-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 {
   Dialog,
   DialogContent,
@@ -168,24 +175,31 @@ export function AddressEditor({
           aria-invalid={errors.name ? 'true' : undefined}
         />
         <div className="flex gap-2">
-          <select
-            className={inputClass('purpose')}
-            value={current.purpose}
-            onChange={(evt) => update('purpose', evt.target.value)}
+          <Select
+            value={current.purpose || undefined}
+            onValueChange={(next) => update('purpose', next ?? '')}
             disabled={disabled}
-            aria-invalid={errors.purpose ? 'true' : undefined}
           >
-            <option value="">
-              {addressTypesLoading
-                ? t('customers.people.detail.addresses.types.loading', 'Loading…')
-                : t('customers.people.detail.addresses.types.placeholder', 'Address type')}
-            </option>
-            {addressTypes.map((entry) => (
-              <option key={entry.value} value={entry.value}>
-                {entry.label}
-              </option>
-            ))}
-          </select>
+            <SelectTrigger
+              className={errors.purpose ? 'border-destructive' : undefined}
+              aria-invalid={errors.purpose ? 'true' : undefined}
+            >
+              <SelectValue
+                placeholder={
+                  addressTypesLoading
+                    ? t('customers.people.detail.addresses.types.loading', 'Loading…')
+                    : t('customers.people.detail.addresses.types.placeholder', 'Address type')
+                }
+              />
+            </SelectTrigger>
+            <SelectContent>
+              {addressTypes.map((entry) => (
+                <SelectItem key={entry.value} value={entry.value}>
+                  {entry.label}
+                </SelectItem>
+              ))}
+            </SelectContent>
+          </Select>
           <Dialog open={typeDialogOpen} onOpenChange={setTypeDialogOpen}>
             <DialogTrigger asChild>
               <Button type="button" variant="outline" size="icon" className="shrink-0" disabled={disabled}>

package/src/modules/customers/components/AddressFormatSettings.tsx

@@ -2,6 +2,7 @@
 
 import * as React from 'react'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
+import { RadioGroup, Radio } from '@open-mercato/ui/primitives/radio'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -139,24 +140,29 @@ export function AddressFormatSettings() {
           {t('customers.config.addressFormat.loading', 'Loading current preference…')}
         </div>
       ) : (
-        <div className="space-y-3">
-          {options.map((option) => (
-            <label key={option.id} className="flex cursor-pointer items-start gap-3 rounded border p-3">
-              <input
-                type="radio"
-                name="address-format"
-                className="mt-1"
-                value={option.id}
-                checked={format === option.id}
-                disabled={pending !== null && pending !== option.id}
-                onChange={() => handleChange(option.id)}
-              />
-              <span className="space-y-1">
-                <span className="block text-sm font-medium">{option.title}</span>
-                <span className="block text-xs text-muted-foreground">{option.description}</span>
-              </span>
-            </label>
-          ))}
+        <RadioGroup
+          className="space-y-3"
+          value={format}
+          onValueChange={(next) => handleChange(next as AddressFormatStrategy)}
+          name="address-format"
+        >
+          {options.map((option) => {
+            const inputId = `address-format-${option.id}`
+            return (
+              <label key={option.id} htmlFor={inputId} className="flex cursor-pointer items-start gap-3 rounded border p-3">
+                <Radio
+                  id={inputId}
+                  className="mt-1"
+                  value={option.id}
+                  disabled={pending !== null && pending !== option.id}
+                />
+                <span className="space-y-1">
+                  <span className="block text-sm font-medium">{option.title}</span>
+                  <span className="block text-xs text-muted-foreground">{option.description}</span>
+                </span>
+              </label>
+            )
+          })}
           {error ? <p className="text-sm text-status-error-text">{error}</p> : null}
           {pending ? (
             <div className="inline-flex items-center gap-2 rounded border border-dashed px-3 py-1 text-xs text-muted-foreground">
@@ -164,7 +170,7 @@ export function AddressFormatSettings() {
               {t('customers.config.addressFormat.updating', 'Saving preference…')}
             </div>
           ) : null}
-        </div>
+        </RadioGroup>
       )}
     </section>
   )

package/src/modules/customers/components/detail/ActivityForm.tsx

@@ -5,6 +5,13 @@ import { z } from 'zod'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
 import { Button } from '@open-mercato/ui/primitives/button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { collectCustomFieldValues } from '@open-mercato/ui/backend/utils/customFieldValues'
 import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
 import { DictionaryEntrySelect, type DictionarySelectLabels } from '@open-mercato/core/modules/dictionaries/components/DictionaryEntrySelect'
@@ -150,17 +157,21 @@ export function ActivityForm({
           const currentValue =
             typeof value === 'string' && value.length ? value : normalizedEntityOptions[0]?.id ?? ''
           return (
-            <select
-              className="h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              value={currentValue}
-              onChange={(event) => setValue(event.target.value)}
+            <Select
+              value={currentValue || undefined}
+              onValueChange={(next) => setValue(next ?? '')}
             >
-              {normalizedEntityOptions.map((option) => (
-                <option key={option.id} value={option.id}>
-                  {option.label}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger>
+                <SelectValue />
+              </SelectTrigger>
+              <SelectContent>
+                {normalizedEntityOptions.map((option) => (
+                  <SelectItem key={option.id} value={option.id}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           )
         },
       } as CrudField)
@@ -175,20 +186,21 @@ export function ActivityForm({
         component: ({ value, setValue }) => {
           const currentValue = typeof value === 'string' ? value : ''
           return (
-            <select
-              className="h-9 w-full rounded border border-muted-foreground/40 bg-background px-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
-              value={currentValue}
-              onChange={(event) => setValue(event.target.value)}
+            <Select
+              value={currentValue || undefined}
+              onValueChange={(next) => setValue(next ?? '')}
             >
-              <option value="">
-                {t('customers.people.detail.activities.fields.dealPlaceholder', 'No linked deal')}
-              </option>
-              {normalizedDealOptions.map((option) => (
-                <option key={option.id} value={option.id}>
-                  {option.label}
-                </option>
-              ))}
-            </select>
+              <SelectTrigger>
+                <SelectValue placeholder={t('customers.people.detail.activities.fields.dealPlaceholder', 'No linked deal')} />
+              </SelectTrigger>
+              <SelectContent>
+                {normalizedDealOptions.map((option) => (
+                  <SelectItem key={option.id} value={option.id}>
+                    {option.label}
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
           )
         },
       } as CrudField)

package/src/modules/customers/components/detail/AnnualRevenueField.tsx

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { Loader2, Pencil, X } from 'lucide-react'
 import { Button } from '@open-mercato/ui/primitives/button'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { DictionaryEntrySelect } from '@open-mercato/core/modules/dictionaries/components/DictionaryEntrySelect'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { cn } from '@open-mercato/shared/lib/utils'
@@ -223,8 +224,7 @@ export function AnnualRevenueField({
             <label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
               {t('customers.companies.detail.fields.annualRevenuePlaceholder', 'Enter amount')}
             </label>
-            <input
-              className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+            <Input
               value={draftAmount}
               onChange={(event) => {
                 setDraftAmount(event.target.value)

package/src/modules/customers/components/detail/DealForm.tsx

@@ -6,6 +6,13 @@ import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { CrudForm, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { IconButton } from '@open-mercato/ui/primitives/icon-button'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from '@open-mercato/ui/primitives/select'
 import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { createCrudFormError } from '@open-mercato/ui/backend/utils/serverErrors'
 import { DictionarySelectField } from '../formConfig'
@@ -797,20 +804,23 @@ export function DealForm({
       type: 'custom',
       layout: 'half',
       component: ({ value, setValue }) => (
-        <select
-          className="w-full rounded border px-2 py-1.5 text-sm"
-          value={typeof value === 'string' ? value : ''}
-          onChange={(e) => {
-            setValue(e.target.value)
-            loadStagesForPipeline(e.target.value).catch(() => {})
+        <Select
+          value={typeof value === 'string' && value ? value : undefined}
+          onValueChange={(next) => {
+            setValue(next ?? '')
+            loadStagesForPipeline(next ?? '').catch(() => {})
           }}
           disabled={disabled}
         >
-          <option value="">{t('customers.deals.form.pipeline.placeholder', 'Select pipeline…')}</option>
-          {pipelines.map((p) => (
-            <option key={p.id} value={p.id}>{p.name}</option>
-          ))}
-        </select>
+          <SelectTrigger>
+            <SelectValue placeholder={t('customers.deals.form.pipeline.placeholder', 'Select pipeline…')} />
+          </SelectTrigger>
+          <SelectContent>
+            {pipelines.map((p) => (
+              <SelectItem key={p.id} value={p.id}>{p.name}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       ),
     } as CrudField,
     {
@@ -819,17 +829,20 @@ export function DealForm({
       type: 'custom',
       layout: 'half',
       component: ({ value, setValue }) => (
-        <select
-          className="w-full rounded border px-2 py-1.5 text-sm"
-          value={typeof value === 'string' ? value : ''}
-          onChange={(e) => setValue(e.target.value)}
+        <Select
+          value={typeof value === 'string' && value ? value : undefined}
+          onValueChange={(next) => setValue(next ?? '')}
           disabled={disabled || !pipelineStages.length}
         >
-          <option value="">{t('customers.deals.form.pipelineStage.placeholder', 'Select stage…')}</option>
-          {pipelineStages.map((s) => (
-            <option key={s.id} value={s.id}>{s.label}</option>
-          ))}
-        </select>
+          <SelectTrigger>
+            <SelectValue placeholder={t('customers.deals.form.pipelineStage.placeholder', 'Select stage…')} />
+          </SelectTrigger>
+          <SelectContent>
+            {pipelineStages.map((s) => (
+              <SelectItem key={s.id} value={s.id}>{s.label}</SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
       ),
     } as CrudField,
     {

package/src/modules/customers/components/formConfig.tsx

@@ -7,6 +7,14 @@ import { Check, Pencil, Plus, Settings } from 'lucide-react'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { useOrganizationScopeVersion } from '@open-mercato/shared/lib/frontend/useOrganizationScope'
 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 { deriveDisplayName, isDerivedDisplayName } from '../lib/displayName'
 import {
   Dialog,
@@ -255,9 +263,8 @@ const createPrimaryEmailField = (t: Translator): CrudField => ({
 
     return (
       <div className="space-y-2">
-        <input
+        <Input
           type="email"
-          className="w-full h-9 rounded border px-2 text-sm"
           value={inputValue}
           onChange={(event) => {
             const nextValue = event.target.value
@@ -561,19 +568,22 @@ export function CompanySelectField({ value, onChange, labels }: CompanySelectFie
   return (
     <div className="space-y-2">
       <div className="flex items-center gap-2">
-        <select
-          className="w-full h-9 rounded border px-2 text-sm"
-          value={value ?? ''}
-          onChange={(event) => onChange(event.target.value ? event.target.value : undefined)}
+        <Select
+          value={value || undefined}
+          onValueChange={(next) => onChange(next || undefined)}
           disabled={loading}
         >
-          <option value="">{labels.placeholder}</option>
-          {options.map((option) => (
-            <option key={option.value} value={option.value}>
-              {option.label}
-            </option>
-          ))}
-        </select>
+          <SelectTrigger>
+            <SelectValue placeholder={labels.placeholder} />
+          </SelectTrigger>
+          <SelectContent>
+            {options.map((option) => (
+              <SelectItem key={option.value} value={option.value}>
+                {option.label}
+              </SelectItem>
+            ))}
+          </SelectContent>
+        </Select>
         <Dialog open={dialogOpen} onOpenChange={handleDialogChange}>
           <DialogTrigger asChild>
             <Button
@@ -595,8 +605,7 @@ export function CompanySelectField({ value, onChange, labels }: CompanySelectFie
             <div className="space-y-4">
               <div className="space-y-1">
                 <label className="text-sm font-medium">{labels.inputLabel}</label>
-                <input
-                  className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                <Input
                   placeholder={labels.inputPlaceholder}
                   value={newCompany}
                   onChange={(event) => {
@@ -760,8 +769,7 @@ export const createDisplayNameSection = (t: Translator) =>
             </div>
             {editing ? (
               <div className="mt-2 space-y-2">
-                <input
-                  className="w-full rounded-md border px-3 py-2 text-sm focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+                <Input
                   value={currentValue}
                   onChange={handleChange}
                   placeholder={t('customers.people.form.displayName.placeholder')}

package/src/modules/customers/widgets/dashboard/customer-todos/widget.client.tsx

@@ -4,6 +4,7 @@ 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 { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { DEFAULT_SETTINGS, hydrateCustomerTodoSettings, type CustomerTodoWidgetSettings } from './config'
@@ -132,12 +133,12 @@ const CustomerTodosWidget: React.FC<DashboardWidgetComponentProps<CustomerTodoWi
           <label htmlFor="customer-todos-page-size" className="text-xs font-semibold uppercase text-muted-foreground">
             {t('customers.widgets.todos.settings.pageSize')}
           </label>
-          <input
+          <Input
             id="customer-todos-page-size"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm 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)

package/src/modules/customers/widgets/dashboard/new-customers/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 { useT } from '@open-mercato/shared/lib/i18n/context'
 import {
@@ -121,12 +129,12 @@ const CustomerNewCustomersWidget: React.FC<DashboardWidgetComponentProps<Custome
           <label htmlFor="customer-new-customers-page-size" className="text-xs font-semibold uppercase text-muted-foreground">
             {t('customers.widgets.newCustomers.settings.pageSize')}
           </label>
-          <input
+          <Input
             id="customer-new-customers-page-size"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm 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)
@@ -138,21 +146,23 @@ const CustomerNewCustomersWidget: React.FC<DashboardWidgetComponentProps<Custome
           <label htmlFor="customer-new-customers-kind" className="text-xs font-semibold uppercase text-muted-foreground">
             {t('customers.widgets.newCustomers.settings.kind')}
           </label>
-          <select
-            id="customer-new-customers-kind"
-            className="w-full rounded-md border px-2 py-1 text-sm focus-visible:border-ring focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          <Select
             value={hydrated.kind}
-            onChange={(event) => {
-              const value = event.target.value
+            onValueChange={(value) => {
               if (value === 'person' || value === 'company' || value === 'all') {
                 onSettingsChange({ ...hydrated, kind: value })
               }
             }}
           >
-            <option value="all">{t('customers.widgets.newCustomers.filters.all')}</option>
-            <option value="person">{t('customers.widgets.newCustomers.filters.person')}</option>
-            <option value="company">{t('customers.widgets.newCustomers.filters.company')}</option>
-          </select>
+            <SelectTrigger id="customer-new-customers-kind" size="sm">
+              <SelectValue />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="all">{t('customers.widgets.newCustomers.filters.all')}</SelectItem>
+              <SelectItem value="person">{t('customers.widgets.newCustomers.filters.person')}</SelectItem>
+              <SelectItem value="company">{t('customers.widgets.newCustomers.filters.company')}</SelectItem>
+            </SelectContent>
+          </Select>
         </div>
       </div>
     )

package/src/modules/customers/widgets/dashboard/new-deals/widget.client.tsx

@@ -4,6 +4,7 @@ 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 { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { DEFAULT_SETTINGS, hydrateNewDealsSettings, type CustomerNewDealsSettings } from './config'
@@ -104,12 +105,12 @@ const CustomerNewDealsWidget: React.FC<DashboardWidgetComponentProps<CustomerNew
           <label htmlFor="customer-new-deals-page-size" className="text-xs font-semibold uppercase text-muted-foreground">
             {t('customers.widgets.newDeals.settings.pageSize')}
           </label>
-          <input
+          <Input
             id="customer-new-deals-page-size"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm 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)

package/src/modules/customers/widgets/dashboard/next-interactions/widget.client.tsx

@@ -5,6 +5,7 @@ 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 { formatRelativeTime } from '@open-mercato/shared/lib/time'
+import { Input } from '@open-mercato/ui/primitives/input'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import {
@@ -136,12 +137,12 @@ const CustomerNextInteractionsWidget: React.FC<DashboardWidgetComponentProps<Cus
           <label htmlFor="customer-next-interactions-page-size" className="text-xs font-semibold uppercase text-muted-foreground">
             {t('customers.widgets.nextInteractions.settings.pageSize')}
           </label>
-          <input
+          <Input
             id="customer-next-interactions-page-size"
             type="number"
             min={1}
             max={20}
-            className="w-24 rounded-md border px-2 py-1 text-sm 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)