@open-mercato/ui 0.6.1-develop.3276.1.1fcd145078 → 0.6.1-develop.3287.1.450f4ffb56

package/src/primitives/amount-input.tsx

@@ -0,0 +1,184 @@
+"use client"
+
+import * as React from 'react'
+import type { VariantProps } from 'class-variance-authority'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { inputWrapperVariants, inputElementVariants } from './input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectItemLeading,
+  SelectTrigger,
+} from './select'
+
+export type AmountCurrency = {
+  /** ISO 4217 code (e.g. `'EUR'`, `'USD'`, `'PLN'`). */
+  code: string
+  /** Symbol shown as the leading prefix inside the amount input (e.g. `'€'`). */
+  symbol: string
+  /** Human-readable label for the picker dropdown. */
+  label: string
+  /** Optional emoji flag (or any leading visual) for the picker row. */
+  flag?: string
+}
+
+/**
+ * Static currency list — extend as needed. Order is alphabetical by code so the picker reads
+ * predictably; the first entry is the default fallback when `value.currency` is empty or
+ * unrecognised.
+ */
+export const AMOUNT_CURRENCIES: AmountCurrency[] = [
+  { code: 'EUR', symbol: '€', label: 'Euro', flag: '🇪🇺' },
+  { code: 'USD', symbol: '$', label: 'US Dollar', flag: '🇺🇸' },
+  { code: 'GBP', symbol: '£', label: 'Pound Sterling', flag: '🇬🇧' },
+  { code: 'PLN', symbol: 'zł', label: 'Polish Złoty', flag: '🇵🇱' },
+  { code: 'CHF', symbol: 'CHF', label: 'Swiss Franc', flag: '🇨🇭' },
+  { code: 'SEK', symbol: 'kr', label: 'Swedish Krona', flag: '🇸🇪' },
+  { code: 'CZK', symbol: 'Kč', label: 'Czech Koruna', flag: '🇨🇿' },
+  { code: 'JPY', symbol: '¥', label: 'Japanese Yen', flag: '🇯🇵' },
+  { code: 'AUD', symbol: 'A$', label: 'Australian Dollar', flag: '🇦🇺' },
+  { code: 'CAD', symbol: 'C$', label: 'Canadian Dollar', flag: '🇨🇦' },
+]
+
+const DEFAULT_CURRENCY = AMOUNT_CURRENCIES[0]
+
+export type AmountValue = {
+  /** Raw numeric amount as a string (preserves leading zeros, partial decimals like `'12.'`). */
+  amount: string
+  /** ISO 4217 currency code from the picker. */
+  currency: string
+}
+
+export type AmountInputProps = Omit<
+  React.ComponentPropsWithoutRef<'input'>,
+  'size' | 'type' | 'value' | 'onChange'
+> &
+  VariantProps<typeof inputWrapperVariants> & {
+    value: AmountValue
+    onChange: (next: AmountValue) => void
+    /** Override the static currency list (e.g. limit to specific markets). */
+    currencies?: AmountCurrency[]
+    /** Hide the currency picker entirely — single-currency surfaces (e.g. settings page). */
+    showCurrency?: boolean
+    /** Optional className on the wrapper. */
+    className?: string
+    /** Optional className on the inner `<input>`. */
+    inputClassName?: string
+  }
+
+function findCurrency(code: string, list: AmountCurrency[]): AmountCurrency {
+  return list.find((c) => c.code === code) ?? list[0] ?? DEFAULT_CURRENCY
+}
+
+/**
+ * Amount input matching Figma `Text Input [1.1]` (node `266:5251`) **Amount** variant — leading
+ * currency symbol inside the input, then a vertical divider, then a `Select`-driven currency
+ * picker (flag + code + chevron). Numeric `inputMode="decimal"`.
+ *
+ * Value shape is `{ amount: string, currency: string }` — the amount is stored as a string to
+ * preserve raw user input (leading zeros, in-progress decimals). Parse to `Number` at the
+ * API/persistence boundary.
+ */
+export const AmountInput = React.forwardRef<HTMLInputElement, AmountInputProps>(
+  (
+    {
+      className,
+      inputClassName,
+      size,
+      value,
+      onChange,
+      currencies: currenciesProp,
+      showCurrency = true,
+      placeholder,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const t = useT()
+    const resolvedPlaceholder = placeholder ?? t('ui.inputs.amountInput.placeholder', '0.00')
+    const currencies = currenciesProp ?? AMOUNT_CURRENCIES
+    const current = findCurrency(value.currency, currencies)
+
+    const handleAmountChange = React.useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        onChange({ amount: event.target.value, currency: current.code })
+      },
+      [current.code, onChange],
+    )
+
+    const handleCurrencyChange = React.useCallback(
+      (nextCode: string) => {
+        onChange({ amount: value.amount, currency: nextCode })
+      },
+      [onChange, value.amount],
+    )
+
+    return (
+      <div
+        className={cn(inputWrapperVariants({ size }), 'px-0 overflow-hidden', className)}
+        data-slot="amount-input-wrapper"
+      >
+        <div className="flex flex-1 min-w-0 items-center gap-2 pl-3">
+          <span
+            className="text-sm text-muted-foreground select-none shrink-0 tabular-nums"
+            aria-hidden="true"
+          >
+            {current.symbol}
+          </span>
+          <input
+            ref={ref}
+            type="text"
+            inputMode="decimal"
+            value={value.amount}
+            onChange={handleAmountChange}
+            placeholder={resolvedPlaceholder}
+            disabled={disabled}
+            className={cn(
+              inputElementVariants({ size }),
+              'pr-3 tabular-nums',
+              inputClassName,
+            )}
+            {...props}
+          />
+        </div>
+        {showCurrency ? (
+          <>
+            <div aria-hidden="true" className="w-px self-stretch bg-input" />
+            <Select value={current.code} onValueChange={handleCurrencyChange} disabled={disabled}>
+              <SelectTrigger
+                aria-label={t('ui.inputs.amountInput.currencyLabel', 'Currency')}
+                className={cn(
+                  'h-auto w-auto shrink-0 gap-1.5 rounded-none border-0 bg-transparent px-2.5 py-2 shadow-none',
+                  'hover:bg-muted/40 focus:bg-muted/40 focus-visible:shadow-none focus-visible:border-0',
+                  'disabled:bg-transparent disabled:hover:bg-transparent',
+                )}
+              >
+                {current.flag ? (
+                  <span className="text-base leading-none" aria-hidden="true">{current.flag}</span>
+                ) : null}
+                <span className="text-sm text-foreground tabular-nums">{current.code}</span>
+              </SelectTrigger>
+              <SelectContent align="end">
+                {currencies.map((c) => (
+                  <SelectItem key={c.code} value={c.code}>
+                    {c.flag ? (
+                      <SelectItemLeading>
+                        <span className="text-base leading-none">{c.flag}</span>
+                      </SelectItemLeading>
+                    ) : null}
+                    <span className="flex-1 truncate">{c.label}</span>
+                    <span className="ml-2 text-xs text-muted-foreground tabular-nums">{c.code}</span>
+                  </SelectItem>
+                ))}
+              </SelectContent>
+            </Select>
+          </>
+        ) : null}
+      </div>
+    )
+  },
+)
+AmountInput.displayName = 'AmountInput'

