@open-mercato/ui 0.6.1-develop.3278.1.a4d26475e4 → 0.6.1-develop.3291.1.6fad645fd0

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/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'

package/src/primitives/search-input.tsx

@@ -0,0 +1,87 @@
+"use client"
+
+import * as React from 'react'
+import { Search, X } 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 SearchInputProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'type' | 'onChange'> &
+  VariantProps<typeof inputWrapperVariants> & {
+    /** Controlled value. */
+    value: string
+    /** Called on every keystroke with the new value. */
+    onChange: (next: string) => void
+    /**
+     * Called when the user presses the trailing × button.
+     * Defaults to `onChange('')` — pass an explicit handler to also reset adjacent state
+     * (e.g. cancel an in-flight request, reset paging).
+     */
+    onClear?: () => void
+    /** Show the trailing × button when the value is non-empty. Defaults to `true`. */
+    clearable?: boolean
+    /** Optional className on the wrapper. */
+    className?: string
+    /** Optional className on the inner `<input>`. */
+    inputClassName?: string
+    /** Translated aria-label for the clear button. Defaults to `t('ui.inputs.searchInput.clear', 'Clear search')`. */
+    clearLabel?: string
+  }
+
+/**
+ * Search input matching Figma `Text Input [1.1]` (node `266:5251`) **Search** variant — a leading
+ * `Search` icon, the text input, and an optional trailing `X` button to clear the field. Built on
+ * the shared `inputWrapperVariants` / `inputElementVariants` CVA so the visual contract stays in
+ * sync with the foundation `Input` primitive.
+ *
+ * The clear button is rendered as a proper `<button>` (not inside an `aria-hidden` decorative
+ * span), so it remains keyboard-focusable and screen-reader-accessible.
+ */
+export const SearchInput = React.forwardRef<HTMLInputElement, SearchInputProps>(
+  ({ className, inputClassName, size, value, onChange, onClear, clearable = true, clearLabel, placeholder, disabled, ...props }, ref) => {
+    const t = useT()
+    const resolvedPlaceholder = placeholder ?? t('ui.inputs.searchInput.placeholder', 'Search…')
+    const resolvedClearLabel = clearLabel ?? t('ui.inputs.searchInput.clear', 'Clear search')
+    const showClear = clearable && value.length > 0 && !disabled
+
+    const handleClear = React.useCallback(() => {
+      if (onClear) onClear()
+      else onChange('')
+    }, [onChange, onClear])
+
+    return (
+      <div className={cn(inputWrapperVariants({ size }), className)} data-slot="search-input-wrapper">
+        <Search className="size-4 shrink-0 text-muted-foreground" aria-hidden="true" />
+        <input
+          ref={ref}
+          type="search"
+          inputMode="search"
+          autoComplete="off"
+          placeholder={resolvedPlaceholder}
+          value={value}
+          onChange={(event) => onChange(event.target.value)}
+          disabled={disabled}
+          className={cn(
+            inputElementVariants({ size }),
+            // Disable the native search clear button — we render our own.
+            '[&::-webkit-search-cancel-button]:appearance-none [&::-webkit-search-decoration]:appearance-none',
+            inputClassName,
+          )}
+          {...props}
+        />
+        {showClear ? (
+          <button
+            type="button"
+            onClick={handleClear}
+            aria-label={resolvedClearLabel}
+            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"
+          >
+            <X className="size-4" aria-hidden="true" />
+          </button>
+        ) : null}
+      </div>
+    )
+  },
+)
+SearchInput.displayName = 'SearchInput'

package/src/primitives/select.tsx

@@ -44,6 +44,46 @@ const SelectTrigger = React.forwardRef<
 ))
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName
 
