@open-mercato/core 0.6.1-develop.3278.1.a4d26475e4 → 0.6.1-develop.3287.1.450f4ffb56

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@open-mercato/core",
-  "version": "0.6.1-develop.3278.1.a4d26475e4",
+  "version": "0.6.1-develop.3287.1.450f4ffb56",
   "type": "module",
   "main": "./dist/index.js",
   "scripts": {
@@ -237,12 +237,12 @@
     "ts-pattern": "^5.0.0"
   },
   "peerDependencies": {
-    "@open-mercato/ai-assistant": "0.6.1-develop.3278.1.a4d26475e4",
-    "@open-mercato/shared": "0.6.1-develop.3278.1.a4d26475e4"
+    "@open-mercato/ai-assistant": "0.6.1-develop.3287.1.450f4ffb56",
+    "@open-mercato/shared": "0.6.1-develop.3287.1.450f4ffb56"
   },
   "devDependencies": {
-    "@open-mercato/ai-assistant": "0.6.1-develop.3278.1.a4d26475e4",
-    "@open-mercato/shared": "0.6.1-develop.3278.1.a4d26475e4",
+    "@open-mercato/ai-assistant": "0.6.1-develop.3287.1.450f4ffb56",
+    "@open-mercato/shared": "0.6.1-develop.3287.1.450f4ffb56",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.9.1",
     "@testing-library/react": "^16.3.1",

package/src/helpers/integration/auth.ts

@@ -207,7 +207,7 @@ export async function login(page: Page, role: Role = 'admin'): Promise<void> {
   }
   await page.getByLabel('Email').fill(creds.email);
 
-  const passwordInput = page.getByLabel('Password').first();
+  const passwordInput = page.getByLabel('Password', { exact: true }).first();
   if (await passwordInput.isVisible().catch(() => false)) {
     await passwordInput.fill(creds.password);
     await passwordInput.press('Enter');

package/src/helpers/integration/authUi.ts

@@ -37,6 +37,6 @@ export async function createUserViaUi(page: Page, input: { email: string; passwo
 
   await page.getByRole('button', { name: 'Create' }).first().click();
   await expect(page).toHaveURL(/\/backend\/users(?:\?.*)?$/);
-  await page.getByRole('textbox', { name: 'Search', exact: true }).fill(input.email);
+  await page.getByRole('searchbox', { name: 'Search', exact: true }).fill(input.email);
   await expect(page.getByRole('row', { name: new RegExp(input.email, 'i') })).toBeVisible();
 }

package/src/modules/auth/frontend/login.tsx

@@ -6,6 +6,8 @@ import Link from 'next/link'
 import { useRouter, useSearchParams } from 'next/navigation'
 import { Card, CardContent, CardHeader, CardDescription } from '@open-mercato/ui/primitives/card'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { EmailInput } from '@open-mercato/ui/primitives/email-input'
+import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
 import { Label } from '@open-mercato/ui/primitives/label'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
@@ -352,10 +354,9 @@ export default function LoginPage() {
               )}
               <div className="grid gap-1">
                 <Label htmlFor="email">{t('auth.email')}</Label>
-                <Input
+                <EmailInput
                   id="email"
                   name="email"
-                  type="email"
                   required
                   aria-invalid={!!error}
                   onChange={(e) => setEmail(e.target.value)}
@@ -369,7 +370,7 @@ export default function LoginPage() {
               {authOverride?.hidePassword ? null : (
                 <div className="grid gap-1">
                   <Label htmlFor="password">{t('auth.password')}</Label>
-                  <Input id="password" name="password" type="password" required={!authOverride} aria-invalid={!!error} />
+                  <PasswordInput id="password" name="password" required={!authOverride} aria-invalid={!!error} autoComplete="current-password" />
                 </div>
               )}
               {!authOverride?.hideRememberMe && !authOverride?.hidePassword && (

package/src/modules/auth/frontend/reset/[token]/page.tsx

@@ -1,7 +1,7 @@
 "use client"
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@open-mercato/ui/primitives/card'
 import { Button } from '@open-mercato/ui/primitives/button'
-import { Input } from '@open-mercato/ui/primitives/input'
+import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
 import { Label } from '@open-mercato/ui/primitives/label'
 import { useState } from 'react'
 import { useRouter } from 'next/navigation'
@@ -69,19 +69,19 @@ export default function ResetWithTokenPage({ params }: { params: { token: string
             {error && <div className="text-sm text-status-error-text">{error}</div>}
             <div className="grid gap-1">
               <Label htmlFor="password">{t('auth.reset.form.password', 'New password')}</Label>
-              <Input id="password" name="password" type="password" required minLength={passwordPolicy.minLength} />
+              <PasswordInput id="password" name="password" required minLength={passwordPolicy.minLength} autoComplete="new-password" />
               {passwordDescription ? (
                 <p className="text-xs text-muted-foreground">{passwordDescription}</p>
               ) : null}
             </div>
             <div className="grid gap-1">
               <Label htmlFor="confirmPassword">{t('auth.profile.form.confirmPassword', 'Confirm new password')}</Label>
-              <Input
+              <PasswordInput
                 id="confirmPassword"
                 name="confirmPassword"
-                type="password"
                 required
                 minLength={passwordPolicy.minLength}
+                autoComplete="new-password"
               />
             </div>
             <Button type="submit" className="mt-2 w-full" disabled={submitting}>

package/src/modules/auth/frontend/reset.tsx

@@ -3,7 +3,7 @@ import { useState } from 'react'
 import Link from 'next/link'
 import { Card, CardContent, CardHeader, CardTitle, CardDescription } from '@open-mercato/ui/primitives/card'
 import { Button } from '@open-mercato/ui/primitives/button'
-import { Input } from '@open-mercato/ui/primitives/input'
+import { EmailInput } from '@open-mercato/ui/primitives/email-input'
 import { Label } from '@open-mercato/ui/primitives/label'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 
@@ -59,7 +59,7 @@ export default function ResetPage() {
               {error && <div className="text-sm text-red-600">{error}</div>}
               <div className="grid gap-1">
                 <Label htmlFor="email">{t('auth.email')}</Label>
-                <Input id="email" name="email" type="email" required aria-invalid={!!fieldError} aria-describedby={fieldError ? 'email-error' : undefined} />
+                <EmailInput id="email" name="email" required aria-invalid={!!fieldError} aria-describedby={fieldError ? 'email-error' : undefined} />
                 {fieldError && <p id="email-error" className="text-sm text-red-600">{fieldError}</p>}
               </div>
               <Button type="submit" className="mt-2 w-full" disabled={submitting}>

package/src/modules/customer_accounts/backend/customer_accounts/users/[id]/page.tsx

@@ -7,6 +7,7 @@ import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { FormHeader } from '@open-mercato/ui/backend/forms'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { SwitchField } from '@open-mercato/ui/primitives/switch-field'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
@@ -112,14 +113,14 @@ function ResetPasswordDialog({
             <label className="text-sm font-medium" htmlFor="reset-password">
               {t('customer_accounts.admin.detail.resetPassword.fields.newPassword', 'New Password')}
             </label>
-            <Input
+            <PasswordInput
               id="reset-password"
-              type="password"
               required
               minLength={8}
               value={newPassword}
               onChange={(event) => setNewPassword(event.target.value)}
               placeholder={t('customer_accounts.admin.detail.resetPassword.fields.placeholder', 'Min. 8 characters')}
+              autoComplete="new-password"
             />
           </div>
           <div className="flex justify-end gap-2 pt-2">

package/src/modules/customer_accounts/backend/customer_accounts/users/page.tsx

@@ -10,6 +10,8 @@ import type { ColumnDef } from '@tanstack/react-table'
 import { RowActions } from '@open-mercato/ui/backend/RowActions'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { EmailInput } from '@open-mercato/ui/primitives/email-input'
+import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
 import { Dialog, DialogContent, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
 import { apiCall, readApiResultOrThrow } from '@open-mercato/ui/backend/utils/apiCall'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
@@ -144,9 +146,8 @@ function CreateUserDialog({
             <label className="text-sm font-medium" htmlFor="create-email">
               {t('customer_accounts.admin.createUser.fields.email', 'Email')}
             </label>
-            <Input
+            <EmailInput
               id="create-email"
-              type="email"
               required
               value={email}
               onChange={(event) => setEmail(event.target.value)}
@@ -170,14 +171,14 @@ function CreateUserDialog({
             <label className="text-sm font-medium" htmlFor="create-password">
               {t('customer_accounts.admin.createUser.fields.password', 'Password')}
             </label>
-            <Input
+            <PasswordInput
               id="create-password"
-              type="password"
               required
               minLength={8}
               value={password}
               onChange={(event) => setPassword(event.target.value)}
               placeholder={t('customer_accounts.admin.createUser.fields.passwordPlaceholder', 'Min. 8 characters')}
+              autoComplete="new-password"
             />
           </div>
           {roleOptions.length > 0 && (

package/src/modules/customer_accounts/widgets/injection/account-status/widget.client.tsx

@@ -6,6 +6,7 @@ import { apiCall } from '@open-mercato/ui/backend/utils/apiCall'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { EmailInput } from '@open-mercato/ui/primitives/email-input'
 import { flash } from '@open-mercato/ui/backend/FlashMessages'
 
 interface AccountStatusData {
@@ -168,9 +169,8 @@ function InviteForm({ personEntityId, onSuccess }: { personEntityId: string; onS
         <label htmlFor="invite-email" className="block text-xs font-medium text-muted-foreground mb-1">
           {t('common.email', 'Email')}
         </label>
-        <Input
+        <EmailInput
           id="invite-email"
-          type="email"
           size="sm"
           value={email}
           onChange={(event) => setEmail(event.target.value)}

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

@@ -8,6 +8,7 @@ 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 { EmailInput } from '@open-mercato/ui/primitives/email-input'
 import {
   Select,
   SelectContent,
@@ -263,8 +264,7 @@ const createPrimaryEmailField = (t: Translator): CrudField => ({
 
     return (
       <div className="space-y-2">
-        <Input
-          type="email"
+        <EmailInput
           value={inputValue}
           onChange={(event) => {
             const nextValue = event.target.value

package/src/modules/integrations/backend/integrations/[id]/page.tsx

@@ -20,6 +20,7 @@ import {
 } from '@open-mercato/ui/primitives/select'
 import { Switch } from '@open-mercato/ui/primitives/switch'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { Tabs, TabsContent, TabsList, TabsTrigger } from '@open-mercato/ui/primitives/tabs'
 import { JsonDisplay } from '@open-mercato/ui/backend/JsonDisplay'
@@ -212,9 +213,8 @@ function buildCredentialFields(credFields: CredentialField[]): CrudField[] {
         ...shared,
         type: 'custom' as const,
         component: ({ id, value, setValue, disabled }) => (
-          <Input
+          <PasswordInput
             id={id}
-            type="password"
             placeholder={field.placeholder}
             value={typeof value === 'string' ? value : ''}
             onChange={(event) => setValue(event.target.value)}

package/src/modules/portal/frontend/[orgSlug]/portal/login/page.tsx

@@ -2,7 +2,8 @@
 import { useCallback, useMemo, useState } from 'react'
 import Link from 'next/link'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { Input } from '@open-mercato/ui/primitives/input'
+import { EmailInput } from '@open-mercato/ui/primitives/email-input'
+import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
 import { Label } from '@open-mercato/ui/primitives/label'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
@@ -108,12 +109,12 @@ export default function PortalLoginPage({ params }: Props) {
 
         <div className="flex flex-col gap-1.5">
           <Label htmlFor="login-email" className="text-overline font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.login.email', 'Email')}</Label>
-          <Input id="login-email" type="email" autoComplete="email" required placeholder={t('portal.login.email.placeholder', 'you@example.com')} value={email} onChange={(e) => setEmail(e.target.value)} disabled={submitting} className="rounded-lg" />
+          <EmailInput id="login-email" required placeholder={t('portal.login.email.placeholder', 'you@example.com')} value={email} onChange={(e) => setEmail(e.target.value)} disabled={submitting} className="rounded-lg" />
         </div>
 
         <div className="flex flex-col gap-1.5">
           <Label htmlFor="login-password" className="text-overline font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.login.password', 'Password')}</Label>
-          <Input id="login-password" type="password" autoComplete="current-password" required placeholder={t('portal.login.password.placeholder', '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022')} value={password} onChange={(e) => setPassword(e.target.value)} disabled={submitting} className="rounded-lg" />
+          <PasswordInput id="login-password" autoComplete="current-password" required placeholder={t('portal.login.password.placeholder', '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022')} value={password} onChange={(e) => setPassword(e.target.value)} disabled={submitting} className="rounded-lg" />
         </div>
 
         <Button type="submit" disabled={submitting} className="mt-1 w-full rounded-lg">

package/src/modules/portal/frontend/[orgSlug]/portal/reset-password/page.tsx

@@ -3,7 +3,7 @@ import { useCallback, useMemo, useState, useEffect } from 'react'
 import { useSearchParams } from 'next/navigation'
 import Link from 'next/link'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
-import { Input } from '@open-mercato/ui/primitives/input'
+import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
 import { Label } from '@open-mercato/ui/primitives/label'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
@@ -142,12 +142,12 @@ export default function PortalResetPasswordPage({ params }: Props) {
 
         <div className="flex flex-col gap-1.5">
           <Label htmlFor="reset-password" className="text-overline font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.resetPassword.password', 'New Password')}</Label>
-          <Input id="reset-password" type="password" autoComplete="new-password" required placeholder={t('portal.resetPassword.password.placeholder', '••••••••')} value={password} onChange={(e) => setPassword(e.target.value)} disabled={submitting || !token} className="rounded-lg" />
+          <PasswordInput id="reset-password" autoComplete="new-password" required placeholder={t('portal.resetPassword.password.placeholder', '••••••••')} value={password} onChange={(e) => setPassword(e.target.value)} disabled={submitting || !token} className="rounded-lg" />
         </div>
 
         <div className="flex flex-col gap-1.5">
           <Label htmlFor="confirm-password" className="text-overline font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.resetPassword.confirmPassword', 'Confirm New Password')}</Label>
-          <Input id="confirm-password" type="password" autoComplete="new-password" required placeholder={t('portal.resetPassword.confirmPassword.placeholder', '••••••••')} value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} disabled={submitting || !token} className="rounded-lg" />
+          <PasswordInput id="confirm-password" autoComplete="new-password" required placeholder={t('portal.resetPassword.confirmPassword.placeholder', '••••••••')} value={confirmPassword} onChange={(e) => setConfirmPassword(e.target.value)} disabled={submitting || !token} className="rounded-lg" />
         </div>
 
         <Button type="submit" disabled={submitting || !token} className="mt-1 w-full rounded-lg">

package/src/modules/portal/frontend/[orgSlug]/portal/signup/page.tsx

@@ -3,6 +3,8 @@ import { useCallback, useMemo, useState } from 'react'
 import Link from 'next/link'
 import { useT } from '@open-mercato/shared/lib/i18n/context'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { EmailInput } from '@open-mercato/ui/primitives/email-input'
+import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
 import { Label } from '@open-mercato/ui/primitives/label'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Alert, AlertDescription } from '@open-mercato/ui/primitives/alert'
@@ -122,12 +124,12 @@ export default function PortalSignupPage({ params }: Props) {
 
         <div className="flex flex-col gap-1.5">
           <Label htmlFor="signup-email" className="text-overline font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.signup.email', 'Email')}</Label>
-          <Input id="signup-email" type="email" autoComplete="email" required placeholder={t('portal.signup.email.placeholder', 'you@example.com')} value={email} onChange={(e) => setEmail(e.target.value)} disabled={submitting} className="rounded-lg" />
+          <EmailInput id="signup-email" required placeholder={t('portal.signup.email.placeholder', 'you@example.com')} value={email} onChange={(e) => setEmail(e.target.value)} disabled={submitting} className="rounded-lg" />
         </div>
 
         <div className="flex flex-col gap-1.5">
           <Label htmlFor="signup-password" className="text-overline font-semibold uppercase tracking-wider text-muted-foreground/70">{t('portal.signup.password', 'Password')}</Label>
-          <Input id="signup-password" type="password" autoComplete="new-password" required placeholder={t('portal.signup.password.placeholder', '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022')} value={password} onChange={(e) => setPassword(e.target.value)} disabled={submitting} className="rounded-lg" />
+          <PasswordInput id="signup-password" autoComplete="new-password" required placeholder={t('portal.signup.password.placeholder', '\u2022\u2022\u2022\u2022\u2022\u2022\u2022\u2022')} value={password} onChange={(e) => setPassword(e.target.value)} disabled={submitting} className="rounded-lg" />
         </div>
 
         <Button type="submit" disabled={submitting} className="mt-1 w-full rounded-lg">

package/src/modules/sales/backend/sales/documents/[id]/page.tsx

@@ -20,6 +20,7 @@ import { Button } from '@open-mercato/ui/primitives/button'
 import { Badge } from '@open-mercato/ui/primitives/badge'
 import { Spinner } from '@open-mercato/ui/primitives/spinner'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { EmailInput } from '@open-mercato/ui/primitives/email-input'
 import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from '@open-mercato/ui/primitives/dialog'
 import { ArrowRightLeft, Building2, CreditCard, Mail, Pencil, Plus, Send, Store, Truck, UserRound, Wand2, X } from 'lucide-react'
 import { FormHeader, type ActionItem } from '@open-mercato/ui/backend/forms'
@@ -663,8 +664,7 @@ function CustomerInlineEditor({
               <label className="text-sm font-medium text-foreground">
                 {t('customers.people.detail.highlights.primaryEmail', 'Primary email')}
               </label>
-              <Input
-                type="email"
+              <EmailInput
                 value={snapshotDraft.primaryEmail}
                 onChange={(event) => setSnapshotDraft((prev) => ({ ...prev, primaryEmail: event.target.value }))}
                 placeholder={t('customers.people.form.primaryEmailPlaceholder', 'name@example.com')}
@@ -1139,15 +1139,13 @@ function ContactEmailInlineEditor({
                 }
               }}
             >
-              <Input
-                leftIcon={<Mail />}
+              <EmailInput
                 value={draft}
                 onChange={(event) => {
                   if (error) setError(null)
                   setDraft(event.target.value)
                 }}
                 placeholder={placeholder}
-                type="email"
                 autoFocus
                 spellCheck={false}
               />

package/src/modules/sales/components/ProviderFieldInput.tsx

@@ -1,4 +1,5 @@
 import { Input } from '@open-mercato/ui/primitives/input'
+import { PasswordInput } from '@open-mercato/ui/primitives/password-input'
 import {
   Select,
   SelectContent,
@@ -70,9 +71,8 @@ export function renderProviderFieldInput(opts: {
       )
     case 'secret':
       return (
-        <Input
+        <PasswordInput
           {...common}
-          type="password"
           value={typeof value === 'string' ? value : ''}
           onChange={(evt) => onChange(evt.target.value)}
           placeholder={field.placeholder}

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

@@ -4,6 +4,7 @@ import * as React from 'react'
 import { CrudForm, type CrudCustomFieldRenderProps, type CrudField, type CrudFormGroup } from '@open-mercato/ui/backend/CrudForm'
 import { LookupSelect, type LookupSelectItem } from '@open-mercato/ui/backend/inputs'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { EmailInput } from '@open-mercato/ui/primitives/email-input'
 import { Button } from '@open-mercato/ui/primitives/button'
 import {
   Select,
@@ -1222,9 +1223,7 @@ export function SalesDocumentForm({ onCreated, isSubmitting = false, initialKind
               />
             </div>
             <div className="space-y-2">
-              <Input
-                type="email"
-                leftIcon={<Mail />}
+              <EmailInput
                 value={emailValue}
                 onChange={(event) => setValue('customerEmail', event.target.value)}
                 placeholder={t('sales.documents.form.email.placeholder', 'Email used for the document')}

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

@@ -3,6 +3,7 @@
 import * as React from 'react'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { EmailInput } from '@open-mercato/ui/primitives/email-input'
 import {
   Select,
   SelectContent,
@@ -131,8 +132,7 @@ export const ConfigureStep = (props: ConfigureStepProps) => {
                 <label className="text-xs font-medium text-muted-foreground">
                   {t('shipping_carriers.create.field.email', 'Email')}
                 </label>
-                <Input
-                  type="email"
+                <EmailInput
                   size="sm"
                   value={senderContact.email}
                   onChange={(e) => onSenderContactChange({ ...senderContact, email: e.target.value })}
@@ -177,8 +177,7 @@ export const ConfigureStep = (props: ConfigureStepProps) => {
                 <label className="text-xs font-medium text-muted-foreground">
                   {t('shipping_carriers.create.field.email', 'Email')}
                 </label>
-                <Input
-                  type="email"
+                <EmailInput
                   size="sm"
                   value={receiverContact.email}
                   onChange={(e) => onReceiverContactChange({ ...receiverContact, email: e.target.value })}

package/src/modules/workflows/backend/tasks/[id]/page.tsx

@@ -6,6 +6,7 @@ import { useRouter } from 'next/navigation'
 import { Page, PageBody } from '@open-mercato/ui/backend/Page'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { EmailInput } from '@open-mercato/ui/primitives/email-input'
 import { FormHeader } from '@open-mercato/ui/backend/forms'
 import {
   Select,
@@ -182,8 +183,7 @@ export default function UserTaskDetailPage({ params }: { params: { id: string }
               {fieldDescription && (
                 <p className="text-xs text-muted-foreground">{fieldDescription}</p>
               )}
-              <Input
-                type="email"
+              <EmailInput
                 id={fieldName}
                 value={fieldValue(fieldName)}
                 onChange={(e) => handleFieldChange(fieldName, e.target.value)}

package/src/modules/workflows/frontend/checkout-demo/page.tsx

@@ -3,6 +3,7 @@
 import { useState, useEffect, useCallback } from 'react'
 import { Button } from '@open-mercato/ui/primitives/button'
 import { Input } from '@open-mercato/ui/primitives/input'
+import { EmailInput } from '@open-mercato/ui/primitives/email-input'
 import {
   Select,
   SelectContent,
@@ -766,8 +767,7 @@ export default function CheckoutDemoPage() {
               {fieldDescription && (
                 <p className="text-xs text-gray-500 mb-1">{fieldDescription}</p>
               )}
-              <Input
-                type="email"
+              <EmailInput
                 id={fieldName}
                 value={formData[fieldName] || ''}
                 onChange={(e) => handleFieldChange(fieldName, e.target.value)}