package/src/primitives/button-input.tsx

@@ -0,0 +1,68 @@
+"use client"
+
+import * as React from 'react'
+import type { VariantProps } from 'class-variance-authority'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { inputWrapperVariants, inputElementVariants } from './input'
+
+export type ButtonInputProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'size'> &
+  VariantProps<typeof inputWrapperVariants> & {
+    /** Optional leading icon (decorative `aria-hidden` wrapper). */
+    leftIcon?: React.ReactNode
+    /**
+     * Required interactive trailing element rendered inside the wrapper, after the vertical
+     * divider. Typically an `<IconButton>` (copy URL, send, refresh). The slot stays focusable
+     * and screen-reader accessible — do NOT pass a decorative icon here.
+     */
+    trailingAction: React.ReactNode
+    /** Optional className on the wrapper. */
+    className?: string
+    /** Optional className on the inner `<input>`. */
+    inputClassName?: string
+  }
+
+/**
+ * Button input matching Figma `Text Input [1.1]` (node `266:5251`) **Button** variant — a text
+ * input with an interactive trailing button slot, separated by a vertical divider. Built on the
+ * shared `inputWrapperVariants` / `inputElementVariants` CVA so the visual contract matches the
+ * foundation `Input` primitive.
+ *
+ * Common pairings: share-link + copy button, subscribe-email + send button, API key + regenerate
+ * button. The trailing slot is rendered AS-IS (no auto-wrapping), so consumers control button
+ * type, size, variant, and `aria-label` directly via the passed element.
+ */
+export const ButtonInput = React.forwardRef<HTMLInputElement, ButtonInputProps>(
+  ({ className, inputClassName, size, leftIcon, trailingAction, disabled, ...props }, ref) => {
+    return (
+      <div
+        className={cn(inputWrapperVariants({ size }), 'px-0 overflow-hidden', className)}
+        data-slot="button-input-wrapper"
+      >
+        <div className="flex flex-1 min-w-0 items-center gap-2 pl-3 pr-2">
+          {leftIcon ? (
+            <span
+              className="flex shrink-0 items-center text-muted-foreground [&_svg]:size-4"
+              aria-hidden="true"
+            >
+              {leftIcon}
+            </span>
+          ) : null}
+          <input
+            ref={ref}
+            disabled={disabled}
+            className={cn(
+              inputElementVariants({ size }),
+              inputClassName,
+            )}
+            {...props}
+          />
+        </div>
+        <div aria-hidden="true" className="w-px self-stretch bg-input" />
+        <div className="flex shrink-0 items-stretch">
+          {trailingAction}
+        </div>
+      </div>
+    )
+  },
+)
+ButtonInput.displayName = 'ButtonInput'