+/**
+ * Leading visual slot inside a `SelectTrigger` — render flags, avatars,
+ * provider logos, brand marks, or company icons before the `<SelectValue>`.
+ *
+ * Mirrors the Type variants in the Figma DS (Basic / Country / Avatar /
+ * Provider / Brand / Company — Figma `Select [1.1]`, node `270:1085`).
+ *
+ * Render inside `SelectTrigger`, BEFORE the `<SelectValue>`:
+ *
+ * ```tsx
+ * <SelectTrigger>
+ *   <SelectTriggerLeading><Avatar size="sm" label={user.name} /></SelectTriggerLeading>
+ *   <SelectValue placeholder="Select user" />
+ * </SelectTrigger>
+ * ```
+ *
+ * Sizing follows the trigger: icons render `size-4`, images render `size-5`
+ * by default — pass your own classes on the inner element when you need a
+ * different visual size (e.g. country flags `h-3 w-4`).
+ */
+const SelectTriggerLeading = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(({ className, children, ...props }, ref) => (
+  <span
+    ref={ref}
+    data-slot="select-trigger-leading"
+    aria-hidden="true"
+    className={cn(
+      'flex shrink-0 items-center justify-center',
+      '[&>svg]:size-4 [&>svg]:shrink-0 [&>img]:size-5 [&>img]:shrink-0',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </span>
+))
+SelectTriggerLeading.displayName = 'SelectTriggerLeading'
+
 const SelectScrollUpButton = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
@@ -92,7 +132,7 @@ const SelectContent = React.forwardRef<
       <SelectScrollUpButton />
       <SelectPrimitive.Viewport
         className={cn(
-          'p-1 max-h-[var(--radix-select-content-available-height)] overflow-y-auto',
+          'p-2 max-h-[var(--radix-select-content-available-height)] overflow-y-auto',
           position === 'popper' && 'w-full min-w-[var(--radix-select-trigger-width)]'
         )}
       >
@@ -110,7 +150,11 @@ const SelectLabel = React.forwardRef<
 >(({ className, ...props }, ref) => (
   <SelectPrimitive.Label
     ref={ref}
-    className={cn('px-2 py-1.5 text-overline uppercase text-muted-foreground', className)}
+    className={cn(
+      'px-2 pt-2 pb-1 text-overline font-semibold uppercase tracking-wider text-muted-foreground/80',
+      'select-none',
+      className
+    )}
     {...props}
   />
 ))
@@ -123,7 +167,7 @@ const SelectItem = React.forwardRef<
   <SelectPrimitive.Item
     ref={ref}
     className={cn(
-      'relative flex w-full cursor-default select-none items-center gap-2 rounded-sm py-1.5 pl-2 pr-8 text-sm outline-none transition-colors',
+      'relative flex w-full cursor-default select-none items-center gap-2 rounded-md p-2 text-sm outline-none transition-colors',
       'focus:bg-muted focus:text-foreground',
       'data-[state=checked]:bg-muted/70 data-[state=checked]:text-foreground',
       'data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
@@ -132,18 +176,59 @@ const SelectItem = React.forwardRef<
     )}
     {...props}
   >
-    <span className="flex-1 truncate">
-      <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
-    </span>
-    <span className="absolute right-2 flex h-3.5 w-3.5 items-center justify-center">
-      <SelectPrimitive.ItemIndicator>
-        <Check className="size-4 text-foreground" aria-hidden="true" />
-      </SelectPrimitive.ItemIndicator>
-    </span>
+    <SelectPrimitive.ItemText asChild>
+      <span className="flex min-w-0 flex-1 items-center gap-2 truncate">
+        {children}
+      </span>
+    </SelectPrimitive.ItemText>
+    <SelectPrimitive.ItemIndicator className="ml-auto flex shrink-0 items-center justify-center">
+      <Check className="size-4 text-foreground" aria-hidden="true" />
+    </SelectPrimitive.ItemIndicator>
   </SelectPrimitive.Item>
 ))
 SelectItem.displayName = SelectPrimitive.Item.displayName
 
