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

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/tag.tsx

@@ -15,6 +15,7 @@ const tagVariants = cva(
         info:    'border-status-info-border bg-status-info-bg text-status-info-text',
         neutral: 'border-status-neutral-border bg-status-neutral-bg text-status-neutral-text',
         brand:   'border-brand-violet/30 bg-brand-violet/10 text-brand-violet',
+        pink:    'border-status-pink-border bg-status-pink-bg text-status-pink-text',
       },
       shape: {
         pill: 'rounded-full px-2.5 py-0.5',
@@ -33,9 +34,10 @@ const dotColorMap: Record<TagVariant, string> = {
   info:    'bg-status-info-icon',
   neutral: 'bg-status-neutral-icon',
   brand:   'bg-brand-violet',
+  pink:    'bg-status-pink-icon',
 }
 
-export type TagVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'brand'
+export type TagVariant = 'default' | 'success' | 'warning' | 'error' | 'info' | 'neutral' | 'brand' | 'pink'
 
 export type TagShape = 'pill' | 'square'
 

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'