package/src/primitives/card-input.tsx

@@ -0,0 +1,193 @@
+"use client"
+
+import * as React from 'react'
+import { CreditCard } from 'lucide-react'
+import type { VariantProps } from 'class-variance-authority'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { inputWrapperVariants, inputElementVariants } from './input'
+
+export type CardBrand = {
+  /** Stable identifier (e.g. `'visa'`, `'mastercard'`). Used as the `data-card-brand` attribute. */
+  id: string
+  /** Short label rendered on the trailing badge (e.g. `'VISA'`, `'MC'`). */
+  label: string
+  /** Regex pattern matched against the digits-only card number. */
+  regex: RegExp
+  /** Grouping for display (e.g. `[4, 4, 4, 4]` for Visa, `[4, 6, 5]` for Amex). */
+  format: number[]
+  /** Maximum number of digits allowed (Visa/MC/Disc 16, Amex 15, Diners 14). */
+  maxLength: number
+  /** Background color for the brand badge. */
+  bg: string
+  /** Foreground (text) color for the brand badge label. Defaults to white. */
+  fg?: string
+}
+
+/**
+ * Default card brand list — covers the most common networks. Order matters: the first matching
+ * regex wins, so brands with broader prefixes (e.g. UnionPay `^62`) MUST come after narrower ones
+ * (e.g. Discover `^622`). Override with the `brands` prop for region-specific surfaces.
+ */
+export const CARD_BRANDS: CardBrand[] = [
+  { id: 'amex', label: 'AMEX', regex: /^3[47]/, format: [4, 6, 5], maxLength: 15, bg: '#006FCF' },
+  { id: 'visa', label: 'VISA', regex: /^4/, format: [4, 4, 4, 4], maxLength: 16, bg: '#1A1F71' },
+  { id: 'mastercard', label: 'MC', regex: /^(5[1-5]|2[2-7])/, format: [4, 4, 4, 4], maxLength: 16, bg: '#EB001B' },
+  { id: 'discover', label: 'DISC', regex: /^(6011|64[4-9]|65|622)/, format: [4, 4, 4, 4], maxLength: 16, bg: '#FF6000' },
+  { id: 'diners', label: 'DC', regex: /^(36|30[0-5]|309)/, format: [4, 6, 4], maxLength: 14, bg: '#0079BE' },
+  { id: 'jcb', label: 'JCB', regex: /^35(2[89]|[3-8])/, format: [4, 4, 4, 4], maxLength: 16, bg: '#0E4C96' },
+  { id: 'unionpay', label: 'UP', regex: /^62/, format: [4, 4, 4, 4], maxLength: 16, bg: '#E21836' },
+]
+
+const DEFAULT_FORMAT: number[] = [4, 4, 4, 4]
+const DEFAULT_MAX_LENGTH = 16
+
+function detectBrand(digits: string, brands: CardBrand[]): CardBrand | null {
+  if (!digits) return null
+  for (const brand of brands) {
+    if (brand.regex.test(digits)) return brand
+  }
+  return null
+}
+
+function formatDigits(digits: string, format: number[]): string {
+  if (!digits) return ''
+  const groups: string[] = []
+  let cursor = 0
+  for (const groupSize of format) {
+    if (cursor >= digits.length) break
+    groups.push(digits.slice(cursor, cursor + groupSize))
+    cursor += groupSize
+  }
+  if (cursor < digits.length) groups.push(digits.slice(cursor))
+  return groups.join(' ')
+}
+
+function sanitize(input: string, maxLength: number): string {
+  return input.replace(/\D+/g, '').slice(0, maxLength)
+}
+
+export type CardInputProps = Omit<
+  React.ComponentPropsWithoutRef<'input'>,
+  'size' | 'type' | 'value' | 'onChange'
+> &
+  VariantProps<typeof inputWrapperVariants> & {
+    /** Controlled value — digits-only (no spaces). Pass formatted strings if you must; non-digits are stripped. */
+    value: string
+    /** Called with the new digits-only string. The component handles formatting on display. */
+    onChange: (digits: string) => void
+    /** Called when the detected brand changes. `null` when nothing matches yet. */
+    onBrandChange?: (brand: CardBrand | null) => void
+    /** Override the card brand list (e.g. region-specific). */
+    brands?: CardBrand[]
+    /** Render the leading bank-card icon. Defaults to `true`. */
+    showLeadingIcon?: boolean
+    /** Render the trailing brand badge. Defaults to `true`. */
+    showBrandBadge?: boolean
+    /** Optional className on the wrapper. */
+    className?: string
+    /** Optional className on the inner `<input>`. */
+    inputClassName?: string
+  }
+
+/**
+ * Card-number input matching Figma `Text Input [1.1]` (node `266:5251`) **Card** variant — leading
+ * `CreditCard` icon, the formatted card-number input, and a trailing brand badge that auto-detects
+ * the issuer (Visa, Mastercard, Amex, Discover, Diners, JCB, UnionPay) from the typed digits.
+ *
+ * Built on the shared `inputWrapperVariants` / `inputElementVariants` CVA. Brand detection is
+ * regex-based — no external library dependency. The `value` prop is digits-only; the component
+ * formats per brand on display (`[4,4,4,4]` default, `[4,6,5]` Amex, `[4,6,4]` Diners) and emits
+ * digits-only via `onChange`.
+ */
+export const CardInput = React.forwardRef<HTMLInputElement, CardInputProps>(
+  (
+    {
+      className,
+      inputClassName,
+      size,
+      value,
+      onChange,
+      onBrandChange,
+      brands: brandsProp,
+      showLeadingIcon = true,
+      showBrandBadge = true,
+      placeholder,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const t = useT()
+    const brands = brandsProp ?? CARD_BRANDS
+    const sanitizedValue = sanitize(value ?? '', DEFAULT_MAX_LENGTH)
+    const detected = detectBrand(sanitizedValue, brands)
+    const format = detected?.format ?? DEFAULT_FORMAT
+    const maxLength = detected?.maxLength ?? DEFAULT_MAX_LENGTH
+    const truncated = sanitizedValue.slice(0, maxLength)
+    const displayed = formatDigits(truncated, format)
+    const resolvedPlaceholder = placeholder ?? t('ui.inputs.cardInput.placeholder', '0000 0000 0000 0000')
+
+    const lastBrandRef = React.useRef<string | null>(null)
+    React.useEffect(() => {
+      const next = detected?.id ?? null
+      if (next !== lastBrandRef.current) {
+        lastBrandRef.current = next
+        onBrandChange?.(detected)
+      }
+    }, [detected, onBrandChange])
+
+    const handleChange = React.useCallback(
+      (event: React.ChangeEvent<HTMLInputElement>) => {
+        const nextBrand = detectBrand(sanitize(event.target.value, DEFAULT_MAX_LENGTH), brands)
+        const nextMax = nextBrand?.maxLength ?? DEFAULT_MAX_LENGTH
+        const digits = sanitize(event.target.value, nextMax)
+        onChange(digits)
+      },
+      [brands, onChange],
+    )
+
+    return (
+      <div
+        className={cn(inputWrapperVariants({ size }), className)}
+        data-slot="card-input-wrapper"
+        data-card-brand={detected?.id ?? 'unknown'}
+      >
+        {showLeadingIcon ? (
+          <CreditCard className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+        ) : null}
+        <input
+          ref={ref}
+          type="text"
+          inputMode="numeric"
+          autoComplete="cc-number"
+          value={displayed}
+          onChange={handleChange}
+          placeholder={resolvedPlaceholder}
+          disabled={disabled}
+          className={cn(
+            inputElementVariants({ size }),
+            'tracking-[0.02em] tabular-nums',
+            inputClassName,
+          )}
+          {...props}
+        />
+        {showBrandBadge && detected ? (
+          <span
+            className="flex shrink-0 items-center justify-center rounded-sm px-1.5 text-overline font-semibold uppercase tracking-wider tabular-nums leading-none select-none"
+            style={{
+              backgroundColor: detected.bg,
+              color: detected.fg ?? '#ffffff',
+              height: '24px',
+              minWidth: '32px',
+            }}
+            aria-hidden="true"
+          >
+            {detected.label}
+          </span>
+        ) : null}
+      </div>
+    )
+  },
+)
+CardInput.displayName = 'CardInput'

package/src/primitives/dialog.tsx

@@ -16,12 +16,17 @@ const DialogClose = DialogPrimitive.Close
 
 const DialogOverlay = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Overlay>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay>
->(({ className, ...props }, ref) => (
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Overlay> & {
+    /** Render above popovers (z-modal-elevated, 55) instead of the default z-modal (40).
+     *  Use when this dialog is opened from inside a popover so it isn't occluded. */
+    elevated?: boolean
+  }
+>(({ className, elevated, ...props }, ref) => (
   <DialogPrimitive.Overlay
     ref={ref}
     className={cn(
-      'fixed inset-0 z-modal bg-black/50 backdrop-blur-sm transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out',
+      'fixed inset-0 bg-black/50 backdrop-blur-sm transition-opacity data-[state=open]:animate-in data-[state=closed]:animate-out',
+      elevated ? 'z-modal-elevated' : 'z-modal',
       className
     )}
     {...props}
@@ -31,8 +36,13 @@ DialogOverlay.displayName = DialogPrimitive.Overlay.displayName
 
 const DialogContent = React.forwardRef<
   React.ElementRef<typeof DialogPrimitive.Content>,
-  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content>
->(({ className, children, ...props }, ref) => {
+  React.ComponentPropsWithoutRef<typeof DialogPrimitive.Content> & {
+    /** Render above popovers (z-modal-elevated, 55) instead of the default z-modal (40).
+     *  Set on dialogs that open from inside another popover (e.g. the SaveFilterDialog
+     *  inside the AdvancedFilterPanel popover) so they aren't hidden behind the popover. */
+    elevated?: boolean
+  }
+>(({ className, children, elevated, ...props }, ref) => {
   const t = useT()
 
   React.useEffect(() => {
@@ -48,12 +58,13 @@ const DialogContent = React.forwardRef<
 
   return (
     <DialogPortal>
-      <DialogOverlay />
+      <DialogOverlay elevated={elevated} />
       <DialogPrimitive.Content
         ref={ref}
         data-dialog-content=""
         className={cn(
-          'fixed inset-x-0 bottom-0 z-modal flex min-h-[50vh] max-h-[70vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg',
+          'fixed inset-x-0 bottom-0 flex min-h-[50vh] max-h-[70vh] w-full translate-x-0 translate-y-0 flex-col gap-4 overflow-y-auto rounded-t-2xl border-t bg-card p-6 shadow-lg',
+          elevated ? 'z-modal-elevated' : 'z-modal',
           'sm:inset-auto sm:left-1/2 sm:top-1/2 sm:min-h-0 sm:h-auto sm:w-full sm:max-w-lg sm:max-h-[90vh] sm:-translate-x-1/2 sm:-translate-y-1/2 sm:rounded-xl sm:border',
           'focus-visible:outline-none data-[state=open]:animate-in data-[state=closed]:animate-out',
           className,

package/src/primitives/email-input.tsx

@@ -0,0 +1,36 @@
+"use client"
+
+import * as React from 'react'
+import { Mail } from 'lucide-react'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { Input, type InputProps } from './input'
+
+export type EmailInputProps = Omit<InputProps, 'leftIcon' | 'type'> & {
+  /** Show the leading Mail icon. Defaults to `true` per Figma `Text Input [1.1]` Email variant. */
+  showIcon?: boolean
+}
+
+/**
+ * Email input matching Figma `Text Input [1.1]` (node `266:5251`) **Email** variant — a thin
+ * `Input` wrapper that hardcodes `type="email"`, `inputMode="email"`, `autoComplete="email"`,
+ * and renders a leading `Mail` icon by default. Placeholder defaults to an auto-translated
+ * `ui.inputs.emailInput.placeholder`.
+ */
+export const EmailInput = React.forwardRef<HTMLInputElement, EmailInputProps>(
+  ({ showIcon = true, placeholder, ...props }, ref) => {
+    const t = useT()
+    const resolvedPlaceholder = placeholder ?? t('ui.inputs.emailInput.placeholder', 'name@example.com')
+    return (
+      <Input
+        ref={ref}
+        type="email"
+        inputMode="email"
+        autoComplete="email"
+        placeholder={resolvedPlaceholder}
+        leftIcon={showIcon ? <Mail aria-hidden="true" /> : undefined}
+        {...props}
+      />
+    )
+  },
+)
+EmailInput.displayName = 'EmailInput'

package/src/primitives/password-input.tsx

@@ -0,0 +1,100 @@
+"use client"
+
+import * as React from 'react'
+import { Eye, EyeOff, Lock } from 'lucide-react'
+import type { VariantProps } from 'class-variance-authority'
+import { useT } from '@open-mercato/shared/lib/i18n/context'
+import { cn } from '@open-mercato/shared/lib/utils'
+import { inputWrapperVariants, inputElementVariants } from './input'
+
+export type PasswordInputProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'type'> &
+  VariantProps<typeof inputWrapperVariants> & {
+    /** Render the leading lock icon per Figma `Text Input [1.1]` Password variant. Defaults to `true`. */
+    showLockIcon?: boolean
+    /** Allow the user to toggle reveal (eye / eye-off). Defaults to `true`. */
+    revealable?: boolean
+    /** Optional controlled reveal state (otherwise managed internally). */
+    revealed?: boolean
+    /** Called when the reveal state changes. */
+    onRevealedChange?: (next: boolean) => void
+    /** Optional className on the wrapper. */
+    className?: string
+    /** Optional className on the inner `<input>`. */
+    inputClassName?: string
+    /** Translated aria-label for the reveal button when password is hidden. */
+    showLabel?: string
+    /** Translated aria-label for the reveal button when password is shown. */
+    hideLabel?: string
+  }
+
+/**
+ * Password input matching Figma `Text Input [1.1]` (node `266:5251`) **Password** variant — a
+ * trailing `Eye` / `EyeOff` toggle that switches the inner `<input>`'s `type` between `"password"`
+ * (default) and `"text"`. The toggle is a proper `<button>` (focusable, screen-reader labelled).
+ *
+ * Internally managed reveal state when `revealed` / `onRevealedChange` are not passed. Otherwise
+ * the consumer owns the toggle state (useful for "show password" master toggle on login screens).
+ */
+export const PasswordInput = React.forwardRef<HTMLInputElement, PasswordInputProps>(
+  (
+    {
+      className,
+      inputClassName,
+      size,
+      showLockIcon = true,
+      revealable = true,
+      revealed: revealedProp,
+      onRevealedChange,
+      showLabel,
+      hideLabel,
+      disabled,
+      ...props
+    },
+    ref,
+  ) => {
+    const t = useT()
+    const resolvedShowLabel = showLabel ?? t('ui.inputs.passwordInput.show', 'Show password')
+    const resolvedHideLabel = hideLabel ?? t('ui.inputs.passwordInput.hide', 'Hide password')
+    const [internalRevealed, setInternalRevealed] = React.useState(false)
+    const isControlled = revealedProp !== undefined
+    const revealed = isControlled ? revealedProp! : internalRevealed
+
+    const toggleRevealed = React.useCallback(() => {
+      const next = !revealed
+      if (!isControlled) setInternalRevealed(next)
+      onRevealedChange?.(next)
+    }, [revealed, isControlled, onRevealedChange])
+
+    return (
+      <div className={cn(inputWrapperVariants({ size }), className)} data-slot="password-input-wrapper">
+        {showLockIcon ? (
+          <Lock className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+        ) : null}
+        <input
+          ref={ref}
+          type={revealed ? 'text' : 'password'}
+          disabled={disabled}
+          className={cn(inputElementVariants({ size }), inputClassName)}
+          {...props}
+        />
+        {revealable ? (
+          <button
+            type="button"
+            onClick={toggleRevealed}
+            aria-label={revealed ? resolvedHideLabel : resolvedShowLabel}
+            aria-pressed={revealed}
+            disabled={disabled}
+            className="flex shrink-0 items-center justify-center rounded-sm text-muted-foreground transition-colors hover:text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring/40 disabled:cursor-not-allowed disabled:opacity-50"
+          >
+            {revealed ? (
+              <EyeOff className="size-4" aria-hidden="true" />
+            ) : (
+              <Eye className="size-4" aria-hidden="true" />
+            )}
+          </button>
+        ) : null}
+      </div>
+    )
+  },
+)
+PasswordInput.displayName = 'PasswordInput'