+/**
+ * Leading visual slot inside a `SelectItem` — mirror of `SelectTriggerLeading`
+ * for dropdown rows. Compose with the DS `Avatar`, country flag images, or
+ * `lucide-react` icons.
+ *
+ * Render inside the `<SelectItem>` children, before the row label:
+ *
+ * ```tsx
+ * <SelectItem value="us">
+ *   <SelectItemLeading><span className="h-3 w-4 rounded-sm overflow-hidden">🇺🇸</span></SelectItemLeading>
+ *   United States
+ * </SelectItem>
+ * ```
+ *
+ * NOTE: `SelectPrimitive.ItemText` only reads the text node siblings for the
+ * trigger preview — wrap the leading slot OUTSIDE `ItemText` (which this
+ * primitive does by default, since `SelectItem`'s `children` are placed inside
+ * `<SelectPrimitive.ItemText>` only via the inner `<span className="flex-1
+ * truncate">`). Place the `SelectItemLeading` alongside the row text and the
+ * label will read correctly in the trigger preview.
+ */
+const SelectItemLeading = React.forwardRef<
+  HTMLSpanElement,
+  React.HTMLAttributes<HTMLSpanElement>
+>(({ className, children, ...props }, ref) => (
+  <span
+    ref={ref}
+    data-slot="select-item-leading"
+    aria-hidden="true"
+    className={cn(
+      'flex shrink-0 items-center justify-center',
+      '[&>svg]:size-4 [&>svg]:shrink-0 [&>img]:size-5 [&>img]:shrink-0',
+      className
+    )}
+    {...props}
+  >
+    {children}
+  </span>
+))
+SelectItemLeading.displayName = 'SelectItemLeading'
+
 const SelectSeparator = React.forwardRef<
   React.ElementRef<typeof SelectPrimitive.Separator>,
   React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
@@ -191,9 +276,11 @@ export {
   SelectGroup,
   SelectValue,
   SelectTrigger,
+  SelectTriggerLeading,
   SelectContent,
   SelectLabel,
   SelectItem,
+  SelectItemLeading,
   SelectSeparator,
   SelectScrollUpButton,
   SelectScrollDownButton,

package/src/primitives/website-input.tsx

@@ -0,0 +1,72 @@
+"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'
+
+export type WebsiteInputProps = Omit<React.ComponentPropsWithoutRef<'input'>, 'size' | 'type'> &
+  VariantProps<typeof inputWrapperVariants> & {
+    /** Protocol shown in the left prefix box. Defaults to `'https://'` per Figma. */
+    prefix?: string
+    /** Hide the prefix box entirely (consumer wants a bare URL input). */
+    showPrefix?: boolean
+    /** Optional className on the wrapper. */
+    className?: string
+    /** Optional className on the inner `<input>`. */
+    inputClassName?: string
+  }
+
+/**
+ * Website input matching Figma `Text Input [1.1]` (node `266:5251`) **Website** variant — a left
+ * prefix box with the protocol text (default `'https://'`), a vertical divider, then the URL text
+ * input. Built on the shared `inputWrapperVariants` / `inputElementVariants` CVA so the visual
+ * contract matches the foundation `Input` primitive.
+ *
+ * The prefix is **display-only** — the inner `<input>` value contains ONLY the host/path portion
+ * (e.g. `'www.example.com/path'`). Compose the full URL at the consumer boundary if needed.
+ */
+export const WebsiteInput = React.forwardRef<HTMLInputElement, WebsiteInputProps>(
+  ({ className, inputClassName, size, prefix = 'https://', showPrefix = true, placeholder, disabled, ...props }, ref) => {
+    const t = useT()
+    const resolvedPlaceholder = placeholder ?? t('ui.inputs.websiteInput.placeholder', 'www.example.com')
+    return (
+      <div
+        className={cn(
+          inputWrapperVariants({ size }),
+          // Override default px so prefix box can sit flush left.
+          'px-0 overflow-hidden',
+          className,
+        )}
+        data-slot="website-input-wrapper"
+      >
+        {showPrefix ? (
+          <>
+            <span
+              className="flex shrink-0 items-center self-stretch border-r border-input px-3 text-sm text-muted-foreground select-none"
+              aria-hidden="true"
+            >
+              {prefix}
+            </span>
+          </>
+        ) : null}
+        <input
+          ref={ref}
+          type="url"
+          inputMode="url"
+          autoComplete="url"
+          placeholder={resolvedPlaceholder}
+          disabled={disabled}
+          className={cn(
+            inputElementVariants({ size }),
+            'px-3',
+            inputClassName,
+          )}
+          {...props}
+        />
+      </div>
+    )
+  },
+)
+WebsiteInput.displayName = 'WebsiteInput'